Complete component documentation coverage for all 76 platform components

apps/site/source.config.ts

@@ -9,7 +9,13 @@ export const { docs, meta } = defineDocs({
       '!**/node_modules/**', 
       '!**/.vitepress/**',
       '!**/dist/**',
-      '!**/.*/**', 
+      '!**/.*/**',
+      '!**/COMPONENT_MAPPING_GUIDE.md',
+      '!**/COMPONENT_NAMING_CONVENTIONS.md',
+      '!**/DEVELOPMENT_ROADMAP_2026.md',
+      '!**/EVALUATION_INDEX.md',
+      '!**/OBJECTSTACK_COMPONENT_EVALUATION.md',
+      '!**/OBJECTSTACK_COMPONENT_EVALUATION_EN.md',
     ],
   },
 });

docs/components/basic/div.mdx

@@ -0,0 +1,133 @@
+---
+title: "Div"
+description: "Generic container element for grouping and laying out content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Div component is a versatile container element that wraps content and provides structure. It's the basic building block for creating layouts and organizing components.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'p-4 border rounded',
+    children: [
+      { type: 'text', content: 'This is content inside a div' }
+    ]
+  }}
+  title="Simple Div"
+/>
+
+## With Multiple Children
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'p-6 border rounded-lg bg-slate-50 space-y-3',
+    children: [
+      { type: 'text', content: 'First child', className: 'font-semibold' },
+      { type: 'text', content: 'Second child', className: 'text-muted-foreground' },
+      { type: 'text', content: 'Third child', className: 'text-sm' }
+    ]
+  }}
+  title="Multiple Children"
+/>
+
+## Layout Examples
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'div',
+      className: 'flex gap-4 p-4 border rounded',
+      children: [
+        { type: 'div', className: 'w-20 h-20 bg-blue-500 rounded' },
+        { type: 'div', className: 'w-20 h-20 bg-green-500 rounded' },
+        { type: 'div', className: 'w-20 h-20 bg-purple-500 rounded' }
+      ]
+    }}
+    title="Flex Container"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'div',
+      className: 'grid grid-cols-2 gap-4 p-4 border rounded',
+      children: [
+        { type: 'div', className: 'h-20 bg-red-500 rounded' },
+        { type: 'div', className: 'h-20 bg-yellow-500 rounded' },
+        { type: 'div', className: 'h-20 bg-pink-500 rounded' },
+        { type: 'div', className: 'h-20 bg-indigo-500 rounded' }
+      ]
+    }}
+    title="Grid Container"
+  />
+</DemoGrid>
+
+## Schema
+
+```typescript
+interface DivSchema {
+  type: 'div';
+
+  // Content
+  children?: SchemaNode | SchemaNode[];  // Child components
+  body?: SchemaNode[];                    // Alternative content prop
+
+  // Styling
+  className?: string;                     // Tailwind CSS classes
+
+  // Base properties
+  id?: string;
+  visible?: boolean | string;
+  testId?: string;
+}
+```
+
+## Examples
+
+### Card Layout
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm',
+    children: [
+      {
+        type: 'div',
+        className: 'p-6 space-y-2',
+        children: [
+          { type: 'text', content: 'Card Title', className: 'text-2xl font-semibold' },
+          { type: 'text', content: 'Card description goes here. This is a basic card layout using div containers.', className: 'text-sm text-muted-foreground' }
+        ]
+      }
+    ]
+  }}
+  title="Custom Card"
+/>
+
+### Nested Containers
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'p-6 border-2 border-dashed border-blue-300 rounded-lg',
+    children: [
+      {
+        type: 'div',
+        className: 'p-4 border-2 border-dashed border-green-300 rounded',
+        children: [
+          {
+            type: 'div',
+            className: 'p-3 border-2 border-dashed border-purple-300 rounded text-center',
+            children: [
+              { type: 'text', content: 'Nested Content', className: 'font-mono text-sm' }
+            ]
+          }
+        ]
+      }
+    ]
+  }}
+  title="Nested Divs"
+/>

