feat(redmine 1246959): integration of active fiters zone

packages/react-front-kit/src/Components/Filters/Filters.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Filters as Cmp } from './Filters';
+
+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: {},
+};

packages/react-front-kit/src/Components/Filters/Filters.style.tsx

@@ -0,0 +1,44 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles((theme) => ({
+  activeFilters: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    marginTop: '16px',
+  },
+  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',
+  },
+  buttonRemoveRoot: { color: 'white', fontSize: '14px', padding: '0' },
+  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',
+    padding: '24px',
+  },
+}));

packages/react-front-kit/src/Components/Filters/Filters.test.tsx

@@ -0,0 +1,10 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/src/test-utils';
+
+import { Filters } from './Filters';
+
+describe('Filters', () => {
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(<Filters />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/react-front-kit/src/Components/Filters/Filters.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+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';
+
+export interface ISidebarFilter {
+  id: number | string;
+  label: string;
+  onRemove: (filter: ISidebarFilter) => void;
+  value: unknown;
+}
+
+export interface IFiltersProps {
+  activeFilters?: ISidebarFilter[] | [];
+  deleteButtonLabel?: string;
+  title?: ReactNode;
+}
+
+export function Filters(props: IFiltersProps): ReactElement {
+  const {
+    activeFilters = [
+      {
+        id: 1,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+      {
+        id: 2,
+        label: 'truck',
+        onRemove: (filter: ISidebarFilter) => {
+          console.log(filter);
+        },
+        value: 'truck',
+      },
+    ],
+    title = 'Active filters',
+    deleteButtonLabel = 'Remove all',
+  } = 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} />}
+            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>
+    </Box>
+  );
+}

packages/react-front-kit/src/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-refresh/only-export-components */
 export * from '@smile/react-front-kit-shared';
 // component exports
+export * from './Components/Filters/Filters';
 export * from './Components/DocumentCard/DocumentCard';
 export * from './Components/BitConverter/BitConverter';
 export * from './Components/Breadcrumbs/Breadcrumbs';