@superdispatch/ui 0.21.13 → 0.22.0

package/src/typography/Typography.stories.tsx

@@ -1,132 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Stack } from '../stack/Stack';
-
-export default {
-  title: 'Data Display/Typography',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/typography/#props" />
-    ),
-  },
-};
-
-export const basic = () => (
-  <Stack>
-    <Typography variant="h1">h1</Typography>
-    <Typography variant="h2">h2</Typography>
-    <Typography variant="h3">h3</Typography>
-    <Typography variant="h4">h4</Typography>
-    <Typography variant="h5">h5</Typography>
-    <Typography variant="h6">h6</Typography>
-    <Typography variant="subtitle1">subtitle1</Typography>
-    <Typography variant="subtitle2">subtitle2</Typography>
-    <Typography variant="body1">body1</Typography>
-    <Typography variant="body2">body2</Typography>
-  </Stack>
-);
-
-export const secondary = () => (
-  <Stack>
-    <Typography variant="h1" color="textSecondary">
-      h1
-    </Typography>
-    <Typography variant="h2" color="textSecondary">
-      h2
-    </Typography>
-    <Typography variant="h3" color="textSecondary">
-      h3
-    </Typography>
-    <Typography variant="h4" color="textSecondary">
-      h4
-    </Typography>
-    <Typography variant="h5" color="textSecondary">
-      h5
-    </Typography>
-    <Typography variant="h6" color="textSecondary">
-      h6
-    </Typography>
-    <Typography variant="subtitle1" color="textSecondary">
-      subtitle1
-    </Typography>
-    <Typography variant="subtitle2" color="textSecondary">
-      subtitle2
-    </Typography>
-    <Typography variant="body1" color="textSecondary">
-      body1
-    </Typography>
-    <Typography variant="body2" color="textSecondary">
-      body2
-    </Typography>
-  </Stack>
-);
-
-export const primary = () => (
-  <Stack>
-    <Typography variant="h1" color="textPrimary">
-      h1
-    </Typography>
-    <Typography variant="h2" color="textPrimary">
-      h2
-    </Typography>
-    <Typography variant="h3" color="textPrimary">
-      h3
-    </Typography>
-    <Typography variant="h4" color="textPrimary">
-      h4
-    </Typography>
-    <Typography variant="h5" color="textPrimary">
-      h5
-    </Typography>
-    <Typography variant="h6" color="textPrimary">
-      h6
-    </Typography>
-    <Typography variant="subtitle1" color="textPrimary">
-      subtitle1
-    </Typography>
-    <Typography variant="subtitle2" color="textPrimary">
-      subtitle2
-    </Typography>
-    <Typography variant="body1" color="textPrimary">
-      body1
-    </Typography>
-    <Typography variant="body2" color="textPrimary">
-      body2
-    </Typography>
-  </Stack>
-);
-
-export const error = () => (
-  <Stack>
-    <Typography variant="h1" color="error">
-      h1
-    </Typography>
-    <Typography variant="h2" color="error">
-      h2
-    </Typography>
-    <Typography variant="h3" color="error">
-      h3
-    </Typography>
-    <Typography variant="h4" color="error">
-      h4
-    </Typography>
-    <Typography variant="h5" color="error">
-      h5
-    </Typography>
-    <Typography variant="h6" color="error">
-      h6
-    </Typography>
-    <Typography variant="subtitle1" color="error">
-      subtitle1
-    </Typography>
-    <Typography variant="subtitle2" color="error">
-      subtitle2
-    </Typography>
-    <Typography variant="body1" color="error">
-      body1
-    </Typography>
-    <Typography variant="body2" color="error">
-      body2
-    </Typography>
-  </Stack>
-);

package/src/typography/TypographyOverrides.ts

@@ -1,125 +0,0 @@
-import { Breakpoints } from '@material-ui/core/styles/createBreakpoints';
-import { TypographyOptions } from '@material-ui/core/styles/createTypography';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function createTypographyOptions(
-  breakpoints: Breakpoints,
-): TypographyOptions {
-  const xsOnly = breakpoints.only('xs');
-
-  return {
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightBold: 600,
-    fontFamily: '"Inter", sans-serif',
-
-    h1: {
-      fontSize: '32px',
-      lineHeight: '40px',
-      fontWeight: 700,
-      [xsOnly]: {
-        fontSize: '28px',
-        lineHeight: '36px',
-      },
-    },
-
-    h2: {
-      fontSize: '24px',
-      lineHeight: '28px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '22px',
-        lineHeight: '26px',
-      },
-    },
-
-    h3: {
-      fontSize: '20px',
-      lineHeight: '28px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '20px',
-        lineHeight: '26px',
-      },
-    },
-
-    h4: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '17px',
-        lineHeight: '26px',
-      },
-    },
-
-    h5: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px',
-      },
-    },
-
-    h6: {
-      fontSize: '12px',
-      lineHeight: '16px',
-      fontWeight: 700,
-      letterSpacing: '0.1em',
-      textTransform: 'uppercase',
-      [xsOnly]: {
-        fontSize: '14px',
-        lineHeight: '20px',
-      },
-    },
-
-    body1: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px',
-      },
-    },
-
-    body2: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 400,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px',
-      },
-    },
-
-    caption: {
-      fontSize: '12px',
-      lineHeight: '16px',
-      fontWeight: 400,
-      [xsOnly]: {
-        fontSize: '14px',
-        lineHeight: '20px',
-      },
-    },
-
-    button: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      textTransform: undefined,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px',
-      },
-    },
-  };
-}
-
-export function overrideTypography(theme: SuperDispatchTheme): void {
-  theme.props.MuiTypography = { variant: 'body2' };
-}

