@graphcommerce/next-ui 8.1.0-canary.3 → 8.1.0-canary.30

package/Theme/DarkLightModeThemeProvider.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
+import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
 type UserMode = 'auto' | Mode
@@ -22,6 +23,7 @@ type ColorModeContext = {
   userMode: UserMode
   browserMode: Mode
   currentMode: Mode
+  isSingleMode: boolean
   toggle: () => void
 }
 
@@ -29,48 +31,59 @@ export const colorModeContext = createContext(undefined as unknown as ColorModeC
 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
-}
+  ssrMode?: Mode
+  listenToBrowser?: boolean
+} & (
+  | { light: Theme; dark?: undefined }
+  | { light?: undefined; dark: Theme }
+  | { light: Theme; dark: Theme }
+)
 
 /**
  * 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
+  const { children, light, dark, ssrMode = 'light', listenToBrowser = true } = props
+  const [configuredMode, setConfiguredMode] = useState<UserMode>(listenToBrowser ? 'auto' : ssrMode)
+  const setThemeMode = (mode: UserMode) => {
+    setConfiguredMode(mode)
+    setCssFlag('color-scheme', mode)
+  }
 
-  // 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
+  const currentMode = configuredMode === 'auto' ? browserMode : configuredMode
+
+  let theme: Theme = light || dark // Default
+  if (light && currentMode === 'light') theme = light
+  else if (dark) theme = dark
+
+  useEffect(() => {
+    const flag = getCssFlag('color-scheme') as Mode
+    if (flag) setConfiguredMode(flag)
+  }, [setConfiguredMode])
 
   // If a URL parameter is present, switch from auto to light or dark mode
   const { asPath } = useRouter()
   useEffect(() => {
-    if (asPath.includes('darkmode')) setUserMode('dark')
+    if (asPath.includes('darkmode')) setConfiguredMode('dark')
   }, [asPath])
 
   // Create the context
   const colorContext: ColorModeContext = useMemo(
     () => ({
       browserMode,
-      userMode,
+      userMode: configuredMode,
       currentMode,
-      toggle: () => setUserMode(currentMode === 'light' ? 'dark' : 'light'),
+      isSingleMode: !light || !dark,
+      toggle: () => setThemeMode(currentMode === 'light' ? 'dark' : 'light'),
     }),
-    [browserMode, currentMode, userMode],
+    [browserMode, configuredMode, currentMode, light, dark],
   )
 
   return (
@@ -85,7 +98,12 @@ export function useColorMode() {
 }
 
 export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
+
   return (
     <Fab size='large' color='inherit' onClick={toggle} {...props}>
       <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
@@ -100,7 +118,11 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   const { sx = [] } = props
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
 
   return (
     <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>

package/TimeAgo/TimeAgo.tsx

@@ -1,17 +1,23 @@
+import { useLocale } from '../hooks/useLocale'
+
 export type TimeAgoProps = {
   date: Date
+  /**
+   * @deprecated No longer used
+   */
   locale?: string
 }
 
 export function TimeAgo(props: TimeAgoProps) {
-  const { date, locale = 'en' } = props
+  const { date } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
 
   const timestamp = date.getTime()
   const elapsed = Date.now() - timestamp
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+  const rtf = new Intl.RelativeTimeFormat(useLocale(), { numeric: 'auto' })
 
   if (elapsed < msPerMinute) {
     return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>

package/hooks/index.ts

@@ -5,3 +5,5 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
+export * from './useSsr'
+export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,15 +1,11 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
-  const { locale } = useRouter()
+  const locale = useLocale()
 
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useLocale.ts

@@ -0,0 +1,7 @@
+import { normalizeLocale } from '@graphcommerce/lingui-next'
+import { useStorefrontConfig } from './useStorefrontConfig'
+
+export function useLocale() {
+  const { locale } = useStorefrontConfig()
+  return normalizeLocale(locale)
+}

package/hooks/useMatchMedia.ts

@@ -1,5 +1,24 @@
 import { Breakpoint, useTheme } from '@mui/material'
-import { useMemo } from 'react'
+import { useMotionValue } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+
+export function useMatchMediaMotionValue(
+  direction: 'up' | 'down',
+  breakpointKey: number | Breakpoint,
+) {
+  const matchValue = useMotionValue(false)
+  const theme = useTheme()
+  const query = theme.breakpoints[direction](breakpointKey).replace(/^@media( ?)/m, '')
+
+  useEffect(() => {
+    const mql = globalThis?.matchMedia(query)
+    const matcher = (e: MediaQueryListEvent) => matchValue.set(e.matches)
+    mql.addEventListener('change', matcher)
+    return () => mql.removeEventListener('change', matcher)
+  }, [matchValue, query])
+
+  return matchValue
+}
 
 export function useMatchMedia() {
   const theme = useTheme()

package/hooks/useNumberFormat.ts

@@ -1,15 +1,10 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type NumberFormatProps = Intl.NumberFormatOptions
 
 export function useNumberFormat(props?: NumberFormatProps) {
-  const { locale } = useRouter()
-
-  const formatter = useMemo(
-    () => new Intl.NumberFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const locale = useLocale()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useSsr.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react'
+
+const emptySubscribe = () => () => {}
+
+export function useIsSSR() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  )
+}

package/icons.ts

@@ -0,0 +1,50 @@
+export { default as iconArrowDown } from './icons/arrow-down.svg'
+export { default as iconArrowBack } from './icons/arrow-left.svg'
+export { default as iconArrowForward } from './icons/arrow-right.svg'
+export { default as iconArrowUp } from './icons/arrow-up.svg'
+export { default as iconShoppingBag } from './icons/bag.svg'
+export { default as iconInvoice } from './icons/box-alt.svg'
+export { default as iconBox } from './icons/box.svg'
+export { default as iconOrderBefore } from './icons/calendar.svg'
+export { default as iconCancelAlt } from './icons/cancel-alt.svg'
+export { default as iconCartAdd } from './icons/cart-add.svg'
+export { default as iconCart } from './icons/cart.svg'
+export { default as iconChat } from './icons/chat-alt.svg'
+export { default as iconCustomerService } from './icons/chat.svg'
+export { default as iconChevronDown } from './icons/chevron-down.svg'
+export { default as iconChevronBack, default as iconChevronLeft } from './icons/chevron-left.svg'
+export { default as iconChevronRight } from './icons/chevron-right.svg'
+export { default as iconChevronUp } from './icons/chevron-up.svg'
+export { default as iconCirle } from './icons/circle.svg'
+export { default as iconClose } from './icons/close.svg'
+export { default as iconCompare } from './icons/compare-arrows.svg'
+export { default as iconCreditCard, default as iconId } from './icons/credit-card.svg'
+export { default as iconEllypsis } from './icons/ellypsis.svg'
+export { default as iconEmail, default as iconEmailOutline } from './icons/envelope-alt.svg'
+export { default as icon404 } from './icons/explore.svg'
+export { default as iconEyeClosed } from './icons/eye-closed.svg'
+export { default as iconEyeCrossed } from './icons/eye-crossed.svg'
+export { default as iconEye } from './icons/eye.svg'
+export { default as iconHeart } from './icons/favourite.svg'
+export { default as iconMenu } from './icons/hamburger.svg'
+export { default as iconParty } from './icons/happy-face.svg'
+export { default as iconAddresses, default as iconHome } from './icons/home-alt.svg'
+export { default as iconLanguage } from './icons/language.svg'
+export { default as iconLocation } from './icons/location.svg'
+export { default as iconLock } from './icons/lock.svg'
+export { default as iconFullscreen } from './icons/maximise.svg'
+export { default as iconFullscreenExit } from './icons/minimise.svg'
+export { default as iconMin } from './icons/minus.svg'
+export { default as iconMoon } from './icons/moon.svg'
+export { default as iconNewspaper } from './icons/news.svg'
+export { default as iconCheckmark } from './icons/ok.svg'
+export { default as iconPerson } from './icons/person-alt.svg'
+export { default as iconPlay } from './icons/play.svg'
+export { default as iconPlus } from './icons/plus.svg'
+export { default as iconShutdown } from './icons/power.svg'
+export { default as iconRefresh } from './icons/refresh.svg'
+export { default as iconSadFace } from './icons/sad-face.svg'
+export { default as iconSearch } from './icons/search.svg'
+export { default as iconPhone } from './icons/smartphone.svg'
+export { default as iconStar } from './icons/star.svg'
+export { default as iconSun } from './icons/sun.svg'

package/index.ts

@@ -8,6 +8,7 @@ export * from './Blog/BlogListItem/BlogListItem'
 export * from './Blog/BlogTags/BlogTags'
 export * from './Blog/BlogTitle/BlogTitle'
 export * from './Button'
+export * from './Breadcrumbs'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
 export * from './Fab'
@@ -59,3 +60,6 @@ export * from './UspList/UspListItem'
 export * from './hooks'
 export * from './icons'
 export * from './utils/cookie'
+export * from './utils/sitemap'
+export * from './utils/robots'
+export * from './utils/cssFlags'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.3",
+  "version": "8.1.0-canary.30",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -17,6 +17,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "cookie": "^0.6.0",
+    "next-sitemap": "4.2.3",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
@@ -25,14 +26,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.3",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.3",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.3",
-    "@graphcommerce/image": "^8.1.0-canary.3",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.30",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.30",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.30",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.30",
+    "@graphcommerce/image": "^8.1.0-canary.30",
+    "@graphcommerce/lingui-next": "^8.1.0-canary.30",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.30",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.30",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/types.d.ts

@@ -6,12 +6,6 @@ import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
 
-declare module 'react' {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    inert?: 'true'
-  }
-}
-
 declare module '*.po' {
   const messages: Record<
     string,

package/utils/cssFlags.tsx

@@ -0,0 +1,76 @@
+export const FLAGS_STORAGE_KEY = 'gc-flags'
+export const FLAG_PREFIX = 'data'
+
+export function getCssFlagsInitScript() {
+  return (
+    <script
+      id='init-gc-flags'
+      key='mui-color-scheme-init'
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: `(function() {
+try {
+  const flags = JSON.parse(localStorage.getItem('${FLAGS_STORAGE_KEY}') || '{}')
+  Object.entries(flags).forEach(([key, val]) => {
+    document.documentElement.setAttribute('data-' +key, typeof val === 'boolean' ? '' : val)
+  })
+} catch(e){}})();`,
+      }}
+    />
+  )
+}
+
+function loadFlags() {
+  const flags = JSON.parse(localStorage.getItem(FLAGS_STORAGE_KEY) || '{}')
+  if (typeof flags !== 'object' && flags !== null) return {}
+  return flags as Record<string, true | string>
+}
+
+function saveFlags(flags: Record<string, true | string>) {
+  window.localStorage?.setItem(FLAGS_STORAGE_KEY, JSON.stringify(flags))
+}
+
+export function removeCssFlag(flagName: string) {
+  const flags = loadFlags()
+  delete flags[flagName]
+  document.documentElement.removeAttribute(`data-${flagName}`)
+  saveFlags(flags)
+}
+
+export function setCssFlag(flagName: string, val: true | string) {
+  document.documentElement.setAttribute(`data-${flagName}`, typeof val === 'boolean' ? '' : val)
+
+  const flags = loadFlags()
+  flags[flagName] = val
+  saveFlags(flags)
+}
+
+/**
+ * @deprecated flags are not intendend to be used in JS, so this should only be used for debugging purposes.
+ */
+export function getCssFlag(flagName: string) {
+  return loadFlags()[flagName]
+}
+
+/**
+ * Easily create a CSS selector that only applies when a flag is set.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Box sx={{ [cssFlagSelector('dark')]: { color: 'white' } }} />
+ * ```
+ */
+export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}] &` as const
+
+/**
+ * Easily create a CSS selector that only applies when a flag is not set.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Box sx={{ [cssNotFlagSelector('dark')]: { color: 'black' } }} />
+ * ```
+ */
+export const cssNotFlag = <T extends string>(flagName: T) =>
+  `html:not([data-${flagName}]) &` as const

