@hanzo/ui 0.5.24 → 0.6.16

package/tailwind/typo-plugin/index.js

@@ -1,141 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-import merge from 'lodash.merge'
-import castArray from 'lodash.castarray'
-import getStyles from './get-plugin-styles'
-import { commonTrailingPseudos } from './utils'
-
-let baseFontSize = 16
-
-const computed = {
-  // Reserved for future "magic properties", for example:
-  // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
-}
-
-function inWhere(selector, { className, modifier, prefix }) {
-  let prefixedNot = prefix(`.not-${className}`).slice(1)
-  let selectorPrefix = selector.startsWith('>')
-    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
-    : ''
-
-  // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
-  let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
-
-  if (trailingPseudo) {
-    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
-  }
-
-  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
-}
-
-function isObject(value) {
-  return typeof value === 'object' && value !== null
-}
-
-function configToCss(config = {}, { target, className, modifier, prefix }) {
-  function updateSelector(k, v) {
-    if (target === 'legacy') {
-      return [k, v]
-    }
-
-    if (Array.isArray(v)) {
-      return [k, v]
-    }
-
-    if (isObject(v)) {
-      let nested = Object.values(v).some(isObject)
-      if (nested) {
-        return [
-          inWhere(k, { className, modifier, prefix }),
-          v,
-          Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
-        ]
-      }
-
-      return [inWhere(k, { className, modifier, prefix }), v]
-    }
-
-    return [k, v]
-  }
-
-  return Object.fromEntries(
-    Object.entries(
-      merge(
-        {},
-        ...Object.keys(config)
-          .filter((key) => computed[key])
-          .map((key) => computed[key](config[key])),
-        ...castArray(config.css || {})
-      )
-    ).map(([k, v]) => updateSelector(k, v))
-  )
-}
-
-export default plugin.withOptions(
-  ({ className = 'prose', target = 'modern', base = 16 } = {}) => {
-    baseFontSize = base
-    return function ({ addVariant, addComponents, theme, prefix }) {
-      let modifiers = theme('typography')
-
-      let options = { className, prefix }
-
-      for (let [name, ...selectors] of [
-        ['headings', 'h1', 'h2', 'h3', /* 'h4', 'h5', 'h6', 'th' */],
-        ['h1'],
-        ['h2'],
-        ['h3'],
-        ['h4'],
-        ['h5'],
-        ['h6'],
-        ['p'],
-        ['a'],
-        ['blockquote'],
-        ['figure'],
-        ['figcaption'],
-        ['strong'],
-        ['em'],
-        ['code'],
-        ['pre'],
-        ['ol'],
-        ['ul'],
-        ['li'],
-        ['table'],
-        ['thead'],
-        ['tr'],
-        ['th'],
-        ['td'],
-        ['img'],
-        ['video'],
-        ['hr'],
-      ]) {
-        selectors = selectors.length === 0 ? [name] : selectors
-
-        let selector =
-          target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
-
-        addVariant(
-          `${className}-${name}`,
-          target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
-        )
-      }
-
-      addComponents(
-        Object.keys(modifiers).map((modifier) => ({
-          [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
-            modifiers[modifier],
-            {
-              target,
-              className,
-              modifier,
-              prefix,
-            }
-          ),
-        }))
-      )
-    }
-  },
-  () => {
-    return {
-      theme: { typography: getStyles(baseFontSize) },
-    }
-  }
-)

package/tailwind/typo-plugin/utils.js

@@ -1,60 +0,0 @@
-import isPlainObject from 'lodash.isplainobject'
-import parser from 'postcss-selector-parser'
-
-const parseSelector = parser()
-
-export function isUsableColor(color, values) {
-  return isPlainObject(values) && color !== 'gray' && values[600]
-}
-
-/**
- * @param {string} selector
- */
-export function commonTrailingPseudos(selector) {
-  let ast = parseSelector.astSync(selector)
-
-  /** @type {import('postcss-selector-parser').Pseudo[][]} */
-  let matrix = []
-
-  // Put the pseudo elements in reverse order in a sparse, column-major 2D array
-  for (let [i, sel] of ast.nodes.entries()) {
-    for (const [j, child] of [...sel.nodes].reverse().entries()) {
-      // We only care about pseudo elements
-      if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
-        break
-      }
-
-      matrix[j] = matrix[j] || []
-      matrix[j][i] = child
-    }
-  }
-
-  let trailingPseudos = parser.selector()
-
-  // At this point the pseudo elements are in a column-major 2D array
-  // This means each row contains one "column" of pseudo elements from each selector
-  // We can compare all the pseudo elements in a row to see if they are the same
-  for (const pseudos of matrix) {
-    // It's a sparse 2D array so there are going to be holes in the rows
-    // We skip those
-    if (!pseudos) {
-      continue
-    }
-
-    let values = new Set([...pseudos.map((p) => p.value)])
-
-    // The pseudo elements are not the same
-    if (values.size > 1) {
-      break
-    }
-
-    pseudos.forEach((pseudo) => pseudo.remove())
-    trailingPseudos.prepend(pseudos[0])
-  }
-
-  if (trailingPseudos.nodes.length) {
-    return [trailingPseudos.toString(), ast.toString()]
-  }
-
-  return [null, selector]
-}

