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

package/lib/components/Card/Card.stories.tsx

@@ -1,245 +0,0 @@
-import * as React from 'react';
-
-import {spaceMedium} from '../../styles/variables/_space';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import {BodyLarge, BodySmall} from '../Text';
-import {Tooltip} from '../Tooltip';
-import {Truncate} from '../Truncate';
-
-import type {CardProps} from './Card';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  ClickableCard,
-  PADDING_SIZES,
-} from './Card';
-
-import css from './Card.stories.module.css';
-
-
-const paddingSizes: Array<unknown> = [...Object.keys(PADDING_SIZES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Card',
-  component: Card,
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<div>` element. Use this in `ClickableCard`',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    disabled: {
-      name: 'disabled',
-      description: `Disabled Card. Use this in ClickableCard. When true, User can not interact with the the clickableCard.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    paddingTop: {
-      description: 'Padding size for top of card',
-      options: paddingSizes,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    paddingRight: {
-      description: 'Padding size for right of card',
-      options: paddingSizes,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    paddingBottom: {
-      description: 'Padding size for bottom of card',
-      options: paddingSizes,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    paddingLeft: {
-      description: 'Padding size for left of card',
-      options: paddingSizes,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string}'},
-      },
-    },
-    children: {
-      type: {required: true},
-      description: 'The content of the Card',
-      table: {
-        type: {summary: 'React.Component'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Card component.',
-      description: {
-        component: `
-\`\`\`js
-import {
-  Card,
-  ClickableCard,
-  CardHeader,
-  CardTitle,
-  CardActions,
-  CardContent,
-  CardFooter
-} from "@spaced-out/ui-design-system/lib/components/Card";
-\`\`\`
-Simple Card component that supports padding as prop. Border and background are prefixed with default values.
-ClickableCard variant supports hover and focus states. You also have an option to add header and footer to the card.
-
-**Note:** If you pass \`'none'\` as the \`padding\` value to the Card, make sure to apply the same \`border-radius\`  
-to the top and bottom child elements to maintain visual consistency with the Card's corners.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Card/Card.jsx',
-    },
-  },
-};
-
-export const _Default = (args: CardProps) => (<div className={css.container}>
-  <Card {...args} classNames={{wrapper: css.cardContainer}}>
-    <BodyLarge>This is a card</BodyLarge>
-    <BodySmall>Set width and height through a className</BodySmall>
-    <BodySmall>Default Padding is set to {spaceMedium}</BodySmall>
-  </Card>
-</div>);
-
-export const _WithHeader = (args: CardProps) => (<div className={css.container}>
-  <Card {...args}>
-    <CardHeader>
-      <CardTitle>
-        <Truncate>Card With Header</Truncate>
-      </CardTitle>
-      <CardActions>
-        <Button type="ghost" iconLeftName="cloud-arrow-down"></Button>
-        <Button type="ghost" iconLeftName="add"></Button>
-      </CardActions>
-    </CardHeader>
-    <CardContent className={css.cardContainer}>
-      <BodyLarge>This is a card</BodyLarge>
-      <BodySmall>Set width and height through a className</BodySmall>
-      <BodySmall>Default Padding is set to {spaceMedium}</BodySmall>
-    </CardContent>
-  </Card>
-</div>);
-
-_WithHeader.args = {
-  classNames: {wrapper: css.cardContainerWithHeader},
-};
-
-export const _WithFooter = (args: CardProps) => (<div className={css.container}>
-  <Card {...args}>
-    <CardContent className={css.cardContainer}>
-      <BodyLarge>This is a card</BodyLarge>
-      <BodySmall>Set width and height through a className</BodySmall>
-      <BodySmall>Default Padding is set to {spaceMedium}</BodySmall>
-    </CardContent>
-    <CardFooter>
-      <CardTitle>
-        <Truncate>Save it?</Truncate>
-      </CardTitle>
-      <CardActions>
-        <Button type="tertiary" iconLeftName="trash">
-          Delete
-        </Button>
-        <Button type="secondary" iconLeftName="cloud-arrow-down">
-          Save
-        </Button>
-      </CardActions>
-    </CardFooter>
-  </Card>
-</div>);
-
-_WithFooter.args = {
-  classNames: {wrapper: css.cardContainerWithHeader},
-};
-
-export const _WithHeaderAndFooter = (args: CardProps) => (<div className={css.container}>
-  <Card {...args}>
-    <CardHeader>
-      <CardTitle>
-        <Truncate>Card With Header</Truncate>
-      </CardTitle>
-      <CardActions>
-        <Button type="ghost" iconLeftName="cloud-arrow-down"></Button>
-        <Button type="ghost" iconLeftName="add"></Button>
-      </CardActions>
-    </CardHeader>
-    <CardContent className={css.cardContainer}>
-      <BodyLarge>This is a card</BodyLarge>
-      <BodySmall>Set width and height through a className</BodySmall>
-      <BodySmall>Default Padding is set to {spaceMedium}</BodySmall>
-    </CardContent>
-    <CardFooter>
-      <CardTitle>
-        <Truncate>Save it?</Truncate>
-      </CardTitle>
-      <CardActions>
-        <Button type="tertiary" iconLeftName="trash">
-          Delete
-        </Button>
-        <Button type="secondary" iconLeftName="cloud-arrow-down">
-          Save
-        </Button>
-      </CardActions>
-    </CardFooter>
-  </Card>
-</div>);
-
-_WithFooter.args = {
-  classNames: {wrapper: css.cardContainerWithHeader},
-};
-
-export const _Clickable = (args: CardProps) => (<div className={css.container}>
-  <ClickableCard {...args} classNames={{wrapper: css.cardContainer}}>
-    <BodyLarge>This is a clickable card</BodyLarge>
-    <BodySmall>Set width and height through a className</BodySmall>
-    <BodySmall>Default Padding is set to {spaceMedium}</BodySmall>
-    <Tooltip title="Hello there!">
-      <Icon name="face-smile" />
-    </Tooltip>
-    <BodySmall>This has focus and hover states</BodySmall>
-  </ClickableCard>
-</div>);

package/lib/components/Card/Card.tsx

@@ -1,172 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import * as SPACES from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {capitalize} from '../../utils/string';
-
-import css from './Card.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export const PADDING_SIZES = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-  none: 'none',
-});
-
-export type PaddingSizeType = typeof PADDING_SIZES[keyof typeof PADDING_SIZES];
-
-export type CardProps = {
-  classNames?: ClassNames;
-  children: React.ReactNode;
-  paddingTop?: PaddingSizeType;
-  paddingRight?: PaddingSizeType;
-  paddingBottom?: PaddingSizeType;
-  paddingLeft?: PaddingSizeType;
-};
-
-export type CardChildProps = {
-  className?: string;
-  children: React.ReactNode;
-};
-
-export type ClickableCardProps = ((CardProps) & {
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  disabled?: boolean;
-});
-
-const getPaddingValue = (size: PaddingSizeType): string => {
-  const spaceKey = 'space' + capitalize(size);
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_space")'.
-  return SPACES[spaceKey] || SPACES['spaceNone'];
-};
-
-export const CardHeader = (
-  {
-    className,
-    children,
-    ...props
-  }: CardChildProps,
-) => (<div {...props} className={classify(css.cardHeader, className)}>
-  {children}
-</div>);
-
-export const CardTitle = (
-  {
-    className,
-    children,
-    ...props
-  }: CardChildProps,
-) => (<div {...props} className={classify(css.cardTitle, className)}>
-  {children}
-</div>);
-
-export const CardActions = (
-  {
-    className,
-    children,
-    ...props
-  }: CardChildProps,
-) => (<div {...props} className={classify(css.cardActions, className)}>
-  {children}
-</div>);
-
-export const CardFooter = (
-  {
-    className,
-    children,
-    ...props
-  }: CardChildProps,
-) => (<div {...props} className={classify(css.cardFooter, className)}>
-  {children}
-</div>);
-
-export const CardContent = (
-  {
-    className,
-    children,
-    ...props
-  }: CardChildProps,
-) => (<div {...props} className={classify(css.cardContent, className)}>
-  {children}
-</div>);
-
-export const Card: Flow.AbstractComponent<CardProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, CardProps>((
-    {
-      children,
-      classNames,
-      paddingTop = 'medium',
-      paddingRight = 'medium',
-      paddingBottom = 'medium',
-      paddingLeft = 'medium',
-      ...props
-    }: CardProps,
-    ref,
-  ) => (<div
-    {...props}
-    style={{
-      '--card-padding-top': getPaddingValue(paddingTop),
-      '--card-padding-right': getPaddingValue(paddingRight),
-      '--card-padding-bottom': getPaddingValue(paddingBottom),
-      '--card-padding-left': getPaddingValue(paddingLeft),
-    }}
-    data-testid="Card"
-    className={classify(css.cardWrapper, classNames?.wrapper)}
-    ref={ref}
-  >
-    {children}
-  </div>));
-
-export const ClickableCard: Flow.AbstractComponent<ClickableCardProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ClickableCardProps>((
-  {
-    classNames,
-    onClick,
-    disabled = false,
-    ...props
-  }: ClickableCardProps,
-  ref,
-) => {
-  const componentRef = React.useRef(null);
-// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
-  React.useImperativeHandle(ref, () => componentRef.current);
-  React.useEffect(() => {
-    if (disabled) {
-// @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
-      componentRef.current?.blur();
-    }
-  }, [disabled]);
-  const onClickHandler = (e: any) => {
-    if (!disabled) {
-      onClick && onClick(e);
-    }
-  };
-  const onKeyDownHandler = (e: any) => {
-    if (e.key === 'Enter') {
-      onClickHandler(e);
-    }
-  };
-  return (
-    <Card
-      {...props}
-      classNames={{
-        wrapper: classify(
-          css.clickableCard,
-          {[css.disabled]: disabled},
-          classNames?.wrapper,
-        ),
-      }}
-// @ts-ignore - TS2322 - Type '{ classNames: { wrapper: string; }; tabIndex: number; onClick: (e: any) => void; onKeyDown: (e: any) => void; ref: ForwardedRef<HTMLDivElement>; children: React.ReactNode; paddingTop?: string | undefined; paddingRight?: string | undefined; paddingBottom?: string | undefined; paddingLeft?: string | undefined; }' is not assignable to type 'IntrinsicAttributes & CardProps & RefAttributes<HTMLDivElement>'.
-      tabIndex={disabled ? -1 : 0}
-      onClick={onClickHandler}
-      onKeyDown={onKeyDownHandler}
-      ref={ref}
-    />
-  );
-});

package/lib/components/Card/index.ts

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

package/lib/components/Charts/ChartTooltip/index.ts

@@ -1,13 +0,0 @@
-import type {Tooltip} from '../../../types/charts';
-
-import typographyCss from '../../../styles/typography.module.css';
-import css from './ChartTooltip.module.css';
-
-
-export const tooltipTheme: Tooltip = {
-  headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
-  pointFormat: `<span class=${css.tooltipPoint}>
-      <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
-      <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
-    </span>`,
-};

package/lib/components/Charts/ChartWrapper/ChartWrapper.tsx

@@ -1,179 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import Highcharts from 'highcharts';
-import accessibility from 'highcharts/modules/accessibility';
-import drilldown from 'highcharts/modules/drilldown';
-import exporting from 'highcharts/modules/exporting';
-
-import {size180} from '../../../styles/variables/_size';
-import classify from '../../../utils/classify';
-import {ANCHOR_POSITION_TYPE, ButtonDropdown} from '../../ButtonDropdown';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '../../Card';
-import {CircularLoader} from '../../CircularLoader';
-import type {MenuOption} from '../../Menu';
-
-import css from './ChartWrapper.module.css';
-
-
-export type ExportOptionType = {
-  key: string;
-  label: string;
-  format: string;
-};
-
-export const EXPORT_OPTIONS = Object.freeze({
-  download_as_png: {
-    key: 'download_as_png',
-    label: 'Download as PNG',
-    format: 'image/png',
-  },
-  download_as_jpeg: {
-    key: 'download_as_jpeg',
-    label: 'Download as JPEG',
-    format: 'image/jpeg',
-  },
-  download_as_pdf: {
-    key: 'download_as_pdf',
-    label: 'Download as PDF',
-    format: 'application/pdf',
-  },
-  download_as_svg: {
-    key: 'download_as_svg',
-    label: 'Download as SVG',
-    format: 'image/svg+xml',
-  },
-});
-
-// on assumption that all export options will be shown by default
-const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ download_as_png: { key: string; label: string; format: string; }; download_as_jpeg: { key: string; label: string; format: string; }; download_as_pdf: { key: string; label: string; format: string; }; download_as_svg: { ...; }; }>'.
-  (exportKey) => EXPORT_OPTIONS[exportKey],
-);
-
-type CustomExportButtonProps = {
-  ref?: HTMLDivElement;
-  customExportOptions?: Array<ExportOptionType> | null;
-};
-
-const CustomExportButton = React.forwardRef<HTMLDivElement, CustomExportButtonProps>(({
-  customExportOptions = null,
-}: CustomExportButtonProps, ref) => {
-  exporting(Highcharts);
-  drilldown(Highcharts);
-  accessibility(Highcharts);
-
-  const exportOptions = customExportOptions
-    ? customExportOptions
-    : DEFAULT_EXPORT_OPTIONS;
-
-  const menuOptions: Array<MenuOption> = exportOptions.map((exportOption) => {
-    const {key, label} = exportOption;
-    return {key, label};
-  });
-
-  const handleDownload = (exportKey: string): void => {
-    const exportOptionObject = exportOptions.find(
-      (exportOption) => exportOption.key === exportKey,
-    );
-    const exportFormat = exportOptionObject?.format || '';
-// @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
-    if (ref.current) {
-// @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
-      ref.current.chart?.exportChart({type: exportFormat});
-    }
-  };
-
-  return (
-    <ButtonDropdown
-      ariaLabel="Export Chart Menu"
-      menu={{
-        isFluid: true,
-        menuDisabled: false,
-        options: menuOptions,
-        size: 'medium',
-        width: size180,
-      }}
-      iconLeftName="ellipsis"
-      onOptionSelect={(option) => handleDownload(option.key)}
-      size="small"
-      type="ghost"
-      anchorPosition={ANCHOR_POSITION_TYPE.bottomEnd}
-    />
-  );
-});
-
-export type ChartWrapperClassNames = Readonly<{
-  wrapper?: string;
-  header?: string;
-  title?: string;
-  actions?: string;
-  content?: string;
-  loader?: string;
-}>;
-
-type ChartWrapperProps = {
-  isLoading?: boolean;
-  title: React.ReactNode;
-  children?: React.ReactNode;
-  classNames?: ChartWrapperClassNames;
-  customExportOptions?: Array<ExportOptionType> | null;
-  headerActions?: React.ReactNode;
-  hasEmptyData?: boolean;
-  emptyText?: React.ReactNode;
-};
-
-export const ChartWrapper: Flow.AbstractComponent<ChartWrapperProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ChartWrapperProps>((
-  {
-    isLoading,
-    title,
-    children,
-    classNames,
-    customExportOptions,
-    headerActions,
-    hasEmptyData = false,
-    emptyText,
-  }: ChartWrapperProps,
-  ref,
-) => (<Card
-  classNames={{
-    wrapper: classify(
-      css.wrapper,
-      {[css.justifyCenter]: isLoading},
-      classNames?.wrapper,
-    ),
-  }}
->
-  {isLoading ? (
-    <CircularLoader
-      size="large"
-      className={classify(css.loader, classNames?.loader)}
-    />
-  ) : (
-    <>
-      <CardHeader className={classNames?.header}>
-        <CardTitle className={classNames?.title}>{title}</CardTitle>
-        <CardActions
-          className={classify(css.chartCardActions, classNames?.actions)}
-        >
-          <CustomExportButton
-            ref={ref}
-            customExportOptions={customExportOptions}
-          />
-          {headerActions ? headerActions : null}
-        </CardActions>
-      </CardHeader>
-      <CardContent
-        className={classify(css.chartContent, classNames?.content)}
-      >
-        {hasEmptyData && emptyText ? emptyText : children}
-      </CardContent>
-    </>
-  )}
-</Card>));

package/lib/components/Charts/ChartWrapper/index.ts

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