@graphcommerce/next-ui 4.0.1 → 4.1.2

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # Change Log
 
+## 4.1.2
+
+### Patch Changes
+
+- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)
+  Thanks [@paales](https://github.com/paales)! - made packages public
+
+* [#1278](https://github.com/ho-nl/m2-pwa/pull/1278)
+  [`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20)
+  Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Upgraded dependencies to the latest version
+
+- [#1281](https://github.com/ho-nl/m2-pwa/pull/1281)
+  [`3a719c88c`](https://github.com/ho-nl/m2-pwa/commit/3a719c88cad1eab58602de28c41adc0fc4827e1d)
+  Thanks [@paales](https://github.com/paales)! - Make sure we're able to style the backdrop and the
+  regular overlay for LayoutOverlay
+
+* [#1284](https://github.com/ho-nl/m2-pwa/pull/1284)
+  [`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14)
+  Thanks [@paales](https://github.com/paales)! - SvgIcon is now more extenable and flexible:
+
+  - It will automatically calculate the stroke-width of the SVG based on the rendered size, allowing
+    for a more flexible use for icons.
+
+  - Make SvgIcon themable in your own Theme.
+
+  - Create overrides for components that will be used throughout the app.
+
+* Updated dependencies
+  [[`4bb963d75`](https://github.com/ho-nl/m2-pwa/commit/4bb963d7595b5ce6e3a4924cc2e3e8b0210cdcd6),
+  [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96),
+  [`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20),
+  [`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14)]:
+  - @graphcommerce/framer-next-pages@3.1.0
+  - @graphcommerce/framer-scroller@2.0.3
+  - @graphcommerce/framer-utils@3.0.3
+  - @graphcommerce/image@3.1.0
+
+## 4.1.1
+
+### Patch Changes
+
+- [#1274](https://github.com/ho-nl/m2-pwa/pull/1274)
+  [`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7)
+  Thanks [@paales](https://github.com/paales)! - Moved `ApolloErrorAlert`, `ApolloErrorFullPage` and
+  `ApolloErrorSnackbar` to the ecommerce-ui package.
+
+  Created `ComposedSubmitButton` and `ComposedSubmitLinkOrButton` to reduce complexity from
+  `magento-graphcms` example.
+
+  Removed dependency an `@graphcommerce/react-hook-form` from `magento-graphcms` example.
+
+  Added dependency `@graphcommerce/ecommerce-ui` from `magento-graphcms` example.
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
+  Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
+  `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
+  duplicate packages in the node_modules folders.
+
+- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b)
+  Thanks [@paales](https://github.com/paales)! - CartFab positioning was incorrect
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to
+  [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
+  implementing
+  [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
+  soon.
+
+  This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
+  frontend to be able to revalidate pages manually.
+
+* Updated dependencies
+  [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
+  - @graphcommerce/framer-next-pages@3.0.2
+  - @graphcommerce/framer-scroller@2.0.2
+  - @graphcommerce/framer-utils@3.0.2
+  - @graphcommerce/image@3.0.2
+
+## 4.1.0
+
+### Minor Changes
+
+- [#1273](https://github.com/ho-nl/m2-pwa/pull/1273)
+  [`8c4e4f7cd`](https://github.com/ho-nl/m2-pwa/commit/8c4e4f7cdd2fa4252788fbc9889d0803bba20eef)
+  Thanks [@paales](https://github.com/paales)! - Added darkmode support! ☀️🌑, adds a toggle to the
+  hamburger menu.
+
+### Patch Changes
+
+- [#1271](https://github.com/ho-nl/m2-pwa/pull/1271)
+  [`e0008d60d`](https://github.com/ho-nl/m2-pwa/commit/e0008d60d712603219129dd411d1985bf1ebbed1)
+  Thanks [@paales](https://github.com/paales)! - make sure the CartFab and MenuFab are stylable with
+  sx
+
+* [#1271](https://github.com/ho-nl/m2-pwa/pull/1271)
+  [`5d9f8320f`](https://github.com/ho-nl/m2-pwa/commit/5d9f8320ff9621d7357fbe01319ab0cafdf9095d)
+  Thanks [@paales](https://github.com/paales)! - prevent layout from breaking when url has params
+
+- [#1271](https://github.com/ho-nl/m2-pwa/pull/1271)
+  [`5082b8c81`](https://github.com/ho-nl/m2-pwa/commit/5082b8c8191cc3e0b4627678bf837af093513d57)
+  Thanks [@paales](https://github.com/paales)! - Prevent showing back button on homepage when query
+  parameter is present
+
 ## 4.0.1
 
 ### Patch Changes

package/Form/Form.tsx

@@ -30,6 +30,8 @@ const styles = ({ theme, contained = false, background }: { theme: Theme } & For
     },
   ])
 
-export const Form = styled('form')<FormStyleProps>(styles)
+export const Form = styled('form', {
+  shouldForwardProp: (prop) => prop !== 'contained',
+})<FormStyleProps>(styles)
 
 export const FormDiv = styled('div')<FormStyleProps>(styles)

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,5 +1,4 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
-import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import { t } from '@lingui/macro'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -10,31 +9,31 @@ import { iconChevronLeft } from '../../icons'
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
 
 export function useShowBack() {
-  const router = useRouter()
+  const path = useRouter().asPath.split('?')[0]
   const up = useUp()
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
-  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+  const canClickBack = backSteps > 0 && path !== prevUp?.href
 
   if (canClickBack) return true
-  if (up?.href && up.href !== router.asPath) return true
+  if (up?.href && up.href !== path) return true
   return false
 }
 
 export default function LayoutHeaderBack(props: BackProps) {
   const router = useRouter()
+  const path = router.asPath.split('?')[0]
   const up = useUp()
-  const prevRouter = usePrevPageRouter()
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
   const backIcon = <SvgIcon src={iconChevronLeft} size='medium' />
-  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+  const canClickBack = backSteps > 0 && path !== prevUp?.href
 
   let label = t`Back`
-  if (up?.href === prevRouter?.asPath && up?.title) label = up.title
-  if (prevUp?.href === prevRouter?.asPath && prevUp?.title) label = prevUp.title
+  if (up?.href === path && up?.title) label = up.title
+  if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 
   if (canClickBack) {
     return (
@@ -51,7 +50,7 @@ export default function LayoutHeaderBack(props: BackProps) {
     )
   }
 
-  if (up?.href && up.href !== router.asPath)
+  if (up?.href && up.href !== path)
     return (
       <PageLink href={up.href} passHref>
         <LinkOrButton

package/LayoutDefault/components/LayoutDefault.tsx

@@ -97,7 +97,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',
                 marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${fabIconSize} / 2))`,
-                top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - ${responsiveVal(
+                  42 / 2,
+                  56 / 2,
+                )})`,
               },
               [theme.breakpoints.down('md')]: {
                 position: 'fixed',

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -25,6 +25,7 @@ export type LayoutOverlayBaseProps = {
   children?: React.ReactNode
   className?: string
   sx?: SxProps<Theme>
+  sxBackdrop?: SxProps<Theme>
 } & StyleProps
 
 enum OverlayPosition {
@@ -50,6 +51,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     justifySm = 'stretch',
     justifyMd = 'stretch',
     sx = [],
+    sxBackdrop = [],
   } = props
 
   const { scrollerRef, snap } = useScrollerContext()
@@ -104,6 +106,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
 
     const resize = () => {
       if (positions.open.visible.get() !== 1) return
+
       scroller.scrollLeft = positions.open.x.get()
       scroller.scrollTop = positions.open.y.get()
     }
@@ -187,7 +190,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
             WebkitTapHighlightColor: 'transparent',
             willChange: 'opacity',
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
+          ...(Array.isArray(sxBackdrop) ? sxBackdrop : [sxBackdrop]),
         ]}
       />
       <Scroller
@@ -195,62 +198,65 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
         grid={false}
         hideScrollbar
         onClick={onClickAway}
-        sx={(theme) => ({
-          display: 'grid',
-          '&.canGrab': {
-            cursor: 'default',
-          },
-          '&.mdSnapDirInline': {
-            overflow: 'auto',
-          },
-
-          height: '100vh',
-          '@supports (-webkit-touch-callout: none)': {
-            height: '-webkit-fill-available',
-          },
-
-          [theme.breakpoints.down('md')]: {
-            '&.variantSmLeft': {
-              gridTemplate: `"overlay beforeOverlay"`,
-              borderTopRightRadius: theme.shape.borderRadius * 3,
-              borderBottomRightRadius: theme.shape.borderRadius * 3,
-            },
-            '&.variantSmRight': {
-              gridTemplate: `"beforeOverlay overlay"`,
-              borderTopLeftRadius: theme.shape.borderRadius * 3,
-              borderBottomLeftRadius: theme.shape.borderRadius * 3,
-            },
-            '&.variantSmBottom': {
-              borderTopLeftRadius: theme.shape.borderRadius * 3,
-              borderTopRightRadius: theme.shape.borderRadius * 3,
-              gridTemplate: `"beforeOverlay" "overlay"`,
-              height: '100vh',
-              '@supports (-webkit-touch-callout: none)': {
-                height: '-webkit-fill-available',
-              },
+        sx={[
+          (theme) => ({
+            display: 'grid',
+            '&.canGrab': {
+              cursor: 'default',
             },
-          },
-          [theme.breakpoints.up('md')]: {
-            '&.variantMdLeft': {
-              gridTemplate: `"overlay beforeOverlay"`,
-              borderTopRightRadius: theme.shape.borderRadius * 4,
-              borderBottomRightRadius: theme.shape.borderRadius * 4,
+            '&.mdSnapDirInline': {
+              overflow: 'auto',
             },
-            '&.variantMdRight': {
-              gridTemplate: `"beforeOverlay overlay"`,
-              borderTopLeftRadius: theme.shape.borderRadius * 4,
-              borderBottomLeftRadius: theme.shape.borderRadius * 4,
+
+            height: '100vh',
+            '@supports (-webkit-touch-callout: none)': {
+              height: '-webkit-fill-available',
             },
-            '&.variantMdBottom': {
-              borderTopLeftRadius: theme.shape.borderRadius * 4,
-              borderTopRightRadius: theme.shape.borderRadius * 4,
-              [theme.breakpoints.up('md')]: {
+
+            [theme.breakpoints.down('md')]: {
+              '&.variantSmLeft': {
+                gridTemplate: `"overlay beforeOverlay"`,
+                borderTopRightRadius: theme.shape.borderRadius * 3,
+                borderBottomRightRadius: theme.shape.borderRadius * 3,
+              },
+              '&.variantSmRight': {
+                gridTemplate: `"beforeOverlay overlay"`,
+                borderTopLeftRadius: theme.shape.borderRadius * 3,
+                borderBottomLeftRadius: theme.shape.borderRadius * 3,
+              },
+              '&.variantSmBottom': {
+                borderTopLeftRadius: theme.shape.borderRadius * 3,
+                borderTopRightRadius: theme.shape.borderRadius * 3,
                 gridTemplate: `"beforeOverlay" "overlay"`,
                 height: '100vh',
+                '@supports (-webkit-touch-callout: none)': {
+                  height: '-webkit-fill-available',
+                },
               },
             },
-          },
-        })}
+            [theme.breakpoints.up('md')]: {
+              '&.variantMdLeft': {
+                gridTemplate: `"overlay beforeOverlay"`,
+                borderTopRightRadius: theme.shape.borderRadius * 4,
+                borderBottomRightRadius: theme.shape.borderRadius * 4,
+              },
+              '&.variantMdRight': {
+                gridTemplate: `"beforeOverlay overlay"`,
+                borderTopLeftRadius: theme.shape.borderRadius * 4,
+                borderBottomLeftRadius: theme.shape.borderRadius * 4,
+              },
+              '&.variantMdBottom': {
+                borderTopLeftRadius: theme.shape.borderRadius * 4,
+                borderTopRightRadius: theme.shape.borderRadius * 4,
+                [theme.breakpoints.up('md')]: {
+                  gridTemplate: `"beforeOverlay" "overlay"`,
+                  height: '100vh',
+                },
+              },
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
       >
         <Box
           onClick={onClickAway}

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
-export type LayoutOverlayState = Omit<LayoutOverlayProps, 'children' | 'sx'>
+export type LayoutOverlayState = Omit<LayoutOverlayProps, 'children' | 'sx' | 'sxBackdrop'>
 
 function useQueryState<T extends ParsedUrlQuery>(builder: (query: T) => T) {
   const { query, replace } = useRouter()

package/LayoutParts/Logo.tsx

@@ -63,7 +63,7 @@ export const Logo = forwardRef<HTMLDivElement, LogoProps>((props, ref) => {
     />
   )
 
-  return router.asPath === '/' ? (
+  return router.asPath.split('?')[0] === '/' ? (
     <LogoContainer ref={ref} sx={sx} className={classes.parent}>
       {img}
     </LogoContainer>

package/LayoutParts/MenuFab.tsx

@@ -1,4 +1,4 @@
-import { Divider, Fab, ListItem, Menu, styled, Box } from '@mui/material'
+import { Divider, Fab, ListItem, Menu, styled, Box, SxProps, Theme } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
@@ -16,10 +16,11 @@ export type MenuFabProps = {
   search?: React.ReactNode
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
 const { classes, selectors } = extendableComponent('MenuFab', [
-  'root',
+  'wrapper',
   'fab',
   'shadow',
   'menu',
@@ -28,7 +29,7 @@ const { classes, selectors } = extendableComponent('MenuFab', [
 const fabIconSize = responsiveVal(42, 56) // @todo generalize this
 
 export function MenuFab(props: MenuFabProps) {
-  const { children, secondary, search, menuIcon, closeIcon } = props
+  const { children, secondary, search, menuIcon, closeIcon, sx = [] } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
@@ -41,9 +42,9 @@ export function MenuFab(props: MenuFabProps) {
   }, [router])
 
   return (
-    <Box sx={{ width: fabIconSize, height: fabIconSize }}>
+    <Box sx={[{ width: fabIconSize, height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}>
       <MotionDiv
-        className={classes.root}
+        className={classes.wrapper}
         sx={(theme) => ({
           [theme.breakpoints.down('md')]: {
             opacity: '1 !important',
@@ -55,7 +56,6 @@ export function MenuFab(props: MenuFabProps) {
         <Fab
           color='inherit'
           aria-label='Open Menu'
-          size='medium'
           onClick={(event) => setOpenEl(event.currentTarget)}
           sx={(theme) => ({
             boxShadow: 'none',
@@ -72,10 +72,10 @@ export function MenuFab(props: MenuFabProps) {
           className={classes.fab}
         >
           {closeIcon ?? (
-            <SvgIcon src={iconClose} size='medium' sx={{ display: openEl ? 'block' : 'none' }} />
+            <SvgIcon src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
           )}
           {menuIcon ?? (
-            <SvgIcon src={iconMenu} size='medium' sx={{ display: openEl ? 'none' : 'block' }} />
+            <SvgIcon src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
           )}
         </Fab>
         <MotionDiv

package/LayoutParts/MenuFabItem.tsx

@@ -8,8 +8,8 @@ export type MenuFabItemProps = Omit<ListItemButtonProps<'a'>, 'href' | 'button'>
 export function MenuFabItem(props: MenuFabItemProps) {
   const { href, children, sx = [], ...listItemProps } = props
   const hrefString = href.toString()
-  const { asPath } = useRouter()
-  const active = hrefString === '/' ? asPath === hrefString : asPath.startsWith(hrefString)
+  const path = useRouter().asPath.split('?')[0]
+  const active = hrefString === '/' ? path === hrefString : path.startsWith(hrefString)
 
   return (
     <PageLink key={href.toString()} href={href} passHref>

package/Page/types.ts

@@ -1,6 +1,7 @@
 import { ParsedUrlQuery } from 'querystring'
-import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { UpPage } from '@graphcommerce/framer-next-pages/types'
+// todo: remove references to GraphQL
+import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
 
 type AnyObj = Record<string, unknown>

package/Styles/extendableComponent.ts

@@ -1,8 +1,17 @@
 import { capitalize, Interpolation, Theme } from '@mui/material'
-import React from 'react'
 
 export type ExtendableComponent<StyleProps extends Record<string, unknown>> = {
+  /**
+   * Allows you to override the props of a component globally
+   *
+   * @see https://mui.com/customization/theme-components/#adding-new-component-variants
+   */
   defaultProps?: Partial<StyleProps>
+  /**
+   * Allows you to define custom styling for a variant.
+   *
+   * @see https://mui.com/customization/theme-components/#adding-new-component-variants
+   */
   variants?: { props: Partial<StyleProps>; style: Interpolation<{ theme: Theme }> }[]
 }
 

package/SvgIcon/SvgIcon.tsx

@@ -1,60 +1,101 @@
-import { ImageProps, srcToString } from '@graphcommerce/image'
-import { Box, SxProps, Theme } from '@mui/material'
+import { ImageProps, srcToString, StaticImport } from '@graphcommerce/image'
+import { styled, SxProps, Theme, useTheme } from '@mui/material'
 import { ComponentProps, forwardRef } from 'react'
-import { ExtendableComponent } from '../Styles/extendableComponent'
+import { extendableComponent, ExtendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal as rv } from '../Styles/responsiveVal'
+import { svgIconStrokeWidth } from './svgIconStrokeWidth'
 
 const name = 'SvgIcon'
+const parts = ['root'] as const
 type StyleProps = {
   size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
   fillIcon?: boolean
 }
+const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>(name, parts)
 
-// Expose the component to be exendable in your theme.components
+/** Expose the component to be exendable in your theme.components */
 declare module '@mui/material/styles/components' {
   interface Components {
-    SvgIcon?: ExtendableComponent<StyleProps>
+    SvgIcon?: ExtendableComponent<StyleProps> & {
+      /**
+       * To override an icon with your own icon, provide the original src and the replacement src.
+       *
+       * ```tsx
+       * import { originalIcon, originalIcon2 } from '@graphcommerce/image'
+       * import myIcon from './myIcon.svg'
+       * import myIcon2 from './myIcon2.svg'
+       *
+       * overrides: [
+       *   [originalIcon, myIcon],
+       *   [originalIcon2, myIcon2],
+       * ]
+       * ```
+       */
+      overrides?: [StaticImport | string, StaticImport | string][]
+    }
   }
 }
 
 export type SvgIconProps = StyleProps &
   Pick<ImageProps, 'src'> &
-  Pick<ComponentProps<'svg'>, 'className'> & { sx?: SxProps<Theme> }
+  Pick<ComponentProps<'svg'>, 'className' | 'style'> & { sx?: SxProps<Theme> }
 
-/** SvgIcon component is supposed to be used in combination with `icons` */
+const Svg = styled('svg', { name, target: name })(() => [
+  {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+
+    strokeLinecap: 'square',
+    strokeLinejoin: 'miter',
+    strokeMiterlimit: 4,
+
+    fill: 'none',
+    stroke: 'currentColor',
+
+    fontSize: '1.3em',
+
+    strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
+
+    '&.sizeXs': { fontSize: rv(11, 13) },
+    '&.sizeSmall': { fontSize: rv(12, 16) },
+    '&.sizeMedium': { fontSize: rv(22, 24) },
+    '&.sizeLarge': { fontSize: rv(24, 28) },
+    '&.sizeXl': { fontSize: rv(38, 62) },
+    '&.sizeXxl': { fontSize: rv(96, 148) },
+
+    '&.fillIcon': {
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  },
+])
+
+/**
+ * SvgIcon component is supposed to be used in combination with `icons`
+ *
+ * @see https://graphcommerce-docs.vercel.app/framework/icons
+ */
 export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
-  const { className, src, size, fillIcon, sx = [], ...svgProps } = props
+  const { src, size, fillIcon, className, ...svgProps } = props
+
+  const srcWithOverride =
+    (useTheme().components?.SvgIcon?.overrides ?? []).find(
+      ([overrideSrc]) => overrideSrc === src,
+    )?.[1] ?? src
+
+  const classes = withState({ size, fillIcon })
 
   return (
-    <Box
-      component='svg'
+    <Svg
       ref={ref}
       aria-hidden='true'
-      className={`${name} ${className ?? ''}`}
+      className={`${classes.root} ${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>
+      <use href={`${srcToString(srcWithOverride)}#icon`} />
+    </Svg>
   )
 })
 SvgIcon.displayName = 'SvgIcon'

package/SvgIcon/index.ts

@@ -0,0 +1,2 @@
+export * from './SvgIcon'
+export * from './svgIconStrokeWidth'

package/SvgIcon/svgIconStrokeWidth.ts

@@ -0,0 +1,26 @@
+/**
+ * Responsive strokeWidth calculation:
+ *
+ * - We want the stoke width to be inverse to the width of the element
+ * - When the width is 96 we want strokeWidth to be 0.5
+ * - When the width is 48 we want strokeWidth to be 1
+ * - When the width is 24 we want strokeWidth to be 2
+ * - To achieve this we have actual width of the element as defined by '1em'.
+ * - We use the calc property to calculate the strokeWidth.
+ *
+ * Sensible values are:
+ *
+ * - `lowSize`: 10-20
+ * - `highSize`: 50-150
+ * - `lowStroke`: 0.5-2
+ * - `highStroke`: 0.2-1
+ */
+export function svgIconStrokeWidth(
+  lowSize: number,
+  highSize: number,
+  lowStroke: number,
+  highStroke: number,
+) {
+  const val = `calc(${lowStroke}px - ((1em - ${lowSize}px) / (${highSize} - ${lowSize}) * (${lowStroke} - ${highStroke})))`
+  return val
+}

package/Theme/DarkLightModeThemeProvider.tsx

@@ -0,0 +1,119 @@
+import { Trans } from '@lingui/macro'
+import {
+  Theme,
+  ThemeProvider,
+  useMediaQuery,
+  Fab,
+  FabProps,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListItemButtonProps,
+} from '@mui/material'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { iconMoon, iconSun } from '../icons'
+
+type Mode = 'dark' | 'light'
+type UserMode = 'auto' | Mode
+
+type ColorModeContext = {
+  userMode: UserMode
+  browserMode: Mode
+  currentMode: Mode
+  toggle: () => void
+}
+
+export const colorModeContext = createContext(undefined as unknown as ColorModeContext)
+colorModeContext.displayName = 'ColorModeContext'
+
+type ThemeProviderProps = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  light: Theme
+  // eslint-disable-next-line react/no-unused-prop-types
+  dark: Theme
+
+  children: React.ReactNode
+}
+
+/**
+ * Wrapper around `import { ThemeProvider } from '@mui/material'`
+ *
+ * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
+ * and on user input.
+ *
+ * If you *just* wan't a single theme, use the import { ThemeProvider } from '@mui/material' instead.
+ */
+export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
+  const { children, light, dark } = props
+
+  // todo: Save this in local storage
+  const [userMode, setUserMode] = useState<UserMode>('auto')
+  const browserMode: Mode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+
+  // If the user has set a mode, use that. Otherwise, use the browser mode.
+  const currentMode = userMode === 'auto' ? browserMode : userMode
+  const theme = currentMode === 'light' ? light : dark
+
+  // If a URL parameter is present, switch from auto to light or dark mode
+  const { asPath } = useRouter()
+  useEffect(() => {
+    if (asPath.includes('darkmode')) setUserMode('dark')
+  }, [asPath])
+
+  // Create the context
+  const colorContext: ColorModeContext = useMemo(
+    () => ({
+      browserMode,
+      userMode,
+      currentMode,
+      toggle: () => setUserMode(currentMode === 'light' ? 'dark' : 'light'),
+    }),
+    [browserMode, currentMode, userMode],
+  )
+
+  return (
+    <colorModeContext.Provider value={colorContext}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </colorModeContext.Provider>
+  )
+}
+
+export function useColorMode() {
+  return useContext(colorModeContext)
+}
+
+export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
+  const { currentMode, toggle } = useColorMode()
+  return (
+    <Fab size='large' color='inherit' onClick={toggle} {...props}>
+      <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
+    </Fab>
+  )
+}
+
+/**
+ * A button that switches between light and dark mode
+ *
+ * To disable this functionality
+ */
+export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
+  const { sx = [] } = props
+  const { currentMode, toggle } = useColorMode()
+
+  return (
+    <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>
+      <ListItemIcon sx={{ minWidth: 'unset', paddingRight: '8px' }}>
+        <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
+      </ListItemIcon>
+      <ListItemText>
+        {currentMode === 'light' ? (
+          <Trans>Switch to Dark Mode</Trans>
+        ) : (
+          <Trans>Switch to Light Mode</Trans>
+        )}
+      </ListItemText>
+    </ListItemButton>
+  )
+}

package/Theme/index.ts

@@ -2,3 +2,4 @@ export * from './MuiSlider'
 export * from './MuiButton'
 export * from './MuiSnackbar'
 export * from './themeDefaults'
+export * from './DarkLightModeThemeProvider'

package/icons/index.tsx

@@ -36,3 +36,5 @@ export { default as iconParty } from './happy-face.svg'
 export { default as iconStar } from './star.svg'
 export { default as iconEmailOutline } from './envelope-alt.svg'
 export { default as icon404 } from './explore.svg'
+export { default as iconSun } from './sun.svg'
+export { default as iconMoon } from './moon.svg'

package/index.ts

@@ -1,5 +1,4 @@
 export * from './AnimatedRow'
-export * from './ApolloError'
 export * from './Blog/BlogAuthor'
 export * from './Blog/BlogContent'
 export * from './Blog/BlogHeader'
@@ -59,7 +58,7 @@ export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField'
 export * from './Stepper/Stepper'
 export * from './Styles'
-export * from './SvgIcon/SvgIcon'
+export * from './SvgIcon'
 export * from './TextInputNumber'
 export * from './Theme'
 export * from './TimeAgo'

package/package.json

@@ -2,13 +2,16 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.1",
+  "version": "4.1.2",
   "author": "",
   "license": "MIT",
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
@@ -16,40 +19,31 @@
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.0.1",
-    "@graphcommerce/framer-scroller": "^2.0.1",
-    "@graphcommerce/framer-utils": "^3.0.1",
-    "@graphcommerce/graphql": "^3.0.1",
-    "@graphcommerce/image": "^3.0.1",
+    "@graphcommerce/framer-next-pages": "^3.1.0",
+    "@graphcommerce/framer-scroller": "^2.0.3",
+    "@graphcommerce/framer-utils": "^3.0.3",
+    "@graphcommerce/image": "^3.1.0",
+    "react-is": "^17.0.2",
+    "react-schemaorg": "^2.0.0",
+    "schema-dts": "^1.0.0",
+    "type-fest": "^2.12.0"
+  },
+  "peerDependencies": {
     "@lingui/macro": "^3.13.2",
     "@mui/base": "^5.0.0-alpha.68",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.4.1",
     "framer-motion": "^6.2.4",
-    "graphql": "^16.3.0",
     "next": "^12.0.10",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-schemaorg": "^2.0.0",
-    "schema-dts": "^1.0.0",
-    "type-fest": "^2.11.2"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.1",
-    "@graphcommerce/prettier-config-pwa": "^4.0.1",
-    "@graphcommerce/typescript-config-pwa": "^4.0.1",
-    "@playwright/test": "^1.18.1",
+    "@graphcommerce/eslint-config-pwa": "^4.0.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@playwright/test": "^1.19.1",
     "@types/react-is": "^17.0.3",
-    "graphql-tag": "2.12.6",
     "typescript": "^4.5.5"
-  },
-  "sideEffects": false,
-  "prettier": "@graphcommerce/prettier-config-pwa",
-  "eslintConfig": {
-    "extends": "@graphcommerce/eslint-config-pwa",
-    "parserOptions": {
-      "project": "./tsconfig.json"
-    }
   }
 }

package/ApolloError/ApolloErrorAlert.tsx

@@ -1,58 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
-import { AnimatePresence } from 'framer-motion'
-import { AnimatedRow } from '../AnimatedRow'
-import { extendableComponent } from '../Styles/extendableComponent'
-
-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 { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
-
-  return (
-    <AnimatePresence initial={false}>
-      {error && (
-        <AnimatedRow key='alerts'>
-          <Box sx={sx} className={classes.root}>
-            <AnimatePresence initial={false}>
-              {error.graphQLErrors.map((e, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <AnimatedRow key={index}>
-                  <div className={classes.alert}>
-                    <Alert severity='error' {...graphqlErrorAlertProps}>
-                      {e.message}
-                    </Alert>
-                  </div>
-                </AnimatedRow>
-              ))}
-              {error.networkError && (
-                <AnimatedRow 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>
-                  </Box>
-                </AnimatedRow>
-              )}
-            </AnimatePresence>
-          </Box>
-        </AnimatedRow>
-      )}
-    </AnimatePresence>
-  )
-}
-
-ApolloErrorAlert.selectors = selectors

package/ApolloError/ApolloErrorFullPage.tsx

@@ -1,31 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { AlertProps } from '@mui/material'
-import { FullPageMessage, FullPageMessageProps } from '../FullPageMessage'
-import ApolloErrorAlert from './ApolloErrorAlert'
-
-export type ApolloErrorFullPageProps = {
-  error?: ApolloError
-  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
-  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
-} & Omit<FullPageMessageProps, 'title' | 'description'>
-
-export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
-  const {
-    error,
-    graphqlErrorAlertProps,
-    networkErrorAlertProps,
-    children,
-    ...fullPageMessageProps
-  } = props
-
-  const singleError = error?.graphQLErrors.length === 1
-
-  return (
-    <FullPageMessage
-      title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
-      {...fullPageMessageProps}
-    >
-      {singleError ? children : <ApolloErrorAlert error={error} />}
-    </FullPageMessage>
-  )
-}

package/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,35 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { Trans } from '@lingui/macro'
-import { Button } from '@mui/material'
-import { MessageSnackbar } from '../Snackbar/MessageSnackbar'
-import { MessageSnackbarImplProps } from '../Snackbar/MessageSnackbarImpl'
-
-export type ApolloErrorSnackbarProps = {
-  error?: ApolloError
-} & Pick<MessageSnackbarImplProps, 'action' | 'onClose'>
-
-export default function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
-
-  if (!error) return null
-  return (
-    <MessageSnackbar
-      variant='pill'
-      severity='error'
-      {...passedProps}
-      open={!!error}
-      action={
-        action ?? (
-          <Button size='medium' variant='pill' color='secondary'>
-            <Trans>Ok</Trans>
-          </Button>
-        )
-      }
-    >
-      <>
-        {error.graphQLErrors.map((e) => e.message)}
-        {error.networkError && <>Network Error: {error.networkError.message}</>}
-      </>
-    </MessageSnackbar>
-  )
-}

package/ApolloError/index.ts

@@ -1,6 +0,0 @@
-export * from './ApolloErrorAlert'
-export { default as ApolloErrorAlert } from './ApolloErrorAlert'
-export * from './ApolloErrorFullPage'
-export { default as ApolloErrorFullPage } from './ApolloErrorFullPage'
-export * from './ApolloErrorSnackbar'
-export { default as ApolloErrorSnackbar } from './ApolloErrorSnackbar'