Support for Buy Drawer and Checkout Widget improvements in client app (…

…#98)

[email protected], [email protected], [email protected]
ui:
 Added "textTransform: 'uppercase'" to Typography plugin for h1,2,3
  package.json: added exports section
  util/TwoWayMap
  exporting VariantProps from 'class-variance-authority'
  LinkDef now extends VariantProps<typeof buttonVariants>
  primitives/Button now conforms more cleanly w VariantProps
  primitives/Drawer added 'modal' prop to Content;
    shouldScaleBackground is now false by default
  primitives/LinkElement now conforms more cleanly w VariantProps

cmmc:
    context/CommerceUI 
    moved context to a dir at the top level
    CommerceContextValue now has the Service, and a CommerceUI store
    new useCommerceUI to access store
    registers most recently interacted with LineItem
    controls showing buy UI which is now impl in client app
  components/buy/CarouselBuyCard
    CheckoutButton is a render component
  components/buy/AllVaraiantsCarousel
    fix: doesn't show swatch only one option
  util/LineItemRef
  
* pnpm 9.x issue, downgrading to 8.15.7
* moved drawer to client sites mono (packages/core)
* bumps: [email protected], [email protected]

package.json

@@ -8,7 +8,8 @@
     "url": "https://twitter.com/hanzoai"
   },
   "scripts": {
-    "clean:all": "rm -rf node_modules && pnpm -r clean"
+    "clean:nm": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
+    "clean:all": "pnpm clean:nm && rm pnpm-lock.yaml"
   },
   "packageManager": "[email protected]",
   "dependencies": {

packages/auth/package.json

@@ -23,9 +23,7 @@
   "scripts": {
     "lat": "npm show @hanzo/auth version",
     "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf dist && rm -rf node_modules"
+    "tc": "tsc"
   },
   "dependencies": {
     "firebase-admin": "^12.1.0"
@@ -39,7 +37,7 @@
     "mobx-react-lite": "^4.0.5",
     "next": "14.1.3",
     "react": "^18.2.0",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.3",
     "zod": "3.21.4"
   },
   "devDependencies": {

packages/commerce/components/Icons.tsx

@@ -16,7 +16,7 @@ import {
   Barcode
 } from "lucide-react"
 
-export const Icons = {
+export default {
   shoppingCart: ShoppingCart,
   menu: Menu,
   chevronLeft: ChevronLeft,

packages/commerce/components/buy/add-to-cart-widget.tsx → packages/commerce/components/add-to-cart-widget.tsx

@@ -1,16 +1,19 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, toast, type ButtonSizes, type ButtonVariants } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { Button, buttonVariants } from '@hanzo/ui/primitives'
+import { cn, type VariantProps } from '@hanzo/ui/util'
 
-import { Icons } from '../Icons'
-import type { LineItem } from '../../types'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+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
@@ -19,12 +22,36 @@ 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') {
+      reactionDisposer.current = reaction(
+        () => (item.quantity),
+        (quantity: number, previous: number) => {
+          ui.itemQuantityChanged(item, quantity, previous)
+        }  
+      )
+    }
+    return () => {
+      if (reactionDisposer.current) {
+        reactionDisposer.current()
+      }  
+    }
+  }, [])
+
   const ROUNDED_VAL = 'lg'
     // no need to safelist, since its used widely
   const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `
@@ -149,7 +176,7 @@ const AddToCartWidget: React.FC<{
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
       size={ghost ? 'xs' : 'default'}
-      variant={variant as ButtonVariants}
+      variant={variant === 'minimal' ? 'ghost' : (variant as VariantProps<typeof buttonVariants>['variant'])}
       rounded={ROUNDED_VAL}
       className={cn(buttonClx, className)}
       onClick={inc}