@libreapps/commerce 7.5.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @libreapps/commerce@7.5.0 build /Users/jetstart/dev/libre-apps/ui-main/pkg/commerce
+> tsc --outDir dist --declaration --emitDeclarationOnly false --module ESNext --esModuleInterop true --skipLibCheck true --sourceMap true
+

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @libreapps/commerce
+
+## 7.5.1
+
+### Patch Changes
+
+- Reverted package scope to @libreapps.
+
+## 7.5.0
+
+### Minor Changes
+
+- 6f41d89: Initial release of LibreApps UI packages to NPM

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LibreApps.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/Icons.tsx

@@ -0,0 +1,35 @@
+import {
+  ShoppingCart,
+  Menu,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  Check,
+  Plus,
+  Minus,
+  ChevronDown,
+  ChevronsLeft,
+  ChevronsRight,
+  Image,
+  Trash2,
+  Search,
+  Barcode
+} from "lucide-react"
+
+export default {
+  shoppingCart: ShoppingCart,
+  menu: Menu,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  spinner: Loader2,
+  check: Check,
+  plus: Plus,
+  minus: Minus,
+  chevronDown: ChevronDown,
+  chevronsLeft: ChevronsLeft,
+  chevronsRight: ChevronsRight,
+  placeholder: Image,
+  trash: Trash2,
+  search: Search,
+  barcode: Barcode
+}

package/components/add-to-cart-widget.tsx

