@superdispatch/ui 0.21.13 → 0.21.14

package/src/drawer/Drawer.stories.tsx

@@ -1,194 +0,0 @@
-import {
-  Drawer,
-  IconButton,
-  ListItem,
-  ListItemSecondaryAction,
-  ListItemText,
-  TextField,
-} from '@material-ui/core';
-import {
-  ArrowBack as ArrowBackIcon,
-  Delete as DeleteIcon,
-} from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { PropsLink, UseState } from '@superdispatch/ui-docs';
-import { Button, Inline, Stack } from '..';
-import { DrawerActions } from './DrawerActions';
-import { DrawerContent } from './DrawerContent';
-import { DrawerList } from './DrawerList';
-import { DrawerTitle } from './DrawerTitle';
-
-export default {
-  title: 'Navigation/Drawer',
-  component: DrawerTitle,
-  subcomponents: { DrawerList },
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/drawer/#props" />
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <UseState initialState={false}>
-    {(state, setState) => (
-      <>
-        <Button
-          onClick={() => {
-            setState(true);
-          }}
-        >
-          Open Drawer
-        </Button>
-
-        <Drawer
-          open={state}
-          onClose={() => {
-            setState(false);
-          }}
-        >
-          <DrawerTitle title="Title" subtitle="Subtitle" />
-
-          <DrawerContent>
-            <Stack>
-              <TextField fullWidth={true} label="Field 1" />
-              <TextField fullWidth={true} label="Field 2" />
-              <TextField fullWidth={true} label="Field 3" />
-              <TextField fullWidth={true} label="Field 4" />
-            </Stack>
-          </DrawerContent>
-
-          <DrawerActions>
-            <Inline space="small">
-              <Button color="primary" variant="contained">
-                Primary
-              </Button>
-
-              <Button color="primary" variant="outlined">
-                Secondary
-              </Button>
-            </Inline>
-          </DrawerActions>
-        </Drawer>
-      </>
-    )}
-  </UseState>
-);
-
-export const titleStartAction = () => (
-  <UseState initialState={false}>
-    {(state, setState) => (
-      <>
-        <Button
-          onClick={() => {
-            setState(true);
-          }}
-        >
-          Open Drawer
-        </Button>
-
-        <Drawer
-          open={state}
-          onClose={() => {
-            setState(false);
-          }}
-        >
-          <DrawerTitle
-            title="Title"
-            startAction={
-              <IconButton edge="start">
-                <ArrowBackIcon />
-              </IconButton>
-            }
-          />
-        </Drawer>
-      </>
-    )}
-  </UseState>
-);
-
-export const titleEndAction = () => (
-  <UseState initialState={false}>
-    {(state, setState) => (
-      <>
-        <Button
-          onClick={() => {
-            setState(true);
-          }}
-        >
-          Open Drawer
-        </Button>
-
-        <Drawer
-          open={state}
-          onClose={() => {
-            setState(false);
-          }}
-        >
-          <DrawerTitle
-            title="Title"
-            startAction={
-              <IconButton edge="start">
-                <ArrowBackIcon />
-              </IconButton>
-            }
-          />
-        </Drawer>
-      </>
-    )}
-  </UseState>
-);
-
-export const drawerList = () => (
-  <UseState initialState={false}>
-    {(state, setState) => (
-      <>
-        <Button
-          onClick={() => {
-            setState(true);
-          }}
-        >
-          Open Drawer
-        </Button>
-
-        <Drawer
-          open={state}
-          onClose={() => {
-            setState(false);
-          }}
-        >
-          <DrawerTitle title="Title" />
-
-          <DrawerList>
-            {Array.from({ length: 30 }, (_, idx) => (
-              <ListItem key={idx} button={true} ContainerComponent="div">
-                <ListItemText
-                  primary={`Primary text #${idx + 1}`}
-                  secondary={`Secondary text #${idx + 1}`}
-                />
-
-                <ListItemSecondaryAction>
-                  <IconButton edge="end">
-                    <DeleteIcon />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
-            ))}
-          </DrawerList>
-
-          <DrawerActions>
-            <Inline space="small">
-              <Button color="primary" variant="contained">
-                Primary
-              </Button>
-
-              <Button color="primary" variant="outlined">
-                Secondary
-              </Button>
-            </Inline>
-          </DrawerActions>
-        </Drawer>
-      </>
-    )}
-  </UseState>
-);

