@graphcommerce/next-ui 8.1.0-canary.9 → 9.0.0-canary.55

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.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,14 +26,13 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.9",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.9",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.9",
-    "@graphcommerce/image": "^8.1.0-canary.9",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.55",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.55",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.55",
+    "@graphcommerce/image": "^9.0.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/server.ts

@@ -0,0 +1,8 @@
+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'

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/sitemap.ts

@@ -1,6 +1,6 @@
 import { GetServerSidePropsContext, GetStaticPathsResult } from 'next'
 import { getServerSideSitemapLegacy, ISitemapField } from 'next-sitemap'
-import { canonicalize } from '../PageMeta/PageMeta'
+import { canonicalize } from '../PageMeta/canonicalize'
 
 export function excludeSitemap(excludes: string[]) {
   const regexp = excludes.map((exclude) => new RegExp(exclude.replace(/\*/g, '.*?')))

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/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'