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

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.tsx

@@ -1,52 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../../utils/classify';
-import type {LinkProps} from '../../Link';
-import {Link} from '../../Link';
-
-import css from './BreadcrumbLink.module.css';
-
-
-export type BreadcrumbLinkProps = ((LinkProps) & {
-  isActive?: boolean;
-  id: string;
-  onClick?: (arg1: React.SyntheticEvent<HTMLElement>, id: string) => unknown;
-});
-
-export const BreadcrumbLink: Flow.AbstractComponent<BreadcrumbLinkProps, HTMLAnchorElement | null | undefined> = React.forwardRef<HTMLAnchorElement | null | undefined, BreadcrumbLinkProps>((
-  {
-    id,
-    className,
-    as,
-    underline = false,
-    isActive,
-    onClick,
-    href,
-    to,
-    ...props
-  }: BreadcrumbLinkProps,
-  ref,
-) => (
-  <Link
-    {...props}
-    to={to ?? href}
-    data-testid="BreadcrumbLink"
-    ref={ref}
-    as={as || 'subTitleExtraSmall'}
-    underline={underline}
-    disabled={isActive}
-    className={classify(
-      css.breadcrumbLink,
-// @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
-      {[css.active]: isActive ?? window.location.href.includes(to ?? href)},
-      className,
-    )}
-    onClick={(e) => {
-      onClick?.(e, id);
-    }}
-  />
-));
-
-BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/index.ts

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

