@superdispatch/ui 0.21.13 → 0.22.0

package/src/theme/Color.ts

@@ -1,117 +0,0 @@
-export type ColorVariant =
-  | 'grey'
-  | 'silver'
-  | 'blue'
-  | 'green'
-  | 'purple'
-  | 'red'
-  | 'teal'
-  | 'yellow';
-
-export enum Color {
-  //
-  // ???
-  //
-
-  White = '#fff',
-  White50 = 'rgba(255, 255, 255, 0.5)',
-  White40 = 'rgba(255, 255, 255, 0.4)',
-  White20 = 'rgba(255, 255, 255, 0.2)',
-  White10 = 'rgba(255, 255, 255, 0.1)',
-  White08 = 'rgba(255, 255, 255, 0.08)',
-  Transparent = 'rgba(0, 0, 0, 0)',
-
-  Black = '#000',
-  Black50 = 'rgba(0, 0, 0, 0.5)',
-  Black20 = 'rgba(0, 0, 0, 0.2)',
-
-  //
-  // Neutral Colors
-  //
-
-  /**@deprecated Use Dark100 */
-  Grey100 = '#8F949E',
-  /**@deprecated Use Dark200 */
-  Grey200 = '#6A707C',
-  /**@deprecated Use Dark300 */
-  Grey300 = '#5B6371',
-  /**@deprecated Use Dark400 */
-  Grey400 = '#323C4E',
-  /**@deprecated Use Dark450 */
-  Grey450 = '#222F44',
-  /**@deprecated Use Dark500 */
-  Grey500 = '#192334',
-
-  Dark100 = '#8F949E',
-  Dark200 = '#6A707C',
-  Dark300 = '#5B6371',
-  Dark400 = '#323C4E',
-  Dark450 = '#222F44',
-  Dark500 = '#192334',
-
-  Silver100 = '#F6F7F8',
-  Silver200 = '#F3F5F8',
-  Silver300 = '#E8ECF0',
-  Silver400 = '#E1E5EA',
-  Silver500 = '#C4CDD5',
-
-  //
-  // Extended Palette
-  //
-
-  Blue50 = '#EBF4FF',
-  Blue75 = '#CCE5FF',
-  Blue100 = '#A8D1FF',
-  Blue200 = '#66ADFF',
-  Blue300 = '#0075FF',
-  Blue400 = '#0063DB',
-  Blue500 = '#0050B2',
-
-  Green50 = '#ECF9EF',
-  Green75 = '#C8F4D1',
-  Green100 = '#90EAAE',
-  Green200 = '#5DDA87',
-  Green300 = '#1FA84D',
-  Green400 = '#1E8F46',
-  Green500 = '#19803D',
-
-  Purple50 = '#EFEEFC',
-  Purple75 = '#DCDBF5',
-  Purple100 = '#CBC8EE',
-  Purple200 = '#A7A1E8',
-  Purple300 = '#6559CF',
-  Purple400 = '#473ABB',
-  Purple500 = '#3A2F9D',
-
-  Red50 = '#FFEDEB',
-  Red75 = '#FDD9D3',
-  Red100 = '#FDC2BA',
-  Red200 = '#FE988B',
-  Red300 = '#EE3017',
-  Red400 = '#D9210D',
-  Red500 = '#C31909',
-
-  Teal50 = '#E3F6FC',
-  Teal75 = '#BEEDF9',
-  Teal100 = '#91E3F8',
-  Teal200 = '#61D3EF',
-  Teal300 = '#00A0CC',
-  Teal400 = '#008DB8',
-  Teal500 = '#007DA3',
-
-  Yellow50 = '#FFF9E5',
-  Yellow75 = '#FFF1C2',
-  Yellow100 = '#FFE494',
-  Yellow200 = '#FFDC6B',
-  Yellow300 = '#FFCB47',
-  Yellow400 = '#FFA91F',
-  Yellow500 = '#DB7500',
-}
-
-export type ColorProp = keyof typeof Color;
-
-export function isColorProp(name: unknown): name is ColorProp {
-  return (
-    typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name)
-  );
-}

package/src/theme/SuperDispatchTheme.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@material-ui/core';
-
-export type SuperDispatchTheme = Readonly<Required<Theme>>;

package/src/theme/ThemeProvider.tsx

