@superdispatch/ui 0.21.8 → 0.21.13

package/src/drawer/Drawer.stories.tsx

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

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

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

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

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

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