@hanzo/ui 5.0.0 → 5.0.2

package/primitives/chat/sqlite-preview.tsx

@@ -0,0 +1,215 @@
+// import { debug } from '@tauri-apps/plugin-log'; // Not available in web environment
+import { useEffect, useState } from 'react';
+import * as sqljs from 'sql.js';
+
+import { Button } from '../button';
+import { Skeleton } from '../skeleton';
+
+interface SqlitePreviewProps {
+  url: string;
+}
+
+const loadTableData = async (
+  db: sqljs.Database,
+  tableName: string,
+): Promise<{ values: sqljs.SqlValue[][] }> => {
+  void console.log(`loading table data for ${tableName}`);
+  const dataResult = db.exec(`SELECT * FROM ${tableName}`);
+  void console.log(`found ${dataResult[0].values.length} rows for ${tableName}`);
+  return { values: dataResult[0].values };
+};
+
+const loadDatabase = async (
+  url: string,
+): Promise<{
+  db: sqljs.Database;
+  tables: { name: string; columns: sqljs.SqlValue[]; count: number }[];
+}> => {
+  void console.log(`loading database from ${url}`);
+  const SQL = await sqljs.default({
+    locateFile: (file: string) => '/sqljs/sql-wasm.wasm',
+  });
+
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  const db = new SQL.Database(new Uint8Array(arrayBuffer));
+
+  // Get list of tables
+  const tablesResult = db.exec(
+    "SELECT name FROM sqlite_master WHERE type='table'",
+  );
+  const tableNames = tablesResult[0].values.map((v) => v[0] as string);
+  void console.log(`found ${tableNames.length} tables`);
+  void console.log(`tables: ${tableNames.join(', ')}`);
+  const tables = tableNames.map((table) => {
+    const columnsResult = db.exec(`PRAGMA table_info(${table})`);
+    const columnNames = columnsResult[0].values.map((v) => v[1]);
+    const countResult = db.exec(`SELECT COUNT(*) FROM ${table}`);
+    const count = countResult[0].values[0][0] as number;
+    void console.log(
+      `found columns ${columnNames.join(', ')} and ${count} rows for ${table}`,
+    );
+    return {
+      name: table,
+      columns: columnNames,
+      count,
+    };
+  });
+
+  return { db, tables };
+};
+
+export const SqlitePreview: React.FC<SqlitePreviewProps> = ({ url }) => {
+  const [selectedTable, setSelectedTable] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [loadingData, setLoadingData] = useState(false);
+
+  const [db, setDb] = useState<sqljs.Database | null>(null);
+  const [tables, setTables] = useState<
+    { name: string; columns: sqljs.SqlValue[]; count: number }[]
+  >([]);
+  const [tableData, setTableData] = useState<{
+    columns: sqljs.SqlValue[];
+    rows: sqljs.SqlValue[][];
+  } | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true);
+      try {
+        const { db, tables } = await loadDatabase(url);
+        setDb(db);
+        setTables(tables);
+        if (tables.length > 0) {
+          setSelectedTable(tables[0].name);
+        }
+      } catch (error) {
+        setError(
+          error instanceof Error ? error.message : 'Failed to load database',
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+    void init();
+  }, [url]);
+
+  useEffect(() => {
+    if (db && selectedTable) {
+      setLoadingData(true);
+      loadTableData(db, selectedTable)
+        .then(({ values }) => {
+          const columns = tables.find(
+            (table) => table.name === selectedTable,
+          )?.columns;
+          if (!columns) {
+            setError('Table not found');
+            return;
+          }
+          setTableData({
+            columns,
+            rows: values,
+          });
+        })
+        .catch((error) => {
+          setError(
+            error instanceof Error
+              ? error.message
+              : 'Failed to load table data',
+          );
+        })
+        .finally(() => {
+          setLoadingData(false);
+        });
+    }
+  }, [db, selectedTable, tables]);
+
+  useEffect(() => {
+    return () => {
+      if (db) {
+        void console.log('closing database connection');
+        db.close();
+      }
+    };
+  }, [db]);
+
+  if (error) {
+    return (
+      <div className="p-4 text-red-500">Error loading database: {error}</div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4 rounded-lg bg-gray-600 p-4">
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-24" />
+          <Skeleton className="h-8 w-24" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 overflow-y-hidden rounded-lg bg-gray-600 p-4">
+      <div className="flex flex-wrap gap-2">
+        {tables.map((table) => (
+          <Button
+            key={table.name}
+            onClick={() => setSelectedTable(table.name)}
+            size="sm"
+            variant={selectedTable === table.name ? 'default' : 'outline'}
+          >
+            {table.name} ({table.count})
+          </Button>
+        ))}
+      </div>
+
+      {selectedTable && (
+        <div className="max-h-full min-h-fit overflow-y-auto">
+          <div className="overflow-x-auto">
+            {loadingData ? (
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ) : (
+              <table className="w-full text-left text-sm">
+                <thead className="sticky top-0 bg-gray-600">
+                  <tr className="border-b border-gray-500">
+                    {tableData?.columns.map((column) => (
+                      <th
+                        className="p-2 font-medium text-gray-300"
+                        key={String(column)}
+                      >
+                        {String(column)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {tableData?.rows.map((row, i) => (
+                    <tr className="border-b border-gray-700" key={i}>
+                      {row.map((cell, j) => (
+                        <td className="text-text-secondary p-2" key={j}>
+                          {String(cell)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/primitives/checkbox.tsx

@@ -0,0 +1,32 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof CheckboxPrimitive.Root>>;
+};
+
+const Checkbox = ({ className, ref, ...props }: CheckboxProps) => (
+  <CheckboxPrimitive.Root
+    className={cn(
+      'focus-visible:ring-ring data-[state=checked]:bg-brand data-[state=checked]:border-brand peer h-4 w-4 shrink-0 rounded-xs border border-gray-400 shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-black',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <CheckIcon className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
+export default Checkbox;

package/primitives/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/primitives/combobox.tsx

@@ -0,0 +1,239 @@
+'use client'
+import React, { useState } from 'react'
+
+import { Check, ChevronDown } from 'lucide-react'
+
+import { cn } from '../util'
+import Button from './button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './popover'
+
+import type ListAdaptor from './list-adaptor'
+
+const DEFAULT_IMAGE_SIZE = 32
+
+interface ComboboxTriggerProps<T> {
+  current: T | null
+  currentLabel: string | null
+  imageUrl: string | null
+  placeholder?: string 
+  buttonClx?: string
+  imageClx?: string
+  disabled?: boolean
+  imageSize?: number  
+  noChevron?: boolean
+  open: boolean
+}
+
+const DefaultTriggerInner = <T,>(
+  {
+    current,
+    currentLabel,
+    imageUrl,
+    buttonClx='',
+    imageClx='',
+    placeholder='(select)',
+    disabled=false,
+    imageSize=DEFAULT_IMAGE_SIZE,  
+    noChevron=false,
+    open,
+    ...rest
+  }: ComboboxTriggerProps<T>,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) => (
+  <Button
+    ref={ref}
+    {...rest}
+    variant='outline'
+    role='combobox'
+    aria-expanded={open}
+    className={cn(
+      'flex',
+      noChevron ? 'justify-start' : 'justify-between',
+      buttonClx
+    )}
+    disabled={disabled}
+  >
+    <div className='flex justify-start items-center gap-2'>
+    {(current && imageUrl) ? (
+      <img
+        src={imageUrl}
+        alt={currentLabel + ' image'}
+        height={imageSize}
+        width={imageSize}
+        loading="eager"
+        className={cn('block', imageClx)}
+      />
+    ) : (
+      <div style={{width: imageSize, height: imageSize}} />
+    )}
+      <span className='block'>{currentLabel}</span>
+    </div>
+    {!noChevron && (<ChevronDown className={cn('block', open ? '' : 'opacity-50')} />)}
+  </Button>
+)
+
+const DefaultTrigger = React.forwardRef(DefaultTriggerInner) as <T, P>(props: P & { ref?: React.ForwardedRef<HTMLButtonElement> }) => React.ReactNode
+
+const Combobox = <T, P extends ComboboxTriggerProps<T>>({
+  elements,
+  initial,
+  current,
+  setCurrent,
+  closeOnSelect=true,
+  adaptor,
+  popoverClx='',
+  listItemClx='',
+  listItemSelectedClx='',
+  listItemDisabledClx='',
+  noCheckmark=false,
+  listItemImageClx='',
+  searchPlaceholder='Search...',
+  noneFoundMessage='None found.',
+  listItemImageSize=DEFAULT_IMAGE_SIZE,
+  noSearch=false,
+  popoverAlign = 'center', 
+  popoverSideOffset = 4,
+  Trigger, 
+  triggerProps
+}: {
+  elements: T[]
+  initial?: T | null
+  current?: T | null
+  setCurrent: (c: T | null) => void 
+  closeOnSelect?: boolean
+  adaptor: ListAdaptor<T>
+  popoverClx?: string
+  listItemClx?: string
+  listItemSelectedClx?: string
+  listItemDisabledClx?: string
+  listItemImageClx?: string
+  listItemImageSize?: number
+  noCheckmark?: boolean
+  searchPlaceholder?: string
+  noneFoundMessage?: string
+  noSearch?: boolean
+  popoverAlign?: "center" | "end" | "start"
+  popoverSideOffset?: number
+    /** If (custom) Trigger is not supplied, 
+     * passed to default trigger */
+  triggerProps: P
+  Trigger?: 
+    <T, P>(props: P & { ref?: React.ForwardedRef<HTMLButtonElement> }) => React.ReactNode
+}) => {
+
+  const [_open, _setOpen] = useState<boolean>(false)
+    // for non-controlled base (must declare the hook either way)
+  const [_current, _setCurrent] = useState<T | null>(initial ?? null)
+
+  const handleSelect = (selString: string) => {
+
+    const found = elements.find((el: T) => (adaptor.valueEquals(el, selString)))
+    if (found) {
+        // non-controlled ('initial' supplied (may have been null))
+      if (initial !== undefined) {
+        _setCurrent(found)
+      }
+      setCurrent(found)
+    }
+    if (closeOnSelect) {
+      _setOpen(false)
+    }
+  }
+
+  const isCurrent = (el: T): boolean => {
+
+      // non-controlled?
+    const curr = (current === undefined) ? _current : current
+    return !!curr && adaptor.equals(el, curr)
+  }  
+
+  const _triggerProps = current ? {
+    ...triggerProps,
+    current,
+    currentLabel: adaptor.getLabel ? adaptor.getLabel(current) : adaptor.getValue(current),
+    imageUrl: adaptor.getImageUrl ? adaptor.getImageUrl(current) : null,
+    open: _open
+  } : {
+    ...triggerProps,
+    current: null,
+    currentLabel: null,
+    imageUrl: null,
+    open: _open 
+  }
+
+  return (
+    <Popover open={_open} onOpenChange={_setOpen}>
+      <PopoverTrigger asChild>
+        {Trigger ? (
+          <Trigger<T, P> {..._triggerProps} />
+        ) : (
+          <DefaultTrigger<T, P> {..._triggerProps} />
+        )}
+      </PopoverTrigger>
+      <PopoverContent className={cn('p-0', popoverClx)} align={popoverAlign} sideOffset={popoverSideOffset}>
+        <Command>
+          {!noSearch && (<CommandInput placeholder={searchPlaceholder} />)}
+          <CommandList>
+            <CommandEmpty>{noneFoundMessage}</CommandEmpty>
+            <CommandGroup>
+            {elements.map((el) => (
+              <CommandItem
+                key={adaptor.getValue(el)}
+                value={adaptor.getValue(el)}
+                onSelect={handleSelect}
+                disabled={adaptor.isDisabled ? adaptor.isDisabled(el) : false}
+                className={cn(
+                  'flex', 
+                  noCheckmark ? 'justify-start' : 'justify-between', 
+                  listItemClx, 
+                  (isCurrent(el) ? listItemSelectedClx : ''),
+                  ((adaptor.isDisabled && adaptor.isDisabled(el)) ? listItemDisabledClx : '')
+                )}
+              >
+                <div className='flex justify-start items-center gap-2'>
+                { (adaptor.getImageUrl && adaptor.getImageUrl(el)) ? (
+                  <img
+                    src={adaptor.getImageUrl(el)!}
+                    alt={adaptor.getValue(el) + ' image'}
+                    height={listItemImageSize}
+                    width={listItemImageSize}
+                    loading="eager"
+                    className={listItemImageClx}
+                  />
+                ) : (
+                  <div style={{width: listItemImageSize, height: listItemImageSize}} />
+                )}
+                  <span>{ adaptor.getLabel ? adaptor.getLabel(el) : adaptor.getValue(el) }</span>
+                </div>
+                {!noCheckmark && (
+                <div>
+                  <Check className={cn('ml-auto', (isCurrent(el)) ? '' : 'invisible' )} />
+                </div>
+                )}
+              </CommandItem>
+            ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export {
+  Combobox as default,
+  type ComboboxTriggerProps
+} 

package/primitives/command.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { Dialog, DialogContent } from './dialog';
+
+const Command = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) => (
+  <CommandPrimitive
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md [&_[cmdk-list]]:scroll-pt-0 [&_[cmdk-list]]:scroll-auto',
+      className,
+    )}
+    loop={true}
+    {...props}
+  />
+);
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      className={cn(
+        'placeholder:!text-text-placeholder flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+);
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) => (
+  <CommandPrimitive.List
+    className={cn(
+      'max-h-[300px] scroll-pt-0 overflow-x-hidden overflow-y-auto scroll-auto',
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) => (
+  <CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
+);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) => (
+  <CommandPrimitive.Group
+    className={cn(
+      'text-text-default [&_[cmdk-group-heading]]:text-text-default overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) => (
+  <CommandPrimitive.Separator
+    className={cn('bg-divider -mx-1 h-px', className)}
+    {...props}
+  />
+);
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) => (
+  <CommandPrimitive.Item
+    className={cn(
+      "hover:bg-bg-secondary data-[selected=true]:text-text-default data-[selected='true']:bg-bg-secondary relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-text-secondary ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};