@@ -1,179 +0,0 @@
-import {
-  createGenerateClassName,
-  createTheme,
-  CssBaseline,
-} from '@material-ui/core';
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
-import {
-  StylesProvider,
-  ThemeProvider as MaterialThemeProvider,
-} from '@material-ui/styles';
-import { useConstant } from '@superdispatch/hooks';
-import { Rule, StyleSheet } from 'jss';
-import { ReactElement, ReactNode } from 'react';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
-import { overrideAppBar } from '../app-bar/AppBarOverrides';
-import { overrideAutocomplete } from '../autocomplete/AutocompleteOverrides';
-import { overrideAvatar } from '../avatar/AvatarOverrides';
-import { overrideButton } from '../button/ButtonOverrides';
-import { overrideCard } from '../card/CardOverrides';
-import { overrideCheckbox } from '../checkbox/CheckboxOverrides';
-import { overrideChip } from '../chip/ChipOverrides';
-import { overrideDialog } from '../dialog/DialogOverrides';
-import { overrideDrawer } from '../drawer/DrawerOverrides';
-import { overrideIconButton } from '../icon-button/IconButtonOverrides';
-import { overrideLink } from '../link/LinkOverrides';
-import { overrideList } from '../list/ListOverrides';
-import { overrideMenu } from '../menu/MenuOverrides';
-import { overridePagination } from '../pagination/PaginationOverrides';
-import { overridePaper } from '../paper/PaperOverrides';
-import { overrideRadio } from '../radio/RadioOverrides';
-import { ResponsiveContextProvider } from '../responsive/ResponsiveContext';
-import { overrideSnackbar } from '../snackbar/SnackbarOverrides';
-import { SnackbarStackProvider } from '../snackbar/SnackbarStack';
-import { overrideSvgIcon } from '../svg-icon/SvgIconOverrides';
-import { overrideSwitch } from '../switch/SwitchOverrides';
-import { overrideTabs } from '../tabs/TabsOverrides';
-import { overrideTextField } from '../text-field/TextFieldOverrides';
-import { overrideToolbar } from '../toolbar/ToolbarOverrides';
-import { overrideTooltip } from '../tooltip/TooltipOverrides';
-import {
-  createTypographyOptions,
-  overrideTypography,
-} from '../typography/TypographyOverrides';
-import { Color } from './Color';
-import { SuperDispatchTheme } from './SuperDispatchTheme';
-
-function createSuperDispatchTheme(): SuperDispatchTheme {
-  const breakpoints = createBreakpoints({});
-  const theme = createTheme({
-    breakpoints,
-
-    palette: {
-      primary: {
-        main: Color.Blue300,
-      },
-
-      error: {
-        main: Color.Red300,
-      },
-
-      action: {
-        hover: Color.Silver100,
-        selected: Color.Silver300,
-        disabled: Color.Silver400,
-      },
-
-      text: {
-        primary: Color.Dark500,
-        secondary: Color.Dark200,
-        hint: Color.Dark100,
-        disabled: Color.Dark100,
-      },
-
-      divider: Color.Silver400,
-    },
-
-    typography: createTypographyOptions(breakpoints),
-
-    props: {},
-    overrides: {},
-  }) as SuperDispatchTheme;
-
-  overrideAppBar(theme);
-  overrideAutocomplete(theme);
-  overrideAvatar(theme);
-  overrideButton(theme);
-  overrideCard(theme);
-  overrideCheckbox(theme);
-  overrideChip(theme);
-  overrideDialog(theme);
-  overrideDrawer(theme);
-  overrideIconButton(theme);
-  overrideLink(theme);
-  overrideList(theme);
-  overrideMenu(theme);
-  overridePaper(theme);
-  overrideRadio(theme);
-  overrideSnackbar(theme);
-  overrideSvgIcon(theme);
-  overrideSwitch(theme);
-  overrideTabs(theme);
-  overrideTextField(theme);
-  overrideToolbar(theme);
-  overrideTooltip(theme);
-  overrideTypography(theme);
-  overridePagination(theme);
-
-  return theme;
-}
-
-const generateMaterialClassName = createGenerateClassName();
-
-function generateClassName(rule: Rule, sheet?: StyleSheet): string {
-  const { meta, link } = sheet?.options || {};
-
-  if (meta && rule.type === 'style') {
-    if (meta.startsWith('SD-')) {
-      return `${meta}-${rule.key}`;
-    }
-
-    if (meta.startsWith('Mui')) {
-      const isPseudoClass = [
-        'checked',
-        'disabled',
-        'error',
-        'focused',
-        'focusVisible',
-        'required',
-        'expanded',
-        'selected',
-      ].includes(rule.key);
-
-      if (isPseudoClass) {
-        return `Mui-${rule.key}`;
-      }
-
-      if (!link) {
-        return `${meta}-${rule.key}`;
-      }
-    }
-  }
-
-  return generateMaterialClassName(rule, sheet);
-}
-
-export interface ThemeProviderProps {
-  children?: ReactNode;
-  injectFirst?: boolean;
-  modifier?: (theme: SuperDispatchTheme) => SuperDispatchTheme;
-}
-
-export function ThemeProvider({
-  modifier,
-  children,
-  injectFirst = true,
-}: ThemeProviderProps): ReactElement {
-  const theme = useConstant(() => {
-    const nextTheme = createSuperDispatchTheme();
-
-    return !modifier ? nextTheme : modifier(nextTheme);
-  });
-
-  return (
-    <StylesProvider
-      injectFirst={injectFirst}
-      generateClassName={generateClassName}
-    >
-      <MaterialThemeProvider theme={theme}>
-        <CssBaseline />
-
-        <StyledThemeProvider theme={theme}>
-          <ResponsiveContextProvider>
-            <SnackbarStackProvider>{children}</SnackbarStackProvider>
-          </ResponsiveContextProvider>
-        </StyledThemeProvider>
-      </MaterialThemeProvider>
-    </StylesProvider>
-  );
-}

