testing interraction without embedding in provider

Author: jdv

crowdsec-docs/src/components/InteractiveCheckbox.js

@@ -3,8 +3,8 @@ import React, { useState, useEffect, createContext, useContext } from 'react';
 // Global context to manage checkbox states across all instances
 const CheckboxContext = createContext();
 
-// Provider component to wrap your MDX content
-export const CheckboxProvider = ({ children }) => {
+// Hook to create a standalone checkbox manager
+export const useCheckboxManager = () => {
   const [checkboxStates, setCheckboxStates] = useState({});
   const [manualChecks, setManualChecks] = useState({});
 
@@ -60,14 +60,21 @@ export const CheckboxProvider = ({ children }) => {
     }));
   };
 
+  return {
+    checkboxStates,
+    manualChecks,
+    updateCheckbox,
+    registerCheckbox,
+    isCheckboxChecked
+  };
+};
+
+// Provider component to wrap your MDX content (optional)
+export const CheckboxProvider = ({ children }) => {
+  const checkboxManager = useCheckboxManager();
+
   return (
-    <CheckboxContext.Provider value={{
-      checkboxStates,
-      manualChecks,
-      updateCheckbox,
-      registerCheckbox,
-      isCheckboxChecked
-    }}>
+    <CheckboxContext.Provider value={checkboxManager}>
       {children}
     </CheckboxContext.Provider>
   );
@@ -78,13 +85,17 @@ export const InteractiveCheckbox = ({
   id, 
   references = [], 
   label = '', 
-  className = '' 
+  className = '',
+  manager = null // Accept a manager prop
 }) => {
-  const context = useContext(CheckboxContext);
+  const contextManager = useContext(CheckboxContext);
 
-  // Fallback if context is not available (useful for development/SSR)
-  if (!context) {
-    console.warn('InteractiveCheckbox must be used within a CheckboxProvider');
+  // Use the passed manager or fall back to context, then to a warning fallback
+  const checkboxManager = manager || contextManager;
+  
+  // Fallback if no manager is available
+  if (!checkboxManager) {
+    console.warn('InteractiveCheckbox must either be used within a CheckboxProvider or have a manager prop passed to it');
     return (
       <div className={`inline-flex items-center gap-2 ${className}`}>
         <div
@@ -112,7 +123,7 @@ export const InteractiveCheckbox = ({
     updateCheckbox, 
     registerCheckbox, 
     isCheckboxChecked 
-  } = context;
+  } = checkboxManager;
 
   useEffect(() => {
     if (registerCheckbox) {
@@ -143,7 +154,10 @@ export const InteractiveCheckbox = ({
   };
 
   return (
-    <div className={`inline-flex items-center gap-2 ${className}`}>
+    <div 
+      className={`inline-flex items-center gap-2 ${className}`}
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}
+    >
       <div
         onClick={handleClick}
         style={{
@@ -156,7 +170,8 @@ export const InteractiveCheckbox = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          transition: 'all 0.2s ease'
+          transition: 'all 0.2s ease',
+          flexShrink: 0
         }}
       >
         {isChecked && (
@@ -177,7 +192,14 @@ export const InteractiveCheckbox = ({
       {label && (
         <label
           onClick={handleClick}
-          style={{ cursor: 'pointer', userSelect: 'none' }}
+          style={{ 
+            cursor: 'pointer', 
+            userSelect: 'none',
+            margin: 0,
+            padding: 0,
+            display: 'inline',
+            lineHeight: '1.2'
+          }}
         >
           {label}
         </label>

crowdsec-docs/unversioned/user_guides/interactive_se_install/01_install.mdx

@@ -7,7 +7,8 @@ pagination_next: user_guides/interactive_se_install/se_install_02
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import { CheckboxProvider, InteractiveCheckbox } from '@site/src/components/InteractiveCheckbox.js';
+import { useCheckboxManager, InteractiveCheckbox } from '@site/src/components/InteractiveCheckbox.js';
+export const checkboxManager = useCheckboxManager();
 
 # Interactive Security Engine Installation Guide
 
@@ -72,8 +73,7 @@ Let's check that CrowdSec is running and able to retrieve the community blocklis
 
 #### Enroll your Security Engine into CrowdSec Console 
 For advanced monitoring and trouble shooting the CrowdSec Console is a great tool to visualize your Security Engine's activity and alerts.
-<CheckboxProvider>
-<InteractiveCheckbox id="ConsoleEnroll" label=" Enroll into the console " />
+<InteractiveCheckbox id="ConsoleEnroll" label=" Enroll into the console " manager={checkboxManager} />
 
 - [link to doc]
 - You'll see a confirmation pop up in the console for enrollment if not you might have conectivity issue to the central API [link to troubleshooting section]
@@ -83,8 +83,7 @@ For advanced monitoring and trouble shooting the CrowdSec Console is a great too
 
 #### CrowdSec installation health
 
-<InteractiveCheckbox id="CrowdsecRunning" label="Check that the CrowdSec service is running"  references={["ConsoleEnroll"]} />
-</CheckboxProvider>
+<InteractiveCheckbox id="CrowdsecRunning" label="Check that the CrowdSec service is running"  references={["ConsoleEnroll"]} manager={checkboxManager} />
 ```bash
 systemctl status crowdsec
 ```