@hanzo/commerce 7.3.0 → 7.3.2

package/components/node-tabs/index.tsx

@@ -1,91 +1,91 @@
-'use client'
-import React, { useState } from 'react'
-
-import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
-import { cn } from '@hanzo/ui/util'
-
-import type { CategoryNode, StringMutator, StringArrayMutator } from '../../types'
-import NodeImage from './node-image'
-
-const NodeTabs: React.FC<{
-  levelNodes: CategoryNode[]
-  mutator: StringMutator | StringArrayMutator
-  multiple?: boolean
-  className?: string
-  buttonClx?: string
-  itemClx?: string
-  mobile?: boolean
-  tabSize?: string
-  show?: 'image' | 'label' | 'image-and-label'
-}> = ({
-  levelNodes,
-  mutator,
-  multiple=false,
-  buttonClx='',
-  itemClx='',
-  className='',
-  mobile=false,
-  tabSize,
-  show='image-and-label'
-}) => {
-
-  const [last, setLast] = useState<string | undefined>(undefined)
-
-  const handleChangeMultiple = (selected: string[]) => {
-    (mutator as StringArrayMutator).set(selected)
-    setLast(selected.length === 1 ? selected[0] : undefined)
-  }
-
-  const handleChangeSingle = (selected: string) => {
-    (mutator as StringMutator).set(selected)
-    if (selected) { setLast(selected) }
-  }
-
-  const roundedToSpread: any = {}
-  if (multiple) {
-    roundedToSpread.rounded = 'xl'   
-  }
-
-  const val = multiple ? 
-    (mutator as StringArrayMutator).get() 
-    : 
-    (mutator as StringMutator).get()
-
-  return (
-    <ToggleGroup 
-      type={multiple ? 'multiple' : 'single'} 
-      value={val}
-      variant='default'
-      size={tabSize ? tabSize : (mobile ? 'sm' : 'default')}
-      onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
-      className={className}
-      {...roundedToSpread}
-    >
-    {levelNodes.map((treeNode, index) => {
-      const roundedToSpread: any = {}
-      if (!multiple) {
-        roundedToSpread.rounded = 'none'   
-        if (index === 0) { roundedToSpread.rounded = 'llg' }
-        else if (index === levelNodes.length - 1) { roundedToSpread.rounded = 'rlg' } 
-      }
-      return (
-        <ToggleGroupItem 
-          key={treeNode.skuToken}
-          value={treeNode.skuToken} 
-          disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} 
-          aria-label={`Select ${treeNode.label}`}
-          {...roundedToSpread}
-          className={buttonClx}
-        >
-          <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
-            {!(show === 'label') && (<NodeImage treeNode={treeNode} />) }
-            {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
-          </span>
-        </ToggleGroupItem>
-      )
-    })}
-    </ToggleGroup>  
-  )
-}
-
-export default NodeTabs
+'use client'
+import React, { useState } from 'react'
+
+import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
+import { cn } from '@hanzo/ui/util'
+
+import type { CategoryNode, StringMutator, StringArrayMutator } from '../../types'
+import NodeImage from './node-image'
+
+const NodeTabs: React.FC<{
+  levelNodes: CategoryNode[]
+  mutator: StringMutator | StringArrayMutator
+  multiple?: boolean
+  className?: string
+  buttonClx?: string
+  itemClx?: string
+  mobile?: boolean
+  tabSize?: string
+  show?: 'image' | 'label' | 'image-and-label'
+}> = ({
+  levelNodes,
+  mutator,
+  multiple=false,
+  buttonClx='',
+  itemClx='',
+  className='',
+  mobile=false,
+  tabSize,
+  show='image-and-label'
+}) => {
+
+  const [last, setLast] = useState<string | undefined>(undefined)
+
+  const handleChangeMultiple = (selected: string[]) => {
+    (mutator as StringArrayMutator).set(selected)
+    setLast(selected.length === 1 ? selected[0] : undefined)
+  }
+
+  const handleChangeSingle = (selected: string) => {
+    (mutator as StringMutator).set(selected)
+    if (selected) { setLast(selected) }
+  }
+
+  const roundedToSpread: any = {}
+  if (multiple) {
+    roundedToSpread.rounded = 'xl'   
+  }
+
+  const val = multiple ? 
+    (mutator as StringArrayMutator).get() 
+    : 
+    (mutator as StringMutator).get()
+
+  return (
+    <ToggleGroup 
+      type={multiple ? 'multiple' : 'single'} 
+      value={val}
+      variant='default'
+      size={tabSize ? tabSize : (mobile ? 'sm' : 'default')}
+      onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
+      className={className}
+      {...roundedToSpread}
+    >
+    {levelNodes.map((treeNode, index) => {
+      const roundedToSpread: any = {}
+      if (!multiple) {
+        roundedToSpread.rounded = 'none'   
+        if (index === 0) { roundedToSpread.rounded = 'llg' }
+        else if (index === levelNodes.length - 1) { roundedToSpread.rounded = 'rlg' } 
+      }
+      return (
+        <ToggleGroupItem 
+          key={treeNode.skuToken}
+          value={treeNode.skuToken} 
+          disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} 
+          aria-label={`Select ${treeNode.label}`}
+          {...roundedToSpread}
+          className={buttonClx}
+        >
+          <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
+            {!(show === 'label') && (<NodeImage treeNode={treeNode} />) }
+            {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
+          </span>
+        </ToggleGroupItem>
+      )
+    })}
+    </ToggleGroup>  
+  )
+}
+
+export default NodeTabs

