@graphcommerce/next-ui 3.0.1

package/Snackbar/MessageSnackbarImpl.tsx

@@ -0,0 +1,202 @@
+import {
+  Button,
+  Fab,
+  makeStyles,
+  PropTypes,
+  Snackbar,
+  SnackbarContent,
+  SnackbarProps,
+  Theme,
+} from '@material-ui/core'
+import clsx from 'clsx'
+import React, { useEffect, useState } from 'react'
+import SvgImage from '../SvgImage'
+import { iconClose } from '../icons'
+
+type Size = 'normal' | 'wide'
+type Variant = 'contained' | 'pill'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    snackbarRoot: {},
+    anchorOriginBottomCenter: {
+      left: 0,
+      right: 0,
+      transform: 'unset',
+      bottom: 0,
+      pointerEvents: 'none',
+      [theme.breakpoints.up('md')]: {
+        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+      },
+    },
+    root: {
+      pointerEvents: 'all',
+      padding: `16px ${theme.page.horizontal}px max(16px, env(safe-area-inset-bottom))`,
+    },
+    rootPill: {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+
+      [theme.breakpoints.up('md')]: {
+        borderRadius: 50,
+      },
+    },
+    rootPillLarge: {},
+    rootPillColorPrimary: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+    message: {
+      width: '100%',
+      padding: theme.spacings.xxs,
+      display: 'grid',
+      alignItems: 'center',
+      gap: theme.spacings.xs,
+      gridTemplate: `
+        "children close"
+        "action action"
+      `,
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `"children action close"`,
+      },
+    },
+    children: {
+      gridArea: 'children',
+      ...theme.typography.h4,
+      fontWeight: 400,
+
+      '& .MuiSvgIcon-root': {
+        position: 'relative',
+        fontSize: '1.1em',
+        top: '0.15em',
+      },
+    },
+    actionButton: {
+      gridArea: 'action',
+      '&:hover, &:focus': {
+        backgroundColor: 'transparent',
+      },
+      '& .MuiPillButton-pill': {
+        width: '100%',
+        padding: theme.spacings.xxs,
+        borderRadius: 40,
+      },
+      [theme.breakpoints.up('md')]: {
+        margin: 0,
+        '& .MuiPillButton-pill': {
+          width: '100%',
+          padding: '8px 16px',
+        },
+      },
+    },
+    closeButton: {
+      gridArea: 'close',
+      '& .MuiSvgIcon-root': {
+        height: 24,
+      },
+      '& .MuiFab-sizeMedium': {
+        height: 36,
+        width: 36,
+      },
+      [theme.breakpoints.up('md')]: {
+        '& .MuiSvgIcon-root': {
+          height: 28,
+        },
+        '& .MuiFab-sizeMedium': {
+          height: 44,
+          width: 44,
+        },
+      },
+    },
+    sticky: {
+      position: 'sticky',
+    },
+  }),
+  { name: 'MessageSnackbar' },
+)
+
+export type MessageSnackbarImplProps = Omit<
+  SnackbarProps,
+  'autoHideDuration' | 'onClose' | 'anchorOrigin'
+> & {
+  autoHide?: boolean
+  sticky?: boolean
+  variant?: Variant
+  size?: Size
+  color?: PropTypes.Color
+  action?: React.ReactNode
+  children?: React.ReactNode
+}
+
+export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
+  const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
+
+  const {
+    variant = 'contained',
+    size = 'normal',
+    color = 'default',
+    autoHide,
+    action,
+    open,
+    message,
+    sticky,
+    children,
+    ...snackbarProps
+  } = props
+
+  const classes = useStyles(props)
+
+  useEffect(() => {
+    setShowSnackbar(!!open)
+  }, [open])
+
+  const clsxBonus = (base: string) => {
+    const Size = size[0].toUpperCase() + size.slice(1)
+    const Color = color[0].toUpperCase() + color.slice(1)
+    const Variant = variant[0].toUpperCase() + variant.slice(1)
+
+    return clsx(
+      classes[base],
+      classes[`${base}${Variant}`],
+      classes[`${base}${Variant}Size${Size}`],
+      classes[`${base}${Variant}Color${Color}`],
+    )
+  }
+
+  return (
+    <Snackbar
+      {...snackbarProps}
+      message={message}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      open={showSnackbar}
+      autoHideDuration={autoHide ? 6000 : null}
+      classes={{
+        root: classes.snackbarRoot,
+        anchorOriginBottomCenter: clsx(classes.anchorOriginBottomCenter, sticky && classes.sticky),
+      }}
+    >
+      <SnackbarContent
+        classes={{
+          root: clsxBonus('root'),
+          message: clsxBonus('message'),
+          action: clsxBonus('action'),
+        }}
+        message={
+          <>
+            <div className={classes.children}>{children}</div>
+            {action && (
+              <div className={classes.actionButton} onClick={() => setShowSnackbar(false)}>
+                {action}
+              </div>
+            )}
+            <div className={classes.closeButton}>
+              <Fab aria-label='Close snackbar' size='medium' onClick={() => setShowSnackbar(false)}>
+                <SvgImage src={iconClose} size='small' alt='close' />
+              </Fab>
+            </div>
+          </>
+        }
+      />
+    </Snackbar>
+  )
+}

