@object-ui/components 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -0,0 +1,47 @@
+
+> @object-ui/components@0.5.0 prebuild /home/runner/work/objectui/objectui/packages/components
+> pnpm --filter @object-ui/types build && pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build
+
+
+> @object-ui/types@0.5.0 build /home/runner/work/objectui/objectui/packages/types
+> tsc
+
+
+> @object-ui/core@0.5.0 build /home/runner/work/objectui/objectui/packages/core
+> tsc
+
+
+> @object-ui/react@0.5.0 build /home/runner/work/objectui/objectui/packages/react
+> tsc
+
+
+> @object-ui/components@0.5.0 build /home/runner/work/objectui/objectui/packages/components
+> vite build
+
+vite v7.3.1 building client environment for production...
+transforming...
+✓ 3526 modules transformed.
+rendering chunks...
+
+[vite:dts] Start generate declaration files...
+src/renderers/complex/data-table.tsx:494:25 - error TS2578: Unused '@ts-expect-error' directive.
+
+494                         // @ts-expect-error - onRowClick might not be in schema type definition
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+src/renderers/complex/data-table.tsx:498:25 - error TS2578: Unused '@ts-expect-error' directive.
+
+498                         // @ts-expect-error - onRowClick might not be in schema type definition
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+src/renderers/complex/data-table.tsx:505:28 - error TS2578: Unused '@ts-expect-error' directive.
+
+505                            // @ts-expect-error - onRowClick might not be in schema type definition
+                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+computing gzip size...
+dist/index.css    105.80 kB │ gzip:  17.37 kB
+dist/index.js   1,813.35 kB │ gzip: 425.87 kB
+[vite:dts] Declaration files built in 6799ms.
+
+dist/index.css        105.80 kB │ gzip:  17.37 kB
+dist/index.umd.cjs  1,310.74 kB │ gzip: 363.70 kB
+✓ built in 15.06s

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @object-ui/components
 
+## 0.3.1
+
+### Patch Changes
+
+- Maintenance release - Documentation and build improvements
+- Updated dependencies
+  - @object-ui/types@0.3.1
+  - @object-ui/core@0.3.1
+  - @object-ui/react@0.3.1
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -6,10 +6,41 @@ Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS
 
 - 🎨 **Tailwind Native** - Built entirely with Tailwind CSS utility classes
 - 🧩 **Shadcn UI** - Based on Radix UI primitives for accessibility
-- 📦 **50+ Components** - Complete set of UI components
+- 📦 **60+ Components** - Complete set of UI components (46 from Shadcn + 14 custom)
 - ♿ **Accessible** - WCAG compliant components
 - 🎯 **Type-Safe** - Full TypeScript support
 - 🔌 **Extensible** - Easy to customize and extend
+- � **Storybook** - Interactive component showcase and development environment
+- 🔄 **Sync Tools** - Scripts to keep components updated with latest Shadcn
+
+## Development
+
+We use Storybook for component development and testing.
+
+```bash
+# Start Storybook
+pnpm storybook
+
+# Build Storybook
+pnpm build-storybook
+```
+
+## Keeping Components Updated
+
+ObjectUI provides tools to sync components with the latest Shadcn UI versions:
+
+```bash
+# Analyze components (offline)
+pnpm shadcn:analyze
+
+# Check for updates (online)
+pnpm shadcn:check
+
+# Update a component
+pnpm shadcn:update button --backup
+```
+
+**📚 See [SHADCN_SYNC.md](../../docs/SHADCN_SYNC.md) for the complete guide.**
 
 ## Installation
 

package/README_SHADCN_SYNC.md

