diff --git a/.changeset/new-birds-enjoy.md b/.changeset/new-birds-enjoy.md new file mode 100644 index 00000000..756c6798 --- /dev/null +++ b/.changeset/new-birds-enjoy.md @@ -0,0 +1,11 @@ +--- +'@smile/react-front-kit-shared': minor +'@smile/react-front-kit': minor +'storybook-pages': minor +--- + +Added `FilterList` component, renamed `FiltersBar` in `SidebarFilters` +and `FiltersCheckboxList` in `SearchableCheckboxList`, +refactored `SearchableCheckboxList`, added common `IFilter` type in shared +package, added topContent prop to `SwitchableView`, fixed `BrowsingPage` with +name changes. diff --git a/packages/react-front-kit-shared/src/index.tsx b/packages/react-front-kit-shared/src/index.tsx index 0ce256b0..f51df466 100644 --- a/packages/react-front-kit-shared/src/index.tsx +++ b/packages/react-front-kit-shared/src/index.tsx @@ -39,6 +39,7 @@ export type { IOptions, IThemeOverride, IThemes, + IFilter, } from './types'; // type exports export { mainTheme, primaryTheme, secondaryTheme, themes } from './theme'; diff --git a/packages/react-front-kit-shared/src/types/filters.ts b/packages/react-front-kit-shared/src/types/filters.ts new file mode 100644 index 00000000..31493a74 --- /dev/null +++ b/packages/react-front-kit-shared/src/types/filters.ts @@ -0,0 +1,8 @@ +import type { ReactElement } from 'react'; + +export interface IFilter { + active?: boolean; + component?: ReactElement; + id: number | string; + label: string; +} diff --git a/packages/react-front-kit-shared/src/types/index.ts b/packages/react-front-kit-shared/src/types/index.ts index 23b09be5..79483127 100644 --- a/packages/react-front-kit-shared/src/types/index.ts +++ b/packages/react-front-kit-shared/src/types/index.ts @@ -1,3 +1,4 @@ export * from './actions'; export * from './options'; export * from './theme'; +export * from './filters'; diff --git a/packages/react-front-kit/src/Components/FilterList/FilterList.mock.tsx b/packages/react-front-kit/src/Components/FilterList/FilterList.mock.tsx new file mode 100644 index 00000000..79f83cbc --- /dev/null +++ b/packages/react-front-kit/src/Components/FilterList/FilterList.mock.tsx @@ -0,0 +1,49 @@ +import type { IFilter } from '@smile/react-front-kit-shared'; + +import { Select, TextInput } from '@mantine/core'; + +export const filtersMock: IFilter[] = [ + { + active: false, + component: , + id: 1, + label: 'Filter A', + }, + { + active: false, + component: ( + + ), + id: 4, + label: 'Filter D', + }, +]; diff --git a/packages/react-front-kit/src/Components/FilterList/FilterList.stories.tsx b/packages/react-front-kit/src/Components/FilterList/FilterList.stories.tsx new file mode 100644 index 00000000..af920e98 --- /dev/null +++ b/packages/react-front-kit/src/Components/FilterList/FilterList.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { action } from '@storybook/addon-actions'; + +import { FilterList as Cmp } from './FilterList'; +import { filtersMock } from './FilterList.mock'; + +const meta = { + component: Cmp, + tags: ['autodocs'], + title: '3-custom/Components/FilterList', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const FilterList: IStory = { + args: { + filters: filtersMock, + onActiveFiltersChange: action('Active filters changed'), + onSubmit: action('Filters submitted'), + }, +}; + +export const ColumnDirection: IStory = { + args: { + direction: 'column', + filters: filtersMock, + onActiveFiltersChange: action('Active filters changed'), + onSubmit: action('Filters submitted'), + spacing: 12, + }, +}; diff --git a/packages/react-front-kit/src/Components/FilterList/FilterList.style.ts b/packages/react-front-kit/src/Components/FilterList/FilterList.style.ts new file mode 100644 index 00000000..4356650f --- /dev/null +++ b/packages/react-front-kit/src/Components/FilterList/FilterList.style.ts @@ -0,0 +1,29 @@ +import { createStyles } from '@mantine/core'; + +export const useStyles = createStyles(() => ({ + filterComponent: { + minWidth: 184, + }, + manageFilterModalBody: { + padding: '24px', + }, + manageFilterModalHeader: { + marginBottom: '16px', + padding: '24px 24px 0 24px', + }, + manageFilterModalTitle: { + fontSize: '18px', + fontWeight: 700, + }, + manageFiltersButton: { + alignItems: 'start', + backgroundColor: 'transparent', + border: 'none', + }, + manageFiltersLabel: { + gap: 4, + }, + submitButton: { + minWidth: 184, + }, +})); diff --git a/packages/react-front-kit/src/Components/FilterList/FilterList.tsx b/packages/react-front-kit/src/Components/FilterList/FilterList.tsx new file mode 100644 index 00000000..e3f13250 --- /dev/null +++ b/packages/react-front-kit/src/Components/FilterList/FilterList.tsx @@ -0,0 +1,110 @@ +'use client'; + +import type { ModalProps, StackProps } from '@mantine/core'; +import type { IFilter } from '@smile/react-front-kit-shared'; +import type { ElementType, ReactElement } from 'react'; + +import { Button, Group, Modal, Stack, useMantineTheme } from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { Plus } from '@phosphor-icons/react'; +import { useState } from 'react'; + +import { SearchableCheckboxList } from '../SearchableCheckboxList/SearchableCheckboxList'; + +import { useStyles } from './FilterList.style'; + +export interface IFilterListProps + extends Omit { + direction?: 'column' | 'row'; + filters: IFilter[]; + filtersManageLabel?: string; + manageFilterModalSearchPlaceholder?: string; + manageFilterModalSearchSubmit?: string; + manageFilterModalTitle?: string; + modalProps?: ModalProps; + onActiveFiltersChange?: (filters: IFilter[]) => void; + onSubmit?: (activeFilters: IFilter[]) => void; + submitLabel?: string; +} + +export function FilterList(props: IFilterListProps): ReactElement { + const { + direction = 'row', + filters, + filtersManageLabel = 'Manage filters', + manageFilterModalSearchPlaceholder = 'Search in filters', + manageFilterModalSearchSubmit = 'Confirm changes', + manageFilterModalTitle = 'Manage filters', + modalProps, + onActiveFiltersChange, + onSubmit, + submitLabel = 'Filter', + ...containerProps + } = props; + const [localFilters, setLocalFilters] = useState(filters); + const [manageFiltersModal, handleManageFiltersModal] = useDisclosure(false); + const Container: ElementType = direction === 'row' ? Group : Stack; + + const theme = useMantineTheme(); + const { classes } = useStyles(); + + function handleSubmit(): void { + onSubmit?.(localFilters.filter((filter) => filter.active)); + } + + function handleManageFiltersSubmit(activeFilters: IFilter[]): void { + handleManageFiltersModal.close(); + + const newFilters = localFilters.map((filter, i) => + activeFilters[i].id === filter.id ? activeFilters[i] : filter, + ); + onActiveFiltersChange?.(activeFilters); + setLocalFilters(newFilters); + } + + return ( + + {localFilters + .filter((filter) => filter.active) + .map((filter) => ( + + {filter.component} + + ))} + {onSubmit ? ( + + ) : null} + + + + buttonLabel={manageFilterModalSearchSubmit} + checkboxes={filters} + onClickButton={handleManageFiltersSubmit} + placeholder={manageFilterModalSearchPlaceholder} + /> + + + ); +} diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.stories.tsx b/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.stories.tsx deleted file mode 100644 index 14946c97..00000000 --- a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { FiltersCheckboxList as Cmp } from './FiltersCheckboxList'; -import { filters } from './FiltersCheckboxList.mock'; - -const meta = { - component: Cmp, - tags: ['autodocs'], - title: '3-custom/Components/FiltersCheckboxList', -} satisfies Meta; - -export default meta; -type IStory = StoryObj; - -export const FiltersCheckboxList: IStory = { - args: { - filters, - }, -}; diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.mock.tsx b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.mock.tsx similarity index 88% rename from packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.mock.tsx rename to packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.mock.tsx index 512c26cc..73a1cefa 100644 --- a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.mock.tsx +++ b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.mock.tsx @@ -1,4 +1,4 @@ -export const filters = [ +export const checkboxesMock = [ { active: false, id: 1, label: 'Tomato', value: 'tomato' }, { active: false, id: 2, label: 'Banana', value: 'banana' }, { active: true, id: 3, label: 'apple', value: 'apple' }, diff --git a/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.stories.tsx b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.stories.tsx new file mode 100644 index 00000000..9eeceef3 --- /dev/null +++ b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SearchableCheckboxList as Cmp } from './SearchableCheckboxList'; +import { checkboxesMock } from './SearchableCheckboxList.mock'; + +const meta = { + component: Cmp, + tags: ['autodocs'], + title: '3-custom/Components/SearchableCheckboxList', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const SearchableCheckboxList: IStory = { + args: { + checkboxes: checkboxesMock, + }, +}; diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.style.tsx b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.style.tsx similarity index 100% rename from packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.style.tsx rename to packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.style.tsx diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.test.tsx b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.test.tsx similarity index 60% rename from packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.test.tsx rename to packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.test.tsx index f7a31e87..879d0308 100644 --- a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.test.tsx +++ b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.test.tsx @@ -1,18 +1,18 @@ import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils'; -import { FiltersCheckboxList } from './FiltersCheckboxList'; -import { filters } from './FiltersCheckboxList.mock'; +import { SearchableCheckboxList } from './SearchableCheckboxList'; +import { checkboxesMock } from './SearchableCheckboxList.mock'; -describe('FiltersCheckboxList', () => { +describe('SearchableCheckboxList', () => { beforeEach(() => { // Prevent mantine random ID Math.random = () => 0.42; }); it('matches snapshot', () => { const { container } = renderWithProviders( - , ); diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.tsx b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.tsx similarity index 64% rename from packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.tsx rename to packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.tsx index a68b3081..74a2d47d 100644 --- a/packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.tsx +++ b/packages/react-front-kit/src/Components/SearchableCheckboxList/SearchableCheckboxList.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ReactElement } from 'react'; +import type { ChangeEvent, ReactElement } from 'react'; import { Button, @@ -12,44 +12,43 @@ import { import { MagnifyingGlass } from '@phosphor-icons/react'; import { useState } from 'react'; -import { useStyles } from './FiltersCheckboxList.style'; +import { useStyles } from './SearchableCheckboxList.style'; -export interface IFilter { - active: boolean; +export interface ICheckbox { + active?: boolean; id: number | string; label: string; - value: string; } -export interface IFiltersCheckboxListProps { +export interface ISearchableCheckboxListProps { buttonLabel?: string; - filters?: IFilter[]; - onClickButton?: (newFilters: IFilter[]) => void; + checkboxes?: T[]; + onClickButton?: (checkboxes: T[]) => void; placeholder?: string; } -export function FiltersCheckboxList( - props: IFiltersCheckboxListProps, +export function SearchableCheckboxList( + props: ISearchableCheckboxListProps, ): ReactElement { const { buttonLabel = 'Validate changes', - placeholder = 'Search in filters', - filters = [], + placeholder = 'Search in options', + checkboxes = [], onClickButton, } = props; const [searchInput, setSearchInput] = useState(''); - const [newFilters, setNewFilters] = useState(filters); + const [newCheckboxes, setNewCheckboxes] = useState(checkboxes); const theme = useMantineTheme(); const { classes } = useStyles(); - function handleInputChange(event: React.ChangeEvent): void { + function handleInputChange(event: ChangeEvent): void { setSearchInput(event.target.value); } - function handleCheckboxChange(item: IFilter): void { - setNewFilters( - newFilters.map((element) => { + function handleCheckboxChange(item: ICheckbox): void { + setNewCheckboxes( + newCheckboxes.map((element) => { if (element.id !== item.id) { return element; } @@ -59,7 +58,7 @@ export function FiltersCheckboxList( ); } - function filterIncludeSearchInput(label: string): boolean { + function checkboxIncludesSearchInput(label: string): boolean { return label.toLocaleLowerCase().includes(searchInput.toLocaleLowerCase()); } @@ -78,8 +77,8 @@ export function FiltersCheckboxList( } />
- {filters.map((item) => { - if (!item.active && filterIncludeSearchInput(item.label)) { + {checkboxes.map((item) => { + if (!item.active && checkboxIncludesSearchInput(item.label)) { return (
- {filters.map((item) => { - if (item.active && filterIncludeSearchInput(item.label)) { + {checkboxes.map((item) => { + if (item.active && checkboxIncludesSearchInput(item.label)) { return ( - diff --git a/packages/react-front-kit/src/Components/FiltersCheckboxList/__snapshots__/FiltersCheckboxList.test.tsx.snap b/packages/react-front-kit/src/Components/SearchableCheckboxList/__snapshots__/SearchableCheckboxList.test.tsx.snap similarity index 99% rename from packages/react-front-kit/src/Components/FiltersCheckboxList/__snapshots__/FiltersCheckboxList.test.tsx.snap rename to packages/react-front-kit/src/Components/SearchableCheckboxList/__snapshots__/SearchableCheckboxList.test.tsx.snap index 0670ab0c..17030f7c 100644 --- a/packages/react-front-kit/src/Components/FiltersCheckboxList/__snapshots__/FiltersCheckboxList.test.tsx.snap +++ b/packages/react-front-kit/src/Components/SearchableCheckboxList/__snapshots__/SearchableCheckboxList.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FiltersCheckboxList matches snapshot 1`] = ` +exports[`SearchableCheckboxList matches snapshot 1`] = `
children?: IFiltersItem[]; content?: ReactNode; } + export interface ISidebarFilterMenuProps< T extends number | string, C extends ElementType, @@ -109,6 +110,8 @@ export function getRecursiveMenu< }); } +// eslint-disable-next-line no-warning-comments +// TODO: use (and modify) SidebarMenu instead of a copy export function SidebarFilterMenu< T extends number | string, C extends ElementType = 'button', @@ -135,6 +138,7 @@ export function SidebarFilterMenu< []) as T[]; onMenuOpen?.(menuId, isOpened, openedMenuPath); } + return (
{getRecursiveMenu( diff --git a/packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap similarity index 100% rename from packages/react-front-kit/src/Components/FiltersBar/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap rename to packages/react-front-kit/src/Components/SidebarFilters/SidebarFilterMenu/__snapshots__/SidebarFilterMenu.test.tsx.snap diff --git a/packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.mock.tsx similarity index 100% rename from packages/react-front-kit/src/Components/FiltersBar/FitlersBar.mock.tsx rename to packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.mock.tsx diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.stories.tsx similarity index 84% rename from packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx rename to packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.stories.tsx index 2680699f..924a1b0f 100644 --- a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.stories.tsx +++ b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { FiltersBar as Cmp } from './FiltersBar'; -import { activeFilters } from './FitlersBar.mock'; import { getMenu } from './SidebarFilterMenu/SidebarFilterMenu.mock'; +import { SidebarFilters as Cmp } from './SidebarFilters'; +import { activeFilters } from './SidebarFilters.mock'; const meta = { component: Cmp, tags: ['autodocs'], - title: '3-custom/Components/FiltersBar', + title: '3-custom/Components/SidebarFilters', } satisfies Meta; export default meta; diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.style.tsx b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.style.tsx similarity index 100% rename from packages/react-front-kit/src/Components/FiltersBar/FiltersBar.style.tsx rename to packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.style.tsx diff --git a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.test.tsx similarity index 81% rename from packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx rename to packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.test.tsx index d1ba10b2..8065c4fa 100644 --- a/packages/react-front-kit/src/Components/FiltersBar/FiltersBar.test.tsx +++ b/packages/react-front-kit/src/Components/SidebarFilters/SidebarFilters.test.tsx @@ -1,13 +1,13 @@ 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'; +import { SidebarFilters } from './SidebarFilters'; +import { activeFilters } from './SidebarFilters.mock'; describe('FiltersBar', () => { it('matches snapshot', () => { const { container } = renderWithProviders( -
+ {topContent ?
topContent
: null}
{activeView.dataView ?? ''}
); diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx index 023245f4..eb2ad436 100644 --- a/packages/react-front-kit/src/index.tsx +++ b/packages/react-front-kit/src/index.tsx @@ -4,16 +4,16 @@ // component exports export type { IPreviewProps } from './Components/Preview/Preview'; export { Preview } from './Components/Preview/Preview'; -export { FiltersCheckboxList } from './Components/FiltersCheckboxList/FiltersCheckboxList'; +export { SearchableCheckboxList } from './Components/SearchableCheckboxList/SearchableCheckboxList'; export type { - IFilter, - IFiltersCheckboxListProps, -} from './Components/FiltersCheckboxList/FiltersCheckboxList'; -export { FiltersBar } from './Components/FiltersBar/FiltersBar'; + ICheckbox, + ISearchableCheckboxListProps, +} from './Components/SearchableCheckboxList/SearchableCheckboxList'; +export { SidebarFilters } from './Components/SidebarFilters/SidebarFilters'; export type { - IFiltersProps, + ISidebarFiltersProps, ISidebarFilter, -} from './Components/FiltersBar/FiltersBar'; +} from './Components/SidebarFilters/SidebarFilters'; export { ActionBar } from './Components/ActionBar/ActionBar'; export type { IActionBarAction, diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.mock.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.mock.tsx index 509f829d..0a004756 100644 --- a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.mock.tsx +++ b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.mock.tsx @@ -1,3 +1,4 @@ +import type { IFilter } from '@smile/react-front-kit-shared'; import type { ITableGridViewGridProps, ITableGridViewTableProps, @@ -163,57 +164,49 @@ export const gridProps: ITableGridViewGridProps = { verticalSpacing: 25, }; -export const filtersCheckboxListProps = [ - { active: false, id: 1, label: 'Nom du filtre', value: 'FILTER_NAME' }, +export const SearchableCheckboxListProps: IFilter[] = [ + { active: false, id: 1, label: 'Nom du filtre' }, { active: false, id: 2, label: 'Blandit mollis nisi curabitur', - value: 'BLANDI', }, { active: false, id: 3, label: 'Ultricies dui ut non massa eget', - value: 'ULTRICIES', }, { active: false, id: 4, label: 'Lorem ipsum dolor ', - value: 'LOREM', }, - { active: true, id: 5, label: 'Dernière modification', value: 'LAST_UPDATE' }, - { active: true, id: 6, label: 'Type de document', value: 'DOCUMENT_TYPE' }, - { active: true, id: 7, label: 'Période', value: 'PERIOD' }, + { active: true, id: 5, label: 'Dernière modification' }, + { active: true, id: 6, label: 'Type de document' }, + { active: true, id: 7, label: 'Période' }, { active: false, id: 8, label: 'Lorem ipsum dolor ', - value: 'LOREM2', }, { active: false, id: 9, label: 'Blandit mollis nisi curabitur', - value: 'BLANDI2', }, { active: false, id: 10, label: 'Lorem ipsum dolor ', - value: 'LOREM3', }, { active: false, id: 11, label: 'Ultricies dui ut non massa eget', - value: 'ULTRICIES2', }, { active: false, id: 12, label: 'Blandit mollis nisi curabitur', - value: 'BLANDI3', }, ]; diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx index 6f2de331..27d159ff 100644 --- a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx +++ b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx @@ -1,7 +1,7 @@ 'use client'; -import type { IFilter } from '@smile/react-front-kit'; import type { IFile } from '@smile/react-front-kit-dropzone'; +import type { IFilter } from '@smile/react-front-kit-shared'; import type { FormEvent, ReactElement } from 'react'; import { @@ -23,10 +23,10 @@ import { } from '@phosphor-icons/react'; import { Breadcrumbs, - FiltersCheckboxList, FoldableColumnLayout, Header, InfoCard, + SearchableCheckboxList, SidebarMenu, flattenNestedObjects, } from '@smile/react-front-kit'; @@ -48,9 +48,9 @@ import { } from '../pages.mock'; import { + SearchableCheckboxListProps, actions, data, - filtersCheckboxListProps, gridProps, tableProps, } from './BrowsingPage.mock'; @@ -68,7 +68,7 @@ export function BrowsingPage(): ReactElement { const { primary, secondary } = useThemes(); const [filtersManagerModal, handleFiltersManagerModal] = useDisclosure(false); const [globalFilters, setGlobalFilters] = useState( - filtersCheckboxListProps, + SearchableCheckboxListProps, ); const { classes } = useStyles(); const theme = useMantineTheme(); @@ -226,7 +226,7 @@ export function BrowsingPage(): ReactElement {
[ {globalFilters.map( - (element) => element.active && `${element.label}, `, + (filter) => filter.active && `${filter.label}, `, )} ]
@@ -256,9 +256,9 @@ export function BrowsingPage(): ReactElement { size="md" title="Gérer les filtres" > - buttonLabel="Valider les modifications" - filters={globalFilters} + checkboxes={globalFilters} onClickButton={handleFiltersManagerSubmit} placeholder="Chercher dans les filtres" /> diff --git a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx index 7ee2ac55..b8e514a1 100644 --- a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx +++ b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx @@ -19,12 +19,12 @@ import { DateInput } from '@mantine/dates'; import { CalendarBlank, CaretDown } from '@phosphor-icons/react'; import { DocumentList, - FiltersBar, FoldableColumnLayout, Header, Motif, Pagination, SearchBar, + SidebarFilters, } from '@smile/react-front-kit'; import { isNotNullNorEmpty, @@ -285,7 +285,7 @@ export function SearchResults(): ReactElement { ); const totalPages = Math.ceil(typeFilteredResults / rowsPerPage); - // Remove All filters on FiltersBar + // Remove All filters on SidebarFilters const removeAllFilters = (): void => { setActiveFilters([]); setDupontFilter(false); @@ -403,7 +403,7 @@ export function SearchResults(): ReactElement { isColumnVisible={isColumnVisible} onChangeIsColumnVisible={setIsColumnVisible} sidebarContent={ -