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

package/lib/components/Table/hooks.ts

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import get from 'lodash/get';
-import sortBy from 'lodash/sortBy';
-
-import type {GenericObject} from './Table';
-
-
-export type SortDirection = 'asc' | 'desc' | 'original';
-
-export function useSortableEntries<T extends GenericObject>(
-  entries: Array<T>,
-  idName: keyof T,
-  {
-    defaultSortKey = 'id',
-    defaultSortDirection = 'original',
-    onSort,
-    enableInternalSorting = true,
-  }: {
-    defaultSortKey?: keyof T;
-    defaultSortDirection?: SortDirection;
-    onSort?: (sortKey: string, sortDirection: SortDirection) => unknown;
-    enableInternalSorting?: boolean;
-  },
-): {
-  handleSortClick: (sortKey: keyof T) => unknown;
-  sortDirection: SortDirection;
-  sortKey?: string;
-  sortedEntries: T[];
-  sortedKeys: keyof T[];
-} {
-  const [sortKey, setSortKey] = React.useState(defaultSortKey);
-  const [sortDirection, setSortDirection] =
-    React.useState<SortDirection>(defaultSortDirection);
-
-  const getNextDirection = (direction: SortDirection): SortDirection => {
-    switch (direction) {
-    case 'original':
-      return 'desc';
-    case 'asc':
-      return 'original';
-    case 'desc':
-      return 'asc';
-    default:
-      return 'original';
-    }
-  };
-  const advanceSortDirection = (dir: SortDirection) => {
-    const nextDirection = getNextDirection(dir);
-    // eslint-disable-next-line unused-imports/no-unused-vars
-// @ts-ignore - TS6133 - 'dir' is declared but its value is never read.
-    setSortDirection((dir) => nextDirection);
-    return nextDirection;
-  };
-
-  const handleSortClick = React.useCallback(
-    (nextSortKey: string) => {
-      let nextSortDirection;
-      if (nextSortKey === sortKey) {
-        nextSortDirection = advanceSortDirection(sortDirection);
-      } else {
-        setSortKey(nextSortKey);
-        nextSortDirection = 'desc';
-      }
-// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SetStateAction<SortDirection>'.
-      setSortDirection(nextSortDirection);
-// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SortDirection'.
-      onSort?.(nextSortKey, nextSortDirection);
-    },
-    [sortKey, sortDirection, entries],
-  );
-
-  const sortedEntries = React.useMemo(() => {
-    if (!enableInternalSorting || sortDirection === 'original') {
-      return entries;
-    }
-    const caseInsensitiveSortFunction = (entry: T) => {
-      if (typeof entry[sortKey] === 'string') {
-// @ts-ignore - TS2339 - Property 'toLowerCase' does not exist on type 'T[keyof T]'.
-        return entry[sortKey].toLowerCase();
-      }
-      return entry[sortKey];
-    };
-    const sortedAsc = sortBy(entries, caseInsensitiveSortFunction);
-    return sortDirection === 'asc' ? sortedAsc : sortedAsc.reverse();
-  }, [sortDirection, sortKey, entries, enableInternalSorting]);
-
-  const sortedKeys = React.useMemo(
-    () => sortedEntries.map((ent) => get(ent, idName)),
-    [sortedEntries],
-  );
-
-  return {
-    sortedEntries,
-// @ts-ignore - TS2322 - Type 'T[keyof T][]' is not assignable to type 'keyof T[]'.
-    sortedKeys,
-    sortDirection,
-// @ts-ignore - TS2322 - Type 'string | number | symbol' is not assignable to type 'string | undefined'.
-    sortKey,
-// @ts-ignore - TS2322 - Type '(nextSortKey: string) => void' is not assignable to type '(sortKey: keyof T) => unknown'.
-    handleSortClick,
-  };
-}

package/lib/components/Table/index.ts

@@ -1,8 +0,0 @@
-export * from './Cell';
-export * from './DefaultRow';
-export * from './DefaultTableHeader';
-export * from './StaticTable';
-export * from './Table';
-export * from './TableActionBar';
-export * from './TableBottomBar';
-export * from './TableTopBar';

