[email protected], [email protected], [email protected] (#96)

ui: Added "textTransform: 'uppercase'" to Typography plugin for h1,2,3 cmmc: moved context to a dir at the top level CommerceContextValue now has the Service, and a CommerceUI store new useCommerceUI to access store
hanzoai · Apr 20, 2024 · f4f33b5 · f4f33b5
1 parent fa83fc1
commit f4f33b5
Show file tree

Hide file tree

Showing 21 changed files with 7,410 additions and 5,709 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "clean:all": "rm -rf node_modules && pnpm -r clean"
   },
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@9.0.4",
   "dependencies": {
     "husky": "^8.0.3"
   },

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/auth",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "Library with Firebase authentication.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -31,7 +31,7 @@
     "firebase-admin": "^12.0.0"
   },
   "peerDependencies": {
-    "@hanzo/ui": "^3.6.3",
+    "@hanzo/ui": "^3.6.4",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.344.0",

diff --git a/packages/commerce/components/buy/buy-card.tsx b/packages/commerce/components/buy/buy-card.tsx
@@ -14,7 +14,7 @@ import type {
   CategoryNode, 
 } from '../../types'
 
-import { useCommerce } from '../../service/context'
+import { useCommerce } from '../../context'
 import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 

diff --git a/packages/commerce/components/buy/carousel-buy-card.tsx b/packages/commerce/components/buy/carousel-buy-card.tsx
@@ -22,7 +22,7 @@ import type {
   MultiFamilySelectorOptions, 
 } from '../../types'
 
-import { useCommerce } from '../../service/context'
+import { useCommerce } from '../../context'
 import { getSelectionUISpecifier } from '../../util'
 
 import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'

diff --git a/packages/commerce/components/cart/cart-accordian.tsx b/packages/commerce/components/cart/cart-accordian.tsx
@@ -12,7 +12,7 @@ import {
 } from '@hanzo/ui/primitives'
 
 import { formatCurrencyValue } from '../../util'
-import { useCommerce } from '../../service/context'
+import { useCommerce } from '../../context'
 
 import CartPanel from './cart-panel'
 

diff --git a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx
@@ -9,7 +9,7 @@ import { Image } from '@hanzo/ui/primitives'
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../buy/add-to-cart-widget'
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 
 const DEF_IMG_SIZE=40
 

diff --git a/packages/commerce/components/cart/cart-panel/index.tsx b/packages/commerce/components/cart/cart-panel/index.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 import { formatCurrencyValue } from '../../../util'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 

diff --git a/packages/commerce/components/cart/cart-panel/promo-code.tsx b/packages/commerce/components/cart/cart-panel/promo-code.tsx
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'
 
 import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 import type { Promo } from '../../../types'
 import getPromoFromApi from '../../../util/promo-codes'
 

diff --git a/packages/commerce/components/checkout/payment-step-form/index.tsx b/packages/commerce/components/checkout/payment-step-form/index.tsx
@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
 import { useAuth } from '@hanzo/auth/service'
 
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
 

diff --git a/packages/commerce/components/checkout/payment-step-form/methods/card.tsx b/packages/commerce/components/checkout/payment-step-form/methods/card.tsx
@@ -15,7 +15,7 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../../service/context'
+import { useCommerce } from '../../../../context'
 import { processSquareCardPayment } from '../../../../util'
 import type { PaymentMethodComponentProps } from '../../../../types'
 import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'

diff --git a/packages/commerce/components/checkout/payment-step-form/methods/crypto.tsx b/packages/commerce/components/checkout/payment-step-form/methods/crypto.tsx
@@ -19,7 +19,7 @@ import {
 } from '@hanzo/ui/primitives'
 
 import Eth from '../crypto-icons/eth'
-import { useCommerce } from '../../../../service/context'
+import { useCommerce } from '../../../../context'
 import type { PaymentMethodComponentProps } from '../../../../types'
 import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 

diff --git a/packages/commerce/components/checkout/shipping-step-form.tsx b/packages/commerce/components/checkout/shipping-step-form.tsx
@@ -19,7 +19,7 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../service/context'
+import { useCommerce } from '../../context'
 
 import countries from '../../util/countries'
 import { sendGAEvent } from '../../util/analytics'

diff --git a/packages/commerce/context/commerce-ui.ts b/packages/commerce/context/commerce-ui.ts
@@ -0,0 +1,61 @@
+import { 
+  action,
+  computed, 
+  makeObservable, 
+  observable, 
+} from 'mobx'
+
+interface CommerceUI {
+  showBuyOptions: (skuPath: string) => void
+  hideBuyOptions: () => void
+
+  get buyOptionsShowing(): boolean
+
+  get skuPath(): string | undefined
+  clearSkuPath: () => void
+}
+
+class CommerceUIStore implements CommerceUI {
+
+  _skuPath: string | undefined = undefined
+  _optionsShowing: boolean = false
+
+  constructor() {
+    makeObservable(this, {
+      _skuPath: observable, 
+      _optionsShowing: observable,
+      showBuyOptions: action,
+      hideBuyOptions: action,
+      buyOptionsShowing: computed,
+      skuPath: computed,
+      clearSkuPath: action
+    })
+  }
+
+  showBuyOptions = (skuPath: string): void => {
+    this._skuPath = skuPath
+    this._optionsShowing = true
+  } 
+
+  hideBuyOptions = (): void => {
+    this._optionsShowing = false
+  }
+
+  get buyOptionsShowing(): boolean {
+    return this._optionsShowing
+  } 
+
+  get skuPath(): string | undefined {
+    return this._skuPath
+  } 
+
+  clearSkuPath = (): void => {
+    this._skuPath = undefined
+    this._optionsShowing = false
+  }
+}
+
+export {
+  CommerceUIStore,
+  type CommerceUI
+}
diff --git a/packages/commerce/context/index.tsx b/packages/commerce/context/index.tsx
@@ -0,0 +1,63 @@
+'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 { 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 useCommerce = (): CommerceService => {
+  return (useContext(CommerceContext) as CommerceContextValue)?.service
+}
+
+const useCommerceUI = (): CommerceUI => {
+  return (useContext(CommerceContext) as CommerceContextValue)?.ui
+}
+
+const CommerceProvider: React.FC<PropsWithChildren & {
+  families: Family[]
+  rootNode: CategoryNode
+  options?: ServiceOptions
+  uiSpecs?: Record<string, SelectionUISpecifier>
+}> = ({ 
+  children,
+  families,
+  rootNode,
+  options,
+  uiSpecs
+}) => {
+
+    // TODO: Inject Promo fixture here from siteDef
+  const serviceRef = useRef<CommerceContextValue>({
+    service: getInstance(families, rootNode, options, uiSpecs),
+    ui: new CommerceUIStore()
+  })
+  return (
+    <CommerceContext.Provider value={serviceRef.current}>
+      {children}
+    </CommerceContext.Provider>
+  )
+}
+
+export {
+  useCommerce, 
+  useCommerceUI, 
+  CommerceProvider
+}
diff --git a/packages/commerce/index.ts b/packages/commerce/index.ts
@@ -1,4 +1,4 @@
-export * from './service/context'
+export * from './context'
 export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
 export { 

diff --git a/packages/commerce/package.json b/packages/commerce/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.4.4",
+  "version": "6.4.6",
   "description": "e-commerce framework.",
   "type": "module",
   "publishConfig": {
@@ -40,8 +40,8 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.4.4",
-    "@hanzo/ui": "^3.6.3",
+    "@hanzo/auth": "^2.4.5",
+    "@hanzo/ui": "^3.6.4",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

diff --git a/packages/commerce/service/context.tsx b/packages/commerce/service/context.tsx
diff --git a/packages/commerce/util/use-sync-sku-param-w-current-item.ts b/packages/commerce/util/use-sync-sku-param-w-current-item.ts
@@ -8,7 +8,7 @@ import {
   parseAsBoolean,
 } from 'next-usequerystate'
 
-import { useCommerce } from '../service/context'
+import { useCommerce } from '../context'
 import type { SelectedPaths } from '../types'
 import sep from '../service/sep'
 

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/packages/ui/tailwind/typo-plugin/get-plugin-styles.js b/packages/ui/tailwind/typo-plugin/get-plugin-styles.js
@@ -89,17 +89,20 @@ const defaultCSS = {
   h1: {
     color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '800',
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    textTransform: 'uppercase'
   },
   h2: {
     color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '700',
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    textTransform: 'uppercase'
   },
   h3: {
     color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '600',
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    textTransform: 'uppercase'
   },
   h4: {
     color: 'var(--tw-typo-plugin-headings)',