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

package/lib/components/FocusManagerWithArrowKeyNavigation/index.ts

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

package/lib/components/FormTitleWrapper/FormTitleWrapper.stories.tsx

@@ -1,173 +0,0 @@
-import * as React from 'react';
-
-import {CloseIcon} from '../Icon';
-import {Input} from '../Input';
-import {Link} from '../Link';
-
-import type {FormTitleWrapperProps} from './';
-import {FormTitleWrapper} from './FormTitleWrapper';
-
-import css from './FormTitleWrapper.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Form Title Wrapper',
-  component: FormTitleWrapper,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, title?: string, rightSlot?: string}',
-        },
-      },
-    },
-    title: {
-      description: 'The title to be displayed',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    iconName: {
-      description: 'The name of the icon to be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    iconType: {
-      description: 'The type of icon to be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'IconType',
-        },
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    iconSize: {
-      description: 'The size of the icon to be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'IconSize',
-        },
-        defaultValue: {summary: 'small'},
-      },
-    },
-    iconColor: {
-      description: 'The color of the icon to be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'ColorTypes',
-        },
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    rightSlot: {
-      description: 'The right slot to be displayed',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a FormTitleWrapper component.',
-      description: {
-        component: `
-\`\`\`js
-import { FormTitleWrapper } from "@spaced-out/ui-design-system/lib/components/FormTitleWrapper";
-\`\`\`
-A simple Form Group utility to be used in forms to group
-related fields together.
-This adds a title to the group of fields and an
-optional icon to the left of the title.
-The right slot can be used to add any additional
-actions or buttons to the right of the title.
-
-**Usage: **
-
-\`\`\`jsx
-<FormTitleWrapper
-  title="Basic Details"
-  iconName="signature"
-/>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/FormTitleWrapper/FormTitleWrapper.jsx',
-    },
-  },
-};
-
-export const _WithTitle = (args: FormTitleWrapperProps) => (<div className={css.container}>
-  <div className={css.section}>
-    <Input label="Type"></Input>
-  </div>
-  <div className={css.section}>
-    <FormTitleWrapper {...args}></FormTitleWrapper>
-    <Input label="Full Name"></Input>
-    <Input label="Email" type="email"></Input>
-  </div>
-</div>);
-
-_WithTitle.args = {
-  classNames: {wrapper: ''},
-  iconName: 'signature',
-  title: 'Basic Details',
-};
-
-export const _WithTitleAndRightSlot = (args: FormTitleWrapperProps) => (<div className={css.container}>
-  <div className={css.section}>
-    <Input label="Type"></Input>
-  </div>
-  <div className={css.section}>
-    <FormTitleWrapper
-      {...args}
-      rightSlot={
-        <div className={css.rightSlot}>
-          <CloseIcon />
-          <Link as="buttonTextMedium" color="primary">
-            Action
-          </Link>
-        </div>
-      }
-    ></FormTitleWrapper>
-    <Input label="Full Name"></Input>
-    <Input label="Email" type="email"></Input>
-  </div>
-</div>);
-
-_WithTitleAndRightSlot.args = {
-  classNames: {wrapper: ''},
-  iconName: 'signature',
-  title: 'Section Title',
-};

package/lib/components/FormTitleWrapper/FormTitleWrapper.tsx

@@ -1,63 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-
-import css from './FormTitleWrapper.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  title?: string;
-  rightSlot?: string;
-}>;
-
-export type FormTitleWrapperProps = {
-  classNames?: ClassNames;
-  iconType?: IconType;
-  iconName?: string;
-  iconSize?: IconSize;
-  iconColor?: ColorTypes;
-  title: React.ReactNode // Should always atleast have a title;
-  rightSlot?: React.ReactNode;
-};
-
-export const FormTitleWrapper: Flow.AbstractComponent<FormTitleWrapperProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, FormTitleWrapperProps>((
-  {
-    classNames,
-    iconType,
-    iconName,
-    iconSize = 'small',
-    iconColor,
-    title,
-    rightSlot,
-  }: FormTitleWrapperProps,
-  ref,
-) => (
-  <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
-    <div className={classify(css.leftSection, classNames?.wrapper)}>
-      {!!iconName && (
-        <Icon
-          type={iconType}
-          name={iconName}
-          size={iconSize}
-          color={iconColor}
-        />
-      )}
-      {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
-          we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.ReactNode,
-          this would break semantics in case custom components are passed inside
-       */}
-      <div className={classify(css.componentHousing, classNames?.title)}>
-        {title}
-      </div>
-    </div>
-    <div className={classify(css.rightSection, classNames?.rightSlot)}>
-      {rightSlot}
-    </div>
-  </div>
-));

package/lib/components/FormTitleWrapper/index.ts

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

package/lib/components/Grid/Col.stories.tsx

@@ -1,114 +0,0 @@
-import * as React from 'react';
-
-import {BodySmall} from '../Text';
-
-import type {ColProps} from './Grid';
-import {Col, Row} from './Grid';
-
-import css from './Grid.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Layout/Grid/Col',
-  component: [Row, Col],
-  argTypes: {
-    className: {
-      description: 'External className to be applied on Col',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    span: {
-      description: 'Raster number of cells to occupy',
-      control: {
-        type: 'number',
-        min: 1,
-        max: 12,
-      },
-      table: {
-        type: {summary: 'number'},
-      },
-    },
-    offset: {
-      description: 'The number of cells to offset Col from the left',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 11,
-      },
-      table: {
-        type: {summary: 'number'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Grid component',
-      description: {
-        component: `
-\`\`\`js
-import { Col } from "@spaced-out/ui-design-system/lib/components/Grid";
-\`\`\`
-In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
-Establish a set of column in the horizontal space defined by row (abbreviated col).
-Row component will be the outer space definer and Col will be child to Row.
-The child Cols can take space of one or more span or can have offset(empty space) of one of more span.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Grid/Grid.jsx',
-    },
-  },
-};
-
-export const _Col = (args: ColProps) => (<Row className={css.rowContainer}>
-  <Col className={css.sampleCol} span={2} {...args}>
-    <BodySmall color="inversePrimary">I am the one who knocks</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={3}>
-    <BodySmall color="inversePrimary">Hello 2</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} offset={1}>
-    <BodySmall color="inversePrimary">Hello 3</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 4</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 5</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 6</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 7</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={2}>
-    <BodySmall color="inversePrimary">Hello 8</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 9</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 10</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 11</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 12</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={3}>
-    <BodySmall color="inversePrimary">Hello 13</BodySmall>
-  </Col>
-</Row>);
-
-_Col.args = {
-  span: 1,
-  offset: 1,
-};

package/lib/components/Grid/Grid.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-
-import css from './Grid.module.css';
-
-
-export type RowProps = {
-  className?: string;
-  children?: React.ReactNode;
-  span?: number;
-  offset?: number;
-  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit';
-  repeatTracks?: string;
-};
-
-const GRID_SYSTEM_MAP = {
-  small: 24,
-  medium: 12,
-  large: 6,
-  autoFill: 'auto-fill',
-  autoFit: 'auto-fit',
-} as const;
-
-export const Row = (
-  {
-    className,
-    children,
-// @ts-ignore - TS6133 - 'span' is declared but its value is never read.
-    span = 1,
-    gridType = 'medium',
-    repeatTracks = '1fr',
-  }: RowProps,
-) => {
-  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
-  let columnSpanCount = 0;
-  let lastChildColCount = 0;
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-// @ts-ignore - TS2339 - Property 'span' does not exist on type 'unknown'. | TS2339 - Property 'offset' does not exist on type 'unknown'.
-      const {span = 1, offset = 0} = child.props;
-      if (span < 1) {
-        console.error(`span can not be less than one`);
-        return;
-      }
-      if (offset < 0) {
-        console.error(`offset can not be negative`);
-        return;
-      }
-      lastChildColCount = columnSpanCount;
-      columnSpanCount = lastChildColCount + offset + span;
-      let gridColumnStart = 0,
-// @ts-ignore - TS6133 - 'gridColumnEnd' is declared but its value is never read.
-        gridColumnEnd = 0;
-      if (gridType === 'autoFill' || gridType === 'autoFit') {
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'number'.
-        gridColumnStart = 'auto';
-        return React.cloneElement(child, {
-// @ts-ignore - TS2769 - No overload matches this call.
-          gridColumnStart,
-          gridColumnEnd: `span ${span}`,
-        });
-      } else if (
-        typeof gridRepeatCount === 'number' &&
-        columnSpanCount <= gridRepeatCount
-      ) {
-        gridColumnStart = lastChildColCount + offset + 1;
-        return React.cloneElement(child, {
-// @ts-ignore - TS2769 - No overload matches this call.
-          gridColumnStart,
-          gridColumnEnd: `span ${span}`,
-        });
-      } else {
-        console.error(`number of column exceed ${gridRepeatCount}`);
-      }
-    }
-  });
-
-  return (
-    <div
-      data-testid="Grid"
-      className={classify(css.gridRow, className)}
-      style={{
-        '--grid-repeat-count': gridRepeatCount,
-        '--repeat-tracks': repeatTracks,
-      }}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
-
-export type ColProps = {
-  className?: string;
-  children?: React.ReactNode;
-  span?: number;
-  offset?: number;
-  gridColumnStart?: number;
-  gridColumnEnd?: number;
-};
-
-export const Col = (
-  {
-    className,
-    children,
-    gridColumnStart,
-    gridColumnEnd,
-  }: ColProps,
-) => (<div
-  className={classify(css.gridColumn, className)}
-  style={{
-// @ts-ignore - TS2322 - Type 'number | undefined' is not assignable to type 'string | number'.
-    '--grid-column-start': gridColumnStart,
-// @ts-ignore - TS2322 - Type 'number | undefined' is not assignable to type 'string | number'.
-    '--grid-column-end': gridColumnEnd,
-  }}
->
-  {children}
-</div>);