@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

package/src/components/table/table.stories-data.jsx

@@ -1,875 +0,0 @@
-import React from 'react';
-import {
-  FaArrowDown,
-  FaArrowUp,
-  FaCheck,
-  FaExclamationCircle,
-  FaExclamationTriangle,
-  FaHeartbeat,
-  FaMinus,
-  FaPlus,
-  FaShareSquare,
-} from 'react-icons/fa';
-import { Text } from '../text/text';
-
-export const table = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight' },
-        { value: 'Energy' },
-        { value: 'Origin' },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { value: 'Brown rice', testId: 'table-tbody-cell-brown-rice' },
-        { value: 100, testId: 'table-tbody-cell-100' },
-        { value: 361, testId: 'table-tbody-cell-361' },
-        { value: 'Vietnam', testId: 'table-tbody-cell-vietnam' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat', testId: 'table-tbody-cell-buckwheat' },
-        { value: 50, testId: 'table-tbody-cell-50' },
-        { value: 358, testId: 'table-tbody-cell-358' },
-        { value: 'Poland', testId: 'table-tbody-cell-poland' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Couscous', testId: 'table-tbody-cell-couscous' },
-        { value: 10, testId: 'table-tbody-cell-10' },
-        { value: 368, testId: 'table-tbody-cell-368' },
-        { value: 'France', testId: 'table-tbody-cell-france' },
-      ],
-    },
-  ],
-};
-
-export const tableColumnWidths = {
-  ...table,
-  columnWidths: ['200px', '20%', '100px', 'auto'],
-};
-
-export const tableStaticTooltips = {
-  ...table,
-  rows: table.rows.map((row) => ({
-    ...row,
-    cells: row.cells.map((cell) => ({ ...cell, tooltip: 'Tooltip' })),
-  })),
-};
-
-export const tableBreakLongContent = {
-  ...table,
-  rows: [
-    {
-      cells: [
-        {
-          breakWord: true,
-          value:
-            'LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturufugiatnullapariatur',
-        },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-    },
-    ...table.rows,
-  ],
-};
-
-export const tableUnits = {
-  ...table,
-  headers: [
-    ...table.headers,
-    {
-      cells: [
-        {},
-        {
-          options: [
-            { label: 'kg', value: 'kg' },
-            { label: 'tonnes', value: 'tonnes' },
-          ],
-          type: 'Select',
-          searchable: false,
-          value: { label: 'kg', value: 'kg' },
-          onChange: () => {},
-        },
-        { type: 'Unit', value: 'kcal / 100g' },
-        {},
-      ],
-    },
-  ],
-};
-
-export const tableActiveRow = {
-  ...table,
-  rows: table.rows.map((row, index) => ({
-    ...row,
-    active: index === 0,
-    onRowClick: () => {},
-  })),
-};
-
-export const tableTitle = {
-  ...table,
-  name: 'Food',
-};
-
-export const tableChildComponent = {
-  ...table,
-  name: 'Food',
-  actions: [{ childComponent: <FaHeartbeat /> }],
-};
-
-export const tableInfiniteScroll = {
-  ...table,
-  headers: [
-    ...table.headers,
-    {
-      cells: [
-        {},
-        {
-          options: [
-            { label: 'kg', value: 'kg' },
-            { label: 'tonnes', value: 'tonnes' },
-          ],
-          type: 'Select',
-          native: true,
-          value: { label: 'kg', value: 'kg' },
-          onChange: () => {},
-        },
-        { type: 'Unit', value: 'kcal / 100g' },
-        {},
-      ],
-    },
-  ],
-  bordered: true,
-  infiniteScroll: true,
-  maxHeight: '500px',
-  stickyHeaders: true,
-  rows: Array.from({ length: 100 }, (_, index) => ({
-    cells: [
-      { type: 'Input', value: `Strawberry Letter ${index + 1}` },
-      { type: 'Input', value: 100 },
-      { type: 'Input', value: 361 },
-      { type: 'Input', value: 'Vietnam' },
-    ],
-  })),
-  footer: {
-    content: (
-      <>
-        <strong>Footer content:</strong> goes here
-      </>
-    ),
-  },
-};
-
-export const tableInfiniteScrollFullHeight = {
-  ...tableInfiniteScroll,
-  maxHeight: '100%',
-};
-
-export const tableInfiniteScrollShort = {
-  ...tableInfiniteScroll,
-  rows: Array.from({ length: 1 }, (_, index) => ({
-    cells: [
-      { type: 'Input', value: `Strawberry Letter ${index + 1}` },
-      { type: 'Input', value: 100 },
-      { type: 'Input', value: 361 },
-      { type: 'Input', value: 'Vietnam' },
-    ],
-  })),
-};
-
-export const tableInfiniteScrollDnD = {
-  ...tableInfiniteScroll,
-  draggable: true,
-};
-
-export const tableRowFocus = {
-  ...table,
-  rows: table.rows.map((row, index) => ({
-    ...row,
-    onRowFocus: () => {},
-  })),
-};
-
-const subComponent = () => {
-  return (
-    <ul>
-      <li>Carrots</li>
-      <li>Chocolate</li>
-      <li>Chorizo</li>
-    </ul>
-  );
-};
-
-export const tableJsxContent = {
-  headers: [
-    {
-      cells: [{ value: 'Name' }, { value: 'Content' }],
-    },
-  ],
-  rows: [
-    {
-      cells: [{ value: 'Sub-component' }, { value: subComponent() }],
-    },
-    {
-      cells: [
-        { value: 'JSX' },
-        {
-          value: (
-            <div>
-              Some <Text bold>bold content</Text>
-            </div>
-          ),
-        },
-      ],
-    },
-  ],
-};
-
-export const tableColspan = {
-  ...table,
-  headers: [
-    {
-      cells: [{ value: '' }, { value: 'Stats', colSpan: 2 }, { value: '' }],
-    },
-    ...table.headers,
-  ],
-  rows: [
-    ...table.rows,
-    {
-      cells: [{ value: 'Total', colSpan: 4 }],
-    },
-  ],
-};
-
-export const tableColspanWidths = {
-  ...table,
-  columnWidths: ['auto', '120px', '120px', 'auto'],
-  headers: [
-    {
-      cells: [
-        { value: 'Header' },
-        { value: 'Header', colSpan: 2 },
-        { value: 'Header' },
-      ],
-    },
-  ],
-};
-
-export const tableAlignment = {
-  ...tableColspan,
-  columnAlignment: ['left', 'right', 'right', 'left', 'right'],
-  columnHeaderAlignments: [
-    ['', 'center', ''],
-    ['', 'right', 'right', ''],
-    ['', 'right', 'right', ''],
-  ],
-};
-
-export const tableEditable = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name', testId: 'with-editable-cells-cell-name' },
-        { value: 'Weight (kg)' },
-        { value: 'Energy (kcal / 100g)' },
-        { value: 'Origin' },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        {
-          value: 'Brown rice',
-          type: 'Input',
-          onChange: () => {},
-          testId: 'table-tbody-cell-brown-rice',
-          disabled: true,
-        },
-        {
-          type: 'Select',
-          native: true,
-          options: [
-            { label: 50, value: 50 },
-            { label: 100, value: 100 },
-          ],
-          value: { label: 100, value: 100 },
-          onChange: () => {},
-        },
-        { value: 361, type: 'Input', onChange: () => {} },
-        {
-          type: 'Select',
-          options: [
-            { label: 'France', value: 'France' },
-            { label: 'Poland', value: 'Poland' },
-            { label: 'Vietnam', value: 'Vietnam' },
-          ],
-          value: { label: 'Vietnam', value: 'Vietnam' },
-          onChange: () => {},
-        },
-      ],
-    },
-    {
-      cells: [
-        {
-          value: 'Buckwheat',
-          type: 'Input',
-          onChange: () => {},
-          testId: 'table-tbody-cell-buckwheat',
-        },
-        {
-          type: 'Select',
-          native: true,
-          options: [
-            { label: 50, value: 50 },
-            { label: 100, value: 100 },
-          ],
-          value: { label: 100, value: 100 },
-          onChange: () => {},
-        },
-        { value: 361, type: 'Input', onChange: () => {} },
-        {
-          type: 'Select',
-          options: [
-            { label: 'France', value: 'France' },
-            { label: 'Poland', value: 'Poland' },
-            { label: 'Vietnam', value: 'Vietnam' },
-          ],
-          value: { label: 'Poland', value: 'Poland' },
-          onChange: () => {},
-          error: 'Error',
-        },
-      ],
-    },
-    {
-      cells: [
-        {
-          value: 'Couscous',
-          type: 'Input',
-          onChange: () => {},
-          testId: 'table-tbody-cell-couscous',
-        },
-        {
-          type: 'Select',
-          native: true,
-          options: [
-            { label: 50, value: 50 },
-            { label: 100, value: 100 },
-          ],
-          value: { label: 100, value: 100 },
-          onChange: () => {},
-          warning: 'Warning',
-        },
-        { value: 361, type: 'Input', onChange: () => {} },
-        {
-          type: 'Select',
-          options: [
-            { label: 'France', value: 'France' },
-            { label: 'Poland', value: 'Poland' },
-            { label: 'Vietnam', value: 'Vietnam' },
-          ],
-          value: { label: 'France', value: 'France' },
-          onChange: () => {},
-        },
-      ],
-    },
-  ],
-};
-
-export const tableFilters = {
-  ...table,
-  headers: [
-    ...table.headers,
-    {
-      cells: [
-        {
-          value: '',
-          type: 'Input',
-          placeholder: 'Search',
-          onChange: () => {},
-        },
-        {
-          value: '',
-          type: 'Input',
-          placeholder: 'Search',
-          onChange: () => {},
-        },
-        {
-          value: '',
-          type: 'Input',
-          placeholder: 'Search',
-          onChange: () => {},
-        },
-        {
-          value: '',
-          type: 'Input',
-          placeholder: 'Search',
-          onChange: () => {},
-        },
-      ],
-    },
-  ],
-};
-
-export const tableStickyHeaders = {
-  maxHeight: '400px',
-  name: 'Food',
-  stickyHeaders: 'true',
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight' },
-        { value: 'Energy' },
-        { value: 'Origin' },
-      ],
-      actions: [
-        {
-          primary: true,
-          icon: 'plus',
-          label: 'Add',
-          onClick: () => {},
-        },
-      ],
-    },
-    {
-      cells: [
-        {},
-        {
-          options: [
-            { label: 'kg', value: 'kg' },
-            { label: 'tonnes', value: 'tonnes' },
-          ],
-          type: 'Select',
-          native: true,
-          value: { label: 'kg', value: 'kg' },
-          onChange: () => {},
-        },
-        { type: 'Unit', value: 'kcal / 100g' },
-        {},
-      ],
-    },
-  ],
-  rows: Array.from({ length: 100 }, () => ({
-    cells: [
-      { type: 'Input', value: 'Brown rice' },
-      { type: 'Input', value: 100 },
-      { type: 'Input', value: 361, error: 'test error' },
-      { type: 'Input', value: 'Vietnam' },
-    ],
-  })),
-};
-
-export const tableSort = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        {
-          value: 'Weight (kg)',
-          hasSort: true,
-          sort: 'up',
-          sortPriority: 1,
-          onSort: () => {},
-        },
-        {
-          value: 'Energy (kcal / 100g)',
-          hasSort: true,
-          sort: 'down',
-          sortPriority: 2,
-          onSort: () => {},
-        },
-        {
-          value: 'Origin',
-          hasSort: true,
-          sort: '',
-          sortPriority: 1,
-          onSort: () => {},
-        },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { value: 'Brown rice' },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat' },
-        { value: 50 },
-        { value: 358 },
-        { value: 'Poland' },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Couscous' },
-        { value: 10 },
-        { value: 368 },
-        { value: 'France' },
-      ],
-    },
-  ],
-};
-
-export const tableIcons = {
-  headers: [
-    {
-      cells: [
-        {},
-        { value: 'Name' },
-        { value: 'Weight (kg)' },
-        { value: 'Energy (kcal / 100g)' },
-        { value: 'Origin' },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { type: 'Icon', icon: <FaCheck color="var(--color-text-success)" /> },
-        { value: 'Brown rice' },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-    },
-    {
-      cells: [
-        {
-          type: 'Icon',
-          icon: <FaExclamationCircle color="var(--color-text-warning)" />,
-        },
-        { value: 'Buckwheat' },
-        { value: 50 },
-        { value: 358 },
-        { value: 'Poland' },
-      ],
-    },
-    {
-      cells: [
-        {
-          type: 'Icon',
-          icon: <FaExclamationTriangle color="var(--color-text-error)" />,
-        },
-        { value: 'Couscous' },
-        { value: 10 },
-        { value: 368 },
-        { value: 'France' },
-      ],
-    },
-  ],
-};
-
-export const tableActions = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight (kg)' },
-        { value: 'Energy (kcal / 100g)' },
-        { value: 'Origin' },
-      ],
-      actions: [
-        {
-          primary: true,
-          label: 'Add',
-          icon: <FaPlus />,
-          onClick: () => {},
-        },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { value: 'Brown rice' },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-      actions: [{ label: 'Delete', icon: <FaMinus />, onClick: () => {} }],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat' },
-        { value: 50 },
-        { value: 358 },
-        { value: 'Poland' },
-      ],
-      actions: [{ label: 'Delete', icon: <FaMinus />, onClick: () => {} }],
-    },
-    {
-      cells: [
-        { value: 'Couscous' },
-        { value: 10 },
-        { value: 368 },
-        { value: 'France' },
-      ],
-      actions: [
-        {
-          label: 'test',
-          icon: <FaMinus />,
-          onClick: () => {},
-          hidden: true,
-        },
-      ],
-    },
-  ],
-};
-
-export const tableWithSubActions = {
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight (kg)' },
-        { value: 'Energy (kcal / 100g)' },
-        { value: 'Origin' },
-      ],
-      actions: [
-        {
-          primary: true,
-          label: 'Add',
-          icon: <FaPlus />,
-          onClick: () => {},
-        },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        { value: 'Brown rice' },
-        { value: 100 },
-        { value: 361 },
-        { value: 'Vietnam' },
-      ],
-      actions: [
-        {
-          label: 'More',
-          subActions: [
-            {
-              label: 'Move Up',
-              icon: <FaArrowUp />,
-              onClick: () => {},
-            },
-            {
-              label: 'Move Down',
-              icon: <FaArrowDown />,
-              onClick: () => {},
-            },
-            { label: 'Delete', icon: <FaMinus />, onClick: () => {} },
-          ],
-        },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat' },
-        { value: 50 },
-        { value: 358 },
-        { value: 'Poland' },
-      ],
-      actions: [
-        {
-          label: 'More',
-          subActions: [
-            {
-              label: 'Move Up',
-              icon: <FaArrowUp />,
-              onClick: () => {},
-            },
-            {
-              label: 'Move Down',
-              icon: <FaArrowDown />,
-              onClick: () => {},
-            },
-            { label: 'Delete', icon: <FaMinus />, onClick: () => {} },
-          ],
-        },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Couscous' },
-        { value: 10 },
-        { value: 368 },
-        { value: 'France' },
-      ],
-      actions: [
-        {
-          label: 'More',
-          subActions: [
-            {
-              label: 'Move Up',
-              icon: <FaArrowUp />,
-              onClick: () => {},
-            },
-            {
-              label: 'Move Down',
-              icon: <FaArrowDown />,
-              onClick: () => {},
-            },
-            { label: 'Delete', icon: <FaMinus />, onClick: () => {} },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export const tableFooter = {
-  ...table,
-  footer: {
-    content: (
-      <>
-        <strong>Footer content:</strong> goes here
-      </>
-    ),
-    pagination: {
-      rowCount: 500,
-      selectedPage: 10,
-      rowsPerPage: {
-        onChange: () => {},
-        options: [
-          { label: '10 / page', value: 10 },
-          { label: '20 / page', value: 20 },
-          { label: '50 / page', value: 50 },
-          { label: 'Show all', value: 0 },
-        ],
-        value: 20,
-      },
-      goTo: { onChange: () => {} },
-      onSelectPage: () => {},
-      small: true,
-    },
-    actions: [{ label: 'Share', icon: <FaShareSquare />, onClick: () => {} }],
-  },
-};
-
-export const tableHelpLibraryIcons = {
-  ...table,
-  headers: table.headers.map((header) => ({
-    ...header,
-    cells: header.cells.map((cell) => ({
-      ...cell,
-      helpIcon: {
-        onClick: () => console.log('Help clicked'),
-        tooltip: 'Help text goes here',
-      },
-      libraryIcon: {
-        onClick: () => console.log('Library clicked'),
-        tooltip: 'Edit in library',
-      },
-    })),
-  })),
-};
-
-export const tableOverflowing = {
-  columnWidths: [undefined, '100px', '100px', '100px', undefined],
-  headers: [
-    {
-      cells: [
-        { value: 'Name' },
-        { value: 'Weight (kg)' },
-        { value: 'Energy (kcal / 100g)' },
-        { value: 'Origin' },
-        { value: 'Static' },
-      ],
-    },
-  ],
-  rows: [
-    {
-      cells: [
-        {
-          breakWord: true,
-          value:
-            'LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturufugiatnullapariatur',
-        },
-        {
-          type: 'Select',
-          native: true,
-          options: [
-            { label: 50, value: 50 },
-            { label: 100, value: 100 },
-          ],
-          value: { label: 100, value: 100 },
-          onChange: () => {},
-          disabled: true,
-        },
-        {
-          type: 'Select',
-          options: [
-            { label: 'Vietnam', value: 'Vietnam' },
-            { label: 'Other', value: 'Other' },
-          ],
-          value: { label: 'Vietnam', value: 'Vietnam' },
-          onChange: () => {},
-          error: 'Error',
-        },
-        {
-          value: 'Brown rice',
-          type: 'Input',
-          onChange: () => {},
-          testId: 'table-tbody-cell-brown-rice',
-          warning: 'Warning message',
-        },
-        {
-          value: 'Static warning',
-          warning: 'Warning message',
-        },
-      ],
-    },
-    {
-      cells: [
-        { value: 'Buckwheat' },
-        {
-          type: 'Select',
-          native: true,
-          options: [
-            { label: 50, value: 50 },
-            { label: 100, value: 100 },
-          ],
-          value: { label: 100, value: 100 },
-          onChange: () => {},
-        },
-        {
-          type: 'Select',
-          options: [
-            { label: 'Vietnam', value: 'Vietnam' },
-            { label: 'Other', value: 'Other' },
-          ],
-          value: { label: 'Vietnam', value: 'Vietnam' },
-          onChange: () => {},
-        },
-        {
-          value: 'Brown rice',
-          type: 'Input',
-          onChange: () => {},
-          testId: 'table-tbody-cell-brown-rice',
-        },
-        {
-          type: 'Link',
-          value: 'Static error link',
-          error: 'Error message',
-        },
-      ],
-    },
-  ],
-};