Feat/filters menu (#95)

* feat(redmine #1246940): added FilterList

refactored SidebarFilters, SearchableCheckboxList, SwitchableView, added shared IFilter type

.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.

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';

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;
+}

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';

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: <TextInput placeholder="some value" />,
+    id: 1,
+    label: 'Filter A',
+  },
+  {
+    active: false,
+    component: (
+      <Select
+        data={[
+          { label: 'Some value', value: 'some value' },
+          {
+            label: 'Another value',
+            value: 'another value',
+          },
+        ]}
+        value="some value"
+      />
+    ),
+    id: 2,
+    label: 'Filter B',
+  },
+  {
+    active: true,
+    component: <TextInput placeholder="some value" />,
+    id: 3,
+    label: 'Filter C',
+  },
+  {
+    active: true,
+    component: (
+      <Select
+        data={[
+          { label: 'Another value', value: 'another value' },
+          { label: 'Some value', value: 'some value' },
+        ]}
+        value="another value"
+      />
+    ),
+    id: 4,
+    label: 'Filter D',
+  },
+];

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<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+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,
+  },
+};

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,
+  },
+}));

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<StackProps, 'justify' | 'onSubmit'> {
+  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<IFilter[]>(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 (
+    <Container spacing={10} {...containerProps}>
+      {localFilters
+        .filter((filter) => filter.active)
+        .map((filter) => (
+          <span key={filter.id} className={classes.filterComponent}>
+            {filter.component}
+          </span>
+        ))}
+      {onSubmit ? (
+        <Button className={classes.submitButton} onClick={handleSubmit}>
+          {submitLabel}
+        </Button>
+      ) : null}
+      <Button
+        className={classes.manageFiltersButton}
+        classNames={{ label: classes.manageFiltersLabel }}
+        onClick={handleManageFiltersModal.open}
+        variant="default"
+      >
+        <Plus color={theme.colors.dark[6]} size={12} />
+        {filtersManageLabel}
+      </Button>
+      <Modal
+        centered
+        classNames={{
+          body: classes.manageFilterModalBody,
+          header: classes.manageFilterModalHeader,
+          title: classes.manageFilterModalTitle,
+        }}
+        onClose={handleManageFiltersModal.close}
+        opened={manageFiltersModal}
+        size="md"
+        title={manageFilterModalTitle}
+        {...modalProps}
+      >
+        <SearchableCheckboxList<IFilter>
+          buttonLabel={manageFilterModalSearchSubmit}
+          checkboxes={filters}
+          onClickButton={handleManageFiltersSubmit}
+          placeholder={manageFilterModalSearchPlaceholder}
+        />
+      </Modal>
+    </Container>
+  );
+}

packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.mock.tsx → 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' },

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<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const SearchableCheckboxList: IStory = {
+  args: {
+    checkboxes: checkboxesMock,
+  },
+};

packages/react-front-kit/src/Components/FiltersCheckboxList/FiltersCheckboxList.test.tsx → 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(
-      <FiltersCheckboxList
+      <SearchableCheckboxList
         buttonLabel="Test"
-        filters={filters}
+        checkboxes={checkboxesMock}
         placeholder="Test"
       />,
     );