@graphcommerce/next-ui 3.25.1 → 4.0.0

package/Row/index.tsx

@@ -1,10 +1,5 @@
-import { Container, styled } from '@material-ui/core'
+import { Container, styled } from '@mui/material'
 
-const Row = styled(Container)(
-  ({ theme }) => ({
-    marginBottom: theme.spacings.xxl,
-  }),
-  { name: 'Row' },
-)
-
-export default Row
+export const Row = styled(Container, { name: 'Row' })(({ theme }) => ({
+  marginBottom: theme.spacings.xxl,
+}))

package/SectionContainer/index.tsx

@@ -1,39 +1,40 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import React, { PropsWithChildren } from 'react'
-import SectionHeader, { SectionHeaderProps } from '../SectionHeader'
-import { UseStyles } from '../Styles'
+import { Box } from '@mui/material'
+import { SectionHeader, SectionHeaderProps } from '../SectionHeader'
+import { extendableComponent } from '../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    sectionContainer: {},
-    sectionHeaderSidePadding: {},
-    sectionHeaderWrapper: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      paddingBottom: theme.spacings.xxs,
-      marginBottom: theme.spacings.xxs,
-    },
-    labelLeft: {},
-    labelRight: {},
-    borderBottom: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-  }),
-  { name: 'SectionContainer' },
-)
+export type SectionContainerProps = SectionHeaderProps &
+  OwnerState & { children?: React.ReactNode; className?: string }
 
