@hanzo/react-drawer, navigation-menu; latest TS, next, react (#100)

+ ui/StepAnimation drawer: support for finer snap point control moved CommerceUI to client project (since it is proj specific); moved BuyButton to client project; + getItemBySku() in service versions: [email protected], [email protected], [email protected]
hanzoai · May 18, 2024 · b806f93 · b806f93
1 parent cfddbb9
commit b806f93
Show file tree

Hide file tree

Showing 23 changed files with 2,376 additions and 2,300 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -58,16 +58,16 @@
     "cmdk": "^0.2.0",
     "contentlayer": "0.3.4",
     "date-fns": "^2.30.0",
-    "embla-carousel-autoplay": "8.0.0-rc15",
-    "embla-carousel-react": "8.0.0-rc15",
+    "embla-carousel-autoplay": "8.1.1",
+    "embla-carousel-react": "8.1.1",
     "framer-motion": "^11.0.24",
     "geist": "^1.2.2",
     "input-otp": "^1.2.2",
     "jotai": "^2.1.0",
     "lodash.template": "^4.5.0",
     "lucide-react": "0.359.0",
     "markdown-wasm": "^1.2.0",
-    "next": "14.1.3",
+    "next": "14.2.3",
     "next-contentlayer": "0.3.4",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
@@ -106,7 +106,7 @@
     "rimraf": "^4.1.3",
     "shiki": "^1.1.7",
     "tailwindcss": "^3.4.0",
-    "typescript": "^5.4.2",
+    "typescript": "^5.4.5",
     "unist-builder": "3.0.0",
     "unist-util-visit": "^4.1.2"
   },

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "^18.2.64"
+      "react": "^18.3.1",
+      "@types/react": "^18.3.2"
     }
   }
 }
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/auth",
-  "version": "2.4.6",
+  "version": "2.4.9",
   "description": "Library with Firebase authentication.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -29,19 +29,19 @@
     "firebase-admin": "^12.1.0"
   },
   "peerDependencies": {
-    "@hanzo/ui": "^3.6.5",
+    "@hanzo/ui": "^3.8.2",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.344.0",
-    "mobx": "^6.12.0",
-    "mobx-react-lite": "^4.0.5",
-    "next": "14.1.3",
-    "react": "^18.2.0",
-    "react-hook-form": "^7.51.3",
-    "zod": "3.21.4"
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-hook-form": "^7.51.4",
+    "zod": "3.23.8"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.1",
     "cross-fetch": "^4.0.0",
     "typescript": "^5.4.5"
   }

diff --git a/packages/commerce/components/add-to-cart-widget.tsx b/packages/commerce/components/add-to-cart-widget.tsx
@@ -9,11 +9,9 @@ import { cn, type VariantProps } from '@hanzo/ui/util'
 import Icons from './Icons'
 import type { LineItem } from '../types'
 import { sendFBEvent, sendGAEvent } from '../util/analytics'
-import { useCommerceUI } from '..'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
-  registerAdd?: boolean
   disabled?: boolean
   className?: string
   buttonClx?: string