package/components/node-tabs/node-image.tsx

@@ -1,31 +1,31 @@
-import React from 'react'
-import Image from 'next/image'
-
-import type { CategoryNode } from '../../types'
-
-const ICON_SIZE = 20
-
-const NodeImage: React.FC<{
-  treeNode: CategoryNode
-}> = ({
-  treeNode: {
-    img,
-    imgAR: ar,
-    label
-  }
-}) => {
-
-  if (!img) { return null }
-    // treat as URL
-  return (typeof img === 'string') ? (
-    <Image 
-      src={img as string} 
-      alt={`Toggle ${label}`} 
-      className={'block mr-1 '} 
-      width={ar ?  ar * ICON_SIZE : ICON_SIZE}
-      height={ICON_SIZE}
-    />
-  ) : (img as React.ReactNode) 
-} 
-
-export default NodeImage
+import React from 'react'
+import Image from 'next/image'
+
+import type { CategoryNode } from '../../types'
+
+const ICON_SIZE = 20
+
+const NodeImage: React.FC<{
+  treeNode: CategoryNode
+}> = ({
+  treeNode: {
+    img,
+    imgAR: ar,
+    label
+  }
+}) => {
+
+  if (!img) { return null }
+    // treat as URL
+  return (typeof img === 'string') ? (
+    <Image 
+      src={img as string} 
+      alt={`Toggle ${label}`} 
+      className={'block mr-1 '} 
+      width={ar ?  ar * ICON_SIZE : ICON_SIZE}
+      height={ICON_SIZE}
+    />
+  ) : (img as React.ReactNode) 
+} 
+
+export default NodeImage

package/index.ts

