@graphcommerce/next-ui 3.25.3 → 4.1.0

package/Pagination/index.tsx

@@ -1,59 +1,28 @@
-import { Fab, makeStyles, Theme, Typography } from '@material-ui/core'
-import { PaginationProps, usePagination } from '@material-ui/lab'
+import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
+import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
 import React from 'react'
-import { UseStyles } from '../Styles'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { extendableComponent } from '../Styles'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    margin: '0 auto',
-    marginTop: theme.spacings.lg,
-    marginBottom: theme.spacings.lg,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    '& .Mui-disabled': {
-      background: 'none',
-    },
-  },
-  pagination: {
-    gridArea: 'pagination',
-    justifyContent: 'center',
-    display: 'grid',
-    gridAutoFlow: 'column',
-    alignItems: 'center',
-    marginBottom: theme.spacings.xxl,
-    [theme.breakpoints.up('md')]: {
-      marginBottom: theme.spacings.lg,
-    },
-    ...theme.typography.body1,
-    '& > *': {
-      whiteSpace: 'nowrap',
-      boxShadow: 'none',
-    },
-  },
-  fab: {
-    color: theme.palette.text.primary,
-  },
-}))
-
 export type PagePaginationProps = {
   count: number
   page: number
-  renderLink: (page: number, icon: React.ReactNode, btnProps: any) => React.ReactNode
-} & Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'> &
-  UseStyles<typeof useStyles>
+  renderLink: (page: number, icon: React.ReactNode, btnProps: UsePaginationItem) => React.ReactNode
+  sx?: SxProps<Theme>
+} & Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'>
+
+const parts = ['root', 'button', 'icon'] as const
+const { classes } = extendableComponent('Pagination', parts)
 
 /**
  * Rel="prev" and rel="next" are deprecated by Google.
  *
  * Read more: https://ahrefs.com/blog/rel-prev-next-pagination/
  */
