@graphcommerce/next-ui 8.1.0-canary.8 → 9.0.0-canary.100

package/hooks/useLocale.ts

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

package/hooks/useNumberFormat.ts

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type NumberFormatProps = Intl.NumberFormatOptions
-
-export function useNumberFormat(props?: NumberFormatProps) {
+/**
+ * @deprecated use <NumberFormat />, <PercentFormat /> or <UnitFormat /> instead
+ */
+export function useNumberFormat(props?: Intl.NumberFormatOptions) {
   const locale = useLocale()
   const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter

package/hooks/useStorefrontConfig.ts

@@ -1,13 +1,5 @@
 import { useRouter } from 'next/router'
-
-export const storefrontAll = import.meta.graphCommerce.storefront
-
-/** Get the current storefront config based on the provided locale */
-export const storefrontConfig = (locale?: string | undefined) =>
-  storefrontAll.find((l) => l.locale === locale)
-
-export const storefrontConfigDefault = () =>
-  storefrontAll.find((l) => l.defaultLocale) ?? storefrontAll[0]
+import { storefrontConfig } from '../utils/storefrontConfig'
 
 /** Automatically selects the correct storefront config based on the current locale */
 export function useStorefrontConfig(locale?: string | undefined) {

package/hooks/useUrlQuery.ts

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 
-export function useUrlQuery<T extends Record<string, string | null>>() {
-  const { query, replace } = useRouter()
+export function useUrlQuery<T extends Record<string, string | null>>(doPush?: boolean) {
+  const { query, replace, push } = useRouter()
 
   const setRouterQuery = useCallback(
     (incoming: T) => {
@@ -13,9 +13,11 @@ export function useUrlQuery<T extends Record<string, string | null>>() {
 
       if (JSON.stringify(current) === JSON.stringify(newQuery)) return Promise.resolve(true)
 
-      return replace({ query: newQuery }, undefined, { shallow: true })
+      return doPush
+        ? push({ query: newQuery })
+        : replace({ query: newQuery }, undefined, { shallow: true })
     },
-    [replace],
+    [doPush, push, replace],
   )
 
   return [query as T, setRouterQuery] as const

package/icons.ts

@@ -0,0 +1,55 @@
+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 iconBin } from './icons/bin.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 iconCancel } from './icons/cancel.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 iconContrast } from './icons/contrast.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 iconExit } from './icons/exit.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'
+export { default as iconInfo } from './icons/info.svg'

package/index.ts

@@ -7,6 +7,7 @@ export * from './Blog/BlogList/BlogList'
 export * from './Blog/BlogListItem/BlogListItem'
 export * from './Blog/BlogTags/BlogTags'
 export * from './Blog/BlogTitle/BlogTitle'
+export * from './Breadcrumbs'
 export * from './Button'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
@@ -22,8 +23,11 @@ export * from './Form/InputCheckmark'
 export * from './FramerScroller'
 export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
+export * from './hooks'
 export * from './IconHeader/IconHeader'
+export * from './icons'
 export * from './IconSvg'
+export * from './Intl'
 export * from './JsonLd/JsonLd'
 export * from './Layout'
 export * from './LayoutDefault'
@@ -35,8 +39,10 @@ export * from './Overlay'
 export * from './OverlayOrPopperChip'
 export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
+export * from './PageMeta/canonicalize'
 export * from './PageMeta/PageMeta'
 export * from './Pagination/Pagination'
+export * from './Pagination/PaginationExtended'
 export * from './RenderType'
 export * from './Row'
 export * from './SectionContainer/SectionContainer'
@@ -56,6 +62,9 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
-export * from './hooks'
-export * from './icons'
 export * from './utils/cookie'
+export * from './utils/cssFlags'
+export * from './utils/normalizeLocale'
+export * from './utils/robots'
+export * from './utils/sitemap'
+export * from './utils/storefrontConfig'

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.8",
+  "version": "9.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,26 +13,26 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "cookie": "^0.6.0",
-    "react-is": "^18.2.0"
+    "next-sitemap": "4.2.3",
+    "react-is": "^18.3.1"
   },
   "devDependencies": {
     "@types/cookie": "^0.6.0",
-    "@types/react-is": "^18.2.4",
-    "typescript": "5.3.3"
+    "@types/react-is": "^18.3.0",
+    "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.8",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.8",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.8",
-    "@graphcommerce/image": "^8.1.0-canary.8",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.100",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.100",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.100",
+    "@graphcommerce/image": "^9.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/server.ts

@@ -0,0 +1,9 @@
+export * from './Styles/withEmotionCache'
+export * from './utils/getCssFlagInitScript'
+export * from './utils/normalizeLocale'
+export * from './utils/robots'
+export * from './utils/sitemap'
+export * from './utils/storefrontConfig'
+export * from './PageMeta/canonicalize'
+export * from './Document'
+export * from './utils/cookie'

package/utils/cssFlags.tsx

@@ -0,0 +1,53 @@
+import { FLAGS_STORAGE_KEY } from './getCssFlagInitScript'
+
+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)
+}
+
+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/getCssFlagInitScript.tsx

@@ -0,0 +1,20 @@
+export const FLAGS_STORAGE_KEY = 'gc-flags'
+
+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){}})();`,
+      }}
+    />
+  )
+}

package/utils/normalizeLocale.ts

@@ -0,0 +1,26 @@
+import { storefrontConfig, storefrontConfigDefault } from './storefrontConfig'
+
+/**
+ * To support using multiple storefronts using the same language locale (which
+ * next.js does not support), we use an additional 'tag' in the locale code in
+ * which we specify a unique string (i.e. a Magento store code).
+ *
+ * This makes next.js happy, as it still follows the BCP47 spec. However, the
+ * Intl API and other places may not accept this as a valid locale.
+ *
+ * Use this method to get a 'normalized' locale that can safely be used in such
+ * places.
+ */
+export function normalizeLocale(locale: string | undefined = storefrontConfigDefault().locale) {
+  const linguiLocale = storefrontConfig(locale)?.linguiLocale
+  if (linguiLocale) return linguiLocale
+
+  // Specifically match the xx-yy-storecode format, so we don't accidently 'fix'
+  // valid locales such as he-Hebr-IL or zh-Hans-CN. This this isn't perfect and
+  // we should consider a more formalized way to use such pseudo-locales, which
+  // can be matched more precisely.
+
+  const matches = locale?.match(/([a-z]{2})-([a-z]{2})-([a-z]+)/i)
+  if (matches) return `${matches[1]}-${matches[2]}`
+  return locale
+}

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/canonicalize'
+
+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/utils/storefrontConfig.ts

@@ -0,0 +1,8 @@
+export const storefrontAll = import.meta.graphCommerce.storefront
+
+/** Get the current storefront config based on the provided locale */
+export const storefrontConfig = (locale?: string | undefined) =>
+  storefrontAll.find((l) => l.locale === locale)
+
+export const storefrontConfigDefault = () =>
+  storefrontAll.find((l) => l.defaultLocale) ?? storefrontAll[0]

package/ActionCard/ActionCardListForm.tsx

@@ -1,88 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
-import React, { MouseEventHandler } from 'react'
-import { ActionCardProps } from './ActionCard'
-import { ActionCardList, ActionCardListProps } from './ActionCardList'
-
-export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
-
-export type ActionCardItemRenderProps<T> = ActionCardProps & {
-  onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
-} & T
-
-export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
-  ActionCardListProps,
-  'value' | 'error' | 'onChange' | 'children'
-> &
-  Omit<ControllerProps<F>, 'render'> & {
-    items: A[]
-    render: React.FC<ActionCardItemRenderProps<A>>
-  }
-
-export function ActionCardListForm<
-  T extends ActionCardItemBase,
-  F extends FieldValues = FieldValues,
->(props: ActionCardListFormProps<T, F>) {
-  const {
-    required,
-    rules,
-    items,
-    render,
-    control,
-    name,
-    errorMessage,
-    defaultValue,
-    multiple,
-    ...other
-  } = props
-  const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
-
-  function onSelect(itemValue: unknown, selectValues: unknown) {
-    return multiple
-      ? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
-      : selectValues === itemValue
-  }
-
-  const {
-    field: { onChange, value, ref },
-    fieldState,
-    formState,
-  } = useController({
-    ...props,
-    control,
-    name,
-    defaultValue,
-    rules: { required: errorMessage || required, ...rules },
-  })
-
-  return (
-    <ActionCardList
-      {...other}
-      multiple={multiple}
-      required={required}
-      value={value}
-      ref={ref}
-      onChange={(_, incomming) => onChange(incomming)}
-      error={formState.isSubmitted && !!fieldState.error}
-      errorMessage={fieldState.error?.message}
-    >
-      {items.map((item) => (
-        <RenderItem
-          {...item}
-          key={item.value ?? ''}
-          value={item.value}
-          selected={onSelect(item.value, value)}
-          onReset={(e) => {
-            e.preventDefault()
-            onChange(null)
-          }}
-        />
-      ))}
-    </ActionCardList>
-  )
-}

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'