@hanzo/ui 4.5.3 → 4.6.0

package/primitives/mermaid.tsx

@@ -0,0 +1,196 @@
+import { save } from '@tauri-apps/plugin-dialog';
+import * as fs from '@tauri-apps/plugin-fs';
+import { RotateCcw, Download } from 'lucide-react';
+import mermaid from 'mermaid';
+import { FC, useEffect, useRef, useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import svgPanZoom from 'svg-pan-zoom';
+import { cn } from '../src/utils';
+import { Button } from './button';
+import { SyntaxHighlighterProps } from './markdown-preview';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+export type MermaidDiagramProps = SyntaxHighlighterProps & {
+  className?: string;
+  isRunning?: boolean;
+};
+
+mermaid.initialize({
+  startOnLoad: true,
+  mindmap: {
+    useWidth: 800,
+  },
+  theme: 'dark',
+  fontSize: 18,
+  darkMode: true,
+  fontFamily: 'Inter',
+});
+
+const generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
+
+const downloadBlob = async (blob: Blob, filename: string) => {
+  const filePath = await save({
+    title: 'Save Mermaid Diagram',
+    filters: [
+      {
+        name: 'SVG Files',
+        extensions: ['svg'],
+      },
+    ],
+    defaultPath: filename,
+  });
+
+  if (filePath) {
+    const arrayBuffer = await blob.arrayBuffer();
+    await fs.writeFile(filePath, new Uint8Array(arrayBuffer), {
+      baseDir: fs.BaseDirectory.Download,
+    });
+    toast.success('Mermaid diagram saved successfully');
+  }
+};
+
+export const MermaidDiagram: FC<MermaidDiagramProps> = ({
+  code,
+  className,
+  isRunning,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const lastCode = useRef<string | null>(null);
+  const [instance, setInstance] = useState<any>(null);
+
+  const isComplete = !isRunning;
+
+  const resetZoom = useCallback(() => {
+    instance?.fit();
+    instance?.center();
+  }, [instance]);
+
+  const downloadSVG = useCallback(() => {
+    if (ref.current) {
+      const svg = ref.current.innerHTML;
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      void downloadBlob(blob, 'mermaid-diagram.svg');
+    }
+  }, []);
+
+  const enableZoom = useCallback(() => {
+    instance?.enablePan();
+    instance?.enableZoom();
+  }, [instance]);
+
+  const disableZoom = useCallback(() => {
+    instance?.disablePan();
+    instance?.disableZoom();
+  }, [instance]);
+
+  const handleFocus = useCallback(() => {
+    enableZoom();
+  }, [enableZoom]);
+
+  const handleBlur = useCallback(() => {
+    disableZoom();
+  }, [disableZoom]);
+
+  const handleClick = useCallback(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isComplete || !ref.current || !code) return;
+
+    if (lastCode.current === code) return;
+
+    void (async () => {
+      try {
+        const id = generateId();
+        const { svg } = await mermaid.render(id, code);
+
+        if (ref.current) {
+          ref.current.innerHTML = svg;
+
+          const svgElement = ref.current.querySelector('svg');
+          if (svgElement) {
+            svgElement.setAttribute('height', '100%');
+            svgElement.setAttribute('width', '100%');
+            svgElement.style.height = '100%';
+            svgElement.style.width = '100%';
+            svgElement.style.position = 'absolute';
+            svgElement.style.top = '0';
+            svgElement.style.left = '0';
+
+            const panZoomInstance = svgPanZoom(svgElement);
+            panZoomInstance.fit();
+            panZoomInstance.center();
+            panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
+            panZoomInstance.disablePan();
+            panZoomInstance.disableZoom();
+            setInstance(panZoomInstance);
+          }
+        }
+
+        lastCode.current = code;
+      } catch (e) {
+        console.warn('Failed to render Mermaid diagram:', e);
+      }
+    })();
+  }, [code, isComplete]);
+
+  return (
+    <div className="relative">
+      <div className="absolute top-2 right-2 z-10 flex gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="tertiary"
+              size="icon"
+              onClick={resetZoom}
+              className="text-text-secondary"
+            >
+              <RotateCcw size={14} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Reset Zoom</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="tertiary"
+              size="icon"
+              onClick={downloadSVG}
+              className="text-text-secondary"
+            >
+              <Download size={14} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Download SVG</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+      <div
+        onClick={handleClick}
+        className="text-text-secondary bg-bg-quaternary absolute right-2 bottom-2 z-10 rounded px-2 py-1 text-xs"
+      >
+        Click to focus, then scroll to zoom & drag to pan
+      </div>
+      <div
+        ref={ref}
+        tabIndex={0}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onClick={handleClick}
+        className={cn(
+          'text-text-secondary bg-bg-quaternary focus:ring-opacity-50 relative w-full cursor-grab overflow-hidden rounded-b-lg p-4 py-10 text-center text-sm focus:cursor-grabbing focus:ring-2 focus:ring-blue-500 focus:outline-none',
+          className,
+        )}
+        style={{ width: '100%', minHeight: '400px' }}
+      >
+        Drawing diagram...
+      </div>
+    </div>
+  );
+};

