@dropi/ui-components 1.0.0

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

@@ -0,0 +1,313 @@
+/**
+ * @fileoverview Table component stories for Storybook
+ * @description A highly configurable data table with sorting, pagination, search, and row actions
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DropiTableComponent } from './dropi-table.component';
+import { SettingsService } from '@app/services/setting.service';
+
+const mockSettingsService = {
+  dropi_loginResult: {
+    configurations: [
+      {
+        official_currency: 'COP',
+        digits_info_currency: '1.0-0',
+      },
+    ],
+  },
+};
+
+const meta: Meta<DropiTableComponent> = {
+  title: 'UI Dropi/Table',
+  component: DropiTableComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    dropiTableConfiguration: {
+      control: 'object',
+      description: 'Configuration object for table features (title, actions, sorting, pagination)',
+    },
+    headers: {
+      control: 'object',
+      description: 'Array of column headers defining key, label, and sortable properties',
+    },
+    data: {
+      control: 'object',
+      description: 'Array of row data with typed cells (text, currency, date, tag, status, etc.)',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# Table Component
+
+A powerful data table component with extensive configuration options.
+
+## Key Features
+- **Sorting**: Column-level sorting support
+- **Pagination**: Built-in paginator
+- **Search**: Integrated search functionality
+- **Checkboxes**: Row selection support
+- **Row Actions**: Customizable action buttons per row
+- **Multiple Cell Types**: text, currency, date, tag, carrier, textIcon, status, textLink
+
+## Cell Types
+| Type | Description |
+|------|-------------|
+| text | Plain text content |
+| currency | Formatted currency value |
+| date | Date/time display |
+| tag | Status tag with color |
+| carrier | Carrier/shipping display |
+| textIcon | Text with icon |
+| status | Status indicator with dot |
+| textLink | Text with clickable link |
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [DropiTableComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [{ provide: SettingsService, useValue: mockSettingsService }],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<DropiTableComponent>;
+const createStory = (args: any): Story => ({
+  render: (args, { parameters }) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="margin: 30px; display:block; position:relative;">
+        <app-dropi-table
+        [headers]="headers"
+        [data]="data"
+        [dropiTableConfiguration]="dropiTableConfiguration">
+          </app-dropi-table>
+      </div>
+    `,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/S9yzHa6qZHgMQY2PaR10PS/Documentaci%C3%B3n?node-id=680-62904&t=yKU2thwyf4O1z26z-0',
+    },
+  },
+});
+
+export const Default = createStory({
+  dropiTableConfiguration: {
+    title: 'Dropi Table',
+    rowActions: [
+      { id: 1, icon: 'Bell-ring', label: 'Edit' },
+      { id: 2, icon: 'Book', label: 'Delete' },
+      { id: 3, icon: 'Call-incoming', label: 'View' },
+      { id: 4, icon: 'Comment-round-heart', label: 'Download' },
+      { id: 5, icon: 'Graduation-cap', label: 'Share' },
+    ],
+    sortable: true,
+    showCheckbox: true,
+    showSearch: true,
+    showPaginator: true,
+  },
+  headers: [
+    { sortable: false, key: 'name', label: 'Text' },
+    { sortable: true, key: 'price', label: 'Currency' },
+    { sortable: true, key: 'createdAt', label: 'Date' },
+    { sortable: true, key: 'statusTag', label: 'Tag' },
+    { sortable: true, key: 'carrier', label: 'Carrier' },
+    { sortable: true, key: 'textIcon', label: 'Icon with text' },
+    { sortable: false, key: 'statusDot', label: 'Status' },
+    { sortable: true, key: 'textLink', label: 'Text with Link' },
+    { sortable: true, key: 'country', label: 'Country' },
+  ],
+  data: [
+    {
+      name: { type: 'text', value: 'Laptop' },
+      price: { type: 'currency', value: 1500 },
+      createdAt: { type: 'date', value: '2025-06-02T14:23:45' },
+      statusTag: { type: 'tag', value: 'some text: 0', typeTag: 'success' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Location-market' },
+      statusDot: { type: 'status', status: 'low', value: 'text low' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '0 Some text',
+      },
+      country: { type: 'country', flag: 'ES', value: 'España' },
+      disableCheckbox: true,
+    },
+    {
+      id: { type: 'text', value: 1 },
+      name: { type: 'text', value: 'Mouse' },
+      price: { type: 'currency', value: 25 },
+      createdAt: { type: 'date', value: '2025-06-10T08:15:32' },
+      statusTag: { type: 'tag', value: 'some text: 1', typeTag: 'legacy' },
+      carrier: { type: 'carrier', value: 'FedEx' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Image-add' },
+      statusDot: { type: 'status', status: 'medium', value: '' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '1 Some text',
+      },
+      country: { type: 'country', flag: 'US', value: 'Estados Unidos' },
+      disableCheckbox: false,
+    },
+    {
+      id: { type: 'text', value: 2 },
+      name: { type: 'text', value: 'Keyboard' },
+      price: { type: 'currency', value: 45 },
+      createdAt: { type: 'date', value: '2025-06-06T11:45:23' },
+      statusTag: { type: 'tag', value: 'some text: 2', typeTag: 'default' },
+      carrier: { type: 'carrier', value: 'Speedgo' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Headset' },
+      statusDot: { type: 'status', status: 'high', value: 'text high' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '2 Some text',
+      },
+      country: { type: 'country', flag: 'GB', value: 'Reino Unido' },
+      disableCheckbox: true,
+    },
+    {
+      id: { type: 'text', value: 3 },
+      name: { type: 'text', value: 'Monitor' },
+      price: { type: 'currency', value: 300 },
+      createdAt: { type: 'date', value: '2025-06-04T16:20:10' },
+      statusTag: { type: 'tag', value: 'some text: 3', typeTag: 'error' },
+      carrier: { type: 'carrier', value: 'TCC' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Link' },
+      statusDot: { type: 'status', status: 'high', value: '' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '3 Some text',
+      },
+      country: { type: 'country', flag: 'DE', value: 'Alemania' },
+      disableCheckbox: false,
+    },
+    {
+      id: { type: 'text', value: 4 },
+      name: { type: 'text', value: 'Headphones' },
+      price: { type: 'currency', value: 80 },
+      createdAt: { type: 'date', value: '2025-06-01T10:10:10' },
+      statusTag: { type: 'tag', value: 'some text: 4', typeTag: 'success' },
+      carrier: { type: 'carrier', value: 'Urbano' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Map-marker' },
+      statusDot: { type: 'status', status: 'medium', value: 'text medium' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '4 Some text',
+      },
+      country: { type: 'country', flag: 'FR', value: 'Francia' },
+      disableCheckbox: true,
+    },
+    {
+      id: { type: 'text', value: 5 },
+      name: { type: 'text', value: 'Webcam' },
+      price: { type: 'currency', value: 100 },
+      createdAt: { type: 'date', value: '2025-06-03T19:55:12' },
+      statusTag: { type: 'tag', value: 'some text: 5', typeTag: 'info' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Globe' },
+      statusDot: { type: 'status', status: 'high', value: 'text high' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '5 Some text',
+      },
+      country: { type: 'country', flag: 'BR', value: 'Brasil' },
+      disableCheckbox: false,
+    },
+    {
+      id: { type: 'text', value: 6 },
+      name: { type: 'text', value: 'Printer' },
+      price: { type: 'currency', value: 200 },
+      createdAt: { type: 'date', value: '2025-06-07T09:42:58' },
+      statusTag: { type: 'tag', value: 'some text: 6', typeTag: 'warning' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Location-market' },
+      statusDot: { type: 'status', status: 'low', value: 'text low' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '6 Some text',
+      },
+      country: { type: 'country', flag: 'IT', value: 'Italia' },
+      disableCheckbox: true,
+    },
+    {
+      id: { type: 'text', value: 7 },
+      name: { type: 'text', value: 'Scanner' },
+      price: { type: 'currency', value: 150 },
+      createdAt: { type: 'date', value: '2025-06-09T07:30:00' },
+      statusTag: { type: 'tag', value: 'some text: 7', typeTag: 'default' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Location-market' },
+      statusDot: { type: 'status', status: 'medium', value: 'text medium' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '7 Some text',
+      },
+      country: { type: 'country', flag: 'CA', value: 'Canadá' },
+      disableCheckbox: false,
+    },
+    {
+      id: { type: 'text', value: 8 },
+      name: { type: 'text', value: 'Projector' },
+      price: { type: 'currency', value: 400 },
+      createdAt: { type: 'date', value: '2025-06-11T13:00:00' },
+      statusTag: { type: 'tag', value: 'some text: 8', typeTag: 'legacy' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Location-market' },
+      statusDot: { type: 'status', status: 'high', value: 'text high' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '8 Some text',
+      },
+      country: { type: 'country', flag: 'JP', value: 'Japón' },
+      disableCheckbox: true,
+    },
+    {
+      id: { type: 'text', value: 9 },
+      name: { type: 'text', value: 'Speakers' },
+      price: { type: 'currency', value: 60 },
+      createdAt: { type: 'date', value: '2025-06-05T12:10:10' },
+      statusTag: { type: 'tag', value: 'some text: 9', typeTag: 'error' },
+      carrier: { type: 'carrier', value: 'Envía' },
+      textIcon: { type: 'textIcon', value: 'Icono texto', icon: 'Expand' },
+      statusDot: { type: 'status', status: 'high', value: 'text high' },
+      textLink: {
+        type: 'textLink',
+        url: 'https://www.google.com/',
+        urlText: 'google',
+        value: '9 Some text',
+      },
+      country: { type: 'country', flag: 'MX', value: 'México' },
+      disableCheckbox: false,
+    },
+  ],
+});