@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/Dropdown/dropdown.stories.tsx

@@ -0,0 +1,112 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Dropdown } from './dropdown';
+
+import { Tag01, User01, Building06, Briefcase01 } from '@/components';
+
+type OptionType = {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+};
+
+const options: OptionType[] = [
+  { value: 'react', label: 'React' },
+  { value: 'next', label: 'Next.js' },
+  { value: 'typescript', label: 'TypeScript' },
+];
+
+const optionsWithDynamicIcons: OptionType[] = [
+  { value: 'user', label: 'User Profile', icon: <User01 className="size-4" /> },
+  { value: 'company', label: 'Company', icon: <Building06 className="size-4" /> },
+  { value: 'business', label: 'Business', icon: <Briefcase01 className="size-4" /> },
+  { value: 'react', label: 'React' },
+  { value: 'next', label: 'Next.js' },
+];
+
+const meta: Meta<typeof Dropdown<OptionType>> = {
+  title: 'Components/Data entry/Dropdown',
+  component: Dropdown,
+  tags: [ 'autodocs' ],
+  args: {
+    options,
+    placeholder: 'Select an option...',
+    isClearable: true,
+    size: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown<OptionType>>;
+
+export const Creatable = {
+  args: {
+    creatable: true,
+    placeholder: 'Select or create an option...',
+  },
+};
+
+export const CreatableMultiSelect = {
+  args: {
+    creatable: true,
+    isMulti: true,
+    placeholder: 'Select or create multiple options...',
+  },
+};
+
+export const CreatableWithSearchIcon = {
+  args: {
+    creatable: true,
+    showSearchIcon: true,
+    placeholder: 'Search, select or create an option...',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled = {
+  args: {
+    isDisabled: true,
+    placeholder: 'Disabled',
+  },
+};
+
+export const MultiSelect = {
+  args: {
+    isMulti: true,
+    size: 'sm',
+    showSearchIcon: true,
+    multiValueIcon: <Tag01 className="size-5" />,
+  },
+};
+
+export const MultiSelectWithDynamicIcons = {
+  args: {
+    options: optionsWithDynamicIcons,
+    isMulti: true,
+    size: 'sm',
+    showSearchIcon: true,
+    placeholder: 'Select multiple options with dynamic icons...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example demonstrates how to use dynamic multiValueIcon per option. Each option can have its own icon via the `multiValueIcon` property, and options without this property will use the fallback icon provided to the component.',
+      },
+    },
+  },
+};
+
+export const WithIcon = {
+  args: {
+    icon: <Tag01 className="size-5" />,
+  },
+};
+
+export const WithSearchIcon = {
+  args: {
+    showSearchIcon: true,
+    placeholder: 'Search and select an option...',
+  },
+};

package/src/components/molecules/Dropdown/dropdown.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import { Dropdown } from './dropdown';
+
+type OptionType = {
+  label: string;
+  value: string;
+};
+
+const options: OptionType[] = [
+  { label: 'Option One', value: 'one' },
+  { label: 'Option Two', value: 'two' },
+  { label: 'Option Three', value: 'three' },
+];
+
+const renderDropdown = (props = {}) =>
+  render(
+    <Dropdown<OptionType> options={options} placeholder="Select an option" {...props} />
+  );
+
+describe('<Dropdown />', () => {
+  it('renders without crashing', () => {
+    renderDropdown();
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+
+  it('displays options when clicked', async () => {
+    renderDropdown();
+    const placeholder = screen.getByText('Select an option');
+    fireEvent.mouseDown(placeholder);
+    expect(await screen.findByText('Option One')).toBeInTheDocument();
+    expect(screen.getByText('Option Two')).toBeInTheDocument();
+    expect(screen.getByText('Option Three')).toBeInTheDocument();
+  });
+
+  it('selects a single option correctly', async () => {
+    renderDropdown();
+    fireEvent.mouseDown(screen.getByText('Select an option'));
+    fireEvent.click(screen.getByText('Option Two'));
+    expect(screen.getByText('Option Two')).toBeInTheDocument();
+  });
+
+  it('supports multi-select mode', async () => {
+    renderDropdown({ isMulti: true });
+    const combobox = screen.getByRole('combobox');
+    fireEvent.mouseDown(combobox);
+    fireEvent.click(screen.getByText('Option One'));
+    fireEvent.mouseDown(combobox);
+    fireEvent.click(screen.getByText('Option Two'));
+    expect(screen.getByText('Option One')).toBeInTheDocument();
+    expect(screen.getByText('Option Two')).toBeInTheDocument();
+  });
+
+  it('shows custom no options message if no match', () => {
+    renderDropdown({ options: [], noOptionsMessage: () => 'No options found' });
+    fireEvent.mouseDown(screen.getByText('Select an option'));
+    expect(screen.getByText('No options found')).toBeInTheDocument();
+  });
+
+  it('applies custom classNames correctly', () => {
+    const customClass = 'custom-class';
+    renderDropdown({
+      classNames: {
+        valueContainer: () => customClass,
+      },
+    });
+    const valueContainer = screen.getByRole('combobox').parentElement?.parentElement;
+    expect(valueContainer?.className).toContain(customClass);
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderDropdown();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('allows creating new options when creatable is true', async () => {
+    const onChange = vi.fn();
+    renderDropdown({ creatable: true, onChange });
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'New Option' } });
+
+    // Wait for the "Create" option to appear
+    const createOption = await screen.findByText('Criar "New Option"');
+    fireEvent.click(createOption);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        label: 'New Option',
+        value: 'New Option',
+      }),
+      expect.anything()
+    );
+  });
+
+  it('does not show create option when creatable is false', async () => {
+    renderDropdown({ creatable: false });
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'New Option' } });
+
+    // Wait a bit to ensure no create option appears
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(screen.queryByText('Criar "New Option"')).not.toBeInTheDocument();
+  });
+
+  it('supports creating new options in multi-select mode', async () => {
+    const onChange = vi.fn();
+    renderDropdown({ creatable: true, isMulti: true, onChange });
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'New Option' } });
+
+    const createOption = await screen.findByText('Criar "New Option"');
+    fireEvent.click(createOption);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          label: 'New Option',
+          value: 'New Option',
+        }),
+      ]),
+      expect.anything()
+    );
+  });
+});

