Feature/dropdown multiselect (#164)

* feat: init and dev dropdown component

* feat: init and dev dropdown-muitiselect

---------

Co-authored-by: scotch <[email protected]>
Co-authored-by: Denis Shtefan <[email protected]>

Author: 3 people

src/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T>(value: T, delay?: number): T => {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+};

src/lib/dropdown-menu/dropdown-menu.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, DropdownMenu } from '@chirp/ui/lib';
+import { useState } from 'react';
+
+const meta: Meta<typeof DropdownMenu> = {
+    title: 'UI/DropdownMenu',
+    component: DropdownMenu,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+const MOCK_DATA = [
+    {
+        id: 1,
+        title: 'Send by Email',
+    },
+    {
+        id: 2,
+        title: 'Planned',
+    },
+    {
+        id: 3,
+        title: 'Export',
+    },
+];
+
+export const Default: Story = {
+    render: () => {
+        const [openState, setOpenState] = useState(false);
+        return (
+            <DropdownMenu<{ title: string; id: number }>
+                items={MOCK_DATA}
+                resolveTitle={(item) => item.title}
+                onClose={() => setOpenState(false)}
+                onOpen={() => setOpenState(true)}
+                isOpened={openState}
+            >
+                <Button variant="tertiary" onClick={() => setOpenState(!openState)}>
+                    Show
+                </Button>
+            </DropdownMenu>
+        );
+    },
+};

src/lib/dropdown-menu/index.tsx

@@ -0,0 +1,47 @@
+import { PropsWithChildren, useRef } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import { Menu } from '@mui/material';
+
+export interface IDropdownMenuProps<T> {
+    items: T[];
+    isOpened?: boolean;
+    gap?: string;
+
+    onOpen: () => void;
+    onClose: () => void;
+    onSelect?: (val: T) => void;
+    resolveTitle: (val: T) => string;
+}
+
+export const DropdownMenu = <T,>({
+    children,
+    isOpened = false,
+    onClose,
+    items,
+    resolveTitle,
+    gap = '5px',
+}: PropsWithChildren<IDropdownMenuProps<T>>) => {
+    const controlWrapperRef = useRef(null);
+    return (
+        <>
+            <div ref={controlWrapperRef}>{children}</div>
+            <Menu
+                sx={{
+                    mt: gap,
+                }}
+                open={isOpened}
+                onClose={onClose}
+                anchorEl={controlWrapperRef.current}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+                {items?.map((item, idx) => (
+                    <MenuItem key={idx} onClick={onClose}>
+                        {resolveTitle(item)}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    );
+};

src/lib/dropdown-multiselect/dropdown-button/dropdown-button.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import * as S from './style';
+import { Stack } from '@mui/system';
+import { Typography } from '../../typogrpahy';
+import { SelectIndicator } from '../../select-indicator';
+
+interface IMultiselectDropdownButtonProps {
+    title: string;
+
+    onClick: () => void;
+}
+
+export const MultiselectDropdownButton: FC<IMultiselectDropdownButtonProps> = ({ title, onClick }) => {
+    return (
+        <S.Wrapper onClick={onClick}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Typography variant="caption12" color="text.text4">
+                    {title}
+                </Typography>
+                <SelectIndicator />
+            </Stack>
+        </S.Wrapper>
+    );
+};

src/lib/dropdown-multiselect/dropdown-button/style.ts

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('div')(({ theme }) => ({
+    padding: '1px 16px',
+    borderRadius: '8px',
+    background: theme.palette.background.background1,
+}));

src/lib/dropdown-multiselect/dropdown-content/footer.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Stack } from '@mui/material';
+
+import { Button } from '../../button';
+import * as S from './style';
+
+interface IDropdownFooterProps {
+    selectedCount?: number;
+
+    onAccept: () => void;
+    onClear: () => void;
+}
+
+export const DropdownFooter: FC<IDropdownFooterProps> = ({ selectedCount, onAccept, onClear }) => {
+    const applyText = selectedCount ? `Apply (${selectedCount})` : 'Apply';
+    return (
+        <S.Wrapper p={4} pt={3}>
+            <Stack direction="row">
+                <Button fullWidth onClick={onClear}>
+                    Clear all
+                </Button>
+                <Button fullWidth variant="primary" onClick={onAccept}>
+                    {applyText}
+                </Button>
+            </Stack>
+        </S.Wrapper>
+    );
+};

src/lib/dropdown-multiselect/dropdown-content/style.ts

@@ -0,0 +1,6 @@
+import { Box, styled } from '@mui/material';
+
+export const Wrapper = styled(Box)(({ theme }) => ({
+    borderTop: '1px solid',
+    borderColor: theme.palette.border.input,
+}));

src/lib/dropdown-multiselect/dropdown-multiselect.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownMultiselect } from '@chirp/ui/lib';
+import { useState } from 'react';
+
+const meta: Meta<typeof DropdownMultiselect> = {
+    title: 'UI/DropdownMultiselect',
+    component: DropdownMultiselect,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMultiselect>;
+
+export const Default: Story = {
+    render: () => {
+        const [selectedOptions, setSelectedOptions] = useState<{ label: string; id: string }[]>([]);
+
+        return (
+            <DropdownMultiselect
+                title="Type"
+                options={[
+                    { label: 'Option 1', id: '1' },
+                    { label: 'Option 2', id: '2' },
+                    { label: 'Option 3', id: '3' },
+                    { label: 'Option 4', id: '4' },
+                    { label: 'Option 5', id: '5' },
+                ]}
+                idKey="id"
+                nameKey="label"
+                width="230px"
+                selectedOptions={selectedOptions}
+                onAccept={setSelectedOptions}
+                onClear={() => setSelectedOptions([])}
+            ></DropdownMultiselect>
+        );
+    },
+};

src/lib/dropdown-multiselect/index.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Paper, Stack } from '@mui/material';
+import { Dropdown } from '../dropdown';
+import { MultiselectDropdownButton } from './dropdown-button/dropdown-button';
+import { Checkbox } from '../checkbox';
+import { DropdownFooter } from './dropdown-content/footer';
+import { SearchInput } from '../search-input';
+import { useDebounce } from '@chirp/ui/hooks/use-debounce';
+
+type CheckedStateType<T> = {
+    array: T[];
+    map: { [key: number | string]: boolean };
+};
+
+interface IDropdownMultiselectProps<T> {
+    title: string;
+    width: string;
+
+    options: T[];
+    idKey: keyof T;
+    nameKey: keyof T;
+    selectedOptions: T[];
+
+    onAccept: (arr: T[]) => void;
+    onClear: () => void;
+}
+
+export const DropdownMultiselect = <T extends Record<keyof T, unknown>>({
+    title = '',
+    width = '230px',
+    selectedOptions = [],
+
+    options = [],
+    idKey,
+    nameKey,
+
+    onAccept,
+    onClear,
+}: IDropdownMultiselectProps<T>) => {
+    const [openState, setOpenState] = useState(false);
+    const [searchState, setSearchState] = useState('');
+    const [checkedItemsState, setCheckedItemsState] = useState<CheckedStateType<T>>({
+        array: [],
+        map: {},
+    });
+
+    const debouncedSearch = useDebounce(searchState);
+
+    useEffect(() => {
+        if (!selectedOptions) return;
+        const mappedSelectedItems = selectedOptions.reduce(
+            (acc, item) => ({ ...acc, [item[idKey] as PropertyKey]: true }),
+            {} as CheckedStateType<T>['map'],
+        );
+        setCheckedItemsState({ array: selectedOptions, map: mappedSelectedItems });
+    }, [selectedOptions]);
+
+    const handleChangeCheckedITem = (elem: T, checked: boolean) => {
+        console.log(checked);
+        if (checked) {
+            setCheckedItemsState((prev) => ({
+                array: [...prev.array, elem],
+                map: { ...prev.map, [elem[idKey] as PropertyKey]: true },
+            }));
+        } else {
+            setCheckedItemsState((prev) => ({
+                array: prev.array.filter((item) => item[idKey] !== elem[idKey]),
+                map: { ...prev.map, [elem[idKey] as PropertyKey]: false },
+            }));
+        }
+    };
+
+    const handleApplyClick = () => {
+        onAccept(checkedItemsState.array);
+        setOpenState(false);
+    };
+
+    const handleClearClick = () => {
+        onClear();
+        setOpenState(false);
+    };
+
+    const filteredOptions = useMemo(() => {
+        return options.filter((item) =>
+            String(item[nameKey]).toString().toLowerCase().includes(debouncedSearch.toLowerCase()),
+        );
+    }, [options, debouncedSearch]);
+
+    return (
+        <Box width={width}>
+            <Dropdown
+                isOpened={openState}
+                anchorEl={<MultiselectDropdownButton title={title} onClick={() => setOpenState(!openState)} />}
+            >
+                <Paper>
+                    <Stack width={width}>
+                        <Box p={4}>
+                            <Stack gap={4}>
+                                <SearchInput
+                                    value={searchState}
+                                    onChange={setSearchState}
+                                    placeholder="Search by name"
+                                />
+                                {filteredOptions.map((item, index) => (
+                                    <Checkbox
+                                        key={`${index}-${item[idKey]}`}
+                                        variant="check"
+                                        label={item[nameKey] as string}
+                                        checked={!!checkedItemsState.map[item[idKey] as number | string]}
+                                        onChange={(_, checked) => handleChangeCheckedITem(item, checked)}
+                                        labelTypographyVariant="body1"
+                                        formControlLabelProps={{
+                                            sx: {
+                                                color: 'text.text4',
+                                            },
+                                        }}
+                                        sx={{
+                                            height: '26px',
+                                        }}
+                                    />
+                                ))}
+                            </Stack>
+                        </Box>
+                        <DropdownFooter
+                            selectedCount={checkedItemsState.array?.length}
+                            onAccept={handleApplyClick}
+                            onClear={handleClearClick}
+                        />
+                    </Stack>
+                </Paper>
+            </Dropdown>
+        </Box>
+    );
+};