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

package/lib/components/OptionButton/SimpleOptionButton.stories.tsx

@@ -1,525 +0,0 @@
-import * as React from 'react';
-
-import type {ButtonProps} from '../Button';
-import {BUTTON_ACTION_TYPE} from '../Button';
-import {ANCHOR_POSITION_TYPE} from '../ButtonDropdown';
-import type {MenuOption} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-
-import type {SimpleOptionButtonProps} from './SimpleOptionButton';
-import {SimpleOptionButton} from './SimpleOptionButton';
-
-import css from './OptionButton.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-
-const actionTypeOptions: Array<unknown> = [...Object.values(BUTTON_ACTION_TYPE)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Option Button/Simple Option Button',
-  component: SimpleOptionButton,
-  argTypes: {
-    onButtonClick: {
-      description:
-        '**onButtonClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    iconLeftName: {
-      description:
-        'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconLeftType: {
-      description:
-        'Type of Left 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'},
-      },
-    },
-    type: {
-      options: ['primary', 'secondary', 'tertiary', 'ghost', 'danger'],
-      description: 'Type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    actionType: {
-      options: actionTypeOptions,
-      description:
-        'Action type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'submit'},
-      },
-    },
-    size: {
-      description:
-        'Option Button supports only two size variants namely small and medium. `small` < `medium`',
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'small'},
-      },
-    },
-    menuSize: {
-      description: 'Size of Menu',
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'small'},
-      },
-    },
-    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'},
-      },
-    },
-    isFluid: {
-      description:
-        'If **true**, the component would take the container\'s `width`',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    children: {
-      description: 'The content of the Button',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be used where Option Button do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onOptionSelect: {
-      description:
-        '**onOptionSelect** handler is triggered when there is a change in selected option',
-      action: 'clicked',
-      table: {
-        type: {
-          summary:
-            '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    onMenuOpen: {
-      description:
-        '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    onMenuClose: {
-      description:
-        '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    anchorPosition: {
-      options: anchorPositionOptions,
-      description:
-        'Position of Menu. It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'bottom-start'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, baseButtonWrapper?: string, baseButtonIcon?: string, optionsButtonWrapper?: string, optionsButtonIcon?: string, dropdownContainer?: string,}',
-        },
-      },
-    },
-    menuClassNames: {
-      description:
-        'External classnames to be applied to the menu. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string}',
-        },
-      },
-    },
-    tooltip: {
-      control: {
-        type: 'object',
-      },
-      description:
-        'Field to set the **Tooltip** for Base Button and Options Button',
-      table: {
-        type: {summary: 'OptionButtonTooltipProps'},
-      },
-    },
-    options: {
-      description: 'Options to be displayed in buttonOptionButton',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'Array<MenuOption>'},
-      },
-    },
-    optionsVariant: {
-      description: 'Menu supports multiple options variant',
-      control: {
-        type: 'select',
-      },
-      options: ['checkbox', 'radio', 'normal'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'normal'},
-      },
-    },
-    allowSearch: {
-      description: `if **true**, the component would show a search input on top of menu.
-        This is a simple **static search**
-        which filter options by **matching search text to option label**`,
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    selectedKeys: {
-      description:
-        'Selected keys corresponding to options. These options are shown as selected in UI',
-      control: {
-        type: 'array',
-      },
-      table: {
-        type: {summary: 'Array<string>'},
-      },
-    },
-    resolveLabel: {
-      description:
-        'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    resolveSecondaryLabel: {
-      description:
-        'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    menuVirtualization: {
-      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{enable: boolean, menuHeight?: number, itemHeight?: number}',
-        },
-      },
-    },
-    header: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    footer: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    showLabelTooltip: {
-      description: 'Show Tooltip on the label of the menu option if truncated',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuLabelTooltip'},
-      },
-    },
-    allowWrap: {
-      description:
-        'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a OptionButton component',
-      description: {
-        component: `
-\`\`\`js
-import { SimpleOptionButton } from "@spaced-out/ui-design-system/lib/components/OptionButton";
-\`\`\`
-Simple Option Button allow users to take the main action, and also provides with multiple options related to the main action.
-SimpleOptionButton comes with multiple variants and has various states(hover, focus, etc). There are two parts of SimpleOptionButton,
-left button to perform main action, right button to select any further options related to main action.
-
-**Note: ** Always use \`ariaLabel\` with Icon only option button to avoid accessibility violation
-
-- **SimpleOptionButton** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
-- **SimpleOptionButton** would have implicit label selection behavior built in, meaning if you select an option the
-label would get auto populated for the component itself.
-- The component maintains an internal state for selections. You can always override it with explicit **selectedKeys**
-prop which changes on **onOptionSelect** callback.
-- You can always get the most recent instance of selected options from ref by using \`ref.current?.selectedKeys\`. This might be useful when you have
-options which are multi-select.
-- The component also supports custom **header** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
-- The component also supports custom **footer** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
-to save some state in the parent component.
-- You can always force Open  the options instance from ref by using \`clickAwayRef.current?.forceOpen\`. This might be useful when want to force Open as per you needs.
-- You can always force Close the options instance from ref by using \`clickAwayRef.current?.forceClose\`. This might be useful when want to force Close as per you needs.
-
-
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/OptionButton/OptionButton.jsx',
-    },
-  },
-};
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label: 'Option three this is a very long option that would truncate',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-    iconLeft: 'camera',
-  },
-  {
-    key: '7',
-    label: 'Option seven',
-    iconLeft: 'coffee',
-  },
-  {key: '8', label: 'Option eight', iconLeft: 'user'},
-  {
-    key: '9',
-    label: 'Option nine',
-    iconLeft: 'face-party',
-  },
-];
-
-const textOnlyButtonProps: ButtonProps = {
-  children: 'Button Text',
-};
-
-const commonMenuProps = {
-  options,
-  size: 'small',
-  isFluid: false,
-} as const;
-
-export const _TextOnly = (args: SimpleOptionButtonProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  return (
-    <div className={css.optionBtnWrapper}>
-      <SimpleOptionButton
-        {...args}
-        selectedKeys={selectedKeys}
-        onOptionSelect={() => setSelectedKeys([])}
-      />
-    </div>
-  );
-};
-
-_TextOnly.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-};
-
-export const _TextWithTooltip = (args: SimpleOptionButtonProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  return (
-    <div className={css.optionBtnWrapper}>
-      <SimpleOptionButton
-        {...args}
-        selectedKeys={selectedKeys}
-        onOptionSelect={() => setSelectedKeys([])}
-      />
-    </div>
-  );
-};
-
-_TextWithTooltip.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  showLabelTooltip: {maxLines: 2},
-};
-
-export const _WithTooltip = (args: SimpleOptionButtonProps) => (<div className={css.optionBtnWrapper}>
-  <SimpleOptionButton {...args} />
-</div>);
-
-_WithTooltip.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  tooltip: {
-    baseButton: {
-      body: 'Send now',
-      placement: 'top-start',
-    },
-    optionsButton: {
-      body: 'Schedule for later',
-      placement: 'top-end',
-    },
-  },
-};
-
-export const _WithHeaderAndFooter = (args: SimpleOptionButtonProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  const handleOptionSelect = (key: string) => {
-// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
-    if (selectedKeys.includes(key)) {
-      setSelectedKeys((currentKeys) =>
-        currentKeys.filter((currKey) => currKey !== key),
-      );
-    } else {
-// @ts-ignore - TS2345 - Argument of type '(currentKeys: never[]) => string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-      setSelectedKeys((currentKeys) => [...currentKeys, key]);
-    }
-  };
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.optionBtnWrapper}>
-      <SimpleOptionButton
-        {...args}
-        selectedKeys={selectedKeys}
-        onOptionSelect={(option) => handleOptionSelect(option.key)}
-        header={<MenuHeader />}
-        footer={<MenuFooter onSave={onSave} />}
-        clickAwayRef={clickAwayRef}
-      />
-    </div>
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  optionsVariant: 'checkbox',
-};

package/lib/components/OptionButton/SimpleOptionButton.tsx

@@ -1,160 +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 {getSelectedKeysFromSelectedOption} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-
-import type {OptionButtonTooltipProps} from './OptionButton';
-import {OptionButton} from './OptionButton';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  baseButtonWrapper?: string;
-  baseButtonIcon?: string;
-  optionsButtonWrapper?: string;
-  optionsButtonIcon?: string;
-  dropdownContainer?: string;
-}>;
-
-export type SimpleOptionButtonRef = {
-  selectedKeys?: Array<string>;
-};
-
-export type SimpleOptionButtonProps = (// Input props
-(ButtonProps) & {
-  classNames?: ClassNames;
-// @ts-ignore - TS2300 - Duplicate identifier 'tooltip'.
-  tooltip?: OptionButtonTooltipProps;
-  anchorPosition?: AnchorType;
-// @ts-ignore - TS2300 - Duplicate identifier 'tooltip'.
-  tooltip?: OptionButtonTooltipProps;
-  menuSize?: 'small' | 'medium';
-  // 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;
-  onButtonClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  clickAwayRef?: ClickAwayRefType;
-});
-
-const SimpleOptionButtonBase = (props: SimpleOptionButtonProps & Omit<Omit<Flow.ComponentProps<typeof OptionButton>, 'tooltip' | 'onButtonClick' | 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'onMenuClose' | 'clickAwayRef' | 'menu'>, keyof SimpleOptionButtonProps>, ref: ((arg1: null | SimpleOptionButtonRef) => unknown) | {
-  current: null | SimpleOptionButtonRef;
-}) => {
-  const {
-    size = 'small',
-    classNames,
-    tooltip,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onButtonClick,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    menuSize = 'small',
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    clickAwayRef,
-    allowWrap = false,
-    ...buttonProps
-  } = props;
-
-  const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    setOptionButtonSelectedKeys(selectedKeys);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e: React.SyntheticEvent<HTMLElement> | null | undefined) => {
-    e?.stopPropagation();
-    let newSelectedKeys = [selectedOption.key];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        optionButtonSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    setOptionButtonSelectedKeys(newSelectedKeys);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-// @ts-ignore - TS2345 - Argument of type '{ current: SimpleOptionButtonRef | null; } | ((arg1: SimpleOptionButtonRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleOptionButtonRef> | undefined'.
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: optionButtonSelectedKeys,
-  }));
-
-  return (
-    <OptionButton
-      {...buttonProps}
-      tooltip={tooltip}
-      onButtonClick={onButtonClick}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        isFluid: false,
-        options,
-        selectedKeys: optionButtonSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size: menuSize,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {children}
-    </OptionButton>
-  );
-};
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleOptionButtonProps & Omit<Omit<Flow.ComponentProps<typeof OptionButton>, 'tooltip' | 'onButtonClick' | 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'onMenuClose' | 'clickAwayRef' | 'menu'>, keyof SimpleOptionButtonProps>, ref: { current: null | SimpleOptionButtonRef; } | ...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleOptionButtonProps, SimpleOptionButtonRef>'.
-export const SimpleOptionButton: Flow.AbstractComponent<SimpleOptionButtonProps, SimpleOptionButtonRef> = React.forwardRef<SimpleOptionButtonProps, SimpleOptionButtonRef>(SimpleOptionButtonBase);

package/lib/components/OptionButton/index.ts

@@ -1,2 +0,0 @@
-export * from './OptionButton';
-export * from './SimpleOptionButton';