package/src/typography/__tests__/Typography.spec.tsx

@@ -1,253 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiTypography).toMatchInlineSnapshot(`
-    Object {
-      "variant": "body2",
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Typography />, ['MuiTypography'])).toMatchInlineSnapshot(`
-.MuiTypography-root {
-  margin: 0;
-}
-
-.MuiTypography-body2 {
-  font-size: 14px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-body2 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.MuiTypography-body1 {
-  font-size: 14px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-body1 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.MuiTypography-caption {
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 16px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-caption {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.MuiTypography-button {
-  font-size: 14px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-button {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.MuiTypography-h1 {
-  font-size: 32px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 700;
-  line-height: 40px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h1 {
-    font-size: 28px;
-    line-height: 36px;
-  }
-}
-
-.MuiTypography-h2 {
-  font-size: 24px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  line-height: 28px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h2 {
-    font-size: 22px;
-    line-height: 26px;
-  }
-}
-
-.MuiTypography-h3 {
-  font-size: 20px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  line-height: 28px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h3 {
-    font-size: 20px;
-    line-height: 26px;
-  }
-}
-
-.MuiTypography-h4 {
-  font-size: 16px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  line-height: 24px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h4 {
-    font-size: 17px;
-    line-height: 26px;
-  }
-}
-
-.MuiTypography-h5 {
-  font-size: 14px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h5 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.MuiTypography-h6 {
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 700;
-  line-height: 16px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiTypography-h6 {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.MuiTypography-subtitle1 {
-  font-size: 1rem;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 1.75;
-}
-
-.MuiTypography-subtitle2 {
-  font-size: 0.875rem;
-  font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  line-height: 1.57;
-}
-
-.MuiTypography-overline {
-  font-size: 0.75rem;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 2.66;
-  text-transform: uppercase;
-}
-
-.MuiTypography-srOnly {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-}
-
-.MuiTypography-alignLeft {
-  text-align: left;
-}
-
-.MuiTypography-alignCenter {
-  text-align: center;
-}
-
-.MuiTypography-alignRight {
-  text-align: right;
-}
-
-.MuiTypography-alignJustify {
-  text-align: justify;
-}
-
-.MuiTypography-noWrap {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.MuiTypography-gutterBottom {
-  margin-bottom: 0.35em;
-}
-
-.MuiTypography-paragraph {
-  margin-bottom: 16px;
-}
-
-.MuiTypography-colorInherit {
-  color: inherit;
-}
-
-.MuiTypography-colorPrimary {
-  color: Color.Blue300;
-}
-
-.MuiTypography-colorSecondary {
-  color: #f50057;
-}
-
-.MuiTypography-colorTextPrimary {
-  color: Color.Dark500;
-}
-
-.MuiTypography-colorTextSecondary {
-  color: Color.Dark200;
-}
-
-.MuiTypography-colorError {
-  color: Color.Red300;
-}
-
-.MuiTypography-displayInline {
-  display: inline;
-}
-
-.MuiTypography-displayBlock {
-  display: block;
-}
-`);
-});

package/src/utils/ExitTransitionPlaceholder.tsx

@@ -1,22 +0,0 @@
-import { ReactElement, ReactNode, useEffect, useState } from 'react';
-import { renderChildren } from './renderChildren';
-
-interface ExitTransitionPlaceholderProps {
-  in: boolean;
-  children: ReactNode;
-}
-
-export function ExitTransitionPlaceholder({
-  in: inProp,
-  children: childrenProp,
-}: ExitTransitionPlaceholderProps): null | ReactElement {
-  const [children, setChildren] = useState(childrenProp);
-
-  useEffect(() => {
-    if (inProp) {
-      setChildren(childrenProp);
-    }
-  }, [inProp, childrenProp]);
-
-  return renderChildren(children);
-}

package/src/utils/ResizeObserver.tsx

@@ -1,28 +0,0 @@
-import { ResizeObserver } from '@juggle/resize-observer';
-import { useEventHandler } from '@superdispatch/hooks';
-import { useLayoutEffect } from 'react';
-
-export function useResizeObserver<T extends HTMLElement>(
-  node: null | undefined | T,
-  observer: (node: T) => void,
-): void {
-  const handler = useEventHandler(observer);
-
-  useLayoutEffect(() => {
-    if (!node) {
-      return;
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      handler(node);
-    });
-
-    resizeObserver.observe(node);
-
-    handler(node);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [node, handler]);
-}

package/src/utils/VisibilityObserver.tsx

@@ -1,75 +0,0 @@
-import { useValueObserver } from '@superdispatch/hooks';
-import { ReactElement, ReactNode, useLayoutEffect, useState } from 'react';
-import { renderChildren } from './renderChildren';
-
-export type ElementVisibility = 'undetermined' | 'visible' | 'invisible';
-
-export interface VisibilityObserverOptions {
-  threshold?: number;
-  marginTop?: string;
-  marginLeft?: string;
-  marginRight?: string;
-  marginBottom?: string;
-}
-
-export function useVisibilityObserver<T extends Element>(
-  node: null | undefined | T,
-  {
-    threshold = 0,
-    marginTop = '0px',
-    marginLeft = '0px',
-    marginRight = '0px',
-    marginBottom = '0px',
-  }: VisibilityObserverOptions = {},
-): ElementVisibility {
-  const [state, setState] = useState<ElementVisibility>('undetermined');
-  const rootMargin = `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`;
-
-  useLayoutEffect(() => {
-    if (!node || !('IntersectionObserver' in window)) {
-      setState('undetermined');
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setState(entry?.isIntersecting ? 'visible' : 'invisible');
-      },
-      { rootMargin, threshold },
-    );
-
-    observer.observe(node);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [node, threshold, rootMargin]);
-
-  return state;
-}
-
-export interface VisibilityObserverRenderProps {
-  visibility: ElementVisibility;
-  ref: <T extends HTMLElement>(node: null | T) => void;
-}
-
-export interface VisibilityObserverProps extends VisibilityObserverOptions {
-  render: (props: VisibilityObserverRenderProps) => ReactNode;
-  onChange?: (visibility: ElementVisibility) => void;
-}
-
-export function VisibilityObserver({
-  render,
-  onChange,
-  ...options
-}: VisibilityObserverProps): null | ReactElement {
-  const [node, setNode] = useState<null | HTMLElement>(null);
-  const visibility = useVisibilityObserver(node, options);
-  const children = render({ ref: setNode, visibility });
-
-  useValueObserver(visibility, () => {
-    onChange?.(visibility);
-  });
-
-  return renderChildren(children);
-}

package/src/utils/__tests__/ExitTransitionPlaceholder.spec.tsx

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ExitTransitionPlaceholder } from '../ExitTransitionPlaceholder';
-
-it('render null child', () => {
-  const child = null;
-  const { container } = render(
-    <ExitTransitionPlaceholder in={true}>{child}</ExitTransitionPlaceholder>,
-  );
-  expect(container).toBeEmptyDOMElement();
-});
-
-it('render null with boolean child', () => {
-  const child = true;
-  const { container } = render(
-    <ExitTransitionPlaceholder in={true}>{child}</ExitTransitionPlaceholder>,
-  );
-  expect(container).toBeEmptyDOMElement();
-});
-
-it('render child', () => {
-  const { rerender } = render(
-    <ExitTransitionPlaceholder in={true}>
-      <p>Test</p>
-    </ExitTransitionPlaceholder>,
-  );
-  expect(screen.getByText('Test')).toBeInTheDocument();
-
-  rerender(
-    <ExitTransitionPlaceholder in={false}>
-      <p />
-    </ExitTransitionPlaceholder>,
-  );
-  expect(screen.getByText('Test')).toBeInTheDocument();
-});

package/src/utils/isEmptyReactNode.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-
-export function isEmptyReactNode(
-  node: ReactNode,
-): node is null | undefined | boolean | string {
-  return (
-    node == null ||
-    typeof node == 'boolean' ||
-    (typeof node == 'string' && node.length === 0)
-  );
-}

package/src/utils/mergeRefs.ts

@@ -1,21 +0,0 @@
-import { MutableRefObject, Ref } from 'react';
-
-export function mergeRefs<T>(
-  ...refs: Array<null | undefined | Ref<T>>
-): (node: T) => void {
-  return (node) => {
-    refs.forEach((ref) => {
-      assignRef(ref, node);
-    });
-  };
-}
-
-export function assignRef<T>(ref: Ref<T> | undefined, value: T): void {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(value);
-    } else {
-      (ref as MutableRefObject<T>).current = value;
-    }
-  }
-}