-
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.
docs: added/changed docs for FilterList, SearchableCheckboxList, Side…
…barFilter, SwitchableView
- Loading branch information
Quentin Le Caignec
committed
Dec 19, 2023
1 parent
fafed97
commit 944c260
Showing
5 changed files
with
102 additions
and
4 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,43 @@ | ||
| # Filter List | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'Stack', | ||
| link: 'https://v6.mantine.dev/core/stack/', | ||
| }, | ||
| ]} | ||
| importExample="import { FilterList } 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/FilterList/FilterList.tsx', | ||
| }} | ||
| > | ||
| Renders a list of active filters, with a button to open a modal and manage | ||
| which filters are active/displayed in the list, and an optional submit button | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed storyId="3-custom-components-filterlist--docs" height="1000" /> | ||
|
|
||
| ## Props | ||
|
|
||
| `T` extends [`ICheckbox`](./icheckbox). | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ---------------------------------- | --------------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- | | ||
| | filters <Required/> | [`IFilter[]`](../shared-types/filters#ifilter) | `[]` | Array of filters to display, and to show in the filter manager modal | | ||
| | direction | `"row" \| "column"` | `-` | TODO: change this | | ||
| | filtersManageLabel | `string` | `"Manage filters"` | Label of button to open filter management | | ||
| | manageFilterModalSearchPlaceholder | `string` | `"Search in filters"` | Placeholder of search input in filter manager modal | | ||
| | manageFilterModalSearchSubmit | `string` | `"Confirm changes"` | Label of submit button in filter manager modal | | ||
| | manageFilterModalTitle | `string` | `"Manage filters"` | Title of filter manager modal | | ||
| | submitLabel | `string` | `"Filter"` | Label of optional submit button | | ||
| | onActiveFiltersChange | `(filters: `[`IFilter[]`](../shared-types/filters#ifilter)`) => void` | `-` | Called when active filters change, when which filters are active/inactive is modified in the filter manager modal | | ||
| | onSubmit | `(activeFilters: `[`IFilter[]`](../shared-types/filters#ifilter)`) => void` | `-` | Called when optional submit button is clicked, submit button is only displayed when this prop is not undefined | | ||
| | modalProps | [`ModalProps`](https://v6.mantine.dev/core/modal/?t=props) | `-` | Extra props for the Mantine [Modal](https://v6.mantine.dev/core/modal/) | | ||
| | ... | | `-` | 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # Searchable Checkbox List | ||
|
|
||
| <Description | ||
| importExample="import { SearchableCheckboxList } 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/SearchableCheckboxList/SearchableCheckboxList.tsx', | ||
| }} | ||
| > | ||
| Renders a list of active and inactive checkboxes, with a filtering input and a | ||
| submit button | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed | ||
| storyId="3-custom-components-searchablecheckboxlist--docs" | ||
| height="1000" | ||
| /> | ||
|
|
||
| ## Props | ||
|
|
||
| `T` extends [`ICheckbox`](./icheckbox). | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------- | --------------------------- | --------------------- | ------------------------------------ | | ||
| | checkboxes | [`T[]`](#icheckbox) | `[]` | Array of active/inactive checkboxes | | ||
| | buttonLabel | `string` | `"Validate changes"` | Label of submit button | | ||
| | onClickButton | `(checkboxes: T[]) => void` | `-` | Called when submit button is clicked | | ||
| | placeholder | `string` | `"Search in options"` | Placeholder of the search input | | ||
|
|
||
| ### `ICheckbox` | ||
|
|
||
| | Attribute | Type | Description | | ||
| | ----------------- | ------------------ | -------------------------------------------------- | | ||
| | id <Required/> | `number \| string` | ID of checkbox | | ||
| | label <Required/> | `string` | Label of checkbox | | ||
| | active | `boolean` | Indicates if the checkbox is active/checked or not | |
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
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,10 @@ | ||
| # Action Types | ||
|
|
||
| ## `IFilter` | ||
|
|
||
| | Attribute | Type | Description | | ||
| | ----------------- | ------------------ | -------------------------------------------------- | | ||
| | id <Required/> | `number \| string` | ID of filter | | ||
| | label <Required/> | `string` | Label of filter | | ||
| | active | `boolean` | Indicates if the filter is active/displayed or not | | ||
| | component | `ReactElement` | The content of filter, typically an input | |