@graphcommerce/next-ui 3.25.1 → 4.0.0

package/AnimatedRow/index.tsx

@@ -1,14 +1,17 @@
+import { styled, SxProps, Theme } from '@mui/material'
 import { HTMLMotionProps, m } from 'framer-motion'
 import { ReactHTML } from 'react'
 
 export type AnimatedRowProps = Omit<
   ReactHTML['div'] & HTMLMotionProps<'div'>,
   'layout' | 'initial' | 'animate' | 'exit' | 'transition'
->
+> & { sx?: SxProps<Theme> }
 
-export default function AnimatedRow(props: AnimatedRowProps) {
+const StyledDiv = styled(m.div)({})
+
+export function AnimatedRow(props: AnimatedRowProps) {
   return (
-    <m.div
+    <StyledDiv
       {...props}
       layout
       initial={{ opacity: 0, height: 0 }}

package/ApolloError/ApolloErrorAlert.tsx

@@ -1,35 +1,25 @@
-import { ApolloError } from '@apollo/client'
-import { makeStyles, Theme } from '@material-ui/core'
-import { Alert, AlertProps } from '@material-ui/lab'
+import { ApolloError } from '@graphcommerce/graphql'
+import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
-import React from 'react'
-import AnimatedRow from '../AnimatedRow'
+import { AnimatedRow } from '../AnimatedRow'
+import { extendableComponent } from '../Styles/extendableComponent'
 
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    alerts: {},
-    alert: {
-      paddingTop: `calc(${theme.spacings.xxs} / 2)`,
-      paddingBottom: `calc(${theme.spacings.xxs} / 2)`,
-    },
-  }),
-  { name: 'ApolloErrorAlert' },
-)
+const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
 export type ApolloErrorAlertProps = {
   error?: ApolloError
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
+  sx?: SxProps<Theme>
 }
 export default function ApolloErrorAlert(props: ApolloErrorAlertProps) {
-  const classes = useStyles()
-  const { error, graphqlErrorAlertProps, networkErrorAlertProps } = props
+  const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
 
   return (
     <AnimatePresence initial={false}>
       {error && (
         <AnimatedRow key='alerts'>
-          <div className={classes.alerts}>
+          <Box sx={sx} className={classes.root}>
             <AnimatePresence initial={false}>
               {error.graphQLErrors.map((e, index) => (
                 // eslint-disable-next-line react/no-array-index-key
@@ -43,17 +33,26 @@ export default function ApolloErrorAlert(props: ApolloErrorAlertProps) {
               ))}
               {error.networkError && (
                 <AnimatedRow key='networkError'>
-                  <div className={classes.alert} key='networkError'>
+                  <Box
+                    sx={(theme) => ({
+                      paddingTop: theme.spacings.xxs,
+                      paddingBottom: theme.spacings.xxs,
+                    })}
+                    className={classes.alert}
+                    key='networkError'
+                  >
                     <Alert severity='error' {...networkErrorAlertProps}>
                       Network Error: {error.networkError.message}
                     </Alert>
-                  </div>
+                  </Box>
                 </AnimatedRow>
               )}
             </AnimatePresence>
-          </div>
+          </Box>
         </AnimatedRow>
       )}
     </AnimatePresence>
   )
 }
+
+ApolloErrorAlert.selectors = selectors

package/ApolloError/ApolloErrorFullPage.tsx

@@ -1,7 +1,6 @@
-import { ApolloError } from '@apollo/client'
-import { AlertProps } from '@material-ui/lab'
-import React from 'react'
-import FullPageMessage, { FullPageMessageProps } from '../FullPageMessage'
+import { ApolloError } from '@graphcommerce/graphql'
+import { AlertProps } from '@mui/material'
+import { FullPageMessage, FullPageMessageProps } from '../FullPageMessage'
 import ApolloErrorAlert from './ApolloErrorAlert'
 
 export type ApolloErrorFullPageProps = {

package/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,7 +1,7 @@
-import { ApolloError } from '@apollo/client'
+import { ApolloError } from '@graphcommerce/graphql'
 import { Trans } from '@lingui/macro'
-import Button from '../Button'
-import MessageSnackbar from '../Snackbar/MessageSnackbar'
+import { Button } from '@mui/material'
+import { MessageSnackbar } from '../Snackbar/MessageSnackbar'
 import { MessageSnackbarImplProps } from '../Snackbar/MessageSnackbarImpl'
 
 export type ApolloErrorSnackbarProps = {

package/Blog/BlogAuthor/index.tsx

@@ -1,68 +1,62 @@
-import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../../Styles'
+import { Avatar, Box, Chip, SxProps } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      display: 'flex',
-      justifyContent: 'left',
-      maxWidth: 800,
-      margin: `0 auto`,
-      marginBottom: theme.spacings.md,
-    },
-    authorChip: {
-      height: responsiveVal(44, 66),
-      '& .MuiChip-label': {
-        paddingLeft: responsiveVal(10, 14),
-        paddingRight: responsiveVal(14, 18),
-      },
-      '& .MuiAvatar-root': {
-        width: responsiveVal(28, 44),
-        height: responsiveVal(28, 44),
-      },
-    },
-    date: {
-      lineHeight: 1.4,
-      color: theme.palette.text.disabled,
-    },
-    author: {
-      lineHeight: 1.4,
-    },
-  }),
-  { name: 'BlogAuthor' },
-)
-
-export type BlogAuthorProps = UseStyles<typeof useStyles> & {
+export type BlogAuthorProps = {
   author: string
   date: string
-  locale: string
+  sx?: SxProps
 }
 
-export default function BlogAuthor(props: BlogAuthorProps) {
-  const { author, date, locale } = props
-  const classes = useStyles()
+export function BlogAuthor(props: BlogAuthorProps) {
+  const { author, date, sx = [] } = props
 
-  const formatter = new Intl.DateTimeFormat(locale, {
-    month: 'long',
-    day: 'numeric',
-  })
+  const { locale } = useRouter()
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric' }),
+    [locale],
+  )
 
   return (
-    <div className={classes.wrapper}>
+    <Box
+      sx={[
+        {
+          display: 'flex',
+          justifyContent: 'left',
+          maxWidth: 800,
+          margin: `0 auto`,
+          marginBottom: (theme) => theme.spacings.md,
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <Chip
+        sx={{
+          height: responsiveVal(44, 66),
+          '& .MuiChip-label': {
+            paddingLeft: responsiveVal(10, 14),
+            paddingRight: responsiveVal(14, 18),
+          },
+          '& .MuiAvatar-root': {
+            width: responsiveVal(28, 44),
+            height: responsiveVal(28, 44),
+          },
+        }}
         variant='outlined'
         size='medium'
         avatar={<Avatar>{author.charAt(0).toUpperCase()}</Avatar>}
-        className={classes.authorChip}
         label={
           <section>
-            <div className={classes.author}>{author}</div>
-            <div className={classes.date}>{formatter.format(new Date(date))}</div>
+            <Box slot='Author' sx={{ lineHeight: 1.4 }}>
+              {author}
+            </Box>
+            <Box sx={(theme) => ({ lineHeight: 1.4, color: theme.palette.text.disabled })}>
+              {formatter.format(new Date(date))}
+            </Box>
           </section>
         }
       />
-    </div>
+    </Box>
   )
 }

package/Blog/BlogContent/index.tsx

@@ -1,24 +1,7 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
+import { styled } from '@mui/material'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      maxWidth: 800,
-      margin: '0 auto',
-      marginBottom: theme.spacings.sm,
-    },
-  }),
-  { name: 'BlogContent' },
-)
-
-export type BlogContentProps = {
-  content: React.ReactElement
-}
-
-export default function BlogContent(props: BlogContentProps) {
-  const { content } = props
-  const classes = useStyles()
-
-  return <div className={classes.wrapper}>{content}</div>
-}
+export const BlogContent = styled('div')(({ theme }) => ({
+  maxWidth: 800,
+  margin: '0 auto',
+  marginBottom: theme.spacings.sm,
+}))

