@hanzo/ui 5.0.0 → 5.0.1

package/util/copy-to-clipboard.ts

@@ -0,0 +1,17 @@
+export async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    // Fallback for browsers where the Clipboard API is not supported
+    const textarea = document.createElement('textarea');
+    textarea.style.position = 'fixed';
+    textarea.style.top = '-9999px';
+    textarea.style.left = '-9999px';
+    textarea.innerText = text;
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    document.execCommand('copy');
+    textarea.remove();
+  }
+}

package/util/create-shadow-root.ts

@@ -0,0 +1,22 @@
+import { createRoot } from 'react-dom/client';
+
+/**
+ * Creates a shadow root with the specified styles and returns a React root in it.
+ * @param {string} tagName - Node name to be applied to the shadow root.
+ * @param {string} styles - CSS styles to be applied to the shadow root.
+ * @returns {ReactRoot} - React root rendered inside the shadow root.
+ */
+
+export function createShadowRoot(tagName: string, styles: string) {
+  const container = document.createElement(tagName);
+  const shadow = container.attachShadow({ mode: 'open' });
+
+  // Create a new CSS style sheet and apply the specified styles and apply the style sheet to the shadow root
+  const globalStyleSheet = new CSSStyleSheet();
+  globalStyleSheet.replaceSync(styles);
+  shadow.adoptedStyleSheets = [globalStyleSheet];
+
+  const html = document.querySelector('html') as HTMLHtmlElement;
+  html.prepend(container);
+  return createRoot(shadow);
+}

package/util/date.ts

@@ -0,0 +1,84 @@
+// import { FormattedMessage } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+type FormattedMessage = any;
+
+export type ChatConversationMessage = {
+  hash: string;
+  parentHash: string;
+  inboxId: string;
+  scheduledTime: string | undefined;
+  content: string;
+  isLocal: boolean;
+  sender: {
+    avatar: string;
+  };
+  fileInbox?: {
+    id: string;
+    files: {
+      name: string;
+      preview?: string;
+    }[];
+  };
+};
+export type GetChatConversationOutput = ChatConversationMessage[];
+
+export const formatDateToUSLocaleString = (date: Date | undefined) => {
+  if (!date) return '-';
+  return new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  });
+};
+export const formatDateToLocaleStringWithTime = (date: Date | undefined) => {
+  if (!date) return '-';
+  return new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+};
+
+export const getRelativeDateLabel = (date: Date): string => {
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+  if (date.toDateString() === today.toDateString()) {
+    return 'today';
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return 'yesterday';
+  } else {
+    return date.toDateString();
+  }
+};
+
+export const groupMessagesByDate = (messages: FormattedMessage[]) => {
+  const groupedMessages: Record<string, FormattedMessage[]> = {};
+  for (const message of messages) {
+    const date = new Date(message.createdAt ?? '').toDateString();
+    if (!groupedMessages[date]) {
+      groupedMessages[date] = [];
+    }
+    groupedMessages[date].push(message);
+  }
+  return groupedMessages;
+};
+
+export const formatDateToMonthAndDay = (date: Date): string => {
+  const today = new Date();
+  if (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  ) {
+    return date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    });
+  }
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}/${day}`;
+};

package/util/debounce.ts

@@ -0,0 +1,11 @@
+export const debounce = (func: Function, delay: number) => {
+  let timeoutId: NodeJS.Timeout | null = null;
+  return (...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};

package/util/file.ts

@@ -0,0 +1,15 @@
+export const getFileName = (fileName: string): string => {
+  const nameParts = fileName.split('.');
+  return nameParts.slice(0, -1).join('.');
+};
+export const getFileExt = (fileName: string): string => {
+  const nameParts = fileName.split('.');
+  return nameParts.pop() || '';
+};
+
+export const isFileTypeImageOrPdf = (file: File): boolean => {
+  if (!file) return false;
+  return (
+    file?.type.startsWith('image/') || file?.type.startsWith('application/pdf')
+  );
+};

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

@@ -0,0 +1,125 @@
+import Abbr, { 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-text.ts

@@ -0,0 +1,34 @@
+// import { HanzoToolHeader } from '@hanzo_network/hanzo-message-ts/api/tools/types';
+type HanzoToolHeader = any;
+
+export const formatText = (text: string) => {
+  const camelToSpaces = text.replace(/([a-z])([A-Z])/g, '$1 $2');
+  const snakeToSpaces = camelToSpaces.replace(/_/g, ' ');
+  return snakeToSpaces
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export const formatCamelCaseText = (text: string) => {
+  const words = text.split(/(?=[A-Z])/);
+
+  const formattedWords = words.map((word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  });
+
+  const result = formattedWords.join(' ');
+
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+export const getVersionFromTool = (toolRouterKey: HanzoToolHeader) => {
+  if (toolRouterKey.version) {
+    return toolRouterKey.version;
+  }
+  const parts = toolRouterKey.name.split(':::');
+  if (parts.length === 4) {
+    return parts[3];
+  }
+  return 'latest';
+};

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

@@ -0,0 +1,68 @@
+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

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

package/util/index.ts

@@ -0,0 +1,112 @@
+// Export all utilities
+export * from './date';
+export * from './file';
+export * from './create-shadow-root';
+export * from './timing';
+export * from './blob';
+export * from './copy-to-clipboard';
+export * from './format-text';
+export * from './toasts';
+export * from './debounce';
+export { default as spreadToTransform } from './spread-to-transform';
+export * from './specifier';
+export * from './number-abbreviate';
+export * from './format-to-max-char';
+export * from './format-and-abbreviate-as-currency';
+export * from './two-way-map';
+
+// Import and re-export cn utility and other common functions
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input);
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function absoluteUrl(path: string): string {
+  if (typeof window !== 'undefined') return path;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}${path}`;
+  return `http://localhost:${process.env.PORT ?? 3000}${path}`;
+}
+
+// Export VariantProps type from class-variance-authority
+export type { VariantProps } from 'class-variance-authority';
+
+// For backward compatibility with components importing from util
+export function constrain(value: number, min: number, max: number): number;
+export function constrain(dim: { w: number; h: number }, constrainTo: { w: number; h: number }): { w: number; h: number };
+export function constrain(
+  value: number | { w: number; h: number },
+  minOrConstrainTo: number | { w: number; h: number },
+  max?: number
+): number | { w: number; h: number } {
+  if (typeof value === 'number' && typeof minOrConstrainTo === 'number' && typeof max === 'number') {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+
+  if (typeof value === 'object' && typeof minOrConstrainTo === 'object') {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+
+    if (aspectRatio > constrainAspectRatio) {
+      // constrain by width
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      // constrain by height
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+
+  throw new Error('Invalid parameters for constrain function');
+}
+
+// Export round, pxToRem, pxToEm for tailwind plugin
+export function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+export function pxToRem(px: number, base = 16): string {
+  return `${px / base}rem`;
+}
+
+export function pxToEm(px: number, base = 16): string {
+  return `${px / base}em`;
+}
+
+// Missing utility functions
+export function containsToken(text: string, token: string): boolean {
+  return text.toLowerCase().includes(token.toLowerCase());
+}
+
+export function ldMerge(...objects: any[]): any {
+  // Simple merge function for lodash compatibility
+  const result = {};
+  for (const obj of objects) {
+    if (obj && typeof obj === 'object') {
+      Object.assign(result, obj);
+    }
+  }
+  return result;
+}
+
+export function asNum(value: any, defaultValue = 0): number {
+  const num = Number(value);
+  return isNaN(num) ? defaultValue : num;
+}

package/util/number-abbreviate.ts

@@ -0,0 +1,49 @@
+// 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,25 @@
+import type { MediaTransform } from '../types'
+
+export function spreadToTransform(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(' ') } : {}
+}
+
+export default spreadToTransform