@superdispatch/ui 0.21.13 → 0.22.0

package/src/paper/PaperOverrides.ts

@@ -1,10 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overridePaper(theme: SuperDispatchTheme): void {
-  theme.props.MuiPaper = { elevation: 0 };
-
-  theme.overrides.MuiPaper = {
-    elevation0: { border: `1px solid ${Color.Silver400}` },
-  };
-}

package/src/paper/__tests__/Paper.spec.tsx

@@ -1,155 +0,0 @@
-import { Paper } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiPaper).toMatchInlineSnapshot(`
-    Object {
-      "elevation": 0,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Paper />, ['MuiPaper'])).toMatchInlineSnapshot(`
-.MuiPaper-root {
-  color: Color.Dark500;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: Color.White;
-}
-
-.MuiPaper-rounded {
-  border-radius: 4px;
-}
-
-.MuiPaper-outlined {
-  border: 1px solid Color.Silver400;
-}
-
-.MuiPaper-elevation0 {
-  border: 1px solid Color.Silver400;
-  box-shadow: none;
-}
-
-.MuiPaper-elevation1 {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation2 {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation3 {
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation4 {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation5 {
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation6 {
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation7 {
-  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
-    0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation8 {
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation9 {
-  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
-    0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation10 {
-  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
-    0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation11 {
-  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
-    0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation12 {
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
-    0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation13 {
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
-    0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation14 {
-  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
-    0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation15 {
-  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
-    0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation16 {
-  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation17 {
-  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
-    0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation18 {
-  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
-    0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation19 {
-  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
-    0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation20 {
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
-    0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation21 {
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
-    0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation22 {
-  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
-    0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation23 {
-  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
-    0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
-}
-
-.MuiPaper-elevation24 {
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
-    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-`);
-});

package/src/props/AlignProps.ts

@@ -1,22 +0,0 @@
-import { Property } from 'csstype';
-
-export type VerticalAlign = 'top' | 'center' | 'bottom';
-export type HorizontalAlign = 'left' | 'center' | 'right';
-
-export function parseAlignProp(
-  align: VerticalAlign | HorizontalAlign,
-): Property.AlignItems {
-  switch (align) {
-    case 'top':
-    case 'left':
-    default:
-      return 'initial';
-
-    case 'center':
-      return 'center';
-
-    case 'right':
-    case 'bottom':
-      return 'flex-end';
-  }
-}

package/src/props/CollapseProp.ts

@@ -1,13 +0,0 @@
-import { ResponsivePropTuple } from './ResponsiveProp';
-
-export type CollapseProp = 'tablet' | 'desktop';
-
-export function parseCollapsedBelow(
-  collapsedBelow: undefined | CollapseProp,
-): ResponsivePropTuple<boolean> {
-  return [
-    collapsedBelow === 'tablet' || collapsedBelow === 'desktop',
-    collapsedBelow === 'desktop',
-    false,
-  ];
-}

package/src/props/ResponsiveProp.ts

@@ -1,65 +0,0 @@
-import { useDeepEqualValue } from '@superdispatch/hooks';
-import { useResponsiveContext } from '../responsive/ResponsiveContext';
-
-export type ResponsivePropPrimitive = boolean | number | string;
-
-export type ResponsivePropTupleInit<T extends ResponsivePropPrimitive> =
-  readonly [mobile: T, tablet?: T, desktop?: T];
-export type ResponsiveProp<T extends ResponsivePropPrimitive> =
-  | T
-  | ResponsivePropTupleInit<T>;
-
-export type ResponsivePropTuple<T extends ResponsivePropPrimitive> = readonly [
-  mobile: T,
-  tablet: T,
-  desktop: T,
-];
-
-export function parseResponsiveProp<T extends ResponsivePropPrimitive>(
-  prop: ResponsiveProp<T>,
-): ResponsivePropTuple<T> {
-  if (typeof prop != 'object') return [prop, prop, prop];
-  let [mobile, tablet, desktop] = prop;
-
-  tablet ??= mobile;
-  desktop ??= tablet;
-
-  return [mobile, tablet, desktop];
-}
-
-export function useResponsiveProp<T extends ResponsivePropPrimitive>(
-  prop: ResponsiveProp<T>,
-): ResponsivePropTuple<T> {
-  return useDeepEqualValue(parseResponsiveProp(prop));
-}
-
-export interface PartialResponsivePropRecord<T> {
-  xs: T;
-  sm?: T;
-  md?: T;
-  lg?: T;
-  xl?: T;
-}
-
-export type ResponsivePropRecord<T extends ResponsivePropPrimitive> =
-  | T
-  | PartialResponsivePropRecord<T>;
-
-export function useResponsiveValue<T>(
-  xs: T,
-  sm: T,
-  md = sm,
-  lg = md,
-  xl = lg,
-): T {
-  const { breakpoint = 'xs' } = useResponsiveContext();
-  return { xs, sm, md, lg, xl }[breakpoint];
-}
-
-export function useResponsivePropRecord<T extends ResponsivePropPrimitive>(
-  prop: ResponsivePropRecord<T>,
-): T {
-  if (typeof prop != 'object') prop = { xs: prop };
-  const { xs, sm, md, lg, xl } = prop;
-  return useResponsiveValue(xs, sm ?? xs, md, lg, xl);
-}

package/src/props/SpaceProp.ts

@@ -1,40 +0,0 @@
-export type SpaceProp =
-  | 'none'
-  | 'xxsmall'
-  | 'xsmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'xlarge'
-  | 'xxlarge';
-
-export type NegativeSpaceProp =
-  | '-xxsmall'
-  | '-xsmall'
-  | '-small'
-  | '-medium'
-  | '-large'
-  | '-xlarge'
-  | '-xxlarge';
-
-export function parseSpaceProp(prop: SpaceProp): number {
-  switch (prop) {
-    case 'none':
-    default:
-      return 0;
-    case 'xxsmall':
-      return 4;
-    case 'xsmall':
-      return 8;
-    case 'small':
-      return 16;
-    case 'medium':
-      return 24;
-    case 'large':
-      return 32;
-    case 'xlarge':
-      return 40;
-    case 'xxlarge':
-      return 48;
-  }
-}

package/src/radio/RadioField.stories.tsx

@@ -1,42 +0,0 @@
-import {
-  FormControlLabel,
-  FormGroup,
-  Switch,
-  TextField,
-} from '@material-ui/core';
-import { CheckboxField, RadioField, RadioGroupField } from '..';
-
-export default { title: 'Inputs/RadioField', component: RadioField };
-
-export const basic = () => (
-  <RadioField label="Label" helperText="Helper Text" />
-);
-
-export const error = () => (
-  <RadioField label="Label" helperText="Error Text" error={true} />
-);
-
-export const disabled = () => (
-  <RadioGroupField label="Disabled">
-    <RadioField label="Checked" checked={true} disabled={true} />
-    <RadioField label="Unchecked" checked={false} disabled={true} />
-  </RadioGroupField>
-);
-
-export const labelPlacement = () => (
-  <RadioField
-    label="Label"
-    FormControlLabelProps={{ labelPlacement: 'start' }}
-  />
-);
-
-export const inlineForm = () => (
-  <RadioGroupField RadioGroupProps={{ row: true }}>
-    <FormGroup row={true}>
-      <RadioField label="Radio" />
-      <CheckboxField label="Checkbox" />
-      <FormControlLabel label="Switch" control={<Switch />} />
-      <TextField placeholder="Text Field" />
-    </FormGroup>
-  </RadioGroupField>
-);

package/src/radio/RadioField.tsx

@@ -1,55 +0,0 @@
-import {
-  FormControl,
-  FormControlLabel,
-  FormControlLabelProps,
-  FormHelperText,
-  Radio,
-  RadioProps,
-} from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
-
-export interface RadioFieldProps
-  extends Omit<RadioProps, 'onBlur' | 'onChange'>,
-    Pick<FormControlLabelProps, 'label' | 'onBlur' | 'onChange'> {
-  error?: boolean;
-  helperText?: ReactNode;
-  FormControlLabelProps?: Omit<
-    FormControlLabelProps,
-    | 'label'
-    | 'error'
-    | 'checked'
-    | 'onBlur'
-    | 'onChange'
-    | 'helperText'
-    | 'control'
-  >;
-}
-
-export const RadioField: ForwardRefExoticComponent<RadioFieldProps> =
-  forwardRef(
-    (
-      {
-        label,
-        error,
-        checked,
-        onBlur,
-        onChange,
-        helperText,
-        FormControlLabelProps: formControlLabelProps,
-        ...props
-      },
-      ref,
-    ) => (
-      <FormControl error={error}>
-        <FormControlLabel
-          {...formControlLabelProps}
-          label={label}
-          checked={checked}
-          onBlur={onBlur}
-          onChange={onChange}
-          control={<Radio ref={ref} color="primary" {...props} />}
-        />
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
-      </FormControl>
-    ),
-  );

package/src/radio/RadioGroupField.tsx

@@ -1,64 +0,0 @@
-import {
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  FormHelperTextProps,
-  FormLabel,
-  FormLabelProps,
-  RadioGroup,
-  RadioGroupProps,
-} from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
-
-export interface RadioGroupFieldProps
-  extends Omit<FormControlProps, 'hiddenLabel' | 'onChange'>,
-    Pick<RadioGroupProps, 'name' | 'value' | 'onChange'> {
-  RadioGroupProps?: Omit<RadioGroupProps, 'value' | 'onChange' | 'children'>;
-
-  label?: ReactNode;
-  FormLabelProps?: Omit<FormLabelProps, 'children'>;
-
-  helperText?: ReactNode;
-  FormHelperTextProps?: Omit<FormHelperTextProps, 'children'>;
-}
-
-export const RadioGroupField: ForwardRefExoticComponent<RadioGroupFieldProps> =
-  forwardRef(
-    (
-      {
-        name,
-        value = '',
-        onChange,
-        RadioGroupProps: radioGroupProps,
-
-        label,
-        FormLabelProps: formLabelProps,
-
-        helperText,
-        FormHelperTextProps: formHelperTextProps,
-
-        children,
-
-        ...formControlProps
-      },
-      ref,
-    ) => (
-      <FormControl {...formControlProps} hiddenLabel={!label}>
-        {!!label && <FormLabel {...formLabelProps}>{label}</FormLabel>}
-
-        <RadioGroup
-          ref={ref}
-          {...radioGroupProps}
-          name={name}
-          value={value as unknown}
-          onChange={onChange}
-        >
-          {children}
-        </RadioGroup>
-
-        {!!helperText && (
-          <FormHelperText {...formHelperTextProps}>{helperText}</FormHelperText>
-        )}
-      </FormControl>
-    ),
-  );

package/src/radio/RadioOverrides.tsx

@@ -1,51 +0,0 @@
-import { SvgIcon } from '@material-ui/core';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideRadio(theme: SuperDispatchTheme): void {
-  theme.props.MuiRadio = {
-    color: 'primary',
-    icon: (
-      <SvgIcon>
-        <circle
-          cx="12"
-          cy="12"
-          r="8.5"
-          fill={Color.White}
-          stroke="currentColor"
-        />
-      </SvgIcon>
-    ),
-    checkedIcon: (
-      <SvgIcon>
-        <circle
-          cx="12"
-          cy="12"
-          r="8.5"
-          fill="currentColor"
-          stroke="currentColor"
-        />
-
-        <circle cx="12" cy="12" r="4" fill={Color.White} />
-      </SvgIcon>
-    ),
-  };
-
-  theme.overrides.MuiRadio = {
-    root: {
-      color: Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625),
-    },
-
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color.Silver500,
-      },
-
-      '&:hover:not($checked)': {
-        color: Color.Dark100,
-      },
-    },
-  };
-}

package/src/radio/__tests__/Radio.spec.tsx

@@ -1,90 +0,0 @@
-import { Radio } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiRadio).toMatchInlineSnapshot(`
-    Object {
-      "checkedIcon": <WithStyles(ForwardRef(SvgIcon))>
-        <circle
-          cx="12"
-          cy="12"
-          fill="currentColor"
-          r="8.5"
-          stroke="currentColor"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          fill="#fff"
-          r="4"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-      "color": "primary",
-      "icon": <WithStyles(ForwardRef(SvgIcon))>
-        <circle
-          cx="12"
-          cy="12"
-          fill="#fff"
-          r="8.5"
-          stroke="currentColor"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Radio />, ['MuiRadio'])).toMatchInlineSnapshot(`
-.MuiRadio-root {
-  color: Color.Dark100;
-  margin-top: -5px;
-  margin-bottom: -5px;
-}
-
-.MuiRadio-colorPrimary.Mui-checked {
-  color: Color.Blue300;
-}
-
-.MuiRadio-colorPrimary.Mui-disabled {
-  color: Color.Silver400;
-}
-
-.MuiRadio-colorPrimary.Mui-checked.Mui-disabled {
-  color: Color.Silver500;
-}
-
-.MuiRadio-colorPrimary:hover:not(.Mui-checked) {
-  color: Color.Dark100;
-}
-
-.MuiRadio-colorPrimary.Mui-checked:hover {
-  background-color: rgba(0, 117, 255, 0.04);
-}
-
-@media (hover: none) {
-  .MuiRadio-colorPrimary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiRadio-colorSecondary.Mui-checked {
-  color: #f50057;
-}
-
-.MuiRadio-colorSecondary.Mui-disabled {
-  color: Color.Silver400;
-}
-
-.MuiRadio-colorSecondary.Mui-checked:hover {
-  background-color: rgba(245, 0, 87, 0.04);
-}
-
-@media (hover: none) {
-  .MuiRadio-colorSecondary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-`);
-});

package/src/responsive/CollapseBreakpoint.ts

@@ -1,21 +0,0 @@
-import type { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
-import { useResponsiveContext } from './ResponsiveContext';
-
-export type CollapseBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
-
-const BREAKPOINTS: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-export function useCollapseBreakpoint(
-  collapseBreakpoint: undefined | CollapseBreakpoint,
-): boolean {
-  const { breakpoint = 'xs' } = useResponsiveContext();
-
-  if (collapseBreakpoint == null) {
-    return false;
-  }
-
-  const breakpointIDX = BREAKPOINTS.indexOf(breakpoint);
-  const collapseBreakpointIDX = BREAKPOINTS.indexOf(collapseBreakpoint);
-
-  return breakpointIDX < collapseBreakpointIDX;
-}

package/src/responsive/MinBreakpoint.ts

@@ -1,21 +0,0 @@
-import type { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
-import { useResponsiveContext } from './ResponsiveContext';
-
-export type MinBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
-
-const BREAKPOINTS: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-export function useMinBreakpoint(
-  minBreakpoint: undefined | MinBreakpoint,
-): boolean {
-  const { breakpoint = 'xs' } = useResponsiveContext();
-
-  if (minBreakpoint == null) {
-    return false;
-  }
-
-  const breakpointIDX = BREAKPOINTS.indexOf(breakpoint);
-  const minBreakpointIDX = BREAKPOINTS.indexOf(minBreakpoint);
-
-  return minBreakpointIDX < breakpointIDX;
-}