package/tailwind/typography-test.mdx

@@ -1,36 +0,0 @@
-import Link from '@hanzo/ui/common/link-element'
-
-###### In a galaxy far, far away
-##### Join the global rush to own silver
-#### And the global rush to gold
-### As well as the rush to crypto
-## THE SILVER RUSH IS HERE
-# THE GOLD RUSH IS HERE
-
-
-*Lorem* ipsum dolor sit amet, **consectetur** adipiscing elit, sed do eiusmod tempor 
-incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
-nostrud exercitation ullamco 
-laboris nisi ut aliquip ex ea commodo consequat. 
-
-1) Duis aute irure 
-2) dolor in reprehenderit 
-3) in voluptate velit esse 
-
-Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-
-- sunt in culpa 
-- qui officia deserunt 
-- mollit anim id est laborum.
-
-Lorem ipsum dolor sit [amet]('/'), adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-<Link 
-  def={{
-    title: 'Enter App',
-    href: 'https://app.lux.market',
-    external: 'true',
-    variant: 'primary',
-  }}
-  size='lg'
-/>

package/types/breakpoints.ts

@@ -1,11 +0,0 @@
-// @ts-nocheck
-
-import bps from '../tailwind/screens.tailwind'
-
-type Breakpoint = keyof typeof bps
-const Breakpoints = Object.keys(bps)
-
-export {
-  Breakpoints,
-  type Breakpoint
-}

package/types/bullet-item.ts

@@ -1,10 +0,0 @@
-import type { Icon } from '.'
-
-interface BulletItem {
-  text: string,
-  icon?: Icon | string // Icon = ReactNode; ReactNode can be a string
-}
-
-export {
-  type BulletItem as default
-}

package/types/button-def.ts

@@ -1,39 +0,0 @@
-import { type ButtonProps } from '../primitives/button'
-
-type SubmitServerAction = (data: any, enclosure?: any) => Promise<void>
-
-interface ButtonModalProps {
-  open: boolean
-  onOpenChange: (b: boolean) => void
-  buttonText: string
-  buttonProps: ButtonProps
-  title: string
-  byline?: string
-  action: SubmitServerAction
-  actionEnclosure?: any
-}
-
-interface ButtonModalDef {
-  Comp: React.ComponentType<ButtonModalProps>
-  title: string
-  props?: any
-  byline?: string
-  action?: SubmitServerAction
-  actionEnclosure?: any
-}
-
-interface ButtonDef  {
-  text: string
-  props: ButtonProps
-  action: {
-    type: 'modal' /* | future: other types */
-    def: ButtonModalDef /* | future: other supported specifiers, such as Server Actions, or UI Actions or ? */
-  }
-}
-
-export {
-  type ButtonDef,
-  type SubmitServerAction,
-  type ButtonModalProps,
-  type ButtonModalDef,
-}

package/types/contact-info.ts

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

package/types/dimensions.ts

@@ -1,20 +0,0 @@
-// From Next Image Dim
-type Dimensions = {
-  w: number | `${number}`
-  h: number | `${number}`
-}
-
-type TShirtDimensions = { 
-  xs?: Dimensions            
-  sm?: Dimensions 
-  md:  Dimensions 
-  lg?: Dimensions 
-  xl?: Dimensions
-}
-
-export {
-  type Dimensions,
-  type TShirtDimensions
-}
-
-  

package/types/grid-def.ts

