@hanzo/ui 1.0.14 → 2.0.0

package/common/head-metadata/from-next/opengraph-types.ts

@@ -1,267 +0,0 @@
-import type { AbsoluteTemplateString, TemplateString } from './metadata-types'
-
-export type OpenGraphType =
-  | 'article'
-  | 'book'
-  | 'music.song'
-  | 'music.album'
-  | 'music.playlist'
-  | 'music.radio_station'
-  | 'profile'
-  | 'website'
-  | 'video.tv_show'
-  | 'video.other'
-  | 'video.movie'
-  | 'video.episode'
-
-export type OpenGraph =
-  | OpenGraphWebsite
-  | OpenGraphArticle
-  | OpenGraphBook
-  | OpenGraphProfile
-  | OpenGraphMusicSong
-  | OpenGraphMusicAlbum
-  | OpenGraphMusicPlaylist
-  | OpenGraphRadioStation
-  | OpenGraphVideoMovie
-  | OpenGraphVideoEpisode
-  | OpenGraphVideoTVShow
-  | OpenGraphVideoOther
-  | OpenGraphMetadata
-
-// update this type to reflect actual locales
-type Locale = string
-
-type OpenGraphMetadata = {
-  determiner?: 'a' | 'an' | 'the' | 'auto' | ''
-  title?: string | TemplateString
-  description?: string
-  emails?: string | Array<string>
-  phoneNumbers?: string | Array<string>
-  faxNumbers?: string | Array<string>
-  siteName?: string
-  locale?: Locale
-  alternateLocale?: Locale | Array<Locale>
-  images?: OGImage | Array<OGImage>
-  audio?: OGAudio | Array<OGAudio>
-  videos?: OGVideo | Array<OGVideo>
-  url?: string | URL
-  countryName?: string
-  ttl?: number
-}
-export type OpenGraphWebsite = OpenGraphMetadata & {
-  type: 'website'
-}
-type OpenGraphArticle = OpenGraphMetadata & {
-  type: 'article'
-  publishedTime?: string // datetime
-  modifiedTime?: string // datetime
-  expirationTime?: string // datetime
-  authors?: null | string | URL | Array<string | URL>
-  section?: null | string
-  tags?: null | string | Array<string>
-}
-type OpenGraphBook = OpenGraphMetadata & {
-  type: 'book'
-  isbn?: null | string
-  releaseDate?: null | string // datetime
-  authors?: null | string | URL | Array<string | URL>
-  tags?: null | string | Array<string>
-}
-type OpenGraphProfile = OpenGraphMetadata & {
-  type: 'profile'
-  firstName?: null | string
-  lastName?: null | string
-  username?: null | string
-  gender?: null | string
-}
-type OpenGraphMusicSong = OpenGraphMetadata & {
-  type: 'music.song'
-  duration?: null | number
-  albums?: null | string | URL | OGAlbum | Array<string | URL | OGAlbum>
-  musicians?: null | string | URL | Array<string | URL>
-}
-type OpenGraphMusicAlbum = OpenGraphMetadata & {
-  type: 'music.album'
-  songs?: null | string | URL | OGSong | Array<string | URL | OGSong>
-  musicians?: null | string | URL | Array<string | URL>
-  releaseDate?: null | string // datetime
-}
-type OpenGraphMusicPlaylist = OpenGraphMetadata & {
-  type: 'music.playlist'
-  songs?: null | string | URL | OGSong | Array<string | URL | OGSong>
-  creators?: null | string | URL | Array<string | URL>
-}
-type OpenGraphRadioStation = OpenGraphMetadata & {
-  type: 'music.radio_station'
-  creators?: null | string | URL | Array<string | URL>
-}
-type OpenGraphVideoMovie = OpenGraphMetadata & {
-  type: 'video.movie'
-  actors?: null | string | URL | OGActor | Array<string | URL | OGActor>
-  directors?: null | string | URL | Array<string | URL>
-  writers?: null | string | URL | Array<string | URL>
-  duration?: null | number
-  releaseDate?: null | string // datetime
-  tags?: null | string | Array<string>
-}
-type OpenGraphVideoEpisode = OpenGraphMetadata & {
-  type: 'video.episode'
-  actors?: null | string | URL | OGActor | Array<string | URL | OGActor>
-  directors?: null | string | URL | Array<string | URL>
-  writers?: null | string | URL | Array<string | URL>
-  duration?: null | number
-  releaseDate?: null | string // datetime
-  tags?: null | string | Array<string>
-  series?: null | string | URL
-}
-type OpenGraphVideoTVShow = OpenGraphMetadata & {
-  type: 'video.tv_show'
-}
-type OpenGraphVideoOther = OpenGraphMetadata & {
-  type: 'video.other'
-}
-
-export type OGImage = string | OGImageDescriptor | URL
-type OGImageDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  alt?: string
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type OGAudio = string | OGAudioDescriptor | URL
-type OGAudioDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  type?: string
-}
-type OGVideo = string | OGVideoDescriptor | URL
-type OGVideoDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-
-export type ResolvedOpenGraph =
-  | ResolvedOpenGraphWebsite
-  | ResolvedOpenGraphArticle
-  | ResolvedOpenGraphBook
-  | ResolvedOpenGraphProfile
-  | ResolvedOpenGraphMusicSong
-  | ResolvedOpenGraphMusicAlbum
-  | ResolvedOpenGraphMusicPlaylist
-  | ResolvedOpenGraphRadioStation
-  | ResolvedOpenGraphVideoMovie
-  | ResolvedOpenGraphVideoEpisode
-  | ResolvedOpenGraphVideoTVShow
-  | ResolvedOpenGraphVideoOther
-  | ResolvedOpenGraphMetadata
-
-type ResolvedOpenGraphMetadata = {
-  determiner?: 'a' | 'an' | 'the' | 'auto' | ''
-  title: AbsoluteTemplateString
-  description?: string
-  emails?: Array<string>
-  phoneNumbers?: Array<string>
-  faxNumbers?: Array<string>
-  siteName?: string
-  locale?: Locale
-  alternateLocale?: Array<Locale>
-  images?: Array<OGImage>
-  audio?: Array<OGAudio>
-  videos?: Array<OGVideo>
-  url: null | URL | string
-  countryName?: string
-  ttl?: number
-}
-type ResolvedOpenGraphWebsite = ResolvedOpenGraphMetadata & {
-  type: 'website'
-}
-type ResolvedOpenGraphArticle = ResolvedOpenGraphMetadata & {
-  type: 'article'
-  publishedTime?: string // datetime
-  modifiedTime?: string // datetime
-  expirationTime?: string // datetime
-  authors?: Array<string>
-  section?: string
-  tags?: Array<string>
-}
-type ResolvedOpenGraphBook = ResolvedOpenGraphMetadata & {
-  type: 'book'
-  isbn?: string
-  releaseDate?: string // datetime
-  authors?: Array<string>
-  tags?: Array<string>
-}
-type ResolvedOpenGraphProfile = ResolvedOpenGraphMetadata & {
-  type: 'profile'
-  firstName?: string
-  lastName?: string
-  username?: string
-  gender?: string
-}
-type ResolvedOpenGraphMusicSong = ResolvedOpenGraphMetadata & {
-  type: 'music.song'
-  duration?: number
-  albums?: Array<OGAlbum>
-  musicians?: Array<string | URL>
-}
-type ResolvedOpenGraphMusicAlbum = ResolvedOpenGraphMetadata & {
-  type: 'music.album'
-  songs?: Array<string | URL | OGSong>
-  musicians?: Array<string | URL>
-  releaseDate?: string // datetime
-}
-type ResolvedOpenGraphMusicPlaylist = ResolvedOpenGraphMetadata & {
-  type: 'music.playlist'
-  songs?: Array<string | URL | OGSong>
-  creators?: Array<string | URL>
-}
-type ResolvedOpenGraphRadioStation = ResolvedOpenGraphMetadata & {
-  type: 'music.radio_station'
-  creators?: Array<string | URL>
-}
-type ResolvedOpenGraphVideoMovie = ResolvedOpenGraphMetadata & {
-  type: 'video.movie'
-  actors?: Array<string | URL | OGActor>
-  directors?: Array<string | URL>
-  writers?: Array<string | URL>
-  duration?: number
-  releaseDate?: string // datetime
-  tags?: Array<string>
-}
-type ResolvedOpenGraphVideoEpisode = ResolvedOpenGraphMetadata & {
-  type: 'video.episode'
-  actors?: Array<string | URL | OGActor>
-  directors?: Array<string | URL>
-  writers?: Array<string | URL>
-  duration?: number
-  releaseDate?: string // datetime
-  tags?: Array<string>
-  series?: string | URL
-}
-type ResolvedOpenGraphVideoTVShow = ResolvedOpenGraphMetadata & {
-  type: 'video.tv_show'
-}
-type ResolvedOpenGraphVideoOther = ResolvedOpenGraphMetadata & {
-  type: 'video.other'
-}
-
-type OGSong = {
-  url: string | URL
-  disc?: number
-  track?: number
-}
-type OGAlbum = {
-  url: string | URL
-  disc?: number
-  track?: number
-}
-type OGActor = {
-  url: string | URL
-  role?: string
-}

