@graphcommerce/next-ui 3.25.1 → 4.0.0

package/Styles/breakpointVal.tsx

@@ -8,15 +8,21 @@ export function breakpointVal(
   const breakpoints = Object.values(breakpointsObject)
   const spread = breakpoints[breakpoints.length - 1] - minSize
 
-  return Object.fromEntries(
-    breakpoints.map((breakpoint, index) => {
-      // Get the size between this breakpoint and the previous breakpoint
-      const between = (breakpoint + (breakpoints[index + 1] ?? breakpoint)) / 2
-      // Calculate the size of the value
-      const size = Math.max(min, ((between - minSize) / spread) * (max - min) + min)
-      const value = `${Math.round(size * 100) / 100}px`
+  const entries = {}
 
-      return [`@media (min-width: ${breakpoint}px )`, { [property]: value }]
-    }),
-  )
+  breakpoints.forEach((breakpoint, index) => {
+    // Get the size between this breakpoint and the previous breakpoint
+    const between = (breakpoint + (breakpoints[index + 1] ?? breakpoint)) / 2
+    // Calculate the size of the value
+    const size = Math.max(min, ((between - minSize) / spread) * (max - min) + min)
+    const value = `${Math.round(size * 100) / 100}px`
+
+    if (breakpoint) {
+      entries[`@media (min-width: ${breakpoint}px )`] = { [property]: value }
+    } else {
+      entries[property] = value
+    }
+  })
+
+  return entries
 }

package/Styles/extendableComponent.ts

@@ -0,0 +1,70 @@
+import { capitalize, Interpolation, Theme } from '@mui/material'
+import React from 'react'
+
+export type ExtendableComponent<StyleProps extends Record<string, unknown>> = {
+  defaultProps?: Partial<StyleProps>
+  variants?: { props: Partial<StyleProps>; style: Interpolation<{ theme: Theme }> }[]
+}
+
+export function slotClasses<Name extends string, ClassNames extends ReadonlyArray<string>>(
+  name: Name,
+  slotNames: ClassNames,
+) {
+  return Object.fromEntries(slotNames.map((slot) => [slot, `${name}-${slot}`])) as {
+    [P in ClassNames[number]]: `${Name}-${P}`
+  }
+}
+
+/** Maps incoming classes to a selectors that can be used to extend the component */
+export const partselectorsMap = <O extends Record<string, string>>(
+  obj: O,
+): {
+  [P in keyof O]: `& .${O[P]}`
+} => {
+  const mapped = Object.entries(obj).map(([target, className]) => [target, `& .${className}`])
+  return Object.fromEntries(mapped)
+}
+
+/**
+ * Utility function to:
+ *
+ * - Define parts
+ * - Generate state css classes.
+ */
+export function extendableComponent<
+  ComponentStyleProps extends Record<string, boolean | string | number | undefined>,
+  Name extends string = string,
+  ClassNames extends ReadonlyArray<string> = ReadonlyArray<string>,
+>(componentName: Name, slotNames: ClassNames) {
+  const classes = slotClasses(componentName, slotNames)
+  const partselectors = partselectorsMap(classes)
+
+  const withState = (state: ComponentStyleProps) => {
+    const stateClas = Object.fromEntries(
+      Object.entries<string>(classes).map(([slot, className]) => {
+        const mapped = Object.entries(state).map(([key, value]) => {
+          if (typeof value === 'boolean' && value === true) return key
+          if (typeof value === 'string' && value.length > 0) return `${key}${capitalize(value)}`
+          if (typeof value === 'number' && value > 0) return `${key}${value}`
+          return ''
+        })
+
+        if (className) mapped.unshift(className)
+        return [slot, mapped.filter(Boolean).join(' ')]
+      }),
+    ) as {
+      [P in ClassNames[number]]: `${Name}-${P} ${string}`
+    }
+
+    return stateClas
+  }
+
+  return {
+    classes,
+    selectors: {
+      // ...stateSelectors,
+      ...partselectors,
+    },
+    withState,
+  }
+}

package/Styles/index.tsx

