@spaced-out/ui-design-system 0.3.45 → 0.3.47-beta.0

package/lib/components/SideMenuLink/SideMenuLink.d.ts

@@ -1,336 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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',
-  },
-});
-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?: React.AbstractComponent<
-    BaseLinkProps,
-    HTMLAnchorElement | null | undefined
-  >;
-  status?: StatusSemanticType;
-};
-export const SideMenuLink: React$AbstractComponent<
-  SideMenuLinkProps,
-  HTMLButtonElement
-> = React.forwardRef<SideMenuLinkProps, HTMLButtonElement>(
-  (
-    {
-      classNames,
-      pageNameKey,
-      disabled,
-      opened,
-      selectedValue,
-      onChange,
-      tabIndex = 0,
-      tooltip,
-      isGroupMenuLink = false,
-      linkComponent: LinkComponent,
-      rightSlot,
-      to,
-      customTitle,
-      status,
-      ...restButtonProps
-    }: SideMenuLinkProps,
-    ref,
-  ): React.ReactNode => {
-    const selected = selectedValue === pageNameKey;
-    const inActive = !onChange;
-
-    const onChangeHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-      onChange && onChange(e, pageNameKey);
-    };
-
-    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}
-          >
-            {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-              <div className={css.iconContainer}>
-                {status && (
-                  <StatusIndicator
-                    status={status}
-                    classNames={{
-                      wrapper: css.statusIndicatorBlock,
-                    }}
-                  />
-                )}
-                <Icon
-                  type={MENU_NAME_LIST[pageNameKey].iconType}
-                  name={MENU_NAME_LIST[pageNameKey].iconName}
-                  size="medium"
-                  color={TEXT_COLORS.inverseSecondary}
-                  className={css.menuIcon}
-                />
-              </div>
-            ) : null}
-            {opened ? (
-              <div className={css.menuLabelContainer}>
-                {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.d.ts

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

package/lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,60 +0,0 @@
-import {$ReadOnly, $Values, $Keys} from 'utility-types';
-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 = $Values<typeof STATUS_SEMANTIC>;
-export type StatusIndicatorProps = {
-  classNames?: ClassNames;
-  status?: StatusSemanticType;
-  withBorder?: boolean;
-  borderColorToken?: $Keys<typeof COLORS>;
-  disabled?: boolean;
-};
-export const StatusIndicator: React$AbstractComponent<
-  StatusIndicatorProps,
-  HTMLDivElement
-> = React.forwardRef<StatusIndicatorProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      status = 'information',
-      withBorder,
-      borderColorToken = 'colorBackgroundTertiary',
-      disabled,
-      ...props
-    }: StatusIndicatorProps,
-    ref,
-  ): React.ReactNode => (
-    <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.d.ts

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

package/lib/components/Stepper/Step/Step.d.ts

@@ -1,119 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../../../utils/classify';
-import type {IconType} from '../../Icon';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
-import css from '../Stepper.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  stepCounter?: string;
-  content?: string;
-}>;
-export type StepProps = {
-  active?: boolean;
-  children: React.ReactNode;
-  completed?: boolean;
-  disabled?: boolean;
-  expanded?: boolean;
-  index: number;
-  last?: boolean;
-  classNames?: ClassNames;
-  allowClick?: boolean;
-  onClick?: (
-    idx: number,
-    e?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  iconName?: string;
-  iconType?: IconType;
-};
-export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
-  React.forwardRef<StepProps, HTMLDivElement>(
-    (
-      {
-        active,
-        children,
-        completed = false,
-        disabled = false,
-        expanded = false,
-        index = 0,
-        last,
-        classNames,
-        onClick,
-        allowClick,
-        iconName,
-        iconType,
-      }: StepProps,
-      ref,
-    ): React.ReactNode => {
-      const childrenArray = React.Children.toArray(children).filter(Boolean);
-      const stepContent = childrenArray.map((stepContent) =>
-        React.cloneElement(stepContent, {
-          ...stepContent.props,
-          active,
-          completed,
-          disabled,
-        }),
-      );
-
-      const handleClick = (e) => allowClick && onClick?.(index, e);
-
-      return (
-        <div
-          ref={ref}
-          className={classify(
-            css.stepWrapper,
-            {
-              [css.active]: active,
-              [css.completed]: completed,
-              [css.expanded]: expanded,
-              [css.last]: last,
-              [css.disabled]: disabled,
-              [css.clickable]: allowClick,
-            },
-            classNames?.wrapper,
-          )}
-          onClick={handleClick}
-        >
-          <div
-            className={classify(
-              css.stepWrapperCounter,
-              {
-                [css.selected]: active,
-                [css.completed]: completed,
-                [css.expanded]: expanded,
-                [css.last]: last,
-                [css.disabled]: disabled,
-                [css.withIcon]: !!iconName,
-              },
-              classNames?.stepCounter,
-            )}
-          >
-            {completed && !active ? (
-              <Icon
-                name="check"
-                type={ICON_TYPE.solid}
-                size={ICON_SIZE.small}
-                className={css.stepIcon}
-              />
-            ) : (
-              <React.Fragment>
-                {iconName ? (
-                  <Icon
-                    name={iconName}
-                    className={css.stepIcon}
-                    size={ICON_SIZE.small}
-                    type={iconType}
-                  />
-                ) : (
-                  (index + 1).toString()
-                )}
-              </React.Fragment>
-            )}
-          </div>
-          <div className={classify(css.stepContent, classNames?.content)}>
-            {stepContent}
-          </div>
-        </div>
-      );
-    },
-  );

package/lib/components/Stepper/Step/StepContent.d.ts

@@ -1,35 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../../utils/classify';
-import css from '../Stepper.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type StepContentProps = {
-  children: React.ReactNode;
-  active?: boolean;
-  completed?: boolean;
-  disabled?: boolean;
-  classNames?: ClassNames;
-};
-export const StepContent = ({
-  children,
-  classNames,
-  active,
-  completed = false,
-  disabled = false,
-}: StepContentProps): React.ReactNode => (
-  <div
-    className={classify(
-      css.stepContentWrapper,
-      {
-        [css.active]: active,
-        [css.completed]: completed,
-        [css.disabled]: disabled,
-      },
-      classNames?.wrapper,
-    )}
-  >
-    {children}
-  </div>
-);

package/lib/components/Stepper/Step/StepLabel.d.ts

@@ -1,35 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../../utils/classify';
-import css from '../Stepper.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type StepLabelProps = {
-  children: React.ReactNode;
-  active?: boolean;
-  completed?: boolean;
-  disabled?: boolean;
-  classNames?: ClassNames;
-};
-export const StepLabel = ({
-  children,
-  classNames,
-  active,
-  completed = false,
-  disabled = false,
-}: StepLabelProps): React.ReactNode => (
-  <div
-    className={classify(
-      css.stepLabelWrapper,
-      {
-        [css.active]: active,
-        [css.completed]: completed,
-        [css.disabled]: disabled,
-      },
-      classNames?.wrapper,
-    )}
-  >
-    {children}
-  </div>
-);

