feat(redmine 1301354): create StepperPage

.changeset/friendly-dolphins-jump.md

@@ -0,0 +1,6 @@
+---
+'storybook-pages': minor
+'@smile/haring-react': minor
+---
+
+Create Stepper page

packages/haring-react/src/Form/AddressAutocompleteFields/AddressAutocompleteFields.tsx

@@ -7,7 +7,7 @@ import type {
 import type { TextInputProps } from '@mantine/core';
 import type { ElementType, ReactElement } from 'react';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { AddressFields } from '../AddressFields/AddressFields';
 import { FetchAutocompleteField } from '../FetchAutocompleteField/FetchAutocompleteField';
@@ -57,7 +57,9 @@ export function AddressAutocompleteFields<T>(
     setAllFieldsValues(values);
     onFieldsValuesChange?.(values);
   }
-
+  useEffect(() => {
+    setAllFieldsValues(addressFieldsProps ?? {});
+  }, [addressFieldsProps]);
   return (
     <div>
       <AutocompleteField

packages/haring-react/src/Form/AddressFields/AddressFields.tsx

@@ -88,7 +88,7 @@ export function AddressFields(props: IAddressFieldsProps): ReactElement {
     },
     {
       error: errors?.postCode,
-      handleChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
         onChangeHandle('postCode', e.target.value);
       },
       value: value?.postCode,

packages/haring-react/src/index.tsx

@@ -4,6 +4,14 @@
 // component exports
 export type { IFullNameFieldsProps } from './Form/FullNameFields/FullNameFields';
 export { FullNameFields } from './Form/FullNameFields/FullNameFields';
+export type { IAddressAutocompleteFieldsProps } from './Form/AddressAutocompleteFields/AddressAutocompleteFields';
+export { AddressAutocompleteFields } from './Form/AddressAutocompleteFields/AddressAutocompleteFields';
+export type { IFetchAutocompleteFieldProps } from './Form/FetchAutocompleteField/FetchAutocompleteField';
+export { FetchAutocompleteField } from './Form/FetchAutocompleteField/FetchAutocompleteField';
+export type { IAddressAutocompleteFieldProps } from './Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField';
+export { AddressGouvAutocompleteField } from './Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField';
+export type { IAddressFieldsProps } from './Form/AddressFields/AddressFields';
+export { AddressFields } from './Form/AddressFields/AddressFields';
 export type { IIconCardProps } from './Components/IconCard/IconCard';
 export { IconCard } from './Components/IconCard/IconCard';
 export type { IDataBadgeProps } from './Components/DataBadge/DataBadge';

packages/storybook-pages/src/Pages/StepperPage/Code.mdx

@@ -0,0 +1,13 @@
+import { Meta, Source } from '@storybook/blocks';
+
+import * as StepperPageStory from './StepperPage.stories';
+
+import StepperPage from './StepperPage?raw';
+
+<Meta of={StepperPageStory} />
+
+# Code
+
+Code of StepperPage page
+
+<Source code={`${StepperPage}`} />

packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx

@@ -0,0 +1,7 @@
+export const texts = {
+  steps: {
+    step1: 'Step 1: ',
+    step2: 'Step 2: ',
+    step3: 'Completed, click back button to get to previous step',
+  },
+};

packages/storybook-pages/src/Pages/StepperPage/StepperPage.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { StepperPage as Cmp } from './StepperPage';
+
+const meta = {
+  component: Cmp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: '3-custom/Pages/StepperPage',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const StepperPage: IStory = {
+  args: {},
+};

packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx

@@ -0,0 +1,134 @@
+'use client';
+import type { IAddressFieldsValues } from '@smile/haring-react/src/Form/AddressFields/AddressFields';
+import type { IValue } from '@smile/haring-react/src/Form/FetchAutocompleteField/FetchAutocompleteField';
+import type { ReactElement } from 'react';
+
+import { Button, Flex, Group, Stepper } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import {
+  AddressAutocompleteFields,
+  FoldableColumnLayout,
+  FullNameFields,
+  SidebarMenu,
+} from '@smile/haring-react';
+import { useState } from 'react';
+
+import { menuMock } from '../BrowsingPage/BrowsingPage.mock';
+
+import { texts } from './StepperPage.mock';
+
+export interface IAddressGouvData {
+  properties: {
+    city?: string;
+    housenumber?: string;
+    label: string;
+    postcode?: string;
+    street?: string;
+  };
+}
+
+async function getDataAddressGouvRequest(
+  value: string,
+): Promise<IValue<IAddressGouvData>[]> {
+  const response = await fetch(
+    `https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(
+      value,
+    )}&autocomplete=1`,
+  );
+  const data: { features: IAddressGouvData[] } = await response.json();
+  const result = data.features.map((element) => {
+    return { label: element.properties.label, value: element };
+  });
+
+  return result;
+}
+
+export function StepperPage(): ReactElement {
+  const [active, setActive] = useState(0);
+
+  const form = useForm({
+    initialValues: {
+      address: {
+        city: '',
+        country: '',
+        number: '',
+        postCode: '',
+        street: '',
+      },
+      fullName: {
+        firstName: '',
+        lastName: '',
+      },
+    },
+  });
+
+  const nextStep = (): void => {
+    if (!form.validate().hasErrors) {
+      setActive((current) => (current < 3 ? current + 1 : current));
+    }
+  };
+
+  const prevStep = (): void => {
+    setActive((current) => (current > 0 ? current - 1 : current));
+  };
+
+  function onOptionSubmitMock(
+    value: IValue<IAddressGouvData>,
+  ): IAddressFieldsValues {
+    const address = value.value.properties;
+    const newAddress = {
+      city: address.city ?? '',
+      country: 'France',
+      number: address.housenumber ?? '',
+      postCode: address.postcode ?? '',
+      street: address.street ?? '',
+    };
+    form.setFieldValue('address', newAddress);
+    return newAddress;
+  }
+
+  return (
+    <FoldableColumnLayout
+      sidebarContent={
+        <Flex direction="column">
+          <SidebarMenu menu={menuMock} />
+        </Flex>
+      }
+    >
+      <Stepper active={active}>
+        <Stepper.Step description="Create an account" label="First step">
+          {texts.steps.step1}
+          <FullNameFields mt="md" {...form.getInputProps('fullName')} />
+        </Stepper.Step>
+        <Stepper.Step description="Verify email" label="Second step">
+          {texts.steps.step2}
+          <AddressAutocompleteFields
+            addressFieldsProps={form.values.address}
+            mt="md"
+            onFetchData={getDataAddressGouvRequest}
+            onFieldsValuesChange={(values) => {
+              form.setFieldValue('address', {
+                city: values.city ?? '',
+                country: values.country ?? form.values.address.country,
+                number: values.number ?? '',
+                postCode: values.postCode ?? '',
+                street: values.street ?? '',
+              });
+            }}
+            onOptionSubmit={onOptionSubmitMock}
+          />
+        </Stepper.Step>
+        <Stepper.Completed>{texts.steps.step3}</Stepper.Completed>
+      </Stepper>
+
+      <Group mt="xl">
+        {active !== 0 && (
+          <Button onClick={prevStep} variant="default">
+            Back
+          </Button>
+        )}
+        {active !== 2 && <Button onClick={nextStep}>Next step</Button>}
+      </Group>
+    </FoldableColumnLayout>
+  );
+}