@luxfi/core 5.1.4 → 5.1.6

package/package.json

@@ -1,73 +1,80 @@
-{
-  "name": "@luxfi/core",
-  "version": "5.1.4",
-  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "scope": "@luxfi"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/luxfi/web.git",
-    "directory": "packages/core"
-  },
-  "keywords": [
-    "components",
-    "radix-ui",
-    "hanzo",
-    "luxdefi"
-  ],
-  "scripts": {
-    "lat": "npm show @luxfi/core version",
-    "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf node_modules"
-  },
-  "exports": {
-    ".": "./components/index.ts",
-    "./commerce": "./commerce/index.ts",
-    "./root-layout": "./root-layout/index.tsx",
-    "./server-actions": "./server-actions/index.ts",
-    "./next": "./next/index.ts",
-    "./style/": "./style/",
-    "./site-def": "./site-def/index.ts",
-    "./tailwind": "./tailwind/index.ts",
-    "./conf": "./conf/index.ts"
-  },
-  "dependencies": {
-    "@hanzo/auth": "2.4.6",
-    "@hanzo/commerce": "7.0.2",
-    "@hanzo/ui": "3.7.0",
-    "@next/third-parties": "^14.1.0",
-    "@types/node": "^20.12.12",
-    "cookies-next": "^4.1.1",
-    "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.0.1",
-    "react-device-detect": "^2.2.3",
-    "react-social-icons": "^6.4.0"
-  },
-  "peerDependencies": {
-    "@hookform/resolvers": "^3.3.2",
-    "lucide-react": "^0.344.0",
-    "next": "14.1.3",
-    "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.44.2",
-    "validator": "^13.11.0",
-    "zod": "3.21.4"
-  },
-  "devDependencies": {
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@types/facebook-pixel": "^0.0.30",
-    "@types/gtag.js": "^0.0.19",
-    "@types/mdx": "^2.0.9",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.18",
-    "tailwindcss": "^3.4.2",
-    "typescript": "5.3.3"
-  }
-}
+{
+  "name": "@luxfi/core",
+  "version": "5.1.6",
+  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@luxfi"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxfi/web.git",
+    "directory": "packages/core"
+  },
+  "keywords": [
+    "components",
+    "radix-ui",
+    "hanzo",
+    "luxdefi"
+  ],
+  "scripts": {
+    "lat": "npm show @luxfi/core version",
+    "pub": "npm publish",
+    "build": "tsc",
+    "tc": "tsc",
+    "clean": "rm -rf node_modules"
+  },
+  "exports": {
+    ".": "./components/index.ts",
+    "./commerce-data": "./commerce/data/index.ts",
+    "./commerce": "./commerce/ui/context.tsx",
+    "./root-layout": "./root-layout/index.tsx",
+    "./server-actions": "./server-actions/index.ts",
+    "./next": "./next/index.ts",
+    "./style/": "./style/",
+    "./site-def": "./site-def/index.ts",
+    "./tailwind": "./tailwind/index.ts",
+    "./conf": "./conf/index.ts"
+  },
+  "dependencies": {
+    "@next/third-parties": "^14.1.0",
+    "@types/node": "^20.12.12",
+    "cookies-next": "^4.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-autoplay": "^8.1.1",
+    "firebase": "10.12.0",
+    "react-device-detect": "^2.2.3",
+    "react-social-icons": "^6.4.0",
+    "request": "^2.88.2",
+    "usehooks-ts": "^3.1.0"
+  },
+  "peerDependencies": {
+    "@hanzo/auth": "*",
+    "@hanzo/commerce": "*",
+    "@hanzo/ui": "*",
+    "@hookform/resolvers": "^3.3.2",
+    "lucide-react": "^0.344.0",
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "next": "14.2.3",
+    "next-themes": "^0.2.1",
+    "react": "*",
+    "react-dom": "*",
+    "react-hook-form": "^7.51.4",
+    "validator": "^13.11.0",
+    "zod": "3.23.8"
+  },
+  "devDependencies": {
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@types/facebook-pixel": "^0.0.30",
+    "@types/gtag.js": "^0.0.19",
+    "@types/mdx": "^2.0.9",
+    "@types/node": "^20.11.24",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.4.5"
+  }
+}

package/root-layout/WHY_THIS_IS_SEPARATE.txt

@@ -1,2 +1,2 @@
-Unwise to have this in a barrel / index file that is mostly imported by a Client Component.
+Unwise to have this in a barrel / index file that is mostly imported by a Client Component.
 Creates Next / SSR issues

package/root-layout/index.tsx

