Feat: Input component

Author: garronej

COMPONENTS.md

@@ -41,3 +41,4 @@
 -   [ ] Download
 -   [ ] Transcription
 -   [x] Tile
+-   [x] Input

README.fr.md

@@ -48,7 +48,7 @@ DSFR en pur JavaScript/CSS.
 -   [x] la plupart des composants peuvent être rendus directement sur le serveur (voir [RSC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)). Les autres sont étiquetées `"use client";`.
 -   [x] [Intégration clef en main pour les différents frameworks de développement: vite, Next.js, y compris la version beta de Next 13 (configuration AppDir) et Create React App](https://react-dsfr.etalab.studio/) si votre
         framework n'est pas supporter, il suffit de demander notre, nous avons pour but de couvrir tous les cas d'usage effectifs.
--   [ ] tout [les composants de référence implémenter](https://www.systeme-de-design.gouv.fr/elements-d-interface). À ce jour 14/42, [see details](COMPONENTS.md)
+-   [ ] tout [les composants de référence implémenter](https://www.systeme-de-design.gouv.fr/elements-d-interface). À ce jour 15/42, [see details](COMPONENTS.md)
 -   [x] seulement le code des composants que vous utilisez effectivement sera inclus dans votre projet final.
 -   [x] Intégration facultative avec [MUI](https://mui.com/). Si vous utilisez des composants MUI ils seront automatiquement adaptés pour ressembler à des composants DSFR.  
          Voir là [documentation](https://react-dsfr.etalab.studio/mui-integration).

README.md

@@ -45,7 +45,7 @@ This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.c
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] Most components are server component ready. The others are labeled with `"use client";`
 -   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://react-dsfr.etalab.studio/).
--   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (14/42, [see details](COMPONENTS.md))
+-   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (15/42, [see details](COMPONENTS.md))
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
         be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://react-dsfr.etalab.studio/mui-integration).

src/Input.tsx

@@ -27,13 +27,13 @@ export namespace InputProps {
     };
 
     export type WithoutSpecialState = {
-        state?: never;
+        state?: "default";
         stateRelatedMessage?: never;
     };
 
     export type WithoutTextArea = {
         /** Default: false */
-        isTextArea?: false;
+        textArea?: false;
         /** Props forwarded to the underlying <input /> element */
         nativeInputProps?: InputHTMLAttributes<HTMLInputElement>;
 
@@ -42,7 +42,7 @@ export namespace InputProps {
 
     export type WithTextArea = {
         /** Default: false */
-        isTextArea: true;
+        textArea: true;
         /** Props forwarded to the underlying <textarea /> element */
         nativeTextAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
 
@@ -62,18 +62,18 @@ export const Input = memo(
             disabled = false,
             iconId: iconId_props,
             classes = {},
-            state,
+            state = "default",
             stateRelatedMessage,
-            isTextArea = false,
+            textArea = false,
             nativeTextAreaProps,
             nativeInputProps,
             ...rest
         } = props;
 
         const nativeInputOrTextAreaProps =
-            (isTextArea ? nativeTextAreaProps : nativeInputProps) ?? {};
+            (textArea ? nativeTextAreaProps : nativeInputProps) ?? {};
 
-        const NativeInputOrTexArea = isTextArea ? "textarea" : "input";
+        const NativeInputOrTexArea = textArea ? "textarea" : "input";
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -91,16 +91,17 @@ export const Input = memo(
                     fr.cx(
                         "fr-input-group",
                         disabled && "fr-input-group--disabled",
-                        state !== undefined &&
-                            (() => {
-                                switch (state) {
-                                    case "error":
-                                        return "fr-input-group--error";
-                                    case "success":
-                                        return "fr-input-group--valid";
-                                }
-                                assert<Equals<typeof state, never>>(false);
-                            })()
+                        (() => {
+                            switch (state) {
+                                case "error":
+                                    return "fr-input-group--error";
+                                case "success":
+                                    return "fr-input-group--valid";
+                                case "default":
+                                    return undefined;
+                            }
+                            assert<Equals<typeof state, never>>(false);
+                        })()
                     ),
                     classes.root,
                     className
@@ -119,16 +120,17 @@ export const Input = memo(
                             className={cx(
                                 fr.cx(
                                     "fr-input",
-                                    state !== undefined &&
-                                        (() => {
-                                            switch (state) {
-                                                case "error":
-                                                    return "fr-input--error";
-                                                case "success":
-                                                    return "fr-input--valid";
-                                            }
-                                            assert<Equals<typeof state, never>>(false);
-                                        })()
+                                    (() => {
+                                        switch (state) {
+                                            case "error":
+                                                return "fr-input--error";
+                                            case "success":
+                                                return "fr-input--valid";
+                                            case "default":
+                                                return undefined;
+                                        }
+                                        assert<Equals<typeof state, never>>(false);
+                                    })()
                                 ),
                                 classes.nativeInputOrTextArea
                             )}
@@ -151,7 +153,7 @@ export const Input = memo(
                         </div>
                     );
                 })()}
-                {stateRelatedMessage !== undefined && (
+                {state !== "default" && (
                     <p
                         id={messageId}
                         className={cx(

stories/Input.stories.tsx

@@ -1,19 +1,69 @@
 import { Input } from "../dist/Input";
+import type { InputProps } from "../dist/Input";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { Input },
     "description": `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Input.tsx)`,
+    "argTypes": {
+        "disabled": {
+            "control": { "type": "boolean" }
+        },
+        "iconId": {
+            "options": (() => {
+                const options = ["fr-icon-checkbox-circle-line", "ri-ancient-gate-fill"] as const;
+
+                assert<
+                    typeof options[number] extends NonNullable<InputProps["iconId"]> ? true : false
+                >();
+
+                return options;
+            })(),
+            "control": { "type": "radio" }
+        },
+        "state": {
+            "options": (() => {
+                const options = ["default", "success", "error"] as const;
+
+                assert<Equals<typeof options[number] | undefined, InputProps["state"]>>();
+
+                return options;
+            })(),
+            "control": { "type": "radio" }
+        },
+        "textArea": {
+            "control": { "type": "boolean" }
+        },
+        "nativeInputProps": {
+            "description": `An object that is forwarded as props to te underlying native \`<input />\` element.  
+                This is where you pass the \`name\` prop or \`onKeyDown\` for example.`,
+            "control": { "type": null }
+        },
+        "nativeTextAreaProps": {
+            "description": `Like the \`nativeInputProps\` but when \`textArea\` is \`true\``,
+            "control": { "type": null }
+        }
+    },
     "disabledProps": ["lang"]
 });
 
 export default meta;
 
 export const Default = getStory({
+    "label": "Label champ de saisie",
+    "hintText": "Texte de description",
+    "state": "default",
+    "stateRelatedMessage": "Text de validation / d'explication de l'erreur" as unknown as undefined,
+    "textArea": false
+});
+
+export const Basic = getStory({
     "label": "Label champ de saisie"
 });
 
@@ -41,7 +91,7 @@ export const WithHint = getStory({
 
 export const TextArea = getStory({
     "label": "Label champs de saisie",
-    "isTextArea": true
+    "textArea": true
 });
 
 export const WithIcon = getStory({