ISA-Frontend/apps/isa-app/stories/ui/input-controls/dropdown-button.stories.ts

import {
  DropdownAppearance,
  DropdownButtonComponent,
  DropdownFilterComponent,
  DropdownOptionComponent,
} from '@isa/ui/input-controls';
import {
  type Meta,
  type StoryObj,
  argsToTemplate,
  moduleMetadata,
} from '@storybook/angular';

type DropdownInputProps = {
  value: string;
  label: string;
  appearance: DropdownAppearance;
};

const meta: Meta<DropdownInputProps> = {
  title: 'ui/input-controls/Dropdown',
  decorators: [
    moduleMetadata({
      imports: [
        DropdownButtonComponent,
        DropdownFilterComponent,
        DropdownOptionComponent,
      ],
    }),
  ],
  argTypes: {
    value: { control: 'text' },
    label: { control: 'text' },
    appearance: {
      control: 'select',
      options: Object.values(DropdownAppearance),
    },
  },
  render: (args) => ({
    props: args,
    template: `
        <ui-dropdown ${argsToTemplate(args)}>
            <ui-dropdown-option value="">Select an option</ui-dropdown-option>
            <ui-dropdown-option value="1">Option 1</ui-dropdown-option>
            <ui-dropdown-option value="2">Option 2</ui-dropdown-option>
            <ui-dropdown-option value="3">Option 3</ui-dropdown-option>
        </ui-dropdown>
    `,
  }),
};

export default meta;

type Story = StoryObj<DropdownInputProps>;

export const Default: Story = {
  args: {
    value: undefined,
    label: 'Label',
  },
};

export const WithFilter: Story = {
  args: {
    value: undefined,
    label: 'Select a country',
  },
  render: (args) => ({
    props: args,
    template: `
        <ui-dropdown ${argsToTemplate(args)}>
            <ui-dropdown-filter placeholder="Search countries..."></ui-dropdown-filter>
            <ui-dropdown-option value="">Select a country</ui-dropdown-option>
            <ui-dropdown-option value="de">Germany</ui-dropdown-option>
            <ui-dropdown-option value="at">Austria</ui-dropdown-option>
            <ui-dropdown-option value="ch">Switzerland</ui-dropdown-option>
            <ui-dropdown-option value="fr">France</ui-dropdown-option>
            <ui-dropdown-option value="it">Italy</ui-dropdown-option>
            <ui-dropdown-option value="es">Spain</ui-dropdown-option>
            <ui-dropdown-option value="nl">Netherlands</ui-dropdown-option>
            <ui-dropdown-option value="be">Belgium</ui-dropdown-option>
            <ui-dropdown-option value="pl">Poland</ui-dropdown-option>
            <ui-dropdown-option value="cz">Czech Republic</ui-dropdown-option>
        </ui-dropdown>
    `,
  }),
};

export const GreyAppearance: Story = {
  args: {
    value: undefined,
    label: 'Filter',
    appearance: DropdownAppearance.Grey,
  },
};

export const Disabled: Story = {
  render: () => ({
    template: `
        <ui-dropdown label="Disabled dropdown" [disabled]="true">
            <ui-dropdown-option value="1">Option 1</ui-dropdown-option>
            <ui-dropdown-option value="2">Option 2</ui-dropdown-option>
        </ui-dropdown>
    `,
  }),
};