@@ -1,121 +1,118 @@
-import React, { type PropsWithChildren } from 'react'
-import type { Viewport } from 'next'
-
-import { Toaster } from '@hanzo/ui/primitives'
-import { AuthServiceProvider } from '@hanzo/auth/service'
-import { getUserServerSide } from '@hanzo/auth/server'
-import type { AuthServiceConf } from '@hanzo/auth/types'
-import { CommerceProvider } from '@hanzo/commerce'
-
-import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
-import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
-
-import { AuthListener, ChatWidget, Header, Scripts } from '../components'
-import Guts from '../components/header/guts'
-import BuyDrawer from '../components/commerce/buy-drawer'
-import CheckoutWidget from '../components/commerce/checkout-widget'
-
-import { selectionUISpecifiers } from '../conf'
-import type SiteDef from '../types/site-def'
-
-import '../style/lux-global.css'
-import '../style/cart-animation.css'
-import '../style/checkout-animation.css'
-
-
-// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
-const viewport = {
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' },
-  ],
-} satisfies Viewport
-
-/*
-  These '.variable' fields are actually autogenerate css classnames that *define* the actual
-  css variables ('--<ugly-name>') that one asks for in the tailwind classes.
-  They are what make them available in the global scope. So this MUST
-  be done like this for the tailwind font classes to work.
-
-  (...not to be confused with the css var itself.  This field should be named something else!)
-*/
-
-/*
-  re body: overflow-y-hidden overflow-x-hidden, h-full
-  We cannot have these on body tag for scroll-snap to work on iOS!
-*/
-const bodyClasses =
-  'bg-background text-foreground flex flex-col min-h-full' +
-  getAppRouterBodyFontClasses()
-
-const RootLayout: React.FC<PropsWithChildren & {
-  siteDef: SiteDef
-  showHeader?: boolean
-  chatbot?: boolean
-}> = async ({
-  showHeader = false,
-  chatbot = false,
-  siteDef,
-  children,
-}) =>  {
-  
-  const currentUser = await getUserServerSide()
-
-  return (
-    <html lang='en' suppressHydrationWarning className='hanzo-ui-dark-theme' style={{backgroundColor: '#000'}}>
-      <head >
-        {/* https://stackoverflow.com/a/75716588/11645689 */ }
-        <base target='_blank' />
-        <FacebookPixelHead/>
-      </head>
-
-      <body className={bodyClasses} style={{
-        // Not sure why these got added (by my commit)
-
-        // As also noted above, 'overflow: hidden' on the <body> tag breaks scroll snap!
-        //paddingRight: '0 !important',
-        //maxWidth: '100vw',
-        display: 'none', // see scripts.tsx
-
-      }}>
-        <Scripts/>
-        <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
-        {siteDef?.commerce ? (
-          <CommerceProvider
-            rootNode={siteDef.commerce!.rootNode}
-            families={siteDef.commerce!.families}
-            options={siteDef.commerce!.options}
-            uiSpecs={selectionUISpecifiers}
-          >
-            <Guts
-              siteDef={siteDef}
-              showHeader={showHeader}
-              chatbot={chatbot}
-            >
-              {children}
-            </Guts>
-            <BuyDrawer />
-            <CheckoutWidget />
-          </CommerceProvider>
-        ) : (
-          <Guts
-            siteDef={siteDef}
-            showHeader={showHeader}
-            chatbot={chatbot}
-          >
-            {children}
-          </Guts>
-
-        )}
-          <AuthListener/>
-        </AuthServiceProvider>
-        <Toaster position='top-center' duration={3000}/>
-      </body>
-    </html>
-  )
-}
-
-export {
-  RootLayout,
-  viewport
-}
+import React, { type PropsWithChildren } from 'react'
+import type { Viewport } from 'next'
+
+import { Toaster } from '@hanzo/ui/primitives'
+import { AuthServiceProvider } from '@hanzo/auth/service'
+import { getUserServerSide } from '@hanzo/auth/server'
+import type { AuthServiceConf } from '@hanzo/auth/types'
+import { CommerceProvider } from '@hanzo/commerce'
+
+import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
+import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
+
+import { CommerceUIProvider } from '../commerce/ui/context'
+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'
+import '../style/cart-animation.css'
+import '../style/checkout-animation.css'
+
+
+// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
+const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+} satisfies Viewport
+
+/*
+  These '.variable' fields are actually autogenerate css classnames that *define* the actual
+  css variables ('--<ugly-name>') that one asks for in the tailwind classes.
+  They are what make them available in the global scope. So this MUST
+  be done like this for the tailwind font classes to work.
+
+  (...not to be confused with the css var itself.  This field should be named something else!)
+*/
+
+/*
+  re body: overflow-y-hidden overflow-x-hidden, h-full
+  We cannot have these on body tag for scroll-snap to work on iOS!
+*/
+const bodyClasses =
+  'bg-background text-foreground flex flex-col min-h-full' +
+  getAppRouterBodyFontClasses()
+
+async function RootLayout({
+  showHeader = false,
+  chatbot = false,
+  siteDef,
+  children,
+} : {
+  siteDef: SiteDef
+  showHeader?: boolean
+  chatbot?: boolean
+} & PropsWithChildren) {
+
+  const currentUser = await getUserServerSide()
+
+  const Guts: React.FC = () => (<>
+    {showHeader && <Header siteDef={siteDef}/>}
+    {children}
+    {chatbot && (<ChatWidget
+      title='LUX'
+      subtitle='AI'
+      chatbotUrl='https://lux.chat/?isIframe=true'
+      suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
+      buttonClx='hidden md:block'
+    />)}
+  </>)
+
+  return (
+    <html lang='en' suppressHydrationWarning className='hanzo-ui-dark-theme' style={{backgroundColor: '#000'}}>
+      <head >
+        {/* https://stackoverflow.com/a/75716588/11645689 */ }
+        <base target='_blank' />
+        <FacebookPixelHead/>
+      </head>
+
+      <body className={bodyClasses} style={{
+
+        // As also noted above, 'overflow: hidden' on the <body> tag breaks scroll snap!
+        display: 'none', // see scripts.tsx // :aa concerned about this.
+
+      }}>
+        <Scripts/>
+        <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
+        {siteDef?.commerce ? (
+          <CommerceProvider
+            rootNode={siteDef.commerce!.rootNode}
+            families={siteDef.commerce!.families}
+            options={siteDef.commerce!.options}
+            uiSpecs={selectionUISpecifiers}
+          >
+            <CommerceUIProvider >
+              <Guts />
+              <CommerceDrawer />
+            </CommerceUIProvider>
+          </CommerceProvider>
+        ) : (
+          <Guts />
+        )}
+          <AuthListener/>
+        </AuthServiceProvider>
+        <Toaster position='top-center' duration={3000}/>
+      </body>
+    </html>
+  )
+} 
+
+export {
+  RootLayout,
+  viewport
+}