-export type SectionContainerProps = PropsWithChildren<{ borderBottom?: boolean }> &
-  UseStyles<typeof useStyles> &
-  SectionHeaderProps
+type OwnerState = { borderBottom?: boolean }
+const name = 'SectionContainer' as const
+const parts = ['root'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function SectionContainer(props: SectionContainerProps) {
-  const { children, borderBottom } = props
-  const { sectionContainer, borderBottom: borderBottomClass, ...classes } = useStyles(props)
+export function SectionContainer(props: SectionContainerProps) {
+  const { children, className, borderBottom, sx = [], ...sectionHeaderProps } = props
+  const classes = withState({ borderBottom })
 
   return (
-    <div className={clsx(sectionContainer, { [borderBottomClass]: borderBottom })}>
-      <SectionHeader {...props} classes={classes} />
+    <Box
+      className={`${classes.root} ${className ?? ''}`}
+      sx={[
+        (theme) => ({
+          '&.borderBottom': {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <SectionHeader
+        {...sectionHeaderProps}
+        sx={(theme) => ({
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          paddingBottom: theme.spacings.xxs,
+          marginBottom: theme.spacings.xxs,
+        })}
+      />
       {children}
-    </div>
+    </Box>
   )
 }

package/SectionHeader/index.tsx

@@ -1,63 +1,58 @@
-import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
-import clsx from 'clsx'
+import { Box, Typography, TypographyProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../Styles'
+import { extendableComponent } from '../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    sectionHeaderSidePadding: {
-      paddingLeft: theme.spacings.xxs,
-      paddingRight: theme.spacings.xxs,
-    },
-    sectionHeaderWrapper: {
-      position: 'relative',
-      '&:focus': {
-        outline: 'none',
-      },
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginTop: theme.spacings.sm,
-      marginBottom: theme.spacings.xxs,
-    },
-    labelLeft: {},
-    labelRight: {
-      color: theme.palette.text.primary,
-      lineHeight: 1,
-    },
-  }),
-  { name: 'SectionHeader' },
-)
+const { classes, selectors } = extendableComponent('SectionHeader', [
+  'root',
+  'left',
+  'right',
+] as const)
 
 export type SectionHeaderProps = {
   variantLeft?: TypographyProps['variant']
   variantRight?: TypographyProps['variant']
   usePadding?: boolean
-} & UseStyles<typeof useStyles> &
-  (
-    | { labelLeft: React.ReactNode; labelRight?: React.ReactNode }
-    | { labelLeft?: React.ReactNode; labelRight: React.ReactNode }
-  )
+  sx?: SxProps<Theme>
+} & (
+  | { labelLeft: React.ReactNode; labelRight?: React.ReactNode }
+  | { labelLeft?: React.ReactNode; labelRight: React.ReactNode }
+)
 
-export default function SectionHeader(props: SectionHeaderProps) {
+export function SectionHeader(props: SectionHeaderProps) {
   const {
     labelLeft,
     labelRight,
     usePadding,
     variantLeft = 'overline',
     variantRight = 'body2',
+    sx = [],
   } = props
-  const classes = useStyles(props)
 
   return (
-    <div
-      className={clsx({
-        [classes.sectionHeaderWrapper]: true,
-        [classes.sectionHeaderSidePadding]: usePadding,
-      })}
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          position: 'relative',
+          '&:focus': {
+            outline: 'none',
+          },
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: theme.spacings.sm,
+          marginBottom: theme.spacings.xxs,
+        }),
+        usePadding === true &&
+          ((theme) => ({
+            paddingLeft: theme.spacings.xxs,
+            paddingRight: theme.spacings.xxs,
+          })),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <Typography
-        className={classes.labelLeft}
+        className={classes.left}
         variant={variantLeft}
         color='textSecondary'
         component='div'
@@ -66,14 +61,17 @@ export default function SectionHeader(props: SectionHeaderProps) {
       </Typography>
       {labelRight && (
         <Typography
-          className={classes.labelRight}
+          className={classes.right}
           variant={variantRight}
           color='textSecondary'
           component='div'
+          sx={{ color: 'text.primary', lineHeight: 1 }}
         >
           {labelRight}
         </Typography>
       )}
-    </div>
+    </Box>
   )
 }
+
+SectionHeader.selectors = selectors

package/Separator/index.tsx

@@ -1,33 +1,34 @@
-import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import { Box, Typography, TypographyProps } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../Styles'
+import { extendableComponent } from '../Styles'
 
 export type DividedLinksProps = {
   icon?: React.ReactNode
-} & Pick<TypographyProps, 'color'> &
-  UseStyles<typeof useStyles>
+} & Pick<TypographyProps, 'color' | 'sx'>
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'inline',
-      padding: `0 ${theme.spacings.xxs} 0 ${theme.spacings.xxs}`,
-    },
-  }),
-  { name: 'Separator' },
-)
+const name = 'Separator' as const
+const parts = ['root'] as const
+const { classes } = extendableComponent(name, parts)
 
-export default function Separator(props: DividedLinksProps) {
-  const { color, icon } = props
-  const classes = useStyles(props)
+export function Separator(props: DividedLinksProps) {
+  const { color, icon, sx = [] } = props
 
   return (
-    <div className={classes.root}>
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          display: 'inline',
+          padding: `0 ${theme.spacings.xxs} 0 ${theme.spacings.xxs}`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       {icon ?? (
         <Typography component='span' variant='body1' color={color}>
           |
         </Typography>
       )}
-    </div>
+    </Box>
   )
 }

package/Snackbar/MessageSnackbar.tsx

@@ -1,5 +1,4 @@
 import dynamic from 'next/dynamic'
 
 /** Always load the MessageSnackbar dynamically */
-const MessageSnackbar = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false })
-export default MessageSnackbar
+export const MessageSnackbar = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false })

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,106 +1,44 @@
+import { Portal } from '@mui/base'
 import {
   Fab,
-  makeStyles,
   Snackbar,
   SnackbarContent,
   SnackbarProps,
-  Theme,
-  Portal,
   lighten,
-} from '@material-ui/core'
-import clsx from 'clsx'
+  Box,
+  SxProps,
+  Theme,
+} from '@mui/material'
 import React, { useEffect, useState } from 'react'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { extendableComponent } from '../Styles'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconClose, iconCheckmark, iconSadFace } 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: '99em',
