@graphcommerce/next-ui 3.0.1

package/ChipMenu/index.tsx

@@ -0,0 +1,130 @@
+import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React, { PropsWithChildren, useState } from 'react'
+import { iconChevronDown, iconChevronUp, iconCloseCircle } from '../icons'
+import SectionHeader from '../SectionHeader'
+import responsiveVal from '../Styles/responsiveVal'
+import SvgImage from '../SvgImage'
+
+export const useChipMenuStyles = makeStyles(
+  (theme: Theme) => ({
+    /*
+      !importants: ensure background #xxxxxx on hover, focus etc regardless given props to the component 
+      otherwise you'll get: ".MuiChip-deletable.MuiChip-outlined:hover" which is prone to changes and thereby a fragile selector
+    */
+    chip: {
+      background: theme.palette.background.default,
+      '& .MuiChip-label': {
+        wordWrap: 'break-word',
+      },
+      '&:hover': {
+        background: `${theme.palette.background.highlight} !important`,
+      },
+      '&:focus': {
+        background: `${theme.palette.background.default} !important`,
+      },
+    },
+    chipSelected: {
+      border: `1px solid ${theme.palette.text.primary}`,
+      background: theme.palette.grey['100'],
+      color: theme.palette.text.primary,
+      '&:hover': {
+        background: `${theme.palette.background.default} !important`,
+        borderColor: theme.palette.grey['600'],
+      },
+      '&:focus': {
+        background: `${theme.palette.grey['100']} !important`,
+      },
+    },
+    menuPaper: {
+      minWidth: responsiveVal(200, 560),
+      maxWidth: 560,
+      marginTop: theme.spacings.xxs,
+      padding: `${theme.spacings.xs} ${theme.spacings.xs}`,
+      [theme.breakpoints.down('xs')]: {
+        minWidth: 0,
+        width: '100%',
+        maxWidth: `calc(100% - (${theme.page.horizontal} * 2))`,
+        margin: '0 auto',
+        marginTop: '8px',
+      },
+    },
+    menuList: {
+      padding: 0,
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  }),
+  { name: 'ChipMenu' },
+)
+
+export type ChipMenuProps = PropsWithChildren<Omit<ChipProps, 'children'>> & {
+  selectedLabel?: React.ReactNode
+  selected: boolean
+  onClose?: () => void
+  labelRight?: React.ReactNode
+}
+
+export default function ChipMenu(props: ChipMenuProps) {
+  const { children, selected, onDelete, label, labelRight, onClose, selectedLabel, ...chipProps } =
+    props
+  const [openEl, setOpenEl] = useState<null | HTMLElement>(null)
+  const classes = useChipMenuStyles(props)
+
+  let deleteIcon = selected ? (
+    <SvgImage size='medium' src={iconCloseCircle} alt='close' shade='default' />
+  ) : (
+    <SvgImage
+      size='medium'
+      src={iconChevronDown}
+      alt='chevron down'
+      loading='eager'
+      shade='muted'
+    />
+  )
+  if (openEl)
+    deleteIcon = (
+      <SvgImage size='medium' src={iconChevronUp} alt='chevron up' loading='eager' shade='muted' />
+    )
+
+  const selectedAndMenuHidden = selected && !openEl && selectedLabel
+
+  return (
+    <>
+      <Chip
+        variant='default'
+        color={selected || openEl ? 'primary' : 'default'}
+        clickable
+        onDelete={onDelete || ((event) => setOpenEl(event.currentTarget.parentElement))}
+        onClick={(event) => {
+          setOpenEl(event.currentTarget)
+        }}
+        deleteIcon={deleteIcon}
+        {...chipProps}
+        label={selectedLabel ?? label}
+        className={clsx(
+          classes.chip,
+          chipProps.className,
+          selectedAndMenuHidden && classes.chipSelected,
+        )}
+      />
+
+      <Menu
+        anchorEl={openEl}
+        open={!!openEl}
+        onClose={() => {
+          if (onClose) onClose()
+          setOpenEl(null)
+        }}
+        getContentAnchorEl={null} // https://github.com/mui-org/material-ui/issues/7961#issuecomment-326116559
+        anchorPosition={{ top: 6, left: 0 }}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+        classes={{ paper: classes.menuPaper, list: classes.menuList }}
+      >
+        <SectionHeader labelLeft={label ?? ''} labelRight={labelRight ?? ''} usePadding />
+        {children}
+      </Menu>
+    </>
+  )
+}

package/ContainerWithHeader/index.tsx

@@ -0,0 +1,49 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import React from 'react'
+import Row from '../Row'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    head: {
+      display: 'grid',
+      justifyContent: 'space-between',
+      gridTemplateColumns: 'auto auto',
+      alignItems: 'end',
+      marginBottom: theme.spacings.md,
+    },
+    title: {
+      lineHeight: 1,
+      textTransform: 'uppercase',
+    },
+    right: {
+      lineHeight: 1,
+    },
+  }),
+  { name: 'ContainerWithHeader' },
+)
+
+export type ContainerWithHeaderProps = {
+  title: string
+  rightArea: React.ReactNode
+  children: React.ReactNode
+} & UseStyles<typeof useStyles>
+
+export default function ContainerWithHeader(props: ContainerWithHeaderProps) {
+  const { title, rightArea, children } = props
+  const classes = useStyles(props)
+
+  return (
+    <Row>
+      <div className={classes.head}>
+        <Typography variant='h3' component='h2' className={classes.title}>
+          {title}
+        </Typography>
+        <Typography component='div' variant='subtitle1' className={classes.right}>
+          {rightArea}
+        </Typography>
+      </div>
+      {children}
+    </Row>
+  )
+}

