@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

package/lib/components/Shimmer/Shimmer.d.ts

@@ -0,0 +1,131 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import {
+  borderRadiusCircle,
+  borderRadiusMedium,
+  borderRadiusNone,
+  borderRadiusXSmall,
+} from '../../styles/variables/_border';
+import {size40, sizeFluid} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import {appendPx} from '../../utils/string';
+import css from './Shimmer.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export const SHIMMER_TYPES = Object.freeze({
+  text: 'text',
+  rounded: 'rounded',
+  circular: 'circular',
+  rectangular: 'rectangular',
+});
+export const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
+  text: borderRadiusXSmall,
+  rounded: borderRadiusMedium,
+  circular: borderRadiusCircle,
+  rectangular: borderRadiusNone,
+});
+export type ShimmerType = $Values<typeof SHIMMER_TYPES>;
+export type ShimmerProps = {
+  classNames?: ClassNames;
+  show?: boolean;
+  type?: ShimmerType;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number | string;
+  children?: React.ReactNode;
+};
+export type ShimmerWrapperProps = {
+  children?: React.ReactNode;
+};
+
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+export const ShimmerWrapper = ({
+  children,
+}: ShimmerWrapperProps): React.ReactElement<
+  React.ComponentProps<'span'>,
+  'span'
+> => <span>{children}</span>;
+export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
+  React.forwardRef<ShimmerProps, HTMLSpanElement>(
+    (
+      {
+        classNames,
+        show = true,
+        type = SHIMMER_TYPES.text,
+        children,
+        width = size40,
+        height = sizeFluid,
+        borderRadius,
+      }: ShimmerProps,
+      ref,
+    ) => {
+      if (!show) {
+        return <>{children}</>;
+      }
+
+      const borderRadiusValue =
+        borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
+      return (
+        <span
+          ref={ref}
+          data-testid="Shimmer"
+          className={classify(css.wrapper, css[type], classNames?.wrapper)}
+          style={{
+            '--width': appendPx(width),
+            '--height': appendPx(height),
+            '--border-radius': appendPx(borderRadiusValue),
+          }}
+        ></span>
+      );
+    },
+  );
+type KPIShimmerClassNames = $ReadOnly<{
+  wrapper?: string;
+  icon?: string;
+  text?: string;
+}>;
+export type KPIShimmerProps = {
+  textWidth?: number | string;
+  hasTopContent?: boolean;
+  hasMiddleContent?: boolean;
+  hasBottomContent?: boolean;
+  hasIcon?: boolean;
+  classNames?: KPIShimmerClassNames;
+};
+export const KPIShimmer = ({
+  textWidth = 150,
+  hasBottomContent = true,
+  hasIcon = true,
+  hasTopContent = true,
+  hasMiddleContent = true,
+  classNames,
+}: KPIShimmerProps): React.ReactNode => (
+  <div className={classify(css.kpiBox, classNames?.wrapper)}>
+    {hasIcon && (
+      <div className={classify(css.section, css.iconSection, classNames?.icon)}>
+        <Shimmer type="rounded" width={60} height={60}></Shimmer>
+      </div>
+    )}
+
+    <div className={classify(css.section, classNames?.text)}>
+      {hasTopContent && (
+        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      )}
+      {hasMiddleContent && (
+        <Shimmer type="text" width={textWidth} height={25}></Shimmer>
+      )}
+      {hasBottomContent && (
+        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      )}
+    </div>
+  </div>
+);

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+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>
+);