-      },
-    },
-    rootPillLarge: {},
-    rootPillSeverityInfo: {},
-    rootPillSeverityError: {},
-    message: {
-      width: '100%',
-      padding: theme.spacings.xxs,
-      display: 'grid',
-      alignItems: 'center',
-      gap: theme.spacings.xs,
-      gridTemplate: `
-        "children close"
-        "action   action"
-      `,
-      gridTemplateColumns: '1fr auto',
-      [theme.breakpoints.up('md')]: {
-        gridTemplate: `"children action close"`,
-        gridTemplateColumns: 'auto auto auto',
-      },
-    },
-    children: {
-      display: 'flex',
-      columnGap: 10,
-      gridArea: 'children',
-      ...theme.typography.subtitle1,
-      fontWeight: 400,
-    },
-    actionButton: {
-      gridArea: 'action',
-      '&:hover, &:focus': {
-        backgroundColor: 'transparent',
-      },
-      [theme.breakpoints.down('md')]: {
-        '& .MuiPillButton-pill': {
-          width: '100%',
-        },
-      },
-    },
-    close: {
-      backgroundColor: lighten(theme.palette.background.paper, 0.1),
-    },
-    sticky: {
-      position: 'sticky',
-    },
-  }),
-  { name: 'MessageSnackbar' },
-)
-
 export type MessageSnackbarImplProps = Omit<
   SnackbarProps,
   'autoHideDuration' | 'anchorOrigin' | 'color'
 > & {
   autoHide?: boolean
-  sticky?: boolean
-  variant?: Variant
-  size?: Size
-  severity?: 'success' | 'info' | 'warning' | 'error'
   action?: React.ReactNode
   children?: React.ReactNode
   onClose?: () => void
+  sx?: SxProps<Theme>
+} & OwnerState
+
+type OwnerState = {
+  sticky?: boolean
+  size?: Size
+  severity?: 'success' | 'info' | 'warning' | 'error'
+  variant?: Variant
 }
 
+const name = 'MessageSnackbarImpl' as const
+const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
 export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
 
@@ -115,10 +53,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
     children,
     onClose,
     severity = 'info',
+    sx,
     ...snackbarProps
   } = props
 
