@luxfi/core 5.1.6 → 5.2.0

package/commerce/ui/conf.ts

@@ -7,7 +7,7 @@ export default {
   },
 
   dt: {
-    micro: '80px',
+    micro: '74px',
     full: 0.75 
   }
 } satisfies SnapPointsConfig

package/components/commerce/drawer/index.tsx

@@ -30,9 +30,7 @@ const CommerceUIComponent: React.FC = observer(() => {
     // see handleCloseGesture()
   const setOpen = (b: boolean): void => {
     if (!b) {
-      console.log("ON CLOSE")
       if (!drawer.closedByUser) {
-        console.log("syncing closed state to UI gesture")
         drawer.setClosedByUser(true)
       }
     }
@@ -107,7 +105,7 @@ const CommerceUIComponent: React.FC = observer(() => {
         <Micro 
           handleCheckout={handleCheckout}
           handleItemClicked={handleItemClicked}
-          clx='w-full sm:w-[460px] sm:mx-auto md:w-[550px]'
+          clx='w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]'
         />
       )}
     </CommerceDrawer>

package/components/commerce/drawer/micro.tsx

@@ -12,17 +12,9 @@ import { useCommerceDrawer, useRecentActivity } from '../../../commerce/ui/conte
 
 const CN = {
     // h: mind padding!
-  mobile: { w: 36, h: 36 },
-  sm:  { w: 60, h: 36 },
-  desktop: { w: 60, h: 36 },
-}
-
-const renderTitle = (item: LineItem): React.ReactNode => {
-  const toks = item.title.split(', ')
-  if (toks.length === 2) {
-    return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>
-  }
-  return <p>{item.title}</p>
+  mobile: { w: 36, h: 32 },
+  sm:  { w: 60, h: 34 },
+  desktop: { w: 60, h: 32 },
 }
 
 const Info: React.FC<{
@@ -62,6 +54,7 @@ const Info: React.FC<{
   </>)
 }
 
+const PROMPT_COMMON_CLX = 'block absolute top-0 left-0 bg-transparent duration-400 transition-opacity' 
 
 const Micro: React.FC<{
   clx?: string
@@ -75,32 +68,45 @@ const Micro: React.FC<{
 
   const drawer = useCommerceDrawer()
   const recent = useRecentActivity()
+  const mobile = drawer.isMobile
 
   return (        
     <div className={cn(
-      'px-2 sm:px-3 sm:px-0', 
-      (drawer.showAdded ? 'grid grid-cols-2 ' : 'flex justify-center items-center '),
+      (drawer.showAdded ? 'grid grid-cols-2' : 'flex justify-center items-center '),
+      (drawer.showAdded ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
       'gap-2 md:gap-3 relative',
       clx
     )}>
     {drawer.showAdded && (
-      <div className='pb-3 flex flex-col items-stretch'>
-        <p className='text-muted text-xxs md:text-xs leading-none pl-1'>recent item:</p>
+      <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
+        <p className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
+          <span className='invisible'>scrictly for layout</span>
+          {drawer.isMobile ? (
+            <span className={PROMPT_COMMON_CLX}>tap for options:</span>
+          ) : (<>
+            <span className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</span>
+            <span className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</span>
+          </>)}
+        </p>
         <Button 
           variant='ghost'
-          rounded='sm'
+          rounded={drawer.isMobile ? 'md' : 'lg'}
+          size={drawer.isMobile ? 'default' : 'lg'}
           onClick={handleItemClicked}
           className={cn(
+            'box-content',
             'flex flex-row justify-between items-center gap-1',
             '-ml-1.5',
             'overflow-hidden ', 
-            'px-1 py-1 md:px-2 md:py-2',
+            'px-1 md:px-2 py-[2px]',
+            'border border-transparent group-hover:border-muted-3',
+            'group-hover:!bg-transparent '
           )}
         >
           {recent.item?.img && (<>
             <Image def={recent.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
-            <Image def={recent.item.img} constrainTo={CN.sm} preload className='hidden sm:flex md:hidden grow-0 shrink-0'/>
-            <Image def={recent.item.img} constrainTo={CN.desktop} preload className='hidden md:flex grow-0 shrink-0'/>
+            <Image def={recent.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
+            <Image def={recent.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
           </>)} 
           {recent.item && (
             <div className='grow w-full'>
@@ -112,9 +118,11 @@ const Micro: React.FC<{
     )}
     {drawer.showCheckout && (
       <div className={cn(
-        'flex flex-col justify-center w-full', 
-        (drawer.showAdded ? 'items-stretch' : 'items-center pt-3' )
+        'flex flex-col w-full', 
+        (drawer.showAdded ? 'items-stretch' : 'items-center' ),
+        (drawer.isMobile ? 'justify-start' : 'justify-center')
       )}>
+        {drawer.showAdded && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
         <CheckoutButton 
           handleCheckout={handleCheckout} 
           variant='primary' 

package/components/commerce/drawer/shell.tsx

@@ -1,10 +1,7 @@
 'use client'
 import React, {type PropsWithChildren } from 'react'
 
-import { X as LucideX} from 'lucide-react'
-
 import { 
-  Button, 
   Drawer, 
   DrawerContent, 
   DrawerHandle,
@@ -48,29 +45,36 @@ const CommerceDrawer: React.FC<PropsWithChildren &
     fastDragSkipsToEnd={false}
     dragHandleOnly={true}
     handleHandleClicked={handleHandleClicked}
+    extendHandleDragRegion={false}
 //    debugOutput
     {...rest}
   >
     <DrawerContent 
       defaultHandle={false} 
       className={cn(
-        (modal  ? 'rounded-t-xl border-muted-2' : 'rounded-t-md border-muted-4' ),
-        (micro ? (mobile ? 'mt-4 pt-1.5' : 'mt-5 pt-4') : 'mt-5 pt-5'),
-        'w-full h-full'
+        'border-0',
+        //(micro ? (mobile ? 'mt-4 pt-1.5' : 'mt-5 pt-4') : 'mt-5 pt-5'),
+        mobile ? 'pt-5' : 'pt-6',
+        'w-full h-full',
       )}
        // https://github.com/radix-ui/primitives/discussions/935
       onOpenAutoFocus={(e) => {e.preventDefault()}}
     >
       <DrawerHandle 
         className={cn(
-          'absolute left-0 right-0 mx-auto z-10',
-          'bg-level-3 hover:bg-level-2',
-          !mobile ? 'cursor-grab active:cursor-grabbing' : 'touch-pan-y',
-          (micro ? (mobile ? 'top-1 w-[85px] h-2 rounded-[2px]' : 'top-2 w-[85px] h-3 rounded-[2px]') : 'top-2 w-[100px] h-3 rounded-full'),
-          '[&>[vaul-handle-hitarea]]:hidden',
-          //(!micro ? 'bg-level-3 hover:bg-level-2 ' : 'bg-level-1 hover:bg-level-2 ')
+          'absolute top-0 left-0 right-0 mx-auto z-10',
+          'flex justify-center items-start',
+          'border-t rounded-t-lg border-muted-2',
+          mobile ? 'h-5 touch-pan-y' : 'h-6',
         )} 
-      />
+      >
+        <div className={cn(
+            // pseudo-handle
+          'rounded-[3px] bg-level-3',
+          mobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
+          !mobile ? 'cursor-grab active:cursor-grabbing' : '',
+        )} />
+      </DrawerHandle>
       {children}
     </DrawerContent>
   </Drawer>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "5.1.6",
+  "version": "5.2.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/root-layout/index.tsx

@@ -15,7 +15,6 @@ import { AuthListener, ChatWidget, Header, Scripts } from '../components'
 
 import CommerceDrawer from '../components/commerce/drawer'
 
-import { selectionUISpecifiers } from '../conf'
 import type SiteDef from '../types/site-def'
 
 import '../style/lux-global.css'
@@ -90,12 +89,7 @@ async function RootLayout({
         <Scripts/>
         <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
         {siteDef?.commerce ? (
-          <CommerceProvider
-            rootNode={siteDef.commerce!.rootNode}
-            families={siteDef.commerce!.families}
-            options={siteDef.commerce!.options}
-            uiSpecs={selectionUISpecifiers}
-          >
+          <CommerceProvider config={siteDef.commerce!} >
             <CommerceUIProvider >
               <Guts />
               <CommerceDrawer />

package/types/index.ts

@@ -2,4 +2,3 @@ export type { ContactInfo, ContactInfoFields } from './contact-info'
 export type { default as SiteDef } from './site-def'
 export type { default as ChatbotSuggestedQuestion } from './chatbot-suggested-question'
 export type { default as ChatbotConfig } from './chatbot-config'
-export type { default as CommerceConfig } from './commerce-config'

package/types/site-def.ts

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import type { LinkDef } from '@hanzo/ui/types'
+import type { CommerceConfig }  from '@hanzo/commerce/types'
 
-import type CommerceConfig from './commerce-config'
 import type ChatbotConfig from './chatbot-config'
 
 interface SiteDef {

package/commerce/data/AUTO-GEN-bullion-by-family.json

@@ -1,34 +0,0 @@
-[
-  {
-    "id": "LXM-AG-B",
-    "title": "Minted Bar",
-    "parentTitle": "Lux Silver",
-    "desc": "Get unprecedented access to silver with 1:1 asset-backed Lux Silver NFTs, sovereign ownership of physical silver without management fees, and mine-direct discount pricing.",
-    "img": {
-      "src": "/assets/commerce/silver/product/silver-bar-pt-800x800.png",
-      "dim": {
-        "w": 800,
-        "h": 800
-      }
-    },
-    "products": [
-      {
-        "id": "fce17569-a86c-4f69-bc61-ab435ed0c46f",
-        "sku": "LXM-AG-B-1_OZ",
-        "fullTitle": "Lux Silver, 1oz Minted Bar",
-        "optionLabel": "1oz",
-        "familyTitle": "Minted Bar",
-        "familyId": "LXM-AG-B",
-        "desc": "Get unprecedented access to silver with 1:1 asset-backed Lux Silver NFTs, sovereign ownership of physical silver without management fees, and mine-direct discount pricing.",
-        "price": 0,
-        "img": {
-          "src": "/assets/commerce/silver/product/silver-bar-pt-800x800.png",
-          "dim": {
-            "w": 800,
-            "h": 800
-          }
-        }
-      }
-    ]
-  }
-]

package/commerce/data/EDIT-ME-bullion-market-prices.ts

@@ -1,12 +0,0 @@
-  // updated manually apr 29, 2024
-
-export default {
-  au: {
-    market1oz: 2336.50,
-    discount: 0.01
-  },
-  ag: {
-    market1oz: 27.143,
-    discount: 0.10
-  },
-}

package/commerce/data/assign-prices.ts

@@ -1,50 +0,0 @@
-import type { Family } from '@hanzo/commerce/types'
-
-import prices from './EDIT-ME-bullion-market-prices'
-
-const sep = {
-  tok: '-',
-  subTok: '_',
-  decimal: '.'
-} 
-
-const GRAMS_PER_OZ = 28.3495
-
-const tree: any = {}
-for (let key in prices) {
-  const values = prices[key as keyof typeof prices]
-  tree[key] = {
-    oz: values.market1oz * (1 - values.discount),
-    g: values.market1oz * (1 - values.discount) / GRAMS_PER_OZ  
-  }
-}
-
-// LXB-AU-B-1_OZ, LXB-AU-B-2.5_g
-const priceFromSKU = (
-  sku: string
-) => {
-  const tokens = sku.split(sep.tok)
-  const type_ = tokens[1].toLowerCase()
-
-  const quanAndUnit = tokens[tokens.length - 1]
-  const quanAndUnitToks = quanAndUnit.split(sep.subTok)
-  let quantity = quanAndUnitToks[0].includes(sep.decimal) ? parseFloat(quanAndUnitToks[0].split(sep.decimal).join('.')) : parseInt(quanAndUnitToks[0])
-  let unit = quanAndUnitToks[1].toLowerCase()
-  if (unit === 'kg') {
-    quantity *= 1000
-    unit = 'g'
-  }
-  else if (unit === 'lb') {
-    quantity *= 16
-    unit = 'oz'
-  }
-
-  return tree[type_][unit] * quantity
-}
-
-export default (c: Family): Family => {
-  for (let prod of c.products) {
-    prod.price = priceFromSKU(prod.sku)
-  }
-  return c
-}

package/commerce/data/assign-videos-by-family-group.ts

@@ -1,14 +0,0 @@
-import type { VideoDef } from '@hanzo/ui/types'
-import type { Family } from '@hanzo/commerce/types'
-
-export default (fam: Family, map: Map<string, VideoDef>): Family => {
-  if (fam.parentTitle) {
-    for (let prod of fam.products) {
-      const video = map.get(fam.parentTitle)
-      if (video) {
-        prod.video = video
-      }
-    }
-  }
-  return fam
-}

package/commerce/data/bullion-price-1oz.ts

@@ -1,5 +0,0 @@
-import PRICES from './EDIT-ME-bullion-market-prices'
-
-export default (type_: keyof typeof PRICES): number => (
-  PRICES[type_].market1oz * (1 - PRICES[type_].discount)  
-)

package/commerce/data/index.ts

@@ -1,18 +0,0 @@
-import type { VideoDef } from '@hanzo/ui/types'
-
-import bullionByFamily from './AUTO-GEN-bullion-by-family.json'
-
-import assignPrices from './assign-prices'
-import assignVideosByFamilyGroup from './assign-videos-by-family-group'
-
-export const getBullionFamilies = (videoMap: Map<string, VideoDef>) => (
-  bullionByFamily.map(
-    (fam) => (assignPrices(fam))).map(
-      (fam) => (assignVideosByFamilyGroup(fam, videoMap)
-    )
-  )
-)
-
-export { default as serviceOptions } from '../../conf/lux-commerce-options'
-export { default as bullionPrice1oz } from './bullion-price-1oz'
-

package/conf/index.ts

@@ -1,52 +0,0 @@
-import type { SelectionUISpecifier } from '@hanzo/commerce/types'
-
-export { default as commerceServiceOptions } from './lux-commerce-options'
-
-export const selectionUISpecifiers = {
-
-  'LXM-CN': {
-    singleFamily: {
-      type: 'carousel',
-      options: {
-        familyTitle: 'long',
-        showByline: false,
-        showPrice: true,
-      }
-    }
-  },  
-  'LXM-FC': {
-    singleFamily: {
-      type: 'carousel',
-      options: {
-        //showQuantity: true 
-      }
-    }
-  },  
-  'LXM-CR': {
-    multiFamily: {
-      type: 'all-variants-carousel',
-      selectorOptions: {
-        showParentTitle: false,
-        showItemSwatches: true
-      },
-      itemOptions: {
-        familyTitle: 'long',
-        showFamilyByline: true,
-        showPrice: false,
-      }
-    }
-  },
-  'LXM-AG': {
-    multiFamily: {
-      type: 'all-variants-carousel',
-      selectorOptions: {
-        showParentTitle: true, 
-        showItemSwatches: false
-      },
-      itemOptions: {
-        familyTitle: 'long',
-      }
-    }
-  },
-  
-} satisfies Record<string, SelectionUISpecifier>

package/conf/lux-commerce-options.ts

@@ -1,6 +0,0 @@
-import type { ServiceOptions } from '@hanzo/commerce'
-
-export default {
-  dbName: 'lux-commerce',
-  ordersTable: 'orders'
-} satisfies ServiceOptions

package/types/commerce-config.ts

@@ -1,10 +0,0 @@
-import type { ServiceOptions } from '@hanzo/commerce'
-import type { CategoryNode, Family } from '@hanzo/commerce/types'
-
-interface CommerceConfig {
-  families: Family[]
-  rootNode: CategoryNode
-  options?: ServiceOptions
-}
-
-export { type CommerceConfig as default }