@superdispatch/ui 0.21.8 → 0.21.13

package/src/typography/Typography.stories.tsx

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

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

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

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

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

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

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

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

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