package/src/drawer/DrawerActions.tsx

@@ -1,69 +0,0 @@
-import { AppBar, Toolbar } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef, HTMLAttributes } from 'react';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-import { VisibilityObserver } from '../utils/VisibilityObserver';
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme) => ({
-    appBar: {
-      '&&': {
-        bottom: 0,
-        top: 'auto',
-        borderLeft: 'none',
-        borderRight: 'none',
-        borderBottom: 'none',
-        transition: theme.transitions.create(['border-color']),
-
-        '&:not($appBarSticky)': {
-          borderTopColor: Color.Transparent,
-        },
-      },
-    },
-    appBarSticky: {},
-
-    toolbar: {
-      '&.MuiToolbar-gutters': {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3),
-
-        [theme.breakpoints.up('md')]: {
-          paddingLeft: theme.spacing(4),
-          paddingRight: theme.spacing(4),
-        },
-      },
-    },
-  }),
-  { name: 'SD-DrawerActions' },
-);
-
-export type DrawerActionsProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
-
-export const DrawerActions = forwardRef<HTMLDivElement, DrawerActionsProps>(
-  ({ children, className, ...props }, appBarRef) => {
-    const styles = useStyles();
-
-    return (
-      <VisibilityObserver
-        render={({ ref, visibility }) => (
-          <>
-            <AppBar
-              {...props}
-              ref={appBarRef}
-              position="sticky"
-              className={clsx(className, styles.appBar, {
-                [styles.appBarSticky]: visibility === 'invisible',
-              })}
-            >
-              <Toolbar className={styles.toolbar}>{children}</Toolbar>
-            </AppBar>
-
-            <div ref={ref} />
-          </>
-        )}
-      />
-    );
-  },
-);

package/src/drawer/DrawerContent.tsx

@@ -1,30 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef, HTMLAttributes } from 'react';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme) => ({
-    root: {
-      maxWidth: '100%',
-      padding: theme.spacing(2, 3),
-
-      [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(2, 4),
-      },
-    },
-  }),
-  { name: 'SD-DrawerContent' },
-);
-
-export type DrawerContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
-  ({ className, ...props }, ref) => {
-    const styles = useStyles();
-
-    return (
-      <div {...props} ref={ref} className={clsx(styles.root, className)} />
-    );
-  },
-);

package/src/drawer/DrawerList.tsx

@@ -1,60 +0,0 @@
-import { List, ListProps } from '@material-ui/core';
-import { CSSProperties, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-function listItemMixins(
-  theme: SuperDispatchTheme,
-  space: number,
-): CSSProperties {
-  return {
-    '& .MuiListItem-gutters': {
-      paddingLeft: theme.spacing(space),
-      paddingRight: theme.spacing(space),
-
-      '&.MuiListItem-secondaryAction': {
-        paddingRight: theme.spacing(space * 2),
-      },
-
-      '& .MuiListItemSecondaryAction-root': {
-        right: theme.spacing(space),
-
-        '& .MuiIconButton-edgeEnd': {
-          marginRight: theme.spacing(-(space / 2)),
-        },
-      },
-    },
-  };
-}
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme) => ({
-    root: {
-      maxWidth: '100%',
-      ...listItemMixins(theme, 3),
-
-      [theme.breakpoints.up('md')]: {
-        ...listItemMixins(theme, 4),
-      },
-    },
-  }),
-  { name: 'SD-DrawerList' },
-);
-
-export type DrawerListProps = Omit<ListProps<'div'>, 'component'>;
-
-export const DrawerList = forwardRef<HTMLDivElement, DrawerListProps>(
-  ({ className, ...props }, ref) => {
-    const styles = useStyles();
-
-    return (
-      <List
-        {...props}
-        ref={ref}
-        component="div"
-        className={clsx(className, styles.root)}
-      />
-    );
-  },
-);

