feat(distributeur): add experimental input components with Storybook documentation

- Add Input, Label, InputContainer, InputUnit, and ItemMessage components
- Add corresponding CSS styles with grid-based layout system
- Create Storybook stories and MDX documentation for all components
- Export experimental components via distributeur/experimental entry point

Author: JLou

.vscode/settings.json

@@ -6,10 +6,17 @@
 		"source.fixAll.eslint": "explicit",
 		"source.fixAll.stylelint": "explicit"
 	},
-	"stylelint.validate": ["css", "scss"],
+	"stylelint.validate": [
+		"css",
+		"scss"
+	],
 	"github.copilot.chat.commitMessageGeneration.instructions": [
 		{
 			"file": ".github/git-commit-instructions.md"
 		}
-	]
+	],
+	"search.exclude": {
+		"**/slash": true,
+		"**/client": true
+	}
 }

apps/slash-stories/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { dirname, join } from "path";
-import { fileURLToPath } from "url";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -39,6 +39,39 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
+  typescript: {
+    reactDocgen: "react-docgen",
+  },
+  // Black magic to make Storybook use the source code of canopee packages instead of the compiled code, preserving TSDoc comments in Storybook UI
+  async viteFinal(viteConfig) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import("vite");
+
+    return mergeConfig(viteConfig, {
+      resolve: {
+        alias: {
+          // Point to TypeScript source files to preserve TSDoc in Storybook
+          // Order matters: more specific paths must come first
+          "@axa-fr/canopee-react/distributeur/experimental": fileURLToPath(
+            new URL(
+              "../../../packages/canopee-react/src/distributeur-experimental.ts",
+              import.meta.url,
+            ),
+          ),
+          "@axa-fr/canopee-react/distributeur": fileURLToPath(
+            new URL(
+              "../../../packages/canopee-react/src/distributeur.ts",
+              import.meta.url,
+            ),
+          ),
+        },
+      },
+      optimizeDeps: {
+        // Exclude canopee packages from pre-bundling to preserve source code
+        exclude: ["@axa-fr/canopee-react"],
+      },
+    });
+  },
 };
 
 export default config;

apps/slash-stories/src/Form/Experimental/Input.mdx

@@ -0,0 +1,81 @@
+import {
+  Canvas,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from "@storybook/blocks";
+import * as Stories from "./Input.stories";
+
+<Meta of={Stories} title="Form/Experimental/Input" />
+
+<Title />
+
+## ⚠️ Experimental Component
+
+This component is **experimental** and may change in future releases. You can however use it in your projects, but be aware that the API might change.
+We welcome your feedback and contributions to improve this component.
+
+## Overview
+
+The `Input` component is a low-level form input component that provides a styled HTML input element. It serves as the foundation for more complex input components like `TextInput`.
+
+This component is a wrapper around the native HTML `input` element with predefined styles and accessibility features. It's typically used in combination with other form components like `Label`, `InputContainer`, and `InputUnit` to create complete form fields.
+
+## Playground
+
+<Primary />
+<Controls />
+
+## Usage
+
+The `Input` component forwards all props to the underlying HTML input element, making it fully compatible with standard input attributes.
+
+```tsx
+import { Input } from "@axa-fr/design-system-slash-react/experimental";
+
+const MyComponent = () => {
+  return <Input type="text" placeholder="Enter your name" />;
+};
+```
+
+## States
+
+### Disabled
+
+Set the `disabled` prop to true to disable the input field.
+
+<Canvas of={Stories.DisabledStory} />
+
+### Required
+
+Set the `required` prop to mark the input as required.
+
+<Canvas of={Stories.RequiredStory} />
+
+### Invalid
+
+Use the `aria-invalid` attribute to mark the input as invalid. This will apply error styling.
+
+<Canvas of={Stories.InvalidStory} />
+
+## Form Integration
+
+This component can be used with form libraries like [react-hook-form](https://react-hook-form.com/) or [Formik](https://formik.org/). It supports controlled and uncontrolled usage patterns and forwards refs properly.
+
+```tsx
+import { Input } from "@axa-fr/design-system-slash-react/experimental";
+import { useForm } from "react-hook-form";
+
+const MyForm = () => {
+  const { register, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit(console.log)}>
+      <Input {...register("fieldName")} />
+    </form>
+  );
+};
+```

apps/slash-stories/src/Form/Experimental/Input.stories.tsx

@@ -0,0 +1,57 @@
+import { Input } from "@axa-fr/canopee-react/distributeur/experimental";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Experimental/Form/Atoms/Input",
+  component: Input,
+  argTypes: {
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    required: { control: "boolean" },
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "number", "tel", "url"],
+    },
+    onChange: { action: "changed", table: { disable: true } },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: (args) => <Input {...args} />,
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+export const DisabledStory: Story = {
+  name: "Disabled",
+  render: (args) => <Input {...args} />,
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+    value: "Cannot edit this",
+  },
+};
+
+export const RequiredStory: Story = {
+  name: "Required",
+  render: (args) => <Input {...args} />,
+  args: {
+    placeholder: "Required field",
+    required: true,
+  },
+};
+
+export const InvalidStory: Story = {
+  name: "Invalid",
+  render: (args) => <Input {...args} />,
+  args: {
+    placeholder: "Invalid input",
+    "aria-invalid": true,
+    value: "Invalid value",
+  },
+};