-  const classes = useStyles(props)
+  const classes = withState({ sticky, size, severity, variant })
 
   useEffect(() => {
     setShowSnackbar(!!open)
@@ -129,19 +68,6 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
     onClose?.()
   }
 
-  const clsxBonus = (base: string) => {
-    const Size = size[0].toUpperCase() + size.slice(1)
-    const Severity = severity[0].toUpperCase() + severity.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}Severity${Severity}`],
-    )
-  }
-
   let icon = iconCheckmark
   if (severity === 'error') icon = iconSadFace
 
@@ -153,35 +79,62 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         open={showSnackbar}
         autoHideDuration={autoHide ? 6000 : null}
-        classes={{
-          root: classes.snackbarRoot,
-          anchorOriginBottomCenter: clsx(
-            classes.anchorOriginBottomCenter,
-            sticky && classes.sticky,
-          ),
-        }}
+        className={classes.root}
+        sx={sx}
         onClose={hideSnackbar}
       >
         <SnackbarContent
           elevation={12}
-          classes={{
-            root: clsxBonus('root'),
-            message: clsxBonus('message'),
-            action: clsxBonus('action'),
-          }}
+          className={classes.content}
+          sx={(theme) => ({
+            '&.variantPill': {
+              backgroundColor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
+              [theme.breakpoints.up('md')]: {
+                borderRadius: '99em',
+              },
+              padding: theme.spacings.xxs,
+            },
+            '& .MuiSnackbarContent-message': {
+              width: '100%',
+              padding: 0,
+              display: 'grid',
+              alignItems: 'center',
+              gap: theme.spacings.xxs,
+              gridTemplate: {
+                xs: `"icon children close" "action action action"`,
+                md: '"icon children action close"',
+              },
+              gridTemplateColumns: {
+                xs: 'min-content 1fr auto',
+                md: 'min-content 1fr max-content auto',
+              },
+              typography: 'subtitle1',
+              '&.SvgIcon': {
+                gridArea: 'children',
+              },
+            },
+          })}
           message={
             <>
-              <div className={classes.children}>
-                <SvgImageSimple src={icon} size='large' />
-                <div>{children}</div>
-              </div>
+              <SvgIcon src={icon} size='large' />
+              <Box gridArea='children'>{children}</Box>
+              {/* </Box> */}
               {action && (
-                <div className={classes.actionButton} onClick={hideSnackbar}>
+                <Box className={classes.actionButton} onClick={hideSnackbar} gridArea='action'>
                   {action}
-                </div>
+                </Box>
               )}
-              <Fab className={classes.close} aria-label='Close' size='small' onClick={hideSnackbar}>
-                <SvgImageSimple src={iconClose} />
+              <Fab
+                className={classes.close}
+                aria-label='Close'
+                size='small'
+                onClick={hideSnackbar}
+                sx={(theme) => ({
+                  backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                })}
+              >
+                <SvgIcon src={iconClose} />
               </Fab>
             </>
           }

package/StarRatingField/index.tsx

@@ -1,7 +1,6 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import { Rating, RatingProps } from '@material-ui/lab'
-import React from 'react'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { RatingProps, Rating } from '@mui/material'
+import { extendableComponent } from '../Styles'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {
@@ -9,35 +8,35 @@ export type StarRatingFieldProps = {
   onChange?: (id: string, value: number) => void
 } & Omit<RatingProps, 'id' | 'onChange'>
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    iconStar: {
-      fill: '#FFDA1C',
-      stroke: 'none',
-      margin: '0 3px',
-    },
-    iconStarEmpty: {
-      fill: theme.palette.grey[300],
-      stroke: 'none',
-      margin: '0 3px',
-    },
-  }),
-  {
-    name: 'StarRatingField',
-  },
-)
+const name = 'StarRatingField' as const
+const parts = ['root', 'startEmpty', 'starFull'] as const
+const { classes } = extendableComponent(name, parts)
 
-export default function StarRatingField(props: StarRatingFieldProps) {
+export function StarRatingField(props: StarRatingFieldProps) {
   const { id, onChange = () => {}, ...ratingProps } = props
-  const classes = useStyles(props)
 
   return (
     <Rating
+      className={classes.root}
       name={`star-rating-${id}`}
       max={5}
       size='small'
-      emptyIcon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStarEmpty} />}
-      icon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStar} />}
+      emptyIcon={
+        <SvgIcon
+          src={iconStar}
+          size='large'
+          className={classes.startEmpty}
+          sx={{ fill: '#FFDA1C', stroke: 'none', margin: '0 3px' }}
+        />
+      }
+      icon={
+        <SvgIcon
+          src={iconStar}
+          size='large'
+          className={classes.starFull}
+          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
+        />
+      }
       onChange={(event, value) => {
         onChange(id ?? '', value ?? 0)
       }}

package/Stepper/Stepper.tsx

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

package/Styles/EmotionProvider.tsx

@@ -0,0 +1,14 @@
+import createCache from '@emotion/cache'
+import type { EmotionCache } from '@emotion/cache'
+import { CacheProvider } from '@emotion/react'
+
+let muiCache: EmotionCache | undefined
+export const createMuiCache = () => {
+  muiCache = createCache({ key: 'mui', prepend: true })
+  return muiCache
+}
+
+/** Provider that is supposed to be used in your `pages/_app.tsx` */
+export function EmotionProvider({ children }: { children: React.ReactNode }) {
+  return <CacheProvider value={muiCache ?? createMuiCache()}>{children}</CacheProvider>
+}