bunsane 0.3.2 → 0.4.0

package/studio/src/components/ui/input.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../lib/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

package/studio/src/hooks/useDataTable.ts

@@ -1,131 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useInView } from 'react-intersection-observer'
-import { type SortingState } from '@tanstack/react-table'
-import { toast } from 'sonner'
-import { pluralize } from '../lib/utils'
-
-interface UseDataTableOptions<T> {
-  /** Unique identifier for the data (e.g., table name, archetype name) */
-  key: string
-  /** Function to fetch data */
-  fetchData: (params: { offset: number; limit: number; search?: string }) => Promise<{
-    data: T[]
-    hasMore: boolean
-    total?: number
-  }>
-  /** Function to delete records by IDs */
-  deleteRecords: (ids: string[]) => Promise<void>
-  /** Optional: Custom error message for fetch failure */
-  fetchErrorMessage?: string
-  /** Optional: Custom error message for delete failure */
-  deleteErrorMessage?: string
-  /** Optional: Custom success message for delete (use {count} and {item} as placeholders) */
-  deleteSuccessMessage?: string
-  /** Optional: Singular form of the item type (e.g., "record", "entity") */
-  itemSingular?: string
-  /** Optional: Plural form of the item type (e.g., "records", "entities") */
-  itemPlural?: string
-}
-
-export function useDataTable<T>({
-  key,
-  fetchData,
-  deleteRecords,
-  fetchErrorMessage = 'Failed to load data',
-  deleteErrorMessage = 'Failed to delete records',
-  deleteSuccessMessage = 'Deleted {count} {item}',
-  itemSingular = 'record',
-  itemPlural = 'records',
-}: UseDataTableOptions<T>) {
-  const [data, setData] = useState<T[]>([])
-  const [loading, setLoading] = useState(false)
-  const [hasMore, setHasMore] = useState(true)
-  const [total, setTotal] = useState<number | null>(null)
-  const [search, setSearch] = useState('')
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [selectedRecords, setSelectedRecords] = useState<Set<string>>(new Set())
-  const { ref, inView } = useInView()
-
-  const loadMore = async (reset = false) => {
-    if (loading || (!hasMore && !reset)) return
-
-    try {
-      setLoading(true)
-      const offset = reset ? 0 : data.length
-      const result = await fetchData({
-        offset,
-        limit: 50,
-        search: search || undefined,
-      })
-
-      if (reset) {
-        setData(result.data)
-      } else {
-        setData(prev => [...prev, ...result.data])
-      }
-
-      if (result.total !== undefined) {
-        setTotal(result.total)
-      }
-      setHasMore(result.hasMore)
-    } catch (error) {
-      toast.error(fetchErrorMessage)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  // Reset and load data when key or search changes
-  useEffect(() => {
-    if (key) {
-      setData([])
-      setHasMore(true)
-      setSelectedRecords(new Set())
-      loadMore(true)
-    }
-  }, [key, search])
-
-  // Infinite scroll: load more when scroll observer is in view
-  useEffect(() => {
-    if (inView && hasMore && !loading) {
-      loadMore()
-    }
-  }, [inView, hasMore, loading])
-
-  const handleDelete = async () => {
-    if (selectedRecords.size === 0) return
-
-    try {
-      await deleteRecords(Array.from(selectedRecords))
-      const itemText = pluralize(selectedRecords.size, itemSingular, itemPlural)
-      toast.success(deleteSuccessMessage.replace('{count}', selectedRecords.size.toString()).replace('{item}', itemText))
-      setSelectedRecords(new Set())
-      loadMore(true)
-    } catch (error) {
-      toast.error(deleteErrorMessage)
-    }
-  }
-
-  return {
-    // State
-    data,
-    loading,
-    hasMore,
-    total,
-    search,
-    sorting,
-    selectedRecords,
-    
-    // Setters
-    setSearch,
-    setSorting,
-    setSelectedRecords,
-    setData,
-    
-    // Handlers
-    handleDelete,
-    
-    // Refs
-    loadMoreRef: ref,
-  }
-}

package/studio/src/index.css

@@ -1,36 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 24 95% 53%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 24 95% 53%;
-    --radius: 0.5rem;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/studio/src/lib/api.ts

@@ -1,186 +0,0 @@
-const API_BASE = '/studio/api'
-
-export interface TableData {
-  data: Record<string, unknown>[]
-  hasMore: boolean
-  total?: number
-}
-
-export interface ArcheTypeData {
-  data: Record<string, unknown>[]
-  hasMore: boolean
-  total?: number
-}
-
-export interface TablesResponse {
-  tables: string[]
-}
-
-export async function fetchTables(): Promise<string[]> {
-  const response = await fetch(`${API_BASE}/tables`)
-  if (!response.ok) {
-    throw new Error('Failed to fetch tables')
-  }
-  const data: TablesResponse = await response.json()
-  return data.tables
-}
-
-export async function fetchTableData(
-  tableName: string,
-  params: { limit?: number; offset?: number; search?: string } = {}
-): Promise<TableData> {
-  const searchParams = new URLSearchParams()
-  if (params.limit) searchParams.set('limit', params.limit.toString())
-  if (params.offset) searchParams.set('offset', params.offset.toString())
-  if (params.search) searchParams.set('search', params.search)
-
-  const response = await fetch(`${API_BASE}/table/${tableName}?${searchParams}`)
-  if (!response.ok) {
-    throw new Error('Failed to fetch table data')
-  }
-  const result = await response.json()
-  return {
-    data: result.rows || [],
-    hasMore: result.rows && result.rows.length === (params.limit || 50),
-    total: result.total,
-  }
-}
-
-export async function fetchArcheTypeData(
-  archeTypeName: string,
-  params: { limit?: number; offset?: number; search?: string; include_deleted?: boolean } = {}
-): Promise<ArcheTypeData> {
-  const searchParams = new URLSearchParams()
-  if (params.limit) searchParams.set('limit', params.limit.toString())
-  if (params.offset) searchParams.set('offset', params.offset.toString())
-  if (params.search) searchParams.set('search', params.search)
-  if (params.include_deleted) searchParams.set('include_deleted', 'true')
-
-  const response = await fetch(`${API_BASE}/arche-type/${archeTypeName}?${searchParams}`)
-  if (!response.ok) {
-    throw new Error('Failed to fetch archetype data')
-  }
-  const result = await response.json()
-  // Transform entities to flat records with id and component fields
-  const data = result.entities?.map((entity: any) => ({
-    id: entity.entityId,
-    ...entity.components,
-    ...(entity.deleted_at !== undefined ? { _deleted_at: entity.deleted_at } : {}),
-  })) || []
-  return {
-    data,
-    hasMore: result.entities && result.entities.length === (params.limit || 50),
-    total: result.total,
-  }
-}
-
-export interface EntityComponent {
-  id: string
-  name: string
-  type_id: string
-  data: unknown
-  created_at: string
-  updated_at: string
-  deleted_at: string | null
-}
-
-export interface EntityInspectorData {
-  entity: {
-    id: string
-    created_at: string
-    updated_at: string
-    deleted_at: string | null
-  }
-  components: EntityComponent[]
-}
-
-export interface StudioStats {
-  entities: {
-    active: number
-    deleted: number
-    total: number
-  }
-  componentTypes: { name: string; count: number }[]
-  archetypes: { name: string; entityCount: number; componentCount: number }[]
-}
-
-export async function fetchStats(): Promise<StudioStats> {
-  const response = await fetch(`${API_BASE}/stats`)
-  if (!response.ok) {
-    throw new Error('Failed to fetch stats')
-  }
-  return response.json()
-}
-
-export interface ComponentTypeInfo {
-  name: string
-  entityCount: number
-  partitionTable: string
-  fields: string[]
-}
-
-export async function fetchComponents(): Promise<ComponentTypeInfo[]> {
-  const response = await fetch(`${API_BASE}/components`)
-  if (!response.ok) {
-    throw new Error('Failed to fetch components')
-  }
-  const data = await response.json()
-  return data.components
-}
-
-export async function fetchEntity(entityId: string): Promise<EntityInspectorData> {
-  const response = await fetch(`${API_BASE}/entity/${entityId}`)
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Failed to fetch entity' }))
-    throw new Error(error.error || 'Failed to fetch entity')
-  }
-  return response.json()
-}
-
-export interface QueryResult {
-  columns: string[]
-  rows: Record<string, unknown>[]
-  rowCount: number
-  duration: number
-}
-
-export async function executeQuery(sql: string): Promise<QueryResult> {
-  const response = await fetch(`${API_BASE}/query`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ sql }),
-  })
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Query failed' }))
-    throw new Error(error.error || 'Query failed')
-  }
-  return response.json()
-}
-
-export async function deleteTableRecords(tableName: string, ids: string[]): Promise<void> {
-  const response = await fetch(`${API_BASE}/table/${tableName}`, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ ids }),
-  })
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Failed to delete table records' }))
-    throw new Error(error.error || 'Failed to delete table records')
-  }
-}
-
-export async function deleteArcheTypeRecords(archeTypeName: string, entityIds: string[]): Promise<void> {
-  const response = await fetch(`${API_BASE}/arche-type/${archeTypeName}`, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ entityIds }),
-  })
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Failed to delete archetype records' }))
-    throw new Error(error.error || 'Failed to delete archetype records')
-  }
-}