-export default function Pagination(props: PagePaginationProps) {
+export function Pagination(props: PagePaginationProps) {
   const { count, page, renderLink, classes: styles, ...paginationProps } = props
-  const classes = useStyles(props)
+
   const { items } = usePagination({
     count,
     defaultPage: 1,
@@ -65,36 +34,50 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <Fab
+    <IconButton
       size='medium'
       disabled={page === 1}
       color='inherit'
       aria-label='Previous page'
-      className={classes.fab}
+      className={classes.button}
     >
-      <SvgImageSimple src={iconChevronLeft} />
-    </Fab>
+      <SvgIcon src={iconChevronLeft} className={classes.icon} size='medium' />
+    </IconButton>
   )
 
   const chevronRight = (
-    <Fab
+    <IconButton
       size='medium'
       disabled={page === count}
       color='inherit'
       aria-label='Next page'
-      className={classes.fab}
+      className={classes.button}
     >
-      <SvgImageSimple src={iconChevronRight} />
-    </Fab>
+      <SvgIcon src={iconChevronRight} className={classes.icon} size='medium' />
+    </IconButton>
   )
 
   return (
-    <div className={classes.root}>
+    <Box
+      className={classes.root}
+      sx={(theme) => ({
+        margin: '0 auto',
+        marginTop: theme.spacings.lg,
+        marginBottom: theme.spacings.lg,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '6px',
+        '& .Mui-disabled': {
+          background: 'none',
+        },
+      })}
+    >
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 
-      <Typography variant='body1'>Page {`${page} of ${Math.max(1, count)}`}</Typography>
+      <Box typography='body1'>Page {`${page} of ${Math.max(1, count)}`}</Box>
 
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
-    </div>
+    </Box>
   )
 }

package/RenderType/index.tsx

@@ -27,7 +27,7 @@ export type TypeRenderer<
  * A simple array with renderers but with strict typing that validates of the provided Renderer is
  * actually able to render the Type
  */
-export default function RenderType<
+export function RenderType<
   T extends TypeObject,
   A extends Record<string, unknown> = Record<string, unknown>,
 >(props: { renderer: TypeRenderer<T, A> } & FilterTypeByTypename<T, T['__typename']> & A) {

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -1,51 +1,49 @@
-import { Theme, makeStyles } from '@material-ui/core'
+import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import Row from '..'
-import SectionContainer from '../../SectionContainer'
-import { UseStyles } from '../../Styles'
+import { Row } from '..'
+import { SectionContainer } from '../../SectionContainer'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      maxWidth: 820,
-    },
-    h1: {
-      textAlign: 'center',
-      ...theme.typography.h2,
-    },
-    overline: {
-      display: 'block',
-      padding: `${theme.spacings.xs} 0`,
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-    links: ({ containsBigLinks }: ButtonLinkListPropsBase) => ({
-      display: 'grid',
-      gridTemplateColumns: containsBigLinks
-        ? undefined
-        : `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
-      columnGap: theme.spacings.sm,
-    }),
-  }),
-  { name: 'ButtonLinkList' },
-)
-
-type ButtonLinkListPropsBase = {
+export type ButtonLinkListProps = {
   title: string
   children: React.ReactNode
-  containsBigLinks: boolean
-}
+  sx?: SxProps<Theme>
+} & OwnerState
 
-export type ButtonLinkListProps = UseStyles<typeof useStyles> & ButtonLinkListPropsBase
+type OwnerState = { containsBigLinks: boolean }
+
+const compName = 'ButtonLinkList' as const
+const parts = ['root', 'links'] as const
+const { withState } = extendableComponent<OwnerState, typeof compName, typeof parts>(
+  compName,
+  parts,
+)
 
 export function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, children } = props
-  const classes = useStyles(props)
+  const { title, children, containsBigLinks, sx = [] } = props
+
+  const classes = withState({ containsBigLinks })
 
   return (
-    <Row maxWidth='md' className={classes.container}>
+    <Row
+      maxWidth='md'
+      className={classes.root}
+      sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <SectionContainer labelLeft={title}>
-        <div className={classes.links}>{children}</div>
+        <Box
+          className={classes.links}
+          sx={(theme) => ({
+            display: 'grid',
+            columnGap: theme.spacings.sm,
+            '&:not(.containsBigLinks)': {
+              gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+            },
+          })}
+        >
+          {children}
+        </Box>
       </SectionContainer>
     </Row>
   )

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,46 +1,29 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
+import { Button, ButtonProps, styled } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
-import Button, { ButtonProps } from '../../Button'
-import { UseStyles } from '../../Styles'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { SvgIcon } from '../../SvgIcon/SvgIcon'
 import { iconChevronRight } from '../../icons'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  buttonLink: {
-    color: theme.palette.text.primary,
-    textDecoration: 'none',
-    padding: `${theme.spacings.xs} 0`,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    borderRadius: 0,
-    ...theme.typography.body1,
-    '& > *': {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      justifyContent: 'space-between',
-      gap: `${theme.spacings.xs}`,
-    },
-  },
-}))
+export type ButtonLinkProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
 
-export type ButtonLinkProps = {
-  children: React.ReactNode
-  url: string
-  endIcon?: React.ReactNode
-} & ButtonProps &
-  UseStyles<typeof useStyles>
+const ButtonItem = styled(Button)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  textDecoration: 'none',
+  padding: `${theme.spacings.xs} 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderRadius: 0,
+  justifyContent: 'space-between',
+  ...theme.typography.body1,
+}))
 
 export function ButtonLinkListItem(props: ButtonLinkProps) {
-  const { children, url, endIcon, className, ...buttonProps } = props
-  const classes = useStyles(props)
+  const { children, url, endIcon = <SvgIcon src={iconChevronRight} />, ...buttonProps } = props
 
   return (
     <PageLink href={url} passHref>
-      <Button {...buttonProps} className={clsx(classes.buttonLink, className)}>
-        <span>{children}</span>
-        {endIcon ?? <SvgImageSimple src={iconChevronRight} />}
-      </Button>
+      <ButtonItem {...buttonProps} endIcon={endIcon}>
+        {children}
+      </ButtonItem>
     </PageLink>
   )
 }

package/Row/ColumnOne/index.tsx

@@ -1,11 +1,6 @@
-import { Container, styled } from '@material-ui/core'
+import { Container, styled } from '@mui/material'
 
-const ColumnOne = styled(Container)(
-  ({ theme }) => ({
-    maxWidth: 820,
-    marginBottom: theme.spacings.lg,
-  }),
-  { name: 'ColumnOne' },
-)
-
-export default ColumnOne
+export const ColumnOne = styled(Container, { name: 'ColumnOne' })(({ theme }) => ({
+  maxWidth: 820,
+  marginBottom: theme.spacings.lg,
+}))

package/Row/ColumnOneBoxed/index.tsx

@@ -1,27 +1,26 @@
-import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import Row from '..'
+import { Box, ContainerProps } from '@mui/material'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    boxed: {
-      padding: theme.spacings.lg,
-      boxShadow: theme.shadows[24],
-      '& h1, & h2, & h3': {
-        marginTop: 0,
-      },
-    },
-  }),
-  { name: 'ColumnOneBoxed' },
-)
+const compName = 'ColumnOneBoxed' as const
+const parts = ['root', 'boxed'] as const
+const { classes } = extendableComponent(compName, parts)
 
