@graphcommerce/next-ui 3.0.1

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

package/AnimatedRow/index.tsx

@@ -0,0 +1,20 @@
+import { HTMLMotionProps, m } from 'framer-motion'
+import { ReactHTML } from 'react'
+
+export type AnimatedRowProps = Omit<
+  ReactHTML['div'] & HTMLMotionProps<'div'>,
+  'layout' | 'initial' | 'animate' | 'exit' | 'transition'
+>
+
+export default function AnimatedRow(props: AnimatedRowProps) {
+  return (
+    <m.div
+      {...props}
+      layout
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ type: 'tween' }}
+    />
+  )
+}

package/ApolloError/ApolloErrorAlert.tsx

@@ -0,0 +1,59 @@
+import { ApolloError } from '@apollo/client'
+import { makeStyles, Theme } from '@material-ui/core'
+import { Alert, AlertProps } from '@material-ui/lab'
+import { AnimatePresence } from 'framer-motion'
+import React from 'react'
+import AnimatedRow from '../AnimatedRow'
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    alerts: {},
+    alert: {
+      paddingTop: `calc(${theme.spacings.xxs} / 2)`,
+      paddingBottom: `calc(${theme.spacings.xxs} / 2)`,
+    },
+  }),
+  { name: 'ApolloErrorAlert' },
+)
+
+export type ApolloErrorAlertProps = {
+  error?: ApolloError
+  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
+  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
+}
+export default function ApolloErrorAlert(props: ApolloErrorAlertProps) {
+  const classes = useStyles()
+  const { error, graphqlErrorAlertProps, networkErrorAlertProps } = props
+
+  return (
+    <AnimatePresence initial={false}>
+      {error && (
+        <AnimatedRow key='alerts'>
+          <div className={classes.alerts}>
+            <AnimatePresence initial={false}>
+              {error.graphQLErrors.map((e, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <AnimatedRow key={index}>
+                  <div className={classes.alert}>
+                    <Alert severity='error' {...graphqlErrorAlertProps}>
+                      {e.message}
+                    </Alert>
+                  </div>
+                </AnimatedRow>
+              ))}
+              {error.networkError && (
+                <AnimatedRow key='networkError'>
+                  <div className={classes.alert} key='networkError'>
+                    <Alert severity='error' {...networkErrorAlertProps}>
+                      Network Error: {error.networkError.message}
+                    </Alert>
+                  </div>
+                </AnimatedRow>
+              )}
+            </AnimatePresence>
+          </div>
+        </AnimatedRow>
+      )}
+    </AnimatePresence>
+  )
+}

package/ApolloError/ApolloErrorFullPage.tsx

@@ -0,0 +1,25 @@
+import { ApolloError } from '@apollo/client'
+import { AlertProps } from '@material-ui/lab'
+import React from 'react'
+import FullPageMessage, { FullPageMessageProps } from '../FullPageMessage'
+import ApolloErrorAlert from './ApolloErrorAlert'
+
+export type ApolloErrorFullPageProps = {
+  error?: ApolloError
+  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
+  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
+} & Omit<FullPageMessageProps, 'title' | 'description'>
+
+export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
+  const { error, graphqlErrorAlertProps, networkErrorAlertProps, ...fullPageMessageProps } = props
+
+  const singleError = error?.graphQLErrors.length === 1
+
+  return (
+    <FullPageMessage
+      title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
+      description={singleError ? undefined : <ApolloErrorAlert error={error} />}
+      {...fullPageMessageProps}
+    />
+  )
+}

package/AppShell/AppShellHeader/appShellHeaderContext.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export type AppShellHeaderContext = {
+  titleRef: React.RefObject<HTMLDivElement>
+  contentHeaderRef: React.RefObject<HTMLDivElement>
+}
+
+const appShellHeaderContext = React.createContext(undefined as unknown as AppShellHeaderContext)
+appShellHeaderContext.displayName = 'appShellHeaderContext'
+
+export default appShellHeaderContext

package/AppShell/AppShellHeader/index.tsx

