Skip to content

Commit

Permalink
Feat/sidebar refactor (#13)
Browse files Browse the repository at this point in the history 
* docs: updated SidebarFilter and SidebarMenu docs

* refactor: renamed DocumentCard to DocumentBox

* feat: added SummaryBox doc

* feat: added compactStyle to ActionRowOverflow, added action example to SummaryBox stories
  • Loading branch information
@MorganeLeCaignec
MorganeLeCaignec authored Jan 25, 2024
1 parent 15dc9f2 commit 0e37e97
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 47 deletions.
21 changes: 10 additions & 11 deletions docs/components/01-action-bar.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { GitHubLogo } from '../../src/icons/GitHubLogo';

# Action Bar

<Description
extendsInfo={[
{
label: 'Group',
link: 'https://v6.mantine.dev/core/group/',
label: 'ActionRowOverflow',
link: './action-row-overflow',
logo: <GitHubLogo />,
},
]}
importExample="import { ActionBar } from '@smile/react-front-kit';"
Expand All @@ -27,13 +30,9 @@

## Props

ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`.
ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionRowOverflow](./action-row-overflow).

| 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 |
| rowActionNumber | `number` | `1` | Index value used to determine which actions will be displayed directly in the action column (before this index) or in the action menu (starting at this index) |
| ... | - | - | extends [Group props](https://v6.mantine.dev/core/group/?t=props) |
| Name | Type | Default | Description |
| --------------------------------- | -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 |
| ... | - | - | extends [`ActionRowOverflow props`](./action-row-overflow#props) |
45 changes: 45 additions & 0 deletions docs/components/01-action-row-overflow.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Action Row Overflow

<Description
extendsInfo={[
{
label: 'Group',
link: 'https://v6.mantine.dev/core/group/',
},
]}
importExample="import { ActionRowOverflow } 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/ActionRowOverflow/ActionRowOverflow.tsx',
}}
>
Renders an array of [`IAction`s](../shared-types/actions#iactiont) as
[ActionIcons](https://v6.mantine.dev/core/action-icon/), with an option to
show only a portion of the array and insert the rest into a menu
</Description>

## Storybook Docs

<StorybookEmbed
storyId="3-custom-components-actionrowoverflow--docs"
height="820"
/>

## Props

ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`.

| Name | Type | Default | Description |
| ---------------------------- | -------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actionButtonProps | [`ButtonProps`](https://v6.mantine.dev/core/button/?t=props) | - | Extra props for the visible action buttons in default mode |
| actionTooltipProps | [`TooltipProps`](https://v6.mantine.dev/core/tooltip/?t=props) | - | Extra props for the action tooltips, on the menu icon and on the action icons in compact mode |
| actions | [`IAction`](./thumbnail#ithumbnailaction) `<Data \| Data[]>[]` | - | Array of [`IAction`](../shared-types/actions#iactiont) for the rendered action buttons or actions inside the menu |
| isCompactStyle | `boolean` | `false` | Boolean value that determines the display style, either default (`false`) or compact (`true`) |
| 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 |
| overflowMenuLabel | `string` | `Other actions` | String used as both the `aria-label` and the Tooltip label of the menu button/icon |
| rowActionNumber | `number` | `1` | Index value used to determine which actions will be displayed directly in the action column (before this index) or in the action menu (starting at this index) |
| selectedElements <Required/> | `Data[]` | - | Array of currently selected elements, necessary for the `actions` to be able to pass those elements along |
| ... | - | - | extends [Group props](https://v6.mantine.dev/core/group/?t=props) |
10 changes: 5 additions & 5 deletions docs/components/01-document-card.mdx → docs/components/01-document-box.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# Document Card
# Document Box

<Description
importExample="import { DocumentCard } from '@smile/react-front-kit';"
importExample="import { DocumentBox } 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/DocumentCard/DocumentCard.tsx',
link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/DocumentBox/DocumentBox.tsx',
}}
>
Renders a card showing the thumbnail, and the optional title, metadata and
Renders a box showing the thumbnail, and the optional title, metadata and
content of a document
</Description>

## Storybook Docs

<StorybookEmbed storyId="3-custom-components-documentcard--docs" height="950" />
<StorybookEmbed storyId="3-custom-components-documentbox---docs" height="950" />

## Props

Expand Down
6 changes: 3 additions & 3 deletions docs/components/01-document-list.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';
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](./document-card),
Renders a vertical and selectable list of [DocumentBoxes](./document-box),
with an [ActionBar](./action-bar)
</Description>

Expand All @@ -44,13 +44,13 @@ import StorybookEmbed from '../../src/components/StorybookEmbed/StorybookEmbed';

### `IDocument`

A data object that will be rendered as a [DocumentCard](./document-card) in the list
A data object that will be rendered as a [DocumentBox](./document-box) 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 |
| content | `ReactNode` | Main content displayed in the document box |
| date | `string` | Text displayed as the date of the document |
| iconType | `[`IconMap`](../shared-types/icon-map)` | Icon indicating the filetype of the document, one of the [`IconMap`](../shared-types/icon-map) values |
| path | `string` | Text displayed as the path of the document |
Expand Down
34 changes: 13 additions & 21 deletions docs/components/01-sidebar-filter.mdx → docs/components/01-sidebar-filters.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,19 @@

## Props

| Name | Type | Default | Description |
| -------------------------- | -------------------------------------------------------- | ------------------ | --------------------------------------------------- |
| activeFilters | [`ISidebarFilter[]`](#isidebarfilter) | `[]` | Array of active filter values |
| defaultOpenedActiveFilters | `booleane` | `true` | Define if collapse of active filters tags is opened |
| defaultOpenedMenuIds | `number \| string` | `[]` | Default collapse menu opened |
| deleteButtonLabel | `string` | `"Remove all"` | Label of button that removes all active filters |
| filterButtonLabel | `string` | `"Filter"` | Label of submit button |
| menus | [`IFiltersItem<string \| number>[]`](#ifiltersitem) | `[]` | Array of nested menus containing filters |
| title | `ReactNode` | `"Active filters"` | Title shown at the top of the column |
| closeAllFiltersLabel | `string` | `"Close all"` | Label of button close all filters |
| onDeleteButtonClick | [`(filters: ISidebarFilter[]) => void`](#isidebarfilter) | - | Called when an active filter is removed |
| onFilterButtonClick | [`(filters: ISidebarFilter[]) => void`](#isidebarfilter) | - | Called when submit button is clicked |
| openAllFiltersLabel | `string` | `"Open all"` | Label of button open all filters |

### `IFiltersItem`

| Attribute | Type | Description |
| --------- | ---------------- | --------------------------------------------------------------- |
| children | `IFiltersItem[]` | Nested array of menus |
| content | `ReactNode` | Filter(s) contained in the menu |
| ... | - | Extends `IMenuItem` of [SidebarMenu](./sidebar-menu#imenuitem). |
| Name | Type | Default | Description |
| -------------------------- | ----------------------------------------------------------- | ------------------ | --------------------------------------------------- |
| activeFilters | [`ISidebarFilter[]`](#isidebarfilter) | `[]` | Array of active filter values |
| defaultOpenedActiveFilters | `booleane` | `true` | Define if collapse of active filters tags is opened |
| defaultOpenedMenuIds | `number \| string` | `[]` | Default collapse menu opened |
| deleteButtonLabel | `string` | `"Remove all"` | Label of button that removes all active filters |
| filterButtonLabel | `string` | `"Filter"` | Label of submit button |
| menus | [`IMenuItem<string \| number>[]`](./sidebar-menu#imenuitem) | `[]` | Array of nested menus containing filters |
| title | `ReactNode` | `"Active filters"` | Title shown at the top of the column |
| closeAllFiltersLabel | `string` | `"Close all"` | Label of button close all filters |
| onDeleteButtonClick | [`(filters: ISidebarFilter[]) => void`](#isidebarfilter) | - | Called when an active filter is removed |
| onFilterButtonClick | [`(filters: ISidebarFilter[]) => void`](#isidebarfilter) | - | Called when submit button is clicked |
| openAllFiltersLabel | `string` | `"Open all"` | Label of button open all filters |

### `ISidebarFilter`

Expand Down
Loading

0 comments on commit 0e37e97

Please sign in to comment.