-
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.
* feat: add searchable-checkbox-list and update action-bar * feat: add fitler-list, header-mobile, header-nav, preview components doc * feat: fix spelling error * feat: fix pr from Quentin * feat: fix pr from Quentin
- Loading branch information
vapersmile
authored
Jan 12, 2024
1 parent
6b567b0
commit 15dc9f2
Showing
7 changed files
with
230 additions
and
11 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
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,62 @@ | ||
| # Filter List | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'Stack', | ||
| link: 'https://v6.mantine.dev/core/stack/', | ||
| }, | ||
| { | ||
| label: 'Container', | ||
| link: 'https://v6.mantine.dev/core/container/', | ||
| }, | ||
| { | ||
| label: 'Modal', | ||
| link: 'https://v6.mantine.dev/core/modal/', | ||
| }, | ||
| { | ||
| label: 'SearchableCheckboxList', | ||
| link: 'https://smile-sa.github.io/react-front-kit/?path=/docs/3-custom-components-searchablecheckboxlist--docs', | ||
| }, | ||
| ]} | ||
| 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 filters with text inputs and a manage filters button which | ||
| displays the component | ||
| [SearchableCheckboxList](../components/searchable-checkbox-list) | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed storyId="3-custom-components-filterlist--docs" height="1600" /> | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ---------------------------------- | -------------------------------------- | --------------------- | --------------------------------------------------------------------- | | ||
| | filters <Required/> | `IFilter[] | - | Array of filters | | ||
| | onActiveFiltersChange | `((filters: IFilter[]) => void)` | - | Callback function called when the `confirm change` button is clicked. | | ||
| | onSubmit | `((activeFilters: IFilter[]) => void)` | - | Callback function called when the `submit` button is clicked. | | ||
| | direction | `"row" \| "column"` | `"row"` | Display orientation | | ||
| | filtersManageLabel | `string` | `"Manage filters"` | Label of filters manage button | | ||
| | manageFilterModalSearchPlaceholder | `string` | `"Search in filters"` | Placeholder of filter modal search | | ||
| | manageFilterModalSearchSubmit | `string` | `"Confirm changes"` | Label of confirm change button in modal | | ||
| | manageFilterModalTitle | `string` | `"Manage filters"` | Title of manage filter modal | | ||
| | modalProps | `ModalProps` | - | Props of [Modal](https://v6.mantine.dev/core/modal/) component | | ||
| | submitLabel | `string` | `"Filter"` | Submit button label | | ||
|
|
||
| ### `IFilter` | ||
|
|
||
| | Attribute | Type | Description | | ||
| | ----------------- | ------------------ | -------------------------- | | ||
| | active | `boolean` | Define if filter is active | | ||
| | component | `ReactElement` | component element | | ||
| | id <required/> | `number \| string` | identifier | | ||
| | label <required/> | `string` | Label value | |
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 @@ | ||
| # Header Mobile | ||
|
|
||
| <Description | ||
| extendsInfo={[ | ||
| { | ||
| label: 'AppShell (Header)', | ||
| link: 'https://v6.mantine.dev/core/app-shell/', | ||
| }, | ||
| ]} | ||
| importExample="import { HeaderMobile } 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/HeaderMobile/HeaderMobile.tsx', | ||
| }} | ||
| > | ||
| Render an application header with optional left section, right section, | ||
| content and search button/bar for mobile display | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed | ||
| storyId="3-custom-components-headermobile--docs" | ||
| height="2110" | ||
| /> | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | -------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------- | | ||
| | children | `ReactNode` | - | Main content of header | | ||
| | height | `number` | `90` | Height of Header | | ||
| | left | `ReactNode` | - | Left section | | ||
| | right | `ReactNode` | - | Right section | | ||
| | searchValue | `string` | - | Controlled value of search bar input | | ||
| | onSearchSubmit | `(event: FormEvent) => void` | - | Called when search bar input is submitted | | ||
| | WithBorder | `boolean` | `false` | Display or not a border on the Header | | ||
| | ... | - | - | extends [Mantine's HeaderProps](https://v6.mantine.dev/core/app-shell/?t=props#headercomponentprops) | |
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,36 @@ | ||
| # Header Nav | ||
|
|
||
| <Description | ||
| importExample="import { HeaderNav } 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/HeaderNav/HeaderNav.tsx', | ||
| }} | ||
| > | ||
| Renders a list of menus as either a horizontal list of NavLink components or a | ||
| vertical SidebarMenu in mobile mode | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed storyId="3-custom-components-headernav--docs" height="1210" /> | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ----------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | menus <required/> | `IHeaderNavMenu<T>[]` | - | Array of menu objets to be rendered in vertical or horizontal lists | | ||
| | isMobile | `boolean` | `false` | Determines if the menus will be displayed as a horizontal list of NavLink components (desktop) or as a vertical SidebarMenu (mobile) | | ||
| | navLinkComponent | `ElementType` | `"a"` | Type of Element tag used for the NavLink components | | ||
|
|
||
| ## IHeaderNavMenu | ||
|
|
||
| `IHeaderNavMenu` has a generic `T` that extend of `number | string` and it extend of `IMenuItem<T>` | ||
|
|
||
| | Name | Type | Description | | ||
| | -------- | --------------------- | ------------------------------------------------ | | ||
| | children | `IHeaderNavMenu<T>[]` | Object array to be rendered in a header sub-menu | | ||
| | url | `string` | the url of the navigation link | |
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,29 @@ | ||
| # Preview | ||
|
|
||
| <Description | ||
| importExample="import { Preview } 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/Preview/Preview.tsx', | ||
| }} | ||
| > | ||
| Renders a preview of different types (image, video, audio or an iframe for any | ||
| other types) from a source URL | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed storyId="3-custom-components-preview--docs" height="4490" /> | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------------ | -------- | ------- | --------------------------------------- | | ||
| | url <Required/> | `string` | - | Source url | | ||
| | defaultAspectRatio | `number` | - | Default default aspect ratio of preview | | ||
| | defaultHeight | `number` | - | Default height of the preview | | ||
| | defaultMimeType | `string` | - | Default mime type of the preview | | ||
| | defaultWidth | `number` | - | Default width of the preview | |
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 | ||
| extendsInfo={[]} | ||
| 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 search bar with checkboxes and a validation button | ||
| </Description> | ||
|
|
||
| ## Storybook Docs | ||
|
|
||
| <StorybookEmbed | ||
| storyId="3-custom-components-searchablecheckboxlist--docs" | ||
| height="820" | ||
| /> | ||
|
|
||
| ## Props | ||
|
|
||
| `T` extends ICheckbox | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------- | ----------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | ||
| | checkboxes | `T[]` | - | Object array that displays a list of checkboxes with their values and labels in different rows if they are activated or not. | | ||
| | buttonLabel | `string` | `"Validate changes"` | Label of button | | ||
| | onClickButton | `((checkboxes: T[]) => void)` | - | Called when the confirm button is clicked | | ||
| | placeholder | `string` | `"Search in options"` | placeholder of input text | | ||
|
|
||
| ## ICheckbox | ||
|
|
||
| | Attribute | Type | Description | | ||
| | ------------------ | ------------------ | ------------------------------------------------------------------ | | ||
| | active | `boolean` | Controlled value that determines if the Checkbox is checked or not | | ||
| | id <Required/> | `number \| string` | Id of the checkbox | | ||
| | label: <Required/> | 'string' | Label of the Checkbox | |
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