@luxfi/core 5.3.0 → 5.3.1

package/style/lux-global.css

@@ -1,48 +1,51 @@
-/* Note, preflight is applied first:
-  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
-*/
-@import "tailwindcss/base";
-
-/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
-@import "@hanzo/ui/style/hanzo-common";
-@import "lux-colors";
-
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
-  display: none;
-}
-
-.font-heading {
-  @apply uppercase;
-}
-
-/* Specific style fixes for react-square-web-payments-sdk -
- * reduce gap between card input and pay button
- */
-#rswps-card-container {
-  min-height: unset !important;
-}
-
-.sq-card-wrapper .sq-card-message {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-
-.element-container:hover .icon-container-nor {
-  display: none;
-}
-
-.icon-container-hov {
-  display: none;
-}
-
-.element-container:hover .icon-container-hov {
-  display: block !important;
-}
-
-.element-container:hover .text-container {
-  background: transparent;
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+@import "@hanzo/ui/style/hanzo-common";
+@import "lux-colors";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+.font-heading {
+  @apply uppercase;
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
+}
+.overflow-scroll::-webkit-scrollbar{
+  display:none;
 }

package/tailwind/fontFamily.tailwind.lux.ts

@@ -1,18 +1,18 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
-
-import luxTwFonts  from './lux-tw-fonts'
-
-export const fontFamily = (ignoreTheme: any): {
-  [key: string]: string[] 
-} => {
-
-  let result: any = {}
-  luxTwFonts.forEach((font: TwFontDesc) => {
-    result[font.twName] = font.fontFamily
-    // eg: heading: ['var(--font-druk-text-wide)']
-  })
-
-  return result as {
-    [key: string]: string[] 
-  }
-}
+import type { TwFontDesc } from '@hanzo/ui/tailwind'
+
+import luxTwFonts  from './lux-tw-fonts'
+
+export const fontFamily = (ignoreTheme: any): {
+  [key: string]: string[] 
+} => {
+
+  let result: any = {}
+  luxTwFonts.forEach((font: TwFontDesc) => {
+    result[font.twName] = font.fontFamily
+    // eg: heading: ['var(--font-druk-text-wide)']
+  })
+
+  return result as {
+    [key: string]: string[] 
+  }
+}

package/tailwind/index.ts

@@ -1,2 +1,2 @@
- 
-export {default as preset} from './tailwind.config.lux-preset'
+ 
+export {default as preset} from './tailwind.config.lux-preset'

package/tailwind/lux-tw-fonts.ts

@@ -1,40 +1,40 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
-
-
-/* NOTE: /next/load-and-return....ts depends on this file! */
-
-export default [
-  {
-    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-inter',
-    twName: 'sans'
-  },
-  {
-    fontFamily: ['var(--font-druk-text-wide)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-druk-text-wide',
-    twName: 'nav'
-  },
-  {
-    fontFamily: ['var(--font-druk-wide)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-druk-wide',
-    twName: 'heading'
-  },
-  {
-    twName: 'serif',
-    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
-  },
-  {
-    twName: 'mono',
-    fontFamily: [
-      'ui-monospace',
-      'SFMono-Regular',
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      '"Liberation Mono"',
-      '"Courier New"',
-      'monospace',
-    ] 
-  }
-
+import type { TwFontDesc } from '@hanzo/ui/tailwind'
+
+
+/* NOTE: /next/load-and-return....ts depends on this file! */
+
+export default [
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    twName: 'sans'
+  },
+  {
+    fontFamily: ['var(--font-druk-text-wide)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-druk-text-wide',
+    twName: 'nav'
+  },
+  {
+    fontFamily: ['var(--font-druk-wide)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-druk-wide',
+    twName: 'heading'
+  },
+  {
+    twName: 'serif',
+    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
+  },
+  {
+    twName: 'mono',
+    fontFamily: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ] 
+  }
+
 ] as TwFontDesc[]

package/tailwind/tailwind.config.lux-preset.ts

@@ -1,10 +1,10 @@
-import type { Config } from 'tailwindcss'
-import { preset } from '@hanzo/ui/tailwind'
-import { fontFamily } from './fontFamily.tailwind.lux'
-
-export default {
-  presets: [preset],
-  content: [],
-  theme: { fontFamily }
-} satisfies Config
-
+import type { Config } from 'tailwindcss'
+import { preset } from '@hanzo/ui/tailwind'
+import { fontFamily } from './fontFamily.tailwind.lux'
+
+export default {
+  presets: [preset],
+  content: [],
+  theme: { fontFamily }
+} satisfies Config
+

package/tsconfig.json

@@ -1,15 +1,15 @@
-{
-  "extends": "../tsconfig.modules.base.json",
-  "include": [
-    "**/*.ts",
-    "**/*.tsx", "components/commerce/_to_deprecate_checkout-widget/index.tsx_",
-  ],
-  "exclude": [
-    "node_modules",
-  ],
-  "compilerOptions": {
-    "paths": {
-      "react": [ "./node_modules/@types/react" ],
-    }
-  }
-}
+{
+  "extends": "../tsconfig.modules.base.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules",
+  ],
+  "compilerOptions": {
+    "paths": {
+      "react": [ "./node_modules/@types/react" ],
+    }
+  }
+}

package/types/chatbot-config.ts

@@ -1,7 +1,7 @@
-import type ChatbotSuggestQuestion from './chatbot-suggested-question'
-
-interface ChatbotConfig {
-  suggestedQuestions?: ChatbotSuggestQuestion[] 
-}
-
+import type ChatbotSuggestQuestion from './chatbot-suggested-question'
+
+interface ChatbotConfig {
+  suggestedQuestions?: ChatbotSuggestQuestion[] 
+}
+
 export { type ChatbotConfig as default } 

package/types/chatbot-suggested-question.ts

@@ -1,7 +1,7 @@
-interface ChatbotSuggestedQuestion {
-  heading: string 
-  message: string 
-  icon?: string
-}
-
-export { type ChatbotSuggestedQuestion as default }
+interface ChatbotSuggestedQuestion {
+  heading: string 
+  message: string 
+  icon?: string
+}
+
+export { type ChatbotSuggestedQuestion as default }

package/types/contact-info.ts

@@ -1,11 +1,11 @@
-interface ContactInfo {
-  email: string
-  phone?: string
-}
-
-type ContactInfoFields = keyof ContactInfo
-
-export {
-  type ContactInfo,
-  type ContactInfoFields
+interface ContactInfo {
+  email: string
+  phone?: string
+}
+
+type ContactInfoFields = keyof ContactInfo
+
+export {
+  type ContactInfo,
+  type ContactInfoFields
 }

package/types/index.ts

@@ -1,4 +1,4 @@
-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 { 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'

package/types/site-def.ts

@@ -1,43 +1,43 @@
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import type { CommerceConfig }  from '@hanzo/commerce/types'
-
-import type ChatbotConfig from './chatbot-config'
-
-interface SiteDef {
-
-    /** url of this site.  All nav links in the system will show it in 'current' state */
-  currentAs?: string
-
-  nav: {
-      /** common elements (will auto-select currentAs if it's provide) */
-      /** optional feature element. right-most after 'elements' (any min-w is ignored) */
-    common: LinkDef[]       
-    featured?: LinkDef[]
-  }
-
-    /** 
-     * Array of columns, each of which itself is an array of links 
-     * (or "title defs" where href='' and variant='linkFG')  
-     * Common use case: To render a site-specific first column: 
-     * {
-     *    footer[myColumn, ...commonColumnsFromUi]
-     * }
-     * see: @hanzo/ui/siteDef/footer (default export)
-     * or @hanzo/ui/siteDef/footer/common
-     */
-  footer: LinkDef[][]  
-
-    /** 
-     * optional override of default 'above copyright' horizantal links 
-      default (undefined / absent): links in side-def/footer/legal are rendered 
-      [] renders nothing above the copyright 
-    */
-  aboveCopyright?: LinkDef[] 
-
-  commerce?: CommerceConfig
-  chatbot?: ChatbotConfig
-}
-
-export { type SiteDef as default }
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import type { CommerceConfig }  from '@hanzo/commerce/types'
+
+import type ChatbotConfig from './chatbot-config'
+
+interface SiteDef {
+
+    /** url of this site.  All nav links in the system will show it in 'current' state */
+  currentAs?: string
+
+  nav: {
+      /** common elements (will auto-select currentAs if it's provide) */
+      /** optional feature element. right-most after 'elements' (any min-w is ignored) */
+    common: LinkDef[]       
+    featured?: LinkDef[]
+  }
+
+    /** 
+     * Array of columns, each of which itself is an array of links 
+     * (or "title defs" where href='' and variant='linkFG')  
+     * Common use case: To render a site-specific first column: 
+     * {
+     *    footer[myColumn, ...commonColumnsFromUi]
+     * }
+     * see: @hanzo/ui/siteDef/footer (default export)
+     * or @hanzo/ui/siteDef/footer/common
+     */
+  footer: LinkDef[][]  
+
+    /** 
+     * optional override of default 'above copyright' horizantal links 
+      default (undefined / absent): links in side-def/footer/legal are rendered 
+      [] renders nothing above the copyright 
+    */
+  aboveCopyright?: LinkDef[] 
+
+  commerce?: CommerceConfig
+  chatbot?: ChatbotConfig
+}
+
+export { type SiteDef as default }

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -1,66 +0,0 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  clx?: string
-  triggerClx?: string
-  panelClx?: string
-  scrollAfter: number
-  scrollHeightClx: string
-}> = observer(({
-  icon,
-  clx='',
-  panelClx='',
-  triggerClx='',
-  scrollAfter,
-  scrollHeightClx
-}) => { 
-  const cmmc = useCommerce()
-  return (
-    <Accordion type="single" collapsible className={clx}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </div>
-          <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className={cn('w-full', panelClx)} 
-            scrollAfter={scrollAfter}
-            scrollHeightClx={scrollHeightClx}
-            listClx='mt-0'
-            itemClx='mt-0.5 mb-0'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian

package/components/commerce/checkout-panel/checkout-panel-props.ts

@@ -1,10 +0,0 @@
-interface CheckoutPanelProps {
-  step: number
-  stepNames: string[]
-  onLeave:() => void
-  clx?: string
-}
-
-export {
-  type CheckoutPanelProps as default 
-}

package/components/commerce/checkout-panel/desktop-cp.tsx

@@ -1,83 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { cn } from '@hanzo/ui/util'
-
-import { BackButton, Logo, Tooltip } from '../..'
-import DesktopBagCarousel from './desktop-bag-carousel'
-import LinksRow from './policy-links'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = observer(({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => {
-
-  const cmmc = useCommerce()
-  return ( 
-    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
-      <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
-        <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
-          <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
-            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
-            <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
-          </div>
-          <BackButton 
-            size='sm' 
-            clx={
-              'z-10 absolute top-14 left-6 !px-0 aspect-square ' + 
-              'rounded-full hover:!bg-level-3 ' + 
-              'back-button-tooltip-class '
-            }
-            onBack={onLeave}
-          />
-          <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
-          <div key={2} className={cn(
-            'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
-            (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
-          )}>
-            <DesktopBagCarousel className='grow-0 h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
-            <CartPanel 
-              className='w-full border-none p-0' 
-              itemClx='mb-2' 
-              totalClx='sticky bottom-0 bg-background'
-              listClx='pr-3'
-              scrollAfter={4}
-              scrollHeightClx='min-h-[50vh] grow'
-              showPromoCode
-              showShipping
-              selectItems
-            />
-          </div>
-        </div>
-      </div>
-      <div key={2} className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
-        <ScrollArea className='w-full flex flex-row items-start justify-start overflow-y-auto'>
-          <div className='h-full w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-            <div key={1} className='bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end'>
-              <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-              <StepIndicator dotSizeRem={1.35} steps={stepNames} currentStep={step} className='gap-2 text-base w-pr-70' />
-            </div>
-            <div key={2} className='w-full max-w-[550px] mx-auto py-8'>
-              {children}
-            </div>
-          </div>
-        </ScrollArea>
-        <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-          <div className='w-full max-w-[550px] mx-auto flex flex-col items-center'>
-            <LinksRow clx='w-full' />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default DesktopCheckoutPanel

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -1,67 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { StepIndicator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import { BackButton, Logo } from '../..'
-import BagButton from '../bag-button'
-import PolicyLinks from './policy-links'
-import CartAccordian from './cart-accordian'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-
-const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => (
-
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
-    <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
-      <div className='flex items-stretch gap-1 grow-0'>
-        <BackButton 
-          size='sm' 
-          clx={
-            '-ml-5 !px-0 aspect-square h-full ' + 
-            'rounded-full active:!bg-level-3 ' 
-          }
-          onBack={onLeave}
-        />
-        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
-      </div>
-      <StepIndicator 
-        dotSizeRem={1} 
-        steps={stepNames} 
-        currentStep={step} 
-        className='relative grow mx-2 top-[14px] text-xs font-semibold w-full' 
-      />
-
-      {/* 72px by observation (for centering).  Need wrapper div since 'noLogin' returns null if no logged in user */}
-      <div className='w-[72px] grow-0 shrink-0 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
-    </div>
-    <CartAccordian 
-      icon={
-        <BagButton 
-          animateOnHover={false} 
-          showIfEmpty 
-          size='sm'
-          className='mr-1 relative w-5 h-6 sm:w-6 sm:h-7'
-          iconClx='fill-foreground'
-        />
-      } 
-      clx='flex items-center justify-center w-full'
-      triggerClx='bg-background fixed z-11 top-[45px] left-0 right-0 !m-0 px-4'
-      panelClx='!py-0'
-      scrollAfter={3}
-      scrollHeightClx='h-[385px]' 
-    />
-    {children}
-    <PolicyLinks clx='mt-auto mb-3 pt-2' />
-  </div>
-)
-
-export default MobileCheckoutPanel