@@ -1,8 +1,15 @@
+/**
+ * Consider moving to the `sx` prop with `selectors`
+ *
+ * @deprecated
+ */
 export type UseStyles<T extends (...args: never[]) => unknown> = {
-  classes?: Partial<ReturnType<T>>
+  classes?: Partial<ReturnType<T>['classes']>
 }
 
 export * from './breakpointVal'
+export * from './EmotionProvider'
+export * from './extendableComponent'
 export * from './responsiveVal'
-export * from './classesPicker'
+export * from './withEmotionCache'
 export * from './withTheme'

package/Styles/withEmotionCache.tsx

@@ -0,0 +1,36 @@
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import createEmotionServer from '@emotion/server/create-instance'
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import type NextDocument from 'next/document'
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import type { DocumentContext, DocumentInitialProps } from 'next/document'
+import { createMuiCache } from './EmotionProvider'
+
+export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
+
+export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
+  return class DocumentWithEmotionCache extends Document {
+    static async getInitialProps(ctx: DocumentContext) {
+      const emotionServer = createEmotionServer(createMuiCache())
+      const initialProps = await Document.getInitialProps(ctx)
+
+      const emotionStyleTags = emotionServer
+        .extractCriticalToChunks(initialProps.html)
+        .styles.filter(({ css }) => css !== '')
+        .map((style) => (
+          <style
+            data-emotion={`${style.key} ${style.ids.join(' ')}`}
+            key={style.key}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style.css }}
+          />
+        ))
+
+      const props: DocumentInitialProps & EmotionCacheProps = {
+        ...initialProps,
+        emotionStyleTags,
+      }
+      return props
+    }
+  }
+}

package/Styles/withTheme.tsx

@@ -1,17 +1,4 @@
-import { makeStyles, Theme, ThemeProvider } from '@material-ui/core'
-
-const useStyles = makeStyles(
-  {
-    // These theme specific styles are copied from
-    // https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/CssBaseline/CssBaseline.js#L18-L24
-    root: (theme: Theme) => ({
-      color: theme.palette.text.primary,
-      ...theme.typography.body1,
-      backgroundColor: theme.palette.background.default,
-    }),
-  },
-  { name: 'Theme' },
-)
+import { css, Theme, ThemeProvider } from '@mui/material'
 
 /**
  * It will provide a theme for the underlying tree and will set the color/font and backgroundColor
@@ -38,14 +25,18 @@ const useStyles = makeStyles(
  * export default withTheme(MyPage, darkTheme)
  * ```
  */
