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

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

@@ -0,0 +1,302 @@
+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

@@ -0,0 +1,231 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export * from './Link';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib/components/Link/index.ts

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

package/lib/components/Menu/Menu.d.ts

@@ -0,0 +1,74 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';
+import type { IconType } from '../Icon/Icon';
+type ClassNames = MenuClassNames;
+type OptionClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type Virtualization = Readonly<{
+    enable: boolean;
+    itemHeight?: number;
+    menuHeight?: number;
+}>;
+export type MenuOption = {
+    key: string;
+    classNames?: OptionClassNames;
+    label?: string;
+    secondaryLabel?: string;
+    customComponent?: React.ReactNode;
+    iconLeft?: string;
+    iconLeftType?: IconType;
+    iconRight?: string;
+    iconRightType?: IconType;
+    disabled?: boolean;
+    optionSize?: MenuSizeTypes;
+    optionVariant?: MenuOptionsVariant;
+    keepMenuOpenOnOptionSelect?: boolean;
+    indeterminate?: boolean;
+};
+export type BaseMenuProps = {
+    onSelect?: (option: MenuOption, arg2?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
+    selectedOption?: MenuOption | null | undefined;
+    optionsVariant?: MenuOptionsVariant;
+    selectedKeys?: Array<string>;
+    classNames?: ClassNames;
+    size?: MenuSizeTypes;
+    width?: string;
+    menuDisabled?: boolean;
+    isFluid?: boolean;
+    onTabOut?: () => unknown;
+    allowSearch?: boolean;
+    resolveLabel?: (option: MenuOption) => string | React.ReactNode;
+    resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
+    virtualization?: Virtualization;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    showResultText?: boolean;
+    staticLabels?: {
+        RESULT?: string;
+        RESULTS?: string;
+        SEARCH_PLACEHOLDER?: string;
+    };
+    showLabelTooltip?: MenuLabelTooltip;
+    allowWrap?: boolean;
+};
+export type MenuOptionTypes = {
+    options?: Array<MenuOption>;
+    composeOptions?: Array<Array<MenuOption>>;
+    groupTitleOptions?: Array<MenuGroupTitleOption>;
+};
+export type MenuSizeTypes = 'medium' | 'small';
+export type MenuOptionsVariant = 'checkbox' | 'radio' | 'normal';
+export type MenuGroupTitleOption = {
+    groupTitle?: React.ReactNode;
+    options?: Array<MenuOption>;
+    showLineDivider?: boolean;
+};
+export type MenuProps = ((BaseMenuProps) & (MenuOptionTypes));
+export type RenderOptionProps = ((MenuProps) & {
+    searchText?: string;
+});
+export declare const Menu: Flow.AbstractComponent<MenuProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

package/lib/components/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/lib/components/Menu/Menu.js

@@ -14,7 +14,7 @@ var _MenuOptionButton = require("./MenuOptionButton");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowIssue[nonstrict-import] react-window
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // Render first available option set
 
 const menuSizeMedium = 276,
@@ -56,7 +56,10 @@ const RenderOption = _ref => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, finalResultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+    }, finalResultText), virtualization && isVirtualizationEnabled ?
+    /*#__PURE__*/
+    // @ts-ignore - TS2769 - No overload matches this call.
+    React.createElement(_reactWindow.FixedSizeList, {
       height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
       itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
       itemCount: optionsFiltered.length