@questpie/admin 0.0.1 → 1.0.0

package/VALIDATION.md

@@ -1,602 +0,0 @@
-# @questpie/admin - Requirements Validation
-
-This document validates the implementation against all stated requirements.
-
-## ✅ Core Requirements
-
-### 1. Config-Driven Architecture
-**Status: ✅ IMPLEMENTED**
-
-- [x] Everything auto-generated from `defineAdminConfig()`
-- [x] Single source of truth for all UI
-- [x] No manual route files needed
-- [x] Sidebar auto-generated from config.collections
-- [x] Forms auto-generated from CMS schema + config overrides
-- [x] List views auto-generated from config
-
-**Evidence:**
-- `packages/admin/src/config/index.ts` - Complete type system
-- `packages/admin/src/components/views/admin-router.tsx` - Auto routing
-- `packages/admin/src/components/views/admin-sidebar.tsx` - Auto sidebar
-- `packages/admin/src/components/views/auto-form-fields.tsx` - Auto fields
-
-### 2. Seamless DX - One Component Mount
-**Status: ✅ IMPLEMENTED**
-
-Minimal usage:
-```tsx
-<AdminApp client={cmsClient} router={{...}} />
-```
-
-With optional config:
-```tsx
-<AdminApp client={cmsClient} config={adminConfig} router={{...}} />
-```
-
-**Evidence:**
-- `packages/admin/src/components/admin-app.tsx` - Main entry point
-- `packages/admin/README.md` lines 14-31 - Quick start examples
-
-### 3. Automatic Routing
-**Status: ✅ IMPLEMENTED**
-
-- [x] Single catch-all route at `/admin/$`
-- [x] Auto-generates all collection routes
-- [x] Patterns: `/admin`, `/admin/:collection`, `/admin/:collection/new`, `/admin/:collection/:id`
-- [x] No manual route files per collection
-
-**Evidence:**
-- `examples/tanstack-barbershop/src/routes/admin/$.tsx` - Catch-all route
-- `packages/admin/src/components/views/admin-router.tsx` - Routing logic
-
-### 4. Conditional Field Logic
-**Status: ✅ IMPLEMENTED**
-
-Fields support conditional:
-- [x] `visible: (values) => boolean` - Show/hide
-- [x] `readOnly: (values) => boolean` - Make readonly
-- [x] `disabled: (values) => boolean` - Disable
-- [x] `required: (values) => boolean` - Dynamic required
-- [x] `options: (values) => array` - Dynamic options
-
-**Evidence:**
-- `packages/admin/src/components/views/auto-form-fields.tsx` lines 237-263 - Conditional evaluation
-- `examples/tanstack-barbershop/src/configs/admin.ts` lines 196-209 - Conditional fields example
-
-**Example:**
-```typescript
-cancelledAt: {
-  visible: (values) => values.status === "cancelled",
-  readOnly: true
-}
-```
-
-### 5. Relation Fields
-**Status: ✅ IMPLEMENTED**
-
-- [x] Single relations (one-to-one) - `RelationSelect`
-- [x] Multiple relations (one-to-many, many-to-many) - `RelationPicker`
-- [x] Plus button to create new related item
-- [x] Edit button to modify selected/assigned item
-- [x] Opens side sheet for create/edit
-- [x] Auto-infers target collection from field name
-- [x] Conditional filtering based on form values
-- [x] Drag-and-drop reordering (for multiple relations)
-
-**Evidence:**
-- `packages/admin/src/components/fields/relation-select.tsx` - Single relation component
-- `packages/admin/src/components/fields/relation-picker.tsx` - Multiple relation component
-- `packages/admin/src/components/views/auto-form-fields.tsx` lines 284-368 - Auto-detection logic
-- `packages/admin/README.md` lines 214-252 - Documentation
-
-**Example:**
-```typescript
-barberId: {
-  label: "Barber",
-  relation: {
-    targetCollection: "barbers",
-    mode: "inline"
-  }
-}
-```
-
-### 6. Version History & Audit Logging
-**Status: ✅ IMPLEMENTED**
-
-- [x] Version tracking for collections
-- [x] Audit log configuration
-- [x] Show version history in edit form
-- [x] Track who made changes
-- [x] Show what changed (field diffs)
-- [x] Restore previous versions
-- [x] Configurable retention period
-
-**Evidence:**
-- `packages/admin/src/components/views/version-history.tsx` - Version history component
-- `packages/admin/src/config/index.ts` lines 310-332 - Config types
-- `examples/tanstack-barbershop/src/configs/admin.ts` lines 111-117 - Example usage
-- `packages/admin/README.md` lines 268-299 - Documentation
-
-**Example:**
-```typescript
-appointments: {
-  versioned: true,
-  auditLog: {
-    fields: ["status", "scheduledAt"],
-    trackUser: true,
-    retentionDays: 365
-  },
-  edit: {
-    showVersionHistory: true
-  }
-}
-```
-
-### 7. Sections & Organization
-**Status: ✅ IMPLEMENTED**
-
-- [x] Group fields into sections
-- [x] Section titles and descriptions
-- [x] Collapsible sections support
-- [x] Default open/closed state
-
-**Evidence:**
-- `packages/admin/src/components/views/auto-form-fields.tsx` lines 420-454 - Section rendering
-- `examples/tanstack-barbershop/src/configs/admin.ts` lines 134-148 - Sections example
-- `packages/admin/README.md` lines 175-193 - Documentation
-
-### 8. Schema Introspection
-**Status: ✅ IMPLEMENTED**
-
-- [x] Auto-detect field types from field names (heuristics)
-- [x] Infer text, textarea, number, boolean, date, datetime, relation types
-- [x] Auto-generate default field lists
-
-**Evidence:**
-- `packages/admin/src/components/views/auto-form-fields.tsx` lines 134-195 - Type inference
-- `packages/admin/src/components/views/auto-form-fields.tsx` lines 201-219 - Default fields
-
-**Note:** Full Drizzle schema introspection at runtime is marked as TODO (line 132).
-
-### 9. Component Registry
-**Status: ✅ IMPLEMENTED**
-
-- [x] Type definitions for custom components
-- [x] Field component registry
-- [x] Layout component registry
-- [x] Custom component support
-
-**Evidence:**
-- `packages/admin/src/config/component-registry.ts` - Full registry types
-- `packages/admin/README.md` lines 314-333 - Usage documentation
-
-### 10. TanStack Start Integration
-**Status: ✅ IMPLEMENTED**
-
-- [x] TanStack Router integration
-- [x] TanStack Query integration
-- [x] Router-agnostic design (accepts LinkComponent prop)
-- [x] Full example application
-
-**Evidence:**
-- `examples/tanstack-barbershop/` - Complete working example
-- `examples/tanstack-barbershop/src/routes/admin.tsx` - Layout integration
-- `examples/tanstack-barbershop/src/routes/admin/$.tsx` - Router integration
-
-### 11. Docker Setup
-**Status: ✅ IMPLEMENTED**
-
-- [x] Dockerfile with multi-stage build
-- [x] docker-compose.yml with Postgres only
-- [x] No Redis, no external queue services
-- [x] Batteries-included philosophy
-
-**Evidence:**
-- `examples/tanstack-barbershop/Dockerfile` - Container setup
-- `examples/tanstack-barbershop/docker-compose.yml` - Postgres only
-- `examples/tanstack-barbershop/.env.example` - Environment template
-
-### 12. Correct Dependency Versions
-**Status: ✅ IMPLEMENTED**
-
-- [x] zod: ^4.2.1 (NOT v3!)
-- [x] drizzle-orm: ^1.0.0-beta.6-4414a19 (specific beta)
-- [x] Documentation of critical versions
-- [x] Validation commands in docs
-
-**Evidence:**
-- `DEPENDENCIES.md` - Complete version documentation
-- `CLAUDE.md` - Prominent warning about checking versions
-- `examples/tanstack-barbershop/package.json` - Correct versions used
-
-## ⚠️ Partially Implemented
-
-### 13. Embedded Collections
-**Status: ✅ IMPLEMENTED**
-
-- [x] EmbeddedCollectionField component
-- [x] Inline editing mode
-- [x] Modal/Drawer modes
-- [x] Row labels + ordering
-- [x] AutoFormFields integration
-
-**Evidence:**
-- `packages/admin/src/components/fields/embedded-collection.tsx` - EmbeddedCollectionField component
-- `packages/admin/src/components/views/auto-form-fields.tsx` - Embedded integration + rendering
-- `packages/admin/src/config/index.ts` - Config types + rowLabel
-- `packages/admin/README.md` - Embedded docs updated
-
-### 14. Array Fields
-**Status: ✅ IMPLEMENTED**
-
-- [x] ArrayField component for primitive arrays
-- [x] Ordering, min/max item controls
-- [x] Select/textarea/number item types
-
-**Evidence:**
-- `packages/admin/src/components/fields/array-field.tsx` - ArrayField component
-- `packages/admin/src/components/views/auto-form-fields.tsx` - Array field integration
-- `packages/admin/src/config/index.ts` - Array field config types
-
-### 15. Advanced Form Layouts
-**Status: ✅ IMPLEMENTED**
-
-Comprehensive layout system with multiple modes:
-- [x] Config types for multi-column layouts
-- [x] Config types for grid layouts with spans
-- [x] Config types for inline layouts
-- [x] Config types for conditional sections
-- [x] Config types for tabs with sections
-- [x] Config types for sidebar layouts
-- [x] Support for custom CSS classes
-- [x] Responsive breakpoints
-- [x] Rendering implementation in AutoFormFields
-
-**Evidence:**
-- `packages/admin/src/config/index.ts` lines 93-294 - Complete layout types
-- `specifications/ADVANCED_LAYOUTS_AND_DASHBOARD.md` - Full specification
-
-**Features:**
-```typescript
-sections: [
-  {
-    layout: "columns",
-    columns: 2,
-    fields: ["firstName", "lastName"]
-  },
-  {
-    layout: "grid",
-    grid: { columns: 4, gap: 4 },
-    fields: [
-      { field: "title", span: 4 },
-      { field: "price", span: 1 }
-    ]
-  },
-  {
-    visible: (values) => values.status === "cancelled",
-    fields: ["cancellationReason"]
-  }
-]
-```
-
-**Next Steps:**
-1. Add UI tests for complex layout scenarios (optional)
-
-## ❌ Not Implemented Yet
-
-### 15. Tree Views
-**Status: ❌ NOT IMPLEMENTED**
-
-Hierarchical data display for nested structures.
-
-**Evidence:**
-- `packages/admin/README.md` lines 301-312 - Marked "Coming Soon"
-
-**Requirements:**
-- [ ] Tree view mode for list
-- [ ] Parent-child relationships
-- [ ] Collapsible nodes
-- [ ] Drag-and-drop reordering
-
-### 16. Bulk Actions
-**Status: ❌ NOT IMPLEMENTED**
-
-Batch operations on multiple items.
-
-**Requirements:**
-- [ ] Select multiple items
-- [ ] Bulk delete
-- [ ] Bulk update
-- [ ] Custom bulk actions
-
-### 17. Saved Views/Filters
-**Status: ❌ NOT IMPLEMENTED**
-
-Persist user preferences for list views.
-
-**Requirements:**
-- [ ] Save filter combinations
-- [ ] Save column configurations
-- [ ] Share views with team
-- [ ] Default views
-
-### 18. Dashboard System
-**Status: ✅ CONFIG TYPES IMPLEMENTED, WIDGETS TODO**
-
-Comprehensive dashboard system with widget support:
-- [x] Config types for dashboard
-- [x] Widget system types (stats, chart, recent-items, quick-actions, custom)
-- [x] Grid layout configuration
-- [x] Custom dashboard component support (already works)
-- [ ] Built-in widget components
-- [ ] Widget renderer
-- [ ] Default dashboard implementation
-
-**Evidence:**
-- `packages/admin/src/config/index.ts` lines 32-197 - Dashboard config types
-- `specifications/ADVANCED_LAYOUTS_AND_DASHBOARD.md` - Full specification
-
-**Features:**
-```typescript
-app: {
-  dashboard: {
-    title: "Dashboard",
-    widgets: [
-      {
-        id: "total-posts",
-        type: "stats",
-        title: "Total Posts",
-        position: { x: 0, y: 0, w: 3, h: 2 },
-        config: { collection: "posts", stat: "count" }
-      },
-      {
-        id: "recent-posts",
-        type: "recent-items",
-        title: "Recent Posts",
-        position: { x: 0, y: 2, w: 6, h: 4 },
-        config: { collection: "posts", limit: 5 }
-      }
-    ]
-  }
-}
-```
-
-**Widget Types:**
-- Stats - Single statistic with trend
-- Chart - Line, bar, pie, area charts
-- Recent Items - Latest collection items
-- Quick Actions - Action buttons
-- Custom - User-defined components
-
-**Custom Dashboard (Already Works):**
-```typescript
-app: {
-  dashboard: {
-    component: CustomDashboard // Full control
-  }
-}
-```
-
-**Next Steps:**
-1. Create Dashboard component
-2. Implement StatsWidget
-3. Implement ChartWidget (using recharts)
-4. Implement RecentItemsWidget
-5. Implement QuickActionsWidget
-6. Add widget grid layout renderer
-
-### 19. Custom Pages
-**Status: ✅ CONFIG TYPES IMPLEMENTED, ROUTING TODO**
-
-System for adding custom pages to admin:
-- [x] Config types for custom pages
-- [x] Page registration in config
-- [x] Navigation integration types
-- [x] Permission support types
-- [ ] Custom page routing implementation
-- [ ] Sidebar navigation for custom pages
-- [ ] Permission checking
-
-**Evidence:**
-- `packages/admin/src/config/index.ts` lines 117-165 - CustomPageConfig types
-- `specifications/ADVANCED_LAYOUTS_AND_DASHBOARD.md` - Full specification
-
-**Features:**
-```typescript
-app: {
-  pages: [
-    {
-      id: "settings",
-      label: "Settings",
-      icon: "settings",
-      path: "/admin/settings",
-      component: SettingsPage,
-      showInNav: true,
-      group: "system",
-      order: 100,
-      permissions: ["admin.settings.view"]
-    }
-  ]
-}
-```
-
-**Use Cases:**
-- Settings pages
-- Analytics/reporting pages
-- User management
-- Custom tools
-- Import/export utilities
-- System administration
-
-**Next Steps:**
-1. Update AdminRouter to handle custom pages
-2. Add custom pages to sidebar navigation
-3. Implement routing for custom page paths
-4. Add permission checking
-5. Support navigation groups and ordering
-
-### 20. Permissions UI
-**Status: ❌ NOT IMPLEMENTED**
-
-Visual permission management.
-
-**Requirements:**
-- [ ] Role-based access control UI
-- [ ] Permission matrix
-- [ ] User assignment
-- [ ] Collection-level permissions
-
-### 20. Full Drizzle Schema Introspection
-**Status: ❌ NOT IMPLEMENTED**
-
-Currently using heuristics; need runtime schema parsing.
-
-**Requirements:**
-- [ ] Extract actual schema from Drizzle at runtime
-- [ ] Parse column types, constraints, defaults
-- [ ] Parse relations from Drizzle schema
-- [ ] Eliminate hardcoded field lists
-
-### 21. Rich Text Editor (Tiptap)
-**Status: ✅ IMPLEMENTED**
-
-**PRIORITY: HIGH** (marked as important by user)
-
-Rich text editing capabilities using Tiptap.
-
-**Requirements:**
-- [x] Tiptap integration
-- [x] Basic formatting (bold, italic, underline, headings)
-- [x] Lists (ordered, unordered)
-- [x] Links and images
-- [x] Code blocks
-- [x] Tables
-- [x] Custom extensions support
-- [x] Markdown shortcuts
-- [ ] Collaborative editing (optional)
-- [x] Field type: `richText`
-
-**Implementation:**
-- Create `RichTextEditor` component using Tiptap
-- Register in component registry
-- Support JSON/HTML output formats (Markdown when extension provided)
-- Add to field type inference
-
-**Dependencies:**
-- `@tiptap/react`
-- `@tiptap/starter-kit`
-- `@tiptap/extension-*` (various extensions)
-
-### 22. Block Editor (Puck)
-**Status: ❌ NOT IMPLEMENTED**
-
-**PRIORITY: HIGH** (marked as important by user)
-
-Visual page builder using Puck Editor (https://puckeditor.com/)
-
-**Requirements:**
-- [ ] Puck Editor integration
-- [ ] Block registry system
-- [ ] Drag-and-drop block composition
-- [ ] Custom block components
-- [ ] Block configuration UI
-- [ ] Preview mode
-- [ ] Responsive design controls
-- [ ] Save/load block compositions
-- [ ] Field type: `blocks` or `pageBuilder`
-
-**Use Cases:**
-- Landing pages
-- Marketing pages
-- Content-rich pages
-- Email templates
-- Dynamic layouts
-
-**Implementation:**
-- Create `BlockEditor` component using Puck
-- Define block component interface
-- Register default blocks (text, image, button, hero, etc.)
-- Allow custom block registration
-- Store block data as JSON in database
-
-**Dependencies:**
-- `@measured/puck`
-- React 19 compatible version
-
-**Integration:**
-```typescript
-fields: {
-  content: {
-    type: "blocks",
-    blocks: {
-      // Register available blocks
-      text: TextBlock,
-      image: ImageBlock,
-      hero: HeroBlock,
-      // ... custom blocks
-    }
-  }
-}
-```
-
-## 📊 Implementation Summary
-
-**Total Requirements:** 23
-
-**Status Breakdown:**
-- ✅ **Fully Implemented:** 13 (57%)
-- ⚠️ **Config Types Done, Rendering TODO:** 3 (13%)
-- ❌ **Not Implemented:** 7 (30%)
-
-**Core Functionality Score:** 13/14 (93%) - All critical features implemented
-
-**Config Types Ready for Implementation:**
-- Advanced Form Layouts (columns, grid, inline, conditional sections, tabs)
-- Dashboard System (widgets, grid layout, custom components)
-- Custom Pages (registration, navigation, permissions)
-
-**Note:** The config type system is now very comprehensive! Many advanced features have their types defined and are ready for rendering implementation.
-
-## 🎯 Priority Next Steps
-
-### 🔴 High Priority (User Marked as Important)
-1. **Rich Text Editor (Tiptap)** - Essential for content editing
-2. **Block Editor (Puck)** - Visual page builder for marketing/content pages
-3. **Embedded Collections** - Critical for many-to-many relations
-
-### 🟡 Medium Priority
-4. **Tabs Layout** - Important for complex forms
-5. **Full Drizzle Schema Introspection** - Remove heuristics
-6. **Tree Views** - For hierarchical data
-7. **Bulk Actions** - Common admin need
-
-### 🟢 Low Priority
-8. **Saved Views** - UX improvement
-9. **Custom Dashboard** - Nice to have
-10. **Permissions UI** - Can use CMS access control directly
-
-## ✅ Core Requirements Validation
-
-All **critical** requirements for MVP are implemented:
-
-1. ✅ Config-driven architecture
-2. ✅ Seamless DX (one component mount)
-3. ✅ Automatic routing
-4. ✅ Auto-generated sidebar
-5. ✅ Auto-generated forms
-6. ✅ Conditional field logic
-7. ✅ Relation fields with create/edit
-8. ✅ Version history & audit logging
-9. ✅ Sections organization
-10. ✅ TanStack Start integration
-11. ✅ Docker setup (Postgres only)
-12. ✅ Correct dependency versions
-
-**The package is production-ready for basic to intermediate admin use cases!** 🎉
-
-## 📝 Notes
-
-- Schema introspection currently uses heuristics (field name patterns)
-- Embedded collections need integration with the relation system
-- Form state management (useFormContext) needs proper integration
-- Some features marked "Coming Soon" in README are partially implemented

package/components.json

@@ -1,24 +0,0 @@
-{
-	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "base-mira",
-	"rsc": false,
-	"tsx": true,
-	"tailwind": {
-		"config": "",
-		"css": "src/styles/index.css",
-		"baseColor": "neutral",
-		"cssVariables": true,
-		"prefix": ""
-	},
-	"iconLibrary": "phosphor",
-	"aliases": {
-		"components": "#questpie/admin/components",
-		"utils": "#questpie/admin/lib/utils",
-		"ui": "#questpie/admin/components/ui",
-		"lib": "#questpie/admin/lib",
-		"hooks": "#questpie/admin/hooks"
-	},
-	"menuColor": "default",
-	"menuAccent": "subtle",
-	"registries": {}
-}

package/dist/__tests__/setup.mjs

@@ -1,38 +0,0 @@
-import * as matchers from "@testing-library/jest-dom/matchers";
-import { cleanup } from "@testing-library/react";
-import { afterEach, expect, vi } from "vitest";
-
-//#region src/__tests__/setup.ts
-/**
-* Vitest setup file for @questpie/admin
-*/
-expect.extend(matchers);
-afterEach(() => {
-	cleanup();
-});
-Object.defineProperty(window, "matchMedia", {
-	writable: true,
-	value: vi.fn().mockImplementation((query) => ({
-		matches: false,
-		media: query,
-		onchange: null,
-		addListener: vi.fn(),
-		removeListener: vi.fn(),
-		addEventListener: vi.fn(),
-		removeEventListener: vi.fn(),
-		dispatchEvent: vi.fn()
-	}))
-});
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-	observe: vi.fn(),
-	unobserve: vi.fn(),
-	disconnect: vi.fn()
-}));
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-	observe: vi.fn(),
-	unobserve: vi.fn(),
-	disconnect: vi.fn()
-}));
-
-//#endregion
-export {  };

