From 7f276b27e9c2ca2b746ad0f39deaee49cbf8bb90 Mon Sep 17 00:00:00 2001 From: vapersmile <120370047+vapersmile@users.noreply.github.com> Date: Fri, 8 Dec 2023 15:49:57 +0100 Subject: [PATCH] Feat/filters (#81) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(redmine 1245005): add filters component in searchResultPage * feat(redmine 1245005): add number counter fo actif filters * feat(redmine 1245005): add indentation without line style for collapseButton * feat(redmine 1245005): add new fonctionality Button remove location and active filters collapse * feat(redmine 1245005): add button close all + open all + add function getFiltersMenuId * feat(redmine 1245005): add line for between button open and close * feat(redmine 1245005): use flat() for collapse menu active * feat(redmine 1245005): modify story and rename Fiters to filtersBar component * feat(redmine 1245005): modify story and rename Fiters to filtersBar component * feat(redmine 1245005): add dynamique data for search results * feat(redmine 1245005): fix no-wrap error for badge in filters active section * feat(redmine 1245005): add filters numbers active value on searchbar * feat(redmine 1245005): fixe test mantine ids test error * feat(redmine 1245005): fixe intégration error * feat(redmine 1245005): fixe pr review by Quentin * feat(redmine 1245005): fixe pr review by Quentin * feat(redmine 1245005): fix pr conflicts --- .changeset/slow-rivers-confess.md | 6 + .vscode/launch.json | 15 + package-lock.json | 1 + .../CollapseButton/CollapseButton.stories.tsx | 9 +- .../CollapseButton/CollapseButton.tsx | 2 +- .../CollapseButtonControlled.tsx | 29 +- .../Components/Filters/Filters.stories.tsx | 38 -- .../src/Components/Filters/Filters.test.tsx | 10 - .../src/Components/Filters/Filters.tsx | 88 --- .../SidebarFilterMenu.mock.tsx | 60 -- .../__snapshots__/Filters.test.tsx.snap | 83 --- .../FiltersBar/FiltersBar.stories.tsx | 38 ++ .../FiltersBar.style.tsx} | 42 +- .../Components/FiltersBar/FiltersBar.test.tsx | 21 + .../src/Components/FiltersBar/FiltersBar.tsx | 219 +++++++ .../Components/FiltersBar/FitlersBar.mock.tsx | 26 + .../SidebarFilterMenu.mock.tsx | 89 +++ .../SidebarFilterMenu.style.tsx | 0 .../SidebarFilterMenu.test.tsx | 0 .../SidebarFilterMenu/SidebarFilterMenu.tsx | 33 +- .../SidebarFilterMenu.test.tsx.snap | 0 .../__snapshots__/FiltersBar.test.tsx.snap | 587 ++++++++++++++++++ .../Components/SidebarMenu/SidebarMenu.tsx | 2 +- .../__snapshots__/SidebarMenu.test.tsx.snap | 4 +- packages/react-front-kit/src/index.tsx | 2 +- packages/storybook-pages/package.json | 1 + .../SearchResults/SearchResults.style.tsx | 22 + .../src/Pages/SearchResults/SearchResults.tsx | 322 ++++++++-- 28 files changed, 1376 insertions(+), 373 deletions(-) create mode 100644 .changeset/slow-rivers-confess.md create mode 100644 .vscode/launch.json delete mode 100644 packages/react-front-kit/src/Components/Filters/Filters.stories.tsx delete mode 100644 packages/react-front-kit/src/Components/Filters/Filters.test.tsx delete mode 100644 packages/react-front-kit/src/Components/Filters/Filters.tsx delete mode 100644 packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.mock.tsx delete mode 100644 packages/react-front-kit/src/Components/Filters/__snapshots__/Filters.test.tsx.snap create mode 100644 packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx rename packages/react-front-kit/src/Components/{Filters/Filters.style.tsx => FiltersBar/FiltersBar.style.tsx} (55%) create mode 100644 packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx create mode 100644 packages/react-front-kit/src/Components/FiltersBar/FiltersBar.tsx create mode 100644 packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx create mode 100644 packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.mock.tsx rename packages/react-front-kit/src/Components/{Filters => FiltersBar}/SidebarFilterMenu/SidebarFilterMenu.style.tsx (100%) rename packages/react-front-kit/src/Components/{Filters => FiltersBar}/SidebarFilterMenu/SidebarFilterMenu.test.tsx (100%) rename packages/react-front-kit/src/Components/{Filters => FiltersBar}/SidebarFilterMenu/SidebarFilterMenu.tsx (84%) rename packages/react-front-kit/src/Components/{Filters => FiltersBar}/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap (100%) create mode 100644 packages/react-front-kit/src/Components/FiltersBar/__snapshots__/FiltersBar.test.tsx.snap create mode 100644 packages/storybook-pages/src/Pages/SearchResults/SearchResults.style.tsx diff --git a/.changeset/slow-rivers-confess.md b/.changeset/slow-rivers-confess.md new file mode 100644 index 00000000..2c7d63d1 --- /dev/null +++ b/.changeset/slow-rivers-confess.md @@ -0,0 +1,6 @@ +--- +'@smile/react-front-kit': minor +'storybook-pages': minor +--- + +Add the filtersBar component and add it to the searchResult page diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..88e079b3 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Utilisez IntelliSense pour en savoir plus sur les attributs possibles. + // Pointez pour afficher la description des attributs existants. + // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} diff --git a/package-lock.json b/package-lock.json index 917266b0..f7364854 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35767,6 +35767,7 @@ "peerDependencies": { "@emotion/react": ">=11", "@mantine/core": "6", + "@mantine/dates": "6", "@mantine/hooks": "6", "@mantine/styles": "6", "@phosphor-icons/react": ">=2", diff --git a/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.stories.tsx b/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.stories.tsx index 975d7675..7a312095 100644 --- a/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.stories.tsx +++ b/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.stories.tsx @@ -14,6 +14,10 @@ const meta = { id: { control: 'text', }, + indentation: { + control: 'select', + options: ['line', 'simple'], + }, label: { control: 'text', }, @@ -49,11 +53,11 @@ export const CollapseButton: IStory = { children, fullWidth: true, id: '', + indentation: 'simple', isOpenOnSelect: false, label: 'Home', leftIcon: iconsElements.HouseLine, level: 0, - line: false, radius: 0, selected: false, variant: 'white', @@ -80,11 +84,11 @@ export const Nested: IStory = { ), fullWidth: true, id: '', + indentation: 'line', isOpenOnSelect: false, label: 'Pull Requests', leftIcon: iconsElements.User, level: 0, - line: true, radius: 0, selected: false, }, @@ -101,7 +105,6 @@ export const WithLink: IStory = { label: 'Home', leftIcon: iconsElements.HouseLine, level: 0, - line: false, radius: 0, selected: false, variant: 'white', diff --git a/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx b/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx index d888ab1e..03509fa2 100644 --- a/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx +++ b/packages/react-front-kit/src/Components/CollapseButton/CollapseButton.tsx @@ -24,10 +24,10 @@ export interface ICollapseButtonProps< componentProps?: ComponentPropsWithoutRef; defaultOpened?: boolean; id?: T; + indentation?: 'line' | 'simple'; isOpenOnSelect?: boolean; label?: ReactNode; level?: number; - line?: boolean; onSelect?: (id?: T) => void; selected?: boolean; } diff --git a/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx b/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx index 101099a0..212efed7 100644 --- a/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx +++ b/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx @@ -27,6 +27,16 @@ const useStyles = createStyles((theme) => ({ background: theme.colorScheme === 'light' ? theme.white : theme.colors.dark[7], }, + indentationLine: { + borderLeft: + theme.colorScheme === 'light' + ? `1px solid ${theme.colors.gray[1]}` + : `1px solid ${theme.colors.gray[8]}`, + marginLeft: 30, + }, + indentationSimple: { + paddingLeft: 30, + }, label: { color: theme.colorScheme === 'light' @@ -41,13 +51,6 @@ const useStyles = createStyles((theme) => ({ labelLevel1: { fontSize: theme.fontSizes.md, }, - line: { - borderLeft: - theme.colorScheme === 'light' - ? `1px solid ${theme.colors.gray[1]}` - : `1px solid ${theme.colors.gray[8]}`, - marginLeft: 30, - }, rightIcon: { color: theme.colorScheme === 'light' @@ -89,10 +92,10 @@ export function CollapseButtonControlled< fullWidth = true, id, isOpenOnSelect = false, + indentation, label, leftIcon, level = 0, - line, onCollapseChange, onSelect, opened = false, @@ -129,6 +132,14 @@ export function CollapseButtonControlled< rootClasses.push(classes.rootDeepLevel); labelClasses.push(classes.labelDeepLevel); } + + const indentationStyle = + indentation === 'simple' + ? classes.indentationSimple + : indentation === 'line' + ? classes.indentationLine + : ''; + return ( <> - -
- {activeFilters.map((filter) => ( - filter.onRemove?.(filter)} - pr={3} - rightSection={} - size="xl" - variant="outline" - > - {filter.label} - - ))} -
-
- -
-
- -
- - ); -} diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.mock.tsx b/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.mock.tsx deleted file mode 100644 index f74543e9..00000000 --- a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.mock.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { IFiltersItem } from './SidebarFilterMenu'; - -import { Checkbox, Group } from '@mantine/core'; - -export const menu: IFiltersItem[] = [ - { - content: ( - <> - - Dupont - -
- - Martin - -
- - Andrée - - - ), - id: 1, - label: 'Nom du client', - }, - { - children: [ - { - content: ( - <> - - CDI - -
- - CDD - - - ), - id: 10, - label: 'Contrat classique', - }, - { - content: ( - - Freelance - - ), - id: 11, - label: 'Contrat special', - }, - ], - id: 3, - label: 'Type de contrat', - }, - { - id: 8, - label: 'Période', - }, - { id: 9, label: 'Durée du contrat' }, -]; diff --git a/packages/react-front-kit/src/Components/Filters/__snapshots__/Filters.test.tsx.snap b/packages/react-front-kit/src/Components/Filters/__snapshots__/Filters.test.tsx.snap deleted file mode 100644 index 815e8bd2..00000000 --- a/packages/react-front-kit/src/Components/Filters/__snapshots__/Filters.test.tsx.snap +++ /dev/null @@ -1,83 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Filters matches snapshot 1`] = ` -
-
-
-
- - Active filters - - -
-
-
-
-
-
-
- -
-
-
-`; diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx new file mode 100644 index 00000000..2680699f --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FiltersBar as Cmp } from './FiltersBar'; +import { activeFilters } from './FitlersBar.mock'; +import { getMenu } from './SidebarFilterMenu/SidebarFilterMenu.mock'; + +const meta = { + component: Cmp, + tags: ['autodocs'], + title: '3-custom/Components/FiltersBar', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const WithActiveFilters: IStory = { + args: { + activeFilters, + defaultOpenedActiveFilters: true, + defaultOpenedMenuIds: [1, 3, 10, 11], + deleteButtonLabel: 'Remove all', + filterButtonLabel: 'Filtrer', + menus: getMenu(true), + title: 'Active filters', + }, +}; + +export const WithoutActiveFilters: IStory = { + args: { + activeFilters: [], + defaultOpenedActiveFilters: false, + defaultOpenedMenuIds: [1, 3, 10, 11], + deleteButtonLabel: 'Remove all', + filterButtonLabel: 'Filtrer', + menus: getMenu(false), + title: 'Active filters', + }, +}; diff --git a/packages/react-front-kit/src/Components/Filters/Filters.style.tsx b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.style.tsx similarity index 55% rename from packages/react-front-kit/src/Components/Filters/Filters.style.tsx rename to packages/react-front-kit/src/Components/FiltersBar/FiltersBar.style.tsx index 9ec61d25..5ad7787e 100644 --- a/packages/react-front-kit/src/Components/Filters/Filters.style.tsx +++ b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.style.tsx @@ -2,17 +2,33 @@ import { createStyles } from '@mantine/styles'; export const useStyles = createStyles((theme) => ({ activeFilters: { - display: 'flex', - flexWrap: 'nowrap', + flexWrap: 'wrap', marginTop: '16px', }, activeFiltersButtonRoot: { minWidth: '100%', + paddingRight: '0', + }, + activeFiltersCollapseInner: { + display: 'flex', + justifyContent: 'space-between', + }, + activeFiltersCollapseLabel: { + color: theme.colors.gray[0], + textAlign: 'left', + }, + activeFiltersCollapseRoot: { + background: 'inherit', + padding: '0px', }, badgeInner: { + '&::first-letter': { + textTransform: 'uppercase', + }, fontWeight: 600, position: 'relative', right: '4px', + textTransform: 'initial', }, badgeRight: { position: 'relative', @@ -27,15 +43,33 @@ export const useStyles = createStyles((theme) => ({ fontWeight: 'normal', marginBottom: '8px', marginRight: '8px', - textTransform: 'capitalize', + minWidth: '60px', }, bottom: { padding: '24px 24px 48px 24px', }, buttonRemoveRoot: { color: 'white', fontSize: '14px', padding: '0' }, + controlledMenu: { + borderBottom: `${theme.colors.gray[3]} 1px solid`, + color: theme.colors.dark[3], + fontWeight: 600, + paddingBottom: '10px', + }, + controlledMenuButton: { + cursor: 'pointer', + }, + controlledMenuLine: { + background: theme.colors.gray[2], + height: '25px', + width: '1px', + }, middle: { margin: '0px 24px', }, + removeAllFiltersButtonRoot: { + marginTop: '8px', + width: '100%', + }, root: { backgroundColor: 'white', borderRadius: '16px', @@ -49,6 +83,6 @@ export const useStyles = createStyles((theme) => ({ borderRadius: '16px 16px 0px 0px', color: 'white', marginBottom: '24px', - padding: '24px', + padding: '24px 44px', }, })); diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx new file mode 100644 index 00000000..d1ba10b2 --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx @@ -0,0 +1,21 @@ +import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils'; + +import { FiltersBar } from './FiltersBar'; +import { activeFilters } from './FitlersBar.mock'; +import { menuWithoutContent } from './SidebarFilterMenu/SidebarFilterMenu.mock'; + +describe('FiltersBar', () => { + it('matches snapshot', () => { + const { container } = renderWithProviders( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.tsx b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.tsx new file mode 100644 index 00000000..9c3b1d12 --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.tsx @@ -0,0 +1,219 @@ +'use client'; + +import type { IFiltersItem } from './SidebarFilterMenu/SidebarFilterMenu'; +import type { ReactElement, ReactNode } from 'react'; + +import { ActionIcon, Badge, Box, Button, Group } from '@mantine/core'; +import { CaretDown, CaretUp, TrashSimple, X } from '@phosphor-icons/react'; +import { useMemo, useState } from 'react'; + +import { addPathAndDepth, flattenNestedObjects } from '../../helpers'; +import { CollapseButtonControlled } from '../CollapseButton/CollapseButtonControlled'; + +import { useStyles } from './FiltersBar.style'; +import { SidebarFilterMenu } from './SidebarFilterMenu/SidebarFilterMenu'; + +export interface ISidebarFilter { + categoryId: IId[]; + id: IId; + label: string; + onRemove?: (filter: ISidebarFilter) => void; + value: unknown; +} + +type IId = number | string; + +export interface IFiltersProps { + activeFilters?: ISidebarFilter[] | []; + closeAllFiltersLabel?: string; + defaultOpenedActiveFilters?: boolean; + defaultOpenedMenuIds?: IId[]; + deleteButtonLabel?: string; + filterButtonLabel?: string; + menus?: IFiltersItem[] | undefined; + onDeleteButtonClick?: (filters: ISidebarFilter[]) => void; + onFilterButtonClick?: (filters: ISidebarFilter[]) => void; + openAllFiltersLabel?: string; + title?: ReactNode; +} + +export function FiltersBar(props: IFiltersProps): ReactElement { + const { + activeFilters = [], + closeAllFiltersLabel = 'Close all', + title = 'Active filters', + menus = [], + onDeleteButtonClick, + onFilterButtonClick, + openAllFiltersLabel = 'Open all', + deleteButtonLabel = 'Remove all', + filterButtonLabel = 'Filter', + defaultOpenedMenuIds = [], + defaultOpenedActiveFilters = true, + } = props; + const { classes } = useStyles(); + + const flatFilters = useMemo( + () => flattenNestedObjects(addPathAndDepth(menus)), + [menus], + ); + + const [activeFiltersCollapseOpened, setActiveFiltersCollapseOpened] = + useState(defaultOpenedActiveFilters); + const [openedIds, setOpenedIds] = useState(defaultOpenedMenuIds); + + function addActiveNumberToLabel( + menus?: IFiltersItem[], + ): IFiltersItem[] | undefined { + return menus?.map((menu) => ({ + ...menu, + children: addActiveNumberToLabel(menu.children), + label: `${menu.label}${ + activeFilters + .map((activeFilter) => activeFilter.categoryId) + .flat() + .includes(menu.id) + ? ` (${ + activeFilters.filter((activeFilter) => + activeFilter.categoryId.includes(menu.id), + ).length + })` + : '' + }`, + })); + } + + const filtersWithActiveLabel = addActiveNumberToLabel(menus); + + function handleOpenAllButton(): void { + setOpenedIds(flattenNestedObjects(menus).map((menu) => menu.id)); + } + + function handleCloseAllButton(): void { + setOpenedIds([]); + } + + function handlerOnMenuOpen(id: IId): void { + const menuIds = openedIds; + if (menuIds.includes(id)) { + menuIds.splice(menuIds.indexOf(id), 1); + } else { + menuIds.push(id); + } + setOpenedIds([...menuIds]); + } + + const currentIdisNotInOpenIds = !flatFilters.every((filter) => + openedIds.includes(filter.id), + ); + + return ( + +
+ + {title} ({activeFilters.length}) + + } + onSelect={() => { + setActiveFiltersCollapseOpened(!activeFiltersCollapseOpened); + }} + opened={activeFiltersCollapseOpened} + rightIcon={ + { + setActiveFiltersCollapseOpened(!activeFiltersCollapseOpened); + }} + radius="sm" + variant="transparent" + > + {activeFiltersCollapseOpened ? ( + + ) : ( + + )} + + } + > +
+ {activeFilters.map((filter) => ( + filter.onRemove?.(filter)} + pr={3} + rightSection={} + size="xl" + variant="outline" + > + {filter.label} + + ))} +
+ +
+
+ + {openedIds.length > 0 && ( + + )} + {currentIdisNotInOpenIds && openedIds.length > 0 ? ( + + ) : null} + {currentIdisNotInOpenIds ? ( + + ) : null} + + handlerOnMenuOpen(id)} + openedMenuIds={openedIds} + /> +
+
+ + +
+ + ); +} diff --git a/packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx b/packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx new file mode 100644 index 00000000..7e1cec0d --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx @@ -0,0 +1,26 @@ +export const activeFilters = [ + { + categoryId: [1], + id: 1, + label: 'Dupont', + value: 'DUPONT', + }, + { + categoryId: [1], + id: 2, + label: 'Martin', + value: 'MARTIN', + }, + { + categoryId: [3, 10], + id: 3, + label: 'Freelance', + value: 'Freelance', + }, + { + categoryId: [3, 11], + id: 4, + label: 'CDI', + value: 'CDI', + }, +]; diff --git a/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.mock.tsx b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.mock.tsx new file mode 100644 index 00000000..1d5a2164 --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.mock.tsx @@ -0,0 +1,89 @@ +import type { IFiltersItem } from './SidebarFilterMenu'; + +import { Checkbox, Group } from '@mantine/core'; + +export function getMenu(checked: boolean): IFiltersItem[] { + return [ + { + content: ( + <> + + Dupont + +
+ + Martin + +
+ + Andrée + + + ), + id: 1, + label: 'Nom du client', + }, + { + children: [ + { + content: ( + <> + + CDI + +
+ + CDD + + + ), + id: 10, + label: 'Contrat classique', + }, + { + content: ( + + Freelance + + ), + id: 11, + label: 'Contrat special', + }, + ], + id: 3, + label: 'Type de contrat', + }, + { + id: 8, + label: 'Période', + }, + { id: 9, label: 'Durée du contrat' }, + ]; +} + +// Because, the random mantine ids to make fail test +export const menuWithoutContent = [ + { + id: 1, + label: 'Nom du client', + }, + { + children: [ + { + id: 10, + label: 'Contrat classique', + }, + { + id: 11, + label: 'Contrat special', + }, + ], + id: 3, + label: 'Type de contrat', + }, + { + id: 8, + label: 'Période', + }, + { id: 9, label: 'Durée du contrat' }, +]; diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.style.tsx b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.style.tsx similarity index 100% rename from packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.style.tsx rename to packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.style.tsx diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.test.tsx b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.test.tsx similarity index 100% rename from packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.test.tsx rename to packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.test.tsx diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.tsx b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.tsx similarity index 84% rename from packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.tsx rename to packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.tsx index fad69dc4..d39bea16 100644 --- a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.tsx +++ b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/SidebarFilterMenu.tsx @@ -55,6 +55,7 @@ export function getRecursiveMenu< } return menu.map((item) => { const { content, children, id, label, leftIcon } = item; + const theme = useMantineTheme(); const collapseStyle = openedMenuIds.includes(id) && selectedId === id @@ -76,6 +77,7 @@ export function getRecursiveMenu< root: classes.buttonRoot, }} id={id} + indentation="simple" isOpenOnSelect label={label} leftIcon={leftIcon} @@ -114,12 +116,10 @@ export function SidebarFilterMenu< const { collapseButtonProps, defaultSelectedId, - hasOnlyOneOpenMenu = false, menu, onMenuOpen, - openedMenuIds, + openedMenuIds = [], } = props; - const { classes } = useStyles(); const flatMenu = useMemo( () => flattenNestedObjects(addPathAndDepth(menu)), @@ -130,43 +130,18 @@ export function SidebarFilterMenu< defaultSelectedId, ); - const [openedIds, setOpenedIds] = useState(() => { - if (defaultSelectedId && !openedMenuIds) { - const path = flatMenu.find((menu) => menu.id === defaultSelectedId) - ?.path as T[] | undefined; - if (path) { - return path; - } - } - return openedMenuIds ?? []; - }); - function handleOpenChange(menuId: T, isOpened: boolean): void { const openedMenuPath = (flatMenu.find((menu) => menu.id === menuId)?.path ?? []) as T[]; onMenuOpen?.(menuId, isOpened, openedMenuPath); - if (hasOnlyOneOpenMenu && isOpened) { - setOpenedIds(openedMenuPath); - } else { - /** Add or remove id being clicked **/ - const exists = openedIds.includes(menuId); - let newOpenedIds; - if (exists) { - newOpenedIds = openedIds.filter((id) => id !== menuId); - } else { - newOpenedIds = openedIds.concat(menuId); - } - setOpenedIds(newOpenedIds); - } } - return (
{getRecursiveMenu( classes, setSelectedId, handleOpenChange, - openedIds, + openedMenuIds, selectedId, menu, collapseButtonProps, diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap b/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap similarity index 100% rename from packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap rename to packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap diff --git a/packages/react-front-kit/src/Components/FiltersBar/__snapshots__/FiltersBar.test.tsx.snap b/packages/react-front-kit/src/Components/FiltersBar/__snapshots__/FiltersBar.test.tsx.snap new file mode 100644 index 00000000..691b8363 --- /dev/null +++ b/packages/react-front-kit/src/Components/FiltersBar/__snapshots__/FiltersBar.test.tsx.snap @@ -0,0 +1,587 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FiltersBar matches snapshot 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + Dupont + + + + + + +
+
+ + Martin + + + + + + +
+
+ + Freelance + + + + + + +
+
+ + CDI + + + + + + +
+
+
+
+
+
+
+ + + +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+ + +
+ + +
+
+
+`; diff --git a/packages/react-front-kit/src/Components/SidebarMenu/SidebarMenu.tsx b/packages/react-front-kit/src/Components/SidebarMenu/SidebarMenu.tsx index 33373c67..6ecf6a3e 100644 --- a/packages/react-front-kit/src/Components/SidebarMenu/SidebarMenu.tsx +++ b/packages/react-front-kit/src/Components/SidebarMenu/SidebarMenu.tsx @@ -62,11 +62,11 @@ export function getRecursiveMenu< onMenuOpen(id, isOpened)} onSelect={setSelectedId} opened={openedMenuIds.includes(id)} diff --git a/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap b/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap index 6f73453b..4ca97a38 100644 --- a/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap +++ b/packages/react-front-kit/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap @@ -347,7 +347,7 @@ exports[`Header matches snapshot 1`] = `