@graphcommerce/next-ui 3.25.2 → 4.0.1

package/Theme/themeDefaults.ts

@@ -0,0 +1,51 @@
+import { BreakpointsOptions, experimental_sx, SxProps, Theme, ThemeOptions } from '@mui/material'
+import { Shadows } from '@mui/material/styles/shadows'
+
+import { SetRequired } from 'type-fest'
+
+// https://material.io/design/environment/elevation.html#default-elevations
+
+const breakpoints: SetRequired<BreakpointsOptions, 'values'> = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1536,
+    xl: 1920,
+  },
+}
+
+const shadows: Shadows = [
+  /* 0 */ 'none',
+  /* 1 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 1.4px 1.8px -1.5px hsl(0deg 0% 0% / 0.09)`,
+  /* 2 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 2.6px 3.3px -1.5px hsl(0deg 0% 0% / 0.09)`,
+  /* 3 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 3.8px 4.8px -1.5px hsl(0deg 0% 0% / 0.09)`,
+  /* 4 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 1.7px 2.2px -0.7px hsl(0deg 0% 0% / 0.06),0px 5px 6.4px -1.5px hsl(0deg 0% 0% / 0.08)`,
+  /* 5 */ 'none',
+  /* 6 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.04),0px 2.3px 2.9px -0.7px hsl(0deg 0% 0% / 0.06),0px 7.6px 9.7px -1.5px hsl(0deg 0% 0% / 0.08)`,
+  /* 7 */ 'none',
+  /* 8 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 2.9px 3.7px -0.7px hsl(0deg 0% 0% / 0.07),0px 10px 12.8px -1.5px hsl(0deg 0% 0% / 0.1)`,
+  /* 9 */ 'none',
+  /* 10 */ 'none',
+  /* 11 */ 'none',
+  /* 12 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.06),0px 4.2px 5.4px -0.7px hsl(0deg 0% 0% / 0.09),0px 15px 19.1px -1.5px hsl(0deg 0% 0% / 0.11)`,
+  /* 13 */ 'none',
+  /* 14 */ 'none',
+  /* 15 */ 'none',
+  /* 16 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.5px 4.5px -0.5px hsl(0deg 0% 0% / 0.07),0px 8.6px 11px -1px hsl(0deg 0% 0% / 0.08),0px 20px 25.5px -1.5px hsl(0deg 0% 0% / 0.1)`,
+  /* 17 */ 'none',
+  /* 18 */ 'none',
+  /* 19 */ 'none',
+  /* 20 */ 'none',
+  /* 21 */ 'none',
+  /* 22 */ 'none',
+  /* 23 */ 'none',
+  /* 24 */ `0px 0px 1.5px hsl(0deg 0% 0% / 0.15),0px 0.5px 0.6px hsl(0deg 0% 0% / 0.05),0px 3.9px 5px -0.4px hsl(0deg 0% 0% / 0.07),0px 8.1px 10.3px -0.7px hsl(0deg 0% 0% / 0.08),0px 15.8px 20.1px -1.1px hsl(0deg 0% 0% / 0.1),0px 30px 38.3px -1.5px hsl(0deg 0% 0% / 0.11)`,
+]
+
+export const themeBaseDefaults = {
+  breakpoints,
+  shadows,
+}
+
+export const sx = (props: SxProps<Theme>) => experimental_sx<Theme>(props)

package/TimeAgo/index.tsx

@@ -3,7 +3,7 @@ export type TimeAgoProps = {
   locale?: string
 }
 
-export default function TimeAgo(props: TimeAgoProps) {
+export function TimeAgo(props: TimeAgoProps) {
   const { date, locale = 'en' } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60

package/ToggleButton/index.tsx

@@ -1,47 +1,24 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
+import { Button, ButtonProps } from '@mui/material'
 import React, { FormEvent } from 'react'
-import Button, { ButtonProps } from '../Button'
-import { UseStyles } from '../Styles'
+import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-type StyleProps = { selected?: boolean; color?: ButtonProps['color'] }
-
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    /* Styles applied to the root element. */
-    root: {
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      border: `1px solid ${theme.palette.divider}`,
-      '&$disabled': {
-        borderWidth: 2,
-      },
-      '&:hover': {},
-      '&$selected': {},
-    },
-    disabled: {},
-    selected: ({ color = 'default' }: StyleProps) => ({
-      border: `1px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
-      boxShadow: `inset 0 0 0 1px ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
-    }),
-    /* Styles applied to the `label` wrapper element. */
-    label: {},
-    sizeSmall: {},
-    sizeLarge: {
-      padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
-    },
-  }),
-  { name: 'ToggleButton' },
-)
-
 export type ToggleButtonProps = Omit<ButtonProps, 'onClick' | 'onChange'> & {
   selected?: boolean
   onClick?: (e: FormEvent<HTMLButtonElement>, v: any) => void
   onChange?: (e: FormEvent<HTMLButtonElement>, v: any) => void
-} & UseStyles<typeof useStyles>
+}
 
