refactor(slash): simplification du field form

Dans l'optique de ne plus utiliser de cloneElement, et de simplifier le code, j'ai refacto le code qui pilote les champs *Input. Pour le moment, seul le TextInput utilise ce nouveau code, les autres continuent d'utiliser le LegacyField.
AxaFrance · Jan 30, 2025 · 461a95c · 461a95c
1 parent 96f5b30
commit 461a95c
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 151 deletions.
diff --git a/slash/react/src/Form/Checkbox/CheckboxInput.tsx b/slash/react/src/Form/Checkbox/CheckboxInput.tsx
@@ -1,11 +1,11 @@
 import { ComponentProps, forwardRef } from "react";
 
-import { Field, useOptionsWithId } from "../core";
+import { LegacyField, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
 
 type Props = Omit<
-  ComponentProps<typeof Checkbox> & ComponentProps<typeof Field>,
+  ComponentProps<typeof Checkbox> & ComponentProps<typeof LegacyField>,
   "children" | "placeholder"
 >;
 
@@ -38,7 +38,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, Props>(
     const newOptions = useOptionsWithId(options);
 
     return (
-      <Field
+      <LegacyField
         label={label}
         id={newOptions[0].id}
         message={message}
@@ -57,7 +57,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, Props>(
           ref={inputRef}
           {...checkboxProps}
         />
-      </Field>
+      </LegacyField>
     );
   },
 );

diff --git a/slash/react/src/Form/Choice/ChoiceInput.tsx b/slash/react/src/Form/Choice/ChoiceInput.tsx
@@ -1,9 +1,9 @@
 import { forwardRef, type ComponentProps } from "react";
-import { Field, useInputClassModifier, useOptionsWithId } from "../core";
+import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
 import { Choice } from "./Choice";
 
 type Props = ComponentProps<typeof Choice> &
-  Omit<ComponentProps<typeof Field>, "children">;
+  Omit<ComponentProps<typeof LegacyField>, "children">;
 
 const defaultOptions = [
   { label: "Oui", value: true, id: "radioItemTrue" },
@@ -49,7 +49,7 @@ const ChoiceInput = forwardRef<HTMLInputElement, Props>(
       value: o.value === "true",
     }));
     return (
-      <Field
+      <LegacyField
         label={label}
         id={firstId}
         message={message}
@@ -70,7 +70,7 @@ const ChoiceInput = forwardRef<HTMLInputElement, Props>(
           required={required}
           disabled={disabled}
         />
-      </Field>
+      </LegacyField>
     );
   },
 );

diff --git a/slash/react/src/Form/Date/DateInput.tsx b/slash/react/src/Form/Date/DateInput.tsx
@@ -1,9 +1,14 @@
 import { ComponentPropsWithoutRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Date } from "./Date";
 
 type Props = Omit<ComponentPropsWithoutRef<typeof Date>, "placeholderText"> &
