@oliasoft-open-source/react-ui-library 1.0.0

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

@@ -0,0 +1,752 @@
+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 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 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 = {
+  fixedWidth: '100%',
+  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',
+      },
+    })),
+  })),
+};