package/lib/components/Stepper/Step/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Step';
-export * from './StepContent';
-export * from './StepLabel';

package/lib/components/Stepper/Stepper.d.ts

@@ -1,60 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../utils/classify';
-import css from './Stepper.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type StepperProps = {
-  classNames?: ClassNames;
-  activeStep?: number;
-  children: React.ReactNode;
-  orientation?: 'horizontal' | 'vertical';
-  disabled?: boolean;
-};
-export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
-  React.forwardRef<StepperProps, HTMLDivElement>(
-    (
-      {
-        activeStep = 0,
-        children,
-        orientation = 'horizontal',
-        classNames,
-        disabled = false,
-      }: StepperProps,
-      ref,
-    ) => {
-      const childrenArray = React.Children.toArray(children).filter(Boolean);
-      const steps = childrenArray.map((step, index) => {
-        let isLastStepCompleted = false;
-        const {disabled: disabledChild, onClick} = step.props;
-
-        if (index === 0) {
-          isLastStepCompleted = true;
-        } else {
-          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
-        }
-
-        return React.cloneElement(step, {
-          ...step.props,
-          index,
-          last: index + 1 === childrenArray.length,
-          active: index === activeStep,
-          allowClick: onClick && index !== activeStep && isLastStepCompleted,
-          disabled: disabledChild || disabled,
-        });
-      });
-      return (
-        <div
-          className={classify(
-            css.stepperWrapper,
-            css[orientation],
-            classNames?.wrapper,
-          )}
-          ref={ref}
-        >
-          {steps}
-        </div>
-      );
-    },
-  );

package/lib/components/Stepper/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Step';
-export * from './Stepper';