@@ -0,0 +1,183 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { Button, buttonVariants } from '@libreapps/ui/primitives'
+import { cn, type VariantProps } from '@libreapps/ui/util'
+
+import Icons from './Icons'
+import type { LineItem } from '../types'
+import { sendFBEvent, sendGAEvent } from '../util/analytics'
+
+const AddToCartWidget: React.FC<{ 
+  item: LineItem
+  disabled?: boolean
+  className?: string
+  buttonClx?: string
+  variant?: 'minimal' | 'primary' | 'primary-smaller' | 'outline'
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+}> = observer(({
+  item,
+  variant='primary',
+  disabled=false,
+  className='',
+  buttonClx='',
+  onQuantityChanged
+}) => {
+
+  const reactionDisposer = useRef<IReactionDisposer | undefined>(undefined)
+  useEffect(() => {
+    if (onQuantityChanged) {
+      reactionDisposer.current = reaction(
+        () => (item.quantity),
+        (quantity: number, previous: number) => {
+          onQuantityChanged(item.sku, 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} `
+
+  const ghost = variant === 'minimal'
+  const outline = variant === 'outline'
+  const primary = variant === 'primary'
+  const priSmaller = variant === 'primary-smaller'
+
+  let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : (priSmaller ? 'h-4 w-6 px-0.5 opacity-70' : 'h-5 w-7 px-1 opacity-70 ')
+  iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100'
+
+  let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold '
+  digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg '
+
+  if (disabled) {
+    return (
+      <div className={cn('flex flex-row items-stretch' + ROUNDED_CLX +  (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className)}>
+        <div className={'text-sm flex items-center cursor-default ' + digitClx} >{item.quantity}</div>
+      </div>
+    )
+  }
+
+  const inc = (event: React.MouseEvent<HTMLElement>) => {
+    item.increment()
+    event.stopPropagation() // in case we're part of a larger selection UI
+    sendGAEvent('add_to_cart', {
+      items: [{
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.familyId,
+        price: item.price,
+        quantity: item.quantity
+      }],
+      value: item.price,
+      currency: 'USD',
+    })
+    sendFBEvent('AddToCart', {
+      content_ids: [item.sku],
+      contents: [{
+        id: item.sku,
+        quantity: item.quantity
+      }],
+      content_name: item.title,
+      value: item.price,
+      currency: 'USD',
+    })
+  }
+
+  const dec = (event: React.MouseEvent<HTMLElement>) => {
+    item.decrement()
+    event.stopPropagation() // in case we're part of a larger selection UI
+    sendGAEvent('remove_from_cart', {
+      items: [{
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.familyId,
+        price: item.price,
+        quantity: item.quantity
+      }],
+      value: item.price,
+      currency: 'USD',
+    })
+  }
+
+  return ( item.isInCart ? (
+    <div className={cn(
+      'flex flex-row items-stretch justify-between ',
+        // should match 'xs' and 'default' button heights
+      (ghost || priSmaller ? 'h-8' : 'h-9'),
+      ROUNDED_CLX,
+      (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), 
+      (outline ? 'border border-muted' : ''),
+      className
+    )}>
+      <Button
+        aria-label={'Remove a ' + item.title + ' from the cart'}
+        size={ghost || priSmaller ? 'xs' : 'default'}
+        variant={primary || priSmaller ? 'primary' : 'ghost'}
+        rounded={ghost ? 'full' : ROUNDED_VAL}
+        className={cn(
+          'lg:min-w-0 lg:px-2 grow justify-start group', 
+          (ghost || priSmaller ? 'px-1' : 'px-2'), 
+          (outline ? 'hover:bg-transparent' : ''),
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
+        )}
+        key='left'
+        onClick={dec}
+      >
+      {(item.quantity > 1) ? (
+        <Icons.minus className={iconClx} aria-hidden='true'/>
+      ) : (
+        <Icons.trash className={iconClx} aria-hidden='true'/>
+      )}
+      </Button>
+        <div className={cn(
+          'grow-0 shrink-0 flex items-center cursor-default xs:px-2',
+          priSmaller || ghost ? 'text-xs' : 'text-sm',
+          digitClx
+        )}>
+          {item.quantity}{ghost ? '' : ' in Bag'}
+        </div>
+      <Button
+        aria-label={'Add another ' + item.title + ' to the cart'}
+        size={ghost || priSmaller ? 'xs' : 'default'}
+
+        variant={primary || priSmaller ? 'primary' : 'ghost'}
+        rounded={ghost ? 'full' : ROUNDED_VAL}
+        className={cn(
+          'lg:min-w-0 lg:px-2 grow justify-end group', 
+          (ghost || priSmaller ? 'px-1' : 'px-2'), 
+          (outline ? 'hover:bg-transparent' : ''),
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
+        )}
+        onClick={inc}
+        key='right'
+      >
+        <Icons.plus className={iconClx} aria-hidden='true'/>
+      </Button>
+    </div>
+  ) : (
+    <Button
+      aria-label={'Add a ' + item.title + ' to cart'}
+      size={ghost || priSmaller ? 'xs' : 'default'}
+      variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')}
+      rounded={ROUNDED_VAL}
+      className={cn(buttonClx, className)}
+      onClick={inc}
+    >
+      <span className='m1-1'>Add</span>
+      <Icons.plus className='h-5 w-5 ml-1' aria-hidden='true'/>
+    </Button>
+  ))
+})
+
+export default AddToCartWidget

package/components/buy/buy-card.tsx

@@ -0,0 +1,259 @@
+'use client'
+import React, { useRef, useEffect, type ComponentType } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@libreapps/ui/util'
+import { ApplyTypography, MediaStack } from '@libreapps/ui/primitives'
+
+import type { 
+  ItemSelectorProps, 
+  ItemSelectorCompProps,
+  LineItem, 
+  Family, 
+  CategoryNode, 
+} from '../../types'
+
+import { useCommerce } from '../../service/context'
+import * as pathUtils from '../../service/path-utils'
+import { getFacetValuesMutator, ObsStringMutator } from '../../util'
+
+import NodeTabs from '../node-tabs'
+import AddToCartWidget from '../add-to-cart-widget'
+
+const BuyCard: React.FC<{
+  skuPath: string
+
+    /** For any selectors that show a list of choices,
+     * starting with 'scrollAfter' elements, 
+     * the list will scroll, and the card will
+     * have 'scrollHeightClx' applied to it to define and fix the height.
+     * This is most like something like '80vh' 
+     * defaults are '5' and 'h-[70vh]'
+     * */
+  scrollAfter?: number
+  scrollHeightClx?: string
+
+  clx?: string
+  famWidgetClx?: string
+  addWidgetClx?: string
+
+  selector: ComponentType<ItemSelectorProps>
+  selectorProps?: ItemSelectorCompProps 
+
+    /** Show all items from all sibling families
+     * If skuPath defines a Family, the first of it's items will 
+     * be selected. The facet widget will just select a the first 
+     * item in the chosen Family without changings the overall set
+     * of choices. */
+  allVariants?: boolean
+
+  familyTabAs?: 'image' | 'label' | 'image-and-label'
+  showItemMedia?: boolean
+
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+  mobile?: boolean
+}> = observer(({
+  skuPath,
+  scrollAfter=5,
+  scrollHeightClx='h-[80vh]',
+  clx='',
+  famWidgetClx='',
+  addWidgetClx='',
+  selector: Selector,
+  selectorProps={
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+  },
+  familyTabAs='image-and-label', 
+  showItemMedia=true,
+  allVariants=false,
+  mobile=false,
+  onQuantityChanged,
+}) => {
+
+  const cmmc = useCommerce()
+  const inst = useRef<{
+    level: number,
+    requestedFamily : Family | undefined
+    requestedNode: CategoryNode | undefined
+    currentFamTokenMutator: ObsStringMutator
+    disposers: IReactionDisposer[]
+  } | undefined>(undefined)
+
+
+  useEffect(() => {
+
+    let requestedFamily = cmmc.getFamilyById(skuPath) 
+    let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
+    let initialFamily = undefined
+
+    const { paths, level } = pathUtils.getSelectedPaths(skuPath)
+
+    if (level === 0) {
+      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
+    }
+    if (requestedFamily) { 
+      if (allVariants && level >= 2) {
+          // select all siblings of requestedFamily.
+          // ie, go one level back
+        delete paths[level]
+        initialFamily = requestedFamily
+        requestedFamily = undefined
+        requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath))
+      }
+    }
+    else {
+        // select siblings paths
+      if (allVariants) {
+        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
+      }
+        // Actually select the the first fam at the fam level, 
+      else {
+        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
+      }
+    }
+
+    const selectedFams = cmmc.selectPaths(paths)
+    initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0])
+    cmmc.setCurrentItem(initialFamily.products[0].sku)
+    const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily!.id))
+
+    inst.current = {
+      level,
+      requestedFamily,
+      requestedNode,
+      currentFamTokenMutator,
+      disposers: []
+    }
+
+    if (!allVariants) {
+      inst.current?.disposers.push(reaction(
+        () => {
+          const fams = cmmc.selectedFamilies
+          return (fams.length > 0) ? fams[0].id : undefined
+        },
+        (famId) => {
+          if (famId && famId !== cmmc.currentItem?.familyId) {
+            const fam = cmmc.getFamilyById(famId)
+            if (fam) { 
+              cmmc.setCurrentItem(fam.products[0].sku) 
+            }
+          }
+        }
+      ))
+    }
+
+    return () => {
+      inst.current?.disposers.forEach((d) => {d()})
+    }
+
+  }, [])
+
+  const setFamilyPath = (pathValue: string | null) => {
+    if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
+    }
+    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
+    if (found) { 
+      cmmc.setCurrentItem(found.sku) 
+    }
+  }
+
+  const selectSku = (sku: string) => {
+    cmmc.setCurrentItem(sku)
+    const pathValue = pathUtils.lastToken(cmmc.currentItem!.familyId)
+    if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
+    }
+  }
+
+  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title
+
+  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
+    allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
+
+
+  const TitleArea: React.FC<{
+    title: string
+    byline?: string
+    clx?: string
+  }> = ({
+    title,
+    byline,
+    clx='' 
+  }) => (
+    <ApplyTypography className={clx}>
+      <h3>{title}</h3>
+      {byline && (<h6>{byline}</h6>)}
+    </ApplyTypography>
+  )
+
+  const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter)
+  return (
+    <div className={cn(
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', 
+      clx,
+      scroll ? scrollHeightClx : 'h-auto'
+    )} >
+    {inst.current?.requestedNode && (<>
+      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
+        <h3>{inst.current!.requestedNode.label}</h3>
+        {inst.current!.requestedNode.subNodesLabel && (
+          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
+        )}
+      </ApplyTypography>
+      <NodeTabs
+        className={cn(
+          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
+          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
+          (scroll ? 'shrink-0' : ''),
+          famWidgetClx  
+        )} 
+        mobile={mobile}
+        mutator={allVariants ? 
+          {
+            get: () => (inst.current!.currentFamTokenMutator.get()),
+            set: setFamilyPath
+          }
+          : 
+          getFacetValuesMutator(inst.current.level + 1, cmmc)
+        } 
+        itemClx='flex-col h-auto gap-0 py-1 px-3'
+        buttonClx={
+          'h-full ' +
+          '!border-level-3'
+        }
+        levelNodes={inst.current.requestedNode.subNodes!}
+        show={familyTabAs}
+      />
+    </>)} 
+    {!inst.current?.requestedNode && famTitle && (
+      <TitleArea title={famTitle} clx=''/>
+    )}
+    {(cmmc.currentItem && showItemMedia) && (
+      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+    )} 
+    {itemsToShow && (
+      <Selector 
+        items={itemsToShow}
+        selectedItemRef={cmmc}
+        selectSku={selectSku}
+        {...selectorProps}
+        scrollable={scroll}
+      />  
+    )}
+    {(cmmc.currentItem) && (
+      <AddToCartWidget 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
+      />
+    )} 
+    </div >
+  )
+})
+
+export default BuyCard