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

package/lib/components/SideMenuLink/SideMenuLink.tsx

@@ -1,344 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import {Icon} from '../Icon';
-import type {BaseLinkProps} from '../Link';
-import {Link} from '../Link';
-import type {StatusSemanticType} from '../StatusIndicator';
-import {StatusIndicator} from '../StatusIndicator';
-import {BodyMedium, SubTitleSmall, TEXT_COLORS} from '../Text';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './SideMenuLink.module.css';
-
-
-export const MENU_NAME_LIST = Object.freeze({
-  dashboard: {
-    title: 'Dashboard',
-    iconName: 'house',
-    iconType: 'duotone',
-  },
-  engage: {
-    title: 'Engage',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  journeys: {
-    title: 'Journeys',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  automation: {
-    title: 'Automation',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  trm: {
-    title: 'TRM',
-    iconName: 'screen-users',
-    iconType: 'duotone',
-  },
-  analytics: {
-    title: 'Analytics & Data',
-    iconName: 'chart-column',
-    iconType: 'duotone',
-  },
-  messaging: {
-    title: 'Messaging',
-    iconName: 'messages',
-    iconType: 'duotone',
-  },
-  messages: {
-    title: 'Messaging',
-    iconName: 'messages',
-    iconType: 'duotone',
-  },
-  chatbot: {
-    title: 'Chatbot',
-    iconName: 'message-bot',
-    iconType: 'duotone',
-  },
-  referral: {
-    title: 'Referrals',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  referrals: {
-    title: 'Referrals',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  records: {
-    title: 'Records',
-    iconName: 'folder-open',
-    iconType: 'duotone',
-  },
-  'database-cleanup': {
-    title: 'Bulk Cleanup',
-    iconName: 'retweet',
-    iconType: 'duotone',
-  },
-  support: {
-    title: 'Support',
-    iconName: 'headset',
-    iconType: 'duotone',
-  },
-  audit: {
-    title: 'Audit',
-    iconName: 'print-magnifying-glass',
-    iconType: 'duotone',
-  },
-  schedule: {
-    title: 'Timeline',
-    iconName: 'timeline',
-    iconType: 'duotone',
-  },
-  people: {
-    title: 'People',
-    iconName: 'people-group',
-    iconType: 'duotone',
-  },
-  contacts: {
-    title: 'Contacts',
-    iconName: 'address-card',
-    iconType: 'duotone',
-  },
-  meetings: {
-    title: 'Meetings',
-    iconName: 'calendars',
-    iconType: 'duotone',
-  },
-  contacts3: {
-    title: 'Contacts',
-    iconName: 'browser',
-    iconType: 'duotone',
-  },
-  senseai: {
-    title: 'AI Copilot',
-    iconName: 'sparkles',
-    iconType: 'duotone',
-  },
-  'sense-jd-ai': {
-    title: 'Jd generator',
-    iconName: 'sparkles',
-    iconType: 'duotone',
-  },
-  tracking: {
-    title: 'Tracking',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  jobs: {
-    title: 'Jobs',
-    iconName: 'briefcase',
-    iconType: 'duotone',
-  },
-  drive: {
-    title: 'Events',
-    iconName: 'briefcase',
-    iconType: 'duotone',
-  },
-  conversations: {
-    title: 'Conversations',
-    iconName: 'message-smile',
-    iconType: 'duotone',
-  },
-  pages: {
-    title: 'Pages',
-    iconName: 'pager',
-    iconType: 'duotone',
-  },
-  sourcing: {
-    title: 'Sourcing',
-    iconName: 'browser',
-    iconType: 'duotone',
-  },
-  earnings: {
-    title: 'Earnings',
-    iconName: 'wallet',
-    iconType: 'duotone',
-  },
-  settings: {
-    title: 'Settings',
-    iconName: 'gear',
-    iconType: 'duotone',
-  },
-  configuration: {
-    title: 'Configuration',
-    iconName: 'gear',
-    iconType: 'duotone',
-  },
-  supportLinks: {
-    title: 'Support Links',
-    iconName: 'circle-question',
-    iconType: 'duotone',
-  },
-  voiceflow: {
-    title: 'Voiceflow',
-    iconName: 'phone-volume',
-    iconType: 'duotone',
-  },
-  broadcast: {
-    title: 'Broadcast',
-    iconName: 'bullhorn',
-    iconType: 'duotone',
-  },
-  liveAgentTransfer: {
-    title: 'Live Agent Transfer',
-    iconName: 'user-headset',
-    iconType: 'duotone',
-  },
-  dataManagement: {
-    title: 'Data Management',
-    iconName: 'database',
-    iconType: 'duotone',
-  },
-});
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type SideMenuLinkProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  customTitle?: string;
-  pageNameKey: string;
-  disabled?: boolean;
-  hovered?: boolean;
-  selectedValue?: string;
-  opened?: boolean;
-  onChange?: (e: React.SyntheticEvent<HTMLElement>, newValue: string) => unknown;
-  tabIndex?: number;
-  tooltip?: BaseTooltipProps;
-  isGroupMenuLink?: boolean;
-  to?: string;
-  rightSlot?: React.ReactNode;
-  linkComponent?: Flow.AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>;
-  status?: StatusSemanticType;
-};
-
-export const SideMenuLink: Flow.AbstractComponent<SideMenuLinkProps, HTMLButtonElement> = React.forwardRef<HTMLButtonElement, SideMenuLinkProps>((
-  {
-    classNames,
-    pageNameKey,
-    disabled,
-    opened,
-    selectedValue,
-    onChange,
-    tabIndex = 0,
-    tooltip,
-    isGroupMenuLink = false,
-    linkComponent: LinkComponent,
-    rightSlot,
-    to,
-    customTitle,
-    status,
-    ...restButtonProps
-  }: SideMenuLinkProps,
-  ref,
-) => {
-  const selected = selectedValue === pageNameKey;
-  const inActive = !onChange;
-  const onChangeHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-    onChange && onChange(e, pageNameKey);
-  };
-
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; automation: { ...; }; ... 31 more ...; dataManagement: { ...; }; }>'.
-  const linkTitle = customTitle || MENU_NAME_LIST[pageNameKey].title;
-
-  return (
-    <ConditionalWrapper
-      condition={to !== undefined}
-      wrapper={(children) => (
-        <Link
-          to={to}
-          tabIndex={-1}
-          linkComponent={LinkComponent}
-          className={classify(css.linkComponent, {
-            [css.closed]: !opened,
-          })}
-          onClick={onChangeHandler}
-        >
-          {children}
-        </Link>
-      )}
-    >
-      <ConditionalWrapper
-        condition={Boolean(!opened && !inActive)}
-        wrapper={(children) => (
-          <Tooltip body={linkTitle} {...tooltip}>
-            {children}
-          </Tooltip>
-        )}
-      >
-        <UnstyledButton
-          {...restButtonProps}
-          className={classify(
-            css.linkWrapper,
-            {
-              [css.selected]: selected,
-              [css.disabled]: disabled,
-              [css.inActive]: inActive,
-              [css.closed]: !opened,
-            },
-            classNames?.wrapper,
-          )}
-          onClick={onChangeHandler}
-          ref={ref}
-          tabIndex={disabled ? -1 : tabIndex}
-          disabled={disabled}
-          key={pageNameKey}
-        >
-{ /* @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; automation: { ...; }; ... 31 more ...; dataManagement: { ...; }; }>'. */}
-          {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-            <div className={css.iconContainer}>
-              {status && (
-                <StatusIndicator
-                  status={status}
-                  classNames={{
-                    wrapper: css.statusIndicatorBlock,
-                  }}
-                />
-              )}
-              <Icon
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; automation: { ...; }; ... 31 more ...; dataManagement: { ...; }; }>'.
-                type={MENU_NAME_LIST[pageNameKey].iconType}
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; automation: { ...; }; ... 31 more ...; dataManagement: { ...; }; }>'.
-                name={MENU_NAME_LIST[pageNameKey].iconName}
-                size="medium"
-                color={TEXT_COLORS.inverseSecondary}
-                className={css.menuIcon}
-              />
-            </div>
-          ) : null}
-          {opened ? (
-            <div className={css.menuLabelContainer}>
-{ /* @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; automation: { ...; }; ... 31 more ...; dataManagement: { ...; }; }>'. */}
-              {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-                isGroupMenuLink ? (
-                  <SubTitleSmall className={css.groupMenuLinkText}>
-                    {linkTitle}
-                  </SubTitleSmall>
-                ) : (
-                  <BodyMedium className={css.menuLinkText}>
-                    {linkTitle}
-                  </BodyMedium>
-                )
-              ) : null}
-
-              {rightSlot ? rightSlot : null}
-            </div>
-          ) : null}
-        </UnstyledButton>
-      </ConditionalWrapper>
-    </ConditionalWrapper>
-  );
-});
-
-SideMenuLink.displayName = 'SideMenuLink';

