@hanzo/ui 2.0.4 → 2.5.0

package/common/header/theme-toggle.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '../../primitives'
+
+const ThemeToggle: React.FC = () => {
+
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
+    >
+      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
+      <Moon className='hidden h-5 w-5 dark:block' />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  )
+}
+
+export default ThemeToggle

package/common/icons/index.tsx

@@ -0,0 +1,34 @@
+import {
+  Moon as moon,
+  SunMedium as sun,
+  Menu as burger,
+  ArrowUpRight as linkOut,
+  type XIcon as LucideIcon,
+} from 'lucide-react'
+
+import gitHub from './github'
+import logo from './lux-logo'
+import youtube from './youtube-logo'
+import secureDelivery from './secure-delivery'
+
+import  {
+  type SocialIconProps,
+  default as SocialIcon 
+} from './social-icon'
+
+export { type LucideIcon as Icon, type SocialIconProps } 
+
+
+export {
+  sun,
+  moon,
+  logo,
+  burger,
+  gitHub,
+  linkOut,
+  youtube,
+  secureDelivery,
+  SocialIcon,
+}
+
+

package/common/icons/lux-logo.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const LuxLogo: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill='currentColor' viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"  {...props}>
+    <path d="M5,5H265L135,230"/>
+  </svg>
+)
+
+export default LuxLogo

package/common/icons/secure-delivery.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+//  width="52" height="36" 
+const SecureDelivery: React.FC<LucideProps> = (props: LucideProps) => (
+<svg fill="currentColor" viewBox="0 0 52 36" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path d="M47.7611 24.5439H42.822L39.5293 14.9971H12.0732L8.7805 24.5439H2.96342L0 36.0001H51.7127L47.7611 24.5439ZM38.4147 16.9064L41.0488 24.5439H28.0049L25.3708 16.9064H38.4147ZM13.1879 16.9064H23.5976L26.2317 24.5439H10.5528L13.1879 16.9064ZM2.21225 34.0907L4.18786 26.4532H14.4865L16.4621 34.0907H2.21225ZM17.6804 32.1537L16.2061 26.4531H19.646L17.6804 32.1537ZM28.2706 34.0907H18.7854L21.4196 26.4532H31.8293L34.4634 34.0907H28.2706ZM36.2367 34.0907L33.6025 26.4532H46.6473L49.2814 34.0907H36.2367Z" />
+  <path d="M10.0843 0.108973C10.1056 -0.0363242 10.2915 -0.0363242 10.3128 0.108973L10.5061 1.43021C10.9095 4.18489 12.8287 6.34425 15.2772 6.79764L16.4515 7.01512C16.5808 7.03912 16.5808 7.24823 16.4515 7.27223L15.2772 7.4897C12.8286 7.94345 10.9091 10.1026 10.5061 12.8571L10.3128 14.1782C10.2915 14.3237 10.1056 14.3237 10.0843 14.1782L9.89096 12.8571C9.48763 10.1025 7.56837 7.9431 5.11989 7.4897L3.94562 7.27223C3.8163 7.24823 3.8163 7.03912 3.94562 7.01512L5.11989 6.79764C7.5685 6.3439 9.48794 4.18475 9.89096 1.43021L10.0843 0.108973Z" />
+  <path d="M22.034 0.0726485C22.0473 -0.0242162 22.1635 -0.0242162 22.1768 0.0726485L22.2977 0.953473C22.5497 2.78993 23.7493 4.2295 25.2796 4.53176L26.0135 4.67675C26.0943 4.69275 26.0943 4.83215 26.0135 4.84815L25.2796 4.99314C23.7492 5.29563 22.5495 6.73507 22.2977 8.57142L22.1768 9.45212C22.1635 9.54911 22.0473 9.54911 22.034 9.45212L21.9132 8.57142C21.6611 6.73497 20.4616 5.2954 18.9313 4.99314L18.1973 4.84815C18.1165 4.83215 18.1165 4.69275 18.1973 4.67675L18.9313 4.53176C20.4616 4.22926 21.6613 2.78983 21.9132 0.953473L22.034 0.0726485Z" />
+</svg>
+)
+
+export default SecureDelivery

