@hanzo/ui 4.5.4 → 4.7.0

package/types/t-shirt-size.ts

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

package/types/tshirt-dimensions.ts

@@ -1,20 +0,0 @@
-type ConcreteDimensions = {
-  w: number
-  h: number
-}
-
-  // TODO: This is only used by VideoDef. 
-  // Is there a better way w @next/video?  
-type TShirtDimensions = { 
-  xs?: ConcreteDimensions            
-  sm?: ConcreteDimensions 
-  md:  ConcreteDimensions 
-  lg?: ConcreteDimensions 
-  xl?: ConcreteDimensions
-}
-
-export {
-  type TShirtDimensions as default
-}
-
-  

package/types/video-def.ts

@@ -1,25 +0,0 @@
-import type TShirtDimensions from './tshirt-dimensions'
-
-interface VideoDef {
-  videoProps?: any   // For example,
-    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      videoProps: {
-        autoPlay: true, 
-        loop: true, 
-        muted: true, 
-        playsInline: true
-      }, 
-
-      Valueless props are boolean.  
-      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
-    ~~~~~~~~~~~~~~~~~~~~~~~~ */
-  poster?: string      
-  sources?: string[]
-  dim: TShirtDimensions 
-    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
-  sizing?: any
-}
-
-export {
-  type VideoDef as default
-}

package/util/format-and-abbreviate-as-currency.ts

@@ -1,125 +0,0 @@
-import Abbr, { type QuantityAbbrSymbol, ABBR_SYMBOLS_ARRAY } from './number-abbreviate'
-
-interface FormatThreshold {
-  from: number
-  use: QuantityAbbrSymbol
-}
-
-const usdFormatter = Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-  minimumFractionDigits: 2,  
-})
-
-const formatAsUSCurrency = (n: number) => {
-  let result = usdFormatter.format(n)
-  return result.endsWith('.00') ? result.slice(0, -3) : result
-}
-
-const formatAndAbbreviateAsCurrency = (
-  n: number | null,
-  thresholds: FormatThreshold[] = [{
-    from: 1000000000,
-    use: 'M'
-  }],
-    /** 
-     * Chars that will be added by ui if the number is rounded.  
-     * For example, if the desired output for 10.15 is "~10.1", 
-     * the tilda counts as 1 char.  
-     */
-  roundingAdds: number = 1,
-  maxDecimal: number = 2 
-): {
-  full: string
-  result: string 
-  change: 'rounded' | 'none' | 'abbr' | 'empty' 
-} => {
-  if (n === null) {
-    return {
-      full: '',
-      result: '',
-      change: 'empty'
-    }
-  }
-
-  const formatted = formatAsUSCurrency(n)
-
-  if (n < thresholds[0].from) {
-    return {
-      full: formatted,
-      result: formatted,
-      change: 'none' 
-    }
-  }
-
-    // Get operative FormatThreshold pair...
-  let threshold: FormatThreshold 
-  for (
-    let i = 0; 
-    i < thresholds.length && n >= thresholds[i].from; 
-    threshold = thresholds[i], i++ 
-  ) {}
-
-    // Build up units array to all units
-    // up to threshold.use
-  const units: QuantityAbbrSymbol[] = []
-  for (let i = 0; i < ABBR_SYMBOLS_ARRAY.length; i++) {
-    const current = ABBR_SYMBOLS_ARRAY[i]
-    units.push(current)
-    if (current === threshold!.use) {
-      break
-    }
-  }
-
-  const abbreviator = new Abbr(units)
-
-    // Use threshold.from as a guide to how many chars are available:
-    // first digit + comma = 2
-    // Possible trailing cents: '.xx'.length = 3
-    // 3 - 2 = 1
-  const charsAvail = formatAsUSCurrency(threshold!.from).length + 1 
-  const abbr = abbreviator.abbreviate(n, charsAvail) // arbitrary, but good approx
-  const numStr = abbr.slice(0, -1)
-  const abbreviation = abbr.slice(-1)
-  const numerical = parseFloat(numStr)
-
-  const integral = Math.floor(numerical)
-  const integralString = formatAsUSCurrency(integral)
-  const commas = integralString.split(',').length - 1
-
-    // minus abbr, dec point, dollar sign, and roundingAdds / tilda,  
-    // (1 + 1 + 1 + roundingAdds)
-    // ("precision" does NOT include the decimal point itself, 
-    // so we have to explicitly factor it in.)
-  const roundedString = numerical.toPrecision(charsAvail - commas - (3 + roundingAdds)) 
-    // remove trailing zeros, if any
-  const roundedNumerical = parseFloat(roundedString)
-  const roundedIntegral = Math.trunc(roundedNumerical)
-  const roundedIntegralString = formatAsUSCurrency(roundedIntegral)
-
-  let decimalPortion = roundedNumerical - roundedIntegral
-  let result
-  if (decimalPortion !== 0) {
-      // remove trailing zeros if any
-    decimalPortion = parseFloat(decimalPortion.toFixed(maxDecimal)) 
-    const decimalPortionString = decimalPortion.toString()
-    const afterDecimalString = decimalPortionString.slice(decimalPortionString.indexOf('.') + 1)
-    result = roundedIntegralString + '.' + afterDecimalString + abbreviation
-  }
-  else {
-    result = roundedIntegralString  + abbreviation  
-  }
-    // Did we lose any precision? 
-  const rounded = (roundedIntegral + decimalPortion !== n)
-  return {
-    full: formatted,
-    result,
-    change: rounded ?  'rounded' : 'abbr'
-  }
-}
-
-export {
-  formatAndAbbreviateAsCurrency as default,
-  type FormatThreshold, 
-  type QuantityAbbrSymbol
-}