package/utils/robots.ts

@@ -0,0 +1,41 @@
+import { GetServerSidePropsContext } from 'next'
+
+type Stringifyable = boolean | string | number | null | undefined
+
+/**
+ * Tagged template literal for robots.txt that will automatically stringify values and indent them correctly.
+ * https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt#syntax
+ */
+export function robotsTxt(strings: TemplateStringsArray, ...values: Stringifyable[]) {
+  return strings
+    .reduce((acc, str, i) => {
+      let value = values[i]
+
+      if (Array.isArray(value)) {
+        const [conditional, val] = value
+        value = conditional ? val : null
+      }
+      if (!value) value = ''
+      if (typeof value === 'boolean') value = value ? 'true' : 'false'
+      if (typeof value === 'number') value = String(value)
+
+      return acc + str + value
+    }, '')
+    .split('\n')
+    .map((v) => v.trim())
+    .join('\n')
+    .trim()
+}
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export async function getServerSidePropsRobotsTxt(
+  context: GetServerSidePropsContext,
+  robots: string,
+) {
+  context.res.setHeader('Content-Type', 'text/plain')
+  context.res.write(robots)
+  context.res.end()
+  context.res.setHeader('Cache-Control', `public, s-maxage=${60 * 60 * 2}`)
+
+  return { props: {} }
+}