@@ -0,0 +1,433 @@
+import { Fab, makeStyles, Theme } from '@material-ui/core'
+import { useHistoryLink, usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import clsx from 'clsx'
+import { m, MotionValue, useMotionValue, useTransform } from 'framer-motion'
+import PageLink from 'next/link'
+import React, { useCallback, useEffect } from 'react'
+import Button from '../../Button'
+import { UseStyles } from '../../Styles'
+import SvgImage from '../../SvgImage'
+import { iconChevronLeft, iconClose } from '../../icons'
+import useAppShellHeaderContext from './useAppShellHeaderContext'
+
+export type AppShellHeaderProps = {
+  children?: React.ReactNode
+  primary?: React.ReactNode
+  secondary?: React.ReactNode
+  divider?: React.ReactNode
+  /* When a logo is given, children should be given too */
+  logo?: React.ReactNode
+  scrollY: MotionValue<number>
+  hideClose?: boolean
+  scrolled?: boolean
+  dragIndicator?: React.ReactNode
+  additional?: React.ReactNode
+  backFallbackHref?: string | null
+  backFallbackTitle?: string | null
+  fill?: 'both' | 'mobile-only'
+  sheet?: boolean
+} & UseStyles<typeof useStyles>
+
+// minHeight: x
+// to reserve space for back & primary buttons,
+// even when there is no app shell header on scroll (e.g. on full page shell)
+const minHeight = 40
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    divider: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+    dividerSpacer: {
+      minHeight: 2,
+    },
+    dividerSheetShell: {
+      marginTop: `calc((${theme.page.headerInnerHeight.md} * 0.15))`,
+    },
+    sheetHeaderContainer: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 98,
+      // reserve space in the container even without any buttons added
+      minHeight: 58,
+    },
+    sheetHeaderContainerSheetShell: {
+      marginBottom: `calc((${theme.page.headerInnerHeight.md} * 0.15) * -1)`,
+    },
+    sheetHeader: {
+      background: theme.palette.background.default,
+      paddingTop: 8,
+      paddingBottom: 8,
+      minHeight,
+      [theme.breakpoints.up('md')]: {
+        minHeight: `calc(${minHeight}px + ${theme.spacings.xxs} * 2)`,
+        paddingTop: theme.spacings.xxs,
+        paddingBottom: theme.spacings.xxs,
+      },
+    },
+    sheetHeaderSheetShell: {
+      // The bottom sheets offset top is x% short compared to the page headers height,
+      // so we add x% of the header height to padding top of bottomsheet actions bar
+      // to keep consistency between app shell buttons.
+      paddingTop: `calc(${theme.spacings.xxs} + (${theme.page.headerInnerHeight.md} * 0.15))`,
+      paddingBottom: `calc(${theme.spacings.xxs} + (${theme.page.headerInnerHeight.md} * 0.15))`,
+      [theme.breakpoints.down('sm')]: {
+        paddingTop: 8,
+        paddingBottom: 8,
+      },
+    },
+    sheetHeaderScrolled: {
+      [theme.breakpoints.up('md')]: {
+        marginTop: -60,
+      },
+    },
+    sheetHeaderActions: {
+      display: 'grid',
+      gridTemplateColumns: `1fr auto 1fr`,
+      gridAutoFlow: 'column',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: `0 calc(${theme.page.horizontal} + 2px) 0`,
+      width: '100%',
+      minHeight,
+      [theme.breakpoints.up('md')]: {
+        '& * > a, & * > button': {
+          height: minHeight,
+        },
+      },
+      [theme.breakpoints.down('sm')]: {
+        '& div > .MuiFab-sizeSmall': {
+          marginLeft: -8,
+          marginRight: -8,
+        },
+        '& div > .MuiButtonBase-root': {
+          minWidth: 'unset',
+          marginRight: -8,
+          marginLeft: -8,
+        },
+      },
+    },
+    sheetHeaderActionRight: {
+      justifySelf: 'flex-end',
+      '& > .Mui-disabled': {
+        opacity: 0.25,
+        color: `${theme.palette.primary.contrastText} !important`,
+        [theme.breakpoints.up('md')]: {
+          color: `${theme.palette.secondary.contrastText} !important`,
+        },
+      },
+    },
+    sheetHeaderNoTitle: {
+      pointerEvents: 'none',
+      background: 'transparent',
+    },
+    sheetHeaderNoTitleFillMobileOnly: {
+      [theme.breakpoints.up('md')]: {
+        pointerEvents: 'none',
+        background: 'transparent',
+        top: 98,
+      },
+    },
+    sheetHeaderFillMobileOnly: {
+      [theme.breakpoints.up('md')]: {
+        pointerEvents: 'none',
+        background: 'transparent',
+        marginBottom: `calc((${theme.page.headerInnerHeight.md} * -1) + ${theme.spacings.xxs} * 2)`,
+      },
+    },
+    innerContainer: {
+      display: 'grid',
+      textAlign: 'center',
+      pointerEvents: 'all',
+    },
+    fab: {
+      maxWidth: 38,
+      maxHeight: 38,
+      [theme.breakpoints.down('sm')]: {
+        boxShadow: 'none',
+      },
+    },
+    childs: {
+      marginLeft: 12,
+      marginRight: 12,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    fillMobileOnly: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    dividerFillMobileOnly: {
+      [theme.breakpoints.up('md')]: {
+        visibility: 'hidden',
+      },
+    },
+    logoContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      paddingTop: 8,
+      paddingBottom: 8,
+    },
+    logoInnerContainer: {
+      minHeight,
+      display: 'flex',
+      alignItems: 'center',
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    backButton: {
+      background: theme.palette.background.default,
+      color: theme.palette.text.primary,
+      '&:hover': {
+        background: theme.palette.background.highlight,
+      },
+    },
+    sheetShellActionsFullPage: {
+      '& * > a, & * > button': {
+        pointerEvents: 'all',
+      },
+      '& * > button': {
+        boxShadow: theme.shadows[3],
+      },
+      [theme.breakpoints.up('md')]: {
+        position: 'fixed',
+        top: `calc(${theme.page.headerInnerHeight.md} + ${theme.spacings.xxs})`,
+      },
+    },
+    sheetShellActionsNoButtonShadow: {
+      [theme.breakpoints.down('sm')]: {
+        '& * > button': {
+          boxShadow: 'none',
+        },
+      },
+    },
+  }),
+  { name: 'AppShellHeader' },
+)
+
+export default function AppShellHeader(props: AppShellHeaderProps) {
+  const {
+    children,
+    logo,
+    divider,
+    primary = null,
+    secondary = null,
+    hideClose,
+    scrollY,
+    additional,
+    dragIndicator,
+    scrolled,
+    backFallbackHref,
+    backFallbackTitle,
+    fill = 'both',
+    sheet,
+  } = props
+  const router = usePageRouter()
+  const { closeSteps, backSteps } = usePageContext()
+  const classes = useStyles(props)
+
+  const { titleRef, contentHeaderRef } = useAppShellHeaderContext()
+
+  const noChildren = typeof children === 'undefined' || !children
+
+  const fillMobileOnly = fill === 'mobile-only'
+
+  const sheetHeaderHeight = useMotionValue<number>(0)
+  const titleOffset = useMotionValue<number>(100)
+  const titleHeight = useMotionValue<number>(100)
+
+  const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
+    href: backFallbackHref ?? '',
+  })
+
+  const setOffset = useCallback(
+    (offsetTop: number, offsetParent: Element | null, clientHeight: number) => {
+      titleHeight.set(clientHeight)
+      titleOffset.set(offsetTop)
+    },
+    [titleHeight, titleOffset],
+  )
+
+  if (titleRef.current) {
+    setOffset(
+      titleRef.current.offsetTop,
+      titleRef.current.offsetParent,
+      titleRef.current.clientHeight,
+    )
+  }
+
+  // Measure the title sizes so we can animate the opacity
+  useEffect(() => {
+    if (!titleRef.current) return () => {}
+
+    const ro = new ResizeObserver(([entry]) => {
+      const { offsetTop, offsetParent, clientHeight } = entry.target as HTMLDivElement
+
+      setOffset(offsetTop, offsetParent, clientHeight)
+    })
+
+    ro.observe(titleRef.current)
+    return () => ro.disconnect()
+  }, [setOffset, titleHeight, titleOffset, titleRef])
+
+  // Measure the sheetHeight sizes so we can animate the opacity
+  useEffect(() => {
+    if (!contentHeaderRef.current) return () => {}
+
+    const ro = new ResizeObserver(([entry]) =>
+      sheetHeaderHeight.set((entry.target as HTMLDivElement).clientHeight),
+    )
+
+    ro.observe(contentHeaderRef.current)
+
+    return () => ro.disconnect()
+  }, [contentHeaderRef, sheetHeaderHeight])
+
+  const opacityTitle = useTransform(
+    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue[],
+    ([scrollYV, sheetHeaderHeightV, titleOffsetV, titleHeigthV]: number[]) =>
+      Math.min(
+        Math.max(
+          0,
+          scrolled
+            ? 1
+            : (scrollYV - Math.max(titleOffsetV, 80) + sheetHeaderHeightV) / titleHeigthV,
+        ),
+        1,
+      ),
+  )
+
+  const pointerEvents = useTransform(opacityTitle, (o) => (o < 0.2 ? 'none' : 'all'))
+  const opacityLogo = useTransform(opacityTitle, [0, 1], [1, fillMobileOnly && primary ? 1 : 0])
+  const pointerEventsLogo = useTransform(opacityLogo, (o) => (o < 0.2 ? 'none' : 'all'))
+
+  const close =
+    !hideClose &&
+    (closeSteps > 0 ? (
+      <Fab
+        size='small'
+        type='button'
+        classes={{ root: classes.fab }}
+        onClick={() => router.go(closeSteps * -1)}
+      >
+        <SvgImage src={iconClose} mobileSize={20} size={20} alt='Close overlay' loading='eager' />
+      </Fab>
+    ) : (
+      <PageLink href='/' passHref>
+        <Fab size='small' classes={{ root: classes.fab }}>
+          <SvgImage src={iconClose} alt='Close overlay' size={20} mobileSize={20} loading='eager' />
+        </Fab>
+      </PageLink>
+    ))
+
+  const backIcon = (
+    <SvgImage src={iconChevronLeft} alt='chevron back' loading='eager' size={26} mobileSize={30} />
+  )
+  let back = backSteps > 0 && (
+    <Button
+      onClick={() => router.back()}
+      variant='pill-link'
+      className={classes.backButton}
+      startIcon={backIcon}
+    >
+      {historyOnClick ? backFallbackTitle : 'Back'}
+    </Button>
+  )
+  if (!back && backFallbackHref) {
+    back = (
+      <PageLink href={backFallbackHref} passHref>
+        <Button variant='pill-link' className={classes.backButton} startIcon={backIcon}>
+          {backFallbackTitle ?? 'Back'}
+        </Button>
+      </PageLink>
+    )
+  }
+
+  let leftAction: React.ReactNode = secondary ?? back
+  const rightAction: React.ReactNode = primary ?? close
+  if (rightAction !== close && !leftAction) leftAction = close
+  if (!leftAction) leftAction = <div />
+
+  const showDivider = children || (fillMobileOnly && primary)
+
+  return (
+    <div
+      className={clsx(
+        classes.sheetHeaderContainer,
+        noChildren && !primary && classes.sheetHeaderNoTitle,
+        fillMobileOnly && classes.sheetHeaderFillMobileOnly,
+        sheet && classes.sheetHeaderContainerSheetShell,
+      )}
+    >
+      <div
+        className={clsx(
+          classes?.sheetHeader,
+          sheet && classes.sheetHeaderSheetShell,
+          scrolled && classes?.sheetHeaderScrolled,
+          noChildren && !primary && classes.sheetHeaderNoTitle,
+          fillMobileOnly && noChildren && classes.sheetHeaderNoTitleFillMobileOnly,
+          fillMobileOnly && classes.sheetHeaderFillMobileOnly,
+        )}
+        ref={contentHeaderRef}
+      >
+        <div className={classes.logoContainer}>
+          {logo && (
+            <m.div
+              style={{
+                opacity: opacityLogo,
+                pointerEvents: pointerEventsLogo,
+              }}
+              className={classes.logoInnerContainer}
+            >
+              {logo}
+            </m.div>
+          )}
+        </div>
+
+        {dragIndicator}
+
+        <div
+          className={clsx(
+            classes.sheetHeaderActions,
+            (noChildren || fillMobileOnly) && classes.sheetShellActionsFullPage,
+            fillMobileOnly && showDivider && classes.sheetShellActionsNoButtonShadow,
+          )}
+        >
+          {leftAction && <div>{leftAction}</div>}
+          <div className={classes.innerContainer}>
+            {children && (
+              <m.div
+                style={{ opacity: opacityTitle, pointerEvents }}
+                className={clsx(classes.childs, fillMobileOnly && classes.fillMobileOnly)}
+              >
+                {children}
+              </m.div>
+            )}
+          </div>
+          <div className={classes?.sheetHeaderActionRight}>{rightAction}</div>
+        </div>
+        {additional && (
+          <div className={clsx(fillMobileOnly && classes.fillMobileOnly)}>
+            <>{additional}</>
+          </div>
+        )}
+      </div>
+      {showDivider &&
+        (divider ?? (
+          <m.div
+            className={clsx(
+              classes.dividerSpacer,
+              classes.divider,
+              fillMobileOnly && classes.dividerFillMobileOnly,
+            )}
+            style={{ opacity: opacityTitle }}
+          />
+        ))}
+      {!showDivider && <div className={classes.dividerSpacer} />}
+    </div>
+  )
+}

