@superdispatch/ui 0.21.8 → 0.21.13

package/src/responsive/ResponsiveContext.tsx

@@ -0,0 +1,57 @@
+import { useMediaQuery } from '@material-ui/core';
+import type { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export interface ResponsiveContext {
+  breakpoint?: Breakpoint;
+}
+
+const Context = createContext<ResponsiveContext>({});
+
+function useBreakpoint(breakpoint: Breakpoint): boolean {
+  return useMediaQuery<SuperDispatchTheme>((theme) =>
+    theme.breakpoints.only(breakpoint),
+  );
+}
+
+export interface ResponsiveContextProviderProps {
+  children?: ReactNode;
+  defaultBreakpoint?: Breakpoint;
+}
+
+export function ResponsiveContextProvider({
+  children,
+  defaultBreakpoint,
+}: ResponsiveContextProviderProps): ReactElement {
+  const isXS = useBreakpoint('xs');
+  const isSM = useBreakpoint('sm');
+  const isMD = useBreakpoint('md');
+  const isLG = useBreakpoint('lg');
+  const isXL = useBreakpoint('xl');
+  const breakpoint: undefined | Breakpoint = isXS
+    ? 'xs'
+    : isSM
+    ? 'sm'
+    : isMD
+    ? 'md'
+    : isLG
+    ? 'lg'
+    : isXL
+    ? 'xl'
+    : defaultBreakpoint;
+
+  const ctx = useMemo<ResponsiveContext>(() => ({ breakpoint }), [breakpoint]);
+
+  return <Context.Provider value={ctx}>{children}</Context.Provider>;
+}
+
+export function useResponsiveContext(): ResponsiveContext {
+  return useContext(Context);
+}

package/src/snackbar/Snackbar.stories.tsx

@@ -0,0 +1,196 @@
+import { FormControlLabel, FormGroup, Switch } from '@material-ui/core';
+import { UseState } from '@superdispatch/ui-docs';
+import {
+  Button,
+  Inline,
+  Snackbar,
+  SnackbarContent,
+  SnackbarStackConsumer,
+} from '..';
+
+export default {
+  title: 'Feedback/Snackbar',
+  component: Snackbar,
+  subcomponents: { SnackbarContent },
+};
+
+export const basic = () => (
+  <UseState initialState={false}>
+    {(open, setOpen) => (
+      <>
+        <Button
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          Toggle snackbar visibility
+        </Button>
+
+        <Snackbar open={open}>This is a basic snackbar</Snackbar>
+      </>
+    )}
+  </UseState>
+);
+
+export const closable = () => (
+  <UseState initialState={false}>
+    {(open, setOpen) => (
+      <>
+        <Button
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          Toggle snackbar visibility
+        </Button>
+
+        <Snackbar
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        >
+          This snackbar has a close button
+        </Snackbar>
+      </>
+    )}
+  </UseState>
+);
+
+export const variants = () => (
+  <UseState initialState={{}}>
+    {(props, setProps) => (
+      <>
+        <FormGroup row={true}>
+          <FormControlLabel
+            label="Default"
+            control={<Switch />}
+            checked={!!props.open && !props.variant}
+            onChange={(_, checked) => {
+              setProps({
+                ...props,
+                open: checked,
+                variant: undefined,
+              });
+            }}
+          />
+
+          <FormControlLabel
+            label="Success"
+            control={<Switch />}
+            checked={props.variant === 'success'}
+            onChange={(_, checked) => {
+              setProps({
+                ...props,
+                open: checked,
+                variant: checked ? 'success' : undefined,
+              });
+            }}
+          />
+
+          <FormControlLabel
+            label="Error"
+            control={<Switch />}
+            checked={props.variant === 'error'}
+            onChange={(_, checked) => {
+              setProps({
+                ...props,
+                open: checked,
+                variant: checked ? 'error' : undefined,
+              });
+            }}
+          />
+        </FormGroup>
+
+        <Snackbar {...props}>This is snackbar content</Snackbar>
+      </>
+    )}
+  </UseState>
+);
+
+export const stack = () => (
+  <SnackbarStackConsumer>
+    {({ addSnackbar, clearStack }) => {
+      const getTime = () => new Date().toISOString().slice(11, 23);
+
+      return (
+        <Inline>
+          <Button
+            onClick={() => {
+              addSnackbar(`This is default snackbar (${getTime()})`);
+            }}
+          >
+            Add default snackbar
+          </Button>
+          <Button
+            onClick={() => {
+              addSnackbar(`This is success snackbar (${getTime()})`, {
+                variant: 'success',
+              });
+            }}
+          >
+            Add success snackbar
+          </Button>
+          <Button
+            onClick={() => {
+              addSnackbar(`This is error snackbar (${getTime()})`, {
+                variant: 'error',
+              });
+            }}
+          >
+            Add error snackbar
+          </Button>
+
+          <Button
+            onClick={() => {
+              clearStack();
+            }}
+          >
+            Clear stack
+          </Button>
+        </Inline>
+      );
+    }}
+  </SnackbarStackConsumer>
+);
+
+export const undoable = () => (
+  <SnackbarStackConsumer>
+    {({ addSnackbar, clearStack }) => (
+      <Button
+        onClick={() => {
+          clearStack();
+
+          const trxID = Math.random().toString(32).slice(2, 8).toUpperCase();
+          const closeSnackbar = addSnackbar(
+            <span>
+              Transaction <strong>#{trxID}</strong> confirmed
+            </span>,
+            {
+              variant: 'success',
+              action: (
+                <Button
+                  size="small"
+                  color="white"
+                  variant="contained"
+                  onClick={() => {
+                    closeSnackbar();
+                    addSnackbar(
+                      <span>
+                        Transaction <strong>#{trxID}</strong> rejected
+                      </span>,
+                    );
+                  }}
+                >
+                  Reject
+                </Button>
+              ),
+            },
+          );
+        }}
+      >
+        Confirm transaction
+      </Button>
+    )}
+  </SnackbarStackConsumer>
+);

package/src/snackbar/Snackbar.tsx

@@ -0,0 +1,83 @@
+import {
+  Portal,
+  Slide,
+  Snackbar as MaterialSnackbar,
+  SnackbarCloseReason as MaterialSnackbarCloseReason,
+  SnackbarProps as MaterialSnackbarProps,
+} from '@material-ui/core';
+import { TransitionProps } from '@material-ui/core/transitions';
+import {
+  forwardRef,
+  ForwardRefExoticComponent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { SnackbarContent, SnackbarVariant } from './SnackbarContent';
+
+function SlideTransition(props: TransitionProps): ReactElement {
+  return <Slide {...props} direction="up" />;
+}
+
+export type SnackbarCloseReason = 'timeout' | 'explicit';
+
+export interface SnackbarProps
+  extends Omit<MaterialSnackbarProps, 'onClose' | 'message' | 'children'> {
+  children?: ReactNode;
+  variant?: SnackbarVariant;
+  hasCloseButton?: boolean;
+  onClose?: (reason: SnackbarCloseReason) => void;
+}
+
+export const Snackbar: ForwardRefExoticComponent<SnackbarProps> = forwardRef(
+  (
+    {
+      open,
+      action,
+      variant,
+      onClose,
+      children,
+      ContentProps,
+      hasCloseButton = onClose != null,
+      TransitionComponent = SlideTransition,
+      ...props
+    },
+    ref,
+  ) => {
+    function handleClose(
+      reason: SnackbarCloseReason | MaterialSnackbarCloseReason,
+    ): void {
+      if (reason !== 'clickaway') {
+        onClose?.(reason === 'timeout' ? 'timeout' : 'explicit');
+      }
+    }
+
+    return (
+      <Portal>
+        <MaterialSnackbar
+          {...props}
+          ref={ref}
+          open={open}
+          TransitionComponent={TransitionComponent}
+          onClose={(_, reason) => {
+            handleClose(reason);
+          }}
+        >
+          <SnackbarContent
+            {...ContentProps}
+            action={action}
+            variant={variant}
+            onClose={
+              !hasCloseButton
+                ? undefined
+                : () => {
+                    handleClose('explicit');
+                  }
+            }
+          >
+            {children}
+          </SnackbarContent>
+        </MaterialSnackbar>
+      </Portal>
+    );
+  },
+);

package/src/snackbar/SnackbarContent.tsx

@@ -0,0 +1,147 @@
+import {
+  Grid,
+  IconButton,
+  SnackbarContent as MuiSnackbarContent,
+  SnackbarContentClassKey as MuiSnackbarContentClassKey,
+  SnackbarContentProps as MuiSnackbarContentProps,
+  Theme,
+} from '@material-ui/core';
+import { CheckCircle, Close, Warning } from '@material-ui/icons';
+import { ClassNameMap, makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import {
+  forwardRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+} from 'react';
+import { Color } from '../theme/Color';
+
+type SnackbarContentClassKey =
+  | MuiSnackbarContentClassKey
+  | 'icon'
+  | 'closeButton'
+  | 'variantError'
+  | 'variantSuccess';
+
+const useStyles = makeStyles<
+  Theme,
+  { classes?: Partial<ClassNameMap<SnackbarContentClassKey>> },
+  SnackbarContentClassKey
+>(
+  (theme) => ({
+    root: {
+      color: Color.White,
+      backgroundColor: Color.Dark500,
+      '&$variantError': {
+        color: Color.White,
+        backgroundColor: Color.Red500,
+      },
+    },
+
+    action: {
+      paddingLeft: theme.spacing(1),
+    },
+
+    message: {
+      alignItems: 'center',
+      [theme.breakpoints.down('xs')]: {
+        fontSize: theme.spacing(2),
+      },
+    },
+
+    icon: {
+      marginRight: theme.spacing(1),
+      fontSize: theme.spacing(3),
+    },
+
+    closeButton: {
+      color: Color.White40,
+      '&:hover, &:focus': {
+        backgroundColor: Color.White08,
+        color: Color.White40,
+      },
+    },
+
+    variantError: {},
+    variantSuccess: {},
+  }),
+  { name: 'SD-SnackbarContent' },
+);
+export type SnackbarVariant = 'default' | 'error' | 'success';
+
+export interface SnackbarContentProps
+  extends RefAttributes<unknown>,
+    Omit<MuiSnackbarContentProps, 'classes' | 'message' | 'variant'> {
+  children?: ReactNode;
+  onClose?: () => void;
+  variant?: SnackbarVariant;
+  classes?: Partial<ClassNameMap<SnackbarContentClassKey>>;
+}
+
+export const SnackbarContent: ForwardRefExoticComponent<SnackbarContentProps> =
+  forwardRef(
+    (
+      {
+        action,
+        children,
+        onClose,
+        className,
+        classes,
+        variant = 'default',
+        ...props
+      },
+      ref,
+    ) => {
+      const { icon, closeButton, variantError, variantSuccess, ...styles } =
+        useStyles({ classes });
+      const Icon =
+        variant === 'error'
+          ? Warning
+          : variant === 'success'
+          ? CheckCircle
+          : undefined;
+
+      return (
+        <MuiSnackbarContent
+          {...props}
+          ref={ref}
+          classes={styles}
+          className={clsx(className, {
+            [variantError]: variant === 'error',
+            [variantSuccess]: variant === 'success',
+          })}
+          message={
+            <>
+              {Icon && <Icon className={icon} />}
+              {children}
+            </>
+          }
+          action={
+            !action && !onClose ? null : (
+              <Grid
+                container={true}
+                spacing={1}
+                alignItems="center"
+                wrap="nowrap"
+              >
+                {!!action && <Grid item={true}>{action}</Grid>}
+
+                {onClose && (
+                  <Grid item={true}>
+                    <IconButton
+                      aria-label="close"
+                      onClick={onClose}
+                      className={closeButton}
+                    >
+                      <Close fontSize="small" />
+                    </IconButton>
+                  </Grid>
+                )}
+              </Grid>
+            )
+          }
+        />
+      );
+    },
+  );

package/src/snackbar/SnackbarOverrides.ts

@@ -0,0 +1,23 @@
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export function overrideSnackbar(theme: SuperDispatchTheme): void {
+  theme.overrides.MuiSnackbar = {
+    anchorOriginBottomCenter: { left: 0, right: 0, bottom: 0 },
+  };
+
+  theme.overrides.MuiSnackbarContent = {
+    root: {
+      width: '100%',
+      borderRadius: 0,
+      minHeight: theme.spacing(7.5),
+
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(54),
+        maxWidth: theme.spacing(54),
+        borderRadius: theme.spacing(0.5),
+      },
+    },
+
+    message: { flex: 1, display: 'flex' },
+  };
+}

package/src/snackbar/SnackbarStack.tsx

@@ -0,0 +1,160 @@
+import { useDeepEqualMemo } from '@superdispatch/hooks';
+import {
+  ConsumerProps,
+  createContext,
+  Key,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Snackbar, SnackbarProps } from './Snackbar';
+
+export interface SnackbarStackOptions
+  extends Omit<SnackbarProps, 'open' | 'children'> {
+  key?: Key;
+}
+
+export interface SnackbarStack {
+  clearStack: () => void;
+  addSnackbar: (
+    message: ReactNode,
+    options?: SnackbarStackOptions,
+  ) => () => void;
+}
+
+function warnContext(): void {
+  // eslint-disable-next-line no-console
+  console.log('`useSnackbarStack` is used outside of `SnackbarStackProvider`.');
+}
+
+const Context = createContext<SnackbarStack>({
+  clearStack: warnContext,
+  addSnackbar: () => {
+    warnContext();
+
+    return warnContext;
+  },
+});
+
+export function useSnackbarStack(): SnackbarStack {
+  return useContext(Context);
+}
+
+export function SnackbarStackConsumer({
+  children,
+}: ConsumerProps<SnackbarStack>): ReactElement {
+  return <Context.Consumer>{children}</Context.Consumer>;
+}
+
+const TRANSIENT_KEY = '@@transient@@';
+
+export interface SnackbarStackProviderProps {
+  children: ReactNode;
+}
+
+export function SnackbarStackProvider({
+  children,
+}: SnackbarStackProviderProps): ReactElement {
+  const [stack, setStack] = useState(new Map<Key, SnackbarProps>());
+  const transientKeyRef = useRef(0);
+  const getNextTransientKey = useCallback(
+    () => TRANSIENT_KEY + String((transientKeyRef.current += 1)),
+    [],
+  );
+
+  const clearStack = useCallback<SnackbarStack['clearStack']>(() => {
+    setStack((x) => (x.size === 0 ? x : new Map()));
+  }, []);
+
+  const addSnackbar = useCallback<SnackbarStack['addSnackbar']>(
+    (
+      message,
+      {
+        onClose,
+        variant,
+        key = variant !== 'error'
+          ? // We don't want non error snackbars without key to pop back.
+            getNextTransientKey()
+          : typeof message === 'string'
+          ? message
+          : Math.random(),
+        id = String(key),
+        autoHideDuration = 5000,
+        ...props
+      }: SnackbarStackOptions = {},
+    ) => {
+      function removeSnackbar(): void {
+        setStack((prev) => {
+          if (prev.has(key)) {
+            const next = new Map(prev);
+
+            next.delete(key);
+
+            return next;
+          }
+
+          return prev;
+        });
+      }
+
+      setStack((prev) => {
+        const next = new Map(prev);
+
+        for (const prevKey of prev.keys()) {
+          // Ensure that we insert value to the end of the map.
+          if (Object.is(key, prevKey)) {
+            next.delete(key);
+          }
+
+          // Ensure that transient snackbar will not pop back.
+          if (typeof prevKey == 'string' && prevKey.startsWith(TRANSIENT_KEY)) {
+            next.delete(prevKey);
+          }
+        }
+
+        return next.set(key, {
+          ...props,
+          id,
+          key,
+          variant,
+          autoHideDuration,
+          children: message,
+
+          onClose: (reason) => {
+            removeSnackbar();
+            onClose?.(reason);
+          },
+        });
+      });
+
+      return removeSnackbar;
+    },
+    [getNextTransientKey],
+  );
+
+  const snackbarProps = useDeepEqualMemo<SnackbarProps>(
+    (prev) => {
+      const next = Array.from(stack.values()).pop();
+
+      return next ? { ...next, open: true } : { ...prev, open: false };
+    },
+    [stack],
+  );
+
+  const api = useMemo<SnackbarStack>(
+    () => ({ clearStack, addSnackbar }),
+    [clearStack, addSnackbar],
+  );
+
+  return (
+    <Context.Provider value={api}>
+      {children}
+
+      <Snackbar {...snackbarProps} />
+    </Context.Provider>
+  );
+}