@dropi/ui-components 1.0.0

package/src/components-source/dropi-select/dropi-select.component.stories.ts

@@ -0,0 +1,686 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DropiSelectComponent } from './dropi-select.component';
+
+/**
+ * # Select Component
+ *
+ * A dropdown select component for choosing from a list of predefined options.
+ * Provides a user-friendly interface for single selection from multiple choices.
+ *
+ * ## Features
+ * - **Configurable options**: Pass any array of options with custom labels
+ * - **Validation**: Support for required field indicator
+ * - **Disabled state**: Individual options or entire select can be disabled
+ * - **Helper text**: Optional helper text for additional context
+ * - **Infinite scroll**: Supports lazy loading with scroll events
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-select
+ *   [selectProperties]="{
+ *     label: 'Country',
+ *     placeholder: 'Select a country',
+ *     options: countries
+ *   }"
+ *   (onChangeSelect)="handleSelection($event)">
+ * </app-dropi-select>
+ * ```
+ */
+const meta: Meta<DropiSelectComponent> = {
+  title: 'UI Dropi/Select',
+  component: DropiSelectComponent,
+  decorators: [moduleMetadata({})],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A dropdown select component for choosing from a list of predefined options.
+Provides a user-friendly interface for single selection from multiple choices.
+
+### Key Features
+- **Configurable options**: Pass any array of options with custom labels
+- **Validation**: Support for required field indicator
+- **Disabled state**: Individual options or entire select can be disabled
+- **Helper text**: Optional helper text for additional context
+- **Infinite scroll**: Supports lazy loading with scroll events
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selectProperties: {
+      control: 'object',
+      description:
+        'Configuration object containing label, placeholder, options, and other settings',
+      table: {
+        type: { summary: 'SelectProperties' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the entire select component when true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    scrolledToEnd: {
+      action: 'scrolledToEnd',
+      description:
+        'Event emitted when scroll reaches the end of the options list (for lazy loading)',
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<DropiSelectComponent>;
+const createStory = (args: any): Story => ({
+  render: (args, { parameters }) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-select 
+          (onChangeSelect)="onChangeSelect($event)" 
+          [selectProperties]="selectProperties"
+          [selectedOption]="selectedOption"
+          [disabled]="disabled">
+        </app-dropi-select>
+    `,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=2-393&p=f&t=ZXcjH0F1XQjX4mft-0',
+    },
+  },
+});
+export const Default = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    showObligatory: false,
+    placeholder: 'Select',
+
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+export const DefaultRequired = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+export const Disabled = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: true,
+});
+export const OptionsDisabled = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: true,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+export const WithHelper = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    textHelper: 'Example helper',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+
+export const WithError: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      reactiveSelectProperties: { ...args.selectProperties },
+      onChangeSelect: function (event: any) {
+        this.reactiveSelectProperties = {
+          ...this.reactiveSelectProperties,
+          hasError: !!!event,
+        };
+      },
+    },
+    template: `
+      <app-dropi-select
+        (onChangeSelect)="onChangeSelect($event)"
+        [selectProperties]="reactiveSelectProperties"
+        [disabled]="disabled"
+      ></app-dropi-select>
+    `,
+  }),
+  args: {
+    selectProperties: {
+      label: 'Example basic select',
+      showObligatory: true,
+      placeholder: 'Select',
+      hasError: true,
+      errorText: `Example error`,
+      options: [
+        {
+          id: 1,
+          label: 'Option 1',
+          disabled: false,
+        },
+        {
+          id: 2,
+          label: 'Option 2',
+          disabled: false,
+        },
+        {
+          id: 3,
+          label: 'Option 3',
+          disabled: false,
+        },
+      ],
+    },
+    disabled: false,
+  },
+};
+
+export const WithCategory = createStory({
+  selectProperties: {
+    label: 'Example category select',
+    textHelper: '',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        category: 'Category 1',
+        options: [
+          {
+            id: 1,
+            label: 'Option 1',
+            disabled: false,
+          },
+          {
+            id: 2,
+            label: 'Option 2',
+            disabled: false,
+          },
+          {
+            id: 3,
+            label: 'Option 3',
+            disabled: false,
+          },
+        ],
+      },
+      {
+        category: 'Category 2',
+        options: [
+          {
+            id: 4,
+            label: 'Option 4',
+            disabled: false,
+          },
+          {
+            id: 5,
+            label: 'Option 5',
+            disabled: false,
+          },
+          {
+            id: 6,
+            label: 'Option 6',
+            disabled: false,
+          },
+        ],
+      },
+    ],
+  },
+  disabled: false,
+});
+
+export const WithSearch = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    textHelper: 'Example helper',
+    showObligatory: false,
+    placeholder: 'Select',
+    searchEnabled: true,
+    options: [
+      {
+        category: 'Category 1',
+        options: [
+          {
+            id: 1,
+            label: 'Option 1',
+            disabled: false,
+          },
+          {
+            id: 2,
+            label: 'Option 2',
+            disabled: false,
+          },
+          {
+            id: 3,
+            label: 'Option 3',
+            disabled: false,
+          },
+        ],
+      },
+      {
+        category: 'Category 2',
+        options: [
+          {
+            id: 4,
+            label: 'Option 4',
+            disabled: false,
+          },
+          {
+            id: 5,
+            label: 'Option 5',
+            disabled: false,
+          },
+          {
+            id: 6,
+            label: 'Option 6',
+            disabled: false,
+          },
+        ],
+      },
+    ],
+  },
+  disabled: false,
+});
+
+export const dropdownType = createStory({
+  selectProperties: {
+    showObligatory: false,
+    placeholder: 'Order by',
+    dropdownType: true,
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+
+/**
+ * Ejemplo de MultiSelect con checkboxes.
+ * Las opciones se mantienen abiertas permitiendo seleccionar múltiples valores.
+ */
+export const MultiSelect = createStory({
+  selectProperties: {
+    label: 'Select multiple options',
+    showObligatory: false,
+    placeholder: 'Select options',
+    multiSelect: true,
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+      {
+        id: 4,
+        label: 'Option 4',
+        disabled: false,
+      },
+      {
+        id: 5,
+        label: 'Option 5',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+
+/**
+ * Ejemplo de MultiSelect con búsqueda habilitada.
+ * Permite filtrar las opciones mientras seleccionas múltiples valores.
+ */
+export const MultiSelectWithSearch = createStory({
+  selectProperties: {
+    label: 'Select multiple options with search',
+    showObligatory: true,
+    placeholder: 'Search and select',
+    multiSelect: true,
+    searchEnabled: true,
+    placeHolderSearch: 'Search options...',
+    options: [
+      {
+        id: 1,
+        label: 'Apple',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Banana',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Cherry',
+        disabled: false,
+      },
+      {
+        id: 4,
+        label: 'Date',
+        disabled: false,
+      },
+      {
+        id: 5,
+        label: 'Elderberry',
+        disabled: false,
+      },
+      {
+        id: 6,
+        label: 'Fig',
+        disabled: false,
+      },
+      {
+        id: 7,
+        label: 'Grape',
+        disabled: false,
+      },
+      {
+        id: 8,
+        label: 'Honeydew',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});
+
+/**
+ * Ejemplo con z-index alto para demostrar que funciona sobre modales.
+ * El dropdown se renderiza usando CDK Overlay con z-index 10000.
+ */
+export const HighZIndex: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="position: relative; padding: 20px; background: #f5f5f5; border-radius: 8px;">
+        <p style="margin-bottom: 16px; color: #666;">
+          Este select usa CDK Overlay con z-index 10000, lo que permite que se muestre por encima de modales y otros elementos.
+        </p>
+                <app-dropi-select
+          [selectProperties]="selectProperties"
+          [disabled]="disabled">
+        </app-dropi-select>
+
+        <div style="margin-top: 20px; padding: 20px; background: white; border: 2px solid #ddd; border-radius: 4px; position: relative; z-index: 100;">
+          <p style="margin: 0; color: #333;">
+            Elemento con z-index 100 (el dropdown aparecerá por encima)
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    selectProperties: {
+      label: 'Select with high z-index',
+      showObligatory: false,
+      placeholder: 'Select an option',
+      options: [
+        {
+          id: 1,
+          label: 'Option 1',
+          disabled: false,
+        },
+        {
+          id: 2,
+          label: 'Option 2',
+          disabled: false,
+        },
+        {
+          id: 3,
+          label: 'Option 3',
+          disabled: false,
+        },
+      ],
+    },
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demuestra que el dropdown se renderiza con z-index alto y aparece por encima de otros elementos, incluso modales.',
+      },
+    },
+  },
+};
+
+/**
+ * Ejemplo de muchas opciones con scroll virtual.
+ * Demuestra el comportamiento del scroll y la emisión del evento scrolledToEnd.
+ */
+export const ManyOptionsWithScroll = createStory({
+  selectProperties: {
+    label: 'Select with many options',
+    showObligatory: false,
+    placeholder: 'Select an option',
+    searchEnabled: true,
+    options: Array.from({ length: 50 }, (_, i) => ({
+      id: i + 1,
+      label: `Option ${i + 1}`,
+      disabled: false,
+    })),
+  },
+  disabled: false,
+});
+
+/**
+ * Ejemplo de select dentro de un contenedor con overflow.
+ * Demuestra que el dropdown usando CDK Overlay no queda recortado.
+ */
+export const InsideOverflowContainer: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="height: 200px; overflow: auto; border: 2px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9;">
+        <p style="margin-bottom: 16px; color: #666;">
+          Este select está dentro de un contenedor con overflow: auto
+        </p>
+                <app-dropi-select
+          [selectProperties]="selectProperties"
+          [disabled]="disabled">
+        </app-dropi-select>
+        <p style="margin-top: 300px; color: #999;">
+          Contenido adicional para forzar scroll en el contenedor
+        </p>
+      </div>
+    `,
+  }),
+  args: {
+    selectProperties: {
+      label: 'Select inside overflow container',
+      showObligatory: false,
+      placeholder: 'Open me',
+      options: [
+        {
+          id: 1,
+          label: 'Option 1',
+          disabled: false,
+        },
+        {
+          id: 2,
+          label: 'Option 2',
+          disabled: false,
+        },
+        {
+          id: 3,
+          label: 'Option 3',
+          disabled: false,
+        },
+        {
+          id: 4,
+          label: 'Option 4',
+          disabled: false,
+        },
+        {
+          id: 5,
+          label: 'Option 5',
+          disabled: false,
+        },
+      ],
+    },
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'El dropdown se renderiza usando CDK Overlay en el body, por lo que no queda recortado por el overflow del contenedor padre.',
+      },
+    },
+  },
+};
+
+export const WithPreselectedOption = createStory({
+  selectProperties: {
+    label: 'With preselected Option',
+    showObligatory: false,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  selectedOption: {
+    id: 2,
+    label: 'Option 2',
+    disabled: false,
+  },
+  disabled: false,
+});