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

package/lib/components/ButtonDropdown/SimpleButtonDropdown.tsx

@@ -1,167 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {
-  getButtonLabelFromSelectedKeys,
-  getSelectedKeysFromSelectedOption,
-} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-
-import type {AnchorType} from './ButtonDropdown';
-import {ButtonDropdown} from './ButtonDropdown';
-
-
-type ClassNames = Readonly<{
-  buttonWrapper?: string;
-  dropdownContainer?: string;
-  buttonIcon?: string;
-}>;
-
-export type SimpleButtonDropdownRef = {
-  selectedKeys?: Array<string>;
-};
-
-export type SimpleButtonDropdownProps = (// Input props
-(ButtonProps) & {
-  elevation?: ElevationType;
-  classNames?: ClassNames;
-  anchorPosition?: AnchorType;
-  tooltip?: BaseTooltipProps;
-  // Menu props
-  options?: Array<MenuOption>;
-  optionsVariant?: MenuOptionsVariant;
-  allowSearch?: boolean;
-  selectedKeys?: Array<string>;
-  menuVirtualization?: Virtualization;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  // events
-  onOptionSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  clickAwayRef?: ClickAwayRefType;
-});
-
-const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps & Omit<Omit<Flow.ComponentProps<typeof ButtonDropdown>, 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'elevation' | 'onMenuClose' | 'clickAwayRef' | 'menu'>, keyof SimpleButtonDropdownProps>, ref: ((arg1: null | SimpleButtonDropdownRef) => unknown) | {
-  current: null | SimpleButtonDropdownRef;
-}) => {
-  const {
-    size = 'medium',
-    classNames,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    isFluid,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    allowWrap = false,
-    clickAwayRef,
-    elevation = 'modal',
-    ...buttonProps
-  } = props;
-
-  const [btnText, setBtnText] = React.useState('');
-  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
-
-    setButtonDropdownSelectedKeys(selectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e: React.SyntheticEvent<HTMLElement> | null | undefined) => {
-    e?.stopPropagation();
-    let newSelectedKeys: Array<never> | Array<string> = [];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        buttonDropdownSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      children,
-    );
-
-    setButtonDropdownSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-// @ts-ignore - TS2345 - Argument of type '{ current: SimpleButtonDropdownRef | null; } | ((arg1: SimpleButtonDropdownRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleButtonDropdownRef> | undefined'.
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: buttonDropdownSelectedKeys,
-  }));
-
-  return (
-    <ButtonDropdown
-      {...buttonProps}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      elevation={elevation}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
-        isFluid,
-        options,
-        selectedKeys: buttonDropdownSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {optionsVariant === 'checkbox' ? btnText : children}
-    </ButtonDropdown>
-  );
-};
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleButtonDropdownProps & Omit<Omit<Flow.ComponentProps<typeof ButtonDropdown>, 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'elevation' | 'onMenuClose' | 'clickAwayRef' | 'menu'>, keyof SimpleButtonDropdownProps>, ref: { current: null | SimpleButtonDropdownRef; } | ((arg1: ...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleButtonDropdownProps, SimpleButtonDropdownRef>'.
-export const SimpleButtonDropdown: Flow.AbstractComponent<SimpleButtonDropdownProps, SimpleButtonDropdownRef> = React.forwardRef<SimpleButtonDropdownProps, SimpleButtonDropdownRef>(SimpleButtonDropdownBase);

package/lib/components/ButtonDropdown/index.ts

@@ -1,2 +0,0 @@
-export * from './ButtonDropdown';
-export * from './SimpleButtonDropdown';

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.stories.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react';
-
-import type {ButtonTabProps} from './ButtonTab';
-import {ButtonTab} from './ButtonTab';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Button Tabs/Anatomy',
-  component: ButtonTab,
-  argTypes: {
-    id: {
-      description: 'Id of the Button Tab',
-      control: {
-        type: 'text',
-      },
-      type: {required: true},
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    selectedButtonTabId: {
-      description:
-        'Selected Id of the Button Tab, when the selectedId is same as id, Button Tab is updated to the selected state. This is passed by the parent `ButtonTabs`.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string}'},
-      },
-    },
-    iconName: {
-      description:
-        'Left icon to be applied to the Button Tab, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        'Type represents 4 unique left icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    children: {
-      type: {required: true},
-      description: 'The content of the Button Tab',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be used where Button Tab do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    isLoading: {
-      description:
-        'If **true**, the component would show a circular loader and also preserve the current size of button so that there are no jumps',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'ButtonTab Anatomy component.',
-      description: {
-        component: `
-\`\`\`js
-import { ButtonTab } from "@spaced-out/ui-design-system/lib/components/ButtonTabs";
-\`\`\`
-This anatomy component should not be use in a standalone manner. This should always be used inside <a href="../?path=/docs/components-button-tabs-button-tabs--docs">\`<ButtonTabs></ButtonTabs>\`</a>. Anatomy is just to showcase
-what feature set an elemental \`ButtonTab\` supports. Only use props which are mentioned in the documentation.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ButtonTabs/ButtonTab/ButtonTab.jsx',
-    },
-  },
-};
-
-export const _Anatomy = (args: ButtonTabProps) => (<ButtonTab {...args} />);
-
-_Anatomy.args = {
-  id: '1',
-  iconName: 'face-party',
-  children: 'Button Text',
-};

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.tsx

@@ -1,76 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../../utils/classify';
-import {Button} from '../../Button';
-import type {IconType} from '../../Icon';
-
-import css from './ButtonTab.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type ButtonTabProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  onButtonTabSelect?: ((id: string, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown) | null | undefined;
-  iconName?: string;
-  iconType?: IconType;
-  size?: 'medium' | 'small';
-  isFluid?: boolean;
-  ariaLabel?: string;
-  id: string;
-  selectedButtonTabId?: string;
-  isLoading?: boolean;
-  isLeftCurved?: boolean;
-  isRightCurved?: boolean;
-};
-
-export const ButtonTab: Flow.AbstractComponent<ButtonTabProps, HTMLButtonElement> = React.forwardRef<HTMLButtonElement, ButtonTabProps>((
-  {
-    classNames,
-    children,
-    iconName,
-    iconType = 'regular',
-    size,
-    onButtonTabSelect,
-    id,
-    selectedButtonTabId,
-    disabled,
-    isLeftCurved,
-    isRightCurved,
-    ...props
-  }: ButtonTabProps,
-  ref,
-) => (<Button
-  {...props}
-  disabled={disabled}
-  size={size}
-  type="tertiary"
-  ref={ref}
-  classNames={{
-    wrapper: classify(
-      css.buttonTabWrapper,
-      {
-        [css.mediumButtonTab]: size === 'medium',
-        [css.smallButtonTab]: size === 'small',
-        [css.onlyIcon]: iconName && !children,
-        [css.isSelected]: id === selectedButtonTabId,
-        [css.disabled]: disabled,
-        [css.leftCurved]: isLeftCurved,
-        [css.rightCurved]: isRightCurved,
-      },
-      classNames?.wrapper,
-    ),
-    icon: css.icon,
-  }}
-  iconLeftName={iconName}
-  iconLeftType={iconType}
-  onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
->
-  {children}
-</Button>));

package/lib/components/ButtonTabs/ButtonTab/index.ts

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

package/lib/components/ButtonTabs/ButtonTabDropdown.tsx

@@ -1,147 +0,0 @@
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  shift,
-  useFloating,
-} from '@floating-ui/react';
-import {includes} from 'lodash';
-
-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 {Menu} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-import {getElevationValue} from '../Tooltip';
-
-import type {ButtonTabProps} from './ButtonTab';
-import {ButtonTab} from './ButtonTab';
-
-import css from './ButtonTabDropdown.module.css';
-
-
-export type ButtonTabDropdownProps = ((ButtonTabProps) & {
-  title: string;
-  elevation?: ElevationType;
-  dropdownClass?: string;
-  anchorPosition?: AnchorType;
-});
-
-export const ButtonTabDropdown = (
-  {
-    title,
-    elevation = 'modal',
-    anchorPosition = 'bottom-end',
-    ...buttonTabProps
-  }: ButtonTabDropdownProps,
-) => {
-  const {
-    size,
-    children,
-    selectedButtonTabId,
-    onButtonTabSelect: onTabSelect,
-    dropdownClass,
-  } = buttonTabProps;
-  const childrenArray = React.Children.toArray(children);
-  const menuOptions = childrenArray.map((child) => {
-    const {
-      id,
-      children,
-      disabled,
-      iconName,
-      iconType,
-      classNames,
-      size: buttonSize,
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-    } = child.props;
-    return {
-      key: id,
-      disabled,
-      classNames,
-      label: children,
-      iconLeft: iconName,
-      iconLeftType: iconType,
-      customComponent: children,
-      optionSize: buttonSize ?? size,
-    };
-  });
-  const moreTabSelectedId = includes(
-    menuOptions.map(({key}) => key),
-    selectedButtonTabId,
-  )
-    ? 'more-tab'
-    : selectedButtonTabId;
-
-  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="ButtonTabDropdown"
-          className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
-        >
-          <ButtonTab
-            {...buttonTabProps}
-// @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])}
-            selectedButtonTabId={moreTabSelectedId}
-// @ts-ignore - TS6133 - 'id' is declared but its value is never read.
-            onButtonTabSelect={(id, e) => {
-              e?.stopPropagation();
-              onOpen();
-            }}
-          >
-            {title}
-          </ButtonTab>
-          {isOpen && (
-            <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
-                  className={css.menuWrapper}
-// @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])}
-                  style={{
-                    display: 'flex',
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    onSelect={(option, e) => {
-                      onTabSelect && onTabSelect(option.key, e);
-                      clickAway();
-                    }}
-                    size={size}
-                    options={menuOptions}
-                    onTabOut={clickAway}
-                    selectedKeys={[selectedButtonTabId ?? '']}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};