package/server-actions/firebase-app.ts

@@ -1,14 +1,14 @@
-import { initializeApp, getApps } from 'firebase/app'
-
-const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-}
-
-// Initialize Firebase instance if there isn't one already
-export default getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]
+import { initializeApp, getApps } from 'firebase/app'
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+}
+
+// Initialize Firebase instance if there isn't one already
+export default getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]

package/server-actions/index.ts

@@ -1,5 +1,5 @@
-import storeContact from './store-contact'
-
-export {
-  storeContact as default
-}
+import storeContact from './store-contact'
+
+export {
+  storeContact as default
+}

package/server-actions/store-contact.ts

@@ -1,51 +1,51 @@
-'use server'
-
-import { 
-  getFirestore, 
-  collection, 
-  setDoc, 
-  doc, 
-  serverTimestamp,
-  type Firestore,
-} from 'firebase/firestore'
-
-import firebaseApp from './firebase-app'
-import type { ContactInfo } from '../types'
-
-let dbInstance: Firestore | undefined = undefined
-
-const getDBInstance = (name: string): Firestore => {
-  if (!dbInstance) {
-    dbInstance = getFirestore(firebaseApp, name) 
-  }
-  return dbInstance  
-}
-
-const storeContact = async ( formData: ContactInfo, enclosure: any ) => {
-  const email = formData.email
-  const phone = formData.phone
-  const dbName = enclosure?.dbId
-  const tableName = enclosure?.listId
-
-  let error: any | null = null
-  const tableRef = collection(getDBInstance(dbName), tableName)
-
-  try {
-    await setDoc(doc(tableRef, email), {
-      email,
-      phone,
-      timestamp: serverTimestamp(),
-    })
-    return { success: !error, error, id: email }
-  }
-  catch (e) {  
-    console.error('Error writing contact info to database: ', e)
-    error = e  
-  }  
-  
-  return { success: !error, error }  
-}
-
-export {
-  storeContact as default
-}
+'use server'
+
+import { 
+  getFirestore, 
+  collection, 
+  setDoc, 
+  doc, 
+  serverTimestamp,
+  type Firestore,
+} from 'firebase/firestore'
+
+import firebaseApp from './firebase-app'
+import type { ContactInfo } from '../types'
+
+let dbInstance: Firestore | undefined = undefined
+
+const getDBInstance = (name: string): Firestore => {
+  if (!dbInstance) {
+    dbInstance = getFirestore(firebaseApp, name) 
+  }
+  return dbInstance  
+}
+
+const storeContact = async ( formData: ContactInfo, enclosure: any ) => {
+  const email = formData.email
+  const phone = formData.phone
+  const dbName = enclosure?.dbId
+  const tableName = enclosure?.listId
+
+  let error: any | null = null
+  const tableRef = collection(getDBInstance(dbName), tableName)
+
+  try {
+    await setDoc(doc(tableRef, email), {
+      email,
+      phone,
+      timestamp: serverTimestamp(),
+    })
+    return { success: !error, error, id: email }
+  }
+  catch (e) {  
+    console.error('Error writing contact info to database: ', e)
+    error = e  
+  }  
+  
+  return { success: !error, error }  
+}
+
+export {
+  storeContact as default
+}