@object-ui/components 0.3.1 → 0.5.0

package/src/ui/tooltip.tsx

@@ -13,57 +13,26 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "../lib/utils"
 
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/ui/typography.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const TypographyH1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h1 ref={ref} className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className)} {...props} />
+))
+TypographyH1.displayName = "TypographyH1"
+
+const TypographyH2 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h2 ref={ref} className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", className)} {...props} />
+))
+TypographyH2.displayName = "TypographyH2"
+
+const TypographyH3 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h3 ref={ref} className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", className)} {...props} />
+))
+TypographyH3.displayName = "TypographyH3"
+
+const TypographyH4 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h4 ref={ref} className={cn("scroll-m-20 text-xl font-semibold tracking-tight", className)} {...props} />
+))
+TypographyH4.displayName = "TypographyH4"
+
+const TypographyP = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...props} />
+))
+TypographyP.displayName = "TypographyP"
+
+const TypographyBlockquote = React.forwardRef<HTMLQuoteElement, React.HTMLAttributes<HTMLQuoteElement>>(({ className, ...props }, ref) => (
+  <blockquote ref={ref} className={cn("mt-6 border-l-2 pl-6 italic", className)} {...props} />
+))
+TypographyBlockquote.displayName = "TypographyBlockquote"
+
+const TypographyList = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(({ className, ...props }, ref) => (
+  <ul ref={ref} className={cn("my-6 ml-6 list-disc [&>li]:mt-2", className)} {...props} />
+))
+TypographyList.displayName = "TypographyList"
+
+const TypographyInlineCode = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
+  <code ref={ref} className={cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", className)} {...props} />
+))
+TypographyInlineCode.displayName = "TypographyInlineCode"
+
+const TypographyLead = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-xl text-muted-foreground", className)} {...props} />
+))
+TypographyLead.displayName = "TypographyLead"
+
+const TypographyLarge = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+TypographyLarge.displayName = "TypographyLarge"
+
+const TypographySmall = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
+  <small ref={ref} className={cn("text-sm font-medium leading-none", className)} {...props} />
+))
+TypographySmall.displayName = "TypographySmall"
+
+const TypographyMuted = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+TypographyMuted.displayName = "TypographyMuted"
+
+export {
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyP,
+  TypographyBlockquote,
+  TypographyList,
+  TypographyInlineCode,
+  TypographyLead,
+  TypographyLarge,
+  TypographySmall,
+  TypographyMuted,
+}

package/tsconfig.json

@@ -15,5 +15,5 @@
     "skipLibCheck": true
   },
   "include": ["src"],
-  "exclude": ["src/__tests__", "**/*.test.ts", "**/*.test.tsx"]
+  "exclude": ["src/__tests__", "**/*.test.ts", "**/*.test.tsx", "src/stories-json", "**/*.stories.tsx"]
 }

package/vite.config.ts

