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

package/lib/components/KPIBox/KPIBox.stories.tsx

@@ -1,321 +0,0 @@
-import * as React from 'react';
-
-// import {ALERT_SEMANTIC} from '../../types/common';
-import {Icon} from '../Icon';
-import {SubTitleSmall} from '../Text';
-
-import type {KPIBoxProps} from './';
-import {KPIBox} from './';
-
-import css from './KPIBox.stories.module.css';
-
-// const semanticOptions: Array<mixed> = [...Object.values(ALERT_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Data Viz/KPI',
-  component: KPIBox,
-  argTypes: {
-    // Uncomment when we encourage having semantic KPI Boxes
-    // semantic: {
-    //   description:
-    //     'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',
-    //   control: {
-    //     type: 'select',
-    //   },
-    //   options: semanticOptions,
-    //   table: {
-    //     type: {
-    //       summary: 'AlertSemanticType',
-    //     },
-    //     defaultValue: {summary: 'neutral'},
-    //   },
-    // },
-    topContent: {
-      description: 'Content to be displayed at the top of the KPIBox.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    middleContent: {
-      description: 'Content to be displayed in the middle of the KPIBox.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    bottomContent: {
-      description: 'Content to be displayed at the bottom of the KPIBox.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    semantic: {
-      description: 'Semantic of the icon to be displayed in the KPIBox.',
-      options: ['danger', 'information', 'neutral', 'success', 'warning'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {
-          summary: 'AlertSemanticType',
-          defaultValue: {summary: 'neutral'},
-        },
-      },
-    },
-    iconName: {
-      description: 'Name of the icon to be displayed in the KPIBox.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    iconSize: {
-      description: 'Size of the icon in the KPIBox.',
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {
-          summary: 'IconSize',
-        },
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    iconType: {
-      description: 'Type of the icon (e.g., outline, solid, duotone).',
-      control: {
-        type: 'select',
-      },
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      table: {
-        type: {
-          summary: 'IconType',
-        },
-        defaultValue: {summary: 'solid'},
-      },
-    },
-    classNames: {
-      description:
-        'Additional CSS classes to customize the appearance of the KPIBox.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a KPIBox component.',
-      description: {
-        component: `
-\`\`\`js
-import { KPIBox } from "@spaced-out/ui-design-system/lib/components/KPIBox";
-\`\`\`
-The KPIBox component is designed to display Key Performance
-Indicators (KPIs) with customizable content and icons.
-It is commonly used in dashboard and reporting applications to highlight
-important metrics and data.
-
-### Usage
-
-\`\`\`jsx
-<KPIBox
-  semantic="neutral"
-  topContent="Total Sales"
-  middleContent="$1,234,567"
-  bottomContent={(
-    <div className={css.bottomContent}>
-      <Icon size="small" name="arrow-trend-up" color="neutral" />
-      <span>5% (500 total)</span>
-    </div>
-  )}
-  iconName="chart-bar"
-  iconSize="medium"
-  iconType="solid"
-/>
-\`\`\`
-
-\`\`\`css
-.bottomContent {
-  display: flex;
-  gap: spaceXXSmall;
-  align-items: flex-start;
-}
-\`\`\`
-
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/KPIBox/KPIBox.jsx',
-    },
-  },
-};
-
-export const _KPI = (args: KPIBoxProps) => (<>
-  <SubTitleSmall>Customizable</SubTitleSmall>
-  <br />
-  <div className={css.container}>
-    <KPIBox {...args} />
-  </div>
-  <SubTitleSmall>Variations</SubTitleSmall>
-  <br />
-  <div className={css.container}>
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-    />
-
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      bottomContent="5% (500 total)"
-    />
-
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="arrow-trend-up" color="neutral" />
-          <span>5% (500 total)</span>
-        </div>
-      }
-    />
-
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      iconName="money-bill"
-    />
-
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      bottomContent="5% (500 total)"
-      iconName="money-bill"
-    />
-
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="arrow-trend-up" color="neutral" />
-          <span>5% (500 total)</span>
-        </div>
-      }
-      iconName="money-bill"
-    />
-  </div>
-  {/* Uncomment when we encourage having semantic KPI Boxes */}
-  {/* <SubTitleSmall>Semantics</SubTitleSmall>
-  <br />
-  <div className={css.container}>
-    <KPIBox
-      semantic="neutral"
-      topContent="Total Sales"
-      middleContent="$1,234,567"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="arrow-trend-up" color="neutral" />
-          <span>5% (500 total)</span>
-        </div>
-      }
-      iconName="money-bill"
-    />
-
-    <KPIBox
-      semantic="information"
-      topContent="Website Visits"
-      middleContent="10,000"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="chart-mixed" color="information" />
-          <span>15% (1,500 total)</span>
-        </div>
-      }
-      iconName="globe"
-    />
-
-    <KPIBox
-      semantic="warning"
-      topContent="Pending Orders"
-      middleContent="15"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="chart-area" color="warning" />
-          <span>20% (3,000 total)</span>
-        </div>
-      }
-      iconName="exclamation-triangle"
-    />
-
-    <KPIBox
-      semantic="success"
-      topContent="New Subscribers"
-      middleContent="5,678"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="arrow-trend-up" color="success" />
-          <span>8% (800 total)</span>
-        </div>
-      }
-      iconName="user-plus"
-    />
-
-    <KPIBox
-      semantic="danger"
-      topContent="Critical Errors"
-      middleContent="3"
-      bottomContent={
-        <div className={css.bottomContent}>
-          <Icon size="small" name="chart-line-down" color="danger" />
-          <span>12% (1,200 total)</span>
-        </div>
-      }
-      iconName="bug"
-    />
-  </div> */}
-</>);
-
-_KPI.args = {
-  topContent: 'Total Users',
-  middleContent: '10,000',
-  bottomContent: ((<div className={css.bottomContent}>
-    <Icon size="small" name="arrow-trend-up" color="success" />
-    <span>10% (1,000 total)</span>
-  </div>) as React.ReactElement<React.ComponentProps<'div'>>),
-  iconName: 'users',
-  iconType: 'duotone',
-};

package/lib/components/KPIBox/KPIBox.tsx

@@ -1,94 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {AlertSemanticType} from '../../types/common';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {SemanticIcon} from '../Icon';
-
-import css from './KPIBox.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  topFoldContent?: string;
-  middleFoldContent?: string;
-  bottomFoldContent?: string;
-}>;
-
-export type KPIBoxProps = {
-  classNames?: ClassNames;
-  semantic?: AlertSemanticType;
-  topContent?: React.ReactNode;
-  middleContent?: React.ReactNode;
-  bottomContent?: React.ReactNode;
-  iconName?: string;
-  iconSize?: IconSize;
-  iconType?: IconType;
-};
-
-export const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, KPIBoxProps>((
-    {
-      classNames,
-      semantic = 'neutral',
-      topContent,
-      middleContent,
-      bottomContent,
-      iconName,
-      iconSize = 'large',
-      iconType = 'solid',
-      ...props
-    }: KPIBoxProps,
-    ref,
-  ) => (
-    <div
-      {...props}
-      ref={ref}
-      data-testid="KPIBox"
-      className={classify(css.wrapper, classNames?.wrapper)}
-    >
-      {!!iconName && (
-        <SemanticIcon
-          semantic={semantic}
-          name={iconName}
-          size={iconSize}
-          type={iconType}
-        />
-      )}
-
-      <div className={css.textContainer}>
-        {!!topContent && (
-          <div
-            className={classify(
-              css.topFoldContent,
-              classNames?.topFoldContent,
-            )}
-          >
-            {topContent}
-          </div>
-        )}
-        {!!middleContent && (
-          <div
-            className={classify(
-              css.middleFoldContent,
-              classNames?.middleFoldContent,
-            )}
-          >
-            {middleContent}
-          </div>
-        )}
-        {!!bottomContent && (
-          <div
-            className={classify(
-              css.bottomFoldContent,
-              classNames?.bottomFoldContent,
-            )}
-          >
-            {bottomContent}
-          </div>
-        )}
-      </div>
-    </div>
-  ));

package/lib/components/KPIBox/index.ts

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

package/lib/components/LinearLoader/LinearLoader.stories.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-
-import type {LinearLoaderProps} from './LinearLoader';
-import {LinearLoader} from './LinearLoader';
-
-import css from './LinearLoader.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Linear Loader',
-  component: LinearLoader,
-  argTypes: {
-    value: {
-      description: 'The value to be used to show the progress out of 100',
-      type: {required: true},
-      name: 'value',
-      table: {
-        type: {summary: 'number'},
-      },
-    },
-    className: {
-      description: 'External className to be applied on container',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    indeterminate: {
-      description: 'If **true**, the loader is animated infinitely',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    size: {
-      description:
-        'Linear Loader supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
-      options: ['large', 'medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Linear Loader component',
-      description: {
-        component: `
-\`\`\`js
-import { LinearLoader } from "@spaced-out/ui-design-system/lib/components/LinearLoader";
-\`\`\`
-Do wrap this component in a container with fixed width. This is fluid in width and will take the width of container.
-Pass the new value prop as the progress out of 100 and the completed part will transition to new value with animation.
-For **Circular Loader**
-check **<a href="../?path=/docs/components-circular-loader--docs">here</a>**
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/LinearLoader/LinearLoader.jsx',
-    },
-  },
-};
-
-export const _LinearLoader = (args: LinearLoaderProps) => {
-  const [value, setValue] = React.useState(args.value);
-  const increaseValue = (delta: number) => {
-    if (delta > 0) {
-      if (value + delta <= 100) {
-        setValue(value + delta);
-      } else {
-        setValue(100);
-      }
-    } else if (delta < 0) {
-      if (value + delta >= 0) {
-        setValue(value + delta);
-      } else {
-        setValue(0);
-      }
-    }
-  };
-
-  return (
-    <div className={css.storyContainer}>
-      <div className={css.loaderContainer}>
-        <LinearLoader {...args} value={value} />
-      </div>
-      <div className={css.buttonWrap}>
-        <Button
-          size="small"
-          onClick={() => {
-            increaseValue(10);
-          }}
-        >
-          Click Me + 10{' '}
-        </Button>
-        <Button
-          size="small"
-          onClick={() => {
-            increaseValue(-10);
-          }}
-        >
-          Click Me - 10{' '}
-        </Button>
-        <Button
-          size="small"
-          onClick={() => {
-            increaseValue(100);
-          }}
-        >
-          Click Me 100{' '}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_LinearLoader.args = {
-  value: 34,
-  size: 'medium',
-};

package/lib/components/LinearLoader/LinearLoader.tsx

@@ -1,48 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-
-import css from './LinearLoader.module.css';
-
-
-export type LinearLoaderProps = {
-  value: number;
-  size?: 'large' | 'medium' | 'small';
-  className?: string;
-  indeterminate?: boolean;
-};
-
-export const LinearLoader: Flow.AbstractComponent<LinearLoaderProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, LinearLoaderProps>((
-  {
-    value,
-    size = 'medium',
-    className,
-    indeterminate,
-  }: LinearLoaderProps,
-  ref,
-) => (<div
-  className={classify(
-    css.lineContainer,
-    {
-      [css.large]: size === 'large',
-      [css.medium]: size === 'medium',
-      [css.small]: size === 'small',
-    },
-    className,
-  )}
-  ref={ref}
->
-{ /* @ts-ignore - TS2322 - Type '{ className: string; style: { width: string; }; role: "progressbar"; "aria-valuenow": number | undefined; "aria-valuemin": string; "aria-valuemax": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-  <div
-    className={classify(css.progressBar, {
-      [css.indeterminate]: indeterminate,
-    })}
-    style={{width: `${value + '%'}`}}
-    role="progressbar"
-    aria-valuenow={indeterminate ? undefined : value}
-    aria-valuemin="0"
-    aria-valuemax="100"
-  ></div>
-</div>));

package/lib/components/LinearLoader/index.ts

@@ -1 +0,0 @@
-export {LinearLoader} from './LinearLoader';