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

package/lib/components/ProgressDonut/ProgressDonut.stories.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-
-import type {ProgressDonutProps} from './';
-import {ProgressDonut} from './';
-
-import css from './ProgressDonut.stories.module.css';
-
-
-const colorOptions: Array<unknown> = [
-  '--',
-  ...Object.keys(COLORS).filter((color) => color.startsWith('colorText')),
-];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Progress Donut',
-  component: ProgressDonut,
-  argTypes: {
-    classNames: {
-      description:
-        'Provide an optional classNames to be applied to the wrapper, {wrapper?: string}',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{ wrapper?: string }',
-        },
-      },
-    },
-    percentage: {
-      description:
-        'Represents the completion percentage of the donut progress, ranging from 0 to 100 inclusive',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: 0},
-      },
-    },
-    color: {
-      description:
-        'Pass different text color token string to show loader in different color',
-      options: colorOptions,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a ProgressDonut component.',
-      description: {
-        component: `
-\`\`\`js
-import { ProgressDonut } from "@spaced-out/ui-design-system/lib/components/ProgressDonut";
-\`\`\`
-A progress indicator in the shape of a donut chart to visually represent completion percentages. This component uses configurable colors based on the percentage range, and supports an optional custom color.
-
-**Usage: **
-\`\`\`
-<ProgressDonut
-  percentage={75}
-  color="colorFillPrimary" // Optional custom color
-/>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ProgressDonut/ProgressDonut.jsx',
-    },
-  },
-};
-
-export const _Default = (args: ProgressDonutProps) => (<div className={css.container}>
-  <ProgressDonut {...args} />
-</div>);
-
-_Default.args = {
-  percentage: 90,
-};
-
-export const _WithCustomColor = (args: ProgressDonutProps) => (<div className={css.container}>
-  <ProgressDonut {...args} />
-</div>);
-
-_WithCustomColor.args = {
-  percentage: 47,
-  color: 'colorTextInformation',
-};

package/lib/components/ProgressDonut/ProgressDonut.tsx

@@ -1,111 +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 {BodyLargeBold} from '../Text';
-
-import css from './ProgressDonut.module.css';
-
-
-const STROKE_WIDTH = 8;
-const MIN_PERCENTAGE = 0;
-const DIVISOR_TWO = 2;
-const MAX_PERCENTAGE = 100;
-const SUCCESS_THRESHOLD = 80;
-const LARGE_DONUT_SIZE = 72;
-const INFO_THRESHOLD = 50;
-const WARNING_THRESHOLD = 30;
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type ProgressDonutProps = {
-  classNames?: ClassNames;
-  color?: keyof typeof COLORS;
-  percentage: number;
-};
-
-const getProgressDonutColor = (percentage: number): string => {
-  if (percentage >= SUCCESS_THRESHOLD) {
-    return COLORS.colorSuccess;
-  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
-    return COLORS.colorInformation;
-  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
-    return COLORS.colorWarning;
-  } else {
-    return COLORS.colorDanger;
-  }
-};
-
-export const ProgressDonut: Flow.AbstractComponent<ProgressDonutProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ProgressDonutProps>(({
-  classNames,
-  percentage = 0,
-// @ts-ignore - TS2322 - Type '""' is not assignable to type '"colorTextPrimary" | "colorTextSecondary" | "colorTextTertiary" | "colorTextDisabled" | "colorTextClickable" | "colorTextNeutral" | "colorTextSuccess" | "colorTextInformation" | ... 95 more ... | "colorDangerDarkest"'.
-  color = '',
-}: ProgressDonutProps, ref) => {
-  const donutPercentage = React.useMemo(
-    () => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE),
-    [percentage],
-  );
-  const donutColor = React.useMemo(
-    () => getProgressDonutColor(donutPercentage),
-    [donutPercentage],
-  );
-
-  const radius = React.useMemo(
-    () => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO,
-    [LARGE_DONUT_SIZE],
-  );
-  const circumference = React.useMemo(
-    () => DIVISOR_TWO * Math.PI * radius,
-    [radius],
-  );
-  const offset = React.useMemo(
-    () => circumference - (donutPercentage / MAX_PERCENTAGE) * circumference,
-    [circumference, donutPercentage],
-  );
-
-  return (
-    <div
-      ref={ref}
-      data-testid="ProgressDonut"
-      className={classify(css.wrapper, classNames?.wrapper)}
-    >
-      <div className={css.donutChart}>
-        <svg
-          width={LARGE_DONUT_SIZE}
-          height={LARGE_DONUT_SIZE}
-          viewBox={`0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`}
-          className={css.donutChartSvg}
-        >
-          <circle
-            className={css.donutChartBackground}
-            cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
-            cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
-            r={radius}
-            strokeWidth={STROKE_WIDTH}
-          />
-          <circle
-            className={css.donutChartForeground}
-            cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
-            cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
-            r={radius}
-            strokeWidth={STROKE_WIDTH}
-            strokeDasharray={circumference}
-            strokeDashoffset={
-              donutPercentage === MIN_PERCENTAGE ? circumference : offset
-            }
-            stroke={COLORS[color] || donutColor}
-            strokeLinecap="round"
-          />
-        </svg>
-        <BodyLargeBold className={css.donutChartPercentage}>
-          {`${donutPercentage}%`}
-        </BodyLargeBold>
-      </div>
-    </div>
-  );
-});

package/lib/components/ProgressDonut/index.ts

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

package/lib/components/PromptChip/PromptChip.stories.tsx

@@ -1,202 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {Button} from '../Button';
-
-import type {PromptChipProps} from './PromptChip';
-import {PROMPT_CHIP_TYPE, PromptChip} from './PromptChip';
-
-import css from './PromptChip.stories.module.css';
-
-
-const typeOptions: Array<unknown> = [...Object.values(PROMPT_CHIP_TYPE)];
-const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Prompt Chip',
-  component: PromptChip,
-  argTypes: {
-    type: {
-      options: typeOptions,
-      description:
-        'Type of PromptChip. It will have different Border and background color for different type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: PROMPT_CHIP_TYPE.primary},
-      },
-    },
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the wrapper div element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    iconType: {
-      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: 'solid'},
-      },
-    },
-    iconName: {
-      description:
-        'Icon Name represents name of icon as supported by fontawesome',
-      type: {required: true},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'lightbulb'},
-      },
-    },
-    iconColor: {
-      description: 'Same set of colors as supported in text',
-      options: colorOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'clickable'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, icon?: string, children?: string, container?: string}',
-        },
-      },
-    },
-    dismissable: {
-      description: 'Close Icon will appear in right side in case it is true',
-      name: 'dismissable',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    onDismiss: {
-      description:
-        '**onDismiss** handler that is applied to close icon of prompt chip.',
-      action: 'onDismiss',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    selfDismiss: {
-      description: `This prop is valid only in case dismissable is true.
-      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
-      name: 'selfDismiss',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    showInfoIcon: {
-      description: `Info icon will appear on the right in case it is true`,
-      name: 'showInfoIcon',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    infoIconTooltip: {
-      description: `Tooltip props to use on the info icon. This prop is valid only in case showInfoIcon is true.`,
-      name: 'infoIconTooltip',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'TooltipProps'},
-      },
-    },
-    children: {
-      description: 'The content of the PromptChip',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    rightSlot: {
-      description: 'The content on the right side of PromptChip',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Prompt Chip component',
-      description: {
-        component: `
-\`\`\`jsx
-import { PromptChip } from "@spaced-out/ui-design-system/lib/components/PromptChip";
-\`\`\`
-**PromptChip** 
-
-Use this component to easily display a set of interactive prompt chips that users can select by clicking on them. Each chip represents a prompt or option, allowing users to make a quick selection in a compact and visually appealing way. 
-
-**Usage:**
-  
-\`\`\`jsx
-<PromptChip
-  children='Would you like to schedule a meeting with the candidate?'
-/>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/PromptChip/PromptChip.jsx',
-    },
-  },
-};
-
-export const _Default = (args: PromptChipProps) => (<div className={css.storyContainer}>
-  <PromptChip {...args} />
-</div>);
-
-_Default.args = {
-  children: 'Would you like to schedule a meeting with the candidate?',
-};
-
-export const _WithRightSlot = (args: PromptChipProps) => (<div className={css.storyContainer}>
-  <PromptChip {...args} />
-</div>);
-
-_WithRightSlot.args = {
-  children: 'The quick brown fox jumps over the lazy dog',
-  type: 'secondary',
-  onClick: null,
-  rightSlot: ((<>
-    <Button type="secondary" size="small" children="Secondary" />
-    <Button size="small" children="Primary" />
-  </>) as React.ReactElement<React.ComponentProps<React.ComponentType>>),
-};
-
-export const _WithInfoIcon = (args: PromptChipProps) => (<div className={css.storyContainer}>
-  <PromptChip {...args} />
-</div>);
-
-_WithInfoIcon.args = {
-  children: 'The quick brown fox jumps over the lazy dog',
-  infoIconTooltip: {
-    title: 'This is info icon',
-  },
-  showInfoIcon: true,
-};

package/lib/components/PromptChip/PromptChip.tsx

@@ -1,166 +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 {IconType} from '../Icon';
-import {CloseIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './PromptChip.module.css';
-
-
-type ClassNames = Readonly<{
-  icon?: string;
-  wrapper?: string;
-  children?: string;
-  container?: string;
-}>;
-
-export const PROMPT_CHIP_TYPE = Object.freeze({
-  primary: 'primary',
-  secondary: 'secondary',
-});
-
-export type PromptChipType = typeof PROMPT_CHIP_TYPE[keyof typeof PROMPT_CHIP_TYPE];
-export type PromptChipProps = ({
-  classNames?: ClassNames;
-} & ({
-  onDismiss?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  dismissable: true;
-  selfDismiss?: boolean;
-} | {
-  dismissable?: false;
-}) & {
-  type?: PromptChipType;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  iconName?: string;
-  iconType?: IconType;
-  children?: React.ReactNode;
-  iconColor?: ColorTypes;
-  rightSlot?: React.ReactNode;
-  showInfoIcon?: boolean;
-  infoIconTooltip?: BaseTooltipProps;
-});
-
-export const PromptChip: Flow.AbstractComponent<PromptChipProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, PromptChipProps>((props: PromptChipProps, ref) => {
-  const {
-    type = PROMPT_CHIP_TYPE.primary,
-    onClick,
-    iconType = ICON_TYPE.solid,
-    iconName = 'lightbulb',
-    children,
-    iconColor,
-    rightSlot,
-// @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'PromptChipProps'.
-    onDismiss,
-    classNames,
-    dismissable,
-// @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'PromptChipProps'.
-    selfDismiss,
-    showInfoIcon,
-    infoIconTooltip,
-  } = props;
-  const [dismissed, setDismissed] = React.useState(false);
-  const closeClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-    e.stopPropagation();
-    onDismiss?.(e);
-    selfDismiss && setDismissed(true);
-  };
-
-  return (
-    <>
-      {!dismissed && (
-        <div
-          ref={ref}
-          data-testid="Prompt-Chip"
-          className={classify(
-            css.promptChipWrapper,
-            {
-              [css.primary]: type === PROMPT_CHIP_TYPE.primary,
-              [css.secondary]: type === PROMPT_CHIP_TYPE.secondary,
-            },
-            classNames?.wrapper,
-          )}
-          onClick={(event) => {
-            onClick?.(event);
-          }}
-          tabIndex={onClick ? 0 : undefined}
-          role="button"
-        >
-          <div
-            className={classify(
-              css.promptChipContainer,
-              {
-                [css.promptChipContainerHover]: !!onClick,
-              },
-              classNames?.container,
-            )}
-          >
-            <div className={css.leftSection}>
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-              <Icon
-                size={ICON_SIZE.small}
-                name={iconName}
-                type={iconType}
-                color={iconColor}
-                className={classify(
-                  {
-                    [css.chipIconDefaultColor]: !iconColor,
-                  },
-                  classNames?.icon,
-                )}
-              />
-              {!!children && (
-                <div
-                  className={classify(
-                    css.childrenWrapper,
-                    classNames?.children,
-                  )}
-                >
-                  {children}
-                </div>
-              )}
-            </div>
-            <div className={css.rightSection}>
-              {rightSlot ? rightSlot : null}
-              {!!showInfoIcon && (
-                <ConditionalWrapper
-                  condition={
-                    infoIconTooltip &&
-                    typeof infoIconTooltip === 'object' &&
-                    Object.keys(infoIconTooltip).length > 0
-                  }
-                  wrapper={(children) => (
-                    <Tooltip {...infoIconTooltip}>{children}</Tooltip>
-                  )}
-                >
-                  <Icon
-// @ts-ignore - TS2769 - No overload matches this call.
-                    size={ICON_SIZE.small}
-                    name="info-circle"
-                    color={TEXT_COLORS.primary}
-                    className={classNames?.icon}
-                  />
-                </ConditionalWrapper>
-              )}
-              {!!dismissable && (
-                <CloseIcon
-// @ts-ignore - TS2769 - No overload matches this call.
-                  size={ICON_SIZE.small}
-                  onClick={closeClickHandler}
-                  ariaLabel="Dismiss"
-                  className={css.dismissIcon}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-});

package/lib/components/PromptChip/index.ts

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