@hanzo/ui 4.3.7 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.3.7",
+  "version": "4.4.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -14,7 +14,6 @@
     "url": "git+https://github.com/hanzoai/react-sdk.git",
     "directory": "pkg/ui"
   },
-  "types": "./declare.d.ts",
   "keywords": [
     "components",
     "ecommerce",

package/primitives/form.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 'use client'
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
@@ -7,7 +6,7 @@ import { Slot } from "@radix-ui/react-slot"
 import {
   Controller,
   type ControllerProps,
-  FieldPath,
+  type FieldPath,
   type FieldValues,
   FormProvider,
   useFormContext,

package/primitives/tooltip.tsx

@@ -27,4 +27,22 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+const TooltipWrapper: React.FC<{
+  text: string
+  tooltipClx?: string
+} & React.PropsWithChildren> = ({
+  children,
+  text,
+  tooltipClx=''
+}) => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      {children}
+    </TooltipTrigger>
+    <TooltipContent className={tooltipClx}>
+      {text}
+    </TooltipContent>
+  </Tooltip>
+)
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipWrapper }

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

@@ -0,0 +1,119 @@
+import Abbr, { type QuantityAbbrSymbol, ABBR_SYMBOLS_ARRAY } from './number-abbreviate'
+
+interface FormatThreshold {
+  from: number
+  use: QuantityAbbrSymbol
+}
+
+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 usdFormatter = Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0    
+  })
+  const formatted = usdFormatter.format(n)
+
+  if (n < thresholds[0].from) {
+    return {
+      full: formatted,
+      result: formatted,
+      change: 'none' 
+    }
+  }
+
+    // Get operative FormatThreshold pair...
+  let threshold: FormatThreshold 
+  for (
+    let i = 0, threshold = thresholds[0]; 
+    i < thresholds.length, n >= thresholds[i].from; 
+    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 thresholdFrom as a guide to how many chars are available
+    // first digit + comma = 2
+    // Possible trailing cents: '.xx'.length = 3
+    // 3 - 2 = 1
+  const charsAvail = usdFormatter.format(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 = usdFormatter.format(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 = usdFormatter.format(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

@@ -5,15 +5,15 @@ 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.  
-   */
+    /** 
+     * 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' | 'empty' 
+  change: 'rounded' | 'none' | 'abbr' | 'empty' 
 } => {
   if (n === null) {
     return {
@@ -40,10 +40,12 @@ const formatToMaxChar = (
       }
     }
     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, 
@@ -53,7 +55,7 @@ const formatToMaxChar = (
       const roundedNumerical = parseFloat(roundedString)
       return {
         result: roundedNumerical.toString() + abbreviation,
-        change: 'rounded'
+        change: roundedNumerical === numerical ? 'abbr' : 'rounded'
       }
     }
   }

package/util/index.ts

@@ -67,6 +67,12 @@ export const capitalize = (str: string): string => (
 
 export { default as spreadToTransform } from './spread-to-transform'
 export { default as formatToMaxChar } from './format-to-max-char'
-// Must be imported from 'use client'
+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,16 +1,21 @@
 // cf: https://github.com/domharrington/js-number-abbreviate/blob/master/index.js
 
-const DEF_ABBREVIATIONS = ['K', 'M', 'B', 'T']
+type QuantityAbbrSymbol = 'K' | 'M' | 'B' | 'T'
+const ABBR_SYMBOLS_ARRAY = ['K', 'M', 'B', 'T'] satisfies QuantityAbbrSymbol[]
 
 class NumberAbbreviator {
 
-  private _units: string[]
+  private _units: QuantityAbbrSymbol[]
 
-  constructor(units?: string[]) {
-    this._units = units ?? DEF_ABBREVIATIONS
+  constructor(units?: QuantityAbbrSymbol[]) {
+    this._units = units ?? ABBR_SYMBOLS_ARRAY
   }
 
-  private _abbreviate = (n: number, decPlaces: number): string  => {
+  private _abbreviate = (
+    n: number, 
+    decPlaces: number,
+    log: boolean = false
+  ): string  => {
 
     const _decPlaces = Math.pow(10, decPlaces)
     let _n = n
@@ -31,70 +36,14 @@ class NumberAbbreviator {
     return _n.toString() + (_unit ?? '')
   }
 
-  abbreviate = (n: number, decPlaces: number) => {
-    const abbreviatedNumber = this._abbreviate(Math.abs(n), decPlaces || 0)
+  abbreviate = (n: number, decPlaces: number, log: boolean = false) => {
+    const abbreviatedNumber = this._abbreviate(Math.abs(n), decPlaces, log)
     return n < 0 ? '-' + abbreviatedNumber : abbreviatedNumber
   }  
 }
 
-
-export default NumberAbbreviator
-
-/*
-(function(root){
-  'use strict';
-
-  function NumberAbbreviate() {
-    var units
-    if (!(this instanceof NumberAbbreviate)) {
-      // function usage: abbrev(n, decPlaces, units)
-      var n = arguments[0]
-      var decPlaces = arguments[1]
-      units = arguments[2]
-      var ab = new NumberAbbreviate(units)
-      return ab.abbreviate(n, decPlaces)
-    }
-    // class usage: new NumberAbbreviate(units)
-    units = arguments[0]
-    this.units = units == null ? ['k', 'm', 'b', 't'] : units
-  }
-
-  NumberAbbreviate.prototype._abbreviate = function(number, decPlaces) {
-    decPlaces = Math.pow(10, decPlaces)
-
-    for (var i = this.units.length - 1; i >= 0; i--) {
-
-      var size = Math.pow(10, (i + 1) * 3)
-
-      if (size <= number) {
-        number = Math.round(number * decPlaces / size) / decPlaces
-
-        if ((number === 1000) && (i < this.units.length - 1)) {
-          number = 1
-          i++
-        }
-
-        number += this.units[i]
-
-        break
-      }
-    }
-
-    return number
-  }
-
-  NumberAbbreviate.prototype.abbreviate = function(number, decPlaces) {
-    var isNegative = number < 0
-    var abbreviatedNumber = this._abbreviate(Math.abs(number), decPlaces || 0)
-
-    return isNegative ? '-' + abbreviatedNumber : abbreviatedNumber;
-  }
-
-  if (typeof module !== 'undefined' && module.exports) {
-    module.exports = NumberAbbreviate
-  } else {
-    root.NumberAbbreviate = NumberAbbreviate
-  }
-
-})(this);
-*/
+export {
+  type QuantityAbbrSymbol,
+  ABBR_SYMBOLS_ARRAY, 
+  NumberAbbreviator as default 
+}