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

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

@@ -1,172 +0,0 @@
-import * as React from 'react';
-
-import {ELEVATION_TYPES} from '../../Tooltip';
-import {Tab, TabList, tabSizeOptions} from '../';
-
-import type {TabListProps} from './';
-
-import css from './TabList.stories.module.css';
-
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Tabs/Tabs',
-  argTypes: {
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string}'},
-      },
-    },
-    children: {
-      description:
-        'The content of the TabList. This can be multiple Tab components',
-      table: {
-        type: {summary: 'React.Component'},
-      },
-    },
-    size: {
-      description: 'Tab supports two size variants namely small, medium',
-      control: {
-        type: 'select',
-      },
-      options: tabSizeOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    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:
-        'Selected tab is by default focussed. Pass new selected tab received in callback',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{tabId?: string, label?: string}'},
-      },
-    },
-    menuWidth: {
-      description:
-        'Manual width control. This overrides the default width considerations of Menu',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    elevation: {
-      description:
-        'This is passed to TabDropdown. 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'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Tabs component.',
-      description: {
-        component: `
-\`\`\`js
-import { TabList, Tab } from "@spaced-out/ui-design-system/lib/components/Tabs";
-\`\`\`
-TabList accepts multiple <a href="../?path=/docs/components-tab--docs">Tab</a> elements as children.
-Tabs make it easy to switch between different views. A controlled value can be provided using the selectedTab prop.
-TabList accepts an onSelect prop, when any child Tab is clicked this function will be called and you will receive
-the tabId and label.
-      `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Tabs/TabList/TabList.jsx',
-    },
-  },
-};
-
-export const _Tabs = (args: TabListProps) => {
-  const [selectedTab, setSelectedTab] = React.useState(
-    args.selectedTab || {tabId: 'tab-1', label: 'Tab Link 1'},
-  );
-  const onSelectHandler = (
-    params: {
-      label?: string;
-      tabId: string;
-    },
-  ): void => {
-    args.onSelect && args.onSelect(params);
-    setSelectedTab(params);
-  };
-
-  return (
-    <div className={css.storyContainer}>
-      <TabList {...args} onSelect={onSelectHandler} selectedTab={selectedTab}>
-        <Tab
-          iconName="trophy"
-          iconType="solid"
-          label="Tab Link 1"
-          tabId="tab-1"
-        />
-        <Tab
-          iconName="face-party"
-          iconType="solid"
-          label="Tab Link 2"
-          tabId="tab-2"
-        />
-        <Tab iconName="" iconType="solid" label="Tab Link 3" tabId="tab-3" />
-        <Tab iconName="" iconType="solid" label="Tab Link 4" tabId="tab-4" />
-        <Tab iconName="" iconType="solid" label="Tab Link 5" tabId="tab-5" />
-        <Tab iconName="" iconType="solid" label="Tab Link 6" tabId="tab-6" />
-        <Tab
-          iconName="coffee"
-          iconType="solid"
-          label="Tab Link 7"
-          tabId="tab-7"
-        />
-        <Tab size="small" label="Tab Link 8" tabId="tab-8" />
-        <Tab
-          iconName="bookmark"
-          iconType="solid"
-          label="Tab Link 9"
-          tabId="tab-9"
-        />
-        <Tab
-          iconName="close"
-          iconType="solid"
-          label="Tab Link 10"
-          tabId="tab-10"
-        />
-        <Tab
-          iconName="bug"
-          iconType="solid"
-          label="Tab Link 11"
-          tabId="tab-11"
-        />
-      </TabList>
-    </div>
-  );
-};
-
-_Tabs.args = {
-  size: 'medium',
-  selectedTab: {tabId: 'tab-1', label: 'Tab Link 1'},
-};

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