package/src/theme/__tests__/CssBaseline.spec.tsx

@@ -1,49 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-
-it('checks component css', () => {
-  expect(renderCSS(<div />, ['MuiCssBaseline'])).toMatchInlineSnapshot(`
-html {
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-strong,
-b {
-  font-weight: 600;
-}
-
-body {
-  color: Color.Dark500;
-  margin: 0;
-  font-size: 14px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-  background-color: #fafafa;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  body {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-@media print {
-  body {
-    background-color: Color.White;
-  }
-}
-
-body::backdrop {
-  background-color: #fafafa;
-}
-`);
-});

package/src/theme/__tests__/ThemeProvider.spec.ts

@@ -1,40 +0,0 @@
-import { renderTheme } from '@superdispatch/ui-testutils';
-import { Color } from '../Color';
-
-const colors = new Map<string, string>(
-  Object.entries(Color).map(([k, v]) => [v, `Color.${k}`]),
-);
-const colorRegExp = new RegExp(
-  Array.from(colors.keys(), (x) =>
-    x.replace('(', '\\(').replace(')', '\\)'),
-  ).join('|'),
-  'g',
-);
-
-expect.addSnapshotSerializer({
-  test: (value) =>
-    !!value && typeof value === 'string' && colorRegExp.test(value),
-  print: (value) =>
-    JSON.stringify(
-      String(value).replace(
-        colorRegExp,
-        (color) => colors.get(color) as string,
-      ),
-    ),
-});
-
-it('exposes overridden theme', () => {
-  const { props, overrides, typography, ...theme } = renderTheme();
-
-  Object.entries(theme).forEach(([key, value]) => {
-    expect(value).toMatchSnapshot(key);
-  });
-});
-
-it('allows to modify overridden theme', () => {
-  const modifier = jest.fn((x) => x);
-  const view = renderTheme(modifier);
-
-  expect(modifier).toHaveBeenCalledTimes(1);
-  expect(modifier).toHaveBeenCalledWith(view);
-});

package/src/theme/__tests__/__snapshots__/ThemeProvider.spec.ts.snap