@@ -1,56 +0,0 @@
-import type { Breakpoint } from './breakpoints'
-
-type GridColumnSpec = number | { columns: number, gap: number}
-
-interface GridDef {
-    /** Must define in ACCENDING order. */
-  at: {
-    [key in (Breakpoint)]?: GridColumnSpec
-  },
-  mobile?: GridColumnSpec
-}
-
-const COMMON_GRID_1_COL = {
-  at: {
-    xs: { columns: 1, gap: 2 },
-    md: { columns: 1, gap: 3 },
-    lg: { columns: 1, gap: 6 }
-  },
-  mobile: { columns: 1, gap: 2 }
-}
-
-const COMMON_GRID_2_COL = { 
-    at: { 
-      xs: {columns: 1, gap: 2}, 
-      md: {columns: 2, gap: 3}, 
-      lg: {columns: 2, gap: 6}
-    },  
-    mobile: {columns: 1, gap: 2}
-} as GridDef
-
-const COMMON_GRID_3_COL = { 
-  at: { 
-    xs: {columns: 1, gap: 2}, 
-    md: {columns: 3, gap: 3}, 
-    lg: {columns: 3, gap: 6}
-  },  
-  mobile: {columns: 1, gap: 2}
-} as GridDef
-
-const COMMON_GRID_4_COL = { 
-  at: { 
-    xs: {columns: 1, gap: 2}, 
-    md: {columns: 2, gap: 3}, 
-    lg: {columns: 4, gap: 6}
-  },  
-  mobile: {columns: 1, gap: 2}
-} as GridDef
-
-export {
-  type GridDef as default,
-  type GridColumnSpec,
-  COMMON_GRID_1_COL,
-  COMMON_GRID_2_COL,
-  COMMON_GRID_3_COL,
-  COMMON_GRID_4_COL
-}

package/types/icon.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react'
-
-//import type { LucideIcon} from 'lucide-react'
-//import type { SocialIconProps } from '@/components/icons/social-icon'
-
-type Icon =  ReactNode
-
-export {
-  type Icon as default 
-}

package/types/image-def.ts

@@ -1,28 +0,0 @@
-import type { Dimensions } from './dimensions'
-
-  /**
-   * Defines a in image to render.
-   * ImageDef is part of {@link LinkDef}
-   */
-interface ImageDef {
-    /** image url */
-  src: string     
-    /** defaults to short filename */ 
-  alt?: string
-    /** 
-     * Tailwind class for svg files (usually a text-<color>).  
-     * All affect 'fill' props in the svg file 
-     * must be set to 'currentColor'.
-     */
-  svgFillClass?: string
-    /** rendered dim, unless style prop overrides
-     * in which case the file resolution should
-     * be supplied so that both Next and the browser 
-     * can determine the aspect ratio
-    */
-  dim:  Dimensions 
-}
-
-export {
-  type ImageDef as default
-}

package/types/index.ts

@@ -1,29 +0,0 @@
-export { type Breakpoint, Breakpoints } from './breakpoints'
-export {
-  type ButtonDef,
-  type SubmitServerAction,
-  type ButtonModalProps,
-  type ButtonModalDef,
-} from './button-def'
-
-export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL } from './grid-def'
-export type {default as GridDef, GridColumnSpec} from './grid-def'
-export type { TShirtDimensions, Dimensions } from './dimensions' 
-export type { ContactInfo, ContactInfoFields } from './contact-info'
-
-import type BulletItem from './bullet-item'
-import type Icon from './icon'
-import type ImageDef from './image-def'
-import type LinkDef from './link-def'
-import type SiteDef from './site-def'
-import type TShirtSize from './t-shirt-size' 
-
-export {
-  type BulletItem,
-  type Icon,
-  type ImageDef,
-  type LinkDef,
-  type SiteDef,
-  type TShirtSize,
-}
-

package/types/link-def.ts

@@ -1,59 +0,0 @@
-import type { ButtonVariants, ButtonSizes } from '../primitives/button'
-import type { Icon }  from '.'
-
-/**
- * A Conf object for the LinkElement primitive.
- * 
- * 
- */
-interface LinkDef {
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  title?: string  
-
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  icon?: Icon
-
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  iconAfter?: boolean
-
-  href: string
-
-    /**
-     * @deprecated This field no longer has an effect as
-     * the related logic just checks for the presence of 'http' 
-     * at the start of the URL string
-     */
-  external?: boolean 
-
-    /**
-     * External links will open in a new tab (via target='_blank') by default, 
-     * while internal ones will open in the same tab.
-     * @field newTab overrides these defaults in both cases.
-     * ('external' means the url starts with 'http') 
-     */
-  newTab?: boolean  
-  
-    /**
-     * rendered as a disabled link, shows default cursor, and eats pointer events.
-     */
-  disabled?: boolean
-
-  variant?: ButtonVariants
-  size?: ButtonSizes
-}
-
-export {
-  type LinkDef as default
-}

