@superdispatch/ui 0.21.8 → 0.21.13

package/src/paper/PaperOverrides.ts

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

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

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

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

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

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

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

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

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

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

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

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

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