-export function withTheme<P extends { className?: string }>(Component: React.FC<P>, theme: Theme) {
-  return (props: P) => {
-    const classes = useStyles(theme)
-
-    return (
-      <ThemeProvider theme={theme}>
-        <Component {...props} className={classes.root} />
-      </ThemeProvider>
-    )
-  }
+export function withTheme(Component: React.FC<{ className?: string }>, theme: Theme) {
+  return (props: Record<string, unknown>) => (
+    <ThemeProvider theme={theme}>
+      <Component
+        {...props}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        css={css({
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.background.default,
+          ...(theme.typography.body1 as any),
+        })}
+      />
+    </ThemeProvider>
+  )
 }

package/SvgIcon/SvgIcon.tsx

@@ -0,0 +1,60 @@
+import { ImageProps, srcToString } from '@graphcommerce/image'
+import { Box, SxProps, Theme } from '@mui/material'
+import { ComponentProps, forwardRef } from 'react'
+import { ExtendableComponent } from '../Styles/extendableComponent'
+import { responsiveVal as rv } from '../Styles/responsiveVal'
+
+const name = 'SvgIcon'
+type StyleProps = {
+  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
+  fillIcon?: boolean
+}
+
+// Expose the component to be exendable in your theme.components
+declare module '@mui/material/styles/components' {
+  interface Components {
+    SvgIcon?: ExtendableComponent<StyleProps>
+  }
+}
+
+export type SvgIconProps = StyleProps &
+  Pick<ImageProps, 'src'> &
+  Pick<ComponentProps<'svg'>, 'className'> & { sx?: SxProps<Theme> }
+
+/** SvgIcon component is supposed to be used in combination with `icons` */
+export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
+  const { className, src, size, fillIcon, sx = [], ...svgProps } = props
+
+  return (
+    <Box
+      component='svg'
+      ref={ref}
+      aria-hidden='true'
+      className={`${name} ${className ?? ''}`}
+      {...svgProps}
+      sx={[
+        {
+          userSelect: 'none',
+          width: '1.3em',
+          height: '1.3em',
+          strokeWidth: 1.8,
+          strokeLinecap: 'square',
+          strokeLinejoin: 'miter',
+          fill: 'none',
+          stroke: 'currentColor',
+        },
+        size === 'xs' && { width: rv(11, 13), height: rv(11, 13), strokeWidth: 2.1 },
+        size === 'small' && { width: rv(12, 16), height: rv(12, 16), strokeWidth: 2.1 },
+        size === 'medium' && { width: rv(22, 24), height: rv(22, 24), strokeWidth: 1.8 },
+        size === 'large' && { width: rv(24, 28), height: rv(24, 28), strokeWidth: 1.4 },
+        size === 'xl' && { width: rv(38, 62), height: rv(38, 62), strokeWidth: 1.1 },
+        size === 'xxl' && { width: rv(96, 148), height: rv(96, 148), strokeWidth: 0.8 },
+        fillIcon === true && { fill: 'currentColor', stroke: `none` },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <use href={`${srcToString(src)}#icon`} />
+    </Box>
+  )
+})
+SvgIcon.displayName = 'SvgIcon'

package/TextInputNumber/index.tsx

@@ -1,42 +1,19 @@
 import {
   IconButton,
   IconButtonProps,
-  makeStyles,
   OutlinedTextFieldProps,
+  SxProps,
   TextField,
   TextFieldProps,
   useForkRef,
-} from '@material-ui/core'
-import clsx from 'clsx'
-import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
-import { UseStyles } from '../Styles'
+  Theme,
+} from '@mui/material'
+import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
+import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconMin, iconPlus } from '../icons'
 
-const useStyles = makeStyles(
-  {
-    quantity: {
-      width: responsiveVal(80, 120),
-      backgroundColor: 'inherit',
-    },
-    quantityInput: {
-      textAlign: 'center',
-      '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-        appearance: 'none',
-      },
-    },
-    button: {},
-    adornedEnd: {
-      paddingRight: responsiveVal(7, 14),
-    },
-    adornedStart: {
-      paddingLeft: responsiveVal(7, 14),
-    },
-  },
-  { name: 'TextInputNumber' },
-)
-
 export type IconButtonPropsOmit = Omit<
   IconButtonProps,
   'aria-label' | 'size' | 'onMouseDown' | 'onMouseUp' | 'disabled'
@@ -45,15 +22,30 @@ export type IconButtonPropsOmit = Omit<
 export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
   DownProps?: IconButtonPropsOmit
   UpProps?: IconButtonPropsOmit
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
 
 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)