package/lib/components/Tabs/Tab/Tab.stories.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react';
-
-import type {TabProps} from './Tab';
-import {Tab, tabSizeOptions} from '.';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Tabs/Anatomy',
-  argTypes: {
-    size: {
-      description: 'Tab supports two size variants namely small, medium',
-      control: {
-        type: 'select',
-      },
-      options: tabSizeOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    disabled: {
-      name: 'disabled',
-      description: `Disabled Tab. When true, User can not interact with the the Tab.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    iconName: {
-      name: 'iconName',
-      description: 'Icon name for tab with Icon',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        'Type of Icon for tab with Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    label: {
-      description: 'Pass label for Tab',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    tabId: {
-      description:
-        'Pass tabId for each Tab. It should be unique for among a TabList',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onSelect: {
-      description:
-        '**onSelect** handler is triggered when there is a change in selected tab',
-      action: 'clicked',
-      table: {
-        type: {summary: '({tabId: string, label: string}) => mixed'},
-      },
-    },
-    selectedTab: {
-      description: 'Pass the tabId and label(optional) of selected tab',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{tabId?: string, label?: string}'},
-      },
-    },
-    width: {
-      description:
-        'Manual width control. This overrides the default width consideration tab',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, iconTextWrap?: string}'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Tabs component.',
-      description: {
-        component: `
-\`\`\`js
-import { Tab } from "@spaced-out/ui-design-system/lib/components/Tabs";
-\`\`\`
-Tab has to be used as child of <a href="../?path=/docs/components-tablist--docs">TabList</a>.
-Tabs make it easy to switch between different views. A controlled value can be provided using the selectedTab prop.
-Tab accepts an onSelect prop, when  Tab is clicked this function will be called and you will receive
-the tabId and label.
-      `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Tabs/Tab/Tab.jsx',
-    },
-  },
-};
-
-export const _Anatomy = (args: TabProps) => {
-  const [selectedTab, setSelectedTab] = React.useState(args.selectedTab);
-  const onSelectHandler = (
-    params: {
-      label?: string;
-      tabId?: string;
-    },
-  ): void => {
-    args.onSelect && args.onSelect(params);
-    setSelectedTab(params);
-  };
-
-  return <Tab {...args} onSelect={onSelectHandler} selectedTab={selectedTab} />;
-};
-
-_Anatomy.args = {
-  size: 'medium',
-  selectedTab: {key: '', value: ''},
-  disabled: false,
-  iconName: 'face-party',
-  iconType: 'regular',
-  label: 'Tab Link',
-  tabId: 'tab-0',
-};

package/lib/components/Tabs/Tab/Tab.tsx