package/utils/sitemap.ts

@@ -0,0 +1,47 @@
+import { GetServerSidePropsContext, GetStaticPathsResult } from 'next'
+import { getServerSideSitemapLegacy, ISitemapField } from 'next-sitemap'
+import { canonicalize } from '../PageMeta/PageMeta'
+
+export function excludeSitemap(excludes: string[]) {
+  const regexp = excludes.map((exclude) => new RegExp(exclude.replace(/\*/g, '.*?')))
+
+  return (path: string) => !regexp.some((pattern) => pattern.test(`/${path}`))
+}
+
+export function staticPathsToString(
+  path: GetStaticPathsResult<{ url: string[] | string }>['paths'][0],
+) {
+  if (typeof path === 'string') return path
+  if (typeof path.params.url === 'string') return path.params.url
+  return path.params.url.join('/')
+}
+
+export function toSitemapFields(
+  context: GetServerSidePropsContext,
+  paths: string[],
+): ISitemapField[] {
+  const lastmod = new Date().toISOString()
+  const options = {
+    locale: context.locale,
+    defaultLocale: context.defaultLocale,
+    pathname: '/',
+    isLocaleDomain: false,
+  }
+
+  const sitemapPaths = paths.map<ISitemapField>((path) => ({
+    loc: canonicalize(options, `/${path}`) ?? '',
+    lastmod,
+    changefreq: 'daily',
+    priority: 0.7,
+  }))
+
+  return sitemapPaths
+}
+
+export function getServerSidePropsSitemap(
+  context: GetServerSidePropsContext,
+  paths: ISitemapField[],
+) {
+  context.res.setHeader('Cache-Control', `public, s-maxage=${60 * 60 * 2}`)
+  return getServerSideSitemapLegacy(context, paths)
+}