-export default function ColumnOneBoxed(props: ContainerProps) {
+export function ColumnOneBoxed(props: ContainerProps) {
   const { children } = props
-  const classes = useStyles(props)
 
   return (
-    <Row {...props}>
-      <div className={classes.boxed}>{children}</div>
+    <Row {...props} className={classes.root}>
+      <Box
+        className={classes.boxed}
+        sx={(theme) => ({
+          padding: theme.spacings.lg,
+          boxShadow: theme.shadows[24],
+          '& h1, & h2, & h3': { marginTop: 0 },
+        })}
+      >
+        {children}
+      </Box>
     </Row>
   )
 }

package/Row/ColumnOneCentered/index.tsx

@@ -1,6 +1,5 @@
-import { ContainerProps, styled } from '@material-ui/core'
-import React from 'react'
-import ColumnOne from '../ColumnOne'
+import { ContainerProps, styled } from '@mui/material'
+import { ColumnOne } from '../ColumnOne'
 
 const Wrapper = styled('div')(({ theme }) => ({
   marginBottom: theme.spacings.lg,
@@ -11,7 +10,7 @@ const Wrapper = styled('div')(({ theme }) => ({
   position: 'relative',
 }))
 
-export default function ColumnOneCentered(props: ContainerProps) {
+export function ColumnOneCentered(props: ContainerProps) {
   const { children } = props
 
   return (

package/Row/ColumnThree/index.tsx

@@ -1,66 +1,71 @@
-import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.lg,
-      gridTemplateColumns: `1fr`,
-      gridTemplateAreas: `
-        "one"
-        "two"
-        "three"
-      `,
-      '& h2, & h3': {
-        ...theme.typography.h4,
-        [theme.breakpoints.up('md')]: {
-          marginBottom: '-25px',
-        },
-      },
-      '& p': {
-        [theme.breakpoints.up('md')]: {
-          marginTop: '65px',
-        },
-      },
-      [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: `1fr 1fr`,
-        gridTemplateAreas: `
-        "one two"
-        "three three"
-      `,
-      },
-      [theme.breakpoints.up('md')]: {
-        gridTemplateColumns: `1fr 1fr 1fr`,
-        gridTemplateAreas: '"one two three"',
-      },
-    },
-    colOne: { gridArea: 'one', zIndex: 2 },
-    colTwo: { gridArea: 'two', zIndex: 2 },
-    colThree: { gridArea: 'three', zIndex: 2 },
-  }),
-  { name: 'ColumnThree' },
-)
+const compName = 'ColumnThree' as const
+const parts = ['root', 'colOne', 'colTwo', 'colThree'] as const
+const { classes } = extendableComponent(compName, parts)
 
-export type ColumnThreeProps = UseStyles<typeof useStyles> &
-  Omit<ContainerProps, 'children'> & {
-    colOneContent: React.ReactNode
-    colTwoContent: React.ReactNode
-    colThreeContent: React.ReactNode
-  }
+export type ColumnThreeProps = Omit<ContainerProps, 'children'> & {
+  colOneContent: React.ReactNode
+  colTwoContent: React.ReactNode
+  colThreeContent: React.ReactNode
+}
 
-export default function ColumnThree(props: ColumnThreeProps) {
-  const { colOneContent, colTwoContent, colThreeContent, ...containerProps } = props
-  const classes = useStyles(props)
+export function ColumnThree(props: ColumnThreeProps) {
+  const { colOneContent, colTwoContent, colThreeContent, sx = [], ...containerProps } = props
 
   return (
-    <Row className={classes.root} {...containerProps}>
-      <div className={classes.colOne}>{colOneContent}</div>
-      <div className={classes.colTwo}>{colTwoContent}</div>
-      <div className={classes.colThree}>{colThreeContent}</div>
+    <Row
+      className={classes.root}
+      {...containerProps}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gridColumnGap: theme.spacings.md,
+          gridRowGap: theme.spacings.lg,
+          gridTemplateColumns: `1fr`,
+          gridTemplateAreas: `
+          "one"
+          "two"
+          "three"
+        `,
+          '& h2, & h3': {
+            typography: 'h4',
+            [theme.breakpoints.up('md')]: {
+              marginBottom: '-25px',
+            },
+          },
+          '& p': {
+            [theme.breakpoints.up('md')]: {
+              marginTop: '65px',
+            },
+          },
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateColumns: `1fr 1fr`,
+            gridTemplateAreas: `
+            "one two"
+            "three three"
+          `,
+          },
+          [theme.breakpoints.up('md')]: {
+            gridTemplateColumns: `1fr 1fr 1fr`,
+            gridTemplateAreas: '"one two three"',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box className={classes.colOne} sx={{ gridArea: 'one' }}>
+        {colOneContent}
+      </Box>
+      <Box className={classes.colTwo} sx={{ gridArea: 'two' }}>
+        {colTwoContent}
+      </Box>
+      <Box className={classes.colThree} sx={{ gridArea: 'three' }}>
+        {colThreeContent}
+      </Box>
     </Row>
   )
 }

package/Row/ColumnTwo/index.tsx

@@ -1,41 +1,46 @@
-import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.lg,
-      display: `grid`,
-      gridTemplateColumns: `1fr`,
-      gridTemplateAreas: `"one" "two"`,
-      [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: `1fr 1fr`,
-        gridTemplateAreas: `"one two"`,
-      },
-    },
-    colOne: { gridArea: 'one' },
-    colTwo: { gridArea: 'two' },
-  }),
-  { name: 'ColumnTwo' },
-)
+export type ColumnTwoProps = Omit<ContainerProps, 'children'> & {
+  colOneContent: React.ReactNode
+  colTwoContent: React.ReactNode
+}
 