@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`exposes overridden theme: breakpoints 1`] = `
-Object {
-  "between": [Function],
-  "down": [Function],
-  "keys": Array [
-    "xs",
-    "sm",
-    "md",
-    "lg",
-    "xl",
-  ],
-  "only": [Function],
-  "up": [Function],
-  "values": Object {
-    "lg": 1280,
-    "md": 960,
-    "sm": 600,
-    "xl": 1920,
-    "xs": 0,
-  },
-  "width": [Function],
-}
-`;
-
-exports[`exposes overridden theme: direction 1`] = `"ltr"`;
-
-exports[`exposes overridden theme: mixins 1`] = `
-Object {
-  "gutters": [Function],
-  "toolbar": Object {
-    "@media (min-width:0px) and (orientation: landscape)": Object {
-      "minHeight": 48,
-    },
-    "@media (min-width:600px)": Object {
-      "minHeight": 64,
-    },
-    "minHeight": 56,
-  },
-}
-`;
-
-exports[`exposes overridden theme: palette 1`] = `
-Object {
-  "action": Object {
-    "activatedOpacity": 0.12,
-    "active": "rgba(0, 0, 0, 0.54)",
-    "disabled": "Color.Silver400",
-    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-    "disabledOpacity": 0.38,
-    "focus": "rgba(0, 0, 0, 0.12)",
-    "focusOpacity": 0.12,
-    "hover": "Color.Silver100",
-    "hoverOpacity": 0.04,
-    "selected": "Color.Silver300",
-    "selectedOpacity": 0.08,
-  },
-  "augmentColor": [Function],
-  "background": Object {
-    "default": "#fafafa",
-    "paper": "Color.White",
-  },
-  "common": Object {
-    "black": "Color.Black",
-    "white": "Color.White",
-  },
-  "contrastThreshold": 3,
-  "divider": "Color.Silver400",
-  "error": Object {
-    "contrastText": "Color.White",
-    "dark": "rgb(166, 33, 16)",
-    "light": "rgb(241, 89, 69)",
-    "main": "Color.Red300",
-  },
-  "getContrastText": [Function],
-  "grey": Object {
-    "100": "#f5f5f5",
-    "200": "#eeeeee",
-    "300": "#e0e0e0",
-    "400": "#bdbdbd",
-    "50": "#fafafa",
-    "500": "#9e9e9e",
-    "600": "#757575",
-    "700": "#616161",
-    "800": "#424242",
-    "900": "#212121",
-    "A100": "#d5d5d5",
-    "A200": "#aaaaaa",
-    "A400": "#303030",
-    "A700": "#616161",
-  },
-  "info": Object {
-    "contrastText": "Color.White",
-    "dark": "#1976d2",
-    "light": "#64b5f6",
-    "main": "#2196f3",
-  },
-  "primary": Object {
-    "contrastText": "Color.White",
-    "dark": "rgb(0, 81, 178)",
-    "light": "rgb(51, 144, 255)",
-    "main": "Color.Blue300",
-  },
-  "secondary": Object {
-    "contrastText": "Color.White",
-    "dark": "#c51162",
-    "light": "#ff4081",
-    "main": "#f50057",
-  },
-  "success": Object {
-    "contrastText": "rgba(0, 0, 0, 0.87)",
-    "dark": "#388e3c",
-    "light": "#81c784",
-    "main": "#4caf50",
-  },
-  "text": Object {
-    "disabled": "Color.Dark100",
-    "hint": "Color.Dark100",
-    "primary": "Color.Dark500",
-    "secondary": "Color.Dark200",
-  },
-  "tonalOffset": 0.2,
-  "type": "light",
-  "warning": Object {
-    "contrastText": "rgba(0, 0, 0, 0.87)",
-    "dark": "#f57c00",
-    "light": "#ffb74d",
-    "main": "#ff9800",
-  },
-}
-`;
-
-exports[`exposes overridden theme: shadows 1`] = `
-Array [
-  "none",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-  "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)",
-]
-`;
-
-exports[`exposes overridden theme: shape 1`] = `
-Object {
-  "borderRadius": 4,
-}
-`;
-
-exports[`exposes overridden theme: spacing 1`] = `[Function]`;
-
-exports[`exposes overridden theme: transitions 1`] = `
-Object {
-  "create": [Function],
-  "duration": Object {
-    "complex": 375,
-    "enteringScreen": 225,
-    "leavingScreen": 195,
-    "short": 250,
-    "shorter": 200,
-    "shortest": 150,
-    "standard": 300,
-  },
-  "easing": Object {
-    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-  },
-  "getAutoHeightDuration": [Function],
-}
-`;
-
-exports[`exposes overridden theme: zIndex 1`] = `
-Object {
-  "appBar": 1100,
-  "drawer": 1200,
-  "mobileStepper": 1000,
-  "modal": 1300,
-  "snackbar": 1400,
-  "speedDial": 1050,
-  "tooltip": 1500,
-}
-`;

package/src/tiles/Tiles.stories.tsx

@@ -1,69 +0,0 @@
-import { Link } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Placeholder } from '@superdispatch/ui-docs';
-import { Tiles } from './Tiles';
-
-export default {
-  title: 'Layout/Tiles',
-  component: Tiles,
-  parameters: {
-    componentSubtitle: (
-      <>
-        Heavily inspired by the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system/components/Tiles">
-          Tiles
-        </Link>{' '}
-        component from the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system">
-          BRAID Design System
-        </Link>
-        .
-      </>
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <Tiles columns={3}>
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-  </Tiles>
-);
-
-export const responsiveColumns = () => (
-  <Tiles columns={{ xs: 1, sm: 4 }}>
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-  </Tiles>
-);
-
-export const responsiveSpace = () => (
-  <Tiles columns={3} space={{ xs: 4, sm: 2 }}>
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-    <Placeholder height={48} />
-  </Tiles>
-);