@newtonschool/grauity 0.0.14 → 0.1.11

package/ui/elements/MultiSelectDropdown/MultiSelectDropdown.styles.ts

@@ -0,0 +1,127 @@
+import styled, { css } from 'styled-components';
+
+import Button from '../Button';
+import {
+    StyledDropdownHeaderProps,
+    StyledDropdownItemTextProps,
+    StyledDropdownListItemProps,
+    StyledDropdownSearchInputProps,
+    StyledDropdownWrapperProps,
+} from './types';
+
+export const StyledDropdownWrapper = styled.div<StyledDropdownWrapperProps>`
+    font-family: Mono Sans, sans-serif;
+    height: 100%;
+    width: 100%;
+    position: relative;
+`;
+
+export const StyledDropdownHeader = styled.div<StyledDropdownHeaderProps>`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding: var(--spacing-12px, 12px);
+    gap: var(--spacing-8px, 8px);
+    background: var(--bg-primary, #ffffff);
+    border: 1px solid var(--border-neutral, #e1e5ea);
+    border-radius: var(--corner-radius-8px, 8px);
+    cursor: pointer;
+    outline: none;
+`;
+
+export const StyledDropdownHeaderTitle = styled.div`
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    line-height: var(--spacing-14px, 14px);
+    text-align: left;
+    color: var(--text-brand, #0673f9);
+    overflow: hidden;
+`;
+
+export const StyledDropdownContainer = styled.div`
+    position: absolute;
+    top: calc(100% + var(--spacing-4px, 4px));
+    width: 100%;
+    max-height: 300px;
+    padding: var(--spacing-8px, 8px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-4px, 4px);
+    align-self: stretch;
+    border-radius: var(--corner-radius-12px, 12px);
+    border: var(--spacing-1px, 1px) solid var(--border-neutral, #e1e5ea);
+    background: var(--bg-primary, #fff);
+    box-shadow: var(--spacing-2px, 2px) var(--spacing-4px, 4px)
+        var(--spacing-8px, 8px) var(--spacing-0px, 0px) rgba(0, 0, 0, 0.06);
+`;
+
+export const StyledDropdownList = styled.div`
+    width: 100%;
+    overflow-y: auto;
+`;
+
+export const StyledDropdownListItem = styled.div<StyledDropdownListItemProps>`
+    width: 100%;
+    outline: none;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    padding: var(--spacing-8px, 8px) var(--spacing-4px, 4px);
+    gap: var(--spacing-8px, 8px);
+    cursor: pointer;
+
+    &:hover {
+        background: var(--bg-secondary, #f6f7f9);
+    }
+`;
+
+export const StyledDropdownItemCheckbox = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const StyledDropdownItemText = styled.div<StyledDropdownItemTextProps>`
+    color: var(--text-primary, #16191d);
+    font-size: var(--spacing-14px, 14px);
+    font-weight: 500;
+
+    ${({ $selected }) =>
+        $selected &&
+        css`
+            color: var(--text-brand, #0673f9);
+        `}
+`;
+
+export const StyledDropdownSearchContainer = styled.div`
+    width: 100%;
+    height: var(--spacing-36px, 36px);
+    padding: var(--spacing-12px, 12px);
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: var(--spacing-8px, 8px);
+    border-radius: var(--corner-radius-8px, 8px);
+    border: var(--spacing-1px, 1px) solid var(--border-neutral, #e1e5ea);
+    background: var(--bg-primary, #ffffff);
+`;
+
+export const StyledDropdownSearchInput = styled.input<StyledDropdownSearchInputProps>`
+    outline: none;
+    border: none;
+    background: var(--bg-primary, #ffffff);
+    color: var(--text-primary, #16191d);
+    font-size: var(--spacing-14px, 14px);
+    font-style: normal;
+    font-weight: 500;
+`;
+
+export const StyledApplyButton = styled(Button)`
+    width: 100%;
+    outline: none;
+`;

package/ui/elements/MultiSelectDropdown/MultiSelectDropdown.test.tsx

@@ -0,0 +1,224 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import MultiSelectDropdown from './MultiSelectDropdown';
+import { DropdownOption } from './types';
+
+const openDropdown = () => {
+    const header = screen.getByRole('button');
+    fireEvent.click(header);
+};
+
+describe('multi-select-dropdown', () => {
+    const options: Set<DropdownOption> = new Set([
+        { id: 1, label: 'Option 1' },
+        { id: 2, label: 'Option 2' },
+        { id: 3, label: 'Option 3' },
+    ]) as any as Set<DropdownOption>;
+
+    // Rendering of the component
+    it('renders with default props', () => {
+        render(<MultiSelectDropdown />);
+        const dropdown = screen.getByRole('combobox');
+        expect(dropdown).toBeInTheDocument();
+    });
+
+    // Dropdown Icon
+    it('icon is chevron-down when dropdown is closed', () => {
+        render(<MultiSelectDropdown />);
+        const icon = screen.getByTestId('testid-icon');
+        expect(icon).toHaveClass('grauity-icon');
+        expect(icon).toHaveClass('grauity-icon-chevron-down');
+    });
+    it('icon is chevron-up when dropdown is opened', () => {
+        render(<MultiSelectDropdown />);
+        openDropdown();
+        const icon = screen.getAllByTestId('testid-icon')[0];
+        expect(icon).toHaveClass('grauity-icon');
+        expect(icon).toHaveClass('grauity-icon-chevron-up');
+    });
+
+    // Search Box
+    it('shows search input when shouldEnableSearch is true', () => {
+        render(<MultiSelectDropdown shouldEnableSearch />);
+        openDropdown();
+        const searchInput = screen.getByRole('searchbox');
+        expect(searchInput).toBeInTheDocument();
+    });
+    it('does not show search input when shouldEnableSearch is false', () => {
+        render(<MultiSelectDropdown shouldEnableSearch={false} />);
+        openDropdown();
+        const searchInput = screen.queryByRole('searchbox');
+        expect(searchInput).not.toBeInTheDocument();
+    });
+    it('renders search box with placeholder text', () => {
+        render(
+            <MultiSelectDropdown
+                shouldEnableSearch
+                searchPlaceholder="Search..."
+            />
+        );
+        openDropdown();
+        const searchInput = screen.getByRole('searchbox');
+        expect(searchInput).toHaveAttribute('placeholder', 'Search...');
+    });
+
+    // Render Options
+    it('renders options correctly', () => {
+        render(<MultiSelectDropdown options={options} />);
+        openDropdown();
+        const option1 = screen.getByText('Option 1');
+        const option2 = screen.getByText('Option 2');
+        const option3 = screen.getByText('Option 3');
+        expect(option1).toBeInTheDocument();
+        expect(option2).toBeInTheDocument();
+        expect(option3).toBeInTheDocument();
+    });
+
+    // Select All Options
+    it('shows select all options when shouldEnableAllSelected is true', () => {
+        render(<MultiSelectDropdown shouldEnableAllSelected />);
+        openDropdown();
+        const allOption = screen.getByText('All');
+        expect(allOption).toBeInTheDocument();
+    });
+    it('does not show select all options when shouldEnableAllSelected is false', () => {
+        render(<MultiSelectDropdown shouldEnableAllSelected={false} />);
+        openDropdown();
+        const allOption = screen.queryByText('All');
+        expect(allOption).not.toBeInTheDocument();
+    });
+    it('renders all option text correctly', () => {
+        render(
+            <MultiSelectDropdown
+                shouldEnableAllSelected
+                allOptionText="Select all"
+            />
+        );
+        openDropdown();
+        const allOption = screen.getByText('Select all');
+        expect(allOption).toBeInTheDocument();
+    });
+
+    // No Option Selected
+    it('renders no option selected text correctly', () => {
+        render(<MultiSelectDropdown noOptionSelctedText="Select option" />);
+        const header = screen.getByRole('button');
+        expect(header).toHaveTextContent('Select option');
+    });
+
+    // Apply Button
+    it('calls onOptionsChange when apply button is clicked', () => {
+        const onOptionsChange = jest.fn();
+        render(
+            <MultiSelectDropdown
+                options={options}
+                onOptionsChange={onOptionsChange}
+            />
+        );
+        openDropdown();
+        const applyButton = screen.getByText('Apply');
+        fireEvent.click(applyButton);
+        expect(onOptionsChange).toHaveBeenCalledTimes(1);
+    });
+    it('closes dropdown when apply button is clicked', () => {
+        render(<MultiSelectDropdown options={options} />);
+        openDropdown();
+        const applyButton = screen.getByText('Apply');
+        fireEvent.click(applyButton);
+        const dropdown = screen.queryByRole('combobox');
+        expect(dropdown.children).toHaveLength(1);
+    });
+
+    // Select Options
+    it('calls onOptionsChange with selected options when apply button is clicked', () => {
+        const onOptionsChange = jest.fn();
+        render(
+            <MultiSelectDropdown
+                options={options}
+                onOptionsChange={onOptionsChange}
+            />
+        );
+        openDropdown();
+        const option1 = screen.getByText('Option 1');
+        const option3 = screen.getByText('Option 3');
+        fireEvent.click(option1);
+        fireEvent.click(option3);
+        const applyButton = screen.getByText('Apply');
+        fireEvent.click(applyButton);
+        expect(onOptionsChange).toHaveBeenCalledWith(
+            new Set([
+                { id: 1, label: 'Option 1' },
+                { id: 3, label: 'Option 3' },
+            ])
+        );
+    });
+    it('calls onOptionsChange with all options when select all is clicked', () => {
+        const onOptionsChange = jest.fn();
+        render(
+            <MultiSelectDropdown
+                options={options}
+                onOptionsChange={onOptionsChange}
+                shouldEnableAllSelected
+            />
+        );
+        openDropdown();
+        const allOption = screen.getByText('All');
+        fireEvent.click(allOption);
+        const applyButton = screen.getByText('Apply');
+        fireEvent.click(applyButton);
+        expect(onOptionsChange).toHaveBeenCalledWith(options);
+    });
+
+    // Header Text
+    it('renders header text correctly', () => {
+        render(<MultiSelectDropdown noOptionSelctedText="Select options" />);
+        const header = screen.getByRole('button');
+        expect(header).toHaveTextContent('Select options');
+    });
+    it('renders header text correctly when one option is selected', () => {
+        render(
+            <MultiSelectDropdown
+                options={options}
+                noOptionSelctedText="Select options"
+            />
+        );
+        openDropdown();
+        const option1 = screen.getByText('Option 2');
+        fireEvent.click(option1);
+        const header = screen.getAllByRole('button')[0];
+        expect(header).toHaveTextContent('Option 2');
+    });
+    it('renders header text correctly when multiple options are selected', () => {
+        render(
+            <MultiSelectDropdown
+                options={options}
+                noOptionSelctedText="Select options"
+            />
+        );
+        openDropdown();
+        const option1 = screen.getByText('Option 1');
+        const option2 = screen.getByText('Option 2');
+        fireEvent.click(option1);
+        fireEvent.click(option2);
+        const header = screen.getAllByRole('button')[0];
+        expect(header).toHaveTextContent('2 selected');
+    });
+    it('renders header text correctly when all options are selected', () => {
+        render(
+            <MultiSelectDropdown
+                options={options}
+                noOptionSelctedText="Select options"
+                shouldEnableAllSelected
+                allOptionText="All Selected"
+            />
+        );
+        openDropdown();
+        const allOption = screen.getByText('All Selected');
+        fireEvent.click(allOption);
+        const header = screen.getAllByRole('button')[0];
+        expect(header).toHaveTextContent('All Selected');
+    });
+});

package/ui/elements/MultiSelectDropdown/MultiSelectDropdown.tsx

@@ -0,0 +1,156 @@
+import { debounce } from 'lodash';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { Icon } from '../Icon';
+import DropdownListItem from './DropdownListItem';
+import {
+    StyledApplyButton,
+    StyledDropdownContainer,
+    StyledDropdownHeader,
+    StyledDropdownHeaderTitle,
+    StyledDropdownList,
+    StyledDropdownSearchContainer,
+    StyledDropdownSearchInput,
+    StyledDropdownWrapper,
+} from './MultiSelectDropdown.styles';
+import { DropdownOption, MultiSelectDropdownProps } from './types';
+
+const MultiSelectDropdown = forwardRef<
+    HTMLSelectElement,
+    MultiSelectDropdownProps
+>((props, ref) => {
+    const {
+        noOptionSelctedText = 'Select',
+        options = new Set([]),
+        shouldEnableSearch = true,
+        onSearchInputChange = () => {},
+        searchPlaceholder = 'Search',
+        shouldEnableAllSelected = true,
+        defaultAllSelected = false,
+        allOptionText = 'All',
+        onOptionsChange = () => {},
+    } = props;
+
+    const [isOpened, setIsOpened] = useState(false);
+    const [searchInput, setSearchInput] = useState('');
+    const [allOptionsSelected, setAllOptionsSelected] =
+        useState(defaultAllSelected);
+    const [selectedOptionsIds, setSelectedOptionsIds] = useState<
+        Record<string, boolean>
+    >({});
+
+    const clickOnOption = (option: DropdownOption) => {
+        const newSelectedOptionsIds = {
+            ...selectedOptionsIds,
+            [option.id]: !selectedOptionsIds[option.id],
+        };
+        setAllOptionsSelected(false);
+        setSelectedOptionsIds(newSelectedOptionsIds);
+    };
+
+    const clickOnAllOptionsSelect = () => {
+        const newSelectedOptionsIds = Array.from(options).reduce(
+            (acc: Record<string, boolean>, option) => {
+                acc[option.id] = !allOptionsSelected;
+                return acc;
+            },
+            {}
+        );
+        setAllOptionsSelected(!allOptionsSelected);
+        setSelectedOptionsIds(newSelectedOptionsIds);
+    };
+
+    const handleApply = () => {
+        const selectedOptions = new Set(
+            Array.from(options).filter(
+                (option) => selectedOptionsIds[option.id]
+            )
+        );
+        onOptionsChange(selectedOptions);
+        setIsOpened(false);
+    };
+
+    const debouncedSearchCallback = useCallback(
+        debounce((value: string) => {
+            onSearchInputChange(value);
+        }, 500),
+        []
+    );
+
+    const getHeaderTitle = (): string => {
+        if (allOptionsSelected) {
+            return allOptionText;
+        }
+        const selectedOptions = Array.from(options)
+            .filter((option) => selectedOptionsIds[option.id])
+            .map((option) => option.label);
+        if (selectedOptions.length === 0) {
+            return noOptionSelctedText;
+        }
+        if (selectedOptions.length === 1) {
+            return selectedOptions[0];
+        }
+        return `${selectedOptions.length} selected`;
+    };
+
+    useEffect(() => {
+        setAllOptionsSelected(defaultAllSelected);
+    }, [defaultAllSelected]);
+
+    return (
+        <StyledDropdownWrapper ref={ref} role="combobox">
+            <StyledDropdownHeader
+                role="button"
+                onClick={() => setIsOpened(!isOpened)}
+            >
+                <StyledDropdownHeaderTitle>
+                    {getHeaderTitle()}
+                </StyledDropdownHeaderTitle>
+                <Icon name={isOpened ? 'chevron-up' : 'chevron-down'} />
+            </StyledDropdownHeader>
+            {isOpened && (
+                <StyledDropdownContainer>
+                    {shouldEnableSearch && (
+                        <StyledDropdownSearchContainer>
+                            <Icon name="search" />
+                            <StyledDropdownSearchInput
+                                role="searchbox"
+                                placeholder={searchPlaceholder}
+                                value={searchInput}
+                                onChange={(e) => {
+                                    debouncedSearchCallback(e.target.value);
+                                    setSearchInput(e.target.value);
+                                }}
+                            />
+                        </StyledDropdownSearchContainer>
+                    )}
+                    <StyledDropdownList>
+                        {shouldEnableAllSelected && (
+                            <DropdownListItem
+                                displayText={allOptionText}
+                                onClickFn={clickOnAllOptionsSelect}
+                                isSelected={allOptionsSelected}
+                            />
+                        )}
+                        {Array.from(options || []).map((option) => (
+                            <DropdownListItem
+                                key={option.id}
+                                displayText={option.label}
+                                onClickFn={() => clickOnOption(option)}
+                                isSelected={
+                                    allOptionsSelected ||
+                                    selectedOptionsIds[option.id]
+                                }
+                            />
+                        ))}
+                    </StyledDropdownList>
+                    <StyledApplyButton onClick={handleApply}>
+                        Apply
+                    </StyledApplyButton>
+                </StyledDropdownContainer>
+            )}
+        </StyledDropdownWrapper>
+    );
+});
+
+export default MultiSelectDropdown;

package/ui/elements/MultiSelectDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiSelectDropdown';
+export type { MultiSelectDropdownProps } from './types';

package/ui/elements/MultiSelectDropdown/types.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+export interface DropdownOption {
+    id: string;
+    label: string;
+}
+
+export interface MultiSelectDropdownProps {
+    /**
+     * Text to display when no option is selected.
+     * @default Select
+     */
+    noOptionSelctedText?: string;
+
+    /**
+     * Set of options available for selection.
+     * @default new Set([])
+     */
+    options?: Set<DropdownOption>;
+
+    /**
+     * Flag to enable or disable the search functionality.
+     * @default true
+     */
+    shouldEnableSearch?: boolean;
+
+    /**
+     * Callback function triggered when the search input value changes.
+     * @param value - The current value of the search input.
+     */
+    onSearchInputChange?: (value: string) => void;
+
+    /**
+     * Placeholder text for the search input field.
+     * @default Search
+     */
+    searchPlaceholder?: string;
+
+    /**
+     * Flag to enable or disable the "Select All" functionality.
+     * @default true
+     */
+    shouldEnableAllSelected?: boolean;
+
+    /**
+     * Flag to set all options as selected by default.
+     * @default false
+     */
+    defaultAllSelected?: boolean;
+
+    /**
+     * Text to display for the "Select All" option.
+     * @default All
+     */
+    allOptionText?: string;
+
+    /**
+     * Callback function triggered when the selected options change.
+     * @param options - The current set of selected options.
+     */
+    onOptionsChange?: (options: Set<DropdownOption>) => void;
+}
+
+export interface DropdownListItemProps {
+    displayText: string;
+    onClickFn: () => void;
+    isSelected?: boolean;
+}
+
+export interface StyledDropdownWrapperProps
+    extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    ref?: React.Ref<HTMLSelectElement>;
+}
+
+export interface StyledDropdownHeaderProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export interface StyledDropdownListItemProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export interface StyledDropdownSearchInputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export interface StyledDropdownItemTextProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    $selected?: boolean;
+}