package/util/format-to-max-char.ts

@@ -1,68 +0,0 @@
-import Abbr from './number-abbreviate'
-
-const abbr = new Abbr(['K', 'M', 'B', 'T'])
-
-const formatToMaxChar = (
-  n: number | null, 
-  maxChars: number, 
-    /** 
-     * Chars that will be added by ui if the number is rounded.  
-     * For example, if the desired output for 10.15 is "~10.1", 
-     * the tilda counts as 1 char.  
-     */
-  roundingAdds: number = 1 
-): {
-  result: string 
-  change: 'rounded' | 'none' | 'abbr' | 'empty' 
-} => {
-  if (n === null) {
-    return {
-      result: '',
-      change: 'empty'
-    }
-  }
-  const s = n.toString()
-  if (s.length > maxChars) {
-      // Highest number that can be rounded down to an 
-      // acceptable string.
-      // Decimal point, plus one decimal place = 2 chars
-    const cuttoff = Math.pow(10, maxChars - 2 - roundingAdds) - 0.05
-    if (n < cuttoff) {
-      const intPortion = Math.floor(n)
-      const len = intPortion.toString().length
-        // 1 is for dec point itself
-      const availDecimals = maxChars - len - 1 - roundingAdds 
-        // removes trailing zeros, if any
-      const roundedNumerical = parseFloat(n.toFixed(availDecimals))
-      return {
-        result: roundedNumerical.toString(),
-        change: 'rounded'
-      }
-    }
-    else {
-
-      const str = abbr.abbreviate(n, maxChars)
-      const numStr = str.slice(0, -1)
-      const abbreviation = str.slice(-1)
-      const numerical = parseFloat(numStr)
-
-        // minus abbr, dec point, and roundingAdds / tilda,  
-        // (1 + 1 + roundingAdds)
-        // ("precision" does NOT include the decimal point itself, 
-        // so we have to explicitly factor it in.)
-      const roundedString = numerical.toPrecision(maxChars - (2 + roundingAdds)) 
-        // remove trailing zeros, if any
-      const roundedNumerical = parseFloat(roundedString)
-      return {
-        result: roundedNumerical.toString() + abbreviation,
-        change: roundedNumerical === numerical ? 'abbr' : 'rounded'
-      }
-    }
-  }
-  return {
-    result: s,
-    change: 'none'
-  }
-}
-
-export default formatToMaxChar

package/util/index-client.ts

@@ -1,3 +0,0 @@
-export * from './index'
-// Must be imported from 'use client'
-export * from './step-animation'

package/util/index.ts

@@ -1,78 +0,0 @@
-import { compiler as mdCompiler } from 'markdown-to-jsx'
-
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-export { cva, type VariantProps } from 'class-variance-authority'
-
-import type { Dimensions } from '../types'
-
-import { default as _merge }  from 'lodash.merge'
-
-export const cn = (...inputs: ClassValue[]) => (
-  twMerge(clsx(inputs))  
-) 
-
-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 = (d: Dimensions, c: Dimensions): Dimensions => {
-
-  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)
-)
-
-export { default as spreadToTransform } from './spread-to-transform'
-export { default as formatToMaxChar } from './format-to-max-char'
-export { 
-  default as formatAndAbbreviateAsCurrency, 
-  type FormatThreshold,   
-  type QuantityAbbrSymbol
-} from './format-and-abbreviate-as-currency'
-
-// Must be imported from 'use client', so can't include this...
-// export * from './step-animation'
-

package/util/number-abbreviate.ts

