@superdispatch/ui-lab 0.21.11 → 0.21.12

package/src/alert/Alert.stories.tsx

@@ -0,0 +1,105 @@
+import { Meta } from '@storybook/react';
+import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
+import { Button } from '../button/Button';
+import { Alert } from './Alert';
+
+export default {
+  title: 'Lab/Alert',
+  component: Alert,
+} as Meta;
+
+export const basic = () => (
+  <Columns collapseBelow="tablet" space="xsmall">
+    <Column>
+      <Stack>
+        <Alert severity="positive">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="info">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="caution">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="critical">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+      </Stack>
+    </Column>
+
+    <Column>
+      <Stack>
+        <Alert severity="positive">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="info">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="caution">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="critical">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+      </Stack>
+    </Column>
+  </Columns>
+);

package/src/alert/Alert.tsx

@@ -0,0 +1,108 @@
+import { CheckCircle, Error, Info } from '@material-ui/icons';
+import {
+  Alert as MaterialAlert,
+  AlertProps as MaterialAlertProps,
+} from '@material-ui/lab';
+import { Color } from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled, { css, SimpleInterpolation } from 'styled-components';
+
+function colorMixin(
+  textColor: Color,
+  backgroundColor: Color,
+  buttonHoverColor: Color,
+): readonly SimpleInterpolation[] {
+  return css`
+    color: ${textColor};
+    background-color: ${backgroundColor};
+
+    & .MuiAlert-icon {
+      color: ${textColor};
+    }
+
+    & .MuiAlert-action {
+      & .MuiIconButton-root {
+        &:hover,
+        &:active {
+          color: ${buttonHoverColor};
+        }
+      }
+    }
+  `;
+}
+
+const StyledAlert = styled(MaterialAlert)`
+  &.MuiAlert-outlinedSuccess {
+    ${colorMixin(Color.Green500, Color.Green50, Color.Green400)};
+  }
+
+  &.MuiAlert-outlinedInfo {
+    ${colorMixin(Color.Blue500, Color.Blue50, Color.Blue400)};
+  }
+
+  &.MuiAlert-outlinedWarning {
+    ${colorMixin(Color.Yellow500, Color.Yellow50, Color.Yellow400)};
+  }
+
+  &.MuiAlert-outlinedError {
+    ${colorMixin(Color.Red500, Color.Red50, Color.Red400)};
+  }
+
+  & .MuiAlert-icon {
+    opacity: 1;
+    padding: 8px 0;
+    font-size: 24px;
+  }
+
+  & .MuiAlert-action {
+    display: block;
+    padding-top: 5px;
+    margin-right: -3px;
+
+    & .MuiIconButton-root {
+      & .MuiSvgIcon-root {
+        font-size: 24px;
+      }
+    }
+  }
+`;
+
+export type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
+
+export interface AlertProps {
+  onClose?: () => void;
+  children?: ReactNode;
+  severity?: AlertSeverityProp;
+}
+
+function toMaterialSeverity(
+  severity: AlertSeverityProp,
+): MaterialAlertProps['severity'] {
+  return severity === 'info'
+    ? 'info'
+    : severity === 'caution'
+    ? 'warning'
+    : severity === 'critical'
+    ? 'error'
+    : 'success';
+}
+
+const iconMapping: MaterialAlertProps['iconMapping'] = {
+  success: <CheckCircle />,
+  info: <Info />,
+  error: <Error />,
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ children, onClose, severity = 'positive' }, ref) => (
+    <StyledAlert
+      ref={ref}
+      variant="outlined"
+      iconMapping={iconMapping}
+      severity={toMaterialSeverity(severity)}
+      onClose={onClose}
+    >
+      {children}
+    </StyledAlert>
+  ),
+);

package/src/banner/Banner.stories.tsx

