Smile-SA · tonai · Mar 13, 2024 · Mar 13, 2024
diff --git a/docs/guide/01-getting-started.md b/docs/guide/01-getting-started.md
@@ -1,8 +1,15 @@
 # Getting started
 
+## Introduction
+
+React Front Kit is a component library based on [Mantine](https://mantine.dev/) that helps you build frontend quickly.
+
 ## What you'll need
 
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above
+- [Node.js](https://nodejs.org/en/download/) version 16.0 or above
+- A [React](https://react.dev/) project version 18.0 or above.
+
+Also check the getting started page of [Mantine](https://mantine.dev/getting-started/).
 
 ## Installation
 
@@ -65,7 +72,7 @@ If you need table related components you can install `@smile/react-front-kit-tab
 You must install `@smile/react-front-kit` first and then add `@smile/react-front-kit-table` with:
 
 ```bash
-npm i @smile/react-front-kit-table @mantine/dates dayjs npm i  @tabler/icons-react
+npm i @smile/react-front-kit-table @mantine/dates dayjs mantine-react-table@beta @tabler/icons-react
 ```
 
 And import the styles:

diff --git a/docs/guide/03-icons.md b/docs/guide/03-icons.md
@@ -1,3 +1,46 @@
 # Icons
 
-TODO
+## `@phosphor-icons/react`
+
+`@smile/react-front-kit` depends on `@phosphor-icons/react` for the icons.
+
+You will need to install it as it required as a peer dependency.
+
+Some components can take icons for some props. Example:
+
+```jsx
+<SummaryBox
+  rightNode={
+    <ActionIcon color="cyan" size={30} variant="subtle">
+      <DownloadSimple size={24} />
+    </ActionIcon>
+  }
+  titleNode={<strong>Ma carte de tiers payant</strong>}
+/>
+```
+
+In that case you can import `DownloadSimple` from `@phosphor-icons/react` or you are free to use another icon of your choice.
+
+Here is the list of available icons in `@phosphor-icons/react`:
+
+<StorybookEmbed storyId="1-styleguide-icons--phosphor-icons" height="500" />
+
+## `@tabler/icons-react`
+
+`@smile/react-front-kit-table` depends on `mantine-react-table` that depends on the `@tabler/icons-react` icon library.
+
+You will need to install `@tabler/icons-react` if you use components from `@smile/react-front-kit-table` but you can also customize the icons used by passing any icon you want in the props.
+
+## `@smile/react-front-kit-shared`
+
+the `@smile/react-front-kit-shared` expose some icons you can also import and use as you wish.
+
+you can import then with:
+
+```tsx
+import { ColumnPlus } from '@smile/react-front-kit-shared';
+```
+
+Here is the list of available icons in `@smile/react-front-kit-shared`:
+
+<StorybookEmbed storyId="1-styleguide-icons--custom-icons" height="200" />
diff --git a/docs/react-front-kit-dates/_category_.json b/docs/react-front-kit-dates/_category_.json
@@ -1,7 +1,5 @@
 {
   "label": "react-front-kit-dates",
   "position": 3,
-  "link": {
-    "type": "generated-index"
-  }
+  "link": { "type": "doc", "id": "introduction" }
 }
diff --git a/docs/react-front-kit-dates/introduction.md b/docs/react-front-kit-dates/introduction.md
@@ -0,0 +1,7 @@
+# react-front-kit-dates
+
+Date related components.
+
+## Installation
+
+See [Getting started](/docs/guide/getting-started#smilereact-front-kit-dates)
diff --git a/docs/react-front-kit-dropzone/_category_.json b/docs/react-front-kit-dropzone/_category_.json
@@ -1,7 +1,5 @@
 {
   "label": "react-front-kit-dropzone",
   "position": 3,
-  "link": {
-    "type": "generated-index"
-  }
+  "link": { "type": "doc", "id": "introduction" }
 }
diff --git a/docs/react-front-kit-dropzone/dropzone.mdx b/docs/react-front-kit-dropzone/dropzone.mdx
@@ -12,6 +12,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit-dropzone/src/Components/Dropzone/Dropzone.tsx',
   }}
+  storybookInfo="3-custom-components-dropzone--docs"
 >
   Capture files from user with drag and drop
 </Description>

diff --git a/docs/react-front-kit-dropzone/introduction.md b/docs/react-front-kit-dropzone/introduction.md
@@ -0,0 +1,7 @@
+# react-front-kit-dropzone
+
+File upload components.
+
+## Installation
+
+See [Getting started](/docs/guide/getting-started#smilereact-front-kit-dropzone)
diff --git a/docs/react-front-kit-table/_category_.json b/docs/react-front-kit-table/_category_.json
@@ -1,7 +1,5 @@
 {
   "label": "react-front-kit-table",
   "position": 3,
-  "link": {
-    "type": "generated-index"
-  }
+  "link": { "type": "doc", "id": "introduction" }
 }
diff --git a/docs/react-front-kit-table/introduction.md b/docs/react-front-kit-table/introduction.md
@@ -0,0 +1,7 @@
+# react-front-kit-table
+
+Table related components.
+
+## Installation
+
+See [Getting started](/docs/guide/getting-started#smilereact-front-kit-table)
diff --git a/docs/react-front-kit-table/table-grid-view.mdx b/docs/react-front-kit-table/table-grid-view.mdx
@@ -20,6 +20,7 @@ import Description from '../../src/components/Description/Description';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit-table/src/Components/TableGridView/TableGridView.tsx',
   }}
+  storybookInfo="3-custom-components-tablegridview--docs"
 >
   Renders a [SwitchableView](../react-front-kit/components/switchable-view)
   pre-configured with a [Table](./table) view and a

diff --git a/docs/react-front-kit-table/table.mdx b/docs/react-front-kit-table/table.mdx
@@ -14,12 +14,13 @@ import Description from '../../src/components/Description/Description';
   ]}
   importExample="import { Table } from '@smile/react-front-kit-table';"
   packageInfo={{
-    label: '@smile/react-front-kit',
+    label: '@smile/react-front-kit-table',
     link: 'https://www.npmjs.com/package/@smile/react-front-kit-table',
   }}
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit-table/src/Components/Table/Table.tsx',
   }}
+  storybookInfo="3-custom-components-table--docs"
 >
   Renders a
   [MantineReactTable](https://www.mantine-react-table.com/docs/getting-started/usage)

diff --git a/docs/react-front-kit/_category_.json b/docs/react-front-kit/_category_.json
@@ -1,7 +1,5 @@
 {
   "label": "react-front-kit",
   "position": 3,
-  "link": {
-    "type": "generated-index"
-  }
+  "link": { "type": "doc", "id": "introduction" }
 }
diff --git a/docs/react-front-kit/components/action-bar.mdx b/docs/react-front-kit/components/action-bar.mdx
@@ -18,6 +18,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/ActionBar/ActionBar.tsx',
   }}
+  storybookInfo="3-custom-components-actionbar--docs"
 >
   Renders a horizontal bar displaying the number of selected elements and an
   array of [`IAction`s](../../shared-types/actions#iactiont) as

diff --git a/docs/react-front-kit/components/action-row-overflow.mdx b/docs/react-front-kit/components/action-row-overflow.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/ActionRowOverflow/ActionRowOverflow.tsx',
   }}
+  storybookInfo="3-custom-components-actionrowoverflow--docs"
 >
   Renders an array of [`IAction`s](../../shared-types/actions#iactiont) as
   [ActionIcons](https://v6.mantine.dev/core/action-icon/), with an option to

diff --git a/docs/react-front-kit/components/bit-converter.mdx b/docs/react-front-kit/components/bit-converter.mdx
@@ -9,6 +9,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/BitConverter/BitConverter.tsx',
   }}
+  storybookInfo="3-custom-components-bitconverter--docs"
 >
   Converts byte value into human-readable string using [Pretty
   Bytes](https://github.com/sindresorhus/pretty-bytes)

diff --git a/docs/react-front-kit/components/breadcrumbs.mdx b/docs/react-front-kit/components/breadcrumbs.mdx
@@ -12,6 +12,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/Breadcrumbs/Breadcrumbs.tsx',
   }}
+  storybookInfo="3-custom-components-breadcrumbs--docs"
 >
   Separate list of react nodes with given separator
 </Description>

diff --git a/docs/react-front-kit/components/button-list-or-dropdown.mdx b/docs/react-front-kit/components/button-list-or-dropdown.mdx
@@ -21,6 +21,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/ButtonListOrDropdown/ButtonListOrDropdown.tsx',
   }}
+  storybookInfo="3-custom-components-buttonlistordropdown--docs"
 >
   ButtonListOrDropdown component displays a list of buttons. When the number of
   buttons exceeds a specified threshold (controlled by the maxButtonItems prop),
@@ -30,7 +31,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 ## Storybook Docs
 
 <StorybookEmbed
-  storyId="3-custom-components-buttonlistordropdown"
+  storyId="3-custom-components-buttonlistordropdown--docs"
   height="820"
 />
 

diff --git a/docs/react-front-kit/components/card-header.mdx b/docs/react-front-kit/components/card-header.mdx
@@ -17,14 +17,15 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/CardHeader/CardHeader.tsx',
   }}
+  storybookInfo="3-custom-components-cardheader--docs"
 >
   Renders a header with three customizable columns for use within a Card
   component.
 </Description>
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-CardHeader" height="820" />
+<StorybookEmbed storyId="3-custom-components-cardheader--docs" height="820" />
 
 ## Props
 

diff --git a/docs/react-front-kit/components/card-list.mdx b/docs/react-front-kit/components/card-list.mdx
@@ -17,6 +17,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/CardList/CardList.tsx',
   }}
+  storybookInfo="3-custom-components-cardlist--docs"
 >
   Renders a section of card containing a list of items with the option of having
   or not having a separator and a vertical scrolling bar

diff --git a/docs/react-front-kit/components/collapse-button.mdx b/docs/react-front-kit/components/collapse-button.mdx
@@ -19,6 +19,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx',
   }}
+  storybookInfo="3-custom-components-collapsebutton--docs"
 >
   Render button or link with dropdown icon and collapsible content underneath
 </Description>

diff --git a/docs/react-front-kit/components/confirm-modal.mdx b/docs/react-front-kit/components/confirm-modal.mdx
@@ -10,6 +10,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/ConfirmModal/ConfirmModal.tsx',
   }}
+  storybookInfo="3-custom-components-confirmmodal--docs"
 >
   Renders a Mantine Modal with confirm/cancel buttons and optional title and
   content

diff --git a/docs/react-front-kit/components/document-box.mdx b/docs/react-front-kit/components/document-box.mdx
@@ -9,6 +9,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/DocumentBox/DocumentBox.tsx',
   }}
+  storybookInfo="3-custom-components-documentbox--docs"
 >
   Renders a box showing the thumbnail, and the optional title, metadata and
   content of a document

diff --git a/docs/react-front-kit/components/document-list.mdx b/docs/react-front-kit/components/document-list.mdx
@@ -19,6 +19,7 @@ import StorybookEmbed from '../../../src/components/StorybookEmbed/StorybookEmbe
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/DocumentList/DocumentList.tsx',
   }}
+  storybookInfo="3-custom-components-documentlist--docs"
 >
   Renders a vertical and selectable list of [DocumentBoxes](./document-box),
   with an [ActionBar](./action-bar)

diff --git a/docs/react-front-kit/components/dropdown-button.mdx b/docs/react-front-kit/components/dropdown-button.mdx
@@ -10,6 +10,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/DropdownButton/DropdownButton.tsx',
   }}
+  storybookInfo="3-custom-components-dropdownbutton--docs"
 >
   Renders a Button with a connected dropdown Menu
 </Description>

diff --git a/docs/react-front-kit/components/event-list.mdx b/docs/react-front-kit/components/event-list.mdx
@@ -12,6 +12,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/EventList/EventList.tsx',
   }}
+  storybookInfo="3-custom-components-eventlist--docs"
 >
   Simple item with a title, a color, a details section, and a description.
 </Description>

diff --git a/docs/react-front-kit/components/filter-list.mdx b/docs/react-front-kit/components/filter-list.mdx
@@ -27,6 +27,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/FilterList/FilterList.tsx',
   }}
+  storybookInfo="3-custom-components-filterlist--docs"
 >
   Renders a list of filters with text inputs and a manage filters button which
   displays the component

diff --git a/docs/react-front-kit/components/header-mobile.mdx b/docs/react-front-kit/components/header-mobile.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/HeaderMobile/HeaderMobile.tsx',
   }}
+  storybookInfo="3-custom-components-headermobile--docs"
 >
   Render an application header with optional left section, right section,
   content and search button/bar for mobile display

diff --git a/docs/react-front-kit/components/header-nav.mdx b/docs/react-front-kit/components/header-nav.mdx
@@ -9,6 +9,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/HeaderNav/HeaderNav.tsx',
   }}
+  storybookInfo="3-custom-components-headernav--docs"
 >
   Renders a list of menus as either a horizontal list of NavLink components or a
   vertical SidebarMenu in mobile mode

diff --git a/docs/react-front-kit/components/header-search.mdx b/docs/react-front-kit/components/header-search.mdx
@@ -18,6 +18,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/HeaderSearch/HeaderSearch.tsx',
   }}
+  storybookInfo="3-custom-components-headersearch--docs"
 >
   Render a [SearchBar](./search-bar) inside a
   [Box](https://v6.mantine.dev/core/box/)

diff --git a/docs/react-front-kit/components/header.mdx b/docs/react-front-kit/components/header.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/Header/Header.tsx',
   }}
+  storybookInfo="3-custom-components-header--docs"
 >
   Render an application header with optional left section, right section,
   content and search button/bar

diff --git a/docs/react-front-kit/components/info-card.mdx b/docs/react-front-kit/components/info-card.mdx
@@ -10,6 +10,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/InfoCard/InfoCard.tsx',
   }}
+  storybookInfo="3-custom-components-infocard--docs"
 >
   Render a card with title, content, content blocks and background motif
 </Description>

diff --git a/docs/react-front-kit/components/menu-languages.mdx b/docs/react-front-kit/components/menu-languages.mdx
@@ -18,6 +18,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/MenuLanguages/MenuLanguages.tsx',
   }}
+  storybookInfo="3-custom-components-menulanguages--docs"
 >
   It inherits from the [ButtonListOrDropdown](./button-list-or-dropdown)
   component. It displays a list of language buttons with or without flags in a

diff --git a/docs/react-front-kit/components/pagination.mdx b/docs/react-front-kit/components/pagination.mdx
@@ -10,6 +10,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/Pagination/Pagination.tsx',
   }}
+  storybookInfo="3-custom-components-pagination--docs"
 >
   Renders a Controlled [Mantine
   Pagination](https://v6.mantine.dev/core/pagination/) component next to a

diff --git a/docs/react-front-kit/components/preview.mdx b/docs/react-front-kit/components/preview.mdx
@@ -9,6 +9,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/Preview/Preview.tsx',
   }}
+  storybookInfo="3-custom-components-preview--docs"
 >
   Renders a preview of different types (image, video, audio or an iframe for any
   other types) from a source URL

diff --git a/docs/react-front-kit/components/responsive-tabs.mdx b/docs/react-front-kit/components/responsive-tabs.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx',
   }}
+  storybookInfo="3-custom-components-responsivetabs--docs"
 >
   Renders a responsive [Mantine Tabs](https://v6.mantine.dev/core/tabs/)
   component that moves overflowing tabs into a dropdown button

diff --git a/docs/react-front-kit/components/search-bar.mdx b/docs/react-front-kit/components/search-bar.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/SearchBar/SearchBar.tsx',
   }}
+  storybookInfo="3-custom-components-searchbar--docs"
 >
   Render a search bar with controlled search input, clear button and optional
   left section

diff --git a/docs/react-front-kit/components/searchable-checkbox-list.mdx b/docs/react-front-kit/components/searchable-checkbox-list.mdx
@@ -10,6 +10,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.tsx',
   }}
+  storybookInfo="3-custom-components-searchablecheckboxlist--docs"
 >
   Renders a search bar with checkboxes and a validation button
 </Description>

diff --git a/docs/react-front-kit/components/selectable-list.mdx b/docs/react-front-kit/components/selectable-list.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/SelectableList/SelectableList.tsx',
   }}
+  storybookInfo="3-custom-components-selectablelist--docs"
 >
   Renders a vertical list of arbitrary elements, adding a selection checkbox to
   each row. A controlled array of index values determines which row is currently

diff --git a/docs/react-front-kit/components/sidebar-filters.mdx b/docs/react-front-kit/components/sidebar-filters.mdx
@@ -15,6 +15,7 @@
   sourceInfo={{
     link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.tsx',
   }}
+  storybookInfo="3-custom-components-sidebarfilters--docs"
 >
   Renders a column of nested menus containing filters with a submit button,
   active filters are shown and can be canceled