package/studio/src/lib/utils.ts

@@ -1,13 +0,0 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function pluralize(count: number, singular: string, plural?: string): string {
-  if (count === 1) {
-    return singular
-  }
-  return plural || `${singular}s`
-}

package/studio/src/main.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { routes } from './routes.tsx'
-import './index.css'
-import { Toaster } from 'sonner'
-
-const router = createBrowserRouter(routes, {
-  basename: '/studio',
-})
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-    <Toaster position="top-right" />
-  </React.StrictMode>,
-)

package/studio/src/pages/ArcheType.tsx

@@ -1,239 +0,0 @@
-import { useParams } from "react-router-dom";
-import { type ColumnDef } from "@tanstack/react-table";
-import { useStudioStore } from "../store/studio";
-import { useArcheTypeSettings } from "../store/archeTypeSettings";
-import { fetchArcheTypeData, deleteArcheTypeRecords } from "../lib/api";
-import { PageContainer } from "../components/PageContainer";
-import { SearchBar } from "../components/SearchBar";
-import { DataTable } from "../components/DataTable";
-import { Checkbox } from "../components/ui/checkbox";
-import { useDataTable } from "../hooks/useDataTable";
-import {
-    createSelectColumn,
-    createIdColumn,
-    createTextColumn,
-} from "../utils/columnHelpers";
-import { useMemo } from "react";
-import { cn } from "../lib/utils";
-
-interface ArcheTypeRecord {
-    id: string;
-    _deleted_at?: string | null;
-    [key: string]: any;
-}
-
-function findIndicatorName(
-    archeTypeName: string,
-    fields: { componentName: string }[]
-): string | null {
-    if (fields.length === 0) return null;
-    const names = fields.map((f) => f.componentName);
-    const lower = archeTypeName.toLowerCase();
-
-    return (
-        names.find((n) => n.toLowerCase() === `${lower}tag`) ??
-        names.find((n) => n.toLowerCase() === `${lower}id`) ??
-        names.find((n) => n.toLowerCase().startsWith(lower)) ??
-        names.find((n) => n.toLowerCase().includes(lower)) ??
-        names[0] ??
-        null
-    );
-}
-
-export function ArcheType() {
-    const { name } = useParams<{ name: string }>();
-    const { metadata } = useStudioStore();
-    const {
-        useRealDbFieldName,
-        autoExpandRow,
-        showDeleted,
-        setUseRealDbFieldName,
-        setAutoExpandRow,
-        setShowDeleted,
-    } = useArcheTypeSettings();
-
-    const fetchKey = `${name || ""}:${showDeleted}`;
-
-    const {
-        data,
-        loading,
-        hasMore,
-        total,
-        search,
-        sorting,
-        selectedRecords,
-        setSearch,
-        setSorting,
-        setSelectedRecords,
-        handleDelete,
-        loadMoreRef,
-    } = useDataTable<ArcheTypeRecord>({
-        key: fetchKey,
-        fetchData: (params) =>
-            fetchArcheTypeData(name!, {
-                ...params,
-                include_deleted: showDeleted,
-            }) as Promise<{
-                data: ArcheTypeRecord[];
-                hasMore: boolean;
-                total?: number;
-            }>,
-        deleteRecords: (ids) => deleteArcheTypeRecords(name!, ids),
-        fetchErrorMessage: "Failed to load archetype entities",
-        deleteErrorMessage: "Failed to delete archetype entities",
-        deleteSuccessMessage: "Deleted {count} {item}",
-        itemSingular: "entity",
-        itemPlural: "entities",
-    });
-
-    const archeTypeFields = metadata?.archeTypes[name || ""] || [];
-    const indicatorName = useMemo(
-        () => (name ? findIndicatorName(name, archeTypeFields) : null),
-        [name, archeTypeFields]
-    );
-
-    // Preprocess data: transform Tag component values to "true" when useRealDbFieldName is enabled
-    const preprocessedData = useMemo(() => {
-        if (useRealDbFieldName) return data;
-
-        return data.map((record) => {
-            const newRecord = { ...record };
-            archeTypeFields.forEach((field) => {
-                if (field.componentName.endsWith("Tag")) {
-                    newRecord[field.componentName] = "true";
-                }
-            });
-            return newRecord;
-        });
-    }, [data, useRealDbFieldName, archeTypeFields]);
-
-    const columns: ColumnDef<ArcheTypeRecord>[] = useMemo(
-        () => [
-            createSelectColumn<ArcheTypeRecord>(),
-            createIdColumn<ArcheTypeRecord>({ linkToEntity: true }),
-            ...archeTypeFields.map((field) => {
-                const isTagComponent = field.componentName.endsWith("Tag");
-                const shouldExtractValue = !(
-                    useRealDbFieldName && isTagComponent
-                );
-
-                return createTextColumn<ArcheTypeRecord>(
-                    field.componentName,
-                    useRealDbFieldName
-                        ? field.componentName
-                        : field.fieldLabel || field.fieldName,
-                    { extractValue: shouldExtractValue, autoExpandRow }
-                );
-            }),
-        ],
-        [archeTypeFields, useRealDbFieldName, autoExpandRow]
-    );
-
-    const getRowClassName = (record: ArcheTypeRecord) =>
-        record._deleted_at ? "opacity-50 bg-destructive/5" : "";
-
-    if (!name) {
-        return <div className="p-8">Archetype name not found</div>;
-    }
-
-    return (
-        <PageContainer>
-            {/* Header with total count */}
-            <div className="mb-6">
-                <div className="flex items-baseline gap-3 mb-1">
-                    <h1 className="text-3xl font-bold text-primary">{name}</h1>
-                    {total !== null && (
-                        <span className="text-lg text-muted-foreground font-mono tabular-nums">
-                            {total.toLocaleString()} {total === 1 ? "entity" : "entities"}
-                        </span>
-                    )}
-                </div>
-                <p className="text-muted-foreground mb-4">
-                    Browse and manage entities for the {name} archetype
-                </p>
-
-                {/* Component composition */}
-                {archeTypeFields.length > 0 && (
-                    <div className="flex flex-wrap gap-1.5">
-                        {archeTypeFields.map((field) => {
-                            const isIndicator =
-                                field.componentName === indicatorName;
-                            const isOptional = !!field.nullable;
-
-                            return (
-                                <span
-                                    key={field.componentName}
-                                    className={cn(
-                                        "inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium border",
-                                        isIndicator
-                                            ? "bg-primary/15 text-primary border-primary/30"
-                                            : isOptional
-                                              ? "bg-muted/50 text-muted-foreground border-border border-dashed"
-                                              : "bg-muted text-foreground border-border"
-                                    )}
-                                    title={
-                                        isIndicator
-                                            ? "Indicator component"
-                                            : isOptional
-                                              ? "Optional component"
-                                              : "Required component"
-                                    }
-                                >
-                                    {field.componentName}
-                                    {isOptional && (
-                                        <span className="text-muted-foreground">?</span>
-                                    )}
-                                </span>
-                            );
-                        })}
-                    </div>
-                )}
-            </div>
-
-            <SearchBar
-                search={search}
-                onSearchChange={setSearch}
-                placeholder="Search entities..."
-                selectedCount={selectedRecords.size}
-                onDelete={handleDelete}
-                itemSingular="entity"
-                itemPlural="entities"
-            />
-            <div className="flex items-center gap-6 mb-4">
-                <Checkbox
-                    id="show-db-field-name"
-                    label="Show real DB field name"
-                    checked={useRealDbFieldName}
-                    onChange={(e) => setUseRealDbFieldName(e.target.checked)}
-                />
-                <Checkbox
-                    id="auto-expand-row"
-                    label="Auto expand row"
-                    checked={autoExpandRow}
-                    onChange={(e) => setAutoExpandRow(e.target.checked)}
-                />
-                <Checkbox
-                    id="show-deleted"
-                    label="Show deleted"
-                    checked={showDeleted}
-                    onChange={(e) => setShowDeleted(e.target.checked)}
-                />
-            </div>
-            <DataTable
-                data={preprocessedData}
-                columns={columns}
-                loading={loading}
-                hasMore={hasMore}
-                sorting={sorting}
-                onSortingChange={setSorting}
-                selectedRecords={selectedRecords}
-                onSelectionChange={setSelectedRecords}
-                getRecordId={(record) => record.id}
-                loadMoreRef={loadMoreRef}
-                emptyMessage="No entities found"
-                loadingMessage="Loading more entities..."
-                getRowClassName={getRowClassName}
-            />
-        </PageContainer>
-    );
-}