@@ -0,0 +1,64 @@
+import { Link } from '@material-ui/core';
+import { Meta } from '@storybook/react';
+import { Inline, Stack } from '@superdispatch/ui';
+import { UseState } from '@superdispatch/ui-docs';
+import { Button } from '../button/Button';
+import { TextBox } from '../text-box/TextBox';
+import { Banner } from './Banner';
+
+export default {
+  title: 'Lab/Banner',
+  component: Banner,
+} as Meta;
+
+export const basic = () => (
+  <Stack>
+    <UseState initialState={true}>
+      {(open, setOpen) => (
+        <Stack space="none">
+          <Button
+            size="small"
+            variant="neutral"
+            aria-label="Rate Button"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            {open ? 'Close' : 'Open'}
+          </Button>
+
+          <Banner
+            in={open}
+            border="top"
+            mountOnEnter={true}
+            unmountOnExit={true}
+          >
+            <Inline
+              verticalAlign="center"
+              horizontalAlign="center"
+              space="small"
+            >
+              <Inline
+                space="xxsmall"
+                verticalAlign="center"
+                horizontalAlign="center"
+              >
+                <TextBox color="inherit">
+                  Rate your recent experience with{' '}
+                </TextBox>
+                <Link
+                  color="inherit"
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://superdispatch.com/"
+                >
+                  SuperDispatch
+                </Link>
+              </Inline>
+            </Inline>
+          </Banner>
+        </Stack>
+      )}
+    </UseState>
+  </Stack>
+);

package/src/banner/Banner.tsx

