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

package/lib/components/Chip/Chip.stories.tsx

@@ -1,335 +0,0 @@
-import * as React from 'react';
-
-import {BasicDialog} from '../Dialog';
-
-import type {ChipProps} from './Chip';
-import {Chip, CHIP_SEMANTIC} from './Chip';
-
-import css from './Chip.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(CHIP_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Chip',
-  argTypes: {
-    wordBreak: {
-      description: 'word-break style to be applied on truncate',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'break-all'},
-      },
-    },
-    line: {
-      description:
-        'Number of lines to show, and lines after that will be truncated',
-      control: {
-        type: 'number',
-        min: 1,
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: 1},
-      },
-    },
-    size: {
-      description:
-        'Chip supports only three size variants namely small, medium and large. `small` < `medium` < `large`. `Small` variation does not have support for icons(both **custom icon** and **close icon**)',
-      control: 'radio',
-      options: ['large', 'medium', 'small'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    semantic: {
-      options: semanticOptions,
-      description:
-        'Semantic type of a Chip. It will have different background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: CHIP_SEMANTIC.primary},
-      },
-    },
-    showStatusIndicator: {
-      description:
-        'If **true**, the component would show a status indicator **only for medium sized chip**',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    disableHoverState: {
-      description:
-        'If **true**, the component would disable any hover states if present',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    onClick: {
-      description:
-        '**onClick** handler that is called when a chip is **clicked**',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    onDismiss: {
-      description:
-        '**onDismiss** handler that is applied to close icon of chip. This is only attached for **Medium** sized `Chip`',
-      action: 'onDismiss',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    onMouseEnter: {
-      description: '**onMouseEnter** handler that is called on hover in',
-      action: 'onMouseEnter',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    onMouseLeave: {
-      description: '**onMouseLeave** handler that is called on hover out',
-      action: 'onMouseLeave',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    dismissable: {
-      description:
-        'Close Icon will appear in right side in case it is true. This is only supported for **Medium** sized `Chip`',
-      name: 'dismissable',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    iconName: {
-      description:
-        'Custom icon to be displayed in the chip. This is only attached for **Medium** sized `Chip`',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        'Type of Icon for Chip. This is only supported for **Medium** sized `Chip`. 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'},
-      },
-    },
-    children: {
-      description: 'Content of the chip',
-      type: {required: true},
-      table: {
-        type: {summary: 'React.ReactNode | string'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional classNames to be applied to the wrapper, icon and statusIndicator',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, icon?: string, statusIndicator?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Chip component.',
-      description: {
-        component: `
-\`\`\`js
-import { Chip } from "@spaced-out/ui-design-system/lib/components/Chip";
-\`\`\`
-\`Chip\` is a singular **compact element** that represent an input, attribute, or action. They can be stacked in multiples according
-to needs. Chip supports multiple semantics and a practical use case would use multiple chips together. \`Chip\` grows with the content it encapsulates.
-
-There is also a **dismissable** variation which provides a callback on click of the Close Icon
-
-**dismissable** and **icon** variations are only available for **large** & **medium** sized chip. Chip content truncates itself on size crunch.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Chip/Chip.jsx',
-    },
-  },
-};
-
-export const _Clickable = (args: ChipProps) => {
-  const [showDialog, setShowDialog] = React.useState(false);
-
-  return (
-    <div className={css.container}>
-      <Chip {...args} onClick={() => setShowDialog(true)}></Chip>
-      <BasicDialog
-        semantic="information"
-        isOpen={showDialog}
-        heading="This is a Clickable Chip"
-        body="Normal Chips without onClick would not have any hover state"
-        confirmText="Got it!"
-        handleConfirm={() => setShowDialog(false)}
-        initialFocus={0}
-      ></BasicDialog>
-    </div>
-  );
-};
-
-_Clickable.args = {
-  children: 'Clickable Chip',
-};
-
-export const _Multiline = (args: ChipProps) => {
-  const [showDialog, setShowDialog] = React.useState(false);
-
-  return (
-    <div className={css.container}>
-      <Chip {...args} onClick={() => setShowDialog(true)}></Chip>
-      <BasicDialog
-        semantic="information"
-        isOpen={showDialog}
-        heading="This is a Multiline Chip"
-        body="Normal Chips without onClick would not have any hover state"
-        confirmText="Got it!"
-        handleConfirm={() => setShowDialog(false)}
-        initialFocus={0}
-      ></BasicDialog>
-    </div>
-  );
-};
-
-_Multiline.args = {
-  children: `Genesis is the foundational design system at Sense. It serves as the
-              single source of truth for our product UI crafted to ensure visual
-              consistency. Genesis is the foundational design system at Sense. It serves as the
-              single source of truth for our product UI crafted to ensure visual
-              consistency.`,
-  iconName: 'citrus',
-  line: 2,
-};
-
-export const _WithText = () => (<div className={css.container}>
-  <div className={css.chipContainer}>
-    <Chip semantic="primary">Primary Chip</Chip>
-    <Chip semantic="information">Information Chip</Chip>
-    <Chip semantic="secondary">Secondary Chip</Chip>
-  </div>
-</div>);
-
-_WithText.args = {
-  children: 'Clickable Chip',
-};
-
-export const _WithStatusIndicator = () => (<div className={css.container}>
-  <div className={css.container}>
-    <div className={css.chipContainer}>
-      <Chip semantic="primary" showStatusIndicator>
-        Primary Chip
-      </Chip>
-      <Chip semantic="information" showStatusIndicator>
-        Information Chip
-      </Chip>
-      <Chip semantic="secondary" showStatusIndicator>
-        Secondary Chip
-      </Chip>
-    </div>
-  </div>
-</div>);
-
-export const _WithIcon = () => (<div className={css.container}>
-  <div className={css.chipContainer}>
-    <Chip iconName="citrus" semantic="primary">
-      Primary Chip
-    </Chip>
-    <Chip iconName="grapes" semantic="information">
-      Information Chip
-    </Chip>
-    <Chip iconName="avocado" semantic="secondary">
-      Secondary Chip
-    </Chip>
-  </div>
-</div>);
-
-export const _Dismissable = () => {
-  const [showDialog, setShowDialog] = React.useState(false);
-
-  return (
-    <div className={css.container}>
-      <div className={css.container}>
-        <div className={css.chipContainer}>
-          <Chip
-            iconName="citrus"
-            semantic="primary"
-            dismissable
-            onDismiss={() => setShowDialog(true)}
-          >
-            Primary Chip
-          </Chip>
-
-          <Chip
-            iconName="grapes"
-            semantic="information"
-            dismissable
-            onDismiss={() => setShowDialog(true)}
-          >
-            Information Chip
-          </Chip>
-
-          <Chip
-            iconName="avocado"
-            semantic="secondary"
-            dismissable
-            onDismiss={() => setShowDialog(true)}
-          >
-            Secondary Chip
-          </Chip>
-        </div>
-        <BasicDialog
-          semantic="information"
-          isOpen={showDialog}
-          heading="I am dismissed"
-          body="Hello world!, I have been dismissed"
-          confirmText="Got it!"
-          handleConfirm={() => setShowDialog(false)}
-          initialFocus={0}
-        ></BasicDialog>
-      </div>
-    </div>
-  );
-};

package/lib/components/Chip/Chip.tsx

@@ -1,204 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {CloseIcon, Icon} from '../Icon';
-import {StatusIndicator} from '../StatusIndicator';
-import {Truncate} from '../Truncate';
-
-import css from './Chip.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  icon?: string;
-  statusIndicator?: string;
-}>;
-
-export const CHIP_SEMANTIC = Object.freeze({
-  primary: 'primary',
-  information: 'information',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  secondary: 'secondary',
-});
-
-export type ChipSemanticType = typeof CHIP_SEMANTIC[keyof typeof CHIP_SEMANTIC];
-
-export type BaseChipProps = {
-  classNames?: ClassNames;
-  semantic?: ChipSemanticType;
-  children: React.ReactNode;
-  disabled?: boolean;
-  showStatusIndicator?: boolean;
-  disableHoverState?: boolean;
-  line?: number;
-  wordBreak?: string;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  onMouseEnter?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  onMouseLeave?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-};
-
-export type LargeChipProps = ((BaseChipProps) & {
-  iconName?: string;
-  iconType?: IconType;
-  dismissable?: boolean;
-  onDismiss?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  size?: 'large';
-});
-
-export type MediumChipProps = ((LargeChipProps) & {
-  size?: 'medium';
-});
-
-export type SmallChipProps = ((BaseChipProps) & {
-  size?: 'small';
-});
-
-export type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;
-
-export const Chip: Flow.AbstractComponent<ChipProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, ChipProps>((
-    {
-      classNames,
-      semantic = 'primary',
-// @ts-ignore - TS2322 - Type '"medium"' is not assignable to type '"small" | "large"'.
-      size = 'medium',
-      children,
-// @ts-ignore - TS2339 - Property 'iconName' does not exist on type 'ChipProps'.
-      iconName = '',
-// @ts-ignore - TS2339 - Property 'iconType' does not exist on type 'ChipProps'.
-      iconType = 'regular',
-      showStatusIndicator,
-// @ts-ignore - TS2339 - Property 'dismissable' does not exist on type 'ChipProps'.
-      dismissable = false,
-// @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'ChipProps'.
-      onDismiss = () => null,
-      onClick,
-      disabled,
-      line = 1,
-      wordBreak,
-
-      // There is no reason for hover state to be active when there is no click handler attached
-      disableHoverState = !onClick,
-
-      ...restProps
-    }: ChipProps,
-    ref,
-  ) => {
-    /**
-     * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
-     *
-     * Rendering the `Chip` component as a button directly would have been ideal, as it would
-     * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
-     * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
-     * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
-     *
-     * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
-     * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
-     * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
-     * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
-     *
-     * Although this method might seem less conventional, it simplifies implementation and ensures
-     * backward compatibility while adhering to accessibility standards.
-     */
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-      const {key} = event;
-      if (key === 'Enter' || key === ' ') {
-        event.preventDefault(); // Prevent default action for Enter and Space keys
-        onClick?.(event);
-      }
-    };
-
-    return (
-      <div
-        data-testid="Chip"
-        {...restProps}
-        ref={ref}
-        className={classify(
-          css.chipWrapper,
-          {
-            [css.primary]: semantic === CHIP_SEMANTIC.primary,
-            [css.information]: semantic === CHIP_SEMANTIC.information,
-            [css.success]: semantic === CHIP_SEMANTIC.success,
-            [css.warning]: semantic === CHIP_SEMANTIC.warning,
-            [css.danger]: semantic === CHIP_SEMANTIC.danger,
-            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
-            [css.large]: size === 'large',
-// @ts-ignore - TS2367 - This condition will always return 'false' since the types '"small" | "large"' and '"medium"' have no overlap.
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.dismissable]: dismissable,
-            [css.withIcon]: !!iconName && size !== 'small',
-            [css.disabled]: disabled,
-            [css.noHoverState]:
-              showStatusIndicator || disableHoverState || disabled,
-          },
-          classNames?.wrapper,
-        )}
-// @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-        onClick={onClick}
-        onKeyDown={handleKeyDown}
-        tabIndex={
-          showStatusIndicator || disableHoverState || disabled ? undefined : 0
-        }
-        role={showStatusIndicator || disableHoverState ? undefined : 'button'}
-      >
-        {showStatusIndicator && size !== 'small' && (
-          <StatusIndicator
-            status={semantic}
-            classNames={{
-              wrapper: classify(
-                css.statusIndicatorBlock,
-                classNames?.statusIndicator,
-              ),
-            }}
-            disabled={disabled}
-          />
-        )}
-
-        {iconName && size !== 'small' && (
-          <Icon
-            className={classify(
-              css.chipIcon,
-              {[css.alignTop]: line > 1},
-              classNames?.icon,
-            )}
-            name={iconName}
-            type={iconType}
-            size="small"
-          />
-        )}
-        <Truncate line={line} wordBreak={wordBreak}>
-          {children}
-        </Truncate>
-
-        {dismissable && size !== 'small' && (
-          <CloseIcon
-            classNames={{
-              icon: css.dismissIcon,
-              button: classify(
-                {[css.alignTop]: line > 1},
-                css.dismissIconWrapper,
-              ),
-            }}
-            type={iconType}
-            size="small"
-            ariaLabel="Dismiss"
-            disabled={disabled}
-            onClick={(event) => {
-              event.stopPropagation();
-              if (!disabled && onDismiss) {
-                onDismiss(event);
-              }
-            }}
-          />
-        )}
-      </div>
-    );
-  });
-
-Chip.displayName = 'Chip';

package/lib/components/Chip/index.ts

@@ -1,2 +0,0 @@
-export type {ChipProps, ChipSemanticType} from './Chip';
-export {Chip, CHIP_SEMANTIC} from './Chip';

package/lib/components/CircularLoader/CircularLoader.stories.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-
-import type {CircularLoaderProps} from './CircularLoader';
-import {CircularLoader} from './CircularLoader';
-
-import css from './CircularLoader.stories.module.css';
-
-
-const colorOptions: Array<unknown> = [
-  ...Object.keys(COLORS).filter((color) => color.startsWith('colorText')),
-];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Circular Loader',
-  component: CircularLoader,
-  argTypes: {
-    size: {
-      description:
-        'Circular Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
-      options: ['large', 'medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    colorToken: {
-      description:
-        'Pass different text color token string to show loader in different color',
-      options: colorOptions,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'colorTextClickable'},
-      },
-    },
-    className: {
-      description: 'External className to be applied',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Circular Loader component',
-      description: {
-        component: `
-\`\`\`js
-import { CircularLoader } from "@spaced-out/ui-design-system/lib/components/CircularLoader";
-\`\`\`
-Circular loaders can be used to show infinite loading state. For **Linear Loader**
-check **<a href="../?path=/docs/components-linear-loader--docs">here</a>**
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/CircularLoader/CircularLoader.jsx',
-    },
-  },
-};
-
-export const _CircularLoader = (args: CircularLoaderProps) => (<div className={css.storyContainer}>
-  <CircularLoader {...args} />
-</div>);

package/lib/components/CircularLoader/CircularLoader.tsx

@@ -1,51 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-
-import css from './CircularLoader.module.css';
-
-
-export type CircularLoaderProps = {
-  size?: 'large' | 'medium' | 'small';
-  className?: string;
-  ariaLabel?: string;
-  // TODO: update it to permissible colors
-  colorToken?: keyof typeof COLORS;
-};
-
-export const CircularLoader: Flow.AbstractComponent<CircularLoaderProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, CircularLoaderProps>((
-  {
-    size = 'medium',
-    className,
-    colorToken = 'colorTextClickable',
-    ariaLabel = 'Loading',
-  }: CircularLoaderProps,
-  ref,
-) => (<div
-  className={classify(
-    css.container,
-    {
-      [css.mediumContainer]: size === 'medium',
-      [css.smallContainer]: size === 'small',
-    },
-    className,
-  )}
-  ref={ref}
-  aria-label={ariaLabel}
-  role="alert"
-  aria-busy="true"
->
-  <div className={css.spinLoader} aria-hidden="true">
-    <div
-      className={css.outerCircle}
-      style={{'--color': COLORS[colorToken]}}
-    ></div>
-    <div
-      className={css.ellipse}
-      style={{'--color': COLORS[colorToken]}}
-    ></div>
-  </div>
-</div>));

package/lib/components/CircularLoader/index.ts

@@ -1 +0,0 @@
-export {CircularLoader} from './CircularLoader';