@@ -1,152 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../../types/typography';
-import {classify} from '../../../utils/classify';
-import {UnstyledButton} from '../../Button';
-import type {IconType} from '../../Icon';
-import {Icon} from '../../Icon';
-import {ButtonTextMedium, ButtonTextSmall} from '../../Text';
-
-import css from './Tab.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  iconTextWrap?: string;
-}>;
-
-export const TAB_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-});
-
-export const tabSizeOptions: Array<unknown> = [...Object.keys(TAB_SIZE)];
-
-export type TabSize = keyof typeof TAB_SIZE;
-
-export type TabProps = {
-  classNames?: ClassNames;
-  onSelect?: (
-    arg1: {
-      tabId?: string;
-      label?: string;
-    },
-  ) => unknown;
-  size?: TabSize;
-  selectedTab?: {
-    tabId?: string;
-    label?: string;
-  };
-  disabled?: boolean;
-  tabId?: string;
-  label?: string;
-  iconName?: string;
-  iconType?: IconType;
-  width?: string;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-};
-
-export const Tab: Flow.AbstractComponent<TabProps, HTMLButtonElement> =
-  React.forwardRef<HTMLButtonElement, TabProps>((
-    {
-      classNames,
-      onSelect,
-      size = 'medium',
-      selectedTab,
-      disabled = false,
-      tabId,
-      label,
-      iconName,
-      iconType,
-      onClick,
-      width,
-      ...props
-    }: TabProps,
-    forwardRef,
-  ) => {
-    const tabRef = React.useRef(null);
-// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLButtonElement'.
-    React.useImperativeHandle(forwardRef, () => tabRef.current);
-    const selected = tabId && tabId === selectedTab?.tabId;
-    const onClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-      if (!disabled) {
-        e.preventDefault();
-        onSelect && onSelect({tabId, label});
-        onClick && onClick(e);
-// @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
-        tabRef.current?.blur();
-      }
-    };
-    return (
-      <UnstyledButton
-        {...props}
-        disabled={disabled}
-        className={classify(
-          css.button,
-          {
-            [css.selected]: selected === true,
-            [css.disabled]: disabled === true,
-            [css.mediumSize]: size === 'medium',
-            [css.smallSize]: size === 'small',
-          },
-          classNames?.wrapper,
-        )}
-        onClick={onClickHandler}
-// @ts-ignore - TS2769 - No overload matches this call.
-        style={{width}}
-        tabIndex={disabled ? -1 : 0}
-        ref={tabRef}
-      >
-        <span
-          className={classify(
-            css.iconTextWrap,
-            {
-              [css.selected]: selected === true,
-              [css.disabled]: disabled === true,
-            },
-            classNames?.iconTextWrap,
-          )}
-        >
-          {iconName ? (
-            <Icon
-              name={iconName}
-              type={iconType}
-              size={size}
-              className={classify(css.icon, {
-                [css.disabled]: disabled === true,
-              })}
-            />
-          ) : null}
-
-          {label && (
-            <>
-              {size === TAB_SIZE.medium ? (
-                <ButtonTextMedium
-                  color={TEXT_COLORS.secondary}
-                  className={classify(css.tabContainer, {
-                    [css.disabled]: disabled === true,
-                  })}
-                >
-                  {label}
-                </ButtonTextMedium>
-              ) : (
-                <ButtonTextSmall
-                  color={TEXT_COLORS.secondary}
-                  className={classify(css.tabContainer, {
-                    [css.selected]: selected === true,
-                    [css.disabled]: disabled === true,
-                  })}
-                >
-                  {label}
-                </ButtonTextSmall>
-              )}
-            </>
-          )}
-        </span>
-      </UnstyledButton>
-    );
-  });
-
-Tab.displayName = 'Tab';

package/lib/components/Tabs/Tab/index.ts

@@ -1 +0,0 @@
-export * from './Tab';

package/lib/components/Tabs/TabList/TabDropdown.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  shift,
-  useFloating,
-} from '@floating-ui/react';
-
-import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
-import {classify} from '../../../utils/classify';
-import {ClickAway} from '../../../utils/click-away';
-import {mergeRefs} from '../../../utils/merge-refs';
-import type {AnchorType} from '../../ButtonDropdown';
-import type {MenuOption, MenuProps} from '../../Menu';
-import {Menu} from '../../Menu';
-import type {ElevationType} from '../../Tooltip';
-import {getElevationValue} from '../../Tooltip';
-import type {TabProps} from '../Tab';
-import {Tab} from '../Tab';
-
-import css from './TabDropdown.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type TabDropdownProps = {
-  anchorPosition?: AnchorType;
-  size?: 'medium' | 'small';
-  props?: {
-    tab: TabProps;
-    menu: MenuProps;
-  };
-  onOptionSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  classNames?: ClassNames;
-  selected?: boolean;
-  disabled?: boolean;
-  elevation?: ElevationType;
-};
-
-export const TabDropdown = (
-  {
-    anchorPosition = 'bottom-start',
-    size,
-    onOptionSelect,
-    props,
-    elevation = 'modal',
-    classNames,
-  }: TabDropdownProps,
-) => {
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: 'absolute',
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
-    placement: anchorPosition,
-    whileElementsMounted: autoUpdate,
-    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-  });
-
-  return (
-    <ClickAway>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <div
-          data-testid="TabDropdown"
-          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
-        >
-          <Tab
-            {...props?.tab}
-            size={size}
-// @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-            ref={mergeRefs([refs.setReference, triggerRef])}
-            onClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-            classNames={{
-              wrapper: css.dotTabWrapper,
-              iconTextWrap: css.dotTextWrap,
-            }}
-          />
-          {isOpen && props?.menu && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-// @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-                initialFocus={refs.reference}
-              >
-                <div
-// @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  className={css.menuWrapper}
-                  style={{
-                    display: 'flex',
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    {...props.menu}
-                    onSelect={(option, e) => {
-                      onOptionSelect && onOptionSelect(option, e);
-                      clickAway();
-                    }}
-                    size={props.menu.size || size}
-                    onTabOut={clickAway}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};