@@ -1,49 +0,0 @@
-// cf: https://github.com/domharrington/js-number-abbreviate/blob/master/index.js
-
-type QuantityAbbrSymbol = 'K' | 'M' | 'B' | 'T'
-const ABBR_SYMBOLS_ARRAY = ['K', 'M', 'B', 'T'] satisfies QuantityAbbrSymbol[]
-
-class NumberAbbreviator {
-
-  private _units: QuantityAbbrSymbol[]
-
-  constructor(units?: QuantityAbbrSymbol[]) {
-    this._units = units ?? ABBR_SYMBOLS_ARRAY
-  }
-
-  private _abbreviate = (
-    n: number, 
-    decPlaces: number,
-    log: boolean = false
-  ): string  => {
-
-    const _decPlaces = Math.pow(10, decPlaces)
-    let _n = n
-
-    let _unit
-    for (let i = this._units.length - 1; i >= 0; i--) {
-      const size = Math.pow(10, (i + 1) * 3)
-      if (size <= _n) {
-        _n = Math.round(_n * _decPlaces / size) / _decPlaces
-        if ((_n === 1000) && (i < this._units.length - 1)) {
-          _n = 1
-          i++
-        }
-        _unit = this._units[i]
-        break
-      }
-    }
-    return _n.toString() + (_unit ?? '')
-  }
-
-  abbreviate = (n: number, decPlaces: number, log: boolean = false) => {
-    const abbreviatedNumber = this._abbreviate(Math.abs(n), decPlaces, log)
-    return n < 0 ? '-' + abbreviatedNumber : abbreviatedNumber
-  }  
-}
-
-export {
-  type QuantityAbbrSymbol,
-  ABBR_SYMBOLS_ARRAY, 
-  NumberAbbreviator as default 
-}

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
-}

package/util/spread-to-transform.ts

@@ -1,24 +0,0 @@
-import type { MediaTransform } from '../types'
-
-export default (t: MediaTransform) => {
-
-  let transformStrings: string[] = [] 
-  const scaleVal = 'scale' in t ? t.scale : undefined
-  if (scaleVal) {
-    if (typeof scaleVal === 'number') {
-      transformStrings.push(`scale(${scaleVal})`)   
-    }
-    else if (
-      Array.isArray(scaleVal) && 
-      scaleVal.length == 2 && 
-      typeof scaleVal[0] === 'number'
-    ) {
-      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`)   
-    }
-    else {
-      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!")
-    }
-  }
-
-  return transformStrings.length > 0 ? { transform: transformStrings.join(' ') } : {}
-}

package/util/step-animation.ts

@@ -1,90 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { makeObservable, reaction, computed, type IReactionDisposer, observable, action } from 'mobx'
-
-interface StepAnimation {
-  notPast(step: number): boolean
-}
-
-class MyStepAnimation implements StepAnimation {
-
-  _step: number = -1
-  _reactionDisposer: IReactionDisposer | undefined = undefined
-
-  _initialStep: () => boolean
-  _intervals: number[]
-
-    /**  initialStep: false -> true: step 0
-                      true -> false: step 1
-         after intervals[0] : step 2
-         after intervals[1] : step 3
-
-        initialStep must contain at least one mobx observable and return boolean 
-        see: https://mobx.js.org/reactions.html#reaction
-    */
-  constructor(initialStep: () => boolean, intervals: number[]) {
-
-    this._initialStep = initialStep
-    this._intervals = intervals
-
-    makeObservable(this, {
-      _step: observable,
-      _setStep: action
-    })
-  }
-
-    // This is separated out because reactions have to be created
-    // once we have a valid doc / window etc. (mobx internals)
-    // Can't just do it in constructor and assign to ref
-  initialize = () => {
-    
-    const fireNext = () => {
-      this._setStep(this._step + 1)
-      if (this._step <= this._intervals.length) {
-          // No need to call clearTimeout(): https://stackoverflow.com/a/7391588/11645689
-        setTimeout(() => { fireNext() }, this._intervals[this._step - 1]) 
-      }
-    }
-
-    this._reactionDisposer = reaction(
-      this._initialStep,
-      (triggered: boolean) => {
-        if (triggered && this._step === -1) { 
-          this._setStep(0)
-        }
-          // extra safe
-        else if (this._step === 0) { 
-          fireNext()  
-        }
-      }
-    )
-  }
-
-  _setStep = (v: number): void => {this._step = v}
-
-  dispose = () => {
-    if (this._reactionDisposer) {
-      this._reactionDisposer()
-    }
-  }
-
-    // https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments
-  notPast = (step: number): boolean => (
-    computed(() => (this._step > -1 && this._step <= step)).get()
-  )
-}
-
-const useStepAnimation = (initialStep: () => boolean, intervals: number[]): StepAnimation => {
-
-  const animRef = useRef<MyStepAnimation>(new MyStepAnimation(initialStep, intervals))
-  useEffect(() => {
-    animRef.current.initialize()
-    return animRef.current.dispose 
-  }, [])
-
-  return animRef.current
-}
-
-export {
-  type StepAnimation, 
-  useStepAnimation
-}

package/util/two-way-map.ts

@@ -1,19 +0,0 @@
-class TwoWayReadonlyMap<T, K> {
-  map: Map<T, K>;
-  reverseMap: Map<K, T>;
-  constructor(map: Map<T, K>) {
-    this.map = map;
-    this.reverseMap = new Map<K, T>();
-    map.forEach((value, key) => {
-      this.reverseMap.set(value, key);
-    });
-  }
-  get(key: T) {
-    return this.map.get(key);
-  }
-  revGet(key: K) {
-    return this.reverseMap.get(key);
-  }
-}
-
-export default TwoWayReadonlyMap