package/common/head-metadata/from-next/twitter-types.ts

@@ -1,92 +0,0 @@
-// Reference: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
-
-import type { AbsoluteTemplateString, TemplateString } from './metadata-types'
-
-export type Twitter =
-  | TwitterSummary
-  | TwitterSummaryLargeImage
-  | TwitterPlayer
-  | TwitterApp
-  | TwitterMetadata
-
-type TwitterMetadata = {
-  // defaults to card="summary"
-  site?: string // username for account associated to the site itself
-  siteId?: string // id for account associated to the site itself
-  creator?: string // username for the account associated to the creator of the content on the site
-  creatorId?: string // id for the account associated to the creator of the content on the site
-  description?: string
-  title?: string | TemplateString
-  images?: TwitterImage | Array<TwitterImage>
-}
-type TwitterSummary = TwitterMetadata & {
-  card: 'summary'
-}
-type TwitterSummaryLargeImage = TwitterMetadata & {
-  card: 'summary_large_image'
-}
-type TwitterPlayer = TwitterMetadata & {
-  card: 'player'
-  players: TwitterPlayerDescriptor | Array<TwitterPlayerDescriptor>
-}
-type TwitterApp = TwitterMetadata & {
-  card: 'app'
-  app: TwitterAppDescriptor
-}
-export type TwitterAppDescriptor = {
-  id: {
-    iphone?: string | number
-    ipad?: string | number
-    googleplay?: string
-  }
-  url?: {
-    iphone?: string | URL
-    ipad?: string | URL
-    googleplay?: string | URL
-  }
-  name?: string
-}
-
-export type TwitterImage = string | TwitterImageDescriptor | URL
-type TwitterImageDescriptor = {
-  url: string | URL
-  alt?: string
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type TwitterPlayerDescriptor = {
-  playerUrl: string | URL
-  streamUrl: string | URL
-  width: number
-  height: number
-}
-
-type ResolvedTwitterImage = {
-  url: string | URL
-  alt?: string
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type ResolvedTwitterSummary = {
-  site: string | null
-  siteId: string | null
-  creator: string | null
-  creatorId: string | null
-  description: string | null
-  title: AbsoluteTemplateString
-  images?: Array<ResolvedTwitterImage>
-}
-type ResolvedTwitterPlayer = ResolvedTwitterSummary & {
-  players: Array<TwitterPlayerDescriptor>
-}
-type ResolvedTwitterApp = ResolvedTwitterSummary & { app: TwitterAppDescriptor }
-
-export type ResolvedTwitterMetadata =
-  | ({ card: 'summary' } & ResolvedTwitterSummary)
-  | ({ card: 'summary_large_image' } & ResolvedTwitterSummary)
-  | ({ card: 'player' } & ResolvedTwitterPlayer)
-  | ({ card: 'app' } & ResolvedTwitterApp)

package/common/head-metadata/index.tsx

@@ -1,208 +0,0 @@
-import React from 'react'
-
-import type { Metadata } from 'next'
-import Head from "next/head"
-
-import type {
-  IconDescriptor,
-  TemplateString,
-  Author,
-  ThemeColorDescriptor
-} from './from-next/metadata-types'
-
-import type { OpenGraph, OGImage } from './from-next/opengraph-types'
-import type { Twitter, TwitterImage } from './from-next/twitter-types'
-
-/*
-  NOTE: This is ONLY for sites that use the pages router in next.  
-  The app router does this automatically
-*/
-
-const getURLasString = (url: string | URL) => {
-  return (
-    (typeof url === 'string') ? (url as string) : (url.href)  
-  )
-}
-
-  // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment
-const Icons: React.FC<{icons: IconDescriptor[]}> = ({
-  icons
-}) => {
-  return <Head>
-  {icons.map(({url, ...rest}: IconDescriptor, index) => (
-    <link {...rest} href={getURLasString(url)} key={`icons-${index}`}/>
-  ))}
-  </Head>
-}
-
-export const getTitleFromTemplateString = (title: string | TemplateString | null | undefined): string | null  => {
-
-  if (!title) {
-    return null
-  }
-  if (typeof title === 'object') {
-    if ('default' in title) {
-      return  title.default
-    }
-    else if ('absolute' in title) {
-      return title.absolute
-    }
-  }
-  return title as string
-}
-
-const Authors: React.FC<{
-  authors: null | undefined | Author | Array<Author>
-}> = ({
-  authors
-}) => {
-
-  const Author: React.FC<{author: Author}> = ({author}) => (<>
-    {author.name && <meta name="author" content={author.name}  />}
-    {author.url && <link rel="author" href={getURLasString(author.url)}/>}
-  </>)
-
-  if (!authors) {
-    return null
-  }
-
-  if (Array.isArray(authors)) {
-    return (<>
-      {authors.map((el: Author, index) => (
-        <Author author={el} key={`authors-${index}`} /> 
-      ))}
-    </>)
-  }
-  return (<Author author={authors as Author} />) 
-}
-
-const Keywords: React.FC<{keywords: undefined | null | string | Array<string>}> = ({
-  keywords 
-}) => {
-  if (!keywords) return null
-  const content = (Array.isArray(keywords) ? keywords.join(', ') : keywords as string)
-  return (<meta name="keywords" content={content} />)
-}
-
-const ThemeColor: React.FC<{
-  thColors: null | undefined | string | ThemeColorDescriptor | ThemeColorDescriptor[]
-}> = ({
-  thColors
-}) => {
-
-  const ThColor: React.FC<{thColor: ThemeColorDescriptor}> = ({thColor}) => {
-    const toSpread: any = {
-      content: thColor.color
-    }
-
-    if ('media' in thColor) {
-      toSpread.media = thColor.media
-    }
-
-    return <meta name="theme-color" {...toSpread}/>
-  }
-
-  if (!thColors) {
-    return null
-  }
-
-  if (Array.isArray(thColors)) {
-    return (<>
-      {thColors.map((el: ThemeColorDescriptor, index) => (
-        <ThColor thColor={el} key={`theme-colors-${index}`} /> 
-      ))}
-    </>)
-  }
-  else if (typeof thColors === 'string') {
-    <meta name="theme-color" content={thColors as string}/> 
-  }
-  return (<ThColor thColor={thColors as ThemeColorDescriptor} />) 
-}
-
-const Manifest: React.FC<{
-  manifest: undefined | null | string | URL
-}> = ({
-  manifest
-}) => (
-  manifest && (<link rel="manifest" href={getURLasString(manifest)}/>)
-)
-
-const getOGImageURL = (img: OGImage | undefined): string | null => {
-
-  if (!img) {
-    return null
-  }
-  if (typeof img === 'object' && 'url' in img) { // this is a OGImageDescriptor
-    return getURLasString(img.url)
-  }
-  return getURLasString(img) // this is a URL or string
-}
-
-const getTwitterImageURL = (img: TwitterImage | undefined): string | null => {
-
-  if (!img) {
-    return null
-  }
-  if (typeof img === 'object' && 'url' in img) { // this is a TwitterImageDescriptor
-    return getURLasString(img.url)
-  }
-  return getURLasString(img) // this is a URL or string
-}
-
-  // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment
-const OpenGraphComponent: React.FC<{
-  og: OpenGraph | undefined | null
-}> = ({
-  og 
-}) => (og && (<Head>
-  {og.url && (<meta property="og:url" content={(typeof og.url === 'string') ? (og.url as string) : (og.url.href)} />)}
-  {(og as any).type && (<meta property="og:type" content={(og as any).type} />)}
-  {og.title && (<meta property="og:title" content={getTitleFromTemplateString(og.title)!} />)}
-  {og.description && (<meta property="og:description" content={og.description} />)}
-  {og.images && (<meta property="og:image" content={getOGImageURL(Array.isArray(og.images) ? og.images[0] : og.images)!} />)}
-</Head>))
-
-  // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment
-export const TwitterComponent: React.FC<{
-  tw: Twitter | undefined | null
-}> = ({
-  tw 
-}) => (tw && (<Head>
-  {(tw as any).card && (<meta name="twitter:card" content={(tw as any).card} />)}
-  {tw.title && (<meta name="twitter:title" content={getTitleFromTemplateString(tw.title)!} />)}
-  {tw.description && (<meta name="twitter:description" content={tw.description} />)}
-  {tw.images && (<meta name="twitter:image" content={getTwitterImageURL(Array.isArray(tw.images) ? tw.images[0] : tw.images)!} />)}
-  {tw.site && (<meta name="twitter:site" content={tw.site} />)}
-</Head>))
-
-  /* See NOTE at top of file! */
-  // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment
-const HeadMetadataComponent: React.FC<{
-  metadata: Metadata
-}> = ({
-  metadata
-}) => {
-  const mainTitle = getTitleFromTemplateString(metadata.title)
-
-  return (<>
-    <Head>
-      {mainTitle && (<title>{mainTitle}</title>) /* must be here, directly under Head component */}
-      {metadata.description && (      
-        <meta name="description" content={metadata.description} />
-      )}
-      {metadata.applicationName && (      
-        <meta name="application-name" content={metadata.applicationName} />
-      )}
-      <Authors authors={metadata.authors} />
-      <Keywords keywords={metadata.keywords} />
-      <ThemeColor thColors={metadata.themeColor} />
-      <Manifest manifest={metadata.manifest} />
-    </Head>
-      {/* Icons: We only support this format for now */}
-    <Icons icons={metadata.icons as IconDescriptor[]} />
-    <OpenGraphComponent og={metadata.openGraph} />
-    <TwitterComponent tw={metadata.twitter} />
-  </>)
-}
-
-export default HeadMetadataComponent

package/common/header/index.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import type { SiteDef } from '../../types'
-import { NavItems } from '../../primitives'
-import { Icons, DrawerMenu, Logo } from '..'
-import { cn } from '../../util'
-
-import MobileNav from './mobile-nav'
-
-const Header: React.FC<{
-  siteDef: SiteDef
-  className?: string
-}> = ({
-  siteDef,
-  className = ''
-}) => {
-
-  const { nav: { common, featured }} = siteDef
-  const allElements = (featured) ? [...common, ...featured] : common
-    // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
-    // (vs be beat out by 'text-color-nav')
-  const navItemClx = 'font-nav h-8 !text-[13px]/[13px]'
-
-  return (
-    <header className={cn('bg-background sticky z-10 top-0 ', className)} >
-      {/* md or larger */}
-      <div className={
-        'hidden md:flex flex-row md:h-[80px] items-center justify-between ' +
-        'px-[32px] 2xl:mx-auto max-w-screen-2xl'
-      }>
-        <Logo size='md' className='hidden lg:flex' key='two'/>
-        <Logo size='sm' className='hidden md:flex lg:hidden' key='one'/>
-        {/* md or larger */}
-        <div className='flex gap-7 items-center'>
-          <NavItems 
-            currentAs={siteDef.currentAs}
-            items={allElements} 
-            className='hidden md:flex md:gap-4 lg:justify-between lg:gap-7 ' 
-            itemClx={navItemClx} 
-            key='three'
-          />
-          {siteDef.nav.cart}
-        </div>
-      </div>
-      {/* smaller than md: mobile style drawer menu */}
-      <div className="flex md:hidden h-[44px] items-center justify-between px-2">
-        <Logo size='sm' />
-        <div className='flex gap-4'>
-          {siteDef.nav.cart}
-          <DrawerMenu 
-            className='p-0 text-primary' // ui has 'text-inherit', so need this for close buttons to appear.
-            trigger={<Icons.burger className='h-7 w-7'/>}
-          >
-            <MobileNav 
-              siteDef={siteDef}
-              className='pt-12' 
-              commonItemClx='px-10 text-l h-10 justify-start border-b rounded-none' 
-            />
-          </DrawerMenu>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export default Header

package/common/header/mobile-nav.tsx

@@ -1,72 +0,0 @@
-'use client'
-import React from 'react'
-
-import { type ButtonVariants, LinkElement }  from '../../primitives'
-import type { LinkDef, SiteDef } from '../../types'
-import { cn } from '../../util'
-
-const MobileNav: React.FC<{
-  siteDef: SiteDef
-  className?: string
-  commonItemClx?: string | ((def: LinkDef) => string),
-  /**
-   * This is called *in addition* to the link's actual navigation 
-   * action.  eg, I link is clicked, and the modal menu is closes
-   */
-  onAction?: () => void 
-}> = ({
-  siteDef,
-  onAction,
-  className='',
-  commonItemClx,
-}) => {
-
-  const { nav: { common, featured }} = siteDef
-
-  return (common.length || featured?.length) ? (
-    <nav className={className} >
-    {common.map((el, index) => {
-      const variant = el.variant ?? 'link'
-      let internalClx = '' 
-        // note that linkFG (or any other variant of 'link') 
-        // will not get assigned these classes,
-        // and will remain styles is 'foreground' (hence the name)
-      if (variant === 'link') {
-        internalClx+= ' text-nav hover:text-nav-hover active:text-nav-hover '
-        if (siteDef.currentAs && siteDef.currentAs === el.href) {
-          internalClx += ' text-nav-current'
-        }
-      } 
-      else {
-        internalClx+= ' min-w-0'   
-      }
-      if (siteDef.currentAs && siteDef.currentAs === el.href) {
-        internalClx += ' pointer-events-none'
-      }
-      const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : '' 
-
-      return (
-        <LinkElement 
-          def={el}
-          key={`common-${index}`}
-          size='lg'
-          className={cn(internalClx, itemClx)}
-          onClick = {onAction}  
-        />
-      )
-    })}
-    {featured?.length && (featured.map((el, index) => (
-      <LinkElement 
-        def={el}
-        key={`featured-${index}`}
-        size='lg'
-        className='mt-6 w-4/5 mx-auto'
-        onClick={onAction}  
-      />
-    )))}
-    </nav>
-  ) 
-  : null
-}
-
-export default MobileNav