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

package/lib/components/Shimmer/Shimmer.stories.tsx

@@ -1,317 +0,0 @@
-import * as React from 'react';
-
-import {BodyLarge} from '../Text';
-
-import type {ShimmerProps} from './Shimmer';
-import {KPIShimmer, Shimmer, SHIMMER_TYPES, ShimmerWrapper} from './Shimmer';
-
-import css from './Shimmer.stories.module.css';
-
-
-const shimmerTypeOptions: Array<unknown> = [...Object.values(SHIMMER_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Shimmer',
-  component: Shimmer,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    show: {
-      description:
-        'Determine whether to show the shimmer effect. Shimmer effect is visible by default',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {summary: 'true'},
-      },
-    },
-    width: {
-      description: 'Width of the shimmer effect',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {
-          summary: 'number | string',
-        },
-        defaultValue: {summary: 'size40'},
-      },
-    },
-    height: {
-      description: 'Height of the shimmer effect',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {
-          summary: 'number | string',
-        },
-        defaultValue: {summary: 'sizeFluid'},
-      },
-    },
-    type: {
-      description: 'Type of the shimmer effect',
-      control: {
-        type: 'select',
-      },
-      options: shimmerTypeOptions,
-      table: {
-        type: {
-          summary: 'enum',
-        },
-        defaultValue: {summary: 'text'},
-      },
-    },
-    children: {
-      description: `Children to be rendered inside the shimmer effect. This is rendered when shimmer's \`show\` is set to \`false\``,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    borderRadius: {
-      description: 'Border radius of the shimmer effect',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {
-          summary: 'number | string',
-        },
-        defaultValue: {summary: 'borderRadiusXSmall'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Shimmer component.',
-      description: {
-        component: `
-\`\`\`js
-import { Shimmer } from "@spaced-out/ui-design-system/lib/components/Shimmer";
-\`\`\`
-The Shimmer component is a versatile and reusable React component designed to create a shimmering placeholder effect,
-typically used to indicate loading content. This component is built with various configuration options, allowing it to adapt
-to different use cases such as text placeholders, rounded shapes, circular shapes, and rectangular shapes. The shimmering effect
-provides a visual cue that content is being loaded or is in the process of being fetched, enhancing the user experience by
-giving a sense of ongoing activity.
-
-**Important Note:**
-- While using **text** shimmer, make sure you wrap the text inside a
-\`<ShimmerWrapper></ShimmerWrapper>\` to ensure the shimmer effect is applied correctly and the layout doesn't break.
-
-\`\`\`jsx
-<BodyLarge>
-  <ShimmerWrapper>
-    Hello{' '}
-    <Shimmer width={100}>
-      {name},{' '}
-    </Shimmer>
-    How are you?
-  </ShimmerWrapper>
-</BodyLarge>
-\`\`\`
-
-**Usage: **
-
-\`\`\`jsx
-<Shimmer
-  type="circular"
-  width={100}
-  height={100}
-  classNames={{wrapper: css.profilePic}}
-></Shimmer>
-
-<Shimmer type="text" width={200} height={25}></Shimmer>
-
-<Shimmer type="rounded" width={60} height={60}></Shimmer>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Shimmer/Shimmer.jsx',
-    },
-  },
-};
-
-export const _TextFragmentShimmer = (args: ShimmerProps) => {
-  const variable1 = 'Async Await ';
-  const variable2 = 'Machine Learning';
-  const variable3 = 'Git Repository';
-
-  return (
-    <div className={css.container}>
-      <div className={css.action}>
-        <BodyLarge>
-          <ShimmerWrapper>
-            Understanding <Shimmer {...args}>{variable1}</Shimmer> is crucial
-            for asynchronous operations. Training{' '}
-            <Shimmer {...args}>{variable2}</Shimmer> is like trying to teach
-            your cat to bark—it's challenging, but sometimes it surprises you.
-            Pushing to the wrong <Shimmer {...args}>{variable3}</Shimmer> is
-            like yelling at your own mirror—it reflects poorly on your code
-            hygiene!
-          </ShimmerWrapper>
-        </BodyLarge>
-      </div>
-    </div>
-  );
-};
-
-_TextFragmentShimmer.args = {
-  width: 89,
-  show: true,
-};
-
-export const _MultilineTextShimmer = (args: ShimmerProps) => (<div className={css.container}>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-</div>);
-
-_MultilineTextShimmer.args = {
-  show: true,
-  width: 500,
-  height: 20,
-};
-
-export const _RoundedShimmer = (args: ShimmerProps) => (<div className={css.container}>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-</div>);
-
-_RoundedShimmer.args = {
-  show: true,
-  width: 300,
-  height: 200,
-  type: 'rounded',
-};
-
-export const _CircularShimmer = (args: ShimmerProps) => (<div className={css.container}>
-  <div className={css.action}>
-    <Shimmer {...args}></Shimmer>
-  </div>
-</div>);
-
-_CircularShimmer.args = {
-  show: true,
-  width: 200,
-  height: 200,
-  type: 'circular',
-};
-
-/**
- * The KPIShimmer component is a React component used to display placeholder content with a shimmering effect,
- * typically utilized as a loading indicator for KPIs (Key Performance Indicators).
- * It provides flexibility to configure various parts like text and icons.
- *
- * Props:
- *
- * - `textWidth` (number | string) [optional]:
- *   - Specifies the width of the shimmering text placeholders.
- *   - The default value is `150`.
- *   - Examples: `textWidth={200}`
- *
- * - `hasTopContent` (boolean) [optional]:
- *   - Determines if the top text content should be displayed.
- *   - The default value is `true`.
- *   - Example: `hasTopContent={false}`
- *
- * - `hasMiddleContent` (boolean) [optional]:
- *   - Determines if the middle text content should be displayed.
- *   - The default value is `true`.
- *   - Example: `hasMiddleContent={false}`
- *
- * - `hasBottomContent` (boolean) [optional]:
- *   - Determines if the bottom text content should be displayed.
- *   - The default value is `true`.
- *   - Example: `hasBottomContent={false}`
- *
- * - `hasIcon` (boolean) [optional]:
- *   - Determines if an icon should be displayed at the top.
- *   - The default value is `true`.
- *   - Example: `hasIcon={false}`
- *
- * - `classNames` (object) [optional]:
- *   - Adds a className to the parent wrapper
- *
- * Usage:
- *
- * ```jsx
- * import { KPIShimmer } from 'your-component-library';
- *
- * const MyComponent = () => (
- *   <KPIShimmer
- *     textWidth={200}
- *     hasTopContent={true}
- *     hasMiddleContent={false}
- *     hasBottomContent={true}
- *     hasIcon={true}
- *   />
- * );
- * ```
- *
- * Example Scenarios:
- *
- * 1. Display only top and bottom content with custom text width:
- * ```jsx
- * <KPIShimmer textWidth={75} hasMiddleContent={false} />
- * ```
- *
- * 2. Display no icon and only middle content:
- * ```jsx
- * <KPIShimmer hasIcon={false} hasTopContent={false} hasBottomContent={false} />
- * ```
- */
-export const _KPIShimmer = () => (<div className={css.container}>
-  <KPIShimmer textWidth={200}></KPIShimmer>
-</div>);
-
-export const _CardShimmer = () => (<div className={css.container}>
-  <div className={css.box}>
-    <div className={css.section}>
-      <Shimmer
-        type="circular"
-        width={100}
-        height={100}
-        classNames={{wrapper: css.profilePic}}
-      ></Shimmer>
-      <Shimmer type="text" width={200} height={25}></Shimmer>
-      <Shimmer type="text" width={200} height={15}></Shimmer>
-      <Shimmer type="text" width={200} height={15}></Shimmer>
-      <Shimmer type="text" width={200} height={15}></Shimmer>
-    </div>
-  </div>
-</div>);

package/lib/components/Shimmer/Shimmer.tsx

@@ -1,143 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-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 = typeof SHIMMER_TYPES[keyof 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.ReactNode} children - The children to be rendered
- */
-export const ShimmerWrapper = (
-  {
-    children,
-  }: ShimmerWrapperProps,
-): React.ReactElement<React.ComponentProps<'span'>> => <span>{children}</span>;
-
-export const Shimmer: Flow.AbstractComponent<ShimmerProps, HTMLSpanElement> =
-  React.forwardRef<HTMLSpanElement, ShimmerProps>((
-    {
-      classNames,
-      show = true,
-      type = SHIMMER_TYPES.text,
-      children,
-      width = size40,
-      height = sizeFluid,
-      borderRadius,
-    }: ShimmerProps,
-    ref,
-  ) => {
-    if (!show) {
-      return <>{children}</>;
-    }
-
-    const borderRadiusValue =
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ text: string; rounded: string; circular: string; rectangular: string; }>'.
-      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,
-) => (<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.ts

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

package/lib/components/SideMenuLink/SideMenuLink.stories.tsx

@@ -1,153 +0,0 @@
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {STATUS_SEMANTIC} from '../StatusIndicator';
-
-import type {SideMenuLinkProps} from './SideMenuLink';
-import {MENU_NAME_LIST, SideMenuLink} from './SideMenuLink';
-
-import css from './SideMenuLink.stories.module.css';
-
-
-const pageNameOptions: Array<string> = [...Object.keys(MENU_NAME_LIST)];
-const statusOptions: Array<unknown> = [...Object.values(STATUS_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Side Menu Link',
-  argTypes: {
-    pageNameKey: {
-      options: pageNameOptions,
-      type: {required: true},
-      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'},
-      },
-    },
-    // controlled selectedValue prop
-    selectedValue: {
-      name: 'selectedValue',
-      description:
-        'selectedValue will be compared with value(pageNameKey) of the Side Menu Link to show as selected or unselected',
-      table: {
-        type: {summary: 'string'},
-      },
-      control: {
-        disable: true,
-      },
-    },
-    customTitle: {
-      name: 'customTitle',
-      control: {
-        type: 'text',
-      },
-      description:
-        'The would override the text fetched from the default page names config',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    opened: {
-      description: 'Opened state of Side Menu Link',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-      },
-      defaultValue: {summary: false},
-    },
-    status: {
-      options: statusOptions,
-      description:
-        'Status type of a the indicator to indicate any notifications on the menu',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a SideMenuLink component.',
-      description: {
-        component: `
-\`\`\`js
-import { SideMenuLink } from "@spaced-out/ui-design-system/lib/components/SideMenuLink";
-\`\`\`
-SideMenuLink is anatomy component for Side Nav.
-
-It is a controlled component, meaning that, you need to pass the selectedValue, if selectedValue is same as value then Menu Link will be shown as selected.
-You will pass a callback function in onChange prop, if Menu Link is clicked this function will be called and you will receive
-the selectedValue which will the pageNameKey prop of Menu Link.
-
-**Note: ** If any new product Icon is needed or missing, it should be added in MENU_NAME_LIST of SideMenuLink component
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/SideMenuLink/SideMenuLink.jsx',
-    },
-  },
-};
-
-export const _SideMenuLink = (args: SideMenuLinkProps) => {
-  const [selectedValue, setSelectedValue] = React.useState(args.selectedValue);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (e: React.SyntheticEvent<HTMLElement>, ...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(e, ...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setSelectedValue(...params);
-  };
-
-  return (
-    <div
-      className={classify(css.storyContainer, {
-        [css.opened]: args.opened,
-        [css.closed]: !args.opened,
-      })}
-    >
-      <SideMenuLink
-// @ts-ignore - TS2783 - 'pageNameKey' is specified more than once, so this usage will be overwritten.
-        pageNameKey="dashboard"
-        {...args}
-        onChange={onChangeHandler}
-        selectedValue={selectedValue}
-        to={'/?path=/docs/introduction--docs'}
-      />
-      <SideMenuLink
-        opened={args.opened}
-        pageNameKey="engage"
-        onChange={onChangeHandler}
-        selectedValue={selectedValue}
-      />
-      <SideMenuLink
-        opened={args.opened}
-        pageNameKey="database-cleanup"
-        onChange={onChangeHandler}
-        selectedValue={selectedValue}
-        to={'/?path=/docs/components-table-bulk-actions--docs'}
-      />
-      <SideMenuLink
-        opened={args.opened}
-        pageNameKey="voiceflow"
-        onChange={onChangeHandler}
-        selectedValue={selectedValue}
-        to={'/voiceflow'}
-      />
-    </div>
-  );
-};
-
-_SideMenuLink.args = {
-  opened: false,
-  pageNameKey: 'dashboard',
-  selectedValue: 'dashboard',
-};