package/common/icons/social-icon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { SocialIcon as BaseSocialIcon } from 'react-social-icons'
+
+import { cn } from '../../util'
+import '../../style/social-svg.css'
+
+interface SocialIconProps {
+    // one of these: https://github.com/couetilc/react-social-icons/tree/main/db
+  network: string
+  size: number
+  className?: string
+}
+
+const SocialIcon: React.FC<SocialIconProps> = ({
+  network,
+  size,
+  className = ''
+}) => (
+  <BaseSocialIcon 
+    network={network}
+    as='div' 
+      // This is set up so the enclosing element sets the color.
+      // For example, something like 'color-foreground hover:color-muted-1' 
+    className={cn('color-inherit', className)}
+    bgColor='transparent' 
+    fgColor='currentColor'
+    style={{height: size, width: size}} 
+  />
+)
+
+export {
+  type SocialIconProps,
+  SocialIcon as default
+}

package/common/index.ts

@@ -0,0 +1,14 @@
+export { default as ChatWidget } from './chat-widget'
+export { default as ContactDialog } from './contact-dialog'
+export { default as Copyright} from './copyright'
+export { default as DrawerMenu } from './drawer-menu'
+export { default as Footer } from './footer'
+export { default as Header } from './header'
+export { 
+  default as HeadMetadata, 
+  getTitleFromTemplateString, 
+  TwitterComponent
+} from './head-metadata'
+export * as Icons from './icons'
+export { default as Logo } from './logo'
+export { default as MiniChart } from './mini-chart'

package/common/logo.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { type TShirtSize  } from '../types'
+import { cn } from '../util'
+import { Icons  } from '.'
+
+const Logo: React.FC<{
+  size?: TShirtSize
+  logoOnly?: boolean
+  href?: string
+  className?: string
+}> = ({
+  size,
+  href, // no default please!
+  className='',
+  logoOnly=false
+}) => {
+  let classes: any = {}
+  const toAdd = (logoOnly) ? {
+    span: ' hidden',
+    icon: ' mr-r'
+  } : {
+    span: '',
+    icon: ''
+  }
+  if (size === 'lg' || size === 'xl' ) { // for safety
+    classes.icon = 'h-10 w-10 mr-4 color-inherit' + toAdd.icon
+    classes.span = 'text-3xl' + toAdd.span
+  }
+    // match lux.network
+  else if (size === 'md') {
+    classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit' + toAdd.icon
+    classes.span = 'text-[26px]/[26px] tracking-tighter' + toAdd.span
+  }
+  else if (size === 'sm' ) {
+    classes.icon = 'h-6 w-6 mr-2 color-inherit' + toAdd.icon
+    classes.span = 'text-lg' + toAdd.span
+  }
+    // xs
+  else {
+    classes.icon = 'h-4 w-4 mr-1 color-inherit' + toAdd.icon
+    classes.span = 'text-base' + toAdd.span
+  }
+
+  const outerClasses = 'flex flex-row items-center ' + className
+  const spanClasses = 'inline-block font-bold font-heading ' 
+    + (href ? 'hover:text-accent ' : 'cursor-default ') 
+    + classes.span 
+
+  const Inner: React.FC = () => (<>
+      <Icons.logo className={classes.icon} />
+      <span className={cn(spanClasses, ' text-inherit')}>LUX</span>
+  </>)
+
+
+  return (
+    href ? (
+      <Link href={href} className={outerClasses} >
+        <Inner />
+      </Link>
+  
+    ) : (
+      <span className={outerClasses} >
+        <Inner />
+      </span>
+    )
+  )
+}
+
+export default Logo

package/common/mini-chart/index.tsx

@@ -0,0 +1,8 @@
+import MiniChart from './wrapper'
+// import { type MiniChartProps, type MiniChartDateRanges } from './mini-chart-props'
+
+export {
+  MiniChart as default,
+  // type MiniChartProps,
+  // type MiniChartDateRanges
+}

package/common/mini-chart/mini-chart-props.ts

@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react'
+
+  // https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime
+const enum MiniChartDateRangesValues {
+    '1D',
+    '1M',
+    '3M',
+    '12M',
+    '60M',
+    'ALL',
+}
+
+type MiniChartDateRanges = keyof typeof MiniChartDateRangesValues
+
+interface MiniChartBaseProps {
+  symbol: string  
+  exchange?: string
+	dateRange: MiniChartDateRanges
+  noTimeScale?: boolean
+	width?: number | string
+	height?: number | string
+	locale?: string
+	colorTheme?: "light" | "dark"
+  // @ts-ignore // TODO
+	lineColor?: CSSProperties["color"]
+  // @ts-ignore // TODO
+	topGradientColor?: CSSProperties["color"]
+  // @ts-ignore // TODO
+	bottomGradientColor?: CSSProperties["color"]
+	isTransparent?: boolean
+	autosize?: boolean
+	chartOnly?: boolean
+	largeChartUrl?: string
+}
+
+type MiniChartProps = {
+  widgetProps: MiniChartBaseProps
+  containerStyles?: CSSProperties
+}
+
+export {
+  type MiniChartProps,
+  type MiniChartDateRanges
+}