package/types/site-def.ts

@@ -1,34 +0,0 @@
-import type LinkDef from './link-def'
-
-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 or absent): @ui/sideDef/footer/legal are rendered */
-    /** [] renders nothing above the copyright */
-  aboveCopyright?: LinkDef[] 
-
-      /** any site-specific stuff we'd like access to (link urls, etc) */
-  ext?: any 
-}
-
-export { type SiteDef as default }

package/types/t-shirt-size.ts

@@ -1,5 +0,0 @@
-type TShirtSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export {
-  type TShirtSize as default
-}

package/util/index.ts

@@ -1,81 +0,0 @@
-import { compiler as mdCompiler } from 'markdown-to-jsx'
-
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-import type { Dimensions } from '../types'
-
-  // @ts-ignore
-import _merge from 'lodash.merge'
-
-export const cn = (...inputs: ClassValue[]) => (
-  twMerge(clsx(inputs))  
-) 
-
-export const DEF_VIDEO_PROPS = {
-  autoPlay: true, 
-  loop: true, 
-  muted: true, 
-  playsInline: true
-}
-
-export const markdown = (s: string, options?: any): JSX.Element => (
-  mdCompiler(s, {
-    wrapper: null,
-    ...options
-  })
-)
-
-export const round = (num: number): string  => (
-  num
-    .toFixed(7)
-    .replace(/(\.[0-9]+?)0+$/, '$1')
-    .replace(/\.0$/, '')
-)
-
-export const pxToRem = (px: number, base: number): string => (`${round(px / base)}rem`)
-
-export const pxToEm = (px: number, base: number): string  => (`${round(px / base)}em`)
-
-export const hexToRgb = (hex: string): string => {
-  hex = hex.replace('#', '')
-  hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-  return `${r} ${g} ${b}`
-}
-
-
-export const asNum = (n: number | `${number}`): number => (
-  (typeof n === 'number') ? n : parseInt(n, 10)  
-)
-
-  // https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
-export const constrain = (dim: Dimensions, constraint: Dimensions): Dimensions => {
-  const c = {
-    w: asNum(constraint.w),
-    h: asNum(constraint.h)
-  }
-  const d = {
-    w: asNum(dim.w),
-    h: asNum(dim.h)
-  }
-
-  const ratio = Math.min(c.w / d.w, c.h / d.h)
-  return {
-    w: Math.round(d.w * ratio),
-    h: Math.round(d.h * ratio)
-  }
-}
-
-export const containsToken = (s: string | undefined, toFind: string): boolean => (s ? s.split(' ').includes(toFind) : false)
-
-export const ldMerge = (
-  result: any,
-  ...sources: any[]
-): any => (_merge(result, ...sources))
-
-export const capitalize = (str: string): string => (
-  str.charAt(0).toUpperCase() + str.slice(1)
-)
-

package/util/specifier.ts

@@ -1,43 +0,0 @@
-import type { Dimensions, TShirtSize }  from '../types'
-import type { TypographySize } from '../primitives/apply-typography'
-
-export const getPrimaryStartingWith = (s: string, toFind: string) => {
-  const tokenArray = s.split(' ')
-  return tokenArray.find((tok) => (tok.startsWith(`${toFind}-`)))
-}
-
-export const getTShirtSize = (s: string): TShirtSize | undefined => {
-  const subTokenArray = s.split('-')
-  return subTokenArray[subTokenArray.length - 1] as TShirtSize
-}
-
-export const getTypographySize = (s: string): TypographySize | undefined => {
-  const subTokenArray = s.split('-')
-  return subTokenArray[subTokenArray.length - 1] as TypographySize
-}
-
-export const getDim = (s: string): Dimensions | undefined  => {
-  const subTokenArray = s.split('-')
-  const dimStr = subTokenArray[subTokenArray.length - 1] 
-  if (dimStr) {
-    const dimTokenArray = s.split('x')
-    return dimTokenArray ? {
-      w: Number(dimTokenArray[0]),
-      h: Number(dimTokenArray[1])
-    } : undefined
-  }
-  return undefined
-}
-
-export function getSpecifierData<T>(
-  main: string,
-  getPrimary: (s: string) => string | undefined,
-  getData: (s: string) => T | undefined,
-  def?: T
-): T | undefined {
-  const primary = getPrimary(main)
-  if (primary) {
-    return getData(primary) ?? def
-  }
-  return def ?? undefined
-}