package/Blog/BlogHeader/index.tsx

@@ -1,33 +1,36 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../../Styles'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    header: {
-      maxWidth: 800,
-      margin: `0 auto`,
-      marginBottom: theme.spacings.md,
-    },
-    asset: {
-      '& img': {
-        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      },
-    },
-  }),
-  { name: 'BlogHeader' },
-)
-
-export type BlogHeaderProps = UseStyles<typeof useStyles> & {
+export type BlogHeaderProps = {
+  sx?: SxProps<Theme>
   asset?: React.ReactNode
 }
 
-export default function BlogHeader(props: BlogHeaderProps) {
-  const { asset } = props
-  const classes = useStyles()
+const name = 'BlogHeader' as const
+const parts = ['header', 'asset'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function BlogHeader(props: BlogHeaderProps) {
+  const { asset, sx = [] } = props
 
   return (
-    <div className={classes.header}>{asset && <div className={classes.asset}>{asset}</div>}</div>
+    <Box
+      className={classes.header}
+      sx={[
+        (theme) => ({
+          maxWidth: 800,
+          margin: `0 auto`,
+          marginBottom: theme.spacings.md,
+          '& img': {
+            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {asset}
+    </Box>
   )
 }

package/Blog/BlogList/index.tsx

@@ -1,27 +1,9 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import Row from '../../Row'
-import { UseStyles } from '../../Styles'
+import { styled } from '@mui/material'
+import { Row } from '../../Row'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      gap: theme.spacings.md,
-      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 285)}, 1fr))`,
-    },
-  }),
-  { name: 'BlogList' },
-)
-
-export type BlogListProps = UseStyles<typeof useStyles> & {
-  children: React.ReactElement
-}
-
-export default function BlogList(props: BlogListProps) {
-  const { children } = props
-  const classes = useStyles()
-
-  return <Row className={classes.root}>{children}</Row>
-}
+export const BlogItemGrid = styled(Row, { name: 'BlogList' })(({ theme }) => ({
+  display: 'grid',
+  gap: theme.spacings.md,
+  gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 285)}, 1fr))`,
+}))

package/Blog/BlogListItem/index.tsx

@@ -1,58 +1,24 @@
-import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
-import { UseStyles } from '../../Styles'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    item: {
-      display: 'grid',
-      gridTemplateRows: `${responsiveVal(140, 220)} auto auto`,
-      alignContent: 'start',
-      color: theme.palette.text.primary,
-      gap: theme.spacings.sm,
-      marginBottom: theme.spacings.sm,
-    },
-    date: {
-      display: 'inline-block',
-      textDecoration: 'none',
-      color: theme.palette.text.secondary,
-    },
-    asset: {
-      display: 'grid',
-      overflow: 'hidden',
-      height: '100%',
-      width: '100%',
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      '& img': {
-        height: '100% !important',
-        objectFit: 'cover',
-      },
-      '& p': {
-        alignSelf: 'center',
-        justifySelf: 'center',
-      },
-      background: theme.palette.background.paper,
-    },
-    title: {
-      ...theme.typography.h3,
-    },
-  }),
-  { name: 'BlogListItem' },
-)
-
-export type BlogListItemProps = UseStyles<typeof useStyles> & {
+export type BlogListItemProps = {
   asset: React.ReactNode
   url: string
   date: string
   locale: string
   title: string
+  sx?: SxProps<Theme>
 }
 
-export default function BlogListItem(props: BlogListItemProps) {
-  const { asset, url, date, locale, title } = props
-  const classes = useStyles(props)
+const name = 'BlogListItem' as const
+const parts = ['item', 'date', 'asset', 'title'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function BlogListItem(props: BlogListItemProps) {
+  const { asset, url, date, locale, title, sx = [] } = props
 
   const formatter = new Intl.DateTimeFormat(locale, {
     year: 'numeric',
@@ -61,24 +27,69 @@ export default function BlogListItem(props: BlogListItemProps) {
   })
 
   return (
-    <div className={classes.item}>
+    <Box
+      className={classes.item}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gridTemplateRows: `${responsiveVal(140, 220)} auto auto`,
+          alignContent: 'start',
+          color: theme.palette.text.primary,
+          gap: theme.spacings.xxs,
+          marginBottom: theme.spacings.sm,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <PageLink href={`/${url}`} passHref>
-        <Link color='inherit'>
-          <div className={classes.asset}>{asset}</div>
+        <Link color='inherit' underline='hover'>
+          <Box
+            className={classes.asset}
+            sx={(theme) => ({
+              display: 'grid',
+              overflow: 'hidden',
+              height: '100%',
+              width: '100%',
+              borderRadius: responsiveVal(
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+              ),
+              '& img': {
+                height: '100% !important',
+                objectFit: 'cover',
+              },
+              '& p': {
+                alignSelf: 'center',
+                justifySelf: 'center',
+              },
+              background: theme.palette.background.paper,
+            })}
+          >
+            {asset}
+          </Box>
         </Link>
       </PageLink>
 
-      <time className={classes.date} dateTime={date}>
+      <Box
+        component='time'
+        className={classes.date}
+        dateTime={date}
+        sx={(theme) => ({
+          display: 'inline-block',
+          textDecoration: 'none',
+          color: theme.palette.text.secondary,
+        })}
+      >
         {formatter.format(new Date(date))}
-      </time>
+      </Box>
 
       <PageLink href={`/${url}`} passHref>
-        <Link href={`/${url}`} className={classes.title} color='inherit'>
-          <Typography component='h2' variant='h4' color='inherit'>
+        <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
+          <Typography component='h2' variant='h4'>
             {title}
           </Typography>
         </Link>
       </PageLink>
-    </div>
+    </Box>
   )
 }

package/Blog/BlogTags/BlogTag.tsx

@@ -0,0 +1,27 @@
+import { Chip, SxProps } from '@mui/material'
+import PageLink from 'next/link'
+
+type BlogTagsProps = {
+  url: string
+  title: string
+  sx?: SxProps
+}
+
+export function BlogTag(props: BlogTagsProps) {
+  const { url, title, sx = [] } = props
+  return (
+    <PageLink href={`/${url}`} passHref>
+      <Chip
+        label={title}
+        sx={[
+          {
+            marginRight: '8px',
+            borderRadius: '4px',
+            fontSize: '14px',
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    </PageLink>
+  )
+}

package/Blog/BlogTags/index.tsx

@@ -1,34 +1,9 @@
-import { Chip, makeStyles, Theme } from '@material-ui/core'
-import PageLink from 'next/link'
-import React from 'react'
+import { styled } from '@mui/material'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      maxWidth: 800,
-      margin: `0 auto`,
-      marginBottom: theme.spacings.sm,
-    },
-    tag: {
-      marginRight: 8,
-      borderRadius: 4,
-      fontSize: 14,
-    },
-  }),
-  { name: 'BlogTitle' },
-)
+export const BlogTags = styled('div')(({ theme }) => ({
+  maxWidth: 800,
+  margin: `0 auto`,
+  marginBottom: theme.spacings.sm,
+}))
 
-export default function BlogTitle(props) {
-  const { relatedPages } = props
-  const classes = useStyles()
-
-  return (
-    <div className={classes.wrapper}>
-      {relatedPages.map((page) => (
-        <PageLink key={page.url} href={`/${page.url}`} passHref>
-          <Chip label={page.title} className={classes.tag} />
-        </PageLink>
-      ))}
-    </div>
-  )
-}
+export * from './BlogTag'

package/Blog/BlogTitle/index.tsx

@@ -1,29 +1,15 @@
-import { makeStyles } from '@material-ui/core'
+import { Box } from '@mui/material'
 import React from 'react'
 import { LayoutTitle } from '../../Layout'
-import { UseStyles } from '../../Styles'
 
-const useStyles = makeStyles(
-  {
-    wrapper: {
-      maxWidth: 800,
-      margin: `0 auto`,
-    },
-  },
-  { name: 'BlogTitle' },
-)
+export type BlogTitleProps = Pick<React.ComponentProps<typeof Box>, 'sx' | 'children'>
 
-export type BlogTitleProps = UseStyles<typeof useStyles> & {
-  title: string
-}
-
-export default function BlogTitle(props: BlogTitleProps) {
-  const { title } = props
-  const classes = useStyles()
+export function BlogTitle(props: BlogTitleProps) {
+  const { sx = [], children } = props
 
   return (
-    <div className={classes.wrapper}>
-      <LayoutTitle variant='h1'>{title}</LayoutTitle>
-    </div>
+    <Box sx={[{ maxWidth: 800, margin: '0 auto' }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <LayoutTitle variant='h1'>{children}</LayoutTitle>
+    </Box>
   )
 }

package/Button/Button.tsx

@@ -0,0 +1,5 @@
+/* eslint-disable react/forbid-foreign-prop-types */
+import { LoadingButton as Button, LoadingButtonProps } from '@mui/lab'
+
+export type ButtonProps = LoadingButtonProps
+export { Button }