@superdispatch/ui-lab 0.21.13 → 0.21.15

package/src/alert/Alert.tsx

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

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

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

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

@@ -1,252 +0,0 @@
-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;
-  },
-);