@@ -0,0 +1,281 @@
+# Shadcn Components Synchronization
+
+This directory contains tools for keeping ObjectUI components in sync with Shadcn UI.
+
+## Files
+
+- `shadcn-components.json` - Component manifest tracking Shadcn components and custom ObjectUI components
+- `shadcn-sync.js` - Automated sync script (requires network access to ui.shadcn.com)
+
+## Component Categories
+
+### Shadcn Components (46)
+
+These components come from Shadcn UI and can be updated from the registry:
+
+**Form Controls:**
+- input, textarea, select, checkbox, radio-group, switch, form, label, input-otp
+
+**Layout:**
+- card, tabs, accordion, separator, scroll-area, resizable
+
+**Overlays:**
+- dialog, popover, tooltip, hover-card, sheet, drawer, alert-dialog
+
+**Navigation:**
+- button, breadcrumb, navigation-menu, dropdown-menu, context-menu, menubar, pagination
+
+**Data Display:**
+- table, avatar, badge, skeleton, progress, slider
+
+**Feedback:**
+- alert, toast, sonner
+
+**Advanced:**
+- command, carousel, sidebar, collapsible, calendar, aspect-ratio, toggle, toggle-group
+
+### Custom ObjectUI Components (14)
+
+These are custom to ObjectUI and should NOT be auto-updated:
+
+- `button-group` - Button group wrapper
+- `calendar-view` - Full calendar implementation
+- `chatbot` - Chatbot UI interface
+- `combobox` - Combined select/input component
+- `date-picker` - Date picker with calendar
+- `empty` - Empty state component
+- `field` - Form field wrapper with validation
+- `filter-builder` - Advanced query builder
+- `input-group` - Input with prefix/suffix
+- `item` - Generic item display
+- `kbd` - Keyboard shortcut display
+- `spinner` - Loading spinner
+- `timeline` - Timeline/activity feed
+- `toaster` - Toast notification manager
+
+## Usage
+
+### Automated Sync (Requires Internet)
+
+```bash
+# Check component status
+pnpm shadcn:check
+
+# Update a specific component
+pnpm shadcn:update button
+
+# Update all components
+pnpm shadcn:update-all
+
+# Show diff for a component
+pnpm shadcn:diff button
+
+# List all components
+pnpm shadcn:list
+```
+
+### Manual Sync Process
+
+If you don't have network access or prefer manual control:
+
+1. **Visit Shadcn UI Documentation**
+   - Go to https://ui.shadcn.com/docs/components/[component-name]
+   - Click "View Code" to see the latest implementation
+
+2. **Compare with Local Version**
+   ```bash
+   # View local component
+   cat packages/components/src/ui/button.tsx
+   ```
+
+3. **Copy Latest Version**
+   - Copy the component code from Shadcn docs
+   - Paste into a temporary file
+
+4. **Adjust Imports**
+   Replace Shadcn imports:
+   ```typescript
+   // FROM:
+   import { cn } from "@/lib/utils"
+   import { Button } from "@/components/ui/button"
+   
+   // TO:
+   import { cn } from "../lib/utils"
+   import { Button } from "./button"
+   ```
+
+5. **Add ObjectUI Header**
+   ```typescript
+   /**
+    * ObjectUI
+    * Copyright (c) 2024-present ObjectStack Inc.
+    *
+    * This source code is licensed under the MIT license found in the
+    * LICENSE file in the root directory of this source tree.
+    */
+   ```
+
+6. **Preserve Customizations**
+   - Keep any `data-slot` attributes
+   - Keep ObjectUI-specific variants
+   - Keep dark mode enhancements
+   - Keep accessibility improvements
+
+7. **Test the Component**
+   ```bash
+   pnpm --filter @object-ui/components build
+   pnpm --filter @object-ui/components test
+   ```
+
+## Using Official Shadcn CLI
+
+You can also use the official Shadcn CLI:
+
+```bash
+# Install Shadcn CLI
+npm install -g shadcn@latest
+
+# Initialize (if not done)
+cd packages/components
+npx shadcn@latest init
+
+# Add/update a component
+npx shadcn@latest add button --overwrite
+
+# Add all components
+npx shadcn@latest add --all --overwrite
+```
+
+**⚠️ Warning:** This will overwrite all ObjectUI customizations! You'll need to:
+
+1. Review the diff carefully: `git diff src/ui/`
+2. Restore ObjectUI copyright headers
+3. Re-add any custom variants or styling
+4. Re-add data-slot attributes
+5. Test thoroughly
+
+## Checking for Updates
+
+### Manual Check
+
+1. Visit [Shadcn UI GitHub](https://github.com/shadcn-ui/ui/tree/main/apps/www/registry/default/ui)
+2. Compare file dates with last update
+3. Check [Shadcn Releases](https://github.com/shadcn-ui/ui/releases) for changelog
+
+### Compare Dependencies
+
+```bash
+# Check Radix UI versions
+cat packages/components/package.json | grep @radix-ui
+
+# Check latest versions
+npm view @radix-ui/react-dialog version
+npm view @radix-ui/react-select version
+```
+
+### Review Breaking Changes
+
+Check Shadcn's changelog:
+- [UI Changelog](https://github.com/shadcn-ui/ui/releases)
+- [Radix UI Releases](https://github.com/radix-ui/primitives/releases)
+
+## Common Customizations in ObjectUI
+
+When updating components, preserve these ObjectUI patterns:
+
+### 1. Copyright Headers
+
+```typescript
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+```
+
+### 2. Data Slot Attributes
+
+```typescript
+<div data-slot="card-header" className={...}>
+```
+
+### 3. Additional Variants
+
+```typescript
+const buttonVariants = cva(
+  "...",
+  {
+    variants: {
+      // ObjectUI-specific variants
+      size: {
+        "icon-sm": "h-8 w-8",  // Extra size variant
+        "icon-lg": "h-10 w-10", // Extra size variant
+      }
+    }
+  }
+)
+```
+
+### 4. Enhanced Dark Mode
+
+ObjectUI may have enhanced dark mode styles:
+
+```typescript
+className="... dark:bg-background/95 dark:backdrop-blur-sm"
+```
+
+## Testing After Updates
+
+```bash
+# Type check
+pnpm --filter @object-ui/components type-check
+
+# Build
+pnpm --filter @object-ui/components build
+
+# Run tests
+pnpm --filter @object-ui/components test
+
+# Visual regression (if available)
+pnpm --filter @object-ui/components storybook
+
+# Integration test
+pnpm test
+```
+
+## Rollback
+
+If an update causes issues:
+
+```bash
+# Revert specific file
+git checkout HEAD -- packages/components/src/ui/button.tsx
+
+# Revert all UI components
+git checkout HEAD -- packages/components/src/ui/
+
+# Restore from backup (if created)
+cp packages/components/.backup/button.tsx.* packages/components/src/ui/button.tsx
+```
+
+## Contributing
+
+When you update a component:
+
+1. Document the changes in CHANGELOG.md
+2. Update the version in shadcn-components.json (add lastUpdated field)
+3. Test with all examples
+4. Create a PR with:
+   - Component name in title
+   - Reason for update
+   - Breaking changes (if any)
+   - Screenshots (if visual changes)
+
+## Resources
+
+- [Shadcn UI Docs](https://ui.shadcn.com)
+- [Radix UI Docs](https://www.radix-ui.com)
+- [Tailwind CSS Docs](https://tailwindcss.com)
+- [CVA (Class Variance Authority)](https://cva.style)

package/TESTING.md

@@ -0,0 +1,335 @@
+# Component and Renderer Testing Guide
+
+## Overview
+
+This document describes the comprehensive automated testing infrastructure for ObjectUI components and renderers. The tests are designed to automatically discover display, accessibility, and structural issues in UI components.
+
+## Test Architecture
+
+### Test Utilities (`test-utils.tsx`)
+
+A suite of helper functions that provide automated checks for common display issues:
+
+#### `renderComponent(schema, options)`
+Renders a component from its schema definition for testing.
+
+```typescript
+const { container } = renderComponent({
+  type: 'button',
+  label: 'Click Me',
+});
+```
+
+#### `checkAccessibility(element)`
+Validates accessibility attributes and identifies common a11y issues:
+- Missing ARIA labels on interactive elements
+- Missing form labels
+- Missing alt attributes on images
+
+Returns:
+```typescript
+{
+  hasRole: boolean;
+  hasAriaLabel: boolean;
+  hasAriaDescribedBy: boolean;
+  issues: string[]; // List of detected issues
+}
+```
+
+#### `checkDOMStructure(container)`
+Analyzes DOM structure for potential issues:
+- Empty components
+- Excessive nesting (>20 levels)
+- Missing content
+
+Returns:
+```typescript
+{
+  hasContent: boolean;
+  isEmpty: boolean;
+  hasChildren: boolean;
+  nestedDepth: number;
+  issues: string[]; // List of detected issues
+}
+```
+
+#### `checkStyling(element)`
+Validates component styling:
+- Class presence
+- Tailwind CSS usage
+- Inline styles
+
+Returns:
+```typescript
+{
+  hasClasses: boolean;
+  hasTailwindClasses: boolean;
+  hasInlineStyles: boolean;
+  classes: string[];
+}
+```
+
+#### `validateComponentRegistration(componentType)`
+Verifies component registration in ComponentRegistry:
+- Component is registered
+- Has configuration
+- Has renderer function
+- Has label and inputs
+- Has default props
+
+Returns:
+```typescript
+{
+  isRegistered: boolean;
+  hasConfig: boolean;
+  hasRenderer: boolean;
+  hasLabel: boolean;
+  hasInputs: boolean;
+  hasDefaultProps: boolean;
+  config: any;
+}
+```
+
+#### `getAllDisplayIssues(container)`
+Comprehensive check that runs all validation checks and returns aggregated issues:
+
+```typescript
+const issues = getAllDisplayIssues(container);
+// Returns array of issue descriptions
+```
+
+## Test Coverage
+
+### Component Categories
+
+The test suite covers all major component categories:
+
+1. **Basic Components** (`basic-renderers.test.tsx`)
+   - Text, Div, Span, Image, Icon, Separator, HTML
+
+2. **Form Components** (`form-renderers.test.tsx`)
+   - Button, Input, Textarea, Select, Checkbox, Switch
+   - Radio Group, Slider, Label, Email, Password
+
+3. **Layout Components** (`layout-data-renderers.test.tsx`)
+   - Container, Grid, Flex
+
+4. **Data Display Components** (`layout-data-renderers.test.tsx`)
+   - List, Tree View, Badge, Avatar, Alert
+   - Breadcrumb, Statistic, Kbd
+
+5. **Feedback Components** (`feedback-overlay-renderers.test.tsx`)
+   - Loading, Spinner, Progress, Skeleton, Empty, Toast
+
+6. **Overlay Components** (`feedback-overlay-renderers.test.tsx`)
+   - Dialog, Alert Dialog, Sheet, Drawer
+   - Popover, Tooltip, Dropdown Menu, Context Menu
+   - Hover Card, Menubar
+
+7. **Disclosure Components** (`complex-disclosure-renderers.test.tsx`)
+   - Accordion, Collapsible, Toggle Group
+
+8. **Complex Components** (`complex-disclosure-renderers.test.tsx`)
+   - Timeline, Data Table, Chatbot, Carousel
+   - Scroll Area, Resizable, Filter Builder, Calendar View, Table
+
+## What the Tests Check
+
+### 1. Component Registration
+Every component should be properly registered:
+```typescript
+it('should be properly registered', () => {
+  const validation = validateComponentRegistration('button');
+  expect(validation.isRegistered).toBe(true);
+  expect(validation.hasConfig).toBe(true);
+  expect(validation.hasLabel).toBe(true);
+});
+```
+
+### 2. Rendering Without Errors
+Components should render without throwing errors:
+```typescript
+it('should render without issues', () => {
+  const { container } = renderComponent({
+    type: 'button',
+    label: 'Test',
+  });
+  expect(container).toBeDefined();
+});
+```
+
+### 3. Accessibility
+Components should be accessible:
+```typescript
+it('should have proper accessibility', () => {
+  const { container } = renderComponent({
+    type: 'button',
+    label: 'Click Me',
+  });
+  
+  const issues = getAllDisplayIssues(container);
+  const a11yIssues = issues.filter(i => i.includes('accessible'));
+  expect(a11yIssues).toHaveLength(0);
+});
+```
+
+### 4. DOM Structure
+Components should have valid DOM structure:
+```typescript
+it('should have valid structure', () => {
+  const { container } = renderComponent({
+    type: 'container',
+    body: [{ type: 'text', content: 'Content' }],
+  });
+  
+  const domCheck = checkDOMStructure(container);
+  expect(domCheck.hasContent).toBe(true);
+  expect(domCheck.isEmpty).toBe(false);
+  expect(domCheck.nestedDepth).toBeLessThan(20);
+});
+```
+
+### 5. Props and Variants
+Components should support their documented props:
+```typescript
+it('should support variants', () => {
+  const variants = ['default', 'secondary', 'destructive'];
+  
+  variants.forEach(variant => {
+    const { container } = renderComponent({
+      type: 'button',
+      label: 'Test',
+      variant,
+    });
+    expect(container).toBeDefined();
+  });
+});
+```
+
+## Running Tests
+
+### Run All Tests
+```bash
+pnpm test
+```
+
+### Run Component Tests Only
+```bash
+pnpm vitest run packages/components/src/__tests__/
+```
+
+### Run Specific Test File
+```bash
+pnpm vitest run packages/components/src/__tests__/form-renderers.test.tsx
+```
+
+### Watch Mode
+```bash
+pnpm test:watch
+```
+
+### Coverage Report
+```bash
+pnpm test:coverage
+```
+
+### Interactive UI
+```bash
+pnpm test:ui
+```
+
+## Test Results
+
+Current test coverage:
+- **150 total tests** across all component categories
+- **140 passing** (93% pass rate)
+- **10 failing** - identifying real schema/prop mismatches that need fixing
+
+The failing tests are valuable as they automatically discovered:
+- Components with missing props
+- Schema mismatches (e.g., `content` vs `html`, `text` vs `content`)
+- Missing default values
+- Incorrect prop expectations
+
+## Adding New Tests
+
+### For New Components
+
+When adding a new component, create tests following this pattern:
+
+```typescript
+describe('MyComponent Renderer', () => {
+  it('should be properly registered', () => {
+    const validation = validateComponentRegistration('my-component');
+    expect(validation.isRegistered).toBe(true);
+    expect(validation.hasConfig).toBe(true);
+  });
+
+  it('should render without issues', () => {
+    const { container } = renderComponent({
+      type: 'my-component',
+      // ... required props
+    });
+
+    expect(container).toBeDefined();
+    const issues = getAllDisplayIssues(container);
+    expect(issues).toHaveLength(0);
+  });
+
+  it('should support required props', () => {
+    const { container } = renderComponent({
+      type: 'my-component',
+      requiredProp: 'value',
+    });
+
+    expect(container.textContent).toContain('value');
+  });
+});
+```
+
+### For Display Issue Detection
+
+Add specific checks for known issues:
+
+```typescript
+it('should not have excessive nesting', () => {
+  const { container } = renderComponent({
+    type: 'complex-component',
+    data: complexData,
+  });
+
+  const domCheck = checkDOMStructure(container);
+  expect(domCheck.nestedDepth).toBeLessThan(20);
+});
+
+it('should have proper ARIA attributes', () => {
+  const { container } = renderComponent({
+    type: 'interactive-component',
+  });
+
+  const button = container.querySelector('button');
+  const a11y = checkAccessibility(button);
+  expect(a11y.issues).toHaveLength(0);
+});
+```
+
+## Benefits
+
+This testing infrastructure provides:
+
+1. **Automated Issue Detection** - Tests automatically find display and accessibility issues
+2. **Regression Prevention** - Catches breaking changes in component rendering
+3. **Documentation** - Tests serve as examples of how components should be used
+4. **Confidence** - High test coverage ensures components work as expected
+5. **Quick Feedback** - Fast test execution helps during development
+
+## Future Enhancements
+
+Potential improvements:
+
+1. Visual regression testing with screenshot comparison
+2. Performance benchmarking for complex components
+3. Cross-browser testing
+4. Responsive design testing
+5. Theme variation testing
+6. Integration tests with SchemaRenderer