package/AppShell/AppShellHeader/useAppShellHeaderContext.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import appShellHeaderContext from './appShellHeaderContext'
+
+export default function useAppShellHeaderContext() {
+  return useContext(appShellHeaderContext)
+}

package/AppShell/AppShellProvider/index.tsx

@@ -0,0 +1,18 @@
+import { useRef } from 'react'
+import appShellHeaderContext, {
+  AppShellHeaderContext,
+} from '../AppShellHeader/appShellHeaderContext'
+
+type AppShellProviderProps = {
+  children: React.ReactNode
+}
+
+export default function AppShellProvider(props: AppShellProviderProps) {
+  const { children } = props
+  const context: AppShellHeaderContext = {
+    titleRef: useRef<HTMLDivElement>(null),
+    contentHeaderRef: useRef<HTMLDivElement>(null),
+  }
+
+  return <appShellHeaderContext.Provider value={context}>{children}</appShellHeaderContext.Provider>
+}

package/AppShell/AppShellSticky/index.tsx

@@ -0,0 +1,66 @@
+import { Container, makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import { useMotionValue } from 'framer-motion'
+import React, { useEffect } from 'react'
+import { useMotionValueValue } from '../../../framer-utils'
+import { UseStyles } from '../../Styles'
+import useAppShellHeaderContext from '../AppShellHeader/useAppShellHeaderContext'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      position: 'sticky',
+      zIndex: 96,
+    },
+    fillMobileOnly: {
+      [theme.breakpoints.up('md')]: {
+        top: `${theme.page.vertical} !important`,
+      },
+    },
+  }),
+  {
+    name: 'AppShellSticky',
+  },
+)
+
+type AppShellStickyBaseProps = {
+  children: React.ReactNode
+  headerFill?: 'mobile-only' | 'both'
+}
+
+type AppShellStickyProps = AppShellStickyBaseProps & UseStyles<typeof useStyles>
+
+/*
+ - makes the children sticky to the parent container
+ - determines top offset based on header height dynamically
+*/
+export default function AppShellSticky(props: AppShellStickyProps) {
+  const { children, headerFill = 'both' } = props
+  const classes = useStyles(props)
+
+  const { contentHeaderRef } = useAppShellHeaderContext()
+  const offsetTop = useMotionValue<number>(0)
+
+  useEffect(() => {
+    if (!contentHeaderRef?.current) return () => {}
+
+    const ro = new ResizeObserver(([entry]) =>
+      offsetTop.set(contentHeaderRef?.current?.clientHeight ?? 0),
+    )
+
+    ro.observe(contentHeaderRef.current)
+    return () => ro.disconnect()
+  }, [contentHeaderRef, offsetTop])
+
+  const top = useMotionValueValue(offsetTop, (v) => v)
+
+  return (
+    <Container
+      maxWidth={false}
+      className={clsx(classes.root, headerFill === 'mobile-only' && classes.fillMobileOnly)}
+      style={{ top }}
+    >
+      <>{children}</>
+    </Container>
+  )
+}

package/AppShell/AppShellTitle/index.tsx

@@ -0,0 +1,45 @@
+import { makeStyles, Theme, TypographyProps } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+import Title, { TitleProps } from '../../Title'
+import useAppShellHeaderContext from '../AppShellHeader/useAppShellHeaderContext'
+
+type AppShellTitleProps = {
+  children: React.ReactNode
+  bare?: boolean
+  variant?: TypographyProps['variant']
+} & Pick<TitleProps, 'icon'> &
+  UseStyles<typeof useStyles>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    title: {},
+    margin: {
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.lg,
+    },
+  }),
+  {
+    name: 'AppShellTitle',
+  },
+)
+
+export default function AppShellTitle(props: AppShellTitleProps) {
+  const { children, icon, bare, variant } = props
+  const { titleRef } = useAppShellHeaderContext()
+  const classes = useStyles(props)
+
+  return (
+    <Title
+      ref={titleRef}
+      component='h2'
+      size='medium'
+      variant={variant}
+      icon={icon ?? undefined}
+      classes={{ container: clsx(classes.title, !bare && classes.margin) }}
+    >
+      {children}
+    </Title>
+  )
+}