feat: 🗃 DS - Drawer component

getlago · Aug 2, 2022 · 1830e12 · 1830e12
1 parent d4f18e8
commit 1830e12
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 4 deletions.
diff --git a/src/components/designSystem/Drawer.tsx b/src/components/designSystem/Drawer.tsx
@@ -0,0 +1,116 @@
+import { Drawer as MuiDrawer, DrawerProps as MuiDrawerProps, alpha } from '@mui/material'
+import {
+  cloneElement,
+  forwardRef,
+  ReactElement,
+  useImperativeHandle,
+  useState,
+  ReactNode,
+} from 'react'
+import styled from 'styled-components'
+
+import { Button, Typography } from '~/components/designSystem'
+import { theme, NAV_HEIGHT } from '~/styles'
+
+export interface DrawerProps extends Pick<MuiDrawerProps, 'anchor'> {
+  className?: string
+  title: string | ReactNode
+  opener?: ReactElement
+  forceOpen?: boolean
+  children: (({ closeDrawer }: { closeDrawer: () => void }) => ReactNode) | ReactNode
+  onClose?: () => void
+}
+
+export interface DrawerRef {
+  openDrawer: () => unknown
+  closeDrawer: () => unknown
+}
+
+export const Drawer = forwardRef<DrawerRef, DrawerProps>(
+  ({ forceOpen = false, children, opener, anchor = 'right', title, onClose }: DrawerProps, ref) => {
+    const [isOpen, setIsOpen] = useState(forceOpen)
+
+    useImperativeHandle(ref, () => ({
+      openDrawer: () => setIsOpen(true),
+      closeDrawer: () => setIsOpen(false),
+    }))
+
+    return (
+      <>
+        {!!opener && cloneElement(opener, { onClick: () => setIsOpen((prev) => !prev) })}
+        <StyledDrawer
+          open={isOpen}
+          anchor={anchor}
+          elevation={4}
+          onClose={() => {
+            onClose && onClose()
+            setIsOpen(false)
+          }}
+          transitionDuration={250}
+          PaperProps={{ className: 'drawerPaper' }}
+        >
+          <Header>
+            {typeof title === 'string' ? (
+              <Typography variant="bodyHl" color="textSecondary">
+                {title}
+              </Typography>
+            ) : (
+              title
+            )}
+            <Button
+              icon="close"
+              variant="quaternary"
+              onClick={() => {
+                onClose && onClose()
+                setIsOpen(false)
+              }}
+            />
+          </Header>
+          <Content>
+            {typeof children === 'function'
+              ? children({ closeDrawer: () => setIsOpen(false) })
+              : children}
+          </Content>
+        </StyledDrawer>
+      </>
+    )
+  }
+)
+
+Drawer.displayName = 'Drawer'
+
+const StyledDrawer = styled(MuiDrawer)`
+  .drawerPaper {
+    max-width: 816px;
+    width: calc(100vw - ${theme.spacing(12)});
+
+    ${theme.breakpoints.down('md')} {
+      width: 100%;
+    }
+  }
+
+  .MuiBackdrop-root {
+    background-color: ${alpha(theme.palette.grey[700], 0.4)};
+  }
+`
+
+const Header = styled.div`
+  height: ${NAV_HEIGHT}px;
+  box-shadow: ${theme.shadows[7]};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 ${theme.spacing(12)};
+
+  ${theme.breakpoints.down('md')} {
+    padding: 0 ${theme.spacing(4)};
+  }
+`
+
+const Content = styled.div`
+  padding: ${theme.spacing(12)} ${theme.spacing(12)} ${theme.spacing(20)};
+
+  ${theme.breakpoints.down('md')} {
+    padding: ${theme.spacing(12)} ${theme.spacing(4)} ${theme.spacing(20)} ${theme.spacing(4)};
+  }
+`
diff --git a/src/components/designSystem/index.ts b/src/components/designSystem/index.ts
@@ -4,6 +4,7 @@ export * from './Button'
 export * from './ButtonLink'
 export * from './Chip'
 export * from './Dialog'
