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

package/lib/components/PageTitle/PageTitle.stories.tsx

@@ -1,257 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {Button, BUTTON_TYPES} from '../Button';
-import {Icon} from '../Icon';
-import {Tab, TabList} from '../Tabs';
-import {TitleMedium} from '../Text';
-
-import type {PageTitleProps} from './PageTitle';
-import {
-  PAGE_NAME_LIST,
-  PageName,
-  PageTitle,
-  RightSlot,
-  TabSlot,
-} from './PageTitle';
-
-import css from './PageTitle.stories.module.css';
-
-
-const pageNameOptions: Array<string> = [...Object.keys(PAGE_NAME_LIST)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Page Title',
-  argTypes: {
-    pageNameKey: {
-      options: pageNameOptions,
-      description:
-        'pageNameKey for different page title. It will have predefined Icon for each page and Page title for different pageNameKey',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'dashboard'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, leftSlot or rightSlot',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, leftSlot?: string, rightSlot?: string}',
-        },
-      },
-    },
-    showBackButton: {
-      description:
-        'Toggle visibility of back button, if **true**, back button will be visible',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {summary: 'false'},
-      },
-    },
-    onBack: {
-      description:
-        '**onBack** handler is triggered when back button is clicked',
-      action: 'backButtonClicked',
-      table: {
-        type: {summary: '() => void'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a PageTitle component.',
-      description: {
-        component: `
-\`\`\`js
-import { PageTitle, TabSlot, RightSlot  } from "@spaced-out/ui-design-system/lib/components/PageTitle";
-\`\`\`
-Page Title component can be used to generate the page title along with predefined page icons.
-Two child components can be passed named as TabSlot and RightSlot. TabSlot is essentially for TabList and RightSlot is a slot for anything.
-You can also pass <a href="../?path=/docs/components-page-title--custom-page-name"> custom PageName child </a>
-if you need Page Title other than the mappings provided.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/PageTitle/PageTitle.jsx',
-    },
-  },
-};
-
-export const _PageTitle = (args: PageTitleProps) => {
-// @ts-ignore - TS6133 - 'selectedTab' is declared but its value is never read.
-  const [selectedTab, setSelectedTab] = React.useState<any>();
-// @ts-ignore - TS6133 - 'onSelectHandler' is declared but its value is never read.
-  const onSelectHandler = (params: any): void => {
-    setSelectedTab(params);
-  };
-
-  return (
-    <div className={css.storyContainer}>
-      <PageTitle {...args}>
-{ /* @ts-ignore - TS2322 - Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RightSlotProps'. */}
-        <RightSlot className={css.rightSlot}>
-          <Button
-            ariaLabel="Icon Button"
-            iconRightName="ellipsis"
-            size="medium"
-            type={BUTTON_TYPES.ghost}
-          />
-          <Button type={BUTTON_TYPES.secondary} size="medium">
-            Button
-          </Button>
-          <Button type={BUTTON_TYPES.primary} size="medium">
-            Button
-          </Button>
-        </RightSlot>
-      </PageTitle>
-    </div>
-  );
-};
-
-_PageTitle.args = {
-  pageNameKey: 'engage',
-};
-
-export const _PageTitleWithTabs = (args: PageTitleProps) => {
-  const [selectedTab, setSelectedTab] = React.useState<any>();
-  const onSelectHandler = (
-    params: {
-      label?: string;
-      tabId: string;
-    },
-  ): void => {
-    setSelectedTab(params);
-  };
-
-  return (
-    <div className={css.storyContainer}>
-      <PageTitle {...args}>
-        <TabSlot className={css.tabSlot}>
-          <TabList
-            onSelect={onSelectHandler}
-            selectedTab={selectedTab}
-            size="medium"
-          >
-            <Tab
-              iconName="trophy"
-              iconType="solid"
-              label="Tab Link 1"
-              tabId="tab-1"
-            />
-            <Tab
-              iconName="face-party"
-              iconType="solid"
-              label="Tab Link 2"
-              tabId="tab-2"
-            />
-            <Tab
-              iconName=""
-              iconType="solid"
-              label="Tab Link 3"
-              tabId="tab-3"
-            />
-            <Tab
-              iconName=""
-              iconType="solid"
-              label="Tab Link 4"
-              tabId="tab-4"
-            />
-            <Tab
-              iconName=""
-              iconType="solid"
-              label="Tab Link 5"
-              tabId="tab-5"
-            />
-            <Tab
-              iconName=""
-              iconType="solid"
-              label="Tab Link 6"
-              tabId="tab-6"
-            />
-            <Tab
-              iconName="coffee"
-              iconType="solid"
-              label="Tab Link 7"
-              tabId="tab-7"
-            />
-            <Tab size="small" label="Tab Link 8" tabId="tab-8" />
-            <Tab
-              iconName="bookmark"
-              iconType="solid"
-              label="Tab Link 9"
-              tabId="tab-9"
-            />
-            <Tab
-              iconName="close"
-              iconType="solid"
-              label="Tab Link 10"
-              tabId="tab-10"
-            />
-            <Tab
-              iconName="bug"
-              iconType="solid"
-              label="Tab Link 11"
-              tabId="tab-11"
-            />
-          </TabList>
-        </TabSlot>
-
-{ /* @ts-ignore - TS2322 - Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RightSlotProps'. */}
-        <RightSlot className={css.rightSlot}>
-          <Button
-            ariaLabel="Icon Button"
-            iconRightName="ellipsis"
-            size="medium"
-            type={BUTTON_TYPES.ghost}
-          />
-          <Button type={BUTTON_TYPES.secondary} size="medium">
-            Button
-          </Button>
-          <Button type={BUTTON_TYPES.primary} size="medium">
-            Button
-          </Button>
-        </RightSlot>
-      </PageTitle>
-    </div>
-  );
-};
-
-_PageTitleWithTabs.args = {
-  pageNameKey: 'engage',
-};
-
-export const _CustomPageName = (_args: PageTitleProps) => (<PageTitle>
-  <PageName>
-    <TitleMedium>{'Listings'}</TitleMedium>
-    <Icon
-      type="duotone"
-      name="list"
-      size="medium"
-      color={TEXT_COLORS.primary}
-      swapOpacity={true}
-    />
-  </PageName>
-{ /* @ts-ignore - TS2322 - Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RightSlotProps'. */}
-  <RightSlot className={css.rightSlot}>
-    <Button type="secondary" size="small">
-      Button
-    </Button>
-    <Button type="primary" size="small">
-      Button
-    </Button>
-  </RightSlot>
-</PageTitle>);

package/lib/components/PageTitle/PageTitle.tsx

@@ -1,276 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {
-  colorIconPrimary,
-  colorIconSecondary,
-} from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import {TEXT_COLORS, TitleMedium} from '../Text';
-import {Tooltip} from '../Tooltip';
-
-import css from './PageTitle.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  leftSlot?: string;
-  rightSlot?: string;
-}>;
-
-export type PageTitleProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  pageNameKey?: string;
-  showBackButton?: boolean;
-  onBack?: () => void;
-};
-
-export const PAGE_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',
-  },
-  workflows: {
-    title: 'Workflows',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  trm: {
-    title: 'TRM',
-    iconName: 'screen-users',
-    iconType: 'duotone',
-  },
-  analytics: {
-    title: 'Analytics',
-    iconName: 'chart-column',
-    iconType: 'duotone',
-  },
-  messaging: {
-    title: 'Messaging',
-    iconName: 'messages',
-    iconType: 'duotone',
-  },
-  chatbot: {
-    title: 'Chatbot',
-    iconName: 'message-bot',
-    iconType: 'duotone',
-  },
-  referrals: {
-    title: 'Referrals',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  records: {
-    title: 'Records',
-    iconName: 'folder-open',
-    iconType: 'duotone',
-  },
-  bulkCleanup: {
-    title: 'Bulk Cleanup',
-    iconName: 'retweet',
-    iconType: 'duotone',
-  },
-  support: {
-    title: 'Support',
-    iconName: 'headset',
-    iconType: 'duotone',
-  },
-  audit: {
-    title: 'Audit',
-    iconName: 'print-magnifying-glass',
-    iconType: 'duotone',
-  },
-  timeline: {
-    title: 'Timeline',
-    iconName: 'timeline',
-    iconType: 'duotone',
-  },
-  people: {
-    title: 'People',
-    iconName: 'people-group',
-    iconType: 'duotone',
-  },
-  jobs: {
-    title: 'Jobs',
-    iconName: 'briefcase',
-    iconType: 'duotone',
-  },
-  contacts: {
-    title: 'Contacts',
-    iconName: 'address-card',
-    iconType: 'duotone',
-  },
-  meetings: {
-    title: 'Meetings',
-    iconName: 'calendars',
-    iconType: 'duotone',
-  },
-  contacts3: {
-    title: 'Contacts',
-    iconName: 'browser',
-    iconType: 'duotone',
-  },
-  tracking: {
-    title: 'Tracking',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  earnings: {
-    title: 'Earnings',
-    iconName: 'wallet',
-    iconType: 'duotone',
-  },
-  settings: {
-    title: 'Settings',
-    iconName: 'gear',
-    iconType: 'duotone',
-  },
-  broadcast: {
-    title: 'Broadcast',
-    iconName: 'bullhorn',
-    iconType: 'duotone',
-  },
-});
-
-export type TabSlotProps = {
-  children?: React.ReactNode;
-  className: string;
-};
-
-export const TabSlot = (
-  {
-    children,
-    className,
-    ...props
-  }: TabSlotProps,
-) => (<div {...props} className={classify(css.tabSlot, className)}>
-  {children}
-</div>);
-
-TabSlot.displayName = 'TabSlot';
-
-export type RightSlotProps = {
-  children?: React.ReactNode;
-};
-
-export const RightSlot = (
-  {
-    children,
-    ...props
-  }: RightSlotProps,
-) => (<div {...props}>{children}</div>);
-
-RightSlot.displayName = 'RightSlot';
-
-export type PageNameProps = {
-  children?: React.ReactNode;
-};
-
-export const PageName = (
-  {
-    children,
-    ...props
-  }: PageNameProps,
-) => (<div {...props} className={css.pageTitle}>
-  {children}
-</div>);
-PageName.displayName = 'PageName';
-
-export const PageTitle: Flow.AbstractComponent<PageTitleProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, PageTitleProps>((
-  {
-    classNames,
-    children,
-    pageNameKey,
-    showBackButton,
-    onBack,
-  }: PageTitleProps,
-  ref,
-) => {
-  const getNamedComp = (comp: string) => {
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length) {
-      const nodes: React.ReactNode[] = [];
-      for (const child of childrenArray) {
-// @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-        if (child?.type?.displayName === comp) {
-          nodes.push(child);
-        }
-      }
-      return nodes.length > 1 ? nodes : nodes[0];
-    }
-    return null;
-  };
-
-  const handleBack = () => {
-    onBack && onBack();
-  };
-
-  return (
-    <div
-      data-testid="PageTitle"
-      className={classify(css.pageTitleWrapper, classNames?.wrapper)}
-      ref={ref}
-    >
-      <div className={classify(css.leftSlot, classNames?.leftSlot)}>
-        <div className={css.headerWithBackBtn}>
-          {showBackButton && (
-            <Tooltip
-              title="Navigate Back"
-              delayMotionDuration="slow"
-              placement="top-start"
-            >
-              <Button
-                onClick={handleBack}
-                type="tertiary"
-                iconLeftName="chevron-left"
-                ariaLabel="Navigate Back Button"
-              />
-            </Tooltip>
-          )}
-{ /* @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; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'. */}
-          {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
-            <PageName>
-{ /* @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; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'. */}
-              <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
-              <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; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'.
-                type={PAGE_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; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'.
-                name={PAGE_NAME_LIST[pageNameKey].iconName}
-                size="medium"
-                color={TEXT_COLORS.primary}
-                style={{
-                  '--fa-primary-color': colorIconPrimary,
-                  '--fa-secondary-color': colorIconSecondary,
-                  '--fa-primary-opacity': '1.0',
-                  '--fa-secondary-opacity': '1.0',
-                }}
-              />
-            </PageName>
-          ) : (
-            getNamedComp('PageName')
-          )}
-        </div>
-        {getNamedComp('TabSlot')}
-      </div>
-      <div className={classify(css.rightSlot, classNames?.rightSlot)}>
-        {getNamedComp('RightSlot')}
-      </div>
-    </div>
-  );
-});

package/lib/components/PageTitle/index.ts

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