@graphcommerce/next-ui 3.25.1 → 4.0.0

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,154 +1,27 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Divider, makeStyles, Theme } from '@material-ui/core'
+import { Box, SxProps, Theme } from '@mui/material'
 import React, { useRef } from 'react'
-import { UseStyles } from '../../Styles'
-import { classesPicker } from '../../Styles/classesPicker'
+import { extendableComponent } from '../../Styles'
 import { useScrollY } from '../hooks/useScrollY'
 import { FloatingProps } from './LayoutHeadertypes'
 
-type Classes = 'bg' | 'content' | 'left' | 'center' | 'right' | 'divider'
-
-const time = '150ms'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    bg: {
-      position: 'absolute',
-      left: 0,
-      width: '100%',
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[1],
-      opacity: 0,
-      transition: `opacity ${time}`,
-
-      height: theme.appShell.headerHeightSm,
-      [theme.breakpoints.up('md')]: {
-        height: theme.appShell.appBarHeightMd,
-      },
-      borderTopLeftRadius: theme.shape.borderRadius * 3,
-      borderTopRightRadius: theme.shape.borderRadius * 3,
-    },
-    bgDivider: {
-      boxShadow: 'unset',
-    },
-    bgFloatingSm: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    bgFloatingMd: {
-      [theme.breakpoints.up('md')]: {
-        display: 'none',
-      },
-    },
-    bgScrolled: {
-      opacity: 1,
-    },
-    content: {
-      position: 'absolute',
-      left: 0,
-      width: '100%',
-      display: 'grid',
-      gridTemplateAreas: `"left center right"`,
-      gridTemplateColumns: '1fr auto 1fr',
-      alignItems: 'center',
-      // columnGap: theme.spacings.xs,
-
-      height: theme.appShell.headerHeightSm,
-      [theme.breakpoints.up('md')]: {
-        padding: `0 ${theme.page.horizontal}`,
-        height: theme.appShell.appBarHeightMd,
-      },
-    },
-    contentFloatingMd: {
-      [theme.breakpoints.up('md')]: {
-        padding: `0 ${theme.page.horizontal}`,
-        background: 'none',
-        pointerEvents: 'none',
-      },
-    },
-    contentFloatingSm: {
-      [theme.breakpoints.down('sm')]: {
-        padding: `0 ${theme.page.horizontal}`,
-        background: 'none',
-        pointerEvents: 'none',
-      },
-    },
-    left: {
-      '& > *': { pointerEvents: 'all' },
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gap: theme.spacings.sm,
-      gridArea: 'left',
-      justifyContent: 'start',
-    },
-    center: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gap: theme.spacings.sm,
-      gridArea: 'center',
-      justifyContent: 'start',
-      overflow: 'hidden',
-      transition: `opacity ${time}`,
-      opacity: 0,
-    },
-    centerScrolled: {
-      opacity: 1,
-      '& > *': { pointerEvents: 'all' },
-    },
-    centerFloatingSm: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    centerFloatingMd: {
-      [theme.breakpoints.up('md')]: {
-        display: 'none',
-      },
-    },
-    right: {
-      '& > *': {
-        pointerEvents: 'all',
-        width: 'min-content',
-      },
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gap: theme.spacings.sm,
-      gridArea: 'right',
-      justifyContent: 'end',
-    },
-    divider: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-    },
-    dividerFloatingSm: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    dividerFloatingMd: {
-      [theme.breakpoints.up('md')]: {
-        display: 'none',
-      },
-    },
-  }),
-  { name: 'LayoutHeaderContent' },
-)
-
-export type ContentProps = FloatingProps &
-  UseStyles<typeof useStyles> & {
-    children?: React.ReactNode
-    left?: React.ReactNode
-    right?: React.ReactNode
-    divider?: React.ReactNode
-    switchPoint?: number
-  }
-
-export default function LayoutHeaderContent(props: ContentProps) {
+export type LayoutHeaderContentProps = FloatingProps & {
+  children?: React.ReactNode
+  left?: React.ReactNode
+  right?: React.ReactNode
+  divider?: React.ReactNode
+  switchPoint?: number
+  sx?: SxProps<Theme>
+  sxBg?: SxProps<Theme>
+}
+
+type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
+const name = 'LayoutHeaderContent' as const
+const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export default function LayoutHeaderContent(props: LayoutHeaderContentProps) {
   const ref = useRef<HTMLDivElement>(null)
-  const scroll = useScrollY()
 
   const {
     left,
@@ -158,12 +31,14 @@ export default function LayoutHeaderContent(props: ContentProps) {
     floatingMd = false,
     floatingSm = false,
     switchPoint = 50,
+    sx = [],
+    sxBg = [],
   } = props
-  const classes = useStyles(props)
 
+  const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const className = classesPicker<Classes>(classes, {
+  const classes = withState({
     floatingSm,
     floatingMd,
     scrolled,
@@ -172,13 +47,174 @@ export default function LayoutHeaderContent(props: ContentProps) {
 
   return (
     <>
-      <div {...className('bg')} />
-      <div {...className('content')} ref={ref}>
-        {left && <div {...className('left')}>{left}</div>}
-        <div {...className('center')}>{children}</div>
-        <div {...className('right')}>{right}</div>
-        {divider && <div {...className('divider')}>{divider}</div>}
-      </div>
+      <Box
+        className={classes.bg}
+        sx={[
+          (theme) => ({
+            position: 'absolute',
+            left: 0,
+            width: '100%',
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: theme.shadows[1],
+
+            height: theme.appShell.headerHeightSm,
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.appBarHeightMd,
+            },
+            borderTopLeftRadius: theme.shape.borderRadius * 3,
+            borderTopRightRadius: theme.shape.borderRadius * 3,
+
+            '&.floatingSm': {
+              [theme.breakpoints.down('md')]: {
+                display: 'none',
+              },
+            },
+            '&.floatingMd': {
+              [theme.breakpoints.up('md')]: {
+                display: 'none',
+              },
+            },
+
+            opacity: 0,
+            transition: `opacity 150ms`,
+            '&.scrolled': {
+              opacity: 1,
+            },
+
+            '&.divider': {
+              boxShadow: 'unset',
+            },
+          }),
+          ...(Array.isArray(sxBg) ? sxBg : [sxBg]),
+        ]}
+      />
+      <Box
+        className={classes.content}
+        ref={ref}
+        sx={[
+          (theme) => ({
+            position: 'absolute',
+            left: 0,
+            width: '100%',
+            display: 'grid',
+            gridTemplateAreas: `"left center right"`,
+            gridTemplateColumns: '1fr auto 1fr',
+            alignItems: 'center',
+            // columnGap: theme.spacings.xs,
+
+            height: theme.appShell.headerHeightSm,
+            padding: `0 ${theme.page.horizontal}`,
+
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.appBarHeightMd,
+            },
+
+            '&.floatingSm': {
+              [theme.breakpoints.down('md')]: {
+                padding: `0 ${theme.page.horizontal}`,
+                background: 'none',
+                pointerEvents: 'none',
+              },
+            },
+            '&.floatingMd': {
+              [theme.breakpoints.up('md')]: {
+                padding: `0 ${theme.page.horizontal}`,
+                background: 'none',
+                pointerEvents: 'none',
+              },
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        {left && (
+          <Box
+            className={classes.left}
+            sx={(theme) => ({
+              '& > *': { pointerEvents: 'all' },
+              display: 'grid',
+              gridAutoFlow: 'column',
+              gap: theme.spacings.sm,
+              gridArea: 'left',
+              justifyContent: 'start',
+            })}
+          >
+            {left}
+          </Box>
+        )}
+        <Box
+          className={classes.center}
+          sx={(theme) => ({
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gap: theme.spacings.sm,
+            gridArea: 'center',
+            justifyContent: 'start',
+            overflow: 'hidden',
+
+            transition: `opacity 150ms`,
+            opacity: 0,
+            '&.scrolled': {
+              opacity: 1,
+              '& > *': { pointerEvents: 'all' },
+            },
+
+            '&.floatingSm': {
+              [theme.breakpoints.down('md')]: {
+                display: 'none',
+              },
+            },
+
+            '&.floatingMd': {
+              [theme.breakpoints.up('md')]: {
+                display: 'none',
+              },
+            },
+          })}
+        >
+          {children}
+        </Box>
+        <Box
+          className={classes.right}
+          sx={(theme) => ({
+            '& > *': {
+              pointerEvents: 'all',
+              width: 'min-content',
+            },
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gap: theme.spacings.sm,
+            gridArea: 'right',
+            justifyContent: 'end',
+          })}
+        >
+          {right}
+        </Box>
+        {divider && (
+          <Box
+            className={classes.divider}
+            sx={(theme) => ({
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+
+              '&.floatingSm': {
+                [theme.breakpoints.down('md')]: {
+                  display: 'none',
+                },
+              },
+              '&.floatingMd': {
+                [theme.breakpoints.up('md')]: {
+                  display: 'none',
+                },
+              },
+            })}
+          >
+            {divider}
+          </Box>
+        )}
+      </Box>
     </>
   )
 }

package/Layout/components/LayoutHeadertypes.ts

@@ -1,6 +1,6 @@
 type Matrix<T extends string, M extends string> = `${T}${Capitalize<M>}`
 
-// Possible configurations for the AppShellHeader
+// Possible configurations for the LayoutHeader
 export type Variant = 'floating'
 export type Size = 'sm' | 'md'
 

package/Layout/components/LayoutTitle.tsx

@@ -1,79 +1,84 @@
-import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../../Styles'
-import { classesPicker } from '../../Styles/classesPicker'
-import { responsiveVal } from '../../Styles/responsiveVal'
-import { SvgImageProps } from '../../SvgImage'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { extendableComponent, responsiveVal } from '../../Styles'
+import { SvgIcon, SvgIconProps } from '../../SvgIcon/SvgIcon'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 6,
-      flexFlow: 'unset',
-      [theme.breakpoints.up('md')]: {
-        flexFlow: 'column',
-      },
-    },
-    containerSizeSmall: {
-      flexFlow: 'unset',
-      overflow: 'hidden',
-      '& svg': {
-        width: responsiveVal(24, 28),
-        height: responsiveVal(24, 28),
-        strokeWidth: 1.4,
-      },
-      '& > *': {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-      },
-    },
-    containerGutterTop: {
-      marginTop: theme.spacings.xl,
-    },
-    containerGutterBottom: {
-      marginBottom: theme.spacings.lg,
-    },
-    typography: {},
-  }),
-  { name: 'Title' },
+type OwnerState = {
+  size?: 'small' | 'medium'
+  gutterTop?: boolean
+  gutterBottom?: boolean
+}
+
+const parts = ['root', 'title', 'icon'] as const
+const { withState } = extendableComponent<OwnerState, 'LayoutTitle', typeof parts>(
+  'LayoutTitle',
+  parts,
 )
 
 export type TitleProps = {
   children: React.ReactNode
-  icon?: SvgImageProps['src']
-  size?: 'small' | 'medium'
+  icon?: SvgIconProps['src']
   variant?: TypographyProps['variant']
-  gutterTop?: boolean
-  gutterBottom?: boolean
   component?: React.ElementType
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+} & OwnerState
 
 export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
-  const { children, icon, size = 'medium', component, variant } = props
-  const classes = useStyles(props)
-  const small = size === 'small'
+  const { children, icon, size = 'medium', component, variant, sx = [] } = props
 
   const gutterTop = !!(props.gutterTop ?? size !== 'small')
   const gutterBottom = !!(props.gutterBottom ?? size !== 'small')
 
-  const className = classesPicker(classes, { size, gutterBottom, gutterTop })
+  const classes = withState({ size, gutterBottom, gutterTop })
 
   return (
-    <div {...className('container')}>
-      {icon && <SvgImageSimple src={icon} size={small ? 'large' : 'xl'} />}
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: `6px`,
+          flexFlow: 'unset',
+          [theme.breakpoints.up('md')]: {
+            flexFlow: 'column',
+          },
+          '&.sizeSmall': {
+            flexFlow: 'unset',
+            overflow: 'hidden',
+            '& svg': {
+              width: responsiveVal(24, 28),
+              height: responsiveVal(24, 28),
+              strokeWidth: 1.4,
+            },
+            '& > *': {
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          },
+          '&.gutterTop': {
+            marginTop: theme.spacings.xl,
+          },
+          '&.gutterBottom': {
+            marginBottom: theme.spacings.xl,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {icon && (
+        <SvgIcon src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />
+      )}
       <Typography
         ref={ref}
-        variant={variant || (small ? 'h6' : 'h3')}
+        variant={variant || (size === 'small' ? 'h6' : 'h3')}
         component={component ?? 'h1'}
-        className={small ? undefined : classes.typography}
+        className={classes.title}
       >
         {children}
       </Typography>
-    </div>
+    </Box>
   )
 })