package/Debug/DebugSpacer.tsx

@@ -0,0 +1,51 @@
+import { makeStyles } from '@material-ui/core'
+import { CSSProperties } from '@material-ui/styles'
+import { AnimatePresence, HTMLMotionProps, m } from 'framer-motion'
+
+export type DebugSpacerProps = {
+  height?: number
+  color?: CSSProperties['color']
+} & HTMLMotionProps<'div'>
+
+const useStyles = makeStyles(() => ({
+  root: {
+    background: `repeating-linear-gradient(-45deg, transparent, transparent 20px, #f6f6f6 20px, #f6f6f6 40px) top left`,
+    boxShadow: `#eee 0px 0px 0px 3px inset`,
+    overflow: 'hidden',
+  },
+  div: {
+    color: `rgba(0,0,0,0.1)`,
+    overflow: 'hidden',
+    width: '100%',
+    textAlign: 'center',
+    fontSize: 20,
+    display: 'grid',
+    alignItems: 'center',
+  },
+}))
+export default function DebugSpacer({ height = 250, ...divProps }: DebugSpacerProps) {
+  const classes = useStyles()
+  let increment = 0
+  // eslint-disable-next-line no-return-assign
+  const rows = new Array(Math.ceil(height / 100)).fill(0).map(() => {
+    increment += 100
+    return Math.min(increment, height)
+  })
+
+  return (
+    <m.div className={classes.root} {...divProps} animate={{ height }}>
+      <AnimatePresence>
+        {rows.map((nr) => (
+          <div
+            data-key={`debug-row-${nr}`}
+            className={classes.div}
+            style={{ height: nr % 100 || 100, borderTop: `3px solid #efefef` }}
+            key={`debug-row-${nr}`}
+          >
+            {nr}
+          </div>
+        ))}
+      </AnimatePresence>
+    </m.div>
+  )
+}

package/FlagAvatar/index.tsx

