Smile-SA · Mar 14, 2024 · Mar 4, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 14, 2024
diff --git a/docs/react-front-kit-table/table-grid-view.mdx b/docs/react-front-kit-table/table-grid-view.mdx
@@ -8,7 +8,7 @@ import Description from '../../src/components/Description/Description';
   extendsInfo={[
     {
       label: 'SwitchableView',
-      link: './switchable-view',
+      link: '../react-front-kit/components/switchable-view',
       logo: <GitHubLogo />,
     },
   ]}

diff --git a/docs/react-front-kit/components/calendar-header.mdx b/docs/react-front-kit/components/calendar-header.mdx
@@ -0,0 +1,51 @@
+import { GitHubLogo } from '../../../src/icons/GitHubLogo';
+
+# Calendar Header
+
+<Description
+  extendsInfo={[
+    {
+      label: 'CalendarHeader',
+      link: 'https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx',
+    },
+  ]}
+  importExample="import { CalendarHeader } from '@smile/react-front-kit';"
+  packageInfo={{
+    label: '@smile/react-front-kit',
+    link: 'https://www.npmjs.com/package/@smile/react-front-kit',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/CalendarHeader/CalendarHeader.tsx',
+  }}
+  storybookInfo="3-custom-components-calendarheader--docs"
+>
+  Display a controlled calendar header with 3 levels of precision: Year, Day,
+  and Decade. The component is based on a component
+  [CalendarHeader](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx)
+  he is not shown in the documentation but visible in the library's code.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed
+  storyId="3-custom-components-calendarheader--docs"
+  height="1780"
+/>
+
+## Props
+
+| Name              | Type                                                                                                                                          | Default | Description                                                                                                                                                    |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| date <Required/>  | `Date`                                                                                                                                        | -       | Value given to define the date displayed on the calendarHeader                                                                                                 |
+| level <Required/> | [`ICalendarHeaderClickType`](#icalendarheaderclicktype)                                                                                       | -       | Defines the date level to display in the header modal                                                                                                          |
+| onDateClick       | `((event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date, level: `[`ICalendarHeaderClickType`](#icalendarheaderclicktype)` ) => void)` | -       | Returns a callback function that provides the value of the date that has just been clicked and the current level                                               |
+| monthProps        | `Omit<MonthProps, "month">`                                                                                                                   | -       | Allows configuring the props of the Month component from Mantine.                                                                                              |
+| monthListProps    | `Omit<MonthsListProps, "year">`                                                                                                               | -       | Allows configuring the props of the MonthList component from Mantine.                                                                                          |
+| yearsListProps    | `Omit<YearsListProps, "decade">`                                                                                                              | -       | Allows configuring the props of the YearsList component from Mantine.                                                                                          |
+| ...               | -                                                                                                                                             | -       | extends [`CalendarHeader props`](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx) |
+
+## ICalendarHeaderClickType
+
+| Type                            | Description                                          |
+| ------------------------------- | ---------------------------------------------------- |
+| `"month" \| "year" \| "decade"` | Value of the click location's level of localization. |
diff --git a/docs/react-front-kit/components/data-badge.mdx b/docs/react-front-kit/components/data-badge.mdx
@@ -0,0 +1,37 @@
+# Data Badge
+
+<Description
+  extendsInfo={[
+    {
+      label: 'Badge',
+      link: 'https://mantine.dev/core/badge/',
+    },
+  ]}
+  importExample="import { DataBadge } from '@smile/react-front-kit';"
+  packageInfo={{
+    label: '@smile/react-front-kit',
+    link: 'https://www.npmjs.com/package/@smile/react-front-kit',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/DataBadge/DataBadge.tsx',
+  }}
+  storybookInfo="3-custom-components-databadge--docs"
+>
+  Display a badge that spans the entire width of the parent component with a
+  number field and text. There are two types of displays: large and medium.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-databadge--docs" height="1180" />
+
+## Props
+
+| Name     | Type                  | Default | Description                                                                                                                                                                                                                        |
+| -------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children | `string`              | -       | The text is displayed to the right of the number.                                                                                                                                                                                  |
+| color    | `DefaultMantineColor` | -       | The color applied to the badge, and the contrast is automatically managed by the `autoContrast` prop of the `Badge` component. If the prop is not specified, the text color will be black, and there will be no `backgroundColor`. |
+| number   | `number`              | -       | The number value is displayed to the left of the text. The `fit-content` property and a `margin-right` are applied to the number tag.                                                                                              |
+| size     | `"lg" \| "md"`        | `"md"`  | Controls the appearance of the component. Allows switching between two templates: `"md"` and `"lg"`.                                                                                                                               |
+| ratio    | `number `             | -       | Manages the default width size of the number tag.                                                                                                                                                                                  |
+| ...      | -                     | -       | extends [`Badge props`](https://mantine.dev/core/badge/)                                                                                                                                                                           |
diff --git a/docs/react-front-kit/components/document-box.mdx b/docs/react-front-kit/components/document-box.mdx
@@ -17,7 +17,7 @@
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-documentbox---docs" height="950" />
+<StorybookEmbed storyId="3-custom-components-documentbox--docs" height="950" />
 
 ## Props
 

diff --git a/docs/react-front-kit/components/event-list.mdx b/docs/react-front-kit/components/event-list.mdx
@@ -19,7 +19,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-EventList--docs" height="820" />
+<StorybookEmbed storyId="3-custom-components-eventlist--docs" height="820" />
 
 ## Props
 

diff --git a/docs/react-front-kit/components/icon-card.mdx b/docs/react-front-kit/components/icon-card.mdx
@@ -0,0 +1,38 @@
+# Icon card
+
+<Description
+  extendsInfo={[
+    {
+      label: 'Card',
+      link: 'https://mantine.dev/core/card/',
+    },
+  ]}
+  importExample="import { IconCard } from '@smile/react-front-kit';"
+  packageInfo={{
+    label: '@smile/react-front-kit',
+    link: 'https://www.npmjs.com/package/@smile/react-front-kit',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/IconCard/IconCard.tsx',
+  }}
+  storybookInfo="3-custom-components-iconcard--docs"
+>
+  Renders a horizontal bar displaying the number of selected elements and an
+  array of [`IAction`s](../../shared-types/actions#iactiont) as
+  [ActionIcons](https://v6.mantine.dev/core/action-icon/)
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-iconcard--docs" height="2020" />
+
+## Props
+
+| Name     | Type        | Default | Description                                                                                                                                     |
+| -------- | ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| children | `ReactNode` | -       | Free area in the lower zone of the map                                                                                                          |
+| icon     | `ReactNode` | -       | Area in the top of the map primarily used for displaying icons but can show anything that corresponds to the ReactNode type                     |
+| subTitle | `ReactNode` | -       | SubTitle area                                                                                                                                   |
+| title    | `ReactNode` | -       | TItle area                                                                                                                                      |
+| color    | `string`    | -       | Define the background color of the card. By default, the primary color is applied. Auto-contrast is used to automatically change the text color |
+| ...      | -           | -       | extends [`card props`](https://mantine.dev/core/card/?t=props).                                                                                 |
diff --git a/docs/react-front-kit/components/menu-languages.mdx b/docs/react-front-kit/components/menu-languages.mdx
@@ -29,7 +29,10 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-MenuLanguages" height="820" />
+<StorybookEmbed
+  storyId="3-custom-components-menulanguages--docs"
+  height="820"
+/>
 
 ## Props
 

diff --git a/docs/react-front-kit/components/summary-box.mdx b/docs/react-front-kit/components/summary-box.mdx
@@ -19,7 +19,7 @@
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-summarybox---docs" height="950" />
+<StorybookEmbed storyId="3-custom-components-summarybox--docs" height="950" />
 
 ## Props
 

diff --git a/docs/react-front-kit/form/_category_.json b/docs/react-front-kit/form/_category_.json
@@ -0,0 +1,7 @@
+{
+  "label": "Form",
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/docs/react-front-kit/form/full-name-fields.mdx b/docs/react-front-kit/form/full-name-fields.mdx
@@ -0,0 +1,46 @@
+# Full Name Fields
+
+<Description
+  extendsInfo={[
+    {
+      label: 'Flex',
+      link: 'https://mantine.dev/core/flex/',
+    },
+    {
+      label: 'TextInput',
+      link: 'https://mantine.dev/core/text-input/',
+    },
+  ]}
+  importExample="import { FullNameFields } from '@smile/react-front-kit';"
+  packageInfo={{
+    label: '@smile/react-front-kit',
+    link: 'https://www.npmjs.com/package/@smile/react-front-kit',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/FullNameFields/FullNameFields.tsx',
+  }}
+>
+  Displaying a grouped input with first name and last name, usable in a
+  controlled manner.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-form-fullnamefields--docs" height="820" />
+
+## Props
+
+| Name           | Type                                                             | Default | Description                                                                                                                     |
+| -------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| firstNameProps | [`TextInputProps`](https://mantine.dev/core/text-input/?t=props) | -       | extends [`text input props`](https://mantine.dev/core/text-input/) If configured, the changes will apply to the firstName input |
+| lastNameProps  | [`TextInputProps`](https://mantine.dev/core/text-input/?t=props) | -       | extends [`text input props`](https://mantine.dev/core/text-input/) If configured, the changes will apply to the lastName input  |
+| onChange       | `((value: IFullNameFieldsValues) => void)`                       | -       | Callback function returning the value of the input that has just been changed                                                   |
+| value          | `IFullNameFieldsValues`                                          | -       | Allows setting the values of the two text input fields                                                                          |
+| ...            | -                                                                | -       | extends [`flex props`](https://mantine.dev/core/flex/?t=props)                                                                  |
+
+## IFullNameFieldsValues
+
+| Name      | Type     | Default | Description                |
+| --------- | -------- | ------- | -------------------------- |
+| firstName | `string` | -       | Value of `firstName` field |
+| lastName  | `string` | -       | Value of `lastName` field  |