package/lib/components/SideMenuLink/index.ts

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

package/lib/components/StatusIndicator/StatusIndicator.stories.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import {BodySmall} from '../Text';
-
-import type {StatusIndicatorProps} from './';
-import {STATUS_SEMANTIC, StatusIndicator} from './';
-
-import css from './StatusIndicator.stories.module.css';
-
-
-const statusOptions: Array<unknown> = [...Object.values(STATUS_SEMANTIC)];
-const colorOptions: Array<unknown> = [...Object.keys(COLORS)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Status Indicator',
-  component: StatusIndicator,
-  argTypes: {
-    status: {
-      options: statusOptions,
-      description:
-        'Status type of a the indicator. It will have different background color for different status',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: STATUS_SEMANTIC.information},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    borderColorToken: {
-      description:
-        'Pass different color token string to show border in different color',
-      options: colorOptions,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'colorBackgroundTertiary'},
-      },
-    },
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    withBorder: {
-      description: 'If **true**, the component would have a white border',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a StatusIndicator component.',
-      description: {
-        component: `
-\`\`\`js
-import { StatusIndicator } from "@spaced-out/ui-design-system/lib/components/StatusIndicator";
-\`\`\`
-This component indicates status using a small dot with background in the DOM. Use this in conjunction with other components.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/StatusIndicator/StatusIndicator.jsx',
-    },
-  },
-};
-
-export const _StatusIndicator = (args: StatusIndicatorProps) => (<div
-  className={classify(css.contentWrapper, {
-    [css.withBackdrop]: args.withBorder,
-  })}
->
-  <div className={css.statusWrap}>
-    <StatusIndicator {...args} status="information" />
-    <BodySmall color={args.withBorder ? 'inversePrimary' : 'tertiary'}>
-      Information
-    </BodySmall>
-  </div>
-  <div className={css.statusWrap}>
-    <StatusIndicator {...args} status="success" />
-    <BodySmall color={args.withBorder ? 'inversePrimary' : 'tertiary'}>
-      Success
-    </BodySmall>
-  </div>
-  <div className={css.statusWrap}>
-    <StatusIndicator {...args} status="warning" />
-    <BodySmall color={args.withBorder ? 'inversePrimary' : 'tertiary'}>
-      Warning
-    </BodySmall>
-  </div>
-  <div className={css.statusWrap}>
-    <StatusIndicator {...args} status="danger" />
-    <BodySmall color={args.withBorder ? 'inversePrimary' : 'tertiary'}>
-      Danger
-    </BodySmall>
-  </div>
-  <div className={css.statusWrap}>
-    <StatusIndicator {...args} status="neutral" />
-    <BodySmall color={args.withBorder ? 'inversePrimary' : 'tertiary'}>
-      Neutral
-    </BodySmall>
-  </div>
-</div>);

package/lib/components/StatusIndicator/StatusIndicator.tsx

@@ -1,62 +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 './StatusIndicator.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export const STATUS_SEMANTIC = Object.freeze({
-  primary: 'primary',
-  information: 'information',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  neutral: 'neutral',
-  secondary: 'secondary',
-});
-
-export type StatusSemanticType = typeof STATUS_SEMANTIC[keyof typeof STATUS_SEMANTIC];
-
-export type StatusIndicatorProps = {
-  classNames?: ClassNames;
-  status?: StatusSemanticType;
-  withBorder?: boolean;
-  borderColorToken?: keyof typeof COLORS;
-  disabled?: boolean;
-};
-
-export const StatusIndicator: Flow.AbstractComponent<StatusIndicatorProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, StatusIndicatorProps>((
-  {
-    classNames,
-    status = 'information',
-    withBorder,
-    borderColorToken = 'colorBackgroundTertiary',
-    disabled,
-    ...props
-  }: StatusIndicatorProps,
-  ref,
-) => (<div
-  {...props}
-  data-testid="StatusIndicator"
-  className={classify(
-    css.statusWrapper,
-    css[status],
-    {
-      [css.withBorder]: withBorder,
-      [css.disabled]: disabled,
-    },
-    classNames?.wrapper,
-  )}
-  ref={ref}
-  style={{
-    '--border-color':
-      COLORS[borderColorToken] || COLORS['colorBackgroundTertiary'],
-  }}
-></div>));

package/lib/components/StatusIndicator/index.ts

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

package/lib/components/Stepper/Step/Step.stories.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-
-import type {StepProps} from './Step';
-import {Step} from './Step';
-import {StepContent} from './StepContent';
-import {StepLabel} from './StepLabel';
-
-import css from '../Stepper.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Stepper/Anatomy',
-  component: Step,
-  subComponents: {StepLabel, StepContent},
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<Step>`\'s `<div>` element',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '(idx: number, e?: SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    iconName: {
-      name: 'iconName',
-      control: {type: 'text'},
-      description: 'Icon name for Step',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        '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'},
-      },
-    },
-    index: {
-      control: {type: 'number'},
-      description:
-        'The index of the step. The step counter would be displayed as index + 1.',
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '0'},
-      },
-    },
-    active: {
-      type: {summary: 'boolean'},
-      defaultValue: {summary: 'false'},
-      description:
-        'Sets the step as active. This is internally set by the Stepper component. You don\'t need to set this prop manually.',
-      control: {type: 'boolean'},
-    },
-    completed: {
-      type: {summary: 'boolean'},
-      defaultValue: {summary: 'false'},
-      description: 'Mark the step as completed.',
-      control: {type: 'boolean'},
-    },
-    classNames: {
-      control: {type: 'object'},
-      description: 'Class names for custom styling.',
-      type: {
-        summary: '{wrapper?: string, stepCounter?: string, content?: string}',
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Step component.',
-      description: {
-        component: `
-\`\`\`js
-import {Step, StepLabel, StepContent} from '@spaced-out/ui-design-system/lib/components/Stepper';
-\`\`\`
-
-The Step component represents a single step within a \`Stepper\` component.
-It consists of a \`StepLabel\` component for displaying the step label and a
-\`StepContent\` component for rendering the step content.
-
-### Usage
-
-\`\`\`jsx
-<Step completed={false}>
-  <StepLabel>Step Label</StepLabel>
-  <StepContent>Step Content</StepContent>
-</Step>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Stepper/Stepper.jsx',
-    },
-  },
-};
-
-export const _Anatomy = (args: StepProps) => (<div className={css.container}>
-  <Step {...args}>
-    <StepLabel>Step Label</StepLabel>
-    <StepContent>Step Content</StepContent>
-  </Step>
-</div>);
-
-_Anatomy.args = {
-  classNames: {wrapper: ''},
-  active: false,
-  completed: false,
-  index: 0,
-};