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

package/lib/components/Link/Link.stories.tsx

@@ -1,302 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {ICON_SIZE, ICON_TYPE} from '../Icon';
-
-import type {LinkProps} from './';
-import {ANCHOR_REL, ANCHOR_TARGET, Link, LINK_AS} from './Link';
-
-import css from './Link.stories.module.css';
-
-
-const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
-const typographyOptions: Array<unknown> = [...Object.values(LINK_AS)];
-const anchorRelOptions: Array<unknown> = [...Object.values(ANCHOR_REL)];
-const anchorTargetOptions: Array<unknown> = [...Object.values(ANCHOR_TARGET)];
-const iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];
-const iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Link',
-  component: Link,
-  argTypes: {
-    color: {
-      options: colorOptions,
-      description:
-        'Color of the anchor. Should be one of the predefined color string',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'clickable'},
-      },
-    },
-    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: iconTypeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    iconLeftSize: {
-      description:
-        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`. [Only available in `<IconBadge />`]',
-      options: iconSizeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'small'},
-      },
-    },
-    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'},
-      },
-    },
-    iconRightSize: {
-      description:
-        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`. [Only available in `<IconBadge />`]',
-      options: iconSizeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'small'},
-      },
-    },
-    iconRightType: {
-      description:
-        'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: iconTypeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    as: {
-      options: typographyOptions,
-      description:
-        'Typography of the anchor. Should be one of the predefined typography options',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'buttonTextExtraSmall'},
-      },
-    },
-    linkComponent: {
-      description: `
-Custom component to be used as the root element
-
-**IMPORTANT:** If you are using \`to\` make sure to provide link component from your router
-if you want to prevent full page reloads in a Single Page Application (SPA).
-`,
-      table: {
-        type: {summary: 'React.Component'},
-      },
-    },
-    rel: {
-      options: anchorRelOptions,
-      description:
-        'The rel attribute specifies the relationship between the current document and the linked document. Only used if the href attribute is present.',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-      },
-    },
-    target: {
-      options: anchorTargetOptions,
-      description:
-        'The target property sets or returns the value of the target attribute of a link. The target attribute specifies where to open the linked document.',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-      },
-    },
-    to: {
-      description:
-        'Link to anchor to. Use this when you pass a router\'s Link component to the this',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    href: {
-      description:
-        'Link to anchor to. Don\'t use this if you don\'t want page reloads on route',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<a>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    tabIndex: {
-      description: 'Tab index applied to input',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 0},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    underline: {
-      description: 'Controls the default underline text decoration',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    children: {
-      description:
-        'Content to be displayed. If you are using react nodes here, this should only have inline elements since Link renders children inside `<a></a>`',
-      control: {
-        type: 'text',
-      },
-      type: {required: true},
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    className: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Link component.',
-      description: {
-        component: `
-\`\`\`js
-import { Link } from "@spaced-out/ui-design-system/lib/components/Link";
-\`\`\`
-The Link component enables developers to effortlessly customize anchor elements with their desired color schemes and typography.
-Furthermore, the Link component provides a simple and accessible way to implement hyperlinks in web pages.
-It offers various accessibility features, such as keyboard navigation, focus states, and screen reader support.
-
-The component uses \`React.forwardRef\` to pass the ref prop to the inner anchor element.
-
-**IMPORTANT**: If you are using \`href\` or \`to\` make sure to provide link component from your router
-if you want to prevent full page reloads in a Single Page Application (SPA).
-
-Using \`href\` in anchor tags causes the browser to navigate to a new URL,
-resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
-user experience without such reloads.
-
-To achieve client-side navigation and prevent page reloads, use client-side routing libraries
-(e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
-to handle navigation within your SPA. These components work without triggering full page reloads
-and maintain the SPA's performance and user experience.
-
-**Usage**
-
-\`\`\`jsx
-import {Link} from '@spaced-out/ui-design-system/lib/components/Link';
-
-<Link onClick={routeHandler}>Go to Pages</Link>
-\`\`\`
-
-
-**Usage with Routing Library**
-
-To use the \`Link\` with a routing Library, you would need to pass the \`linkComponent\` prop to the \`<Link>\` component.
-
-\`\`\`jsx
-import {Link} from 'src/rerouter';
-import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
-
-<GenesisLink linkComponent={Link} to="/pages">Go to Pages</GenesisLink>
-\`\`\`
-
-It'll replace the rendered a tag with routing library's Link.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Link/Link.jsx',
-    },
-  },
-};
-
-export const _Link = (args: LinkProps) => (<div className={css.container}>
-  <Link {...args} />
-</div>);
-
-_Link.args = {
-  children: 'Hello World!',
-};
-
-export const _WithLeftIcon = (args: LinkProps) => (<div className={css.container}>
-  <Link {...args} />
-</div>);
-
-_WithLeftIcon.args = {
-  children: 'Hello World!',
-  iconLeftName: 'link',
-};
-
-export const _WithRightIcon = (args: LinkProps) => (<div className={css.container}>
-  <Link {...args} />
-</div>);
-
-_WithRightIcon.args = {
-  children: 'Hello World!',
-  iconRightName: 'arrow-up-right-from-square',
-};

package/lib/components/Link/Link.tsx

@@ -1,231 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {IconSize, IconType} from '../Icon';
-import {Icon, ICON_SIZE} from '../Icon';
-
-import css from '../../styles/typography.module.css';
-
-
-export const LINK_AS = Object.freeze({
-  bodyLarge: 'bodyLarge',
-  bodyMedium: 'bodyMedium',
-  bodySmall: 'bodySmall',
-  buttonTextExtraSmall: 'buttonTextExtraSmall',
-  buttonTextMedium: 'buttonTextMedium',
-  buttonTextSmall: 'buttonTextSmall',
-  formInputMedium: 'formInputMedium',
-  formInputSmall: 'formInputSmall',
-  formLabelMedium: 'formLabelMedium',
-  formLabelSmall: 'formLabelSmall',
-  jumboMedium: 'jumboMedium',
-  subTitleExtraSmall: 'subTitleExtraSmall',
-  subTitleLarge: 'subTitleLarge',
-  subTitleMedium: 'subTitleMedium',
-  subTitleSmall: 'subTitleSmall',
-  titleMedium: 'titleMedium',
-});
-
-export type LinkAs = typeof LINK_AS[keyof typeof LINK_AS];
-
-export const ANCHOR_REL = Object.freeze({
-  alternate: 'alternate',
-  author: 'author',
-  bookmark: 'bookmark',
-  external: 'external',
-  help: 'help',
-  license: 'license',
-  next: 'next',
-  nofollow: 'nofollow',
-  noopener: 'noopener',
-  noreferrer: 'noreferrer',
-  search: 'search',
-  tag: 'tag',
-});
-
-export type AnchorRel = typeof ANCHOR_REL[keyof typeof ANCHOR_REL];
-
-export const ANCHOR_TARGET = Object.freeze({
-  _blank: '_blank',
-  _self: '_self',
-  _parent: '_parent',
-  _top: '_top',
-  framename: 'framename',
-});
-
-export type AnchorTarget = typeof ANCHOR_TARGET[keyof typeof ANCHOR_TARGET];
-
-export type BaseLinkProps = {
-  children: React.ReactNode;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  tabIndex?: number;
-  disabled?: boolean;
-  className?: string;
-  as?: LinkAs;
-  rel?: AnchorRel;
-  target?: AnchorTarget;
-  iconLeftName?: string;
-  iconLeftSize?: IconSize;
-  iconLeftType?: IconType;
-  iconRightName?: string;
-  iconRightSize?: IconSize;
-  iconRightType?: IconType;
-  /**
-     * IMPORTANT: If you are using `to` make sure to provide link component from your router
-     * if you want to prevent full page reloads in a Single Page Application (SPA).
-     *
-     * Using `href` in anchor tags causes the browser to navigate to a new URL,
-     * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
-     * user experience without such reloads.
-     *
-     * To achieve client-side navigation and prevent page reloads, use client-side routing libraries
-     * (e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
-     * to handle navigation within your SPA. These components work without triggering full page reloads
-     * and maintain the SPA's performance and user experience.
-     *
-     */
-  to?: string;
-  href?: string;
-};
-
-export type LinkProps = ((BaseLinkProps) & {
-  color?: ColorTypes;
-  underline?: boolean;
-  /**
-     * Provide your router's link component
-     *
-     * import {Link} from 'src/rerouter';
-     * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
-     *
-     * <GenesisLink linkComponent={Link} to="/pages" />
-     */
-  linkComponent?: Flow.AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>;
-});
-
-export const Link: Flow.AbstractComponent<LinkProps, HTMLAnchorElement | null | undefined> =
-  React.forwardRef<HTMLAnchorElement | null | undefined, LinkProps>((
-    {
-      color = TEXT_COLORS.clickable,
-      children,
-      className,
-      as = 'buttonTextExtraSmall',
-      underline = true,
-      tabIndex = 0,
-      disabled,
-      onClick,
-// @ts-ignore - TS2322 - Type 'ForwardRefExoticComponent<BaseLinkProps & RefAttributes<HTMLAnchorElement>>' is not assignable to type 'AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>'.
-      linkComponent: LinkComponent = DefaultLink,
-      iconLeftName,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "large" | "medium"'.
-      iconLeftSize = ICON_SIZE.small,
-      iconLeftType,
-      iconRightName,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "large" | "medium"'.
-      iconRightSize = ICON_SIZE.small,
-      iconRightType,
-      ...props
-    }: LinkProps,
-    ref,
-  ) => {
-    const linkRef = React.useRef(null);
-// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLAnchorElement | undefined'.
-    React.useImperativeHandle(ref, () => linkRef.current);
-    React.useEffect(() => {
-      if (disabled) {
-// @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
-        linkRef.current?.blur();
-      }
-    }, [disabled]);
-
-    const handleClick = (event: React.SyntheticEvent<HTMLElement>) => {
-      if (disabled) {
-        event.preventDefault();
-        return;
-      }
-
-      onClick?.(event);
-    };
-
-    /**
-     * By spec anchor tag wont call onClick on enter key press when the element is focussed
-     * as a workaround we would need to listen to key press event and call onClick
-     * manually, one workaround to avoid this is to have empty href along with onClick
-     * but that would break accessibility
-     */
-    const handleKeyPress = (event: any) => {
-      if (event.key === 'Enter' && onClick) {
-        handleClick(event);
-      }
-    };
-
-    return (
-      <LinkComponent
-        {...props}
-        tabIndex={disabled ? -1 : tabIndex}
-        ref={linkRef}
-        data-testid="Link"
-        className={classify(
-          css.link,
-          css[as],
-          css[color],
-          {
-            [css.underline]: underline && !(iconLeftName || iconRightName),
-            [css.disabled]: disabled,
-          },
-          className,
-        )}
-        onClick={handleClick}
-// @ts-ignore - TS2769 - No overload matches this call.
-        onKeyPress={handleKeyPress}
-      >
-        {!!iconLeftName && (
-          <Icon
-            name={iconLeftName}
-            size={iconLeftSize}
-            type={iconLeftType}
-            className={classify(css[color], {[css.disabled]: disabled})}
-          />
-        )}
-
-        <ConditionalWrapper
-          condition={Boolean(iconLeftName || iconRightName)}
-          wrapper={(children) => (
-            <span
-              className={classify({
-                [css.underline]: underline,
-              })}
-            >
-              {children}
-            </span>
-          )}
-        >
-          {children}
-        </ConditionalWrapper>
-
-        {!!iconRightName && (
-          <Icon
-            name={iconRightName}
-            size={iconRightSize}
-            type={iconRightType}
-            className={css[color]}
-          />
-        )}
-      </LinkComponent>
-    );
-  });
-
-const DefaultLink = React.forwardRef<HTMLAnchorElement, BaseLinkProps>(({children, href, to, ...props}, ref) => {
-  const resolvedHref = to ?? href;
-
-  return (
-// @ts-ignore - TS2322 - Type '{ children: React.ReactNode; href: string | undefined; ref: ForwardedRef<HTMLAnchorElement>; onClick?: ((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined; ... 11 more ...; iconRightType?: "regular" | ... 3 more ... | undefined; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-    <a {...props} href={resolvedHref} ref={ref}>
-      {children}
-    </a>
-  );
-});

package/lib/components/Link/index.ts

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