docs(select): documente les composants et un nouveau cas d'usage

src/client/components/ui/Form/Select/SelectMultiple/SelectMultiple.mdx

@@ -0,0 +1,42 @@
+import * as stories from './SelectMultiple.stories';
+import { Canvas, Controls, Meta, Primary } from "@storybook/blocks";
+
+<Meta of={stories} />
+
+# Select Multiple
+
+## Definition
+
+Le composant permet de sélectionner un sous-ensemble d'éléments parmi une liste fixe. Cette implémentation vise à reproduire le comportement d'un `select` natif combiné avec son attribut `multiple`, avec une interface plus proche du select simple. On pourra aussi se référer au pattern ARIA [select-only combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
+
+Ce composant expose un sous-composant `SelectMultiple.Option` pour définir la liste des choix.
+
+<Primary/>
+
+À la différence du [Combobox](/docs/components-form-combobox--docs), l'utilisateur est contraint de choisir une option dans la liste et ne peut pas renseigner un champ à la main.
+
+## Props
+
+Le composant accepte les props ci-dessous ainsi tous [les attributs d'un `button` HTML natif](https://developer.mozilla.org/fr/docs/Web/HTML/Element/button):
+
+<Controls />
+
+## Exemples
+
+### Disabled
+
+Renseigner la prop `disabled` permet de désactiver la sélection d'option.
+
+<Canvas of={stories.disabled}/>
+
+### Validation
+
+Lorsque la prop `required` est fournie, le composant entre en erreur si l'on tente de valider le formulaire sans option sélectionnée.
+
+<Canvas of={stories.validation}/>
+
+### Default Value
+
+Un `Array<string>` peut être donné à la prop `defaultValue` pour présélectionner certaines options.
+
+<Canvas of={stories.defaultValue}/>

src/client/components/ui/Form/Select/SelectMultiple/SelectMultiple.stories.tsx

@@ -22,6 +22,7 @@ export default meta;
 type SelectProps = React.ComponentPropsWithRef<typeof SelectMultiple>;
 type Controls = Omit<SelectProps, 'children'> & { children: string[] };
 type Story = StoryObj<Controls>;
+
 export const exemple: Story = {
 	args: {},
 	render: ({ children, ...args }) => (
@@ -33,6 +34,7 @@ export const exemple: Story = {
 		</>
 	),
 };
+
 export const disabled: Story = {
 	args: {
 		disabled: true,
@@ -46,6 +48,7 @@ export const disabled: Story = {
 		</>
 	),
 };
+
 export const validation: Story = {
 	args: {
 		name: 'pays',
@@ -67,3 +70,17 @@ export const validation: Story = {
 		</form>
 	),
 };
+
+export const defaultValue: Story = {
+	args: {
+		defaultValue: ['France', 'Japon'],
+	},
+	render: ({ children, ...args }) => (
+		<>
+			<label htmlFor="pays">Pays</label>
+			<SelectMultiple id="pays" {...args}>
+				{children.map((child) => <SelectMultiple.Option value={child} key={child}>{child}</SelectMultiple.Option>)}
+			</SelectMultiple>
+		</>
+	),
+};

src/client/components/ui/Form/Select/SelectSimple/SelectSimple.mdx

@@ -0,0 +1,42 @@
+import * as stories from './SelectSimple.stories';
+import { Canvas, Controls, Meta, Primary } from "@storybook/blocks";
+
+<Meta of={stories} />
+
+# Select Simple
+
+## Definition
+
+Le composant permet de sélectionner un unique élément parmi une liste fixe. Cette implémentation vise à reproduire le comportement d'un `select` natif sans son attribut `multiple`. On pourra aussi se référer au pattern ARIA [select-only combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
+
+Ce composant expose un sous-composant `SelectSimple.Option` pour définir la liste des choix.
+
+<Primary/>
+
+À la différence du [Combobox](/docs/components-form-combobox--docs), l'utilisateur est contraint de choisir une option dans la liste et ne peut pas renseigner un champ à la main.
+
+## Props
+
+Le composant accepte les props ci-dessous ainsi tous [les attributs d'un `button` HTML natif](https://developer.mozilla.org/fr/docs/Web/HTML/Element/button):
+
+<Controls />
+
+## Exemples
+
+### Disabled
+
+Renseigner la prop `disabled` permet de désactiver la sélection d'option.
+
+<Canvas of={stories.disabled}/>
+
+### Validation
+
+Lorsque la prop `required` est fournie, le composant entre en erreur si l'on tente de valider le formulaire sans option sélectionnée.
+
+<Canvas of={stories.validation}/>
+
+### Default Value
+
+Une `string` peut être donné à la prop `defaultValue` pour présélectionner une option.
+
+<Canvas of={stories.defaultValue}/>

src/client/components/ui/Form/Select/SelectSimple/SelectSimple.stories.tsx

@@ -73,3 +73,17 @@ export const validation: Story = {
 		</form>
 	),
 };
+
+export const defaultValue: Story = {
+	args: {
+		defaultValue: 'France',
+	},
+	render: ({ children, ...args }) => (
+		<>
+			<label htmlFor="pays">Pays</label>
+			<SelectSimple id="pays" {...args}>
+				{children.map((child) => <SelectSimple.Option value={child} key={child}>{child}</SelectSimple.Option>)}
+			</SelectSimple>
+		</>
+	),
+};