package/StarRatingField/index.tsx

@@ -0,0 +1,58 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Rating, RatingProps } from '@material-ui/lab'
+import React from 'react'
+import SvgImage from '../SvgImage'
+import { iconStarFilledMuted, iconStarYellow } from '../icons'
+
+export type StarRatingFieldProps = {
+  id?: string
+  onChange?: (id: string, value: number) => void
+  iconSize?: number
+} & Omit<RatingProps, 'id' | 'onChange'>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    icon: {
+      marginLeft: 4,
+      marginRight: 4,
+    },
+  }),
+  {
+    name: 'StarRatingField',
+  },
+)
+
+export default function StarRatingField(props: StarRatingFieldProps) {
+  const { id, onChange = () => {}, iconSize = 20, ...ratingProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <Rating
+      name={`star-rating-${id}`}
+      max={5}
+      size='small'
+      emptyIcon={
+        <SvgImage
+          src={iconStarFilledMuted}
+          size={iconSize}
+          alt='star'
+          loading='eager'
+          classes={{ root: classes.icon }}
+        />
+      }
+      icon={
+        <SvgImage
+          src={iconStarYellow}
+          size={iconSize}
+          alt='star'
+          loading='eager'
+          classes={{ root: classes.icon }}
+        />
+      }
+      onChange={(event, value) => {
+        onChange(id ?? '', value ?? 0)
+      }}
+      {...ratingProps}
+    />
+  )
+}

package/Stepper/Stepper.tsx

@@ -0,0 +1,45 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+import responsiveVal from '../Styles/responsiveVal'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: responsiveVal(8, 12),
+      // padding: `0 ${theme.page.horizontal}`,
+    },
+    step: {
+      height: 2,
+      background: theme.palette.divider,
+    },
+    current: {
+      background: theme.palette.secondary.main,
+    },
+  }),
+  { name: 'Stepper' },
+)
+
+export type StepperProps = {
+  steps: number
+  currentStep: number
+} & UseStyles<typeof useStyles>
+
+export default function Stepper(props: StepperProps) {
+  const { steps, currentStep } = props
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.root}>
+      {[...Array(steps).keys()].map((step: number) => (
+        <div
+          className={clsx(classes.step, { [classes.current]: currentStep - 1 >= step })}
+          key={step}
+        />
+      ))}
+    </div>
+  )
+}

package/StyledBadge/index.tsx

@@ -0,0 +1,21 @@
+import { Badge } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
+
+const StyledBadge = withStyles((theme) => ({
+  colorError: {},
+  badge: {
+    right: 6,
+    top: 6,
+    padding: 3,
+    color: '#FFF',
+    borderRadius: '100%',
+    fontSize: 10,
+    [theme.breakpoints.up('md')]: {
+      padding: 6,
+      right: 8,
+      top: 8,
+    },
+  },
+}))(Badge)
+
+export default StyledBadge

package/Styles/index.tsx

@@ -0,0 +1,3 @@
+export type UseStyles<T extends (...args: never[]) => unknown> = {
+  classes?: Partial<ReturnType<T>>
+}

package/Styles/responsiveVal.tsx

@@ -0,0 +1,20 @@
+/**
+ * This will create a css value that sizes based on the viewport width.
+ *
+ * E.g.: `responsiveVal(16, 22)` -> Will render 16px at 320px window width, 22 ad 1280 window width
+ */
+export default function responsiveVal(
+  min: number,
+  max: number,
+  maxBreakpoint = 1280,
+): `max(${number}px, min(${string}, ${number}px))` {
+  const round = (x: number, n: number): number => Math.round(x * 10 ** n) / 10 ** n
+
+  const minBreakpoint = 320
+  const growth = (max - min) / (maxBreakpoint - minBreakpoint)
+  const base = round(min - growth * minBreakpoint, 2)
+  const vsize = round(growth * 100, 2)
+
+  const calc = `(${base}px + ${vsize}vw)`
+  return `max(${min}px, min(${calc}, ${max}px))`
+}

package/SvgImage/SvgImageSimple.tsx

