From 251f2715a2edea310561b793b2de67270c69b13d Mon Sep 17 00:00:00 2001
From: Mihoub <debache.mihoub@gmail.com>
Date: Wed, 2 Oct 2024 14:16:31 +0200
Subject: [PATCH] fix(checkbox): add checked props and rework stories

---
 .../src/pages/components/Checkboxes.tsx       | 320 ++++++++----------
 src/components/Checkbox/Checkbox.tsx          |  91 +++--
 2 files changed, 192 insertions(+), 219 deletions(-)

diff --git a/example-ts/src/pages/components/Checkboxes.tsx b/example-ts/src/pages/components/Checkboxes.tsx
index c561038..4bbcb3e 100644
--- a/example-ts/src/pages/components/Checkboxes.tsx
+++ b/example-ts/src/pages/components/Checkboxes.tsx
@@ -1,140 +1,39 @@
-import { Checkbox, Fieldset, Container, Title, Text, Row, Col, Breadcrumb, Link } from '@dataesr/dsfr-plus';
+import {
+  Checkbox,
+  Fieldset,
+  Container,
+  Title,
+  Text,
+  Row,
+  Col,
+  Breadcrumb,
+  Link,
+} from "@dataesr/dsfr-plus";
+import Playground from "../../components/Playground";
+import { useState } from "react";
 
-import Playground from '../../components/Playground';
+const checkboxData = [
+  { value: "1", label: "Checkbox 1", hint: "Je suis la valeur numéro 1" },
+  { value: "2", label: "Checkbox 2", hint: "Je suis la valeur numéro 2" },
+  { value: "3", label: "Checkbox 3", hint: "Je suis la valeur numéro 3" },
+];
 
