docs(select): définit la story default value

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

@@ -35,3 +35,8 @@ Lorsque la prop `required` est fournie, le composant entre en erreur si l'on ten
 
 <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

@@ -35,3 +35,8 @@ Lorsque la prop `required` est fournie, le composant entre en erreur si l'on ten
 
 <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>
+		</>
+	),
+};