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

package/lib/components/Table/DefaultTableHeader.tsx

@@ -1,244 +0,0 @@
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
-import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
-import {Checkbox} from '../Checkbox';
-import {Icon} from '../Icon';
-import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
-
-import {BasicRow} from './DefaultRow';
-import type {SortDirection} from './hooks';
-import type {GenericObject} from './Table';
-
-import css from './Table.module.css';
-
-
-export type GenericHeaderItem<T extends GenericObject, U extends GenericObject> = {
-  label: React.ReactNode;
-  key: keyof T;
-  className?: string;
-  filterIcon?: React.ReactNode;
-  filtered?: boolean;
-  subtext?: string;
-  sortable?: boolean;
-  headerIconClassName?: string;
-  sticky?: boolean;
-  render?: React.ComponentType<{
-    data: T;
-    extras?: U;
-    className?: string;
-    selected?: boolean;
-    disabled?: boolean;
-  }>;
-};
-
-// @ts-ignore - TS2344 - Type 'T' does not satisfy the constraint 'GenericObject'.
-export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];
-
-export const BasicHeadCell: ClassNameComponent<'th'> = makeClassNameComponent(
-  css.defaultHeaderCell,
-  'th',
-);
-
-export const BasicTableHead: ClassNameComponent<'thead'> =
-  makeClassNameComponent(css.defaultTableHead, 'thead');
-
-export type TableHeaderProps<T, U> = {
-  className?: string;
-  tableHeaderClassName?: string;
-  sortable?: boolean;
-  columns: GenericHeaderItems<T, U>;
-  handleSortClick?: (sortKey: keyof T) => unknown;
-  sortKey?: keyof T;
-  sortDirection?: SortDirection;
-  checked?: 'true' | 'false' | 'mixed';
-  handleCheckboxClick?: (
-    arg1: {
-      value: string;
-      checked: boolean;
-    },
-  ) => unknown;
-  disabled?: boolean;
-  stickyHeader?: boolean;
-};
-
-const SortIcon = ({
-  sortDirection,
-  color,
-  className,
-}: {
-  sortDirection: SortDirection;
-  className: string;
-  color: ColorTypes;
-}) => {
-  if (sortDirection === 'original') {
-    return (
-      <Icon
-        color={color}
-        name="caret-down"
-        size="small"
-        type="solid"
-        className={className}
-      />
-    );
-  } else if (sortDirection === 'asc') {
-    return (
-      <Icon
-        color={color}
-        name="arrow-up"
-        size="small"
-        type="regular"
-        className={className}
-      />
-    );
-  } else if (sortDirection === 'desc') {
-    return (
-      <Icon
-        color={color}
-        name="arrow-down"
-        size="small"
-        type="regular"
-        className={className}
-      />
-    );
-  }
-};
-
-export function DefaultTableHeader<T extends GenericObject, U extends GenericObject>(props: TableHeaderProps<T, U>) {
-  const {
-    className,
-    sortable = false,
-    columns,
-    handleSortClick,
-    sortKey,
-    sortDirection = 'original',
-    handleCheckboxClick,
-    checked,
-    disabled,
-    stickyHeader,
-  } = props;
-
-  const tableHeaderCells = () => (
-    <>
-      {columns.map((columnData, index) => {
-        const {
-          key,
-          label,
-          subtext,
-          filterIcon,
-          filtered,
-          className,
-          sticky,
-          sortable: columnSortable = false,
-        } = columnData;
-        let headerClassName;
-        const filterable = Boolean(filterIcon);
-        if ((sortable && columnSortable) || filterable) {
-          headerClassName = classify(
-            css.defaultHeaderCellSortable,
-            {
-              [css.filtered]: filtered,
-              [css.stickyHeaderCell]: sticky,
-            },
-            css[sortDirection],
-            className,
-          );
-        } else {
-          headerClassName = classify(className, {
-            [css.stickyHeaderCell]: sticky,
-          });
-        }
-
-        const headCellClickHandler = () => {
-          if (sortable && columnSortable && handleSortClick) {
-            handleSortClick(key);
-          }
-        };
-        let columnSortDirection = 'original';
-
-        if (sortKey === key) {
-          columnSortDirection = sortDirection;
-        }
-
-        return (
-          <BasicHeadCell
-            className={classify(
-              {
-                [css.selectedHeader]:
-                  sortKey === key && columnSortDirection !== 'original',
-              },
-              headerClassName,
-            )}
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            scope="col"
-            onClick={headCellClickHandler}
-          >
-            <div className={classify(css.labelContents)}>
-              <div className={css.labelContainer}>
-                <SubTitleExtraSmall
-                  color={TEXT_COLORS.secondary}
-                  className={classify({
-                    [css.selectedHeader]:
-                      sortKey === key && columnSortDirection !== 'original',
-                  })}
-                >
-                  {label}
-                </SubTitleExtraSmall>
-                <span className={css.headerSubtext}>{subtext && subtext}</span>
-              </div>
-              {(sortable || filterIcon != null) && (
-                <div className={css.headerIconContainer}>
-                  {columnSortable && (
-// @ts-ignore - TS2786 - 'SortIcon' cannot be used as a JSX component.
-                    <SortIcon
-                      color={TEXT_COLORS.secondary}
-                      className={classify(css.sortArrow, {
-                        [css.selectedSortArrow]: sortKey === key,
-                      })}
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'SortDirection'.
-                      sortDirection={columnSortDirection}
-                    />
-                  )}
-                  {filterIcon != null && (
-                    <div className={css.filterIcon}>{filterIcon}</div>
-                  )}
-                </div>
-              )}
-            </div>
-          </BasicHeadCell>
-        );
-      })}
-    </>
-  );
-
-  return (
-    <BasicTableHead
-      className={classify(
-        css.tableHeaderSortable,
-        {[css.stickyHeader]: stickyHeader},
-        className,
-      )}
-    >
-      <BasicRow className={css.defaultHeaderRow}>
-        {handleCheckboxClick && (
-          <BasicHeadCell scope="col">
-            <div className={css.checkbox}>
-              <Checkbox
-                value="all"
-                checked={checked === 'true' ? true : false}
-                indeterminate={checked === 'mixed'}
-                onChange={handleCheckboxClick}
-                disabled={disabled}
-                ariaLabel="Select all rows"
-              />
-            </div>
-          </BasicHeadCell>
-        )}
-        {tableHeaderCells()}
-      </BasicRow>
-    </BasicTableHead>
-  );
-}

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