-  ComponentPropsWithoutRef<typeof Field> & {
+  ComponentPropsWithoutRef<typeof LegacyField> & {
     placeholder?: string;
     helpMessage?: ReactNode;
     children?: ReactNode;
@@ -35,7 +40,7 @@ const DateInput = ({
     required,
   );
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -61,7 +66,7 @@ const DateInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 

diff --git a/slash/react/src/Form/File/FileInput.tsx b/slash/react/src/Form/File/FileInput.tsx
@@ -1,10 +1,15 @@
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { ComponentPropsWithoutRef, ReactNode, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { CustomFile, File } from "./File";
 import { FileTable } from "./FileTable";
 
-type FieldProps = ComponentPropsWithoutRef<typeof Field>;
+type FieldProps = ComponentPropsWithoutRef<typeof LegacyField>;
 type FileProps = ComponentPropsWithoutRef<typeof File>;
 type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
 
@@ -56,7 +61,7 @@ const FileInput = ({
   );
   const rowModifier = `${inputFieldClassModifier} label-top`;
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -91,7 +96,7 @@ const FileInput = ({
         onClick={(selectedId) => onDeleteClick(selectedId, inputId)}
         classModifier={classModifier}
       />
-    </Field>
+    </LegacyField>
   );
 };
 

diff --git a/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx b/slash/react/src/Form/MultiSelect/MultiSelectInput.tsx
@@ -1,10 +1,15 @@
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 
 import { useId, type ComponentProps, type ReactNode } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { MultiSelect } from "./MultiSelect";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof MultiSelect> & {
     helpMessage?: ReactNode;
   };
@@ -37,7 +42,7 @@ const MultiSelectInput = ({
   const inputId = id || generatedId;
 
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -62,7 +67,7 @@ const MultiSelectInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 

diff --git a/slash/react/src/Form/Number/NumberInput.tsx b/slash/react/src/Form/Number/NumberInput.tsx
@@ -7,11 +7,16 @@ import {
   ReactNode,
   useId,
 } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 
 import { Number } from "./Number";
 
-type Props = ComponentPropsWithoutRef<typeof Field> &
+type Props = ComponentPropsWithoutRef<typeof LegacyField> &
   ComponentPropsWithRef<typeof Number> & {
     helpMessage?: ReactNode;
     children?: ReactNode;
@@ -43,7 +48,7 @@ export const NumberInput = ({
     required,
   );
   return (
-    <Field
+    <LegacyField
       label={label}
       id={inputId}
       message={message}
@@ -68,6 +73,6 @@ export const NumberInput = ({
         {children}
       </FieldInput>
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
diff --git a/slash/react/src/Form/Pass/PassInput.tsx b/slash/react/src/Form/Pass/PassInput.tsx
@@ -1,5 +1,10 @@
 import { ComponentProps, ReactNode, useId, useState } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Pass } from "./Pass";
 
 const strengthList: Record<number, string> = {
@@ -25,7 +30,7 @@ const calculateStrength = (score?: string | null) => {
 };
 
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   Omit<PassProps, "onToggleType" | "type"> & {
     helpMessage?: ReactNode;
     score?: string;
@@ -63,7 +68,7 @@ const PassInput = ({
   );
 
   return (
-    <Field
+    <LegacyField
       label={label}
       message={message}
       messageType={messageType}
@@ -92,7 +97,7 @@ const PassInput = ({
         {children}
         <HelpMessage message={helpMessage} isVisible={!message} />
       </FieldInput>
-    </Field>
+    </LegacyField>
   );
 };
 

diff --git a/slash/react/src/Form/Radio/RadioInput.tsx b/slash/react/src/Form/Radio/RadioInput.tsx
@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef, forwardRef } from "react";
 import {
-  Field,
+  LegacyField,
   getFirstId,
   useInputClassModifier,
   useOptionsWithId,
 } from "../core";
 import { Radio, RadioModes } from "./Radio";
 
-type RadioInputProps = ComponentPropsWithoutRef<typeof Field> &
+type RadioInputProps = ComponentPropsWithoutRef<typeof LegacyField> &
   ComponentPropsWithoutRef<typeof Radio>;
 
 const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
@@ -47,7 +47,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
       );
 
     return (
-      <Field
+      <LegacyField
         label={label}
         id={firstId}
         message={message}
@@ -72,7 +72,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
           {...radioProps}
         />
         {children}
-      </Field>
+      </LegacyField>
     );
   },
 );

diff --git a/slash/react/src/Form/Select/SelectInput.tsx b/slash/react/src/Form/Select/SelectInput.tsx
@@ -6,10 +6,15 @@ import {
   useId,
 } from "react";
 
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import {
+  FieldInput,
+  HelpMessage,
+  LegacyField,
+  useInputClassModifier,
+} from "../core";
 import { Select } from "./Select";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof Select> & {
     helpMessage?: ReactNode;
   };
@@ -45,7 +50,7 @@ const SelectInput = forwardRef<HTMLSelectElement, PropsWithChildren<Props>>(
         required,
       );
     return (
-      <Field
+      <LegacyField
         label={label}
         id={inputId}
         message={message}
@@ -72,7 +77,7 @@ const SelectInput = forwardRef<HTMLSelectElement, PropsWithChildren<Props>>(
           {children}
         </FieldInput>
         <HelpMessage message={helpMessage} isVisible={!message} />
-      </Field>
+      </LegacyField>
     );
   },
 );

diff --git a/slash/react/src/Form/Slider/SliderInput.tsx b/slash/react/src/Form/Slider/SliderInput.tsx
@@ -1,8 +1,8 @@
 import { useId, useMemo, type ComponentProps, type ReactNode } from "react";
-import { Field, HelpMessage } from "../core";
+import { HelpMessage, LegacyField } from "../core";
 import { Slider } from "./Slider";
 
-type Props = ComponentProps<typeof Field> &
+type Props = ComponentProps<typeof LegacyField> &
   ComponentProps<typeof Slider> & {
     helpMessage?: ReactNode;
   };
@@ -26,7 +26,7 @@ const SliderInput = ({
   const newId = useMemo(() => id ?? generatedId, [generatedId, id]);
 
   return (
-    <Field
+    <LegacyField
       id={newId}
       label={label}
       message={message}
@@ -41,7 +41,7 @@ const SliderInput = ({
       <Slider {...sliderProps} id={id} classModifier={classModifier} />
       {children}
       <HelpMessage message={helpMessage} isVisible={!message} />
-    </Field>
+    </LegacyField>
   );
 };
 

diff --git a/slash/react/src/Form/Text/Text.tsx b/slash/react/src/Form/Text/Text.tsx
@@ -26,6 +26,6 @@ const Text = forwardRef<HTMLInputElement, Props>(
   },
 );
 
-Text.displayName = "Text";
+Text.displayName = "EnhancedInput";
 
 export { Text };
diff --git a/slash/react/src/Form/Text/TextInput.stories.tsx b/slash/react/src/Form/Text/TextInput.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { MessageTypes } from "../core";
-import { TextInput } from "./TextInput";
 import { inputTypes } from "./inputTypes";
+import { TextInput } from "./TextInput";
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
@@ -29,6 +29,8 @@ export const TextInputStory: Story = {
     readOnly: false,
     disabled: false,
     autoFocus: false,
+    message: "message",
+
     className: "",
     type: "text",
     label: "Your name",