+type OwnerState = { size?: 'small' | 'medium' }
+const name = 'TextInputNumber' as const
+const parts = ['quantity', 'quantityInput', 'button'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function TextInputNumber(props: TextInputNumberProps) {
+  const {
+    DownProps = {},
+    UpProps = {},
+    inputProps = {},
+    inputRef,
+    sx = [],
+    ...textFieldProps
+  } = props
+
+  const classes = withState({})
+
   const ref = useRef<HTMLInputElement>(null)
   const forkRef = useForkRef<HTMLInputElement>(ref, inputRef as Ref<HTMLInputElement>)
 
@@ -98,21 +90,20 @@ export default function TextInputNumber(props: TextInputNumberProps) {
     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)}
+      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      sx={[
+        {
+          width: responsiveVal(80, 120),
+          backgroundColor: 'inherit',
+        },
+
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       autoComplete='off'
       label={' '}
       id='quantity-input'
@@ -127,12 +118,12 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             onPointerDown={() => setDirection('down')}
             onPointerUp={stop}
             // disabled={textFieldProps.disabled || disabled === 'min'}
-            tabIndex='-1'
+            tabIndex={-1}
             color='inherit'
-            className={clsx(classes.button, DownProps.className)}
             {...DownProps}
+            className={`${classes.button} ${DownProps.className ?? ''}`}
           >
-            {DownProps.children ?? <SvgImageSimple src={iconMin} size='small' />}
+            {DownProps.children ?? <SvgIcon src={iconMin} size='small' />}
           </IconButton>
         ),
         endAdornment: (
@@ -143,12 +134,12 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             onPointerDown={() => setDirection('up')}
             onPointerUp={() => setDirection(null)}
             // disabled={textFieldProps.disabled || disabled === 'max'}
-            tabIndex='-1'
+            tabIndex={-1}
             color='inherit'
-            className={clsx(classes.button, UpProps.className)}
             {...UpProps}
+            className={`${classes.button} ${UpProps.className ?? ''}`}
           >
-            {UpProps.children ?? <SvgImageSimple src={iconPlus} size='small' />}
+            {UpProps.children ?? <SvgIcon src={iconPlus} size='small' />}
           </IconButton>
         ),
       }}
@@ -158,7 +149,15 @@ export default function TextInputNumber(props: TextInputNumberProps) {
       }}
       inputProps={{
         ...inputProps,
-        className: clsx(inputProps?.className, classes.quantityInput),
+        sx: [
+          {
+            textAlign: 'center',
+            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+              appearance: 'none',
+            },
+          },
+        ],
+        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
       }}
     />
   )

package/Theme/MuiButton.ts

@@ -0,0 +1,128 @@
+import { ComponentsVariants } from '@mui/material'
+import { responsiveVal } from '../Styles/responsiveVal'
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsVariantOverrides {
+    pill: true
+  }
+}
+
+type ButtonVariants = NonNullable<ComponentsVariants['MuiButton']>
+
+export const MuiButtonResponsive: ButtonVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      textTransform: 'none',
+      fontWeight: 500,
+    }),
+  },
+  {
+    props: { size: 'small' },
+    style: ({ theme }) => ({
+      ...theme.typography.body2,
+      padding: `${responsiveVal(3, 5)} ${responsiveVal(9, 15)}`,
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
+    }),
+  },
+  {
+    props: { size: 'medium' },
+    style: ({ theme }) => ({
+      ...theme.typography.body1,
+      padding: `${responsiveVal(8, 11)} ${responsiveVal(16, 24)}`,
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
+    }),
+  },
+  {
+    props: { size: 'large' },
+    style: ({ theme }) => ({
+      ...theme.typography.subtitle1,
+      fontWeight: theme.typography.fontWeightBold,
+      padding: `${responsiveVal(10, 15)} ${responsiveVal(30, 60)}`,
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(30, 60) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(30, 60) },
+    }),
+  },
+  {
+    props: { variant: 'text', size: 'small' },
+    style: {
+      padding: '3px 9px',
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: 3 },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: 9 },
+    },
+  },
+  {
+    props: { variant: 'text', size: 'medium' },
+    style: {
+      padding: `${responsiveVal(3, 5)} ${responsiveVal(9, 15)}`,
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
+    },
+  },
+  {
+    props: { variant: 'text', size: 'large' },
+    style: {
+      padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+      '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
+      '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
+    },
+  },
+]
+
+export const MuiButtonPill: ButtonVariants = [
+  {
+    props: { variant: 'pill' },
+    style: { borderRadius: '99em' },
+  },
+  {
+    props: { variant: 'pill', size: 'small' },
+    style: ({ theme }) => ({
+      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[2] },
+    }),
+  },
+  {
+    props: { variant: 'pill', size: 'medium' },
+    style: ({ theme }) => ({
+      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[4] },
+    }),
+  },
+  {
+    props: { variant: 'pill', size: 'large' },
+    style: ({ theme }) => ({
+      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[6] },
+    }),
+  },
+  {
+    props: { variant: 'pill', disableElevation: true },
+    style: { boxShadow: 'none' },
+  },
+  {
+    props: { variant: 'pill', color: 'primary' },
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.primary.dark },
+    }),
+  },
+  {
+    props: { variant: 'pill', color: 'secondary' },
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.secondary.dark },
+    }),
+  },
+  {
+    props: { variant: 'pill', color: 'inherit' },
+    style: ({ theme }) => ({ backgroundColor: theme.palette.background.paper }),
+  },
+  {
+    props: { variant: 'pill', disabled: true },
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.action.disabledBackground,
+      color: theme.palette.action.disabled,
+    }),
+  },
+]