@@ -1,13 +1,13 @@
-export * from './service/context'
-export * from './components'
-  // Impl-dependent, so leave w impl
-export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone'
-export { 
-  useSyncSkuParamWithCurrentItem, 
-  getFacetValuesMutator, 
-  formatCurrencyValue,
-  ProductMediaAccessor,
-  LineItemRef 
-} from './util'
-
+export * from './service/context'
+export * from './components'
+  // Impl-dependent, so leave w impl
+export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone'
+export { 
+  useSyncSkuParamWithCurrentItem, 
+  getFacetValuesMutator, 
+  formatCurrencyValue,
+  ProductMediaAccessor,
+  LineItemRef 
+} from './util'
+
 export * from './util/selection-ui-specifiers'

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "@hanzo/commerce",
-  "version": "7.3.0",
-  "description": "e-commerce framework.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "scope": "@hanzo"
-  },
-  "author": "Hanzo AI, Inc.",
-  "license": "BSD-3-Clause",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hanzoai/react-sdk.git",
-    "directory": "packages/commerce"
-  },
-  "keywords": [
-    "cart",
-    "hanzoai",
-    "hanzo"
-  ],
-  "scripts": {
-    "lat": "npm show @hanzo/commerce version",
-    "pub": "npm publish",
-    "tc": "tsc"
-  },
-  "exports": {
-    ".": "./index.ts",
-    "./types": "./types/index.ts",
-    "./debug": "./service/debug.ts"
-  },
-  "dependencies": {
-    "ethers": "^6.12.0",
-    "next-usequerystate": "^1.17.1",
-    "react-square-web-payments-sdk": "^3.2.1",
-    "square": "^35.1.0"
-  },
-  "peerDependencies": {
-    "@hanzo/auth": "^2.4.10",
-    "@hanzo/ui": "^3.8.31",
-    "@hookform/resolvers": "^3.3.4",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "firebase": "^10.8.0",
-    "lucide-react": "^0.344.0",
-    "mobx": "^6.12.3",
-    "mobx-react-lite": "^4.0.7",
-    "mobx-utils": "^6.0.8",
-    "next": "14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.4",
-    "zod": "3.23.8"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "cross-fetch": "^4.0.0",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "@hanzo/commerce",
+  "version": "7.3.2",
+  "description": "e-commerce framework.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@hanzo"
+  },
+  "author": "Hanzo AI, Inc.",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/react-sdk.git",
+    "directory": "pkg/commerce"
+  },
+  "keywords": [
+    "cart",
+    "hanzoai",
+    "hanzo"
+  ],
+  "scripts": {
+    "lat": "npm show @hanzo/commerce version",
+    "pub": "npm publish",
+    "tc": "tsc"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./types": "./types/index.ts",
+    "./debug": "./service/debug.ts"
+  },
+  "dependencies": {
+    "ethers": "^6.12.0",
+    "next-usequerystate": "^1.17.1",
+    "react-square-web-payments-sdk": "^3.2.1",
+    "square": "^35.1.0"
+  },
+  "peerDependencies": {
+    "@hanzo/auth": "^2.4.18",
+    "@hanzo/ui": "^3.8.36",
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "firebase": "^10.8.0",
+    "lucide-react": "^0.344.0",
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "mobx-utils": "^6.0.8",
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
+    "zod": "3.23.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "cross-fetch": "^4.0.0",
+    "typescript": "^5.4.5"
+  }
+}

package/service/context.tsx

@@ -1,45 +1,45 @@
-'use client'
-import React, { 
-  createContext, 
-  useContext, 
-  useRef, 
-  type PropsWithChildren, 
-} from 'react'
-
-// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
-import { enableStaticRendering } from 'mobx-react-lite'
-enableStaticRendering(typeof window === "undefined")
-
-import type CommerceService from '../types/commerce-service'
-import type { CommerceConfig } from '../types'
-import { getInstance } from './impls/standalone'
-
-const CommerceContext = createContext<CommerceService | undefined>(undefined)
-
-const useCommerce = (): CommerceService => {
-  return useContext(CommerceContext) as CommerceService
-}
-
-const CommerceProvider: React.FC<PropsWithChildren & {
-  config: CommerceConfig
-}> = ({ 
-  children,
-  config
-}) => {
-
-    // TODO: Inject Promo fixture here from siteDef
-  const service = getInstance(config)
-  const valueRef = useRef<CommerceService>(service)
-
-  return (
-    <CommerceContext.Provider value={valueRef.current}>
-      {children}
-    </CommerceContext.Provider>
-  )
-}
-
-export {
-  useCommerce, 
-  CommerceProvider
-}
-
+'use client'
+import React, { 
+  createContext, 
+  useContext, 
+  useRef, 
+  type PropsWithChildren, 
+} from 'react'
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+import { enableStaticRendering } from 'mobx-react-lite'
+enableStaticRendering(typeof window === "undefined")
+
+import type CommerceService from '../types/commerce-service'
+import type { CommerceConfig } from '../types'
+import { getInstance } from './impls/standalone'
+
+const CommerceContext = createContext<CommerceService | undefined>(undefined)
+
+const useCommerce = (): CommerceService => {
+  return useContext(CommerceContext) as CommerceService
+}
+
+const CommerceProvider: React.FC<PropsWithChildren & {
+  config: CommerceConfig
+}> = ({ 
+  children,
+  config
+}) => {
+
+    // TODO: Inject Promo fixture here from siteDef
+  const service = getInstance(config)
+  const valueRef = useRef<CommerceService>(service)
+
+  return (
+    <CommerceContext.Provider value={valueRef.current}>
+      {children}
+    </CommerceContext.Provider>
+  )
+}
+
+export {
+  useCommerce, 
+  CommerceProvider
+}
+

