@superdispatch/ui-lab 0.21.11 → 0.21.13

package/src/sidebar/SidebarSubheader.tsx

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,229 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,19 @@
+{
+  "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"
+  }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Super Dispatch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.