@@ -1,390 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-import {ClickableIcon, SemanticIcon} from '../Icon';
-import {Input} from '../Input';
-import {BodyMedium, SubTitleMedium} from '../Text';
-import {
-  Toast,
-  TOAST_SEMANTIC,
-  toastApi,
-  ToastBody,
-  ToastContainer,
-  ToastTitle,
-} from '../Toast';
-import {Truncate} from '../Truncate';
-
-import type {TableProps} from './';
-import {LARGE_TABLE_DATA} from './dummyTableData';
-import {Table} from './Table';
-import {TABLE_DOCS} from './Table.docs';
-import {BasicSingleCell, TableTopBar} from './';
-
-import css from './Table.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Table/Inline Edit',
-  argTypes: TABLE_DOCS.argTypes,
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Table component.',
-      description: {
-        component: `
-### Usage
-
-\`\`\`jsx
-const ToastTemplate = (): React.ReactNode => (
-  <Toast
-    semantic={TOAST_SEMANTIC.success}
-  >
-    <ToastTitle>
-      Contact details updated
-    </ToastTitle>
-  </Toast>
-);
-
-const RenderCell = ({data, className, selectEditId, inputRef}) => {
-  const [inputValue, setInputValue] = React.useState(data.notes);
-
-  return (
-    <BasicSingleCell className={classify(css.inputCell, className)}>
-      {selectEditId === data.id ? (
-        <Input
-          ref={inputRef}
-          size="small"
-          onChange={(e) => {
-            const value = e.target.value;
-            setInputValue(value);
-          }}
-          value={inputValue}
-        />
-      ) : (
-        <BodyMedium>
-          <Truncate>{data.notes}</Truncate>
-        </BodyMedium>
-      )}
-    </BasicSingleCell>
-  );
-};
-
-const ENTRIES = LARGE_TABLE_DATA.slice(0, 20);
-
-export const ContactsPage = (
-  args: TableProps<{[key: string]: mixed}, {[key: string]: mixed}>,
-): React.ReactNode => {
-  const inputRef = React.useRef(null);
-  const [isLoading] = React.useState(false);
-  const [selectEditId, setSelectEditId] = React.useState(null);
-
-  const [tableEntries, setTableEntries] = React.useState(ENTRIES);
-
-  const handleSave = (id: string, name: string) => {
-    // Access the input value here using the inputRef
-    const inputValue = inputRef.current?.value || '';
-    const updatedTableEntries = [...tableEntries];
-    const index = updatedTableEntries.findIndex((item) => item.id === id);
-    updatedTableEntries[index].notes = inputValue;
-    setTableEntries(updatedTableEntries);
-    setSelectEditId(null);
-    toastApi.show(<ToastTemplate />, {
-      timeout: 3000,
-      position: 'bottomLeft',
-    });
-  };
-
-  return (
-    <div>
-      <TableTopBar>
-        <div className={css.left}>
-          <SemanticIcon
-            name="address-book"
-            classNames={{wrapper: css.semanticIconWrapper}}
-            size="small"
-          ></SemanticIcon>
-          <SubTitleMedium className={css.title}>Contacts</SubTitleMedium>
-        </div>
-      </TableTopBar>
-      <Table
-        {...args}
-        headers={args.headers}
-        idName="id"
-        isLoading={isLoading}
-        stickyHeader={true}
-        borderRadius="0 0 12px 12px"
-        entries={tableEntries}
-        stickyHeader={true}
-        classNames={{
-          wrapper: classify(css.tableWrapper),
-        }}
-        headers={[
-          {
-            label: 'Name',
-            key: 'name',
-            sortable: true,
-            className: css.mediumColumn,
-          },
-          {
-            label: 'Sign',
-            key: 'sign',
-            sortable: false,
-            className: css.mediumColumn,
-          },
-          {
-            label: 'Notes',
-            key: 'notes',
-            sortable: false,
-            className: css.mediumColumn,
-            render: ({data, className}) => (
-              <RenderCell
-                data={data}
-                className={className}
-                selectEditId={selectEditId}
-                inputRef={inputRef}
-              />
-            ),
-          },
-          {
-            label: '',
-            key: 'id',
-            sortable: false,
-            className: css.mediumColumn,
-            render: ({data, className}) => (
-              <BasicSingleCell className={classify(css.rightColumn, className)}>
-                {selectEditId === data.id ? (
-                  <div className={css.editOptions}>
-                    <ClickableIcon
-                      name="check"
-                      size="small"
-                      color="success"
-                      onClick={() => {
-                        handleSave(data.id, data.name);
-                      }}
-                    />
-                    <ClickableIcon
-                      name="close"
-                      size="small"
-                      color="danger"
-                      onClick={() => {
-                        setSelectEditId(null);
-                      }}
-                    />
-                  </div>
-                ) : (
-                  <ClickableIcon
-                    name="pencil"
-                    size="small"
-                    type="solid"
-                    color="secondary"
-                    onClick={() => {
-                      setSelectEditId(data.id);
-                    }}
-                  />
-                )}
-              </BasicSingleCell>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Table/Table.jsx',
-    },
-  },
-};
-
-const ToastTemplate = (
-  {
-    name,
-  }: {
-    name?: string | null | undefined;
-  },
-) => (<Toast
-  semantic={TOAST_SEMANTIC.success}
-  initialFocus={-1}
-  time="Today 4:00pm"
-  classNames={{time: css.colorSecondary}}
->
-  <ToastTitle className={css.colorPrimary}>
-    Contact details updated
-  </ToastTitle>
-  <ToastBody className={css.colorSecondary}>{`${
-    name || ''
-  }'s Contact details updated successfully`}</ToastBody>
-</Toast>);
-
-const RenderCell = ({
-// @ts-ignore - TS7031 - Binding element 'data' implicitly has an 'any' type.
-  data,
-// @ts-ignore - TS7031 - Binding element 'className' implicitly has an 'any' type.
-  className,
-// @ts-ignore - TS7031 - Binding element 'selectEditId' implicitly has an 'any' type.
-  selectEditId,
-// @ts-ignore - TS7031 - Binding element 'inputRef' implicitly has an 'any' type.
-  inputRef,
-// @ts-ignore - TS7031 - Binding element 'handleSave' implicitly has an 'any' type.
-  handleSave,
-// @ts-ignore - TS7031 - Binding element 'setSelectEditId' implicitly has an 'any' type.
-  setSelectEditId,
-// @ts-ignore - TS7031 - Binding element 'disabled' implicitly has an 'any' type.
-  disabled,
-}) => {
-  const [inputValue, setInputValue] = React.useState(data.notes);
-
-  return (
-    <BasicSingleCell className={classify(css.inputCell, className)}>
-      {selectEditId === data.id ? (
-        <Input
-          ref={inputRef}
-          size="small"
-          onChange={(e) => {
-            const value = e.target.value;
-            setInputValue(value);
-          }}
-          value={inputValue}
-        />
-      ) : (
-        <BodyMedium>
-          <Truncate>{data.notes}</Truncate>
-        </BodyMedium>
-      )}
-      <div className={classify(css.rightColumn, className)}>
-        {selectEditId === data.id ? (
-          <div className={css.editOptions}>
-            <ClickableIcon
-              name="check"
-              size="small"
-              color="success"
-              onClick={() => {
-                handleSave(data.id, data.name);
-              }}
-            />
-            <ClickableIcon
-              name="close"
-              size="small"
-              color="danger"
-              onClick={() => {
-                setSelectEditId(null);
-              }}
-            />
-          </div>
-        ) : (
-          <ClickableIcon
-            name="pencil"
-            size="small"
-            type="solid"
-            color="secondary"
-            disabled={disabled}
-            onClick={() => {
-              setSelectEditId(data.id);
-            }}
-          />
-        )}
-      </div>
-    </BasicSingleCell>
-  );
-};
-
-const ENTRIES = LARGE_TABLE_DATA.slice(0, 20);
-
-export const _InlineEdit = (
-  args: TableProps<{
-    [key: string]: unknown;
-  }, {
-    [key: string]: unknown;
-  }>,
-) => {
-  const inputRef = React.useRef(null);
-  const [isLoading] = React.useState(false);
-  const [selectEditId, setSelectEditId] = React.useState<any>(null);
-
-  const [tableEntries, setTableEntries] = React.useState(ENTRIES);
-
-  const handleSave = (id: string, name: string) => {
-    // Access the input value here using the inputValue state
-// @ts-ignore - TS2339 - Property 'value' does not exist on type 'never'.
-    const inputValue = inputRef.current?.value || '';
-    const updatedTableEntries = [...tableEntries];
-    const index = updatedTableEntries.findIndex((item) => item.id === id);
-// @ts-ignore - TS2540 - Cannot assign to 'notes' because it is a read-only property.
-    updatedTableEntries[index].notes = inputValue;
-    setTableEntries(updatedTableEntries);
-    setSelectEditId(null);
-    toastApi.show(<ToastTemplate name={name} />, {
-      timeout: 3000,
-      position: 'bottomLeft',
-    });
-  };
-
-  return (
-    <div>
-      <ToastContainer />
-      <TableTopBar>
-        <div className={css.left}>
-          <SemanticIcon
-            name="address-book"
-            classNames={{wrapper: css.semanticIconWrapper}}
-            size="small"
-          ></SemanticIcon>
-          <SubTitleMedium className={css.title}>Contacts</SubTitleMedium>
-        </div>
-      </TableTopBar>
-      <Table
-        {...args}
-        headers={args.headers}
-        idName="id"
-        isLoading={isLoading}
-        stickyHeader={true}
-        borderRadius="0 0 12px 12px"
-        entries={tableEntries}
-// @ts-ignore - TS17001 - JSX elements cannot have multiple attributes with the same name.
-        stickyHeader={true}
-        classNames={{
-          wrapper: classify(css.tableWrapper),
-        }}
-        headers={[
-          {
-            label: 'Name',
-            key: 'name',
-            sortable: true,
-            className: css.mediumColumn,
-          },
-          {
-            label: 'Sign',
-            key: 'sign',
-            sortable: false,
-            className: css.mediumColumn,
-          },
-          {
-            label: 'Notes',
-            key: 'notes',
-            sortable: false,
-            className: css.mediumColumn,
-            render: ({data, className, disabled}) => (
-              <RenderCell
-                data={data}
-                className={className}
-                selectEditId={selectEditId}
-                inputRef={inputRef}
-                handleSave={handleSave}
-                setSelectEditId={setSelectEditId}
-                disabled={disabled}
-              />
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-_InlineEdit.args = {
-  borderRadius: '0px',
-};