package/primitives/next/link-element.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 import Link from 'next/link'
 
 import type { LinkDef }  from '../../types'

package/primitives/next/mdx-link.tsx

@@ -1,4 +1,4 @@
-import React,  { type AnchorHTMLAttributes, type PropsWithChildren } from 'react'
+import React,  { AnchorHTMLAttributes, type PropsWithChildren } from 'react'
 import Link from 'next/link'
 
 const MDXLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement> > = ({

package/primitives/pagination.tsx

@@ -0,0 +1,117 @@
+import { MoreHorizontal, RedoIcon, UndoIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+import { ButtonProps, buttonVariants } from './button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    role="navigation"
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = ({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) => (
+  <ul
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+);
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = ({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li className={cn('', className)} {...props} />
+);
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'tertiary',
+        size,
+      }),
+      'size-[30px] rounded-lg p-0.5',
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn('gap-1', className)}
+    size="sm"
+    {...props}
+  >
+    <UndoIcon className="h-4 w-4" />
+    <span className="sr-only">Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn('gap-1', className)}
+    size="sm"
+    {...props}
+  >
+    <span className="sr-only">Next</span>
+    <RedoIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/primitives/popover.tsx

@@ -1,37 +1,32 @@
-'use client'
-import React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
-const Popover = PopoverPrimitive.Root
-const PopoverTrigger = PopoverPrimitive.Trigger
-const PopoverClose = PopoverPrimitive.Close
-const PopoverAnchor = PopoverPrimitive.Anchor
-const PopoverArrow = PopoverPrimitive.Arrow
+const Popover = PopoverPrimitive.Root;
 
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = ({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
-      ref={ref}
       align={align}
-      sideOffset={sideOffset}
       className={cn(
-        'z-above-modal-2 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
-        'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 
-        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' + 
-        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-bg-dark border-divider z-50 w-72 rounded-md border p-4 text-gray-50 shadow-lg shadow-md outline-hidden',
+        className,
       )}
+      sideOffset={sideOffset}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose, PopoverArrow }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/primitives/pretty-json-print.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { cn } from '../src/utils';
+
+export const PrettyJsonPrint = ({
+  json,
+  className,
+}: {
+  json: string | object;
+  className?: string;
+}) => {
+  const formattedJson = useMemo(() => {
+    let formattedValue = `Unparseable JSON: String(${json})`;
+    if (typeof json === 'object') {
+      formattedValue = JSON.stringify(json, null, 2);
+    } else if (typeof json === 'string') {
+      try {
+        const parsedJson = JSON.parse(json);
+        formattedValue = JSON.stringify(parsedJson, null, 2);
+      } catch (error) {
+        console.error('error parsing json', error);
+      }
+    }
+    return formattedValue;
+  }, [json]);
+  return (
+    <pre className={cn('overflow-x-scroll', className)}>{formattedJson}</pre>
+  );
+};

package/primitives/progress.tsx

@@ -1,27 +1,26 @@
-'use client'
-import React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
 
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+const Progress = ({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) => (
   <ProgressPrimitive.Root
-    ref={ref}
     className={cn(
-      'relative h-4 w-full overflow-hidden rounded-full bg-level-2',
-      className
+      'bg-bg-quaternary relative h-4 w-full overflow-hidden',
+      className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className='h-full w-full flex-1 bg-accent transition-all'
+      className="h-full w-full flex-1 bg-green-500 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export default Progress
+export { Progress };

package/primitives/prompt-textarea.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { cn } from '../src/utils';
+import { DotsLoader } from './dots-loader';
+import { FormLabel } from './form';
+
+const MIN_TEXTAREA_HEIGHT = 32;
+export interface PromptTextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  isLoading?: boolean;
+  label?: string;
+  field: {
+    onChange: (...event: any[]) => void;
+    onBlur: () => void;
+    value: any;
+    disabled?: boolean;
+    name: string;
+    placeholder?: string;
+  };
+}
+
+const PromptTextarea = ({ className, ...props }: PromptTextareaProps) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useLayoutEffect(() => {
+    // Reset height - important to shrink on delete
+
+    if (!textareaRef.current) return;
+
+    textareaRef.current.style.height = '60px';
+    // Set height
+    textareaRef.current.style.height = `${Math.max(
+      textareaRef.current.scrollHeight + 2,
+      MIN_TEXTAREA_HEIGHT,
+    )}px`;
+
+    if (props.autoFocus !== undefined && props.autoFocus) {
+      textareaRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value]);
+
+  return (
+    <>
+      <textarea
+        className={cn(
+          'flex w-full rounded-md border border-gray-200 bg-gray-400 px-4 py-2 pt-4 text-sm break-words placeholder-gray-100 placeholder:text-base focus-visible:ring-1 focus-visible:ring-gray-100 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        style={{
+          minHeight: MIN_TEXTAREA_HEIGHT,
+          resize: 'none',
+          maxHeight: '300px',
+        }}
+        {...props.field}
+        onKeyDown={props.onKeyDown}
+        ref={textareaRef}
+        {...(!props.isLoading && {
+          placeholder: props.label,
+        })}
+      />
+
+      {props.isLoading ? (
+        <DotsLoader className="absolute top-6 left-4" />
+      ) : null}
+      <FormLabel className="sr-only">{props.label}</FormLabel>
+    </>
+  );
+};
+PromptTextarea.displayName = 'PromptTextarea';
+
+export { PromptTextarea };

package/primitives/qr-code.tsx

@@ -0,0 +1,112 @@
+import { DownloadIcon } from '@radix-ui/react-icons';
+import { Check } from 'lucide-react';
+import React, { useState } from 'react';
+import { IProps, QRCode as ReactQRCode } from 'react-qrcode-logo';
+
+import hanzoLogo from '../assets/images/app-icon.png';
+import { Button } from './button';
+import { Dialog, DialogContent } from './dialog';
+
+export function QRCode({
+  value,
+  size,
+  id,
+  ...props
+}: {
+  value: IProps['value'];
+  size: IProps['size'];
+  id?: IProps['id'];
+} & React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
+  return (
+    <div {...props}>
+      <ReactQRCode
+        ecLevel={'M'}
+        eyeColor="black"
+        eyeRadius={10}
+        fgColor="black"
+        id={id}
+        logoHeight={size ? size * 0.2 : undefined}
+        logoImage={hanzoLogo}
+        logoPaddingStyle="circle"
+        logoWidth={size ? size * 0.2 : undefined}
+        qrStyle="dots"
+        removeQrCodeBehindLogo
+        size={size ?? 300}
+        value={value}
+      />
+    </div>
+  );
+}
+
+export function QrCodeModal({
+  open,
+  onOpenChange,
+  value,
+  onSave,
+  title,
+  description,
+  modalClassName,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: IProps['value'];
+  onSave: (key: string) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  modalClassName?: string;
+}) {
+  const [saved, setSaved] = useState(false);
+  const downloadCode = async () => {
+    const canvas = document.querySelector('#registration-code-qr');
+    if (canvas instanceof HTMLCanvasElement) {
+      try {
+        const pngUrl = canvas.toDataURL();
+        onSave(pngUrl);
+        setSaved(true);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setTimeout(() => {
+          setSaved(false);
+        }, 3000);
+      }
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className={modalClassName}>
+        <div className="flex flex-col items-center py-4">
+          <h2 className="mb-1 text-lg font-semibold">{title}</h2>
+          <p className="text-text-secondary mb-5 text-center text-xs">
+            {description}
+          </p>
+          <div className="mb-7 overflow-hidden rounded-lg shadow-2xl">
+            <QRCode size={190} value={value} />
+            <QRCode
+              className="hidden"
+              id="registration-code-qr"
+              size={1024}
+              value={value}
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <Button className="flex gap-1" onClick={downloadCode}>
+              {saved ? <Check /> : <DownloadIcon className="h-4 w-4" />}
+              {saved ? 'Saved' : 'Download'}
+            </Button>
+            <Button
+              className="flex gap-1"
+              onClick={() => {
+                onOpenChange(false);
+              }}
+              variant="tertiary"
+            >
+              I saved it, close
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}