@@ -22,26 +20,19 @@ const AddToCartWidget: React.FC<{
 }> = observer(({
   item,
   variant='primary',
-  registerAdd=true,
   disabled=false,
   className='',
   buttonClx='',
   onQuantityChanged
 }) => {
 
-  const ui = useCommerceUI()
-
   const reactionDisposer = useRef<IReactionDisposer | undefined>(undefined)
-
   useEffect(() => {
-      // Only tell the micro-drawer 
-      // if we're not part of the cart ui,
-      // or part of the main drawer.
-    if (registerAdd && variant !== 'minimal') {
+    if (onQuantityChanged) {
       reactionDisposer.current = reaction(
         () => (item.quantity),
         (quantity: number, previous: number) => {
-          ui.itemQuantityChanged(item, quantity, previous)
+          onQuantityChanged(item.sku, quantity, previous)
         }  
       )
     }
@@ -75,11 +66,7 @@ const AddToCartWidget: React.FC<{
   }
 
   const inc = () => {
-    const old = item.quantity
     item.increment()
-    if (onQuantityChanged) {
-      onQuantityChanged(item.sku, old, old + 1) 
-    }
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -104,11 +91,7 @@ const AddToCartWidget: React.FC<{
   }
 
   const dec = () => {
-    const old = item.quantity
     item.decrement()
-    if (onQuantityChanged) {
-      onQuantityChanged(item.sku, old, old - 1) 
-    }
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,

diff --git a/packages/commerce/components/buy/buy-button.tsx b/packages/commerce/components/buy/buy-button.tsx
diff --git a/packages/commerce/components/buy/buy-card.tsx b/packages/commerce/components/buy/buy-card.tsx
@@ -86,7 +86,7 @@ const BuyCard: React.FC<{
 
   useEffect(() => {
 
-    let requestedFamily = cmmc.getFamily(skuPath) 
+    let requestedFamily = cmmc.getFamilyById(skuPath) 
     let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
     let initialFamily = undefined
 
@@ -137,7 +137,7 @@ const BuyCard: React.FC<{
         },
         (famId) => {
           if (famId && famId !== cmmc.currentItem?.familyId) {
-            const fam = cmmc.getFamily(famId)
+            const fam = cmmc.getFamilyById(famId)
             if (fam) { 
               cmmc.setCurrentItem(fam.products[0].sku) 
             }
@@ -248,7 +248,6 @@ const BuyCard: React.FC<{
     {(cmmc.currentItem) && (
       <AddToCartWidget 
         item={cmmc.currentItem}
-        registerAdd={false}
         onQuantityChanged={onQuantityChanged} 
         className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
       />

diff --git a/packages/commerce/components/buy/carousel-buy-card.tsx b/packages/commerce/components/buy/carousel-buy-card.tsx
@@ -203,7 +203,6 @@ const CarouselBuyCard: React.FC<{
     <div className={clx}>
       <AddToCartWidget 
         item={cmmc.currentItem}
-        registerAdd={true}
         onQuantityChanged={onQuantityChanged} 
         variant={cmmc.cartEmpty ? 'primary' : 'outline'}
         className={addBtnClx} 

diff --git a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx
@@ -61,7 +61,7 @@ const CartLineItem: React.FC<{
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' registerAdd={false} item={item} buttonClx='!h-8 md:!h-6' />
+          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>

diff --git a/packages/commerce/components/index.ts b/packages/commerce/components/index.ts
@@ -1,5 +1,4 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as BuyButton } from './buy/buy-button'
 export { default as CarouselBuyCard } from './buy/carousel-buy-card'
 
 export { default as CartAccordian } from './cart/cart-accordian'

diff --git a/packages/commerce/context/commerce-ui.ts b/packages/commerce/context/commerce-ui.ts
diff --git a/packages/commerce/context/index.tsx b/packages/commerce/context/index.tsx
@@ -4,7 +4,6 @@ import React, {
   useContext, 
   useRef, 
   type PropsWithChildren, 
-  useEffect
 } from 'react'
 
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
@@ -15,51 +14,29 @@ import type { ServiceOptions } from '..'
 import type CommerceService from '../types/commerce-service'
 import getInstance from '../service/get-instance'
 import type { Family, CategoryNode, SelectionUISpecifier } from '../types'
-import  { type CommerceUI, CommerceUIStore } from './commerce-ui'
 
-type CommerceContextValue = {
-  service: CommerceService
-  ui: CommerceUI  
-}
-
-const CommerceContext = createContext<CommerceContextValue | undefined>(undefined)
+const CommerceContext = createContext<CommerceService | undefined>(undefined)
 
 const useCommerce = (): CommerceService => {
-  return (useContext(CommerceContext) as CommerceContextValue)?.service
-}
-
-const useCommerceUI = (): CommerceUI => {
-  return (useContext(CommerceContext) as CommerceContextValue)?.ui
+  return useContext(CommerceContext) as CommerceService
 }
 
 const CommerceProvider: React.FC<PropsWithChildren & {
   families: Family[]
   rootNode: CategoryNode
   options?: ServiceOptions
   uiSpecs?: Record<string, SelectionUISpecifier>
-  DEBUG_NO_TICK?: boolean
 }> = ({ 
   children,
   families,
   rootNode,
   options,
-  uiSpecs,
-  DEBUG_NO_TICK=false
+  uiSpecs
 }) => {
 
-  useEffect(() => {
-    if (DEBUG_NO_TICK) return
-    const intervalId = setInterval(() => {
-      (valueRef.current.ui as CommerceUIStore).tick()   
-    }, 250)  
-    return () => { clearInterval(intervalId) }
-  }, [])
-
     // TODO: Inject Promo fixture here from siteDef
   const service = getInstance(families, rootNode, options, uiSpecs)
-  const ui = new CommerceUIStore(service)
-
-  const valueRef = useRef<CommerceContextValue>({service, ui})
+  const valueRef = useRef<CommerceService>(service)
 
   return (
     <CommerceContext.Provider value={valueRef.current}>
@@ -70,7 +47,6 @@ const CommerceProvider: React.FC<PropsWithChildren & {
 
 export {
   useCommerce, 
-  useCommerceUI, 
   CommerceProvider
 }