package/src/components/molecules/Dropdown/dropdown.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+
+import { Loader2 } from 'lucide-react';
+import Select, { ClassNamesConfig, ClearIndicatorProps, components, ControlProps, DropdownIndicatorProps, GroupBase, MultiValueGenericProps, MultiValueRemoveProps, OptionProps, Props as ReactSelectProps } from 'react-select';
+import CreatableSelect, { CreatableProps } from 'react-select/creatable';
+import { AsyncPaginate, ComponentProps, UseAsyncPaginateParams } from 'react-select-async-paginate';
+
+import { ChevronDown, PlusCircle, SearchLg, XClose } from '@/components/icons';
+
+import { RenderCondition } from '@/main';
+import { cn, renderHighlightedText } from '@/utils';
+
+type OptionsType = { label: string; icon?: React.ReactNode; value: string };
+
+type DropdownProps<
+OptionType extends OptionsType,
+IsMulti extends boolean = false,
+Group extends GroupBase<OptionType> = GroupBase<OptionType>,
+> = ReactSelectProps<OptionType, IsMulti, Group> & {
+  creatable?: boolean;
+  isDisabled?: boolean;
+  showSearchIcon?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  icon?: React.ReactNode;
+  rounded?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  createLabel?: string;
+};
+
+type AsyncPaginateCreatableProps<
+OptionType extends OptionsType,
+IsMulti extends boolean = false,
+Additional = { page: number },
+Group extends GroupBase<OptionType> = GroupBase<OptionType>
+> =
+  & CreatableProps<OptionType, IsMulti, Group>
+  & UseAsyncPaginateParams<OptionType, Group, Additional>
+  & ComponentProps<OptionType, Group, IsMulti>
+  & Pick<DropdownProps<OptionType, IsMulti, Group>, 'isDisabled' | 'showSearchIcon' | 'size' | 'icon' | 'rounded'>;
+
+const CustomMultiValueLabel = ({ data }: { data: OptionsType }) => {
+  const label = data.label.length > 20 ? `${data.label.slice(0, 20)}…` : data.label;
+  return <span title={data.label}>{label}</span>;
+};
+
+const CustomMultiValueContainer = <
+  Option extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>({
+    children,
+    ...props
+  }: MultiValueGenericProps<Option, IsMulti, Group>) => {
+  const optionIcon = (props.data as Option)?.icon;
+
+  return (
+    <components.MultiValueContainer {...props}>
+      <RenderCondition condition={!!optionIcon}>
+        <div className="flex items-center justify-center mr-1 size-4">
+          {optionIcon}
+        </div>
+      </RenderCondition>
+      {children}
+    </components.MultiValueContainer>
+  );
+};
+
+const CustomMultiValueRemove = <
+  Option extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: MultiValueRemoveProps<Option, IsMulti, Group>) => {
+  return (
+    <components.MultiValueRemove {...props}>
+      <XClose className="size-4 ml-1 text-gray-400 hover:text-gray-600" />
+    </components.MultiValueRemove>
+  );
+};
+
+const CustomControl = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>({
+    children,
+    showSearchIcon = false,
+    icon,
+    ...props
+  }: ControlProps<Option, IsMulti, Group> & { showSearchIcon?: boolean, icon?: React.ReactNode }) => {
+  return (
+    <components.Control {...props}>
+      <RenderCondition condition={showSearchIcon || !!icon}>
+        <div className="flex items-center justify-center text-gray-400 mr-2">
+          <RenderCondition condition={showSearchIcon}>
+            <SearchLg className="size-5" />
+          </RenderCondition>
+          <RenderCondition condition={!!icon}>
+            {icon}
+          </RenderCondition>
+        </div>
+      </RenderCondition>
+      {children}
+    </components.Control>
+  );
+};
+
+const CustomDropdownIndicator = <
+  Option extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <ChevronDown className="size-4 text-gray-400" />
+    </components.DropdownIndicator>
+  );
+};
+
+const CustomClearIndicator = <
+  Option extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: ClearIndicatorProps<Option, IsMulti, Group>) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <XClose className="size-4 text-gray-400 hover:text-gray-600" />
+    </components.ClearIndicator>
+  );
+};
+
+const CustomOption = <
+  Option extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: OptionProps<Option, IsMulti, Group>) => {
+  const isCreateOption = Boolean((props.data as unknown as { __isNew__?: boolean })?.__isNew__);
+  return (
+    <components.Option {...props}>
+      <div className="flex items-center gap-2 cursor-pointer">
+        <RenderCondition condition={!isCreateOption && !!props.data.icon}>
+          <div className="flex items-center justify-center size-4">
+            {props.data.icon}
+          </div>
+        </RenderCondition>
+        {isCreateOption ? (
+          <span>{props.children}</span>
+        ) : (
+          <span>
+            {renderHighlightedText(
+              String((props.data as OptionsType).label ?? ''),
+              (props.selectProps as unknown as { inputValue?: string })?.inputValue ?? ''
+            )}
+          </span>
+        )}
+      </div>
+    </components.Option>
+  );
+};
+
+const CustomLoadingIndicator = () => {
+  return <Loader2 className="size-5 mr-2 text-gray-400 animate-spin" />;
+};
+
+const customClassNames = <
+  OptionType extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>,
+>(size: 'sm' | 'md' | 'lg', rounded: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full') => {
+  const defaultClassNames: ClassNamesConfig<OptionType, IsMulti, Group> = {
+    control: ({ isDisabled }) =>
+      cn(
+        'bg-white placeholder:text-gray-500 selection:bg-primary cursor-pointer',
+        'border border-gray-300 flex min-h-[40px]! items-center w-full min-w-0 text-base shadow-xs transition-[color,box-shadow] outline-none',
+        'focus-within-primary',
+        isDisabled && 'opacity-50 pointer-events-none cursor-not-allowed',
+        {
+          'px-3 py-1.5': size === 'sm',
+          'px-[14px] py-1.5': size === 'md',
+          'px-4 py-1.5': size === 'lg',
+        },
+        {
+          'rounded-md': rounded === 'md',
+          'rounded-lg': rounded === 'lg',
+          'rounded-xl': rounded === 'xl',
+          'rounded-2xl': rounded === '2xl',
+          'rounded-3xl': rounded === '3xl',
+          'rounded-full': rounded === 'full',
+        }
+      ),
+    placeholder: ({ isDisabled }) => cn('text-gray-500 text-base', isDisabled && 'opacity-50'),
+    loadingMessage: () => 'text-gray-500 text-base p-3',
+    noOptionsMessage: () => 'text-gray-500 text-base p-3',
+    input: ({ isDisabled }) => cn('text-gray-900 text-base', isDisabled && 'opacity-50'),
+    singleValue: ({ isDisabled }) => cn('text-gray-900 text-base', isDisabled && 'opacity-50'),
+    valueContainer: () => 'gap-1 flex flex-wrap',
+    multiValue: ({ isDisabled }) => cn(
+      'flex items-center bg-white border border-gray-200 text-gray-700 rounded-[6px] pl-[9px] pr-[6px] py-[3px] text-sm font-medium leading-none',
+      isDisabled && 'opacity-50'
+    ),
+    multiValueLabel: ({ isDisabled }) => cn('text-base truncate max-w-[150px]', isDisabled && 'opacity-50'),
+    multiValueRemove: ({ isDisabled }) => cn(
+      'ml-1 text-gray-400 hover:text-gray-600 cursor-pointer',
+      isDisabled && 'opacity-50 pointer-events-none'
+    ),
+    menu: () => 'bg-blur mt-2 rounded-md shadow-md z-50',
+    option: ({ isFocused, isSelected, isDisabled }) => cn(
+      'cursor-pointer px-3 py-2 flex items-center gap-2 rounded-sm',
+      'text-base font-semibold',
+      isSelected ? 'bg-white text-primary' : 'text-gray-900',
+      isFocused && 'bg-gray-100',
+      isDisabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+    ),
+    indicatorsContainer: ({ isDisabled }) => cn(isDisabled && 'opacity-50'),
+    dropdownIndicator: ({ isDisabled }) => cn(
+      'text-gray-400 cursor-pointer hover:text-gray-700',
+      isDisabled && 'opacity-50 pointer-events-none'
+    ),
+    clearIndicator: () => cn('text-gray-400 cursor-pointer hover:text-gray-700'),
+  };
+
+  return defaultClassNames;
+};
+
+export const Dropdown = <
+  OptionType extends OptionsType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>,
+>(
+    {
+      classNames,
+      components: customComponents,
+      placeholder,
+      creatable = false,
+      showSearchIcon = false,
+      size = 'md',
+      icon,
+      rounded = '2xl',
+      createLabel,
+      ...props
+    }: DropdownProps<OptionType, IsMulti, Group>
+  ) => {
+
+  let SelectComponent;
+
+  if (creatable) {
+    SelectComponent = CreatableSelect;
+  } else {
+    SelectComponent = Select;
+  }
+
+  return (
+    <SelectComponent<OptionType, IsMulti, Group>
+      {...props}
+      components={{
+        MultiValueLabel: CustomMultiValueLabel,
+        MultiValueContainer: CustomMultiValueContainer,
+        MultiValueRemove: CustomMultiValueRemove,
+        Control: (controlProps) => (
+          <CustomControl {...controlProps} showSearchIcon={showSearchIcon} icon={icon} />
+        ),
+        DropdownIndicator: CustomDropdownIndicator,
+        ClearIndicator: CustomClearIndicator,
+        Option: CustomOption,
+        LoadingIndicator: CustomLoadingIndicator,
+        ...customComponents,
+      }}
+      classNames={{
+        ...customClassNames(size, rounded),
+        ...classNames,
+      }}
+      unstyled
+      placeholder={placeholder || 'Selecione'}
+      formatCreateLabel={creatable ? (input) => <span className="text-primary font-medium flex items-center gap-2"><PlusCircle className="size-5" /> {createLabel ? `${createLabel} "${input}"` : `Criar "${input}"`}</span> : undefined}
+      noOptionsMessage={props.noOptionsMessage || (() => 'Nenhuma opção')}
+      loadingMessage={props.loadingMessage || (() => 'Carregando...')}
+    />
+  );
+};
+
+export const DropdownAsync = <
+  OptionType extends OptionsType,
+  IsMulti extends boolean = false,
+  Additional = { page: number },
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>,
+>(
+    {
+      classNames,
+      components: customComponents,
+      showSearchIcon = false,
+      size = 'md',
+      icon,
+      rounded = '2xl',
+      placeholder,
+      ...props
+    }: AsyncPaginateCreatableProps<OptionType, IsMulti, Additional, Group>
+  ) => {
+  return (
+    <AsyncPaginate
+      {...props}
+      components={{
+        MultiValueLabel: CustomMultiValueLabel,
+        MultiValueContainer: CustomMultiValueContainer,
+        MultiValueRemove: CustomMultiValueRemove,
+        Control: (controlProps) => (
+          <CustomControl {...controlProps} showSearchIcon={showSearchIcon} icon={icon} />
+        ),
+        DropdownIndicator: CustomDropdownIndicator,
+        ClearIndicator: CustomClearIndicator,
+        Option: CustomOption,
+        LoadingIndicator: CustomLoadingIndicator,
+        ...customComponents,
+      }}
+      classNames={{
+        ...(customClassNames(size, rounded) as ClassNamesConfig<OptionType, IsMulti, Group>),
+        ...classNames,
+      }}
+      unstyled
+      placeholder={placeholder || 'Selecione'}
+      noOptionsMessage={props.noOptionsMessage || (() => 'Nenhuma opção')}
+      loadingMessage={props.loadingMessage || (() => 'Carregando...')}
+    />
+  );
+};

package/src/components/molecules/Dropdown/index.ts

@@ -0,0 +1 @@
+export * from './dropdown';