package/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,189 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-
-import type {BreadcrumbsProps} from './';
-import {Breadcrumbs} from './Breadcrumbs';
-import {BreadcrumbLink} from './';
-
-import css from './Breadcrumbs.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Breadcrumbs/Breadcrumbs',
-  component: Breadcrumbs,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{ wrapper?: string }',
-        },
-      },
-    },
-    children: {
-      description:
-        'A list of `BreadcrumbLink` components to be displayed as breadcrumbs',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Breadcrumbs component.',
-      description: {
-        component: `
-\`\`\`js
-import { Breadcrumbs, BreadcrumbLink } from "@spaced-out/ui-design-system/lib/components/Breadcrumbs";
-\`\`\`
-Breadcrumbs is a component used to display a breadcrumb trail with clickable links.
-
-**Usage with \`Routing Library\`:**
-
-To use the \`Breadcrumbs\` with a routing Library, you would need to pass the \`linkComponent\` prop to the \`<BreadcrumbLink>\` component.
-
-**Routing** and **highlighting the selected page** would be handled by the component itself.
-
-\`\`\`jsx
-import {Link} from 'src/rerouter';
-import {Breadcrumbs, BreadcrumbLink} from '@spaced-out/ui-design-system/lib/components/Breadcrumbs';
-
-<Breadcrumbs linkComponent={Link}>
-  <BreadcrumbLink to="/page1" id="page1">Page 1</BreadcrumbLink>
-  <BreadcrumbLink to="/page2" id="page2">Page 2</BreadcrumbLink>
-  <BreadcrumbLink to="/page3" id="page3">Page 3</BreadcrumbLink>
-</Breadcrumbs>
-\`\`\`
-
-It'll replace the rendered a tag with routing library's Link.
-
-**Usage with \`onClick\`:**
-
-\`\`\`jsx
-<Breadcrumbs>
-  <BreadcrumbLink id="page1" onClick={handleClick} isActive={activePageId === 'page1'}>Page 1</BreadcrumbLink>
-  <BreadcrumbLink id="page2" onClick={handleClick} isActive={activePageId === 'page2'}>Page 2</BreadcrumbLink>
-  <BreadcrumbLink id="page3" onClick={handleClick} isActive={activePageId === 'page3'}>Page 3</BreadcrumbLink>
-</Breadcrumbs>
-\`\`\`
-
-In the above example, you can include multiple BreadcrumbLink components within the Breadcrumbs component to create a breadcrumb trail.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Breadcrumbs/Breadcrumbs.jsx',
-    },
-  },
-};
-
-const PAGES = [
-  {id: '1', name: 'Page #1'},
-  {id: '2', name: 'Page #2'},
-  {id: '3', name: 'Page #3'},
-  {id: '4', name: 'Page #4'},
-];
-
-export const _Breadcrumbs = (args: BreadcrumbsProps) => {
-  const [selectedPage, setSelectedPage] = React.useState('4');
-  const [pages, setPages] = React.useState(PAGES);
-
-  const onPageSelection = (_e: React.SyntheticEvent<HTMLElement>, pageId: string) => {
-    setSelectedPage(pageId);
-
-    // remove all pages after the selected page
-    setPages(pages.filter((page) => parseInt(page.id) <= parseInt(pageId)));
-  };
-
-  const addPage = () => {
-    const newPageId = (parseInt(pages[pages.length - 1].id) + 1).toString();
-    const newPageName = `Page #${newPageId}`;
-    setSelectedPage(newPageId);
-
-    setPages([...pages, {id: newPageId, name: newPageName}]);
-  };
-
-  return (
-    <div className={css.wrapper}>
-      <Breadcrumbs {...args}>
-        {pages.map((page) => (
-          <BreadcrumbLink
-            id={page.id}
-// @ts-ignore - TS2769 - No overload matches this call.
-            onClick={onPageSelection}
-            isActive={selectedPage === page.id}
-          >
-            {page.name}
-          </BreadcrumbLink>
-        ))}
-      </Breadcrumbs>
-      <div>
-        <Button iconLeftName="plus" size="small" onClick={addPage}>
-          Add Page
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_Breadcrumbs.args = {
-  classNames: {wrapper: ''},
-};
-
-export const _BreadcrumbsWithBorder = (args: BreadcrumbsProps) => {
-  const [selectedPage, setSelectedPage] = React.useState('4');
-  const [pages, setPages] = React.useState(PAGES);
-
-  const onPageSelection = (_e: React.SyntheticEvent<HTMLElement>, pageId: string) => {
-    setSelectedPage(pageId);
-
-    // remove all pages after the selected page
-    setPages(pages.filter((page) => parseInt(page.id) <= parseInt(pageId)));
-  };
-
-  const addPage = () => {
-    const newPageId = (parseInt(pages[pages.length - 1].id) + 1).toString();
-    const newPageName = `Page #${newPageId}`;
-    setSelectedPage(newPageId);
-
-    setPages([...pages, {id: newPageId, name: newPageName}]);
-  };
-
-  return (
-    <div className={css.wrapper}>
-      <Breadcrumbs
-        {...args}
-        classNames={{
-          wrapper: css.borderedWrapper,
-        }}
-      >
-        {pages.map((page) => (
-          <BreadcrumbLink
-            id={page.id}
-// @ts-ignore - TS2769 - No overload matches this call.
-            onClick={onPageSelection}
-            isActive={selectedPage === page.id}
-          >
-            {page.name}
-          </BreadcrumbLink>
-        ))}
-      </Breadcrumbs>
-      <div>
-        <Button iconLeftName="plus" size="small" onClick={addPage}>
-          Add Page
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_BreadcrumbsWithBorder.args = {
-  classNames: {wrapper: ''},
-};

package/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,59 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Icon} from '../Icon';
-import type {BaseLinkProps} from '../Link';
-
-import css from './Breadcrumbs.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type BreadcrumbsProps = {
-  classNames?: ClassNames;
-  children: React.ReactNode;
-  linkComponent?: Flow.AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>;
-};
-
-const BreadcrumbSeparator = () => (<Icon
-  className={css.separator}
-  name="chevron-right"
-  size="small"
-  color="secondary"
-/>);
-
-export const Breadcrumbs: Flow.AbstractComponent<BreadcrumbsProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, BreadcrumbsProps>(({
-  classNames,
-  children,
-  linkComponent,
-}: BreadcrumbsProps, ref) => {
-  const total = React.Children.count(children);
-
-  return (
-    <div
-      ref={ref}
-      data-testid="Breadcrumbs"
-      className={classify(css.wrapper, classNames?.wrapper)}
-    >
-      {React.Children.map(children, (child, idx) => (
-        // eslint-disable-next-line react/no-array-index-key
-        (<React.Fragment key={`crumb-${idx}`}>
-          {/*add linkComponent to BreadcrumbLinks only,
-          otherwise return original element */}
-          {React.isValidElement(child) &&
-// @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
-          child?.type?.displayName === 'BreadcrumbLink'
-// @ts-ignore - TS2769 - No overload matches this call.
-            ? React.cloneElement(child, {linkComponent})
-            : child}
-          {/*Add Separator*/}
-          {idx < total - 1 && <BreadcrumbSeparator aria-hidden />}
-        </React.Fragment>)
-      ))}
-    </div>
-  );
-});

package/lib/components/Breadcrumbs/index.ts

@@ -1,2 +0,0 @@
-export * from './BreadcrumbLink';
-export * from './Breadcrumbs';

package/lib/components/Button/Button.stories.tsx

@@ -1,220 +0,0 @@
-import * as React from 'react';
-
-import type {ButtonProps} from './Button';
-import {Button, BUTTON_ACTION_TYPE, BUTTON_SIZE, BUTTON_TYPES} from './Button';
-
-
-const actionTypeOptions: Array<unknown> = [...Object.values(BUTTON_ACTION_TYPE)];
-const buttonTypeOptions: Array<unknown> = [...Object.values(BUTTON_TYPES)];
-const buttonSizeOptions: Array<unknown> = [...Object.values(BUTTON_SIZE)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Button',
-  component: Button,
-  argTypes: {
-    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, icon?: string, text?: string}'},
-      },
-    },
-    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'},
-      },
-    },
-    iconRightName: {
-      description:
-        'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconRightType: {
-      description:
-        'Type of Right 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: buttonTypeOptions,
-      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:
-        'Type of action to perform upon Button click. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'submit'},
-      },
-    },
-    size: {
-      description:
-        'Button supports only two size variants namely small and medium. `small` < `medium`',
-      options: buttonSizeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    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 Button do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Button component',
-      description: {
-        component: `
-\`\`\`js
-import { Button } from "@spaced-out/ui-design-system/lib/components/Button";
-\`\`\`
-Buttons allow users to take actions. Button comes with multiple variants and has various states(hover, focus, etc). Variation also include
-an Icon only variant, it is rendered when no content(child) is passed to the button. An unstyled button is also present for one off use cases
-where we want to style the button differently.
-
-**Note: ** Always use \`ariaLabel\` with Icon only button for accessibility
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Button/Button.jsx',
-    },
-  },
-};
-
-/** Text only Button */
-export const _TextOnly = (args: ButtonProps) => (<Button {...args} />);
-
-_TextOnly.args = {
-  children: 'Primary Button Text',
-  type: 'primary',
-  size: 'medium',
-};
-
-export const _TextIconLeft = (args: ButtonProps) => (<Button {...args} />);
-
-_TextIconLeft.args = {
-  children: 'Button Text',
-  type: 'primary',
-  size: 'medium',
-  iconLeftName: 'face-party',
-};
-
-export const _TextIconRight = (args: ButtonProps) => (<Button {...args} />);
-
-_TextIconRight.args = {
-  children: 'Button Text',
-  type: 'primary',
-  size: 'medium',
-  iconRightName: 'face-party',
-};
-
-export const _IconOnly = (args: ButtonProps) => (<Button {...args} />);
-
-_IconOnly.args = {
-  type: 'primary',
-  size: 'medium',
-  iconRightName: 'face-party',
-  ariaLabel: 'Icon Button',
-};
-
-export const _Gradient = (args: ButtonProps) => (<Button {...args} />);
-
-_Gradient.args = {
-  type: 'gradient',
-  iconLeftName: 'sparkles',
-  iconLeftType: 'solid',
-  children: 'Sense AI',
-};