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

package/lib/components/Shimmer/Shimmer.js.flow

@@ -0,0 +1,141 @@
+// @flow strict
+
+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.Node,
+};
+
+export type ShimmerWrapperProps = {
+  children?: React.Node,
+};
+
+/**
+ * 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$Element<'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.Node => (
+  <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.js.flow

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

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -222,8 +222,6 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
   const onChangeHandler = e => {
     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 /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: to !== undefined,
@@ -260,12 +258,8 @@ const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref,
     classNames: {
       wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
     }
-  }), /*#__PURE__*/React.createElement(_Icon.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: { ...; }; }>'.
-    ,
+  }), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,
     size: "medium",
     color: _Text.TEXT_COLORS.inverseSecondary,

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -0,0 +1,344 @@
+// @flow strict
+
+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.Node,
+  customTitle?: string,
+  pageNameKey: string,
+  disabled?: boolean,
+  hovered?: boolean,
+  selectedValue?: string,
+  opened?: boolean,
+  onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
+  tabIndex?: number,
+  tooltip?: BaseTooltipProps,
+  isGroupMenuLink?: boolean,
+  to?: string,
+  rightSlot?: React.Node,
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+  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.Node => {
+    const selected = selectedValue === pageNameKey;
+    const inActive = !onChange;
+    const onChangeHandler = (e: 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.js.flow

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

package/lib/components/StatusIndicator/StatusIndicator.js.flow

@@ -0,0 +1,68 @@
+// @flow strict
+
+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.Node => (
+    <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.js.flow

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

package/lib/components/Stepper/Step/Step.js

@@ -26,11 +26,7 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconType
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
-  const stepContent = childrenArray.map(stepContent =>
-  /*#__PURE__*/
-  // @ts-ignore - TS2769 - No overload matches this call.
-  React.cloneElement(stepContent, {
-    // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
+  const stepContent = childrenArray.map(stepContent => /*#__PURE__*/React.cloneElement(stepContent, {
     ...stepContent.props,
     active,
     completed,
@@ -57,19 +53,14 @@ const Step = exports.Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_StepperModule.default.disabled]: disabled,
       [_StepperModule.default.withIcon]: !!iconName
     }, classNames?.stepCounter)
-  }, completed && !active ?
-  /*#__PURE__*/
-  // @ts-ignore - TS2769 - No overload matches this call.
-  React.createElement(_Icon.Icon, {
+  }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "check",
     type: _Icon.ICON_TYPE.solid,
     size: _Icon.ICON_SIZE.small,
     className: _StepperModule.default.stepIcon
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    className: _StepperModule.default.stepIcon
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    className: _StepperModule.default.stepIcon,
     size: _Icon.ICON_SIZE.small,
     type: iconType
   }) : (index + 1).toString())), /*#__PURE__*/React.createElement("div", {