@hanzo/ui 4.6.0 → 4.7.0

package/primitives/chat/sqlite-preview.tsx

@@ -1,215 +0,0 @@
-import { debug } from '@tauri-apps/plugin-log';
-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 debug(`loading table data for ${tableName}`);
-  const dataResult = db.exec(`SELECT * FROM ${tableName}`);
-  void debug(`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 debug(`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 debug(`found ${tableNames.length} tables`);
-  void debug(`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 debug(
-      `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 debug('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

@@ -1,31 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from '@radix-ui/react-icons';
-import * as 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 };

package/primitives/collapsible.tsx

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

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

@@ -1,149 +0,0 @@
-import { DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
-import * as 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,
-};