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

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

@@ -1,393 +0,0 @@
-import * as React from 'react';
-
-import {ANCHOR_POSITION_TYPE} from '../ButtonDropdown';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import {ButtonTab} from './ButtonTab';
-import type {ButtonTabsProps} from './ButtonTabs';
-import {ButtonTabs} from './ButtonTabs';
-
-import css from './ButtonTabs.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Button Tabs/Button Tabs',
-  component: ButtonTabs,
-  argTypes: {
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string}'},
-      },
-    },
-    selectedButtonTabId: {
-      description:
-        'Selected Id of the Button Tab, when the selectedId is same as id, Button Tab is updated to the selected state',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onButtonTabSelect: {
-      description:
-        '**onClick** handler that is applied to the Button Tab. This is internally passed to the `ButtonTab` component',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '(id: string, e?: SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    elevation: {
-      description:
-        'This is passed to ButtonTabDropdown. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select',
-      },
-      options: elevationOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'modal'},
-      },
-    },
-    size: {
-      description:
-        'ButtonTabs support only two size variants namely small and medium. `small` < `medium`. This is internally passed to the `ButtonTab` component',
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    disabled: {
-      description:
-        'If **true**, the component is disabled. This is internally passed to the `ButtonTab` component',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    isFluid: {
-      description:
-        'If **true**, the component would take the container\'s `width`. This is internally passed to the `ButtonTab` component',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    children: {
-      type: {required: true},
-      description:
-        'The content of the ButtonTabs. This should always have list of `ButtonTab` as children',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    wrapAfter: {
-      description: 'Number of tabs to display before wrapping with a dropdown',
-      control: {
-        type: 'number',
-        min: 0,
-      },
-      table: {
-        type: {summary: 'number'},
-      },
-    },
-    wrapTabTitle: {
-      description: 'Title of the button tab that opens the wrapped dropdown',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'more'},
-      },
-    },
-    anchorPosition: {
-      options: anchorPositionOptions,
-      description:
-        'Position of Menu relative to its reference element. It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'bottom-end'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a ButtonTabs component.',
-      description: {
-        component: `
-\`\`\`js
-import { ButtonTabs, ButtonTab } from "@spaced-out/ui-design-system/lib/components/ButtonTabs";
-\`\`\`
-**ButtonTabs** accepts multiple **ButtonTab** elements as children. \`ButtonTab\` make it easy to switch between different views.
-A selection of tab can be done by passing selectedId to the \`ButtonTab\` component. Some props like **size**, **isFluid**
-and **disabled** are propagated as is to the children \`ButtonTab\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ButtonTabs/ButtonTabs.jsx',
-    },
-  },
-};
-
-export const _TextOnly = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        selectedButtonTabId={selectedId}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={(id) => setSelectedId(id)}
-      >
-        <ButtonTab id="1">School Bus</ButtonTab>
-        <ButtonTab id="2">Tram Train</ButtonTab>
-        <ButtonTab id="3">Airplane Arrival</ButtonTab>
-        <ButtonTab id="4">Space Shuttle</ButtonTab>
-        <ButtonTab id="5">Fighter Jet</ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_TextOnly.args = {
-  selectedButtonTabId: '4',
-};
-
-export const _TextAndIcon = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        selectedButtonTabId={selectedId}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={(id) => setSelectedId(id)}
-      >
-        <ButtonTab id="1" iconType="duotone" iconName="bus-school">
-          School Bus
-        </ButtonTab>
-        <ButtonTab id="2" iconType="duotone" iconName="train-tram">
-          Tram Train
-        </ButtonTab>
-        <ButtonTab id="3" iconType="duotone" iconName="plane-arrival">
-          Airplane Arrival
-        </ButtonTab>
-        <ButtonTab id="4" iconType="duotone" iconName="shuttle-space">
-          Space Shuttle
-        </ButtonTab>
-        <ButtonTab id="5" iconType="duotone" iconName="jet-fighter">
-          Fighter Jet
-        </ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_TextAndIcon.args = {
-  selectedButtonTabId: '2',
-};
-
-export const _IconOnly = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        selectedButtonTabId={selectedId}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={(id) => setSelectedId(id)}
-      >
-        <ButtonTab id="1" iconType="duotone" iconName="bus-school"></ButtonTab>
-        <ButtonTab id="2" iconType="duotone" iconName="train-tram"></ButtonTab>
-        <ButtonTab
-          id="3"
-          iconType="duotone"
-          iconName="plane-arrival"
-        ></ButtonTab>
-        <ButtonTab
-          id="4"
-          iconType="duotone"
-          iconName="shuttle-space"
-        ></ButtonTab>
-        <ButtonTab id="5" iconType="duotone" iconName="jet-fighter"></ButtonTab>
-        <ButtonTab id="6" iconType="duotone" iconName="banana"></ButtonTab>
-        <ButtonTab id="7" iconType="duotone" iconName="citrus"></ButtonTab>
-        <ButtonTab id="8" iconType="duotone" iconName="pineapple"></ButtonTab>
-        <ButtonTab id="9" iconType="duotone" iconName="lemon"></ButtonTab>
-        <ButtonTab id="10" iconType="duotone" iconName="pie"></ButtonTab>
-        <ButtonTab id="11" iconType="duotone" iconName="pear"></ButtonTab>
-        <ButtonTab id="12" iconType="duotone" iconName="grapes"></ButtonTab>
-        <ButtonTab id="13" iconType="duotone" iconName="mango"></ButtonTab>
-        <ButtonTab id="14" iconType="duotone" iconName="avocado"></ButtonTab>
-        <ButtonTab id="15" iconType="duotone" iconName="leaf"></ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_IconOnly.args = {
-  selectedButtonTabId: '5',
-};
-
-export const _IconOnlyWrapped = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        selectedButtonTabId={selectedId}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={(id) => setSelectedId(id)}
-      >
-        <ButtonTab id="1" iconType="duotone" iconName="bus-school"></ButtonTab>
-        <ButtonTab id="2" iconType="duotone" iconName="train-tram"></ButtonTab>
-        <ButtonTab
-          id="3"
-          iconType="duotone"
-          iconName="plane-arrival"
-        ></ButtonTab>
-        <ButtonTab
-          id="4"
-          iconType="duotone"
-          iconName="shuttle-space"
-        ></ButtonTab>
-        <ButtonTab id="5" iconType="duotone" iconName="jet-fighter"></ButtonTab>
-        <ButtonTab
-          id="6"
-          iconType="duotone"
-          iconName="banana"
-          disabled
-        ></ButtonTab>
-        <ButtonTab
-          id="7"
-          iconType="duotone"
-          iconName="citrus"
-          disabled
-        ></ButtonTab>
-        <ButtonTab id="8" iconType="duotone" iconName="pineapple"></ButtonTab>
-        <ButtonTab id="9" iconType="duotone" iconName="lemon"></ButtonTab>
-        <ButtonTab id="10" iconType="duotone" iconName="pie"></ButtonTab>
-        <ButtonTab id="11" iconType="duotone" iconName="pear"></ButtonTab>
-        <ButtonTab id="12" iconType="duotone" iconName="grapes"></ButtonTab>
-        <ButtonTab
-          id="13"
-          iconType="duotone"
-          iconName="mango"
-          disabled
-        ></ButtonTab>
-        <ButtonTab
-          id="14"
-          iconType="duotone"
-          iconName="avocado"
-          disabled
-        ></ButtonTab>
-        <ButtonTab id="15" iconType="duotone" iconName="leaf"></ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_IconOnlyWrapped.args = {
-  selectedButtonTabId: '5',
-  wrapAfter: 8,
-};
-
-export const _Wrapped = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-  const onButtonTabSelectHandler = (id: string, e: React.SyntheticEvent<HTMLElement> | null | undefined): void => {
-    args.onButtonTabSelect && args.onButtonTabSelect(id, e);
-    setSelectedId(id);
-  };
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={onButtonTabSelectHandler}
-        selectedButtonTabId={selectedId}
-      >
-        <ButtonTab id="1" iconType="duotone" iconName="bus-school">
-          School Bus
-        </ButtonTab>
-        <ButtonTab id="2" iconType="duotone" iconName="train-tram">
-          Tram Train
-        </ButtonTab>
-        <ButtonTab id="3" iconType="duotone" iconName="plane-arrival">
-          Airplane Arrival
-        </ButtonTab>
-        <ButtonTab id="4" iconType="duotone" iconName="shuttle-space">
-          Space Shuttle
-        </ButtonTab>
-        <ButtonTab id="5" iconType="duotone" iconName="jet-fighter">
-          Fighter Jet
-        </ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_Wrapped.args = {
-  selectedButtonTabId: '4',
-  wrapAfter: 3,
-};
-
-export const _DisabledButtons = (args: ButtonTabsProps) => {
-  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
-
-  return (
-    <div className={css.container}>
-      <ButtonTabs
-        {...args}
-        selectedButtonTabId={selectedId}
-        classNames={{wrapper: css.wrapper}}
-        onButtonTabSelect={(id) => setSelectedId(id)}
-      >
-        <ButtonTab id="1">School Bus</ButtonTab>
-        <ButtonTab id="2" disabled>
-          Tram Train
-        </ButtonTab>
-        <ButtonTab id="3" disabled>
-          Airplane Arrival
-        </ButtonTab>
-        <ButtonTab id="4">Space Shuttle</ButtonTab>
-        <ButtonTab id="5">Fighter Jet</ButtonTab>
-      </ButtonTabs>
-    </div>
-  );
-};
-
-_DisabledButtons.args = {
-  selectedButtonTabId: '4',
-};

package/lib/components/ButtonTabs/ButtonTabs.tsx

@@ -1,119 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {AnchorType} from '../ButtonDropdown';
-import type {ElevationType} from '../Tooltip';
-
-import {ButtonTabDropdown} from './ButtonTabDropdown';
-
-import css from './ButtonTabs.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  buttonTabDropdownWrapper?: string;
-}>;
-
-export type ButtonTabsProps = {
-  classNames?: ClassNames;
-  children: React.ReactNode;
-  isFluid?: boolean;
-  size?: 'medium' | 'small';
-  disabled?: boolean;
-  selectedButtonTabId?: string;
-  onButtonTabSelect?: ((id: string, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown) | null | undefined;
-  wrapAfter?: number;
-  elevation?: ElevationType;
-  wrapTabTitle?: string;
-  anchorPosition?: AnchorType;
-};
-
-export const ButtonTabs: Flow.AbstractComponent<ButtonTabsProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ButtonTabsProps>((
-  {
-    classNames,
-    children,
-    isFluid,
-    size = 'medium',
-    disabled,
-    selectedButtonTabId,
-    onButtonTabSelect,
-    wrapAfter,
-    elevation = 'modal',
-    wrapTabTitle = 'more',
-    anchorPosition,
-  }: ButtonTabsProps,
-  ref,
-) => {
-  const childrenArray = React.Children.toArray(children);
-
-  let unwrappedNodes = childrenArray;
-  let wrappedNodes: Array<never> | Array<NonNullable<never>> = [];
-
-  if (typeof wrapAfter === 'number' && wrapAfter > -1) {
-    unwrappedNodes = childrenArray.slice(0, wrapAfter);
-// @ts-ignore - TS2322 - Type '(string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>)[]' is not assignable to type 'never[]'.
-    wrappedNodes = childrenArray.slice(wrapAfter);
-
-    if (wrappedNodes.length) {
-      unwrappedNodes.push(
-        <ButtonTabDropdown
-          id="more-tab"
-          title={wrapTabTitle}
-          iconName="ellipsis-vertical"
-          elevation={elevation}
-          anchorPosition={anchorPosition}
-          dropdownClass={classNames?.buttonTabDropdownWrapper}
-        >
-          {wrappedNodes}
-        </ButtonTabDropdown>,
-      );
-    }
-  }
-
-  const childrenWithProps = unwrappedNodes.map((child, index) => {
-    if (React.isValidElement(child)) {
-// @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'unknown'. | TS2339 - Property 'classNames' does not exist on type 'unknown'.
-      const {disabled: disabledChild, classNames: classNamesChild} =
-        child.props;
-      const isFirst = index === 0;
-      const isLast = index === unwrappedNodes.length - 1;
-
-      return React.cloneElement(child, {
-// @ts-ignore - TS2698 - Spread types may only be created from object types.
-        ...child.props,
-        isFluid,
-        size,
-        isLeftCurved: isFirst,
-        isRightCurved: isLast,
-        disabled: disabledChild || disabled,
-        selectedButtonTabId,
-        onButtonTabSelect,
-        classNames: {
-          wrapper: classNamesChild?.wrapper,
-        },
-      });
-    }
-    return child;
-  });
-
-  return (
-    <div
-      data-testid="ButtonTabs"
-      ref={ref}
-      className={classify(
-        css.buttonTabsWrapper,
-        {
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-          [css.isFluid]: isFluid,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {childrenWithProps}
-    </div>
-  );
-});

package/lib/components/ButtonTabs/index.ts

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