@luxfi/core 4.4.18 → 4.5.0

package/components/auth/login-panel.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
 import Autoplay from 'embla-carousel-autoplay'
 import { setCookie } from 'cookies-next'
 
@@ -8,10 +10,9 @@ import { cn } from '@hanzo/ui/util'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
 import { LoginPanel as Login } from '@hanzo/auth/components'
 
-import { Logo } from '..'
+import Logo from '../logo'
 import LuxLogo from '../icons/lux-logo'
 import { legal } from '../../site-def/footer'
-import { useRouter } from 'next/navigation'
 
 const LoginPanel: React.FC<{
   close: () => void
@@ -44,7 +45,7 @@ const LoginPanel: React.FC<{
     redirectUrl && router.push(redirectUrl)
   }
 
-  return (<>
+  return (
     <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
       <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
         <div className='h-full w-full max-w-[750px] px-8 pt-0'>
@@ -97,7 +98,7 @@ const LoginPanel: React.FC<{
         </div>
       </div>
     </div>
-  </>)
+  )
 }
 
 export default LoginPanel

package/components/index.ts

@@ -8,14 +8,12 @@ export * as Icons from './icons'
 export { default as Logo } from './logo'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
-export {
-  default as RootLayout,
-  viewport as rootLayoutViewport
-} from './root-layout'
+
 
 export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as LoginPanel } from './auth/login-panel'
 export { default as AuthListener } from './auth/auth-listener'
+export { default as Scripts } from './scripts'
 
 
 /* PLEASE KEEP

package/components/scripts.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 import { GoogleAnalytics } from '@next/third-parties/google'
 import { FacebookPixel } from '../next/analytics'
 
+  // TODO: Rename this component, since Next has one called Script 
 const Scripts = () => {
 
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.4.18",
+  "version": "4.5.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -10,7 +10,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/luxfi/web.git",
-    "directory": "packages/common"
+    "directory": "packages/core"
   },
   "keywords": [
     "components",
@@ -23,14 +23,11 @@
     "pub": "npm publish",
     "build": "tsc",
     "tc": "tsc",
-    "ln:ui": "pnpm link -g @hanzo/ui",
-    "ln:auth": "pnpm link -g @hanzo/auth",
-    "ln:cmmc": "pnpm link -g @hanzo/commerce",
-    "ul:all": "rm node_modules/@hanzo/*",
     "clean": "rm -rf node_modules"
   },
   "exports": {
     ".": "./components/index.ts",
+    "./root-layout": "./root-layout/index.tsx",
     "./server-actions": "./server-actions/index.ts",
     "./next": "./next/index.ts",
     "./style/": "./style/",
@@ -39,11 +36,12 @@
     "./conf": "./conf/index.ts"
   },
   "dependencies": {
-    "@hanzo/auth": "2.4.4",
-    "@hanzo/commerce": "6.4.4",
-    "@hanzo/ui": "3.6.3",
+    "@hanzo/auth": "2.4.5",
+    "@hanzo/commerce": "6.4.6",
+    "@hanzo/ui": "3.6.4",
     "@next/third-parties": "^14.1.0",
     "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"

package/root-layout/WHY_THIS_IS_SEPARATE.txt

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,113 @@
+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 { selectionUISpecifiers } from '../conf'
+import type SiteDef from '../site-def/site-def'
+
+
+// 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 = true,
+  siteDef,
+  children,
+}) =>  {
+
+  const currentUser = await getUserServerSide()
+  const usingCommerce = siteDef.ext.commerce && siteDef.ext.commerce.rootNode && siteDef.ext.commerce.families
+
+  const Guts: React.FC = () => (<>
+    {showHeader && <Header siteDef={siteDef}/>}
+    {children}
+    {chatbot && ( 
+      <ChatWidget 
+        title='LUX' 
+        subtitle='AI' 
+        chatbotUrl='https://lux.chat/iframe' 
+        suggestedQuestions={siteDef.ext?.chatBot?.suggestedQuestions ?? []}
+      />
+    )}
+  </>)
+
+  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}>
+        {usingCommerce ? (
+          <CommerceProvider 
+            rootNode={siteDef.ext.commerce.rootNode} 
+            families={siteDef.ext.commerce.families}
+            options={siteDef.ext.commerce.options}
+            uiSpecs={selectionUISpecifiers}
+          >
+            <Guts />
+          </CommerceProvider>
+        ) : ( 
+          <Guts />
+        )}
+          <AuthListener/>
+        </AuthServiceProvider>
+        <Toaster position='top-center' duration={3000}/>
+      </body>
+    </html>
+  )
+}
+
+export {
+  RootLayout,
+  viewport
+}

package/server-actions/TO-DO.txt

@@ -0,0 +1 @@
+move login and logout api routes here!

package/style/lux-global.css

@@ -14,7 +14,7 @@
   display: none;
 }
 
-.font-heading, h1, h2, h3 {
+.font-heading {
   @apply uppercase;
 }
 

package/components/root-layout.tsx

@@ -1,71 +0,0 @@
-import React, { type PropsWithChildren } from 'react'
-
-import type { Viewport } from 'next'
-
-import { Toaster } from '@hanzo/ui/primitives'
-
-import Header from './header'
-import type SiteDef from '../site-def/site-def'
-import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
-import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
-import Scripts from './scripts'
-
-// 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
-  header?: boolean
-}> = ({
-  header = true,
-  siteDef,
-  children,
-}) =>  (
-  <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 check in)
-      // overflow: hidden here breaks scroll snap, see comment above
-      //paddingRight: '0 !important',
-      //maxWidth: '100vw',
-      display: 'none', // see scripts.tsx
-
-    }}>
-      <Scripts/>
-      {header && <Header siteDef={siteDef}/>}
-      {children}
-      <Toaster position='top-center' duration={3000}/>
-    </body>
-  </html>
-)
-
-export {
-  RootLayout as default,
-  viewport
-}