@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Table/BasicTable.stories.tsx

@@ -1,647 +0,0 @@
-import * as React from 'react';
-
-import {fontSize26} from '../../styles/variables/_font';
-import {sizeFluid} from '../../styles/variables/_size';
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import {getRandomDataVariation} from '../../utils/tokens';
-import {Button} from '../Button';
-import {SimpleButtonDropdown} from '../ButtonDropdown';
-import {CircularLoader} from '../CircularLoader';
-import {SimpleDropdown} from '../Dropdown';
-import {EmptyState} from '../EmptyState';
-import {SearchInput} from '../SearchInput';
-import {BodyMediumBold, BodySmall, SubTitleMedium} from '../Text';
-
-import type {TableProps} from './';
-import {LARGE_TABLE_DATA} from './dummyTableData';
-import {TABLE_DOCS} from './Table.docs';
-import {BasicSingleCell, DateCell, MonogramCell, Table, TableTopBar} from './';
-
-import css from './Table.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Table/Basic Table',
-  ...TABLE_DOCS,
-};
-
-const Dropdown = () => (<BasicSingleCell>
-  <SimpleButtonDropdown
-    size="small"
-    type="ghost"
-    anchorPosition="bottom-end"
-    options={[
-      {
-        iconLeft: 'coffee',
-        key: '1',
-        label: 'Option one',
-      },
-      {
-        iconLeft: 'user',
-        key: '2',
-        label: 'Option two',
-      },
-      {
-        iconLeft: 'face-party',
-        key: '4',
-        label: 'Option three',
-      },
-    ]}
-    iconLeftName="ellipsis"
-  ></SimpleButtonDropdown>
-</BasicSingleCell>);
-
-type BasicTableData = {
-  name: string;
-  email: string;
-};
-
-const BasicTableName = (
-  {
-    data,
-  }: {
-    data: BasicTableData;
-  },
-) => (<BasicSingleCell>
-  <BodySmall color={TEXT_COLORS.secondary}>{data.name}</BodySmall>
-</BasicSingleCell>);
-
-const BasicTableEmail = (
-  {
-    data,
-  }: {
-    data: BasicTableData;
-  },
-) => (<BasicSingleCell>
-  <BodyMediumBold>{data.email}</BodyMediumBold>
-</BasicSingleCell>);
-
-const basicTableHeaders = [
-  {
-    label: 'Name',
-    key: 'name',
-    sortable: false,
-    className: css.smallColumn,
-    render: BasicTableName,
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    sortable: false,
-    render: BasicTableEmail,
-  },
-];
-
-const headers = [
-  {label: 'Name', key: 'name', sortable: true},
-  {label: 'Tel', key: 'phone', sortable: true},
-  {label: 'Notes', key: 'notes', sortable: false},
-  {label: 'Sign', key: 'sign', sortable: false},
-  {label: 'email', key: 'email', sortable: false},
-  {
-    label: '',
-    key: 'email',
-    render: Dropdown,
-  },
-];
-
-type TableData = {
-  address: string;
-  email: string;
-  id: string;
-  name: string;
-  notes: string;
-  phone: string;
-  sign: string;
-};
-
-const SINGLE_PAGE_DATA: TableData[] = LARGE_TABLE_DATA.slice(0, 30);
-const BASIC_TABLE_DATA: TableData[] = LARGE_TABLE_DATA.slice(0, 10);
-
-type ZodiacData = {
-  sign: string;
-};
-const Zodiac = (
-  {
-    data,
-  }: {
-    data: ZodiacData;
-  },
-) => {
-  const map = {
-    taurus: '♉︎',
-    aquarius: '♒︎',
-    gemini: '♊︎',
-    leo: '♌︎',
-  } as const;
-  return (
-    <BasicSingleCell>
-      <div
-        className={css.bgClickableBackground}
-        style={{
-          flex: 1,
-          width: sizeFluid,
-          height: sizeFluid,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          fontSize: fontSize26,
-        }}
-      >
-{ /* @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly taurus: "♉︎"; readonly aquarius: "♒︎"; readonly gemini: "♊︎"; readonly leo: "♌︎"; }'. */}
-        {map[data.sign] ?? map['gemini']}
-      </div>
-    </BasicSingleCell>
-  );
-};
-
-const fancyHeaders = [
-  {
-    label: 'Name',
-    key: 'name',
-    sortable: true,
-    render: (
-      {
-        data,
-        className,
-      }: {
-        data: {
-          name: string;
-        };
-        className: string;
-      },
-    ) => (<MonogramCell className={className} initials={data.name[0]} />),
-  },
-  {label: 'Tel', key: 'phone'},
-  {
-    label: 'Date',
-    key: 'phone',
-// @ts-ignore - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-    render: () => (<DateCell date={new Date(new Date() - 80_000_000 * Math.random() * 30)} />),
-  },
-  {label: 'Notes', key: 'notes', className: css.longCell},
-  {
-    label: 'Sign',
-    key: 'sign',
-    render: Zodiac,
-  },
-  {label: 'email', key: 'email'},
-  {
-    label: '',
-    key: 'email',
-    render: Dropdown,
-  },
-];
-
-const longHeaders = [
-  {
-    label: 'Name',
-    key: 'name',
-    sticky: true,
-    sortable: true,
-    render: (
-      {
-        data,
-        className,
-      }: {
-        data: {
-          name: string;
-        };
-        className: string;
-      },
-    ) => (<MonogramCell className={className} initials={data.name[0]} />),
-    className: css.mediumColumn,
-  },
-  {label: 'Tel', key: 'phone', className: css.mediumColumn},
-  {label: 'Address', key: 'address', className: css.extraLongColumn},
-  {
-    label: 'Date',
-    key: 'phone',
-// @ts-ignore - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-    render: () => (<DateCell date={new Date(new Date() - 80_000_000 * Math.random() * 30)} />),
-    className: css.longColumn,
-  },
-  {label: 'Notes', key: 'notes', className: css.mediumColumn},
-  {label: 'Address', key: 'address', className: css.extraLongColumn},
-  {
-    label: 'Sign',
-    key: 'sign',
-    render: Zodiac,
-    className: css.mediumColumn,
-  },
-  {label: 'Address', key: 'address', className: css.extraLongColumn},
-  {label: 'email', key: 'email', className: css.longColumn},
-  {label: 'Address', key: 'address', className: css.extraLongColumn},
-  {
-    label: '',
-    key: 'email',
-    render: Dropdown,
-  },
-];
-
-export const _SimpleTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    classNames={{
-      wrapper: css.smallTableWrapper,
-    }}
-  />
-</div>);
-
-_SimpleTable.args = {
-  headers: basicTableHeaders,
-  entries: BASIC_TABLE_DATA,
-  borderRadius: '12px',
-};
-
-export const _BasicTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>Basic Data Table</SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    classNames={{
-      wrapper: css.staticTableWrapper,
-    }}
-  />
-</div>);
-
-_BasicTable.args = {
-  headers,
-  entries: SINGLE_PAGE_DATA,
-  borderRadius: '0px 0px 12px 12px',
-};
-
-export const _FancyHeaderTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>Custom Cell Table</SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    classNames={{
-      wrapper: css.staticTableWrapper,
-    }}
-  />
-</div>);
-
-_FancyHeaderTable.args = {
-  headers: fancyHeaders,
-  entries: SINGLE_PAGE_DATA,
-  stickyHeader: true,
-  borderRadius: '0px 0px 12px 12px',
-};
-
-export const _LongTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>Long Data Table</SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    classNames={{
-      wrapper: classify(css.staticTableWrapper),
-    }}
-  />
-</div>);
-
-_LongTable.args = {
-  headers: longHeaders,
-  entries: SINGLE_PAGE_DATA,
-  stickyHeader: true,
-  borderRadius: '0px 0px 12px 12px',
-};
-
-const emptyEntries: Array<never> = [];
-
-export const _LoadingTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>
-        Loading Data Table
-      </SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    classNames={{
-      wrapper: classify(css.staticTableWrapper),
-    }}
-  />
-</div>);
-
-_LoadingTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: true,
-  borderRadius: '0px 0px 12px 12px',
-};
-
-export const _CustomLoadingTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>
-        Custom Loader Table
-      </SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    customLoader={
-      <div className={css.customLoader}>
-        <CircularLoader colorToken="colorTextTertiary" size="large" />
-      </div>
-    }
-    classNames={{
-      wrapper: classify(css.staticTableWrapper),
-    }}
-  />
-</div>);
-
-_CustomLoadingTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: true,
-  borderRadius: '0px 0px 12px 12px',
-};
-
-const emptyText = getRandomDataVariation();
-
-export const _EmptyTable = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => (<div className={css.container}>
-  <TableTopBar>
-    <div className={css.left}>
-      <SubTitleMedium className={css.title}>Empty Table</SubTitleMedium>
-      <SearchInput />
-    </div>
-    <div className={css.right}>
-      <Button
-        type="ghost"
-        iconLeftName="bars-filter"
-        classNames={{wrapper: css.filterBtn}}
-        ariaLabel="Filter"
-      ></Button>
-      <SimpleDropdown
-        placeholder="Select Options"
-        options={[
-          {
-            iconLeft: 'coffee',
-            key: '1',
-            label: 'Option one',
-          },
-          {
-            iconLeft: 'user',
-            key: '2',
-            label: 'Option two',
-          },
-          {
-            iconLeft: 'face-party',
-            key: '4',
-            label: 'Option three',
-          },
-        ]}
-      />
-      <Button classNames={{wrapper: css.button}}>Button Text</Button>
-    </div>
-  </TableTopBar>
-  <Table
-    {...args}
-    headers={args.headers}
-    entries={args.entries}
-    stickyHeader={true}
-    classNames={{
-      wrapper: classify(css.staticTableWrapper),
-    }}
-    emptyText={
-      <EmptyState
-        classNames={{wrapper: css.emptyStateWrapper}}
-        description={emptyText.description}
-        imageVariant="file"
-        title={emptyText.title}
-      >
-        <Button>Button Text</Button>
-      </EmptyState>
-    }
-  />
-</div>);
-
-_EmptyTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: false,
-  borderRadius: '0px 0px 12px 12px',
-};