@@ -0,0 +1,66 @@
+import { makeStyles, capitalize, Theme } from '@material-ui/core'
+import { Image, ImageProps } from '@graphcommerce/image'
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import responsiveVal from '../Styles/responsiveVal'
+
+export type SvgImageShade = 'muted' | 'default' | 'inverted'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    image: {
+      display: 'block',
+      flexShrink: 0,
+      userSelect: 'none',
+      width: 24,
+      height: 'auto',
+    },
+    /* Styles applied to the element if `size='inherit'`. */
+    sizeInherit: {
+      fontSize: 'inherit',
+    },
+    /* Styles applied to the element if `size='small'`. */
+    sizeSmall: {
+      width: 20,
+    },
+    /* Styles applied to the element if `size='large'`. */
+    sizeLarge: {
+      width: responsiveVal(28, 32),
+    },
+    muted: { filter: `invert(75%)` },
+    inverted: { filter: `invert(100%)` },
+  }),
+  { name: 'SvgImageSimple' },
+)
+
+type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
+  /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
+  size?: 'default' | 'inherit' | 'large' | 'medium' | 'small'
+
+  muted?: boolean
+  inverted?: boolean
+}
+
+const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
+  const { className, size = 'medium', muted, inverted, ...imageProps } = props
+  const classes = useStyles()
+
+  return (
+    <Image
+      {...imageProps}
+      ref={ref}
+      layout='fixed'
+      className={clsx(
+        className,
+        classes.image,
+        classes?.[`size${capitalize(size)}`],
+        muted && classes.muted,
+        inverted && classes.inverted,
+      )}
+      unoptimized
+    />
+  )
+})
+SvgImageSimple.displayName = 'SvgImageSimple'
+
+export default SvgImageSimple

package/SvgImage/index.tsx

@@ -0,0 +1,76 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Image, ImageProps } from '@graphcommerce/image'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+// TODO: fix hot reloading issues when modifying implementations of this component
+export type SvgImageSize = 'small' | 'medium' | 'large' | 'extralarge'
+
+export type SvgImageProps = ImageProps & {
+  size?: SvgImageSize | number
+  mobileSize?: SvgImageSize | number
+  shade?: SvgImageShade
+} & UseStyles<typeof useStyles>
+
+export type SvgImageShade = 'muted' | 'default' | 'inverted'
+
+export const SvgImageShades: Record<SvgImageShade, number> = {
+  muted: 75,
+  default: 0,
+  inverted: 100,
+}
+
+export type UseStylesProps = { shade: number; baseSize: number; mobileSize: number }
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: ({ shade, baseSize, mobileSize }: UseStylesProps) => ({
+      filter: shade > 0 ? `invert(${shade}%)` : undefined,
+      objectFit: 'contain',
+      width: mobileSize ?? Math.round(baseSize * 0.75),
+      height: mobileSize ?? Math.round(baseSize * 0.75),
+      [theme.breakpoints.up('md')]: {
+        width: baseSize,
+        height: baseSize,
+      },
+    }),
+  }),
+  { name: 'SvgImage' },
+)
+
+export default function SvgImage(props: SvgImageProps) {
+  const { src, size = 'medium', mobileSize, shade = 'default', ...imageProps } = props
+
+  // if (isStaticImageData(src)) {
+  //   console.log(src.height)
+  //   console.log(src.width)
+  // }
+
+  const baseSizes = {
+    small: 24,
+    medium: 32,
+    large: 48,
+    extralarge: 64,
+  }
+
+  const classes = useStyles({
+    ...props,
+    mobileSize: baseSizes[mobileSize ?? ''] ?? mobileSize,
+    baseSize: baseSizes[size ?? ''] ?? size,
+    shade: SvgImageShades[shade],
+  })
+
+  return (
+    <>
+      <Image
+        layout='fixed'
+        unoptimized
+        src={src}
+        className={classes.root}
+        // height={24}
+        // width={24}
+        {...imageProps}
+      />
+    </>
+  )
+}

package/TextInputNumber/index.tsx