docs/components/basic/meta.json

@@ -9,6 +9,8 @@
     "button-group",
     "pagination",
     "navigation-menu",
-    "sidebar"
+    "sidebar",
+    "div",
+    "span"
   ]
 }

docs/components/basic/span.mdx

@@ -0,0 +1,146 @@
+---
+title: "Span"
+description: "Inline container for styling and wrapping inline text content"
+---
+
+import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
+The Span component is an inline container used for wrapping and styling portions of text without breaking the flow of content.
+
+## Basic Usage
+
+<ComponentDemo
+  schema={{
+    type: 'text',
+    content: 'This is regular text with ',
+    children: [
+      { type: 'span', className: 'font-bold text-blue-600', body: [{ type: 'text', content: 'highlighted' }] },
+      { type: 'text', content: ' content inside.' }
+    ]
+  }}
+  title="Simple Span"
+/>
+
+## Text Styling
+
+<DemoGrid>
+  <ComponentDemo
+    schema={{
+      type: 'div',
+      children: [
+        { 
+          type: 'span', 
+          className: 'px-2 py-1 bg-blue-100 text-blue-800 rounded font-semibold',
+          body: [{ type: 'text', content: 'Badge Style' }]
+        }
+      ]
+    }}
+    title="Badge"
+  />
+  <ComponentDemo
+    schema={{
+      type: 'div',
+      children: [
+        { 
+          type: 'span', 
+          className: 'px-3 py-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full text-sm font-medium',
+          body: [{ type: 'text', content: 'Gradient Tag' }]
+        }
+      ]
+    }}
+    title="Gradient"
+  />
+</DemoGrid>
+
+## Inline Elements
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'p-4 border rounded',
+    children: [
+      { type: 'text', content: 'Price: ' },
+      {
+        type: 'span',
+        className: 'text-2xl font-bold text-green-600',
+        body: [{ type: 'text', content: '$99.99' }]
+      },
+      { type: 'text', content: ' ' },
+      {
+        type: 'span',
+        className: 'text-sm line-through text-muted-foreground',
+        body: [{ type: 'text', content: '$149.99' }]
+      }
+    ]
+  }}
+  title="Price Display"
+/>
+
+## Schema
+
+```typescript
+interface SpanSchema {
+  type: 'span';
+
+  // Content
+  value?: string;                        // Text content
+  children?: SchemaNode | SchemaNode[];  // Child components
+  body?: SchemaNode | SchemaNode[];      // Alternative content prop
+
+  // Styling
+  className?: string;                    // Tailwind CSS classes
+
+  // Base properties
+  id?: string;
+  visible?: boolean | string;
+  testId?: string;
+}
+```
+
+## Examples
+
+### Status Indicators
+
+<ComponentDemo
+  schema={{
+    type: 'flex',
+    gap: 2,
+    children: [
+      { 
+        type: 'span', 
+        className: 'px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full',
+        body: [{ type: 'text', content: '● Active' }]
+      },
+      { 
+        type: 'span', 
+        className: 'px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full',
+        body: [{ type: 'text', content: '● Pending' }]
+      },
+      { 
+        type: 'span', 
+        className: 'px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full',
+        body: [{ type: 'text', content: '● Inactive' }]
+      }
+    ]
+  }}
+  title="Status Tags"
+/>
+
+### Text Emphasis
+
+<ComponentDemo
+  schema={{
+    type: 'div',
+    className: 'p-4 border rounded',
+    children: [
+      { type: 'text', content: 'The ' },
+      { type: 'span', className: 'font-bold', body: [{ type: 'text', content: 'quick' }] },
+      { type: 'text', content: ' brown fox ' },
+      { type: 'span', className: 'italic text-purple-600', body: [{ type: 'text', content: 'jumps' }] },
+      { type: 'text', content: ' over the ' },
+      { type: 'span', className: 'underline decoration-wavy', body: [{ type: 'text', content: 'lazy' }] },
+      { type: 'text', content: ' dog.' }
+    ]
+  }}
+  title="Mixed Styling"
+/>