-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Quentin Le Caignec
committed
Dec 8, 2023
1 parent
1854b6f
commit 1f92b62
Showing
6 changed files
with
152 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # Action Bar | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'Group', | ||
| link: 'https://v6.mantine.dev/core/group/', | ||
| }, | ||
| ]} | ||
| importExample="import { ActionBar } 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/ActionBar/ActionBar.tsx', | ||
| }} | ||
| > | ||
| 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-actionbar--docs" height="820" /> | ||
|
|
||
| ## Props | ||
|
|
||
| ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`. | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | --------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | selectedElements <Required/> | `Data[]` | - | Array of currently selected elements, necessary for the `actions` to be able to pass those elements along | | ||
| | selectedElementsLabel <Required/> | `(selectedElements: number) => string` | ``(selectedElements: number) => `${selectedElements} file(s) selected` `` | Function used to generate the string that displays how many elements are currently selected, it gives the current number of elements in the `selectedElements` array as a parameter | | ||
| | actions | [`IAction`](./thumbnail#ithumbnailaction) `<Data \| Data[]>[]` | - | Array of [`IAction`](../shared-types/actions/iactiont) for mass action shown in the bar | | ||
| | modalProps | [`IThumbnailAction[]`](./thumbnail#ithumbnailaction) | - | Extra props passed to the internal [Mantine Modal](https://v6.mantine.dev/core/modal/) component, used for actions with confirmation enabled | | ||
| | ... | - | - | extends [Group props](https://v6.mantine.dev/core/group/?t=props) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { GitHubLogo } from '../../src/icons/GitHubLogo'; | ||
| import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed'; | ||
|
|
||
| # Document List | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'SelectableList', | ||
| link: './selectable-list', | ||
| logo: <GitHubLogo />, | ||
| }, | ||
| ]} | ||
| importExample="import { DocumentList } 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/DocumentList/DocumentList.tsx', | ||
| }} | ||
| > | ||
| Renders a vertical and selectable list of [DocumentCards](./DocumentCard), | ||
| with an [ActionBar](./action-bar) | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed | ||
| storyId="3-custom-components-documentlist--docs" | ||
| height="1660" | ||
| /> | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ----------------------------- | -------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | documents <Required/> | [`IDocument[]`](#idocument) | - | | | ||
| | selectedDocuments <Required/> | [`IDocument[]`](#idocument) | - | | | ||
| | action | `IAction<`[`IDocument \| IDocument[]`](#idocument)`>[]` | - | | | ||
| | actionBarProps | `Omit<IActionBarProps<`[`IDocument`](#idocument)`>, 'actions' \| 'selectedElements' >` | - | Extra props for the internal [ActionBar](./action-bar) component, omitting `actions` and `selectedElements` which are handled by this component | | ||
| | onDocumentSelected | `(document: `[`IDocument`](#idocument)`, isSelected: boolean) => void` | - | Called when | | ||
| | ... | - | - | extends [SelectableList props](./selectable-list), omitting `children`, `onSelectChange` and `selectedIndexes` which are handled by this component | | ||
|
|
||
| ### `IDocument` | ||
|
|
||
| A data object that will be rendered as a [DocumentCard](./document-card) in the list | ||
|
|
||
| | Attribute | Type | Description | | ||
| | -------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | | ||
| | id <Required/> | `number \| string` | Internal ID of the object, not displayed | | ||
| | author | `string` | Text displayed as the author of the document | | ||
| | content | `ReactNode` | Main content displayed in the document card | | ||
| | date | `string` | Text displayed as the date of the document | | ||
| | iconType | `[`IconMap`](../types/icon-map)` | Icon indicating the filetype of the document, one of the [`IconMap`](../types/icon-map) values | | ||
| | path | `string` | Text displayed as the path of the document | | ||
| | title | `string` | Text displayed as the title of the document | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| # Selectable List | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'Stack', | ||
| link: 'https://v6.mantine.dev/core/stack/', | ||
| }, | ||
| ]} | ||
| importExample="import { SelectableList } 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/SelectableList/SelectableList.tsx', | ||
| }} | ||
| > | ||
| 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 | ||
| selected | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed | ||
| storyId="3-custom-components-selectablelist--docs" | ||
| height="1380" | ||
| /> | ||
|
|
||
| ## Props | ||
|
|
||
| ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`. | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------- | | ||
| | children | `ReactElement[]` | - | Arbitrary array of `ReactElement`s to display as a vertical list | | ||
| | selectedIndexes | `number[]` | `[]` | Controlled array of index values, determines which element in the list is shown as selected | | ||
| | onSelectChange | `(index: number, isSelected: boolean) => void` | - | Called when an element is selected | | ||
| | ... | - | - | extends [Stack props](https://v6.mantine.dev/core/stack/?t=props) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,21 @@ | ||
| # Sidebar Menu | ||
| # Foldable Column Layout | ||
|
|
||
| <Description | ||
| extendsInfo={[{ label: 'Paper', link: 'https://v6.mantine.dev/core/paper/' }]} | ||
| importExample="import { SidebarMenu } from '@smile/react-front-kit';" | ||
| importExample="import { FoldableColumnLayout } 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/SidebarMenu/SidebarMenu.tsx', | ||
| link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Layouts/FoldableColumnLayout/FoldableColumnLayout.tsx', | ||
| }} | ||
| > | ||
| Render a list of nested and collapsible menus | ||
| Renders a generic page content layout with a foldable left sidebar | ||
| </Description> | ||
|
|
||
| ## Usage | ||
|
|
||
| TODO | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed storyId="3-custom-components-sidebarmenu--docs" height="1250" /> | ||
|
|
||
| ## Props | ||
|
|
||
| TODO | ||
| <StorybookEmbed | ||
| storyId="3-custom-layouts-foldablecolumnlayout--foldable-column-layout" | ||
| height="700" | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters