@hanzo/ui 4.3.3 → 4.3.5

package/declare.d.ts

@@ -0,0 +1 @@
+declare module 'number-abbreviate'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -14,6 +14,7 @@
     "url": "git+https://github.com/hanzoai/react-sdk.git",
     "directory": "pkg/ui"
   },
+  "types": "./declare.d.ts",
   "keywords": [
     "components",
     "ecommerce",
@@ -81,6 +82,7 @@
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
     "markdown-to-jsx": "^7.4.7",
+    "number-abbreviate": "^2.0.0",
     "postcss-selector-parser": "^6.0.16",
     "react-day-picker": "^8.10.1",
     "react-intersection-observer": "^9.8.2",

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

@@ -0,0 +1,66 @@
+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' | '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: 'rounded'
+      }
+    }
+  }
+  return {
+    result: s,
+    change: 'none'
+  }
+}
+
+export default formatToMaxChar

package/util/index.ts

@@ -66,6 +66,7 @@ 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 * from './step-animation'