@superdispatch/ui-lab 0.50.3 → 0.50.5

package/src/text-box/TextBox.tsx

@@ -0,0 +1,238 @@
+import {
+  ColorDynamic,
+  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'
+  | 'light-gray' //*deprecated use disabled instead
+  | 'disabled'
+  | 'white'
+  | 'blue'
+  | 'green'
+  | 'purple'
+  | 'red'
+  | 'teal'
+  | 'yellow';
+export type TextDisplayProp =
+  | 'none'
+  | 'block'
+  | 'inline'
+  | 'initial'
+  | 'inherit';
+
+const normalizeTextColor = createRuleNormalizer<TextColorProp>({
+  inherit: 'inherit',
+  primary: ColorDynamic.Dark500,
+  secondary: ColorDynamic.Dark300,
+  'light-gray': ColorDynamic.Dark100, //*deprecated use disabled instead
+  disabled: ColorDynamic.Dark100,
+  white: ColorDynamic.White,
+  blue: ColorDynamic.Blue500,
+  green: ColorDynamic.Green500,
+  purple: ColorDynamic.Purple500,
+  red: ColorDynamic.Red500,
+  teal: ColorDynamic.Teal500,
+  yellow: ColorDynamic.Yellow500,
+});
+
+export type TextVariantProp =
+  | 'heading-1'
+  | 'heading-2'
+  | 'heading-3'
+  | 'heading-4'
+  | 'heading-5'
+  | 'heading-6'
+  | 'body'
+  | 'body-block'
+  | 'body-semibold'
+  | 'caption'
+  | 'hint';
+
+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',
+  hint: '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;
+    case 'hint':
+      return mergeStyles({}, typography.caption as CSSObject, {
+        lineHeight: '20px',
+        fontSize: '13px',
+      });
+  }
+}
+
+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.