package/src/drawer/DrawerOverrides.ts

@@ -1,19 +0,0 @@
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideDrawer(theme: SuperDispatchTheme): void {
-  theme.props.MuiDrawer = {
-    anchor: 'right',
-  };
-
-  theme.overrides.MuiDrawer = {
-    paper: {
-      maxWidth: '100%',
-      minWidth: '100%',
-
-      [theme.breakpoints.up('sm')]: {
-        minWidth: theme.spacing(54),
-        maxWidth: theme.breakpoints.values.sm,
-      },
-    },
-  };
-}

package/src/drawer/DrawerTitle.tsx

@@ -1,143 +0,0 @@
-import {
-  AppBar,
-  Grid,
-  Toolbar,
-  Typography,
-  TypographyProps,
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef, HTMLAttributes, ReactNode } from 'react';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-import { VisibilityObserver } from '../utils/VisibilityObserver';
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme) => ({
-    appBar: {
-      '&&': {
-        borderTop: 'none',
-        borderLeft: 'none',
-        borderRight: 'none',
-        transition: theme.transitions.create(['border-color']),
-
-        '&:not($appBarSticky)': {
-          borderBottomColor: Color.Transparent,
-        },
-      },
-    },
-    appBarSticky: {},
-    toolbar: {
-      '&.MuiToolbar-gutters': {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3),
-
-        [theme.breakpoints.up('md')]: {
-          paddingLeft: theme.spacing(4),
-          paddingRight: theme.spacing(4),
-        },
-      },
-    },
-    startAction: {
-      marginRight: theme.spacing(0.5),
-
-      '& .MuiIconButton-edgeStart': {
-        marginLeft: theme.spacing(-2),
-      },
-    },
-    endAction: {
-      marginLeft: theme.spacing(0.5),
-
-      '& .MuiIconButton-edgeEnd': {
-        marginRight: theme.spacing(-2),
-      },
-    },
-  }),
-  { name: 'SD-DrawerTitle' },
-);
-
-export interface DrawerTitleProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
-  children?: ReactNode;
-
-  title: ReactNode;
-  titleTypographyProps?: Omit<TypographyProps, 'children'>;
-  subtitle?: ReactNode;
-  subtitleTypographyProps?: Omit<TypographyProps, 'children'>;
-
-  startAction?: ReactNode;
-  endAction?: ReactNode;
-}
-
-export const DrawerTitle = forwardRef<HTMLDivElement, DrawerTitleProps>(
-  (
-    {
-      title,
-      titleTypographyProps,
-      subtitle,
-      subtitleTypographyProps,
-      startAction,
-      endAction,
-      className,
-      ...props
-    },
-    appBarRef,
-  ) => {
-    const styles = useStyles();
-
-    return (
-      <VisibilityObserver
-        render={({ ref, visibility }) => (
-          <>
-            <div ref={ref} />
-
-            <AppBar
-              {...props}
-              ref={appBarRef}
-              position="sticky"
-              className={clsx(styles.appBar, className, {
-                [styles.appBarSticky]: visibility === 'invisible',
-              })}
-            >
-              <Toolbar className={styles.toolbar}>
-                <Grid container={true} alignItems="center">
-                  {!!startAction && (
-                    <Grid item={true} className={styles.startAction}>
-                      {startAction}
-                    </Grid>
-                  )}
-
-                  <Grid item={true} xs={true} zeroMinWidth={true}>
-                    <Typography
-                      variant="h3"
-                      noWrap={true}
-                      {...titleTypographyProps}
-                    >
-                      {title}
-                    </Typography>
-
-                    {!!subtitle && (
-                      <Typography
-                        variant="body2"
-                        noWrap={true}
-                        {...subtitleTypographyProps}
-                      >
-                        {subtitle}
-                      </Typography>
-                    )}
-                  </Grid>
-
-                  {!!endAction && (
-                    <Grid item={true} className={styles.endAction}>
-                      {endAction}
-                    </Grid>
-                  )}
-                </Grid>
-              </Toolbar>
-            </AppBar>
-          </>
-        )}
-      />
-    );
-  },
-);