apps/slash-stories/src/Form/Experimental/InputContainer.mdx

@@ -0,0 +1,93 @@
+import {
+  Canvas,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from "@storybook/blocks";
+import * as Stories from "./InputContainer.stories";
+
+<Meta of={Stories} title="Form/Experimental/InputContainer" />
+
+<Title />
+
+## ⚠️ Experimental Component
+
+This component is **experimental** and may change in future releases. You can however use it in your projects, but be aware that the API might change.
+We welcome your feedback and contributions to improve this component.
+
+## Overview
+
+The `InputContainer` component is a layout component that manages the positioning of form elements using CSS Grid. It coordinates the display of labels, inputs, units, and messages in either horizontal or vertical layouts.
+
+This component is essential for building consistent form layouts and is typically used to wrap `Label`, `Input`, `InputUnit`, and `ItemMessage` components together.
+
+## Playground
+
+<Primary />
+<Controls />
+
+## Usage
+
+The `InputContainer` component uses CSS Grid to arrange its children. It automatically positions elements based on their CSS class names (grid areas).
+
+```tsx
+import {
+  Input,
+  InputContainer,
+  InputUnit,
+  Label,
+} from "@axa-fr/design-system-slash-react/experimental";
+
+const MyFormField = () => {
+  return (
+    <InputContainer>
+      <Label htmlFor="amount">Amount</Label>
+      <Input id="amount" type="number" />
+      <InputUnit>€</InputUnit>
+    </InputContainer>
+  );
+};
+```
+
+## Layout Options
+
+### Horizontal Layout (Default)
+
+By default, the container arranges elements horizontally with the label, input, and unit on the same row.
+
+<Canvas of={Stories.HorizontalStory} />
+
+### Vertical Layout
+
+Set the `vertical` prop to true to stack the label above the input.
+
+<Canvas of={Stories.VerticalStory} />
+
+### Without Unit
+
+The unit element is optional. You can omit it when not needed.
+
+<Canvas of={Stories.WithoutUnitStory} />
+
+## Grid Areas
+
+The container defines the following grid areas that child components automatically fill:
+
+- **label**: Filled by `Label` components
+- **input**: Filled by `Input` components
+- **unit**: Filled by `InputUnit` components
+- **helper-message**: Filled by `ItemMessage` components
+- **error-message**: Additional area for error messages
+
+Child components are positioned automatically based on their CSS class names. This makes the container flexible and easy to compose with different combinations of form elements.
+
+## Customization
+
+You can pass a custom `className` to override or extend the default styling:
+
+```tsx
+<InputContainer className="my-custom-container">{/* ... */}</InputContainer>
+```

apps/slash-stories/src/Form/Experimental/InputContainer.stories.tsx

@@ -0,0 +1,59 @@
+import {
+  Input,
+  InputContainer,
+  InputUnit,
+  Label,
+} from "@axa-fr/canopee-react/distributeur/experimental";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Experimental/Form/Atoms/InputContainer",
+  component: InputContainer,
+  argTypes: {
+    vertical: { control: "boolean" },
+  },
+} satisfies Meta<typeof InputContainer>;
+
+export default meta;
+type Story = StoryObj<typeof InputContainer>;
+
+export const HorizontalStory: Story = {
+  name: "Horizontal Layout",
+  render: (args) => (
+    <InputContainer {...args}>
+      <Label htmlFor="input-1">Label</Label>
+      <Input id="input-1" placeholder="Enter text" />
+      <InputUnit>€</InputUnit>
+    </InputContainer>
+  ),
+  args: {
+    vertical: false,
+  },
+};
+
+export const VerticalStory: Story = {
+  name: "Vertical Layout",
+  render: (args) => (
+    <InputContainer {...args}>
+      <Label htmlFor="input-2">Label</Label>
+      <Input id="input-2" placeholder="Enter text" />
+      <InputUnit>€</InputUnit>
+    </InputContainer>
+  ),
+  args: {
+    vertical: true,
+  },
+};
+
+export const WithoutUnitStory: Story = {
+  name: "Without Unit",
+  render: (args) => (
+    <InputContainer {...args}>
+      <Label htmlFor="input-3">Label</Label>
+      <Input id="input-3" placeholder="Enter text" />
+    </InputContainer>
+  ),
+  args: {
+    vertical: false,
+  },
+};