package/common/mini-chart/mini-chart.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { type MiniChartProps } from './mini-chart-props'
+
+const MiniChart: React.FC<MiniChartProps> = ({ 
+  widgetProps,
+  containerStyles = {} 
+}) => {
+
+  const {
+    symbol,
+    exchange,
+    lineColor, 
+    topGradientColor, 
+    bottomGradientColor, 
+    width, 
+    height, 
+    autosize,
+    locale, 
+    ...rest
+  } = widgetProps
+
+  const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
+
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+	useEffect(() => {
+		if (!containerRef.current) {
+      return
+    }
+		const script = document.createElement('script')
+		script.type = 'text/javascript'
+		script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
+		script.async = true
+		script.onload = async () => {
+			const iframe = containerRef.current?.querySelector('iframe')
+			if (iframe && iframe instanceof Element) iframe.style.colorScheme = 'normal'
+
+      const copyDiv = document.querySelector('.tradingview-widget-copyright')
+      if (copyDiv) {
+        setTimeout(() => {
+          copyDiv.classList.remove('invisible')
+        }, 1200) // from experimentation 
+      }
+		}
+		const config = JSON.stringify({
+      symbol: symbolString,
+			width: autosize ? '100%' : (width || 350),
+			height: autosize ? '100%' : (height || 220),
+      locale: locale ?? 'en',
+      isTransparent: 'true',
+			trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
+			underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
+			underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
+			...rest,
+		})
+		script.innerHTML = config
+		containerRef.current.appendChild(script)
+		return () => {
+			while (containerRef.current?.firstChild) {
+				containerRef.current.removeChild(containerRef.current.firstChild)
+			}
+		}
+	}, [ JSON.stringify(widgetProps) ])
+
+	return (<>
+		<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
+    <div className='tradingview-widget-copyright border-t w-full invisible'>
+      <a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
+        <span className="text-[--secondary-2]">{symbol} quotes</span></a>&nbsp;by TradingView
+    </div>
+  </>)
+}
+
+export default MiniChart

package/common/mini-chart/wrapper.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import BaseChart from './mini-chart'
+
+const Wrapper: React.FC<{
+  symbol: string,
+  exchange?: string
+}> = ({
+  symbol,
+  exchange
+}) => (
+  <BaseChart widgetProps ={{
+    symbol,
+    exchange,
+    autosize: true,
+    colorTheme: 'dark',
+    lineColor: "rgb(114, 27, 228)",
+    bottomGradientColor: "rgba(255, 255, 255, 0.1)",
+    dateRange: '60M',
+  }}/>   
+)
+
+export default Wrapper

package/context-providers/index.ts

@@ -0,0 +1 @@
+export { default as ThemeProvider } from './theme-provider'

package/{style → context-providers}/theme-provider.tsx

@@ -9,8 +9,8 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) =>
     attribute="class" 
     {...props}
     value={{
-      light: 'hanzo-ui-light-theme',
-      dark: 'hanzo-ui-dark-theme'
+      light: 'lux-light-theme',
+      dark: 'lux-dark-theme'
     }}
   >
     {children}

package/next/README.md

@@ -0,0 +1,11 @@
+# Next related Lux helpers
+
+### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts`
+
+Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once).
+
+If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens.
+
+tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. 
+
+(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.)

package/next/analytics/fpixel.ts

@@ -0,0 +1,18 @@
+declare global {
+  interface Window {
+    fbq: Function;
+  }
+}
+
+export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+
+export const pageview = () => {
+    // @ts-ignore
+  window.fbq('track', 'PageView')
+}
+
+// https://developers.facebook.com/docs/facebook-pixel/advanced/
+export const event = (name: string, options = {}) => {
+    // @ts-ignore
+  window.fbq('track', name, options)
+}

