@djangocfg/layouts 1.2.21 → 1.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.21",
-    "@djangocfg/og-image": "^1.2.21",
-    "@djangocfg/ui": "^1.2.21",
+    "@djangocfg/api": "^1.2.22",
+    "@djangocfg/og-image": "^1.2.22",
+    "@djangocfg/ui": "^1.2.22",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.21",
+    "@djangocfg/typescript-config": "^1.2.22",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-02T11:45:27.117Z
+ * Last updated: 2025-11-03T06:46:24.174Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.21"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.21"
+    "version": "1.2.22"
   }
 ];
 

package/src/layouts/UILayout/TOOLS_INTEGRATION.md

@@ -0,0 +1,216 @@
+# Developer Tools Integration
+
+## Overview
+
+Successfully integrated three developer tool components into the UILayout showcase:
+
+1. **JsonTree** - Interactive JSON viewer with expand/collapse functionality
+2. **PrettyCode** - Syntax-highlighted code display
+3. **Mermaid** - Diagram renderer with fullscreen support
+
+## Changes Made
+
+### 1. Created Tools Configuration
+
+**File**: `config/components/tools.config.tsx`
+
+- Defined 3 component configurations with examples and previews
+- Added sample data for demonstrations
+- Included comprehensive usage examples
+
+### 2. Updated Components Index
+
+**File**: `config/components/index.ts`
+
+- Added `TOOLS_COMPONENTS` export
+- Integrated tools into `COMPONENTS_CONFIG` array
+- Tools now available in component registry
+
+### 3. Added Developer Tools Category
+
+**File**: `config/categories.config.tsx`
+
+- Created new "Developer Tools" category
+- Added Wrench icon from lucide-react
+- Positioned between "Specialized" and "Blocks" categories
+- Description: "Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams"
+
+### 4. Updated Tools Exports
+
+**File**: `packages/ui/src/tools/index.ts`
+
+- Ensured all tools are properly exported as named exports
+- Exported TypeScript types (Language, JsonTreeConfig)
+
+## Component Features
+
+### JsonTree
+
+**Features:**
+- Expand/collapse all functionality
+- Smart auto-expansion based on depth and collection size
+- Collection info display (array length, object keys count)
+- Copy to clipboard
+- Download as JSON file
+- Theme-aware colors using CSS variables
+- String truncation for long values
+- Configurable expansion limits
+
+**Configuration Options:**
+- `maxAutoExpandDepth` - Maximum depth to auto-expand (default: 2)
+- `maxAutoExpandArrayItems` - Max array items to auto-expand (default: 10)
+- `maxAutoExpandObjectKeys` - Max object keys to auto-expand (default: 5)
+- `maxStringLength` - String truncation threshold (default: 200)
+- `collectionLimit` - Collection size limit for performance (default: 50)
+- `showCollectionInfo` - Display collection metadata
+- `showExpandControls` - Show expand/collapse buttons
+- `showActionButtons` - Show copy/download buttons
+
+### PrettyCode
+
+**Features:**
+- Syntax highlighting with Prism
+- Automatic language detection
+- Theme support (dark/light)
+- Inline and block modes
+- Language badge display
+- Support for 15+ languages
+- Custom background colors
+- JSON auto-formatting
+
+**Supported Languages:**
+- JavaScript/TypeScript
+- Python
+- Bash/Shell
+- JSON, YAML, XML
+- HTML, CSS
+- SQL
+- Markdown
+- And more...
+
+### Mermaid
+
+**Features:**
+- Fullscreen modal view
+- Click to expand
+- ESC key to close
+- Theme-aware rendering
+- Semantic color variables
+- Support for all Mermaid diagram types
+- Responsive SVG sizing
+- Error handling with user feedback
+
+**Supported Diagrams:**
+- Flowchart / Graph
+- Sequence diagram
+- Class diagram
+- State diagram
+- Entity Relationship diagram
+- User Journey
+- Gantt chart
+- Pie chart
+- Git graph
+
+## Usage in UILayout
+
+The tools are now accessible through the UILayout navigation:
+
+1. Navigate to **Developer Tools** category in sidebar
+2. Click on any tool (JsonTree, PrettyCode, Mermaid)
+3. View live preview and usage examples
+4. Copy code examples for use in your project
+
+## Import Examples
+
+```tsx
+// Individual imports
+import { JsonTree } from '@djangocfg/ui';
+import { PrettyCode } from '@djangocfg/ui';
+import { Mermaid } from '@djangocfg/ui';
+
+// All at once
+import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+```
+
+## Preview Examples
+
+### JsonTree Preview
+```tsx
+<JsonTree
+  title="User Data"
+  data={{
+    user: {
+      id: 1,
+      name: "John Doe",
+      profile: { bio: "Software engineer" }
+    }
+  }}
+  config={{
+    maxAutoExpandDepth: 2,
+    showCollectionInfo: true,
+    showExpandControls: true,
+  }}
+/>
+```
+
+### PrettyCode Preview
+```tsx
+<PrettyCode
+  data={pythonCode}
+  language="python"
+/>
+```
+
+### Mermaid Preview
+```tsx
+<Mermaid
+  chart={`
+    graph TD
+      A[Start] --> B{Decision}
+      B -->|Yes| C[OK]
+      B -->|No| D[End]
+  `}
+/>
+```
+
+## File Structure
+
+```
+UILayout/
+├── config/
+│   ├── components/
+│   │   ├── tools.config.tsx        # NEW - Tools configurations
+│   │   └── index.ts                # UPDATED - Added tools export
+│   └── categories.config.tsx       # UPDATED - Added tools category
+└── TOOLS_INTEGRATION.md           # THIS FILE
+```
+
+## Testing
+
+To verify the integration:
+
+1. Start the development server
+2. Navigate to UILayout showcase
+3. Check sidebar for "Developer Tools" category
+4. Verify all 3 components render correctly
+5. Test interactive features:
+   - JsonTree: expand/collapse, copy, download
+   - PrettyCode: syntax highlighting in different themes
+   - Mermaid: fullscreen view, ESC key close
+
+## Next Steps
+
+Potential enhancements:
+- Add search functionality to JsonTree
+- Add more code language examples to PrettyCode
+- Add more diagram type examples to Mermaid
+- Create composite examples combining multiple tools
+- Add performance benchmarks section
+
+## Notes
+
+- All components are theme-aware using CSS variables
+- All components support both light and dark modes
+- All components are fully responsive
+- No breaking changes to existing components
+- Backward compatible with existing UILayout structure