package/dist/__tests__/test-utils.mjs

@@ -1,45 +0,0 @@
-import { render } from "@testing-library/react";
-import * as React$1 from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { jsx } from "react/jsx-runtime";
-
-export * from "@testing-library/react"
-
-//#region src/__tests__/test-utils.tsx
-/**
-* Test utilities for @questpie/admin components
-*/
-/**
-* Create a fresh QueryClient for each test
-*/
-function createTestQueryClient() {
-	return new QueryClient({ defaultOptions: {
-		queries: {
-			retry: false,
-			gcTime: 0
-		},
-		mutations: { retry: false }
-	} });
-}
-/**
-* Test wrapper with all required providers
-*/
-function TestWrapper({ children }) {
-	const [queryClient] = React$1.useState(() => createTestQueryClient());
-	return /* @__PURE__ */ jsx(QueryClientProvider, {
-		client: queryClient,
-		children
-	});
-}
-/**
-* Custom render function that wraps components with test providers
-*/
-function customRender(ui, options) {
-	return render(ui, {
-		wrapper: TestWrapper,
-		...options
-	});
-}
-
-//#endregion
-export { customRender as render };

package/dist/__tests__/vitest.d.mjs

@@ -1,3 +0,0 @@
-import "vitest";
-
-export {  };