@superdispatch/ui-lab 0.21.13 → 0.21.14

package/src/sidebar/SidebarSubheader.tsx

@@ -1,38 +0,0 @@
-import { Column, Columns } from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled from 'styled-components';
-import { TextBox } from '../text-box/TextBox';
-
-const SidebarSubheaderRoot = styled.div`
-  display: flex;
-  align-items: center;
-
-  height: 40px;
-  max-height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export interface SidebarSubheaderProps {
-  id?: string;
-  action?: ReactNode;
-  children?: ReactNode;
-}
-
-export const SidebarSubheader = forwardRef<
-  HTMLDivElement,
-  SidebarSubheaderProps
->(({ id, action, children }, ref) => {
-  return (
-    <SidebarSubheaderRoot ref={ref}>
-      <Columns space="xsmall" align="center">
-        <Column>
-          <TextBox id={id} variant="heading-6" color="secondary" noWrap={true}>
-            {children}
-          </TextBox>
-        </Column>
-        {!!action && <Column width="content">{action}</Column>}
-      </Columns>
-    </SidebarSubheaderRoot>
-  );
-});

package/src/styled.d.ts

@@ -1,12 +0,0 @@
-import { SuperDispatchTheme } from '@superdispatch/ui';
-import 'styled-components';
-
-declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends SuperDispatchTheme {}
-
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  export interface StyledConfig<O extends object = {}> {
-    displayName?: string;
-  }
-}

package/src/text-box/TextBox.stories.tsx

@@ -1,108 +0,0 @@
-import { Meta } from '@storybook/react';
-import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
-import { Box } from '../box/Box';
-import { TextBox } from './TextBox';
-
-export default { title: 'Lab/TextBox', component: TextBox } as Meta;
-
-export const basic = () => (
-  <TextBox>
-    Hello{' '}
-    <span role="img" aria-label="waving hand">
-      👋
-    </span>
-  </TextBox>
-);
-
-export const alignment = () => (
-  <Columns space="xsmall">
-    <Column>
-      <Box backgroundColor="Silver300" padding="xsmall" borderRadius="small">
-        <TextBox align="right">Align Right</TextBox>
-      </Box>
-    </Column>
-
-    <Column>
-      <Box backgroundColor="Silver300" padding="xsmall" borderRadius="small">
-        <TextBox align="center">Align Center</TextBox>
-      </Box>
-    </Column>
-
-    <Column>
-      <Box backgroundColor="Silver300" padding="xsmall" borderRadius="small">
-        <TextBox align="left">Align Left</TextBox>
-      </Box>
-    </Column>
-  </Columns>
-);
-
-export const responsiveAlignment = () => (
-  <Box backgroundColor="Silver300" padding="xsmall" borderRadius="small">
-    <TextBox align={['center', 'right']}>Text</TextBox>
-  </Box>
-);
-
-export const colors = () => (
-  <Box backgroundColor="Silver300" borderRadius="small" padding="xsmall">
-    <Inline>
-      <TextBox color="primary">Primary</TextBox>
-      <TextBox color="secondary">Secondary</TextBox>
-      <TextBox color="white">White</TextBox>
-      <TextBox color="blue">Blue</TextBox>
-      <TextBox color="green">Green</TextBox>
-      <TextBox color="purple">Purple</TextBox>
-      <TextBox color="red">Red</TextBox>
-      <TextBox color="teal">Teal</TextBox>
-      <TextBox color="yellow">Yellow</TextBox>
-    </Inline>
-  </Box>
-);
-
-export const variants = () => (
-  <Stack>
-    <TextBox variant="heading-1">h1. Heading</TextBox>
-    <TextBox variant="heading-2">h2. Heading</TextBox>
-    <TextBox variant="heading-3">h3. Heading</TextBox>
-    <TextBox variant="heading-4">h4. Heading</TextBox>
-    <TextBox variant="heading-5">h5. Heading</TextBox>
-    <TextBox variant="heading-6">h6. Heading</TextBox>
-    <TextBox variant="body">
-      body. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
-    </TextBox>
-    <TextBox variant="body-block">
-      body-block. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
-    </TextBox>
-    <TextBox variant="body-semibold">
-      body-semibold. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
-      consectetur, neque doloribus, cupiditate numquam dignissimos laborum
-      fugiat deleniti?
-    </TextBox>
-    <TextBox variant="caption">
-      caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-      blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-      neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
-    </TextBox>
-  </Stack>
-);
-
-export const noWrap = () => (
-  <Box width="128px">
-    <TextBox noWrap={true}>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </TextBox>
-  </Box>
-);
-
-export const wrapOverflow = () => (
-  <Box width="128px">
-    <TextBox wrapOverflow={true}>
-      Most words are short and don‘t need to break. But
-      Antidisestablishmentarianism is long.
-    </TextBox>
-  </Box>
-);

package/src/text-box/TextBox.tsx

@@ -1,229 +0,0 @@
-import {
-  Color,
-  parseResponsiveProp,
-  ResponsiveProp,
-  ResponsivePropTuple,
-  SuperDispatchTheme,
-} from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled, { css, CSSObject, SimpleInterpolation } from 'styled-components';
-import { mergeStyles } from '../utils/mergeStyles';
-import { createRuleNormalizer } from '../utils/RuleNormalizer';
-
-export type TextAlignProp = 'left' | 'right' | 'center';
-export type TextColorProp =
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'white'
-  | 'blue'
-  | 'green'
-  | 'purple'
-  | 'red'
-  | 'teal'
-  | 'yellow';
-export type TextDisplayProp =
-  | 'none'
-  | 'block'
-  | 'inline'
-  | 'initial'
-  | 'inherit';
-
-const normalizeTextColor = createRuleNormalizer<TextColorProp>({
-  inherit: 'inherit',
-
-  primary: Color.Dark500,
-  secondary: Color.Dark200,
-
-  white: Color.White,
-  blue: Color.Blue300,
-  green: Color.Green300,
-  purple: Color.Purple500,
-  red: Color.Red300,
-  teal: Color.Teal300,
-  yellow: Color.Yellow300,
-});
-
-export type TextVariantProp =
-  | 'heading-1'
-  | 'heading-2'
-  | 'heading-3'
-  | 'heading-4'
-  | 'heading-5'
-  | 'heading-6'
-  | 'body'
-  | 'body-block'
-  | 'body-semibold'
-  | 'caption';
-
-const VARIANT_TYPE_MAPPING: Record<
-  TextVariantProp,
-  undefined | keyof JSX.IntrinsicElements
-> = {
-  'heading-1': 'h1',
-  'heading-2': 'h2',
-  'heading-3': 'h3',
-  'heading-4': 'h4',
-  'heading-5': 'h5',
-  'heading-6': 'h6',
-
-  body: 'span',
-  'body-block': 'p',
-  'body-semibold': 'span',
-  caption: 'span',
-};
-
-function variantMixin(
-  { typography, breakpoints }: SuperDispatchTheme,
-  variant: TextVariantProp,
-): CSSObject {
-  switch (variant) {
-    case 'heading-1':
-      return typography.h1 as CSSObject;
-    case 'heading-2':
-      return typography.h2 as CSSObject;
-    case 'heading-3':
-      return typography.h3 as CSSObject;
-    case 'heading-4':
-      return typography.h4 as CSSObject;
-    case 'heading-5':
-      return typography.h5 as CSSObject;
-    case 'heading-6':
-      return typography.h6 as CSSObject;
-    case 'body':
-    default:
-      return typography.body2 as CSSObject;
-    case 'body-block': {
-      return mergeStyles({}, typography.body2 as CSSObject, {
-        lineHeight: '24px',
-        [breakpoints.only('xs')]: { lineHeight: '28px' },
-      });
-    }
-    case 'body-semibold':
-      return typography.body1 as CSSObject;
-    case 'caption':
-      return typography.caption as CSSObject;
-  }
-}
-
-function textBoxMixin(
-  noWrap: boolean,
-  align: TextAlignProp,
-  color: TextColorProp,
-  display: TextDisplayProp,
-  wrapOverflow: boolean,
-): readonly SimpleInterpolation[] {
-  return css`
-    text-align: ${align};
-    color: ${normalizeTextColor(color)};
-    display: ${display === 'initial' && (noWrap || align !== 'left')
-      ? 'block'
-      : display};
-    overflow: ${noWrap ? 'hidden' : 'visible'};
-    white-space: ${noWrap ? 'nowrap' : 'normal'};
-    overflow-wrap: ${wrapOverflow ? 'break-word' : 'normal'};
-  `;
-}
-
-interface TextBoxRootProps {
-  $variant: TextVariantProp;
-  $noWrap: ResponsivePropTuple<boolean>;
-  $wrapOverflow: ResponsivePropTuple<boolean>;
-  $align: ResponsivePropTuple<TextAlignProp>;
-  $color: ResponsivePropTuple<TextColorProp>;
-  $display: ResponsivePropTuple<TextDisplayProp>;
-}
-
-const TextBoxRoot = styled.span<TextBoxRootProps>(
-  ({ theme, $noWrap, $variant, $align, $color, $display, $wrapOverflow }) =>
-    css`
-      margin: 0;
-      padding: 0;
-      text-overflow: ellipsis;
-
-      ${variantMixin(theme, $variant)};
-
-      ${textBoxMixin(
-        $noWrap[0],
-        $align[0],
-        $color[0],
-        $display[0],
-        $wrapOverflow[0],
-      )};
-
-      ${theme.breakpoints.up('sm')} {
-        ${textBoxMixin(
-          $noWrap[1],
-          $align[1],
-          $color[1],
-          $display[1],
-          $wrapOverflow[1],
-        )};
-      }
-
-      ${theme.breakpoints.up('md')} {
-        ${textBoxMixin(
-          $noWrap[2],
-          $align[2],
-          $color[2],
-          $display[2],
-          $wrapOverflow[2],
-        )};
-      }
-    `,
-);
-
-export interface TextBoxProps {
-  children?: ReactNode;
-  as?: keyof JSX.IntrinsicElements;
-
-  id?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  'aria-describedby'?: string;
-
-  variant?: TextVariantProp;
-
-  noWrap?: ResponsiveProp<boolean>;
-  wrapOverflow?: ResponsiveProp<boolean>;
-
-  align?: ResponsiveProp<TextAlignProp>;
-  color?: ResponsiveProp<TextColorProp>;
-  display?: ResponsiveProp<TextDisplayProp>;
-}
-
-export const TextBox = forwardRef<HTMLElement, TextBoxProps>(
-  (
-    {
-      variant: $variant = 'body',
-      as = VARIANT_TYPE_MAPPING[$variant],
-      align = 'left',
-      color = 'primary',
-      display = 'initial',
-      noWrap = false,
-      wrapOverflow = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const $align = parseResponsiveProp(align);
-    const $color = parseResponsiveProp(color);
-    const $noWrap = parseResponsiveProp(noWrap);
-    const $display = parseResponsiveProp(display);
-    const $wrapOverflow = parseResponsiveProp(wrapOverflow);
-
-    return (
-      <TextBoxRoot
-        {...props}
-        as={as}
-        ref={ref}
-        $align={$align}
-        $color={$color}
-        $noWrap={$noWrap}
-        $display={$display}
-        $variant={$variant}
-        $wrapOverflow={$wrapOverflow}
-      />
-    );
-  },
-);

package/src/utils/RuleNormalizer.ts

@@ -1,24 +0,0 @@
-export type RuleNormalizer = (input: unknown) => string | undefined;
-export type RuleNormalizerRecord<T extends string = string> = Readonly<
-  Record<T, undefined | RuleNormalizer>
->;
-
-export function createRuleNormalizer<TKey extends string>(
-  rules: Record<TKey, unknown>,
-): RuleNormalizer {
-  return (input) => {
-    if (typeof input == 'string') {
-      const value = rules[input as TKey];
-
-      if (typeof value == 'number') {
-        return `${value}px`;
-      }
-
-      if (typeof value == 'string') {
-        return value;
-      }
-    }
-
-    return undefined;
-  };
-}

package/src/utils/mergeStyles.ts

@@ -1,28 +0,0 @@
-import { CSSObject } from 'styled-components';
-
-export function mergeStyles(
-  styles: CSSObject,
-  ...sources: Array<null | false | undefined | CSSObject>
-): CSSObject {
-  for (const source of sources) {
-    if (source) {
-      for (const key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          const stylesValue = styles[key];
-          const sourceValue = source[key];
-
-          if (
-            typeof stylesValue == 'object' &&
-            typeof sourceValue == 'object'
-          ) {
-            mergeStyles(stylesValue, sourceValue);
-          } else {
-            styles[key] = source[key];
-          }
-        }
-      }
-    }
-  }
-
-  return styles;
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.build",
-  "exclude": [
-    "pkg",
-    "playroom.ts",
-    "**/*.spec.*",
-    "**/*.stories.*",
-    "**/*.playroom.*",
-    "**/__tests__/**",
-    "**/__testutils__/**"
-  ],
-  "references": [{ "path": "../hooks" }, { "path": "../__testutils__" }],
-  "compilerOptions": {
-    "composite": true,
-    "rootDir": "src",
-    "outDir": "pkg/dist-types",
-    "tsBuildInfoFile": "pkg/dist-types/.tsbuildinfo"
-  }
-}