+export * from './Drawer'
 export * from './Icon'
 export * from './InfiniteScroll'
 export * from './Popper'

diff --git a/src/layouts/SideNavLayout.tsx b/src/layouts/SideNavLayout.tsx
@@ -254,7 +254,7 @@ const Container = styled.div`
 const BurgerButton = styled(Button)`
   && {
     position: absolute;
-    z-index: ${theme.zIndex.drawer + 1};
+    z-index: ${theme.zIndex.drawer};
     left: ${theme.spacing(4)};
     top: ${theme.spacing(4)};
 
@@ -276,7 +276,7 @@ const Drawer = styled.div<{ $open: boolean }>`
 
   ${theme.breakpoints.down('md')} {
     position: absolute;
-    z-index: ${theme.zIndex.drawer};
+    z-index: ${theme.zIndex.drawer - 1};
     left: ${({ $open }) => ($open ? 0 : -NAV_WIDTH)}px;
   }
 `

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -2,13 +2,21 @@ import styled, { css } from 'styled-components'
 import { useFormik } from 'formik'
 import { generatePath } from 'react-router-dom'
 
-import { Typography, ButtonLink, NavigationTab } from '~/components/designSystem'
+import {
+  Typography,
+  ButtonLink,
+  NavigationTab,
+  Drawer,
+  Button,
+  Dialog,
+} from '~/components/designSystem'
 import { theme, PageHeader } from '~/styles'
 import { DatePickerField } from '~/components/form'
 import { ONLY_DEV_DESIGN_SYSTEM_ROUTE, ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE } from '~/core/router'
 
 const FORM_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'form' })
 const LINK_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'links' })
+const POPPERS_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'poppers' })
 
 const DesignSystem = () => {
   const formikProps = useFormik({
@@ -29,11 +37,57 @@ const DesignSystem = () => {
       <NavigationTab
         name="design-system"
         tabs={[
+          {
+            title: 'Poppers',
+            icon: 'apps',
+            link: POPPERS_TAB_URL,
+            match: [POPPERS_TAB_URL, ONLY_DEV_DESIGN_SYSTEM_ROUTE],
+            component: (
+              <Container>
+                <GroupTitle variant="headline">Poppers</GroupTitle>
+                <Block>
+                  <Drawer title="Imma supa drawa" opener={<Button>Drawer</Button>}>
+                    <iframe
+                      title="hey you"
+                      src="https://giphy.com/embed/nNxT5qXR02FOM"
+                      width="480"
+                      height="399"
+                      frameBorder="0"
+                      allowFullScreen
+                    ></iframe>
+                  </Drawer>
+                  <Dialog
+                    opener={<Button>Dialog</Button>}
+                    title="Imma dialog"
+                    description="And I'm happy to see you"
+                    actions={({ closeDialog }) => (
+                      <>
+                        <Button variant="quaternary" onClick={() => closeDialog()}>
+                          Oups
+                        </Button>
+                        <Button>Ok bye</Button>
+                      </>
+                    )}
+                  >
+                    <GroupTitle>
+                      <iframe
+                        title="Happy to see you"
+                        src="https://giphy.com/embed/l2Jhok92mZ2PZHjDG"
+                        width="480"
+                        height="256"
+                        frameBorder="0"
+                        allowFullScreen
+                      ></iframe>
+                    </GroupTitle>
+                  </Dialog>
+                </Block>
+              </Container>
+            ),
+          },
           {
             title: 'Form',
             icon: 'switch',
             link: FORM_TAB_URL,
-            match: [FORM_TAB_URL, ONLY_DEV_DESIGN_SYSTEM_ROUTE],
             component: (
               <Container>
                 <Form onSubmit={(e) => e.preventDefault()}>