feat: add texts description for 3 components (#14)

Smile-SA · Jan 29, 2024 · f2d2240 · f2d2240
1 parent 0e37e97
commit f2d2240
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 0 deletions.
diff --git a/docs/components/01-button-list-or-dropdown.mdx b/docs/components/01-button-list-or-dropdown.mdx
@@ -0,0 +1,47 @@
+import { GitHubLogo } from '../../src/icons/GitHubLogo';
+
+# Button list or dropdown
+
+<Description
+  extendsInfo={[
+    {
+      label: 'Menu',
+      link: 'https://v6.mantine.dev/core/menu/',
+    },
+    {
+      label: 'Button',
+      link: 'https://v6.mantine.dev/core/button/',
+    },
+  ]}
+  importExample="import { ButtonListOrDropdown } 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/ButtonListOrDropdown/ButtonListOrDropdown.tsx',
+  }}
+>
+  ButtonListOrDropdown component displays a list of buttons. When the number of
+  buttons exceeds a specified threshold (controlled by the maxButtonItems prop),
+  the component dynamically transforms into a dropdown menu.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed
+  storyId="3-custom-components-buttonlistordropdown"
+  height="820"
+/>
+
+## Props
+
+| Name                       | Type             | Default | Description                                                                                                                                         |
+| -------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultCurrent <Required/> | `string`         | -       | The default selected value                                                                                                                          |
+| items <Required/>          | `IItems<string>` | -       | Is the list of items of type `IItems<string>`                                                                                                       |
+| maxButtonItems             | `number`         | `0`     | The value of the maximum number to display. If the number is exceeded, the button list transforms into a dropdown menu                              |
+| buttonProps                | `ButtonProps`    | -       | Props extend from the Mantine [Button](https://v6.mantine.dev/core/button/) component, used to modify the buttons of ButtonListOrDropdown component |
+| current                    | `string`         | -       | Currently selected value. Props used to make the component controlled                                                                               |
+| onAction                   | `(() => void)`   | -       | Function called each time an item is clicked                                                                                                        |
+| ....                       |                  | -       | Extend props from the Mantine [Menu](https://v6.mantine.dev/core/menu/) component. Used to modify Menu component                                    |
diff --git a/docs/components/01-card-header.mdx b/docs/components/01-card-header.mdx
@@ -0,0 +1,35 @@
+import { GitHubLogo } from '../../src/icons/GitHubLogo';
+
+# Card header
+
+<Description
+  extendsInfo={[
+    {
+      label: 'Box',
+      link: 'https://v6.mantine.dev/core/box/',
+    },
+  ]}
+  importExample="import { CardHeader } 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/CardHeader/CardHeader.tsx',
+  }}
+>
+  Renders a header with three customizable columns for use within a Card
+  component.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-CardHeader" height="820" />
+
+## Props
+
+| Name                 | Type        | Default | Description                                                                                       |
+| -------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------- |
+| children <Required/> | `ReactNode` | -       | The central area of the component                                                                 |
+| leftSection          | `ReactNode` | -       | If defined, displays the element from this prop to the left of the central area of the component  |
+| rightSection         | `ReactNode` | -       | If defined, displays the element from this prop to the right of the central area of the component |
diff --git a/docs/components/01-menu-languages.mdx b/docs/components/01-menu-languages.mdx
@@ -0,0 +1,48 @@
+import { GitHubLogo } from '../../src/icons/GitHubLogo';
+
+# Menu languages
+
+<Description
+  extendsInfo={[
+    {
+      label: 'ButtonListOrDropdown',
+      link: './button-list-or-dropdown',
+      logo: <GitHubLogo />,
+    },
+  ]}
+  importExample="import { MenuLanguages } 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/MenuLanguages/MenuLanguages.tsx',
+  }}
+>
+  It inherits from the [ButtonListOrDropdown](./button-list-or-dropdown)
+  component. It displays a list of language buttons with or without flags in a
+  4x3 or 1x1 format. When the number of buttons exceeds a specified threshold
+  (controlled by the maxButtonItems property), the component dynamically
+  transforms into a dropdown menu.
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-MenuLanguages" height="820" />
+
+## Props
+
+MenuLanguages takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionRowOverflow](./action-row-overflow).
+
+| Name                  | Type      | Default | Description                                                                                  |
+| --------------------- | --------- | ------- | -------------------------------------------------------------------------------------------- |
+| languages <Required/> | `ILang[]` | -       | Is the array of langs of type `ILang` displayed into the component                           |
+| squareFormat          | `boolean` | `false` | Displays the default 4x3 format, If this prop is set to true, it shows flags in a 1x1 format |
+| ...                   |           | -       | Extend props from [ButtonListOrDropdown](./button-list-or-dropdown) component                |
+
+## ILang
+
+| Name    | Type     | Description                                         |
+| ------- | -------- | --------------------------------------------------- |
+| country | `string` |                                                     |
+| ...     |          | extends [IOption]('../../../shared-types/i-options) |
diff --git a/docs/shared-types/01-i-items.md b/docs/shared-types/01-i-items.md
@@ -0,0 +1,6 @@
+# `IItems<T>`
+
+| Attribute | Type        | Description                         |
+| --------- | ----------- | ----------------------------------- |
+| content   | `ReactNode` | Value to display.                   |
+| ...       |             | extends [`IOption<T>`](./i-options) |