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

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

@@ -0,0 +1,814 @@
+import React, { useEffect, useState } from 'react';
+import { FaMinus, FaPlus } from 'react-icons/fa';
+import {
+  Table,
+  Card,
+  Heading,
+  Field,
+  Button,
+  Input,
+  Text,
+  Flex,
+} from '../../..';
+import * as storyData from './table.stories-data';
+
+export default {
+  title: 'Basic/Table',
+  component: Table,
+  args: {
+    table: {
+      ...storyData.table,
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <Table
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
+};
+export const Default = Template.bind({});
+
+export const Units = Template.bind({});
+Units.args = {
+  table: storyData.tableUnits,
+};
+
+export const ActiveRow = Template.bind({});
+ActiveRow.args = {
+  table: storyData.tableActiveRow,
+};
+
+export const MinimumColumnWidths = Template.bind({});
+MinimumColumnWidths.args = {
+  table: storyData.tableColumnWidths,
+};
+MinimumColumnWidths.parameters = {
+  docs: {
+    description: {
+      story:
+        'Use sparingly when certain columns cannot be below a certain width. Make sure at least one column is set to `auto` to use remaining space.',
+    },
+  },
+};
+
+export const Colspan = Template.bind({});
+Colspan.args = {
+  table: storyData.tableColspan,
+};
+
+export const ColumnAlignment = Template.bind({});
+ColumnAlignment.args = {
+  table: storyData.tableAlignment,
+};
+
+export const Editable = Template.bind({});
+Editable.args = {
+  table: storyData.tableEditable,
+};
+
+export const StickyHeaders = Template.bind({});
+StickyHeaders.args = {
+  table: storyData.tableStickyHeaders,
+};
+
+export const InfiniteScroll = Template.bind({});
+InfiniteScroll.args = {
+  table: storyData.tableInfiniteScroll,
+};
+
+export const InfiniteScrollWithDragAndDrop = Template.bind({});
+InfiniteScrollWithDragAndDrop.args = {
+  table: storyData.tableInfiniteScrollDnD,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  table: storyData.tableTitle,
+};
+
+export const Filter = Template.bind({});
+Filter.args = {
+  table: storyData.tableFilters,
+};
+
+export const Sort = Template.bind({});
+Sort.args = {
+  table: storyData.tableSort,
+};
+
+export const Icons = Template.bind({});
+Icons.args = {
+  table: storyData.tableIcons,
+};
+
+export const Actions = Template.bind({});
+Actions.args = {
+  table: storyData.tableActions,
+};
+
+export const Menus = Template.bind({});
+Menus.args = {
+  table: storyData.tableWithSubActions,
+};
+
+export const RowFocusEvent = Template.bind({});
+RowFocusEvent.args = {
+  table: storyData.tableRowFocus,
+};
+
+export const DragAndDrop = () => {
+  const withDragAndDrop = {
+    draggable: true,
+    headers: [
+      {
+        cells: [
+          { value: 'Name' },
+          { value: 'Weight (kg)' },
+          { value: 'Energy (kcal / 100g)' },
+          { value: 'Origin' },
+        ],
+      },
+    ],
+    rows: [
+      {
+        noDrag: true,
+        cells: [
+          { value: 'Undraggable' },
+          { value: 100 },
+          { value: 361 },
+          { value: 'Vietnam' },
+        ],
+      },
+      {
+        cells: [
+          { value: 'Buckwheat' },
+          { value: 50 },
+          { value: 358 },
+          { value: 'Poland' },
+        ],
+      },
+      {
+        cells: [
+          { value: 'Couscous' },
+          { value: 10 },
+          { value: 368 },
+          { value: 'France' },
+        ],
+      },
+    ],
+  };
+  const arraymove = (arr, from, to) => {
+    const copy = [...arr];
+    if (arr[to].noDrag) {
+      return arr;
+    }
+    copy.splice(to, 0, copy.splice(from, 1)[0]);
+    return copy;
+  };
+  const [rows, setRows] = useState(withDragAndDrop.rows);
+  const onListReorder = (reorderData) => {
+    const { to, from } = reorderData;
+    arraymove(rows, from, to);
+    setRows(arraymove(rows, from, to));
+  };
+  return (
+    <Table table={{ ...withDragAndDrop, rows }} onListReorder={onListReorder} />
+  );
+};
+
+export const ChildComponent = Template.bind({});
+ChildComponent.args = {
+  table: storyData.tableChildComponent,
+};
+
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+  table: storyData.tableJsxContent,
+};
+
+export const Footer = Template.bind({});
+Footer.args = {
+  table: storyData.tableFooter,
+};
+
+export const InCard = () => (
+  <Card heading={<Heading>Card heading</Heading>} padding={false}>
+    <Table table={{ ...storyData.table, bordered: false }} />
+  </Card>
+);
+InCard.parameters = {
+  docs: { source: { type: 'dynamic' } },
+};
+
+export const NotStriped = Template.bind({});
+NotStriped.args = {
+  table: {
+    ...storyData.table,
+    striped: false,
+  },
+};
+NotStriped.parameters = {
+  docs: {
+    description: {
+      story: '`striped: false` removes tinted background on alternative rows.',
+    },
+  },
+};
+
+export const StaticCellTooltips = Template.bind({});
+StaticCellTooltips.args = {
+  table: storyData.tableStaticTooltips,
+};
+
+export const WordbreakLongContent = Template.bind({});
+WordbreakLongContent.args = {
+  table: storyData.tableBreakLongContent,
+};
+WordbreakLongContent.parameters = {
+  docs: {
+    description: {
+      story:
+        'Setting `breakWord: true` on a cell will allow very long text strings to break',
+    },
+  },
+};
+
+export const HelpAndLibraryIcons = Template.bind({});
+HelpAndLibraryIcons.args = {
+  table: storyData.tableHelpLibraryIcons,
+};
+
+export const Expandable = () => {
+  const [expandedRow, setExpandedRow] = useState(null);
+  const toggleExpandedRow = (rowIndex) =>
+    expandedRow === rowIndex ? setExpandedRow(null) : setExpandedRow(rowIndex);
+  return (
+    <Table
+      table={{
+        ...storyData.table,
+        rows: storyData.table.rows.map((row, index) => ({
+          ...row,
+          onRowClick: () => toggleExpandedRow(index),
+          expandedContent: {
+            content:
+              expandedRow === index ? (
+                <div>Example expanded content</div>
+              ) : null,
+          },
+        })),
+      }}
+    />
+  );
+};
+
+export const Popover = () => {
+  const headings = ['Section', 'Width', 'Height'];
+  let units = ['', 'm', 'm'];
+  let data = [...Array(10).keys()].map((c, i) => [i, i * 2, i * 2]);
+  /*
+      Mock table data store (real apps should use Redux or similar)
+    */
+  const PopoverTable = () => {
+    const CellInputForm = ({ close, value }) => (
+      <>
+        <Field label="Input">
+          <Input value={value} width="100%" />
+        </Field>
+        <Flex gap>
+          <Button colored label="Save" onClick={() => {}} />
+          <Button label="Cancel" onClick={close} />
+        </Flex>
+      </>
+    );
+    const table = {
+      fixedWidth: '100%',
+      headers: [
+        {
+          cells: headings.map((h) => ({ value: h })),
+        },
+        {
+          cells: [
+            {},
+            {
+              menu: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[1],
+              type: 'Unit',
+            },
+            {
+              menu: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[2],
+              type: 'Unit',
+            },
+          ],
+        },
+      ],
+      rows: data.map((row, i) => {
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Popover',
+            content: <CellInputForm value={row[i]} />,
+          })),
+        };
+      }),
+    };
+    return <Table table={table} />;
+  };
+  return <PopoverTable />;
+};
+
+export const SinglePopoverAtOnce = () => {
+  const headings = ['Section', 'Width', 'Height'];
+  let units = ['', 'm', 'm'];
+  let data = [...Array(10).keys()].map((c, i) => [i, i * 2, i * 2]);
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const SinglePopoverOpenedTable = () => {
+    const [isPopOverCellOpened, setIsPopOverCellOpened] = useState(false);
+    const CellInputForm = ({ close, value }) => {
+      useEffect(() => {
+        if (!isPopOverCellOpened) {
+          setIsPopOverCellOpened(true);
+        }
+      }, []);
+      const onClosePopOver = () => {
+        setIsPopOverCellOpened(false);
+        close();
+      };
+      return (
+        <>
+          <Field label="Input">
+            <Input value={value} width="100%" />
+          </Field>
+          <Flex gap>
+            <Button colored label="Save" onClick={onClosePopOver} />
+            <Button label="Cancel" onClick={onClosePopOver} />
+          </Flex>
+        </>
+      );
+    };
+    const table = {
+      headers: [
+        {
+          cells: headings.map((h) => ({ value: h })),
+        },
+        {
+          cells: [
+            {},
+            {
+              menu: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[1],
+              type: 'Unit',
+            },
+            {
+              menu: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[2],
+              type: 'Unit',
+            },
+          ],
+        },
+      ],
+      rows: data.map((row, i) => {
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Popover',
+            disabled: isPopOverCellOpened,
+            closeOnOutsideClick: false,
+            content: <CellInputForm value={row[i]} />,
+          })),
+        };
+      }),
+    };
+    return <Table table={table} />;
+  };
+  return <SinglePopoverOpenedTable />;
+};
+
+export const Managed = () => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let units = ['', 'm', 'm'];
+  let data = [...Array(175).keys()].map((c, i) => [i, i * 2, i * 2]);
+  /*
+    Mock table data actions (real apps should use Redux or similar)
+  */
+  const convertUnit = (fromUnit, toUnit, value) => {
+    return fromUnit === 'm' && toUnit === 'ft'
+      ? value * 3.28084
+      : fromUnit === 'ft' && toUnit === 'm'
+      ? value / 3.28084
+      : value;
+  };
+  const onChangeValue = (evt, rowIndex, cellIndex, render) => {
+    data[rowIndex][cellIndex] = evt.target.value;
+    render();
+  };
+  const onAddRow = (render) => {
+    data = data.concat([['', '', '']]);
+    render();
+  };
+  const onDeleteRow = (rowIndex, render) => {
+    data = data.filter((r, i) => i !== rowIndex);
+    render();
+  };
+  const onChangeUnit = (evt, columnIndex, render) => {
+    const fromUnit = units[columnIndex];
+    const toUnit = evt.target.value;
+    units = units.map((u, i) => (i === columnIndex ? toUnit : u));
+    data = data.map((r) =>
+      r.map((c, i) =>
+        i === columnIndex ? convertUnit(fromUnit, toUnit, c) : c,
+      ),
+    );
+    render();
+  };
+  /*
+    Container component manages state and configuration of table
+  */
+  const ManagedTable = () => {
+    const rowsPerPageOptions = [
+      { label: '10 / page', value: 10 },
+      { label: '20 / page', value: 20 },
+      { label: '50 / page', value: 50 },
+      { label: 'Show all', value: 0 },
+    ];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    //hack to make Storybook re-render after event handlers alter data
+    //only using this because example does not manage data with Redux / props
+    const [toggle, forceRender] = useState(false);
+    const render = () => {
+      forceRender(!toggle);
+    };
+    const goToLastPage = () => {
+      const lastPage = Math.ceil(data.length / rowsPerPage);
+      setSelectedPage(lastPage);
+    };
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow =
+      rowsPerPage === 0 ? data.length - 1 : firstVisibleRow + rowsPerPage;
+    const table = {
+      headers: [
+        {
+          cells: headings.map((h) => ({ value: h })),
+          actions: [
+            {
+              primary: true,
+              label: 'Add',
+              icon: <FaPlus />,
+              onClick: () => {
+                onAddRow(render);
+                goToLastPage();
+              },
+            },
+          ],
+        },
+        {
+          cells: [
+            {},
+            {
+              options: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[1],
+              type: 'Select',
+              native: true,
+              onChange: (evt) => onChangeUnit(evt, 1, render),
+            },
+            {
+              options: [
+                { label: 'm', value: 'm' },
+                { label: 'ft', value: 'ft' },
+              ],
+              value: units[2],
+              type: 'Select',
+              native: true,
+              onChange: (evt) => onChangeUnit(evt, 2, render),
+            },
+          ],
+        },
+      ],
+      rows: data.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
+        const rowIndex = firstVisibleRow + i;
+        return {
+          cells: [...Array(3).keys()].map((c, i) => ({
+            //https://stackoverflow.com/a/33352604
+            value: row[i],
+            type: 'Input',
+            onChange: (evt) => onChangeValue(evt, rowIndex, i, render),
+          })),
+          actions: [
+            {
+              label: 'Delete',
+              icon: <FaMinus />,
+              onClick: () => onDeleteRow(rowIndex, render),
+            },
+          ],
+        };
+      }),
+      footer: {
+        pagination: {
+          rowCount: data.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: (evt) => {
+              const { value } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage,
+          },
+          onSelectPage: (evt) => setSelectedPage(evt),
+          small: true,
+        },
+      },
+    };
+    return <Table table={table} />;
+  };
+  return <ManagedTable />;
+};
+
+export const ManagedWithFilterAndSort = () => {
+  /*
+    Mock table data store (real apps should use Redux or similar)
+  */
+  const headings = ['Section', 'Width', 'Height'];
+  let keyedData = [...Array(175).keys()].map((_c, i) => ({
+    Section: i,
+    Width: i * 2,
+    Height: i * 2,
+  }));
+  /*
+        Container component manages state and configuration of table
+      */
+  const TableWithSortAndFilter = () => {
+    const rowsPerPageOptions = [
+      { label: '10 / page', value: 10 },
+      { label: '20 / page', value: 20 },
+      { label: '50 / page', value: 50 },
+      { label: 'Show all', value: 0 },
+    ];
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [selectedPage, setSelectedPage] = useState(1);
+    const [filters, setFilters] = useState({});
+    const [sorts, setSorts] = useState({});
+    useEffect(() => {
+      setSelectedPage(1);
+    }, [filters, sorts]);
+    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
+    const lastVisibleRow =
+      rowsPerPage === 0 ? keyedData.length - 1 : firstVisibleRow + rowsPerPage;
+    const filterAndSortDataRows = (dataRows, filters, sorts) =>
+      dataRows
+        .filter((row) =>
+          Object.keys(filters).every((key) => {
+            return filters[key] === ''
+              ? true
+              : row[key].toString().includes(filters[key]);
+          }),
+        )
+        .sort((a, b) =>
+          Object.entries(sorts)
+            .map(([key, value]) => {
+              switch (value) {
+                case 'up': {
+                  return a[key] - b[key];
+                }
+                case 'down': {
+                  return b[key] - a[key];
+                }
+                default:
+                  return 0;
+              }
+            })
+            .reduce((a, acc) => a || acc, 0),
+        );
+    const dataHeaders = (
+      dataRowsKeys,
+      filters,
+      setFilters,
+      sorts,
+      setSorts,
+    ) => {
+      const dataSortCells = dataRowsKeys.map((key) => {
+        const sort = Object.keys(sorts).includes(key) ? sorts[key] : '';
+        const prettifyHeaderValue = `${key[0].toUpperCase()}${key.slice(1)}`;
+        return {
+          key,
+          value: prettifyHeaderValue,
+          hasSort: true,
+          sort,
+          onSort: () => {
+            const newSort = sort === '' ? 'up' : sort === 'up' ? 'down' : '';
+            setSorts({ ...sorts, [key]: newSort });
+          },
+        };
+      });
+      const dataFilterCells = dataRowsKeys.map((key) => {
+        const filterValue = Object.keys(filters).includes(key)
+          ? filters[key]
+          : '';
+        return {
+          key,
+          value: filterValue,
+          type: 'Input',
+          placeholder: 'Filter',
+          onChange: (ev) => setFilters({ ...filters, [key]: ev.target.value }),
+        };
+      });
+      return { dataSortCells, dataFilterCells };
+    };
+    const { dataSortCells, dataFilterCells } = dataHeaders(
+      headings,
+      filters,
+      setFilters,
+      sorts,
+      setSorts,
+    );
+    const filteredAndSortedData = filterAndSortDataRows(
+      keyedData,
+      filters,
+      sorts,
+    );
+    const dataRows = [
+      ...filteredAndSortedData
+        .slice(firstVisibleRow, lastVisibleRow)
+        .map((dataRow) => {
+          const rowsCells = Object.entries(dataRow).map(([key, value]) => ({
+            key,
+            value,
+            type: 'Input',
+            disabled: true,
+          }));
+          return {
+            cells: rowsCells,
+          };
+        }),
+    ];
+    const table = {
+      headers: [
+        {
+          cells: dataSortCells,
+        },
+        {
+          cells: dataFilterCells,
+        },
+      ],
+      rows: dataRows,
+      footer: {
+        pagination: {
+          rowCount: filteredAndSortedData.length,
+          selectedPage,
+          rowsPerPage: {
+            onChange: (evt) => {
+              const { value } = evt.target;
+              setRowsPerPage(Number(value));
+            },
+            options: rowsPerPageOptions,
+            value: rowsPerPage,
+          },
+          onSelectPage: (evt) => setSelectedPage(evt),
+          small: true,
+        },
+      },
+    };
+    return <Table table={table} />;
+  };
+  return <TableWithSortAndFilter />;
+};
+
+export const OnRowEnter = () => {
+  const [displayText, setDisplayText] = useState('Hover any row!');
+  const rows = [1, 2, 3, 4, 5].map((val) => ({
+    cells: [{ value: `Row ${val}` }, { value: `${val ** 2}` }],
+    onRowMouseEnter: () => setDisplayText(`Hovering row ${val}`),
+    onRowMouseLeave: () => setDisplayText('Not hovering any row...'),
+  }));
+  return (
+    <>
+      <Text>{displayText}</Text>
+      <Table
+        table={{
+          fixedWidth: '100%',
+          headers: [
+            {
+              cells: [{ value: 'Description' }, { value: 'Value' }],
+              onRowMouseEnter: () => setDisplayText(`Hovering header row`),
+              onRowMouseLeave: () => setDisplayText('Not hovering any row...'),
+            },
+          ],
+          rows,
+        }}
+      />
+    </>
+  );
+};
+
+export const OverflowingCells = () => (
+  <Table
+    table={{
+      fixedWidth: '100%',
+      headers: [
+        {
+          cells: [
+            { value: 'Name' },
+            { value: 'Weight (kg)' },
+            { value: 'Energy (kcal / 100g)' },
+            { value: 'Origin' },
+          ],
+        },
+      ],
+      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',
+            },
+          ],
+        },
+        {
+          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',
+            },
+          ],
+        },
+      ],
+    }}
+  />
+);