package/ui/elements/SelectDropdown/SelectDropdown.styles.ts

@@ -0,0 +1,99 @@
+import styled, { css } from 'styled-components';
+
+import Button from '../Button';
+import {
+    StyledDivProps,
+    StyledDropdownSearchInputProps,
+    StyledSelectDropdownItemProps,
+    StyledSelectDropdownWrapperProps,
+} from './types';
+
+export const StyledSelectDropdownWrapper = styled.div<StyledSelectDropdownWrapperProps>`
+    width: 100%;
+    height: 100%;
+    position: relative;
+`;
+
+export const StyledSelectDropdownButton = styled(Button)`
+    height: 100%;
+    min-height: 0;
+`;
+
+export const StyledSelectDropdownContainer = styled.div<StyledDivProps>`
+    position: absolute;
+    top: calc(100% + var(--spacing-4px, 4px));
+    left: 0;
+    width: max-content;
+    min-width: 100%;
+    max-width: 300px;
+    max-height: 300px;
+    overflow: hidden;
+    padding: var(--spacing-8px, 8px);
+    font-family: var(--font-family, 'Mono Sans');
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-4px, 4px);
+    border-radius: var(--spacing-12px, 12px);
+    border: var(--spacing-1px, 1px) solid var(--border, #e1e5ea);
+    background: var(--bg-primary, #fff);
+    box-shadow: var(--spacing-2px, 2px) var(--spacing-4px, 4px)
+        var(--spacing-8px, 8px) var(--spacing-0px, 0px) rgba(0, 0, 0, 0.06);
+`;
+
+export const StyledSelectDropdownList = styled.div`
+    width: 100%;
+    overflow: auto;
+`;
+
+export const StyledSelectDropdownItem = styled.div<StyledSelectDropdownItemProps>`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: var(--spacing-8px, 8px);
+    padding: var(--spacing-8px, 8px) var(--spacing-4px, 4px);
+    border-radius: var(--spacing-4px, 4px);
+    color: var(--text-secondary, #5b6271);
+    font-size: var(--spacing-14px, 14px);
+    font-style: normal;
+    font-weight: 500;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--bg-secondary, #f6f7f9);
+    }
+
+    ${({ $disabled }) =>
+        $disabled &&
+        css`
+            color: var(--text-disabled, #8c95a6);
+            cursor: default;
+            &:hover {
+                background: var(--bg-primary, #fff);
+            }
+        `}
+`;
+
+export const StyledDropdownSearchContainer = styled.div`
+    width: 100%;
+    height: var(--spacing-36px, 36px);
+    padding: var(--spacing-12px, 12px);
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: var(--spacing-8px, 8px);
+    border-radius: var(--corner-radius-8px, 8px);
+    border: var(--spacing-1px, 1px) solid var(--border-neutral, #e1e5ea);
+    background: var(--bg-primary, #ffffff);
+`;
+
+export const StyledDropdownSearchInput = styled.input<StyledDropdownSearchInputProps>`
+    outline: none;
+    border: none;
+    background: var(--bg-primary, #ffffff);
+    color: var(--text-primary, #16191d);
+    font-size: var(--spacing-14px, 14px);
+    font-style: normal;
+    font-weight: 500;
+`;