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

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

@@ -1,759 +0,0 @@
-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 ColspanWithWidths = Template.bind({});
-ColspanWithWidths.args = { table: storyData.tableColspanWidths };
-
-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 InfiniteScrollFixedHeight = Template.bind({});
-InfiniteScrollFixedHeight.args = {
-  table: storyData.tableInfiniteScroll,
-};
-
-export const InfiniteScrollFullHeight = Template.bind({});
-InfiniteScrollFullHeight.args = {
-  table: storyData.tableInfiniteScrollFullHeight,
-};
-InfiniteScrollFullHeight.decorators = [
-  (Story) => (
-    <div style={{ height: 800 }}>
-      <Story />
-    </div>
-  ),
-];
-
-export const InfiniteScrollShort = Template.bind({});
-InfiniteScrollShort.args = {
-  table: storyData.tableInfiniteScrollShort,
-};
-InfiniteScrollShort.parameters = {
-  docs: {
-    description: {
-      story:
-        'If a `maxHeight` is set, the table should only fill that height if it needs to.',
-    },
-  },
-};
-
-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 = Template.bind({});
-OverflowingCells.args = { table: storyData.tableOverflowing };