package/Theme/MuiSlider.ts

@@ -0,0 +1,28 @@
+import { Components, Theme } from '@mui/material'
+
+/**
+ * Not yet possible to define a size="large" for the Slider due to a limitation in Material-UI
+ * https://github.com/mui-org/material-ui/issues/27130#issuecomment-1006425575
+ *
+ * If that has been fixed most of the styles can be removed here:
+ * packages/magento-product/components/ProductListFilters/FilterRangeType.tsx
+ */
+
+// declare module '@mui/material/Slider' {
+//   interface SliderPropsSizeOverrides {
+//     large: true
+//   }
+// }
+
+export const MuiSlider = (theme: Theme): Components['MuiSlider'] => ({
+  // variants: [
+  //   {
+  //     props: { size: 'large' },
+  //     style: {
+  //       '& .MuiSlider-rail': { height: 4, borderRadius: '2px' },
+  //       '& .MuiSlider-track': { height: 4 },
+  //       '& .MuiSlider-thumb': { width: 28, height: 28 },
+  //     },
+  //   },
+  // ],
+})

package/Theme/MuiSnackbar.ts

@@ -0,0 +1,31 @@
+import { ComponentsVariants } from '@mui/material'
+
+type SnackbarVariants = NonNullable<ComponentsVariants['MuiSnackbar']>
+
+/**
+ * The current implementation of the MuiSnackbar will only be 50% wide if no width is specificed,
+ * this fixes that.
+ */
+export const MuiSnackbar: SnackbarVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      '&.MuiSnackbar-anchorOriginBottomCenter, &.MuiSnackbar-anchorOriginBottomLeft, &.MuiSnackbar-anchorOriginBottomRight':
+        {
+          [theme.breakpoints.down('md')]: {
+            bottom: 0,
+            left: 0,
+            right: 0,
+          },
+          [theme.breakpoints.up('md')]: {
+            bottom: theme.page.vertical,
+          },
+        },
+      '&.MuiSnackbar-anchorOriginBottomCenter': {
+        left: 0,
+        right: 0,
+        transform: 'unset',
+      },
+    }),
+  },
+]

package/Theme/{types.ts → createTheme.ts}

@@ -1,12 +1,12 @@
 export {}
 
-declare module '@material-ui/core/styles/createPalette' {
+declare module '@mui/material/styles/createPalette' {
   interface TypeBackground {
     image: string
   }
 }
 
-declare module '@material-ui/core/styles/createTheme' {
+declare module '@mui/material/styles/createTheme' {
   interface ThemeOptions {
     spacings: {
       xxs: string
@@ -27,6 +27,9 @@ declare module '@material-ui/core/styles/createTheme' {
       appBarHeightMd: string
       appBarInnerHeightMd: string
     }
+
+    // todo: should be cleaned up to be compatible with the default mui-styles
+    shape: { borderRadius: number }
   }
   interface Theme {
     spacings: {
@@ -48,5 +51,8 @@ declare module '@material-ui/core/styles/createTheme' {
       appBarHeightMd: string
       appBarInnerHeightMd: string
     }
+
+    // todo: should be cleaned up to be compatible with the default mui-styles
+    shape: { borderRadius: number }
   }
 }

package/Theme/index.ts

@@ -0,0 +1,4 @@
+export * from './MuiSlider'
+export * from './MuiButton'
+export * from './MuiSnackbar'
+export * from './themeDefaults'