@hanzo/ui 4.5.4 → 4.6.0

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,83 @@
+import { FormattedMessage } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+
+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

@@ -1,4 +1,4 @@
-import Abbr, { type QuantityAbbrSymbol, ABBR_SYMBOLS_ARRAY } from './number-abbreviate'
+import Abbr, { QuantityAbbrSymbol, ABBR_SYMBOLS_ARRAY } from './number-abbreviate'
 
 interface FormatThreshold {
   from: number

package/util/format-text.ts

@@ -0,0 +1,33 @@
+import { HanzoToolHeader } from '@hanzo_network/hanzo-message-ts/api/tools/types';
+
+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/index.ts

@@ -1,78 +1,9 @@
-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'
-
+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';

package/util/timing.ts

@@ -0,0 +1,3 @@
+export function delay(e = 1e3) {
+  return new Promise((t) => setTimeout(t, e));
+}

package/util/toasts.tsx

@@ -0,0 +1,17 @@
+import { toast } from 'sonner';
+
+export const submitRegistrationNoCodeNonPristineError = () => {
+  return toast.error(
+    <div>
+      Your Hanzo Node is currently locked by existing keys, please restore your
+      connection or reset your Hanzo Node Storage
+    </div>,
+    { position: 'bottom-center' },
+  );
+};
+
+export const submitRegistrationNoCodeError = () => {
+  return toast.error(<div>Error connecting to your Hanzo Node</div>, {
+    position: 'bottom-center',
+  });
+};

package/utils.ts

@@ -0,0 +1,9 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Re-export from src/utils for backward compatibility
+export * from './src/utils';