-export type ColumnTwoProps = UseStyles<typeof useStyles> &
-  Omit<ContainerProps, 'children'> & {
-    colOneContent: React.ReactNode
-    colTwoContent: React.ReactNode
-  }
+const compName = 'ColumnTwo' as const
+const parts = ['root', 'colOne', 'colTwo'] as const
+const { classes } = extendableComponent(compName, parts)
 
-export default function ColumnTwo(props: ColumnTwoProps) {
-  const { colOneContent, colTwoContent, ...containerProps } = props
-  const classes = useStyles(props)
+export function ColumnTwo(props: ColumnTwoProps) {
+  const { colOneContent, colTwoContent, sx = [], ...containerProps } = props
 
   return (
-    <Row maxWidth='lg' {...containerProps} className={classes.root}>
-      <div className={classes.colOne}>{colOneContent}</div>
-      <div className={classes.colTwo}>{colTwoContent}</div>
+    <Row
+      maxWidth='lg'
+      {...containerProps}
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          gridColumnGap: theme.spacings.md,
+          gridRowGap: theme.spacings.lg,
+          display: `grid`,
+          gridTemplateColumns: `1fr`,
+          gridTemplateAreas: `"one" "two"`,
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateColumns: `1fr 1fr`,
+            gridTemplateAreas: `"one two"`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box className={classes.colOne} gridArea='one'>
+        {colOneContent}
+      </Box>
+      <Box className={classes.colTwo} gridArea='two'>
+        {colTwoContent}
+      </Box>
     </Row>
   )
 }

package/Row/ColumnTwoSpread/index.tsx

@@ -1,41 +1,32 @@
-import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../../Styles'
-import ColumnTwo from '../ColumnTwo'
+import { ColumnTwo, ColumnTwoProps } from '../ColumnTwo'
 
-const useStyles = makeStyles(
-  ({ breakpoints }: Theme) => ({
-    root: {
-      [breakpoints.up('md')]: {
-        gridTemplateColumns: `1fr 1fr 1fr`,
-        gridTemplateAreas: ({ somethingWithNodeLength }: any) =>
-          somethingWithNodeLength ? `"one one two"` : `"one two two"`,
-        '& h2, & h3': {
-          '&:empty': {
-            display: 'block',
-            minHeight: 30,
-          },
-        },
-      },
-      gridTemplateColumns: `1fr`,
-      gridTemplateAreas: `
-        "one"
-        "two"
-      `,
-    },
-  }),
-  { name: 'ColumnTwoSpread' },
-)
-
-export type ColumnTwoSpreadProps = Omit<ContainerProps, 'children'> &
-  UseStyles<typeof useStyles> & {
-    nodeLength: boolean
-    colOneContent: React.ReactNode
-    colTwoContent: React.ReactNode
-  }
+type StyleProps = { nodeLength: boolean }
 
-export default function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
-  const classes = useStyles(props)
+export type ColumnTwoSpreadProps = StyleProps & ColumnTwoProps
 
-  return <ColumnTwo {...props} classes={classes} />
+export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
+  const { nodeLength, sx = [], ...colProps } = props
+  return (
+    <ColumnTwo
+      {...colProps}
+      className='ColumnTwoSpread'
+      sx={[
+        (theme) => ({
+          [theme.breakpoints.up('md')]: {
+            gridTemplateColumns: `1fr 1fr 1fr`,
+            gridTemplateAreas: nodeLength ? `"one one two"` : `"one two two"`,
+            '& h2, & h3': {
+              '&:empty': {
+                display: 'block',
+                minHeight: 30,
+              },
+            },
+          },
+          gridTemplateColumns: `1fr`,
+          gridTemplateAreas: `"one" "two"`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    />
+  )
 }