@graphcommerce/next-ui 9.1.0-canary.34 → 9.1.0-canary.36

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.36
+
+### Patch Changes
+
+- [`90f8dd8`](https://github.com/graphcommerce-org/graphcommerce/commit/90f8dd89efd62e2b5a13e9c2bf265840d99e2473) - Create useCookies hook and simplify the useCookie query ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.35
+
+### Patch Changes
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`6a3e7f9`](https://github.com/graphcommerce-org/graphcommerce/commit/6a3e7f9bec6d03c146718ad594b064a75b536e99) - cssFlag and cssNotFlag css selector can now select values ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`a4344ed`](https://github.com/graphcommerce-org/graphcommerce/commit/a4344ed7ff7b3b5f88185c1f6a5fc4b6306fc472) - Created a useCookie hook that is synced between usages ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`f89210b`](https://github.com/graphcommerce-org/graphcommerce/commit/f89210b09e64f520d308cb1bac693c027be1ac46) - Solve issue where the MenuFabSecondaryItem coudn't handle text overflow. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.34
 
 ## 9.1.0-canary.33

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -43,7 +43,14 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
           {icon}
         </ListItemIcon>
       )}
-      <ListItemText className={classes.icon}>{children}</ListItemText>
+      <ListItemText
+        className={classes.icon}
+        primaryTypographyProps={{
+          sx: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+        }}
+      >
+        {children}
+      </ListItemText>
     </ListItemButton>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.34",
+  "version": "9.1.0-canary.36",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.34",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.34",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.34",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.34",
-    "@graphcommerce/image": "^9.1.0-canary.34",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.34",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.34",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.36",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.36",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.36",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.36",
+    "@graphcommerce/image": "^9.1.0-canary.36",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.36",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.36",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/cookie.ts

@@ -1,17 +1,25 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import type { SerializeOptions } from 'cookie'
 import { parse, serialize } from 'cookie'
+import { motionValue } from 'framer-motion'
+import { useIsSSR } from '../hooks'
 
+// We need this motionValue to be synced with the actual cookie store.
+const cookieNotify = motionValue<number>(0)
+
+export function cookie(): Record<string, string | undefined>
 /** Read a cookie */
-export function cookie(name: string): string | undefined
+export function cookie<T extends string>(name: string): T | undefined
 /** Set a cookie */
 export function cookie(name: string, value: string, options?: SerializeOptions): void
 /** Delete a cookie */
 export function cookie(name: string, value: null): void
 /** Function to handle the three different cases */
-export function cookie(name: string, value?: string | null, options?: SerializeOptions) {
-  if (typeof window === 'undefined') {
-    return undefined
-  }
+export function cookie(name?: string, value?: string | null, options?: SerializeOptions) {
+  if (typeof window === 'undefined') return undefined
+
+  // Read all cookies
+  if (typeof name === 'undefined') return parse(document.cookie)
 
   // Read a cookie
   if (typeof value === 'undefined') return parse(document.cookie)[name]
@@ -20,6 +28,7 @@ export function cookie(name: string, value?: string | null, options?: SerializeO
   if (typeof value === 'string') {
     const serialized = serialize(name, value, { path: '/', maxAge: 31536000, ...options })
     document.cookie = serialized
+    cookieNotify.set(cookieNotify.get() + 1)
     return undefined
   }
 
@@ -27,8 +36,38 @@ export function cookie(name: string, value?: string | null, options?: SerializeO
   if (value === null) {
     const serialized = serialize(name, '', { path: '/', maxAge: 0 })
     document.cookie = serialized
+    cookieNotify.set(cookieNotify.get() + 1)
     return undefined
   }
 
   return undefined
 }
+
+/**
+ * This makes sure this hook is rerendered when the cookie changes, we do not actually use the
+ * value.
+ */
+export function useCookies(): Record<string, string | undefined> {
+  // Initial render it should always be empty since the server renders cookie-less.
+  // Whenever the server can handle cookies, we can remove this and directly return the cookie value.
+  const isSsr = useIsSSR()
+
+  useMotionValueValue(cookieNotify, (v) => v)
+
+  return isSsr ? {} : cookie()
+}
+
+export function useCookie<T extends string>(
+  name: string,
+  options: SerializeOptions = { sameSite: true },
+  defaultValue?: T | null,
+): [T | undefined | null, (value: T | null) => void] {
+  const update = (val: T | null) => {
+    if (val) cookie(name, val, options)
+    else cookie(name, null)
+  }
+
+  const cookies = useCookies()
+  const value = (cookies[name] as T | undefined | null) ?? defaultValue
+  return [value, update] as const
+}

package/utils/cssFlags.tsx

@@ -35,10 +35,11 @@ export function getCssFlag(flagName: string) {
  * Example:
  *
  * ```tsx
- * ;<Box sx={{ [cssFlagSelector('dark')]: { color: 'white' } }} />
+ * ;<Box sx={{ [cssFlag('mode', 'dark')]: { color: 'white' } }} />
  * ```
  */
-export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}] &` as const
+export const cssFlag = <T extends string>(flagName: T, val?: string) =>
+  `html[data-${flagName}${val ? `=${val}` : ''}] &` as const
 
 /**
  * Easily create a CSS selector that only applies when a flag is not set.
@@ -46,8 +47,8 @@ export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}
  * Example:
  *
  * ```tsx
- * ;<Box sx={{ [cssNotFlagSelector('dark')]: { color: 'black' } }} />
+ * ;<Box sx={{ [cssNotFlag('mode', 'dark')]: { color: 'black' } }} />
  * ```
  */
-export const cssNotFlag = <T extends string>(flagName: T) =>
-  `html:not([data-${flagName}]) &` as const
+export const cssNotFlag = <T extends string>(flagName: T, val?: string) =>
+  `html:not([data-${flagName}${val ? `=${val}` : ''}]) &` as const