@@ -0,0 +1,28 @@
+import { makeStyles, Theme, Avatar, AvatarProps } from '@material-ui/core'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {},
+  }),
+  { name: 'FlagAvatar' },
+)
+
+export type FlagAvatarProps = { country: string } & Omit<AvatarProps, 'src'>
+
+export default function FlagAvatar(props: FlagAvatarProps) {
+  const { country, ...avatarProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <Avatar
+      {...avatarProps}
+      classes={classes}
+      imgProps={{ loading: 'lazy' }}
+      alt=''
+      src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/${country}.svg`}
+    >
+      {country.toLocaleUpperCase()}
+    </Avatar>
+  )
+}

package/Form/FormActions.tsx

@@ -0,0 +1,15 @@
+import { styled } from '@material-ui/core'
+
+const FormActions = styled('div')(
+  ({ theme }) => ({
+    paddingTop: theme.spacings.xxs,
+    paddingBottom: theme.spacings.md,
+    justifyContent: 'center',
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gap: `calc(${theme.spacings.xxs} * 2)`,
+  }),
+  { name: 'FormActions' },
+)
+
+export default FormActions

package/Form/FormDivider.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@material-ui/core'
+
+const FormDivider = styled('div')(
+  ({ theme }) => ({
+    background: theme.palette.divider,
+    height: 1,
+    width: '100%',
+    marginTop: theme.spacings.xxs,
+    marginBottom: theme.spacings.xxs,
+  }),
+  { name: 'FormDivider' },
+)
+
+export default FormDivider

package/Form/FormHeader.tsx

@@ -0,0 +1,27 @@
+import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    heading: {
+      marginBottom: `calc(${theme.spacings.xxs} * -1)`,
+      marginTop: theme.spacings.xxs,
+    },
+  }),
+  { name: 'FormHeader' },
+)
+
+export type FormHeaderProps = TypographyProps &
+  UseStyles<typeof useStyles> & { children: React.ReactNode }
+
+export default function FormHeader(props: FormHeaderProps) {
+  const { children, ...typographyProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <Typography {...typographyProps} className={classes.heading}>
+      {children}
+    </Typography>
+  )
+}

package/Form/FormRow.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@material-ui/core'
+
+const FormRow = styled('div')(
+  ({ theme }) => ({
+    paddingTop: theme.spacings.xxs,
+    paddingBottom: theme.spacings.xxs,
+    display: 'grid',
+    gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,
+    gap: `calc(${theme.spacings.xxs} * 2)`,
+  }),
+  { name: 'FormRow' },
+)
+
+export default FormRow

package/Form/InputCheckmark.tsx

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react'
+import SvgImage from '../SvgImage'
+import { iconCheckmarkGreen } from '../icons'
+
+export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean }>
+
+/**
+ * When the `valid` prop is passed it will render a CheckIcon, else it will render children.
+ *
+ * ```typescript
+ * ;<InputCheckmark valid>Fallback things</InputCheckmark>
+ * ```
+ */
+export default function InputCheckmark(props: InputCheckmarkProps) {
+  const { show: valid, children } = props
+
+  if (!valid) return <>{children}</>
+  return <SvgImage src={iconCheckmarkGreen} alt='checkmark' />
+}

package/Form/index.tsx

@@ -0,0 +1,62 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      alignItems: 'center',
+      padding: `${theme.spacings.xxs} 0`,
+    },
+    secondary: {
+      background: theme.palette.secondary.light,
+    },
+    default: {
+      background: theme.palette.background.highlight,
+    },
+    contained: {
+      padding: theme.spacings.sm,
+      overflow: 'hidden',
+      borderRadius: 6,
+    },
+  }),
+  { name: 'Form' },
+)
+
+export type BaseFormProps = {
+  contained?: boolean
+  background?: 'secondary' | 'default'
+  children: React.ReactNode
+} & UseStyles<typeof useStyles>
+
+export type FormFormProps = BaseFormProps & JSX.IntrinsicElements['form']
+
+export const Form = React.forwardRef<HTMLFormElement, FormFormProps>((props, ref) => {
+  const classes = useStyles(props)
+  const { contained, background, ...formProps } = props
+
+  return (
+    <form ref={ref} {...formProps} className={clsx(classes.root, contained && classes.contained)} />
+  )
+})
+
+export type DivFormProps = BaseFormProps & JSX.IntrinsicElements['div']
+
+export const FormDiv = React.forwardRef<HTMLDivElement, DivFormProps>((props, ref) => {
+  const classes = useStyles(props)
+  const { contained, background = 'default', ...formProps } = props
+
+  return (
+    <div
+      ref={ref}
+      {...formProps}
+      className={clsx(
+        classes.root,
+        contained && classes.contained,
+        contained && classes[background],
+      )}
+    />
+  )
+})

package/FramerNextPagesSlider/Slide.tsx

@@ -0,0 +1,71 @@
+import { makeStyles } from '@material-ui/core'
+import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import { SPRING_ANIM } from '@graphcommerce/framer-sheet'
+import { m, motionValue, useElementScroll } from 'framer-motion'
+import React, { useEffect, useRef } from 'react'
+import { ScrollPositions } from './types'
+
+const useStyles = makeStyles(
+  () => ({
+    slide: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      height: '100%',
+      overflowY: 'auto',
+    },
+  }),
+  { name: 'FramerNextPagesSlider' },
+)
+
+type Custom = {
+  depth: number
+  direction: 1 | -1
+  exiting: boolean
+}
+
+export type RouterSlideProps = {
+  children?: React.ReactNode
+  scrollPositions: React.MutableRefObject<ScrollPositions>
+}
+
+export default function RouterSlide({ children, scrollPositions }: RouterSlideProps) {
+  const classes = useStyles()
+  const ref = useRef<HTMLDivElement>(null)
+  const { scrollY } = useElementScroll(ref)
+  const { direction, depth } = usePageContext()
+  const router = usePageRouter()
+
+  useEffect(() => {
+    scrollPositions.current[router.asPath] ??= motionValue(0)
+    scrollY.onChange((v) => scrollPositions.current[router.asPath].set(v))
+  }, [router.asPath, scrollPositions, scrollY])
+
+  useEffect(() => {
+    const scroll = scrollPositions.current[router.asPath].get()
+    if (ref.current && scroll) ref.current.scrollTop = scroll
+  }, [router.asPath, scrollPositions])
+
+  return (
+    <m.div
+      className={classes.slide}
+      ref={ref}
+      custom={{ depth, direction, exiting: false }}
+      initial='initial'
+      animate={{ x: 0 }}
+      exit='exit'
+      variants={{
+        initial: (c: Custom) => (c.direction === 1 ? { x: '100%' } : { x: '-100%' }),
+        exit: (c: Custom) => {
+          if (!c.depth && c.exiting && c.direction === 1) return { x: '-100%' }
+          if (!c.depth && c.exiting && c.direction === -1) return { x: '100%' }
+          return { x: 0 }
+        },
+      }}
+      transition={{ ...SPRING_ANIM, restDelta: 0.01, damping: 20 }}
+    >
+      {children}
+    </m.div>
+  )
+}

package/FramerNextPagesSlider/Slider.tsx

@@ -0,0 +1,39 @@
+import { makeStyles } from '@material-ui/styles'
+import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import { AnimatePresence } from 'framer-motion'
+import React, { useRef } from 'react'
+import RouterSlide from './Slide'
+import { ScrollPositions } from './types'
+
+const useStyles = makeStyles(
+  {
+    slider: {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+    },
+  },
+  { name: 'FramerNextPagesSlider' },
+)
+
+export type SliderRouteProps = { children?: React.ReactNode }
+
+/** RouteSlider provides an iOS settings style navigation */
+export default function Slider(props: SliderRouteProps) {
+  const classes = useStyles()
+  const { children } = props
+  const { depth, direction } = usePageContext()
+  const router = usePageRouter()
+
+  const scrollPositions = useRef<ScrollPositions>({})
+
+  return (
+    <div className={classes.slider}>
+      <AnimatePresence initial={false} custom={{ depth, direction, exiting: true }}>
+        <RouterSlide key={router.asPath} scrollPositions={scrollPositions}>
+          {children}
+        </RouterSlide>
+      </AnimatePresence>
+    </div>
+  )
+}

package/FramerNextPagesSlider/index.ts

@@ -0,0 +1 @@
+export { default } from './Slider'

package/FramerNextPagesSlider/types.ts

@@ -0,0 +1,3 @@
+import { MotionValue } from 'framer-motion'
+
+export type ScrollPositions = { [key: string]: MotionValue<number> }