-const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
-  const { root, selected: selectedClass, sizeLarge, sizeSmall, ...classes } = useStyles(props)
+type OwnerState = Pick<ButtonProps, 'size' | 'disabled'> & { selected?: boolean }
+
+const compName = 'ToggleButton' as const
+const parts = ['root', 'button', 'helperText'] as const
+const { withState } = extendableComponent<OwnerState, typeof compName, typeof parts>(
+  compName,
+  parts,
+)
+
+export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
   const {
     children,
     className,
@@ -51,9 +28,11 @@ const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
     selected,
     size = 'medium',
     value,
-    color,
+    color = 'default',
+    sx = [],
     ...other
   } = props
+  const classes = withState({ size, selected, disabled })
 
   const handleChange = (event: FormEvent<HTMLButtonElement>) => onChange?.(event, value)
 
@@ -67,16 +46,7 @@ const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
 
   return (
     <Button
-      className={clsx(
-        root,
-        {
-          [classes.disabled]: disabled,
-          [selectedClass]: selected,
-          [sizeLarge]: size === 'large',
-          [sizeSmall]: size === 'small',
-        },
-        className,
-      )}
+      className={`${classes.root} ${className ?? ''}`}
       variant='outlined'
       disabled={disabled}
       ref={ref}
@@ -87,10 +57,34 @@ const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref) => {
       size={size}
       {...other}
       classes={classes}
+      sx={[
+        (theme) => ({
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          border: 1,
+          borderColor: 'divider',
+          bgcolor: 'background.paper',
+
+          '&.disabled': {
+            borderWidth: 2,
+          },
+
+          '&.selected': {
+            border: `1px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
+            boxShadow: `inset 0 0 0 1px ${
+              theme.palette[color]?.main ?? theme.palette.primary.main
+            }`,
+          },
+          ':not(&.sizeSmall)': {
+            padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
+          },
+          '&.sizeSmall': {
+            aspectRatio: `4/3`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {children}
     </Button>
   )
 })
-
-export default ToggleButton

package/ToggleButtonGroup/index.tsx

@@ -1,10 +1,7 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import { capitalize } from '@material-ui/core/utils'
-import { ToggleButtonGroupProps } from '@material-ui/lab'
-import clsx from 'clsx'
-import React, { PropsWithoutRef } from 'react'
+import { Box, ToggleButtonGroupProps as ToggleButtonGroupPropsBase } from '@mui/material'
+import React from 'react'
 import { isFragment } from 'react-is'
-import { UseStyles } from '../Styles'
+import { extendableComponent } from '../Styles'
 
 function isValueSelected(value: string, candidate: string | string[]) {
   if (candidate === undefined || value === undefined) return false
@@ -12,32 +9,15 @@ function isValueSelected(value: string, candidate: string | string[]) {
   return value === candidate
 }
 
-export type ToggleButtonPropsBase = Omit<PropsWithoutRef<ToggleButtonGroupProps>, 'size'> & {
-  required?: boolean
-  minWidth?: number
-}
+type OwnerState = Pick<ToggleButtonGroupPropsBase, 'orientation' | 'size'>
 
-export const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: ({ minWidth = 200 }: ToggleButtonPropsBase) => ({
-      display: 'grid',
-      gridTemplateColumns: `repeat(auto-fit, minmax(${minWidth}px, 1fr))`,
-      gap: `calc(${theme.spacings.xxs} * 2)`,
-    }),
-    vertical: {
-      gridAutoFlow: 'column',
-    },
-    grouped: {},
-    groupedHorizontal: {},
-    groupedVertical: {},
-  }),
-  { name: 'ToggleButtonGroup' },
-)
+const name = 'ToggleButtonGroup' as const
+const parts = ['root', 'button'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export type ToggleButtonProps = ToggleButtonPropsBase & UseStyles<typeof useStyles>
+export type ToggleButtonGroupProps = ToggleButtonGroupPropsBase & { required?: boolean }
 
-const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((props, ref) => {
-  const classes = useStyles(props)
+const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>((props, ref) => {
   const {
     children,
     className,
@@ -45,11 +25,15 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((p
     required = false,
     onChange,
     orientation = 'horizontal',
-    minWidth,
     value,
+    size = 'large',
+    sx = [],
     ...other
   } = props
 
+  const classes = withState({ orientation, size })
+
+  /* eslint-disable @typescript-eslint/no-unsafe-argument */
   const handleChange = (event, buttonValue) => {
     if (!onChange) return
 
@@ -72,9 +56,29 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((p
   }
 
   return (
-    <div
+    <Box
       role='group'
-      className={clsx(classes.root, { [classes.vertical]: orientation === 'vertical' }, className)}
+      className={`${classes.root} ${className ?? ''}`}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          rowGap: theme.spacings.xxs,
+          columnGap: theme.spacings.xs,
+          '&.orientationVertical': {
+            gridAutoFlow: 'column',
+          },
+          '&.sizeSmall.orientationHorizontal': {
+            gridTemplateColumns: `repeat(auto-fill, minmax(60px, 1fr))`,
+          },
+          '&.sizeMedium.orientationHorizontal': {
+            gridTemplateColumns: 'repeat(2, 1fr)',
+          },
+          '&.sizeLarge.orientationHorizontal': {
+            gridTemplateColumns: 'repeat(2, 1fr)',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       ref={ref}
       {...other}
     >
@@ -93,11 +97,7 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((p
         }
 
         return React.cloneElement(child, {
-          className: clsx(
-            classes.grouped,
-            classes[`grouped${capitalize(orientation)}`],
-            child.props.className,
-          ),
+          className: `${classes.button} ${child.props.className ?? ''}`,
           onChange: exclusive ? handleExclusiveChange : handleChange,
           selected:
             child.props.selected === undefined
@@ -105,8 +105,8 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonProps>((p
               : child.props.selected,
         })
       })}
-    </div>
+    </Box>
   )
 })
 
-export default ToggleButtonGroup
+export { ToggleButtonGroup }

package/UspList/UspListItem.tsx

@@ -1,55 +1,65 @@
-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: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      alignItems: 'center',
-      gridTemplateColumns: `${responsiveVal(32, 38)} auto`,
-      gap: theme.spacings.xs,
-      '& > p': {
-        ...theme.typography.body2,
-      },
-    },
-    icon: {
-      display: 'flex',
-
-      '& > * > img': {
-        display: 'block',
-      },
-    },
-    smallCopy: {
-      '& > p': {
-        ...theme.typography.body2,
-      },
-    },
-    smallIcons: {
-      gridTemplateColumns: `${responsiveVal(10, 14)} auto`,
-      gap: theme.spacings.xxs,
-    },
-  }),
-  { name: 'UspListItem' },
-)
-
-export type UspListItemProps = UseStyles<typeof useStyles> & {
+export type UspListItemProps = {
   text: React.ReactNode
   icon?: React.ReactNode
-  size?: string
-}
+  sx?: SxProps<Theme>
+} & OwnerState
+
+type OwnerState = { size?: 'small' | 'medium' }
+const name = 'UspListItem' as const
+const parts = ['root', 'icon', 'text'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function UspListItem(props: UspListItemProps) {
-  const { text, icon, size = 'normal' } = props
-  const classes = useStyles()
+export function UspListItem(props: UspListItemProps) {
+  const { text, icon, size = 'medium', sx = [] } = props
+  const classes = withState({ size })
 
   return (
-    <li className={clsx(classes.root, size === 'small' && classes.smallIcons)}>
-      <div className={classes.icon}>{icon}</div>
-      <div className={clsx(size === 'small' && classes.smallCopy)}>{text}</div>
-    </li>
+    <Box
+      component='li'
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gridAutoFlow: 'column',
+          alignItems: 'center',
+          gridTemplateColumns: `${responsiveVal(32, 38)} auto`,
+          gap: theme.spacings.xs,
+          '& > p': {
+            typography: 'body2',
+          },
+          '&.sizeSmall': {
+            gridTemplateColumns: `${responsiveVal(10, 14)} auto`,
+            gap: theme.spacings.xxs,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={classes.icon}
+        sx={{
+          display: 'flex',
+          '& > * > img': {
+            display: 'block',
+          },
+        }}
+      >
+        {icon}
+      </Box>
+      <Box
+        className={classes.text}
+        sx={{
+          '&.sizeSmall > p': {
+            typography: 'body2',
+          },
+        }}
+      >
+        {text}
+      </Box>
+    </Box>
   )
 }

package/UspList/index.tsx

@@ -1,33 +1,36 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-import { UseStyles } from '../Styles'
+import { Box } from '@mui/material'
+import { extendableComponent } from '../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      listStyleType: 'none',
-      padding: 0,
-      margin: 0,
-      display: 'grid',
-      alignContent: 'start',
-      rowGap: theme.spacings.xs,
-    },
-    small: {
-      rowGap: 3,
-    },
-  }),
-  { name: 'UspList' },
-)
-
-export type UspListProps = UseStyles<typeof useStyles> & {
+export type UspListProps = OwnerState & {
   children: React.ReactNode
-  size?: 'normal' | 'small'
 }
 
-export default function UspList(props: UspListProps) {
+type OwnerState = { size?: 'small' | 'medium' }
+const name = 'UspList' as const
+const parts = ['root'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function UspList(props: UspListProps) {
   const { children, size } = props
-  const classes = useStyles()
+  const classes = withState({ size })
 
-  return <ul className={clsx(classes.root, size === 'small' && classes.small)}>{children}</ul>
+  return (
+    <Box
+      component='ul'
+      className={classes.root}
+      sx={(theme) => ({
+        listStyleType: 'none',
+        padding: 0,
+        margin: 0,
+        display: 'grid',
+        alignContent: 'start',
+        rowGap: theme.spacings.xs,
+        '&.sizeSmall': {
+          rowGap: '3px',
+        },
+      })}
+    >
+      {children}
+    </Box>
+  )
 }

package/docs/building-components.mdx

@@ -0,0 +1,3 @@
+# Building components
+
+If you are looking to style components, please take a look at.

package/docs/components/ComponentBasic.tsx

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material'
+import React from 'react'
+
+// ---- Root component ----
+
+// We're creating a new styled('div') component and apply our styles to it.
+const Root = styled('div')(({ theme }) => ({
+  padding: '3px',
+  display: 'flex',
+  color: theme.palette.text.primary,
+}))
+
+// ---- MyComponent component ----
+
+// Props of the component we are writing
+export type MyComponentProps = { children: React.ReactNode }
+
+export function MyComponent(props: MyComponentProps) {
+  const { children } = props
+  return (
+    <Root as='span'>
+      My Component
+      {children}
+    </Root>
+  )
+}

package/docs/components/ComponentChild.tsx

@@ -0,0 +1,48 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { styled } from '@mui/material'
+import { ComponentProps } from 'react'
+
+// ---- Setup ----
+
+// To be able to select children from the consuming side, we define the classes.
+// Minimal utility to convert the classes to selectors. Hover over `selectors` to see what it means.
+const componentName = 'MyComponent' as const
+const { classes, selectors } = extendableComponent(componentName, ['root', 'child'] as const)
+
+// ---- Root component ----
+
+// We're creating a new styled('div') component and apply our styles to it.
+const Root = styled('div', {
+  name: componentName,
+  target: classes.root,
+})(({ theme }) => ({
+  display: 'flex',
+  color: theme.palette.text.primary,
+}))
+
+// ---- Child component ----
+
+const Child = styled('div', {
+  name: componentName,
+  target: classes.child,
+})(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  width: 100,
+  height: 100,
+}))
+
+// ---- MyComponent component ----
+
+// Props of the component we are writing
+export type MyComponentProps = Pick<ComponentProps<typeof Root>, 'sx' | 'children'>
+
+export function MyComponent(props: MyComponentProps) {
+  const { sx, children } = props
+  return (
+    <Root as='span' sx={sx}>
+      My Component
+      <Child>{children}</Child>
+    </Root>
+  )
+}
+MyComponent.selectors = selectors

package/docs/components/ComponentChildVariant.tsx

@@ -0,0 +1,54 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { styled } from '@mui/material'
+import { ComponentProps } from 'react'
+
+// ---- Setup ----
+
+// To be able to select children from the consuming side, we define the classes.
+// Minimal utility to convert the classes to selectors. Hover over `selectors` to see what it means.
+const componentName = 'MyComponent' as const
+const { classes, selectors } = extendableComponent(componentName, ['root', 'child'] as const)
+
+// Props that are used in our styled elements to render different CSS
+type MyComponentStyleProps = { variant?: 'cool' | 'supercool' }
+
+// ---- Root component ----
+
+// We're creating a new styled('div') component and apply our styles to it.
+const Root = styled('div', {
+  name: componentName,
+  target: classes.root,
+})<MyComponentStyleProps>(({ theme }) => ({
+  // Styles are added
+  display: 'flex',
+  color: theme.palette.text.primary,
+}))
+
+// ---- Child component ----
+
+const Child = styled('div', {
+  name: componentName,
+  target: classes.child, // Mandatory for children, adds a class name `MyComponent-child` so it can be styled from the outside.
+})<MyComponentStyleProps>(({ theme, variant }) => ({
+  backgroundColor: theme.palette.primary.main,
+  width: 100,
+  height: 100,
+  fontSize: variant === 'supercool' ? 'large' : 'normal',
+}))
+
+// ---- MyComponent component ----
+
+// Props of the component we are writing
+export type MyComponentProps = Pick<ComponentProps<typeof Root>, 'sx' | 'children'> &
+  MyComponentStyleProps
+
+export function MyComponent(props: MyComponentProps) {
+  const { sx, children, variant } = props
+  return (
+    <Root as='span' sx={sx} variant={variant}>
+      My Component <Child variant={variant}>{children}</Child>
+    </Root>
+  )
+}
+
+MyComponent.selectors = selectors