@graphcommerce/next-ui 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 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/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/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',

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/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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "author": "",
   "license": "MIT",
   "scripts": {