Feat/filters (#69)

* refactor(redmine 1246965): added SearchBar as sub-component of HeaderSearch (#50) * feat(redmine 1246965): added SearchBar sub-component of HeaderSearch, added leftSection to SearchBar * feat: update Sidebar and CollapseButton to be compatible with routing (#51) * feat: use paper for infoCard, update test page and refactor Pagination itemsPerPage (#53) * feat(redmine 1245005): added `SearchResults` example page (#54) * feat(redmine 1245005): added `SearchResults` example page refactor: modified `Pagination`, `SearchBar`, `Header` and `FoldableColumnLayout` * fix: remove Appshell from FoldableColumnLayout (#55) * feat(redmine 1246946): added `SwitchableDataView` component with SegmentedControl (#56) * feat(redmine 1246946): added `SwitchableDataView` component with SegmentedControl * fix: pr * fix: pr * fix: pr * fix: pr * feat(redmine 1246945): add Thumbnail component and fileIcon component * feat(redmine 1246945): add Thumbnail component * feat(redmine 1246945): fix pr review * feat(redmine 1246945): remove fileExtendtType file and Add FileExtendType component * feat(redmine 1246945): fix pr review * feat(redmine 1246945): fix pr review * feat(redmine 1246945): add confirm modal feature * feat(redmine 1246945): fix pr review * feat(redmine 1246945): fix pr review * feat(redmine 1246945): fix pr review * feat(redmine 1246945): fix import error --------- Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com> * Feat/document_card (#60) * feat(redmine 1246977): add listViewItem component and add strucutre * feat(redmine 1246977): add style for listViewItem * feat(redmine 1246977): change name of listViewItem to DocumentCard * feat(redmine 1246977): change name of listViewItem to DocumentCard * feat(redmine 1246977): remove not used style * feat(redmine 1246977): fix review pr * feat: include Pagination component inside Table component (#59) * Feat/page search result document card integration (#61) * feat(redmine 1245005): add DocumentCard component * feat(redmine 1245005): fix display 12 col if filters is desable * ci: version packages * feat(redmine 1246959): integration of active fiters zone * feat(redmine 1246959): integration of active fiters zone * feat(redmine 1246959): Add bottom of component filter * feat(redmine 1246959): Add functions * feat(redmine 1246959): Add component SidebarFilterMenu * feat(redmine 1246959): change location of SidebarFilterMenu and desable vertical ligne for the collapse * feat(redmine 1246959): fix type errors * feat(redmine 1246959): change style of collapseButtonControlled for filters * feat(redmine 1246959): fix lint error * feat(redmine 1246959): add changeset * feat(redmine 1246959): fix eslint error * feat(redmine 1246959): fix change from pr review by Quentin * feat(redmine 1246959): fix pr review by Tony * feat(redmine 1246959): fix typo error * feat(redmine 1246959): fix pr return from Tony for eslint error and collapseProps * feat(redmine 1246959): fix pr review type of collapseProps --------- Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com> Co-authored-by: Tony Cabaye <tony.cabaye@smile.fr> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Smile-SA · Nov 23, 2023 · 5578d5d · 5578d5d
1 parent 51b1d80
commit 5578d5d
Show file tree

Hide file tree

Showing 15 changed files with 563 additions and 3 deletions.
diff --git a/.changeset/spicy-moose-juggle.md b/.changeset/spicy-moose-juggle.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': minor
+---
+
+Add filters component
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx b/packages/react-front-kit/src/Components/CollapseButton/CollapseButtonControlled.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import type { ICollapseButtonProps } from './CollapseButton';
+import type { CollapseProps } from '@mantine/core';
 import type { ElementType, MouseEvent, ReactElement } from 'react';
 
 import { ActionIcon, Button, Collapse, createStyles } from '@mantine/core';
+import { _BackgroundImage } from '@mantine/core/lib/BackgroundImage/BackgroundImage';
 import { CaretDown, CaretRight } from '@phosphor-icons/react';
 
 const useStyles = createStyles((theme) => ({
@@ -68,6 +70,7 @@ export interface ICollapseButtonControlledProps<
   T extends number | string,
   C extends ElementType,
 > extends ICollapseButtonProps<T, C> {
+  collapseProps?: Partial<CollapseProps>;
   /** Only in the Controlled version, use this prop to provide the setter function for the opened/collapsed state */
   onCollapseChange?: (isOpened: boolean) => void;
   /** Only in the Controlled version, use this prop to provide the opened/collapsed state */
@@ -80,6 +83,7 @@ export function CollapseButtonControlled<
 >(props: ICollapseButtonControlledProps<T, C>): ReactElement {
   const {
     children,
+    collapseProps,
     component: Component = 'button',
     componentProps,
     fullWidth = true,
@@ -125,7 +129,6 @@ export function CollapseButtonControlled<
     rootClasses.push(classes.rootDeepLevel);
     labelClasses.push(classes.labelDeepLevel);
   }
-
   return (
     <>
       <Button
@@ -184,6 +187,7 @@ export function CollapseButtonControlled<
           className={line ? classes.line : ''}
           data-testid="content"
           in={opened}
+          {...collapseProps}
         >
           {children}
         </Collapse>

diff --git a/packages/react-front-kit/src/Components/Filters/Filters.stories.tsx b/packages/react-front-kit/src/Components/Filters/Filters.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { action } from '@storybook/addon-actions';
+
+import { Filters as Cmp } from './Filters';
+import { menu } from './SidebarFilterMenu/SidebarFilterMenu.mock';
+
+const meta = {
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/Filters',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const Filters: IStory = {
+  args: {
+    activeFilters: [
+      {
+        id: 1,
+        label: 'Dupont',
+        onRemove: action('remove'),
+        value: 'DUPONT',
+      },
+      {
+        id: 1,
+        label: 'Martin',
+        onRemove: action('remove'),
+        value: 'MARTIN',
+      },
+    ],
+    deleteButtonLabel: 'Remove all',
+    filterButtonLabel: 'Filtrer',
+    sideBarFiltersMenu: menu,
+    title: 'Active filters',
+  },
+};
diff --git a/packages/react-front-kit/src/Components/Filters/Filters.style.tsx b/packages/react-front-kit/src/Components/Filters/Filters.style.tsx
@@ -0,0 +1,54 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles((theme) => ({
+  activeFilters: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    marginTop: '16px',
+  },
+  activeFiltersButtonRoot: {
+    minWidth: '100%',
+  },
+  badgeInner: {
+    fontWeight: 600,
+    position: 'relative',
+    right: '4px',
+  },
+  badgeRight: {
+    position: 'relative',
+    right: '4px',
+    top: '1px',
+  },
+  badgeRoot: {
+    border: '2px solid white',
+    color: 'white',
+    cursor: 'pointer',
+    fontSize: '12px',
+    fontWeight: 'normal',
+    marginBottom: '8px',
+    marginRight: '8px',
+    textTransform: 'capitalize',
+  },
+  bottom: {
+    padding: '24px 24px 48px 24px',
+  },
+  buttonRemoveRoot: { color: 'white', fontSize: '14px', padding: '0' },
+  middle: {
+    margin: '0px 24px',
+  },
+  root: {
+    backgroundColor: 'white',
+    borderRadius: '16px',
+  },
+  title: {
+    fontWeight: 600,
+  },
+  top: {
+    background: theme.colors.cyan[9],
+    border: '8px solid white',
+    borderRadius: '16px 16px 0px 0px',
+    color: 'white',
+    marginBottom: '24px',
+    padding: '24px',
+  },
+}));
diff --git a/packages/react-front-kit/src/Components/Filters/Filters.test.tsx b/packages/react-front-kit/src/Components/Filters/Filters.test.tsx
@@ -0,0 +1,10 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils';
+
+import { Filters } from './Filters';
+
+describe('Filters', () => {
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(<Filters />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-front-kit/src/Components/Filters/Filters.tsx b/packages/react-front-kit/src/Components/Filters/Filters.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import type { IFiltersItem } from './SidebarFilterMenu/SidebarFilterMenu';
+import type { ReactElement, ReactNode } from 'react';
+
+import { Badge, Box, Button, Group } from '@mantine/core';
+import { TrashSimple, X } from '@phosphor-icons/react';
+
+import { useStyles } from './Filters.style';
+import { SidebarFilterMenu } from './SidebarFilterMenu/SidebarFilterMenu';
+
+export interface ISidebarFilter {
+  id: number | string;
+  label: string;
+  onRemove?: (filter: ISidebarFilter) => void;
+  value: unknown;
+}
+
+export interface IFiltersProps {
+  activeFilters?: ISidebarFilter[] | [];
+  deleteButtonLabel?: string;
+  filterButtonLabel?: string;
+  onDeleteButtonClick?: (filters: ISidebarFilter[]) => void;
+  onFilterButtonClick?: (filters: ISidebarFilter[]) => void;
+  sideBarFiltersMenu?: IFiltersItem<number | string>[] | undefined;
+  title?: ReactNode;
+}
+
+export function Filters(props: IFiltersProps): ReactElement {
+  const {
+    activeFilters = [],
+    title = 'Active filters',
+    sideBarFiltersMenu = [],
+    onDeleteButtonClick,
+    onFilterButtonClick,
+    deleteButtonLabel = 'Remove all',
+    filterButtonLabel = 'Filter',
+  } = props;
+  const { classes } = useStyles();
+  return (
+    <Box className={classes.root}>
+      <div className={classes.top}>
+        <Group position="apart">
+          <span className={classes.title}>{title}</span>
+          <Button
+            className={classes.buttonRemoveRoot}
+            leftIcon={<TrashSimple size={12} />}
+            onClick={() => onDeleteButtonClick?.(activeFilters)}
+            variant="transparent"
+          >
+            {deleteButtonLabel}
+          </Button>
+        </Group>
+        <div className={classes.activeFilters} />
+        {activeFilters.map((filter) => (
+          <Badge
+            key={filter.id}
+            classNames={{
+              inner: classes.badgeInner,
+              rightSection: classes.badgeRight,
+              root: classes.badgeRoot,
+            }}
+            onClick={() => filter.onRemove?.(filter)}
+            pr={3}
+            rightSection={<X size={10} />}
+            size="xl"
+            variant="outline"
+          >
+            {filter.label}
+          </Badge>
+        ))}
+      </div>
+      <div className={classes.middle}>
+        <SidebarFilterMenu menu={sideBarFiltersMenu} />
+      </div>
+      <div className={classes.bottom}>
+        <Button
+          classNames={{ root: classes.activeFiltersButtonRoot }}
+          color="cyan.9"
+          onClick={() => onFilterButtonClick?.(activeFilters)}
+          variant="filled"
+        >
+          {filterButtonLabel} ({activeFilters.length})
+        </Button>
+      </div>
+    </Box>
+  );
+}
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
@@ -0,0 +1,60 @@
+import type { IFiltersItem } from './SidebarFilterMenu';
+
+import { Checkbox, Group } from '@mantine/core';
+
+export const menu: IFiltersItem<number>[] = [
+  {
+    content: (
+      <>
+        <Group>
+          <Checkbox value="Dupont" /> Dupont
+        </Group>
+        <br />
+        <Group>
+          <Checkbox value="Martin" /> Martin
+        </Group>
+        <br />
+        <Group>
+          <Checkbox value="André" /> Andrée
+        </Group>
+      </>
+    ),
+    id: 1,
+    label: 'Nom du client',
+  },
+  {
+    children: [
+      {
+        content: (
+          <>
+            <Group>
+              <Checkbox value="CDI" /> CDI
+            </Group>
+            <br />
+            <Group>
+              <Checkbox value="CDD" /> CDD
+            </Group>
+          </>
+        ),
+        id: 10,
+        label: 'Contrat classique',
+      },
+      {
+        content: (
+          <Group style={{ padding: '10px 0 10px 10px' }}>
+            <Checkbox value="FREELANCE" /> Freelance
+          </Group>
+        ),
+        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/...ages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.style.tsx b/...ages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.style.tsx
@@ -0,0 +1,20 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles((theme) => ({
+  buttonInner: {
+    justifyContent: 'Left',
+  },
+  buttonLabel: {
+    color: theme.colors.dark,
+    textAlign: 'left',
+  },
+  buttonRoot: {
+    '&[data-selected="false"]': {
+      background: 'inherit',
+    },
+    background: theme.colors.cyan[0],
+  },
+  contentContainer: {
+    padding: '10px',
+  },
+}));
diff --git a/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.test.tsx b/packages/react-front-kit/src/Components/Filters/SidebarFilterMenu/SidebarFilterMenu.test.tsx
@@ -0,0 +1,10 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils';
+
+import { SidebarFilterMenu } from './SidebarFilterMenu';
+
+describe('SidebarFilterMenu', () => {
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(<SidebarFilterMenu />);
+    expect(container).toMatchSnapshot();
+  });
+});