package/service/debug.ts

@@ -1,41 +1,41 @@
-import type { CategoryNode,  CategoryNodeRole, Family, LineItem } from '../types'
-
-  // Node recursion
-export const categoryNodeDump = (node: CategoryNode, level: number = 0): void => {
-  const spacers: string[] = []
-  for (let i = 0; i < level; i++) {
-    spacers.push('----')
-  }
-  console.log("NODE:" + spacers.join(''), node.skuToken)
-  node.subNodes?.forEach((sn: CategoryNode) => {categoryNodeDump(sn, level + 1)})
-}
-
-export const selectedFamiliesDump = (result: Family[]): string => {
-  const toDisplay = result.map((c) => (c.id))
-  return JSON.stringify(toDisplay, null, 2)
-}
-
-export const peekDump = (result : {
-    role: CategoryNodeRole
-    family: Family | undefined
-    families: Family[] | undefined
-    node: CategoryNode | undefined
-    item: LineItem | undefined
-} | string): string => {
-
-  if (typeof result === 'string') {
-    return result
-  }
-
-  const toDisplay = {
-    role: result.role,
-    item: result.item ? result.item.sku : 'UNDEF',
-    family: result.family ? result.family.id : 'UNDEF',
-    families: result.families ? result.families.map((f) => (f.id)) : 'UNDEF',
-    node: result.node ?
-      (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : ''))
-      :
-      'UNDEF'
-  }
-  return JSON.stringify(toDisplay, null, 2)
-}
+import type { CategoryNode,  CategoryNodeRole, Family, LineItem } from '../types'
+
+  // Node recursion
+export const categoryNodeDump = (node: CategoryNode, level: number = 0): void => {
+  const spacers: string[] = []
+  for (let i = 0; i < level; i++) {
+    spacers.push('----')
+  }
+  console.log("NODE:" + spacers.join(''), node.skuToken)
+  node.subNodes?.forEach((sn: CategoryNode) => {categoryNodeDump(sn, level + 1)})
+}
+
+export const selectedFamiliesDump = (result: Family[]): string => {
+  const toDisplay = result.map((c) => (c.id))
+  return JSON.stringify(toDisplay, null, 2)
+}
+
+export const peekDump = (result : {
+    role: CategoryNodeRole
+    family: Family | undefined
+    families: Family[] | undefined
+    node: CategoryNode | undefined
+    item: LineItem | undefined
+} | string): string => {
+
+  if (typeof result === 'string') {
+    return result
+  }
+
+  const toDisplay = {
+    role: result.role,
+    item: result.item ? result.item.sku : 'UNDEF',
+    family: result.family ? result.family.id : 'UNDEF',
+    families: result.families ? result.families.map((f) => (f.id)) : 'UNDEF',
+    node: result.node ?
+      (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : ''))
+      :
+      'UNDEF'
+  }
+  return JSON.stringify(toDisplay, null, 2)
+}