@@ -22,6 +22,13 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, './src'), // Self-reference for vitest.setup.tsx
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
   },
   build: {
@@ -45,7 +52,8 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
-    setupFiles: [],
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
     // Ensure dependencies are resolved properly for tests
     deps: {
       inline: ['@object-ui/core', '@object-ui/react'],

package/vitest.config.ts

@@ -0,0 +1,5 @@
+import { mergeConfig } from 'vitest/config';
+import rootConfig from '../../vitest.config.mts';
+import viteConfig from './vite.config';
+
+export default mergeConfig(rootConfig, viteConfig);

package/ISSUES_FOUND.md

@@ -1,128 +0,0 @@
-# Display Issues Automatically Detected by Tests
-
-This document lists the real display and rendering issues automatically discovered by the comprehensive test suite.
-
-## Summary
-
-The automated test suite (150 tests total) successfully identified **10 real issues** across different component renderers:
-
-- ✅ **140 tests passing** - Components working correctly
-- ⚠️ **10 tests failing** - Automatically detected issues requiring fixes
-
-## Issues Detected
-
-### 1. Container Renderer - Missing Children Support
-**Location:** `layout-data-renderers.test.tsx`
-**Issue:** Container component does not properly render child components passed via `body` prop
-**Expected:** Should render nested children
-**Actual:** Children not rendering, possibly schema mismatch
-
-### 2. Grid Renderer - Children Not Rendering
-**Location:** `layout-data-renderers.test.tsx`
-**Issue:** Grid layout component not displaying child items
-**Expected:** Should render grid with child items
-**Actual:** Empty content
-
-### 3. Tree View Renderer - Data Prop Mismatch
-**Location:** `layout-data-renderers.test.tsx`
-**Issue:** Tree view component not rendering tree data structure
-**Expected:** Should display hierarchical tree data
-**Actual:** No content rendered, possible prop name mismatch (`data` vs `items`)
-
-### 4. Badge Renderer - Text Prop Issue
-**Location:** `layout-data-renderers.test.tsx`
-**Issue:** Badge component not rendering text content
-**Expected:** Should display badge text via `text` prop
-**Actual:** Empty badge, possible prop name should be `children` or `content`
-
-### 5. Avatar Renderer - Image Not Rendering
-**Location:** `layout-data-renderers.test.tsx`
-**Issue:** Avatar component image not displaying
-**Expected:** Should render image from `src` prop
-**Actual:** No image element found in DOM
-
-### 6. Loading Renderer - Message Prop Not Working
-**Location:** `feedback-overlay-renderers.test.tsx`
-**Issue:** Loading component not displaying message text
-**Expected:** Should show loading message
-**Actual:** Message text not rendered
-
-### 7. Tooltip Renderer - Trigger Content Not Rendering
-**Location:** `feedback-overlay-renderers.test.tsx`
-**Issue:** Tooltip trigger content (button) not visible
-**Expected:** Should render trigger element that shows tooltip on hover
-**Actual:** Trigger content missing
-
-### 8. Scroll Area Renderer - Content Not Displaying
-**Location:** `complex-disclosure-renderers.test.tsx`
-**Issue:** Scroll area component not showing scrollable content
-**Expected:** Should render content within scrollable container
-**Actual:** Only CSS rules visible, content not rendered
-
-## Component Schema Mismatches Found
-
-| Component | Test Prop | Expected Behavior | Likely Fix |
-|-----------|-----------|-------------------|------------|
-| Container | `body` | Render children | Check SchemaRenderer integration |
-| Grid | `body` | Render grid items | Check children rendering |
-| Tree View | `data` | Display tree structure | Verify prop name or data format |
-| Badge | `text` | Show badge text | Change to `children` or verify prop |
-| Avatar | `src` | Render image | Check Radix UI Avatar implementation |
-| Loading | `message` | Display message | Verify prop name |
-| Tooltip | `body` | Render trigger | Check trigger rendering |
-| Scroll Area | `body` | Show content | Verify content prop handling |
-
-## Automated Checks That Found Issues
-
-The test utilities successfully detected:
-
-1. **Empty Content Detection**
-   ```typescript
-   const domCheck = checkDOMStructure(container);
-   expect(domCheck.hasContent).toBe(true); // FAILED - found empty components
-   ```
-
-2. **Missing DOM Elements**
-   ```typescript
-   expect(container.textContent).toContain('Expected Text'); // FAILED - content not rendered
-   ```
-
-3. **Missing Image Elements**
-   ```typescript
-   const img = container.querySelector('img');
-   expect(img).toBeTruthy(); // FAILED - image not found
-   ```
-
-## Next Steps
-
-To fix these issues:
-
-1. **Verify Component Schemas** - Check TypeScript type definitions in `@object-ui/types`
-2. **Update Renderers** - Ensure renderers properly handle documented props
-3. **Fix Prop Mappings** - Align prop names between schema and component implementation
-4. **Test SchemaRenderer Integration** - Verify children rendering works correctly
-5. **Update Documentation** - Ensure component examples use correct props
-
-## Value of Automated Testing
-
-These tests have proven their value by:
-- ✅ Automatically discovering 10 real issues without manual testing
-- ✅ Identifying schema/implementation mismatches
-- ✅ Providing specific locations and expected behaviors
-- ✅ Enabling quick regression testing as fixes are applied
-- ✅ Serving as living documentation of component APIs
-
-## Running Tests to Verify Fixes
-
-After fixing issues, verify with:
-```bash
-# Run all tests
-pnpm vitest run packages/components/src/__tests__/
-
-# Run specific failing tests
-pnpm vitest run packages/components/src/__tests__/layout-data-renderers.test.tsx
-pnpm vitest run packages/components/src/__tests__/feedback-overlay-renderers.test.tsx
-pnpm vitest run packages/components/src/__tests__/complex-disclosure-renderers.test.tsx
-```
-
-When all 150 tests pass, all display issues will be resolved!