@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/Table/Table.stories.tsx

@@ -1,568 +0,0 @@
-/* eslint-disable */
-import React from 'react'
-import type { Meta } from '@storybook/react'
-
-import Table, { useSelection } from './Table'
-import type { TableColumns, TableProps } from './Table.types'
-import useSortBy from './useSortBy'
-
-import { TABLE_COLUMNS, TABLE_ROWS } from './Table.fixtures'
-import type { RowFixture } from './Table.fixtures'
-
-import { Button } from 'components/Button'
-import { Text } from 'components/Text'
-import { Switch } from 'components/Switch'
-
-export default {
-  title: 'Components/Table',
-  component: Table,
-  argTypes: {
-    scale: {
-      control: {
-        type: 'select',
-        options: ['default', 'small', 'large'],
-      },
-    },
-  },
-  parameters: {},
-} as Meta
-
-export function Playground(args: TableProps): JSX.Element {
-  return (
-    <div className="p-4 bg-neutral-white">
-      <Table {...args}>
-        <Table.Caption>
-          <Text variant="body-bold">This is the Table Caption, you can put anything here</Text>
-        </Table.Caption>
-
-        <Table.Head>
-          <Table.Row>
-            <Table.HeadCell># Number</Table.HeadCell>
-            <Table.HeadCell className="w-60">Company</Table.HeadCell>
-            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
-          </Table.Row>
-        </Table.Head>
-
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell format="number">#23992919-1</Table.Cell>
-            <Table.Cell>Modal X 23</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell format="number">#23992919-1</Table.Cell>
-            <Table.Cell>Modal X 23</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell format="number">#23992919-1</Table.Cell>
-            <Table.Cell>Modal X 23</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
-
-        <Table.Foot>
-          <Table.Row>
-            <Table.HeadCell># Number</Table.HeadCell>
-            <Table.HeadCell className="w-60">Company</Table.HeadCell>
-            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
-          </Table.Row>
-        </Table.Foot>
-      </Table>
-    </div>
-  )
-}
-
-Playground.args = {
-  scale: 'default',
-}
-
-export function WithSorting(args: TableProps): JSX.Element {
-  const { tableData, columnData, sortByColumn } = useSortBy(TABLE_COLUMNS, TABLE_ROWS)
-
-  return (
-    <div className="p-4 bg-neutral-white">
-      <Table {...args}>
-        <Table.Head>
-          <Table.Row>
-            {columnData.map((column) => (
-              <Table.HeadCell key={column.key} onClick={() => sortByColumn(column)}>
-                {column.title} {column.isSortable && <Table.SortHandle order={column.order} />}
-              </Table.HeadCell>
-            ))}
-          </Table.Row>
-        </Table.Head>
-
-        <Table.Body>
-          {tableData.map((cell) => (
-            <Table.Row key={cell.value}>
-              {Object.keys(cell)
-                .slice(1)
-                .map((cellKey, index) => (
-                  <Table.Cell key={index}>{cell[cellKey]}</Table.Cell>
-                ))}
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  )
-}
-
-WithSorting.args = {
-  scale: 'default',
-}
-
-export function WithColumnPicker(args: TableProps): JSX.Element {
-  const ID_COLUMNS: TableColumns<RowFixture> = [
-    {
-      title: 'Ref',
-      option: 'Reference',
-      key: 'ref',
-    },
-    {
-      title: 'Seq',
-      option: 'Sequence',
-      key: 'value',
-    },
-  ]
-
-  const [idCol, setIdCol] = React.useState(ID_COLUMNS[0])
-
-  return (
-    <Table {...args}>
-      <Table.Head>
-        <Table.Row>
-          <Table.HeadCell>
-            {idCol.title}
-            <Table.Picker
-              value={idCol}
-              onChange={setIdCol}
-              options={ID_COLUMNS}
-              title="Pick an identifier column"
-            />
-          </Table.HeadCell>
-          <Table.HeadCell>Product Name</Table.HeadCell>
-          <Table.HeadCell>Price</Table.HeadCell>
-          <Table.HeadCell>Owner</Table.HeadCell>
-          <Table.HeadCell>
-            Release Date
-            <Table.Picker trigger={(expanded) => (expanded ? 'close' : 'open')} align="end">
-              <Table.Picker.Item checked option={{ title: 'Release Date', key: 'release-date' }} />
-              <Table.Picker.Item disabled>Example of custom item</Table.Picker.Item>
-            </Table.Picker>
-          </Table.HeadCell>
-        </Table.Row>
-      </Table.Head>
-
-      <Table.Body>
-        {TABLE_ROWS.map((entry) => (
-          <Table.Row>
-            <Table.Cell>{entry[idCol.key]}</Table.Cell>
-            <Table.Cell>{entry.product}</Table.Cell>
-            <Table.Cell>${new Intl.NumberFormat().format(Number(entry.price))}</Table.Cell>
-            <Table.Cell>{entry.owner}</Table.Cell>
-            <Table.Cell>{entry['release-date']}</Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  )
-}
-
-WithColumnPicker.args = {
-  scale: 'default',
-}
-
-WithColumnPicker.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Table.Picker />\`
-
-This component renders a \`Dropdown\` menu, making it possible for users to select what column should be visible at the moment.
-
-\`\`\`jsx
-interface IMyRow {
-  uuid: string
-  ext_id: string
-  ref: number
-  // other properties...
-}
-
-/* Make sure to import TableColumns generic type if you're using TypeScript */
-const FIRST_COLUMNS: TableColumns<IMyRow> = [
-  { key: 'uuid',   title: 'Id',      option: 'Identifier' },
-  { key: 'ext_id', title: 'Ext. Id', option: 'External Id' },
-  { key: 'ref',    title: 'Ref',     option: 'Reference' },
-]
-
-function MyAmazingTable() {
-  const [pickedColumn, setPickedColumn] = React.useState(FIRST_COLUMNS[0])
-
-  return (
-    <Table>
-      <Table.Head>
-        <Table.Row>
-          <Table.HeadCell>
-            {/* Don't forget to render the title of the current picked column */}
-            {pickedColumn.title}
-
-            <Table.Picker
-              value={pickedColumn}
-              onChange={(option) => setPickedColumn(option)}
-              options={FIRST_COLUMNS}
-              title="Pick an identifier column"
-            />
-          </Table.HeadCell>
-        </Table.Row>
-      </Table.Head>
-
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            {/* The \`key\` property is the accessor of your data interface */}
-            {entry[pickedColumn.key]}
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-\`\`\`
-
-## Props
-
-| Prop     | Type                                  | Default        | Description                                    |
-|----------|---------------------------------------|----------------|------------------------------------------------|
-| value    | \`TableColumn<T>\`                    | \`undefined\`  | Current picked column                          |
-| onChange | \`(column: TableColumn<T>) => void\`  | \`undefined\`  | Callback that's invoked with the picked column |
-| options  | \`TableColumns<T>\`                   | \`undefined\`  | List of possible columns to pick               |
-        `,
-    },
-  },
-
-  source: {
-    type: 'code',
-  },
-}
-
-export function WithRowSelection(args: TableProps): JSX.Element {
-  return (
-    <div className="p-4 bg-neutral-white">
-      <Table {...args} selection={{ onChange: console.log }}>
-        <Table.Caption>
-          <Table.Selection.Actions
-            buttons={[
-              ({ values }) => (
-                <Button onClick={() => console.log(values)}>Remove ({values.length})</Button>
-              ),
-            ]}
-          >
-            <Text variant="caption" italic>
-              Please select at least 1 row
-            </Text>
-          </Table.Selection.Actions>
-        </Table.Caption>
-
-        <Table.Head>
-          <Table.Row>
-            <Table.Selection.HeadCell />
-            {TABLE_COLUMNS.map((column) => (
-              <Table.HeadCell key={column.key}>{column.title}</Table.HeadCell>
-            ))}
-          </Table.Row>
-        </Table.Head>
-
-        <Table.Body>
-          {TABLE_ROWS.map((row) => (
-            <Table.Row key={row.value}>
-              <Table.Selection.Cell value={row} />
-              {Object.keys(row)
-                .slice(1, 6)
-                .map((key, index) => (
-                  <Table.Cell key={index}>{row[key]}</Table.Cell>
-                ))}
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  )
-}
-
-WithRowSelection.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Table.Selection.Cell />\`
-
-This component renders a styled \`<td>\` with a checkbox/radio button, depending if the selection is multiple or not.
-
-\`\`\`jsx
-<Table.Row>
-  <Table.Selection.Cell value={row} />
-  <Tabel.Cell>{row.name}</Table.Cell>
-  <Tabel.Cell>{row.price}</Table.Cell>
-</Table.Row>
-\`\`\`
-
-It expects that the object of each row passed to prop \`value\` of \`Table.Selection.Cell\`, contains a property called \`value\`, which will be used to **uniquely identify** that row in the table.
-
-#### \`<Table.Selection.HeadCell />\`
-
-If you want the *Select All* behavior in the table header, it renders a \`<th>\` and the input affects all rows. Doesn't show up if selection isn't multiple.
-
-\`\`\`jsx
-<Table.Row>
-  <Table.Selection.HeadCell />
-  <Tabel.HeadCell>Name</Table.HeadCell>
-  <Tabel.HeadCell>Price</Table.HeadCell>
-</Table.Row>
-\`\`\`
-
-
-#### \`<Table.Selection.Actions />\`
-
-Use it to add buttons for your *Bulk Actions*, always render it inside of a \`<Table.Caption>\`.
-
-By design, it's always right-aligned, comes with a _cancel_ link as last action, and only shows when there's at least 1 selected row.
-It accepts a prop \`buttons\`, an array of functions that receive the current selected rows inside \`values\` parameter, so you can return your button to be rendered.
-
-It also accepts \`children\`, serving as a placeholder for when there are no selected rows.
-
-\`\`\`jsx
-<Table.Caption>
-  <Table.Selection.Actions buttons={[ ({ values }) => <Button onClick={() => remove(values)}>Remove</Button> ]}>
-    Please select at least 1 row
-  </Table.Selection.Actions>
-</Table.Caption>
-\`\`\`
-`,
-    },
-  },
-}
-
-WithRowSelection.args = {
-  scale: 'default',
-}
-
-interface MyRow {
-  rowId: number
-  _type: string
-}
-
-function MyCustomSelection() {
-  const { values } = useSelection<MyRow>()
-
-  return (
-    <div style={{ background: 'lightgray', padding: 8, width: '100%' }}>
-      <Button variant="primary" onClick={() => console.log(values)}>
-        Action ({values.length})
-      </Button>
-    </div>
-  )
-}
-
-const CUSTOM_SELECTION_ROWS = TABLE_ROWS.map((row) => {
-  const advancedRow = { ...row }
-  advancedRow._type = 'myRow'
-  advancedRow.rowId = advancedRow.value
-  return advancedRow
-})
-
-export function WithCustomRowSelection(): JSX.Element {
-  return (
-    <div className="p-4 bg-neutral-white">
-      <Table<MyRow>
-        selection={{
-          multiple: false,
-          adapters: {
-            myRow: {
-              getKey(row) {
-                return row.rowId
-              },
-            },
-          },
-        }}
-      >
-        <Table.Caption>
-          <MyCustomSelection />
-        </Table.Caption>
-
-        <Table.Head>
-          <Table.Row>
-            <Table.Cell />
-            {TABLE_COLUMNS.map((column) => (
-              <Table.HeadCell key={column.key}>{column.title}</Table.HeadCell>
-            ))}
-            <Table.Cell />
-          </Table.Row>
-        </Table.Head>
-
-        <Table.Body>
-          {CUSTOM_SELECTION_ROWS.map((row) => (
-            <Table.Row key={row.value}>
-              <Table.Selection.Cell value={row}>
-                {({ selected, toggle }) => <Switch onToggle={toggle} active={selected} />}
-              </Table.Selection.Cell>
-              {Object.keys(row)
-                .slice(1, 6)
-                .map((key, index) => (
-                  <Table.Cell key={index}>{row[key]}</Table.Cell>
-                ))}
-              <Table.Selection.Cell value={row} />
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  )
-}
-
-WithCustomRowSelection.parameters = {
-  docs: {
-    description: {
-      story: `
-The \`<Table>\` component accepts a \`selection\` prop, an object for the \`useSelectable\` hook, where you can specify if it's multiple or single, register an \`onChange\` callback, set your adapters, and even initially selected rows.
-
-**\`selection\`**
-
-| Prop     | Type                                         | Default        | Description                                                                                                                                                       |
-|----------|----------------------------------------------|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| multiple | \`boolean\`                                  | \`true\`       | If set to \`false\` renders \`radio\` inputs and will only have one selected row at maximum                                                                       |
-| onChange | \`(selected: T[]) => void\`                  | \`undefined\`  | Callback that's invoked with the current selected rows for every change                                                                                           |
-| selected | \`T[]\`                                      | \`[]\`         | Sets the initial selected rows                                                                                                                                    |
-| adapters | \`Record<T['_type'], SelectableAdapter<T>>\` | \`undefined\`  | If your data interface doesn't have a \`value\` property, you can provide an adapter, implementing a \`getKey\` function that returns your id. See example below. |
-
-\`\`\`jsx
-// Example of selection.adapters usage
-
-interface IMyRow {
-  myKeyName: string
-  _type: string
-}
-
-<Table<IMyRow>
-  selection={{
-    adapters: {
-      myTypeName: {
-        getKey(row) {
-          return row.myKeyName
-        }
-      }
-    }
-  }}
->
-  <Table.Selection.Cell value={{ _type: 'myTypeName', myKeyName: 'a1' }}>
-  <Table.Selection.Cell value={{ _type: 'myTypeName', myKeyName: 'b2' }}>
-</Table>
-\`\`\`
-
-### \`useSelection\` hook
-
-If you need to fully customize the Actions container (say a colored background, always-visible, with left-aligned buttons, no _cancel_ link, etc.), you can use the \`useSelection()\` hook to build a custom \`Table.Selection.Actions\`.
-It returns \`values\`, an array of the current selected rows, and \`clear\`, a function to unselect all rows.
-
-\`\`\`jsx
-interface IMyRow {
-  myKeyName: string
-  _type: string
-}
-
-function MyCustomActions() {
-  const { values } = useSelection<IMyRow>()
-
-  return (
-    <ColoredBackground>
-      <Button onClick={() => remove(values)}>Remove ({values.length})</Button>
-    </ColoredBackground>
-  )
-}
-
-<Table>
-  <Table.Caption>
-    <MyCustomActions />
-  </Table.Caption>
-</Table>
-\`\`\`
-
-### \`Table.Selection.Cell\` children
-
-Also you may send a function as \`children\` to \`<Table.Selection.Cell />\` in order to render different form controls.
-This function is passed a boolean \`selected\` and a function \`toggle\`.
-
-\`\`\`jsx
-<Table.Selection.Cell value={row}>
-  {({ selected, toggle }) => <Switch onToggle={toggle} active={selected} />}
-</Table.Selection.Cell>
-\`\`\`
-`,
-    },
-  },
-}
-
-export function WithExpandableRow(args: TableProps): JSX.Element {
-  const leading = (expanded: boolean) => {
-    if (expanded) {
-      return <div style={{ fontWeight: 'bold' }}>Open</div>
-    }
-    return <div style={{ fontWeight: 'bold' }}>Closed</div>
-  }
-
-  return (
-    <div className="p-4 bg-neutral-white">
-      <Table {...args}>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeadCell />
-            <Table.HeadCell>reference</Table.HeadCell>
-            <Table.HeadCell>product</Table.HeadCell>
-            <Table.HeadCell>price</Table.HeadCell>
-          </Table.Row>
-        </Table.Head>
-
-        <Table.Body>
-          <Table.ExpandableRow
-            leading={leading}
-            expandableContent={<div>Forced expanded with custom leading</div>}
-            expanded
-          >
-            <Table.Cell>123456</Table.Cell>
-            <Table.Cell>Body 1</Table.Cell>
-            <Table.Cell>12345</Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow
-            leading={leading}
-            expandableContent={<div>Initial expanded row with custom leading</div>}
-            initialExpanded
-          >
-            <Table.Cell>123456</Table.Cell>
-            <Table.Cell>Body 2</Table.Cell>
-            <Table.Cell>12345</Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow expandableContent={<div>Expandable row</div>}>
-            <Table.Cell>123456</Table.Cell>
-            <Table.Cell>Body 3</Table.Cell>
-            <Table.Cell>12345</Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow expanded>
-            <Table.Cell>123456</Table.Cell>
-            <Table.Cell>Body 5</Table.Cell>
-            <Table.Cell>12345</Table.Cell>
-          </Table.ExpandableRow>
-        </Table.Body>
-      </Table>
-    </div>
-  )
-}
-
-WithExpandableRow.args = {
-  scale: 'default',
-}