@@ -0,0 +1,169 @@
+import {
+  IconButton,
+  IconButtonProps,
+  makeStyles,
+  OutlinedTextFieldProps,
+  TextField,
+  TextFieldProps,
+  Theme,
+  useForkRef,
+} from '@material-ui/core'
+import clsx from 'clsx'
+import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
+import { UseStyles } from '../Styles'
+import responsiveVal from '../Styles/responsiveVal'
+import SvgImage from '../SvgImage'
+import { iconMin, iconPlus } from '../icons'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    quantity: {
+      width: responsiveVal(80, 120),
+      backgroundColor: theme.palette.background.default,
+    },
+    quantityInput: {
+      textAlign: 'center',
+      '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+        appearance: 'none',
+      },
+    },
+    button: {
+      fontSize: 22,
+    },
+    adornedEnd: {
+      paddingRight: responsiveVal(7, 14),
+    },
+    adornedStart: {
+      paddingLeft: responsiveVal(7, 14),
+    },
+  }),
+  { name: 'TextInputNumber' },
+)
+
+export type IconButtonPropsOmit = Omit<
+  IconButtonProps,
+  'aria-label' | 'size' | 'onMouseDown' | 'onMouseUp' | 'disabled'
+>
+
+export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
+  DownProps?: IconButtonPropsOmit
+  UpProps?: IconButtonPropsOmit
+} & UseStyles<typeof useStyles>
+
+function isOutlined(props: TextFieldProps): props is OutlinedTextFieldProps {
+  return props.variant === 'outlined'
+}
+
+export default function TextInputNumber(props: TextInputNumberProps) {
+  const { DownProps = {}, UpProps = {}, inputProps = {}, inputRef, ...textFieldProps } = props
+  const classes = useStyles(props)
+  const ref = useRef<HTMLInputElement>(null)
+  const forkRef = useForkRef<HTMLInputElement>(ref, inputRef as Ref<HTMLInputElement>)
+
+  const [direction, setDirection] = useState<'up' | 'down' | 'runUp' | 'runDown' | null>(null)
+  const [disabled, setDisabled] = useState<'min' | 'max' | null>(null)
+
+  const stop = useCallback(() => setDirection(null), [])
+
+  const down = useCallback(() => {
+    if ((ref.current?.value ?? 0) <= inputProps.min) {
+      setDirection(null)
+      return
+    }
+
+    ref.current?.stepDown()
+    ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
+  }, [inputProps.min])
+
+  const up = useCallback(() => {
+    if ((ref.current?.value ?? Infinity) >= inputProps.max) {
+      setDirection(null)
+      return
+    }
+
+    ref.current?.stepUp()
+    ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
+  }, [inputProps.max])
+
+  useEffect(() => {
+    if (direction === 'up') up()
+    if (direction === 'down') down()
+  }, [direction, down, inputProps.max, inputProps.min, ref, stop, up])
+
+  const updateDisabled = (target: HTMLInputElement) => {
+    if (target.value === target.min) setDisabled('min')
+    else if (target.value === target.max) setDisabled('max')
+    else setDisabled(null)
+  }
+
+  useEffect(() => {
+    if (!ref.current) return
+    setTimeout(() => ref.current && updateDisabled(ref.current))
+  }, [ref, inputProps.min, inputProps.max])
+
+  if (!textFieldProps.InputProps) textFieldProps.InputProps = {}
+  if (isOutlined(textFieldProps)) {
+    textFieldProps.InputProps.classes = {
+      ...textFieldProps.InputProps?.classes,
+      adornedEnd: classes.adornedEnd,
+      adornedStart: classes.adornedStart,
+    }
+  }
+
+  return (
+    <TextField
+      {...textFieldProps}
+      type='number'
+      inputRef={forkRef}
+      className={clsx(textFieldProps.className, classes.quantity)}
+      autoComplete='off'
+      InputProps={{
+        ...textFieldProps.InputProps,
+        startAdornment: (
+          <IconButton
+            aria-label='step down'
+            size='small'
+            edge='start'
+            onPointerDown={() => setDirection('down')}
+            onPointerUp={stop}
+            // disabled={textFieldProps.disabled || disabled === 'min'}
+            tabIndex='-1'
+            color='inherit'
+            className={clsx(classes.button, DownProps.className)}
+            {...DownProps}
+          >
+            {DownProps.children ?? (
+              <SvgImage src={iconMin} size='small' alt='Step down' loading='eager' />
+            )}
+          </IconButton>
+        ),
+        endAdornment: (
+          <IconButton
+            aria-label='step up'
+            size='small'
+            edge='end'
+            onPointerDown={() => setDirection('up')}
+            onPointerUp={() => setDirection(null)}
+            // disabled={textFieldProps.disabled || disabled === 'max'}
+            tabIndex='-1'
+            color='inherit'
+            className={clsx(classes.button, UpProps.className)}
+            {...UpProps}
+          >
+            {UpProps.children ?? (
+              <SvgImage src={iconPlus} size='small' alt='Step up' loading='eager' />
+            )}
+          </IconButton>
+        ),
+      }}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        if (textFieldProps.onChange) textFieldProps.onChange(e)
+        updateDisabled(e.target)
+      }}
+      inputProps={{
+        ...inputProps,
+        className: clsx(inputProps?.className, classes.quantityInput),
+      }}
+    />
+  )
+}