@@ -0,0 +1,120 @@
+import { Color } from '@superdispatch/ui';
+import { forwardRef, useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+// eslint-disable-next-line import/no-internal-modules
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import styled, {
+  css,
+  Keyframes,
+  keyframes,
+  SimpleInterpolation,
+} from 'styled-components';
+
+function enterMixin(border: BorderPlacement): readonly SimpleInterpolation[] {
+  return css`
+  min-height: 56px;
+  color: ${Color.Dark500};
+  background-color: ${Color.White};
+
+  border-${border}: 1px #dfe3e8 solid;
+`;
+}
+
+function enterAnimation(border: BorderPlacement): Keyframes {
+  return keyframes`
+    0% { 
+      min-height: 0; 
+      color: ${Color.White};  
+      background-color: ${Color.Dark500};
+    }
+  
+    50% { 
+      min-height: 56px; 
+      color: ${Color.White};
+      background-color: ${Color.Dark500};
+    } 
+  
+    70% { 
+      min-height: 56px; 
+      color: ${Color.White};
+      background-color: ${Color.Dark500};
+    } 
+  
+    100% {
+      ${enterMixin(border)}
+    } 
+`;
+}
+
+type BorderPlacement = 'top' | 'bottom';
+
+type CustomerTransitionProps = CSSTransitionProps<HTMLDivElement> & {
+  className?: string;
+  border?: BorderPlacement;
+};
+
+const CustomTransition = forwardRef<
+  CSSTransition<HTMLDivElement>,
+  CustomerTransitionProps
+>(({ children, ...props }, ref) => (
+  <CSSTransition
+    {...props}
+    ref={ref}
+    timeout={3000}
+    classNames={props.className}
+  >
+    <div>{children}</div>
+  </CSSTransition>
+));
+
+const BannerContent = styled(CustomTransition)<CustomerTransitionProps>(
+  ({ border = 'bottom' }) => {
+    return css`
+      height: 0;
+      width: 100%;
+      overflow: hidden;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      color: ${Color.White};
+      background-color: ${Color.White};
+
+      &-enter-active {
+        animation: ${enterAnimation(border)} 2s 1s forwards;
+      }
+
+      &-enter-done {
+        ${enterMixin(border)};
+      }
+
+      &-exit {
+        ${enterMixin(border)};
+      }
+
+      &-exit-active {
+        min-height: 0;
+        transition: min-height 2s 1s;
+      }
+    `;
+  },
+);
+
+type BannerProps = Omit<
+  CustomerTransitionProps,
+  'timeout' | 'className' | 'classNames'
+>;
+
+export const Banner = forwardRef<CSSTransition<HTMLDivElement>, BannerProps>(
+  ({ in: inProp, ...props }, ref) => {
+    const [isIn, setIn] = useState(false);
+
+    // transition is not triggered on initial render with `in: true`
+    useEffect(() => {
+      setIn(!!inProp);
+    }, [inProp]);
+
+    return <BannerContent ref={ref} in={isIn} {...props} />;
+  },
+);

package/src/box/Box.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react';
+import { Box } from './Box';
+
+export default { title: 'Lab/Box', component: Box } as Meta;
+
+export const basic = () => (
+  <Box
+    display="inline-block"
+    borderWidth="small"
+    borderTopRightRadius="small"
+    borderBottomRightRadius="small"
+    borderColor={['Blue200', 'Green200', 'Purple200']}
+    borderLeftWidth="large"
+    borderLeftColor={['Blue300', 'Green300', 'Purple300']}
+    padding={['large', 'medium', 'small']}
+    backgroundColor={['Blue50', 'Green50', 'Purple50']}
+  >
+    Hey
+  </Box>
+);

package/src/box/Box.tsx

@@ -0,0 +1,252 @@
+import {
+  Color,
+  ColorProp,
+  isColorProp,
+  NegativeSpaceProp,
+  parseResponsiveProp,
+  parseSpaceProp,
+  ResponsiveProp,
+  SpaceProp,
+} from '@superdispatch/ui';
+import { Property } from 'csstype';
+import { ForwardRefExoticComponent, ReactNode, Ref } from 'react';
+import styled, { CSSObject } from 'styled-components';
+import { createRuleNormalizer, RuleNormalizer } from '../utils/RuleNormalizer';
+
+//
+// Colors
+//
+
+function normalizeColor(input: unknown): string | undefined {
+  return isColorProp(input) ? Color[input] : undefined;
+}
+
+//
+// Space
+//
+
+function parseSpace(space: unknown): string {
+  return `${parseSpaceProp(space as SpaceProp)}px`;
+}
+
+//
+// Margins
+//
+
+export type MarginProp = 'auto' | SpaceProp | NegativeSpaceProp;
+function parseMargin(input: unknown): string {
+  if (input === 'auto') return input;
+
+  let prefix = '';
+
+  if (typeof input == 'string' && input.startsWith('-')) {
+    prefix = '-';
+    input = input.slice(1);
+  }
+
+  return prefix + parseSpace(input);
+}
+
+//
+// Borders
+//
+
+export type BorderRadiusProp = 'none' | 'small' | 'medium';
+const normalizeBorderRadius = createRuleNormalizer<BorderRadiusProp>({
+  none: 0,
+  small: 4,
+  medium: 8,
+});
+
+export type BorderWidthProp = 'none' | 'small' | 'medium' | 'large';
+const normalizeBorderWidth = createRuleNormalizer<BorderWidthProp>({
+  none: 0,
+  small: 1,
+  medium: 2,
+  large: 4,
+});
+
+//
+// Rules
+//
+
+interface BoxRules {
+  display?: ResponsiveProp<Property.Display>;
+
+  color?: ResponsiveProp<ColorProp>;
+  backgroundColor?: ResponsiveProp<ColorProp>;
+
+  borderColor?: ResponsiveProp<ColorProp>;
+  borderTopColor?: ResponsiveProp<ColorProp>;
+  borderLeftColor?: ResponsiveProp<ColorProp>;
+  borderRightColor?: ResponsiveProp<ColorProp>;
+  borderBottomColor?: ResponsiveProp<ColorProp>;
+
+  borderWidth?: ResponsiveProp<BorderWidthProp>;
+  borderTopWidth?: ResponsiveProp<BorderWidthProp>;
+  borderLeftWidth?: ResponsiveProp<BorderWidthProp>;
+  borderRightWidth?: ResponsiveProp<BorderWidthProp>;
+  borderBottomWidth?: ResponsiveProp<BorderWidthProp>;
+
+  padding?: ResponsiveProp<SpaceProp>;
+  paddingTop?: ResponsiveProp<SpaceProp>;
+  paddingLeft?: ResponsiveProp<SpaceProp>;
+  paddingRight?: ResponsiveProp<SpaceProp>;
+  paddingBottom?: ResponsiveProp<SpaceProp>;
+
+  margin?: ResponsiveProp<MarginProp>;
+  marginTop?: ResponsiveProp<MarginProp>;
+  marginLeft?: ResponsiveProp<MarginProp>;
+  marginRight?: ResponsiveProp<MarginProp>;
+  marginBottom?: ResponsiveProp<MarginProp>;
+
+  borderRadius?: ResponsiveProp<BorderRadiusProp>;
+  borderTopLeftRadius?: ResponsiveProp<BorderRadiusProp>;
+  borderTopRightRadius?: ResponsiveProp<BorderRadiusProp>;
+  borderBottomLeftRadius?: ResponsiveProp<BorderRadiusProp>;
+  borderBottomRightRadius?: ResponsiveProp<BorderRadiusProp>;
+
+  fontSize?: ResponsiveProp<Property.FontSize>;
+
+  width?: ResponsiveProp<Property.Width>;
+  maxWidth?: ResponsiveProp<Property.MaxWidth>;
+  minWidth?: ResponsiveProp<Property.MinWidth>;
+
+  height?: ResponsiveProp<Property.Height>;
+  maxHeight?: ResponsiveProp<Property.MaxHeight>;
+  minHeight?: ResponsiveProp<Property.MinHeight>;
+
+  overflow?: ResponsiveProp<Property.Overflow>;
+  overflowY?: ResponsiveProp<Property.OverflowY>;
+  overflowX?: ResponsiveProp<Property.OverflowX>;
+
+  top?: ResponsiveProp<Property.Top>;
+  left?: ResponsiveProp<Property.Left>;
+  right?: ResponsiveProp<Property.Right>;
+  bottom?: ResponsiveProp<Property.Bottom>;
+  position?: ResponsiveProp<Property.Position>;
+}
+
+const normalizers: Record<keyof BoxRules, undefined | RuleNormalizer> = {
+  display: undefined,
+
+  color: normalizeColor,
+  backgroundColor: normalizeColor,
+
+  borderColor: normalizeColor,
+  borderTopColor: normalizeColor,
+  borderLeftColor: normalizeColor,
+  borderRightColor: normalizeColor,
+  borderBottomColor: normalizeColor,
+
+  borderWidth: normalizeBorderWidth,
+  borderTopWidth: normalizeBorderWidth,
+  borderLeftWidth: normalizeBorderWidth,
+  borderRightWidth: normalizeBorderWidth,
+  borderBottomWidth: normalizeBorderWidth,
+
+  margin: parseMargin,
+  marginTop: parseMargin,
+  marginLeft: parseMargin,
+  marginRight: parseMargin,
+  marginBottom: parseMargin,
+
+  padding: parseSpace,
+  paddingTop: parseSpace,
+  paddingLeft: parseSpace,
+  paddingRight: parseSpace,
+  paddingBottom: parseSpace,
+
+  borderRadius: normalizeBorderRadius,
+  borderTopLeftRadius: normalizeBorderRadius,
+  borderTopRightRadius: normalizeBorderRadius,
+  borderBottomLeftRadius: normalizeBorderRadius,
+  borderBottomRightRadius: normalizeBorderRadius,
+
+  fontSize: undefined,
+
+  width: undefined,
+  maxWidth: undefined,
+  minWidth: undefined,
+
+  height: undefined,
+  maxHeight: undefined,
+  minHeight: undefined,
+
+  overflow: undefined,
+  overflowY: undefined,
+  overflowX: undefined,
+
+  top: undefined,
+  left: undefined,
+  right: undefined,
+  bottom: undefined,
+  position: undefined,
+};
+
+function injectRule(
+  styles: CSSObject,
+  key: string,
+  breakpoint: string,
+  value: unknown,
+  normalizer: undefined | RuleNormalizer,
+): void {
+  if (normalizer != null) value = normalizer(value);
+
+  if (value != null) {
+    let rules = styles[breakpoint];
+
+    if (typeof rules != 'object') {
+      rules = {};
+      styles[breakpoint] = rules;
+    }
+
+    rules[key] = String(value);
+  }
+}
+
+//
+// Box
+//
+
+export interface BoxProps extends BoxRules {
+  ref?: Ref<unknown>;
+  as?: keyof JSX.IntrinsicElements;
+
+  role?: string;
+  children?: ReactNode;
+}
+
+export const Box: ForwardRefExoticComponent<BoxProps> = styled.div<BoxProps>(
+  (props) => {
+    const { breakpoints } = props.theme;
+    const xs = breakpoints.up('xs');
+    const sm = breakpoints.up('sm');
+    const md = breakpoints.up('md');
+
+    const styles: CSSObject = {
+      margin: 0,
+      padding: 0,
+      borderWidth: 0,
+      borderStyle: 'solid',
+    };
+
+    for (const k in props) {
+      if (Object.prototype.hasOwnProperty.call(props, k) && k in normalizers) {
+        const key = k as keyof BoxRules;
+        const prop = props[key];
+
+        if (prop != null) {
+          const [mobile, tablet, desktop] = parseResponsiveProp(prop);
+
+          const normalizer = normalizers[key];
+          injectRule(styles, key, xs, mobile, normalizer);
+          injectRule(styles, key, sm, tablet, normalizer);
+          injectRule(styles, key, md, desktop, normalizer);
+        }
+      }
+    }
+
+    return styles;
+  },
+);