package/next/analytics/pixel-analytics.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Script from 'next/script'
+import { useEffect, useState } from 'react'
+import * as fbq from './fpixel'
+
+const FacebookPixelHead = () => {
+  return (
+    <noscript>
+      <img
+        height='1'
+        width='1'
+        style={{ display: 'none' }}
+        src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
+      />
+    </noscript>
+  )
+}
+
+const FacebookPixel = () => {
+  const [loaded, setLoaded] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!loaded) return
+
+    fbq.pageview()
+  }, [pathname, loaded])
+
+  return (
+    <div>
+       <Script
+        id='fb-pixel'
+        strategy='afterInteractive'
+        onLoad={() => setLoaded(true)}
+        dangerouslySetInnerHTML={{
+          __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${fbq.FB_PIXEL_ID});
+          `,
+        }}
+      />
+    </div>
+  )
+}
+
+export {FacebookPixelHead, FacebookPixel}

package/next/determine-device-middleware.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+import { getSelectorsByUserAgent } from 'react-device-detect'
+
+  // writed this way so they can be chained :)
+const determineDeviceMiddleware = async (request: NextRequest) => {
+
+  const ua = userAgent(request)
+  const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua)
+  const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ?  'desktop' : 'unknown'))
+  const { nextUrl: url } = request
+  //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
+  url.searchParams.set('agent', agent)
+  return NextResponse.rewrite(url)
+}
+
+export default determineDeviceMiddleware

package/next/get-app-router-font-classes.ts

@@ -0,0 +1,12 @@
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
+import type NextFontDesc from './next-font-desc'
+
+  // These will be injected for <body> in app router app that uses our RootLayout
+
+  // First is assumed to be mapped to the default font and is injected into <body>
+  // as a normal tw font family class.
+export default () => (
+  nextFonts.map(
+      (desc: NextFontDesc) => (desc.nextFont!.variable)
+    ).join(' ') + ` font-${nextFonts[0].twName}`
+)

package/next/load-and-return-lux-next-fonts-on-import.ts

@@ -0,0 +1,94 @@
+import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
+
+import type NextFontDesc from './next-font-desc'
+import type TwFontDesc from '../tailwind/tw-font-desc'
+
+import twFonts from '../tailwind/lux-tw-fonts'
+
+/*
+  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! 
+
+  Also, requires that "Font loaders must be called and assigned to a const in the module scope"
+
+*/
+
+const drukTextWide = localFont({
+  src: [
+    {
+      path: './fonts/DrukTextWide-Medium-Trial.otf',
+      weight: '500',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukTextWide-Bold-Trial.otf',
+      weight: '700',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukTextWide-Heavy-Trial.otf',
+      weight: '800',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-druk-text-wide' ,
+})
+
+const drukWide = localFont({
+  src: [
+    {
+      path: './fonts/DrukWide-Medium-Trial.otf',
+      weight: '500',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukWide-Bold-Trial.otf',
+      weight: '700',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukWide-Heavy-Trial.otf',
+      weight: '500',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-druk-wide' ,
+})
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+})
+  
+export default [
+  {
+    font: inter,
+    twName: 'sans'
+  },
+  {
+    font: drukTextWide,
+    twName: 'nav'
+  },
+  {
+    font: drukWide,
+    twName: 'heading'
+  } 
+].map (
+  (el) => {
+    const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
+    if (!twFont) {
+      throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
+    }
+
+    return ({
+      ...twFont,
+      nextFont: el.font,
+    })
+  }
+) as NextFontDesc[]
+
+

package/next/next-font-desc.ts

@@ -0,0 +1,28 @@
+import type TwFontDesc from '../tailwind/tw-font-desc'
+
+// from next repo
+type NextFont = {
+  className: string
+  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
+}
+
+// from next repo
+type NextFontWithVariable = NextFont & {
+  variable: string
+}
+
+
+/*
+  NextFontDesc and TwFontDesc have to be seperate because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! That's why they are in different files.
+*/
+
+interface NextFontDesc extends TwFontDesc {
+  nextFont: NextFontWithVariable 
+}
+
+export {
+  type NextFontDesc as default,
+  type NextFontWithVariable,
+}

package/next/not-found-content.mdx

@@ -0,0 +1,5 @@
+### ...Huh?
+#### Sorry, we're fresh out of those.
+<br/>
+#### ...try something from the [Home Page](/)?
+

package/next/not-found.tsx

@@ -0,0 +1,23 @@
+import React  from 'react'
+
+import Main from '../primitives/main'
+import Footer from '../common/footer'
+import { ApplyTypography } from '../primitives'
+
+import NotFoundMDX from './not-found-content.mdx'
+import type { SiteDef } from '../types'
+
+const NotFound: React.FC<{
+  siteDef: SiteDef
+}>  = ({
+  siteDef
+}) => (<>
+  <Main className='xs:h-[100svh] xs:px-8 sm:px-10 sm:h-[700px]'>
+    <ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
+      <NotFoundMDX />
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef}/>
+</>)
+
+export default NotFound