@superdispatch/ui 0.21.13 → 0.22.0

package/src/responsive/ResponsiveContext.tsx

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

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

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

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

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

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