@@ -1,178 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
-import {size36, size100} from '../../../styles/variables/_size';
-import {spaceMedium} from '../../../styles/variables/_space';
-import {classify} from '../../../utils/classify';
-import type {ElevationType} from '../../Tooltip';
-
-import {TabDropdown} from './TabDropdown';
-
-import css from './TabList.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type TabListProps = {
-  classNames?: ClassNames;
-  onSelect?: (
-    arg1: {
-      tabId: string;
-      label?: string;
-    },
-  ) => unknown;
-  children?: React.ReactNode;
-  size?: 'medium';
-  selectedTab?: {
-    tabId: string;
-    label?: string;
-  };
-  menuWidth?: string;
-  elevation?: ElevationType;
-};
-
-export const TabList: Flow.AbstractComponent<TabListProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, TabListProps>((
-    {
-      classNames,
-      children,
-      size,
-      onSelect,
-      selectedTab,
-      menuWidth,
-      elevation = 'modal',
-    }: TabListProps,
-    forwardRef,
-  ) => {
-    const ref = React.useRef(null);
-// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
-    React.useImperativeHandle(forwardRef, () => ref.current);
-    const {width} = useWindowSize();
-
-    const [containerWidth, setContainerWidth] = React.useState(0);
-
-    const childrenWithProps = () => {
-      const childrenArray = React.Children.toArray(children);
-      const totalChildCount = childrenArray.length;
-      let tabListWidth = 0;
-      // @ts-ignore - TS2322 - Type 'MenuOption' is not assignable to type 'MenuOption'.
-      const menuOptions: Array<MenuOption> = [];
-
-      let nodes: React.ReactNode[] = [];
-      const tabListNodes: React.ReactNode[] = [];
-      for (let i = 0; i < totalChildCount; i++) {
-        const child = childrenArray[i];
-        const {
-          width = size100,
-          tabId,
-          label,
-          disabled,
-          iconName,
-          iconType,
-// @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;
-        const widthInt = parseInt(width);
-        tabListWidth = tabListWidth + widthInt;
-
-        if (tabListWidth < containerWidth || i === 0) {
-          const childOnSelect = (params: any) => {
-            onSelect && onSelect(params); // call the tab level onSelect
-          };
-          tabListNodes.push(
-// @ts-ignore - TS2769 - No overload matches this call.
-            React.cloneElement(child, {
-              size,
-              onSelect: childOnSelect,
-              selectedTab,
-            }),
-          );
-        } else {
-          menuOptions.push({
-            key: tabId,
-            label,
-            disabled,
-            iconLeft: iconName,
-            iconLeftType: iconType,
-          });
-        }
-      }
-
-// @ts-ignore - TS7031 - Binding element 'key' implicitly has an 'any' type. | TS7031 - Binding element 'label' implicitly has an 'any' type.
-      const menuOnSelect = ({key, label}) => {
-        onSelect && onSelect({tabId: key, label});
-      };
-      const selectedKeys = [selectedTab?.tabId || ''];
-
-      const isMenuOptionSelected = (() => {
-        for (let i = 0; i < menuOptions.length; i++) {
-          if (menuOptions[i].key === selectedTab?.tabId) {
-            return true;
-          }
-        }
-        return false;
-      })();
-
-      const tabDropDownNode = menuOptions.length ? (
-        <TabDropdown
-          key={'tabDropdown' + menuOptions.length}
-          size={size}
-// @ts-ignore - TS2322 - Type '({ key, label }: { key: any; label: any; }) => void' is not assignable to type '(option: MenuOption, arg2?: SyntheticEvent<HTMLElement, Event> | null | undefined) => unknown'.
-          onOptionSelect={menuOnSelect}
-          props={{
-            tab: {
-              iconName: 'ellipsis',
-              tabId: 'tab-dropdown',
-              selectedTab: {
-                tabId: isMenuOptionSelected ? 'tab-dropdown' : '',
-              },
-            },
-            menu: {
-              isFluid: false,
-              menuDisabled: false,
-              options: menuOptions,
-              selectedKeys,
-              width: menuWidth,
-            },
-          }}
-          elevation={elevation}
-        />
-      ) : null;
-
-      nodes = [...tabListNodes, tabDropDownNode];
-      return nodes;
-    };
-
-    React.useLayoutEffect(() => {
-// @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
-      if (ref.current && ref.current.offsetWidth) {
-        const availableContainerWidth =
-// @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
-          ref.current.offsetWidth -
-          (parseInt(size36) + parseInt(spaceMedium));
-        setContainerWidth(availableContainerWidth);
-      }
-      // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
-    }, [ref.current, width]);
-
-    return (
-      <div
-        ref={ref}
-        data-testid="Tabs"
-        className={classify(
-          css.tabsContainer,
-          {
-            [css.mediumSize]: size === 'medium',
-// @ts-ignore - TS2367 - This condition will always return 'false' since the types '"medium" | undefined' and '"small"' have no overlap.
-            [css.smallSize]: size === 'small',
-          },
-          classNames?.wrapper,
-        )}
-      >
-        {containerWidth ? childrenWithProps() : null}
-      </div>
-    );
-  });

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

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

package/lib/components/Tabs/index.ts

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

package/lib/components/Text/HighlightedText.stories.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-
-import type {TextProps} from './Text';
-import {ButtonTextMedium} from './Text';
-
-
-const DEFAULT_TEXT = 'The quick brown fox jumps over the lazy dog';
-const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Highlighted Text',
-  argTypes: {
-    color: {
-      options: colorOptions,
-      description:
-        'Color of text. Should be one of the predefined color string',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    className: {
-      description: 'External className to be applied on text wrapper',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    children: {
-      description: 'Content to be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    highlightString: {
-      description:
-        '`String` that needs to be highlighted. This can either be a **string** or a **string[]**',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'string | string[]'},
-      },
-    },
-    highlightedTextClassName: {
-      description: '`Highlighted string` className',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    highlightWithBackground: {
-      description: 'Highlight string with a background color',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'false'},
-      },
-    },
-    caseSensitiveHighlighting: {
-      description: 'Match case while highlighting a `String`',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'false'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Text component with highlighting',
-      description: {
-        component: `
-\`\`\`js
-import { Text } from "@spaced-out/ui-design-system/lib/components/Text";
-\`\`\`
-This story demonstrates highlighting inside a text component.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Text/Text.jsx',
-    },
-  },
-};
-
-export const _SingleString = (args: TextProps): React.ReactElement<React.ComponentProps<(_0: TextProps) => React.ReactNode>> => (<>
-  <ButtonTextMedium {...args}>{args.children}</ButtonTextMedium>
-</>);
-
-_SingleString.args = {
-  color: TEXT_COLORS.primary,
-  children: DEFAULT_TEXT,
-  highlightWithBackground: true,
-  highlightString: 'quick brown',
-};
-
-export const _MultipleString = (args: TextProps): React.ReactElement<React.ComponentProps<(_0: TextProps) => React.ReactNode>> => (<>
-  <ButtonTextMedium {...args}>{args.children}</ButtonTextMedium>
-</>);
-
-_MultipleString.args = {
-  color: TEXT_COLORS.primary,
-  children: DEFAULT_TEXT,
-  highlightWithBackground: true,
-  highlightString: ['quick brown', 'dog'],
-};