package/src/layouts/UILayout/config/categories.config.tsx

@@ -16,6 +16,7 @@ import {
   Boxes,
   Code2,
   Palette,
+  Wrench,
 } from 'lucide-react';
 import { getComponentCount } from './components';
 
@@ -83,6 +84,13 @@ export const CATEGORIES: ComponentCategory[] = [
     count: getComponentCount('specialized'),
     description: 'Advanced components like sidebar navigation and image handling',
   },
+  {
+    id: 'tools',
+    label: 'Developer Tools',
+    icon: <Wrench className="h-4 w-4" />,
+    count: getComponentCount('tools'),
+    description: 'Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams',
+  },
   {
     id: 'blocks',
     label: 'Blocks',

package/src/layouts/UILayout/config/components/index.ts

@@ -11,6 +11,7 @@ export { OVERLAY_COMPONENTS } from './overlay.config';
 export { FEEDBACK_COMPONENTS } from './feedback.config';
 export { DATA_COMPONENTS } from './data.config';
 export { SPECIALIZED_COMPONENTS } from './specialized.config';
+export { TOOLS_COMPONENTS } from './tools.config';
 export { BLOCKS } from './blocks.config';
 export { HOOKS } from './hooks.config';
 
@@ -21,6 +22,7 @@ import { OVERLAY_COMPONENTS } from './overlay.config';
 import { FEEDBACK_COMPONENTS } from './feedback.config';
 import { DATA_COMPONENTS } from './data.config';
 import { SPECIALIZED_COMPONENTS } from './specialized.config';
+import { TOOLS_COMPONENTS } from './tools.config';
 import { BLOCKS } from './blocks.config';
 import { HOOKS } from './hooks.config';
 import type { ComponentConfig } from './types';
@@ -36,6 +38,7 @@ export const COMPONENTS_CONFIG: ComponentConfig[] = [
   ...FEEDBACK_COMPONENTS,
   ...DATA_COMPONENTS,
   ...SPECIALIZED_COMPONENTS,
+  ...TOOLS_COMPONENTS,
   ...BLOCKS,
   ...HOOKS,
 ];

package/src/layouts/UILayout/config/components/tools.config.tsx

@@ -0,0 +1,204 @@
+/**
+ * Developer Tools Components Configuration
+ */
+
+import React from 'react';
+import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+// Sample data for demos
+const sampleJsonData = {
+  user: {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    profile: {
+      bio: "Software engineer",
+      location: "San Francisco",
+      interests: ["coding", "music", "travel"]
+    },
+    posts: [
+      { id: 1, title: "First Post", views: 120 },
+      { id: 2, title: "Second Post", views: 89 }
+    ]
+  },
+  settings: {
+    theme: "dark",
+    notifications: true,
+    language: "en"
+  }
+};
+
+const samplePythonCode = `def fibonacci(n):
+    """Calculate the nth Fibonacci number."""
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+# Example usage
+result = fibonacci(10)
+print(f"The 10th Fibonacci number is: {result}")`;
+
+const sampleMermaidChart = `graph TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]`;
+
+export const TOOLS_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'JsonTree',
+    category: 'tools',
+    description: 'Interactive JSON tree viewer with expand/collapse, search, and export functionality',
+    importPath: `import { JsonTree } from '@djangocfg/ui';`,
+    example: `<JsonTree
+  title="User Data"
+  data={{
+    user: {
+      id: 1,
+      name: "John Doe",
+      email: "john@example.com",
+      profile: {
+        bio: "Software engineer",
+        interests: ["coding", "music"]
+      }
+    }
+  }}
+  config={{
+    maxAutoExpandDepth: 2,
+    showCollectionInfo: true,
+    showExpandControls: true,
+    showActionButtons: true,
+  }}
+/>`,
+    preview: (
+      <div className="h-[500px]">
+        <JsonTree
+          title="User Data"
+          data={sampleJsonData}
+          config={{
+            maxAutoExpandDepth: 2,
+            showCollectionInfo: true,
+            showExpandControls: true,
+            showActionButtons: true,
+          }}
+        />
+      </div>
+    ),
+  },
+  {
+    name: 'PrettyCode',
+    category: 'tools',
+    description: 'Syntax-highlighted code display with automatic language detection and theme support',
+    importPath: `import { PrettyCode } from '@djangocfg/ui';`,
+    example: `// Code as string
+<PrettyCode
+  data={pythonCode}
+  language="python"
+/>
+
+// JSON object (auto-formatted)
+<PrettyCode
+  data={{ user: "John", age: 30 }}
+  language="json"
+/>
+
+// Inline code
+<PrettyCode
+  data="const x = 42;"
+  language="javascript"
+  inline
+/>`,
+    preview: (
+      <div className="space-y-4">
+        {/* Block code example */}
+        <div className="h-[300px]">
+          <PrettyCode
+            data={samplePythonCode}
+            language="python"
+          />
+        </div>
+
+        {/* Inline code example */}
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm text-muted-foreground mb-2">
+            Inline code example:
+          </p>
+          <div className="flex items-center gap-2">
+            <span className="text-sm">Run</span>
+            <PrettyCode
+              data="npm install @djangocfg/ui"
+              language="bash"
+              inline
+            />
+            <span className="text-sm">to install</span>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: 'Mermaid',
+    category: 'tools',
+    description: 'Interactive Mermaid diagram renderer with fullscreen view and theme support',
+    importPath: `import { Mermaid } from '@djangocfg/ui';`,
+    example: `<Mermaid
+  chart={\`
+    graph TD
+      A[Start] --> B{Is it?}
+      B -->|Yes| C[OK]
+      C --> D[Rethink]
+      D --> B
+      B -->|No| E[End]
+  \`}
+/>
+
+// Sequence diagram
+<Mermaid
+  chart={\`
+    sequenceDiagram
+      participant A as Alice
+      participant B as Bob
+      A->>B: Hello Bob!
+      B->>A: Hello Alice!
+  \`}
+/>
+
+// Flowchart
+<Mermaid
+  chart={\`
+    flowchart LR
+      A[Hard edge] -->|Link text| B(Round edge)
+      B --> C{Decision}
+      C -->|One| D[Result one]
+      C -->|Two| E[Result two]
+  \`}
+/>`,
+    preview: (
+      <div className="space-y-4">
+        <Mermaid chart={sampleMermaidChart} />
+
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm text-muted-foreground mb-2">
+            Supported diagram types:
+          </p>
+          <ul className="space-y-1 text-sm text-muted-foreground">
+            <li>• Flowchart / Graph</li>
+            <li>• Sequence diagram</li>
+            <li>• Class diagram</li>
+            <li>• State diagram</li>
+            <li>• Entity Relationship diagram</li>
+            <li>• User Journey</li>
+            <li>• Gantt chart</li>
+            <li>• Pie chart</li>
+            <li>• Git graph</li>
+          </ul>
+          <p className="text-xs text-muted-foreground mt-3">
+            Click on diagram to view in fullscreen mode
+          </p>
+        </div>
+      </div>
+    ),
+  },
+];