package/icons/index.ts

@@ -1,48 +0,0 @@
-export { default as iconArrowBack } from './arrow-left.svg'
-export { default as iconArrowForward } from './arrow-right.svg'
-export { default as iconShoppingBag } from './bag.svg'
-export { default as iconInvoice } from './box-alt.svg'
-export { default as iconBox } from './box.svg'
-export { default as iconOrderBefore } from './calendar.svg'
-export { default as iconCancelAlt } from './cancel-alt.svg'
-export { default as iconCartAdd } from './cart-add.svg'
-export { default as iconCart } from './cart.svg'
-export { default as iconChat } from './chat-alt.svg'
-export { default as iconCustomerService } from './chat.svg'
-export { default as iconChevronDown } from './chevron-down.svg'
-export { default as iconChevronBack, default as iconChevronLeft } from './chevron-left.svg'
-export { default as iconChevronRight } from './chevron-right.svg'
-export { default as iconChevronUp } from './chevron-up.svg'
-export { default as iconCirle } from './circle.svg'
-export { default as iconClose } from './close.svg'
-export { default as iconCreditCard, default as iconId } from './credit-card.svg'
-export { default as iconEllypsis } from './ellypsis.svg'
-export { default as iconEmail, default as iconEmailOutline } from './envelope-alt.svg'
-export { default as icon404 } from './explore.svg'
-export { default as iconEyeClosed } from './eye-closed.svg'
-export { default as iconEyeCrossed } from './eye-crossed.svg'
-export { default as iconEye } from './eye.svg'
-export { default as iconHeart } from './favourite.svg'
-export { default as iconMenu } from './hamburger.svg'
-export { default as iconParty } from './happy-face.svg'
-export { default as iconAddresses, default as iconHome } from './home-alt.svg'
-export { default as iconLanguage } from './language.svg'
-export { default as iconLocation } from './location.svg'
-export { default as iconLock } from './lock.svg'
-export { default as iconFullscreen } from './maximise.svg'
-export { default as iconFullscreenExit } from './minimise.svg'
-export { default as iconMin } from './minus.svg'
-export { default as iconMoon } from './moon.svg'
-export { default as iconNewspaper } from './news.svg'
-export { default as iconCheckmark } from './ok.svg'
-export { default as iconPerson } from './person-alt.svg'
-export { default as iconPlay } from './play.svg'
-export { default as iconPlus } from './plus.svg'
-export { default as iconShutdown } from './power.svg'
-export { default as iconRefresh } from './refresh.svg'
-export { default as iconSadFace } from './sad-face.svg'
-export { default as iconSearch } from './search.svg'
-export { default as iconPhone } from './smartphone.svg'
-export { default as iconStar } from './star.svg'
-export { default as iconSun } from './sun.svg'
-export { default as iconCompare } from './compare-arrows.svg'