-const checkboxSimple = `
-<Checkbox value="1" name="checker" label="Checkbox 1" />
-`;
-const checkboxDefaultSimple = `
-<Checkbox defaultChecked value="1" name="checker" label="Checkbox 1" />
-`;
-
-const state = `
-<Fieldset
-  hint="Moi je suis en succès"
-  messageType="valid"
-  message="Bien joué !"
-  legend="Un groupe de boutons Checkbox"
->
-  <Checkbox defaultChecked value="1" name="checker" label="Checkbox 1" />
-  <Checkbox value="2" name="checker" label="Checkbox 2" />
-  <Checkbox value="3" name="checker" label="Checkbox 3" />
-</Fieldset>
-`;
-
-const disabled = `
-<Fieldset
-  disabled
-  hint="Je ne suis pas cliquable"
-  legend="Un groupe de boutons Checkbox"
->
-  <Checkbox value="1" name="checker" label="Checkbox 1" />
-  <Checkbox value="2" name="checker" label="Checkbox 2" />
-  <Checkbox value="3" name="checker" label="Checkbox 3" />
-</Fieldset>
-`;
-
-const hint = `
-<Fieldset
-  hint="Texte d'explication pour tout le champ"
-  legend="Un groupe de boutons Checkbox"
->
-  <Checkbox
-    hint="Je suis la valeur numéro 1"
-    value="1"
-    name="checker"
-    label="Checkbox 1" />
-  <Checkbox
-    hint="Je suis la valeur numéro 2"
-    value="2"
-    name="checker"
-    label="Checkbox 2" />
-  <Checkbox
-    hint="Je suis la valeur numéro 3"
-    value="3"
-    name="checker"
-    label="Checkbox 3" />
-</Fieldset>
-`;
-
-const inline = `
-<Fieldset isInline hint="Je suis en ligne" legend="Un groupe de boutons Checkbox">
-  <Checkbox 
-    hint="Je suis la valeur numéro 1"
-    value="1"
-    name="checker"
-    label="Checkbox 1"
-  />
-  <Checkbox 
-    hint="Je suis la valeur numéro 2"
-    value="2"
-    name="checker"
-    label="Checkbox 2"
-  />
-  <Checkbox 
-    hint="Je suis la valeur numéro 3"
-    value="3"
-    name="checker"
-    label="Checkbox 3"
-  />
-</Fieldset>
-`;
-const checkboxGroup = `
-<Fieldset legend="Un groupe de boutons Checkbox">
-  <Checkbox
-    value="1"
-    name="checker"
-    label="Checkbox 1"
-  />
-  <Checkbox
-    value="2"
-    name="checker"
-    label="Checkbox 2"
-  />
-  <Checkbox
-    value="3"
-    name="checker"
-    label="Checkbox 3"
-  />
-</Fieldset>
-`;
-const checkboxGroupSM = `
-<Fieldset isInline legend="Un groupe de boutons Checkbox">
-  <Checkbox
-    size="sm"
-    value="1"
-    name="checker"
-    label="Checkbox 1"
-  />
-  <Checkbox
-    size="sm"
-    value="2"
-    name="checker"
-    label="Checkbox 2"
-  />
-  <Checkbox
-    size="sm"
-    value="3"
-    name="checker"
-    label="Checkbox 3"
-  />
-</Fieldset>
-`;
+const useCheckboxState = (initialState: boolean) => {
+  const [isChecked, setIsChecked] = useState(initialState);
+  const handleChange = (event: { target: { checked: boolean } }) => {
+    setIsChecked(event.target.checked);
+  };
+  return { isChecked, handleChange };
+};
 
 export function Checkboxes() {
+  const checkboxStates = checkboxData.map((_, index) =>
+    useCheckboxState(index === 0 || index === 2)
+  );
+
   return (
     <Container fluid className="fr-mb-5w">
       <Row>
-        <Fieldset
-          hint="Moi je suis en succès"
-          messageType="valid"
-          message="Bien joué !"
-          legend="Un groupe de boutons Checkbox"
-        >
-          <Checkbox value="1" name="checker" label="Checkbox 1" defaultChecked />
-          <Checkbox value="2" name="checker" label="Checkbox 2" />
-          <Checkbox value="3" name="checker" label="Checkbox 3" />
-        </Fieldset>
         <Breadcrumb>
           <Link href="/">Accueil</Link>
           <Link href="/composants">Composants</Link>
@@ -145,69 +44,120 @@ export function Checkboxes() {
         <Col xs={12}>
           <Title as="h1">Case à cocher - Checkbox</Title>
           <Text>
-            Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options dans une liste.
-            Elles sont utilisées pour effectuer des sélections multiples (de 0 à N éléments) ou bien pour permettre
-            un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.
-          </Text>
-          <Text>
-            La case à cocher peut être utilisée seule ou en liste.
-            Évitez les listes de plus de 5 éléments et lorsque vous souhaitez contraindre
-            le choix à un seul élément - utilisez les boutons radio.
-          </Text>
-        </Col>
-        <Col xs={12}>
-          <Title as="h2" look="h4">Bouton Checkbox simple</Title>
-          <Playground code={checkboxSimple} scope={{ Checkbox }} defaultShowCode />
-        </Col>
-        <Col xs={12}>
-          <Title as="h2" look="h4">Checkbox - État cochée par défaut</Title>
-          <Playground code={checkboxDefaultSimple} scope={{ Checkbox }} defaultShowCode />
-        </Col>
-        <Col xs={12}>
-          <Title as="h2" look="h4">Groupe de boutons Checkbox</Title>
-          <Text>
-            Comme pour le composant Checkbox, plusieurs boutons Checkbox sont
-            regroupés sous un composant `Fieldset`, qui permet de gérer la
-            légende ainsi que l'erreur sur le champ.
-          </Text>
-          <Playground code={checkboxGroup} scope={{ Checkbox, Fieldset }} />
-        </Col>
-        <Col xs={12}>
-          <Title as="h2" look="h4">Gestion de l'état</Title>
-          <Text>
-            Vous devez gérer l'état du champ directement dans le composant `Fieldset` :
+            Les cases à cocher permettent à l’utilisateur de sélectionner une ou
+            plusieurs options dans une liste.
           </Text>
-          <Playground code={state} scope={{ Checkbox, Fieldset }} />
-        </Col>
-        <Col xs={12}>
-          <Title as="h2" look="h4">Avec des textes d'explication</Title>
-          <Text>
-            Vous pouvez ajouter des textes explicatifs dans chaque bouton Checkbox et dans le Fieldset :
-          </Text>
-          <Playground code={hint} scope={{ Checkbox, Fieldset }} />
         </Col>
+
+        {/* Groupe de boutons Checkbox */}
         <Col xs={12}>
-          <Title as="h2" look="h4">Désactivé</Title>
-          <Text>
-            Appliquez simplement l'attribut `disabled` sur le Fieldset :
-          </Text>
-          <Playground code={disabled} scope={{ Checkbox, Fieldset }} />
+          <Title as="h2" look="h4">
+            Groupe de boutons Checkbox
+          </Title>
+
+          <Playground
+            code={`
+              <Fieldset
+                hint="Moi je suis en succès"
+                messageType="valid"
+                message="Bien joué !"
+                legend="Un groupe de boutons Checkbox"
+              >
+                ${checkboxData
+                  .map(
+                    (checkbox, index) => `<Checkbox
+                    value="${checkbox.value}"
+                    label="${checkbox.label}"
+                    checked={${checkboxStates[index].isChecked}}
+                    onChange={handleCheckboxChange${checkbox.value}}
+                  />`
+                  )
+                  .join("\n")}
+              </Fieldset>
+            `}
+            scope={{
+              Checkbox,
+              Fieldset,
+              checkboxData,
+              handleCheckboxChange1: checkboxStates[0].handleChange,
+              handleCheckboxChange2: checkboxStates[1].handleChange,
+              handleCheckboxChange3: checkboxStates[2].handleChange,
+            }}
+          />
         </Col>
+
+        {/* Checkbox avec Hint */}
         <Col xs={12}>
-          <Title as="h2" look="h4">En ligne</Title>
-          <Text>
-            Vous pouvez ajouter la propriété `isInline` pour afficher les boutons Checkbox sur une ligne.
-          </Text>
-          <Playground code={inline} scope={{ Checkbox, Fieldset }} />
+          <Title as="h2" look="h4">
+            Checkbox avec Hint
+          </Title>
+
+          <Playground
+            code={`
+              <Fieldset
+                hint="Texte d'explication pour tout le champ"
+                legend="Un groupe de boutons Checkbox avec des hints"
+              >
+                ${checkboxData
+                  .map(
+                    (checkbox, index) => `<Checkbox
+                    value="${checkbox.value}"
+                    label="${checkbox.label}"
+                    checked={${checkboxStates[index].isChecked}}
+                    onChange={handleCheckboxChange${checkbox.value}}
+                    hint="${checkbox.hint}"
+                  />`
+                  )
+                  .join("\n")}
+              </Fieldset>
+            `}
+            scope={{
+              Checkbox,
+              Fieldset,
+              checkboxData,
+              handleCheckboxChange1: checkboxStates[0].handleChange,
+              handleCheckboxChange2: checkboxStates[1].handleChange,
+              handleCheckboxChange3: checkboxStates[2].handleChange,
+            }}
+          />
         </Col>
+
+        {/* Checkbox avec Size */}
         <Col xs={12}>
-          <Title as="h2" look="h4">En taille "sm"</Title>
-          <Text>
-            Vous pouvez réduire la taille des checkboxes avec l'option `size`.
-          </Text>
-          <Playground code={checkboxGroupSM} scope={{ Checkbox, Fieldset }} />
+          <Title as="h2" look="h4">
+            Checkbox avec Taille
+          </Title>
+
+          <Playground
+            code={`
+              <Fieldset
+                hint="Les boutons Checkbox avec une taille spécifique"
+                legend="Un groupe de boutons Checkbox avec petite taille"
+              >
+                ${checkboxData
+                  .map(
+                    (checkbox, index) => `<Checkbox
+                    value="${checkbox.value}"
+                    label="${checkbox.label}"
+                    checked={${checkboxStates[index].isChecked}}
+                    onChange={handleCheckboxChange${checkbox.value}}
+                    size="sm"
+                  />`
+                  )
+                  .join("\n")}
+              </Fieldset>
+            `}
+            scope={{
+              Checkbox,
+              Fieldset,
+              checkboxData,
+              handleCheckboxChange1: checkboxStates[0].handleChange,
+              handleCheckboxChange2: checkboxStates[1].handleChange,
+              handleCheckboxChange3: checkboxStates[2].handleChange,
+            }}
+          />
         </Col>
       </Row>
     </Container>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 9e93d4c..0db3bff 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,12 +1,12 @@
-import { forwardRef, useId } from 'react';
-import cn, { Argument } from 'classnames';
-import { Merge } from '../../types/polymophic';
+import { forwardRef, useId } from "react";
+import cn, { Argument } from "classnames";
+import { Merge } from "../../types/polymophic";
 
 type CheckboxCss = {
   label?: Argument;
   labelHint?: Argument;
   input?: Argument;
-}
+};
 
 type CheckboxBaseProps = {
   className?: Argument;
@@ -14,35 +14,58 @@ type CheckboxBaseProps = {
   hint?: string;
   id?: string;
   label?: string;
-  size?: 'sm' | 'md';
-}
+  size?: "sm" | "md";
+  checked?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
 
-export type CheckboxProps = Merge<React.InputHTMLAttributes<HTMLInputElement>, CheckboxBaseProps>;
+export type CheckboxProps = Merge<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  CheckboxBaseProps
+>;
 
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
-  className,
-  css = {},
-  hint,
-  id,
-  label,
-  size,
-  ...props
-}, ref) => {
-  const _id = useId();
-  const checkboxId = id || _id;
-  return (
-    <div className={cn('fr-checkbox-group', { 'fr-checkbox-group--sm': (size === 'sm') }, className)}>
-      <input
-        ref={ref}
-        type="checkbox"
-        id={checkboxId}
-        className={cn(css.input)}
-        {...props}
-      />
-      <label className={cn("fr-label", css.label)} htmlFor={checkboxId}>
-        {label}
-        {hint && <span className={cn("fr-hint-text", css.labelHint)}>{hint}</span>}
-      </label>
-    </div>
-  );
-});
\ No newline at end of file
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      css = {},
+      hint,
+      id,
+      label,
+      size,
+      checked = false,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const _id = useId();
+    const checkboxId = id || _id;
+
+    return (
+      <div
+        className={cn(
+          "fr-checkbox-group",
+          { "fr-checkbox-group--sm": size === "sm" },
+          className
+        )}
+      >
+        <input
+          ref={ref}
+          type="checkbox"
+          id={checkboxId}
+          className={cn(css.input)}
+          checked={checked}
+          onChange={onChange}
+          {...props}
+        />
+        <label className={cn("fr-label", css.label)} htmlFor={checkboxId}>
+          {label}
+          {hint && (
+            <span className={cn("fr-hint-text", css.labelHint)}>{hint}</span>
+          )}
+        </label>
+      </div>
+    );
+  }
+);