Skip to main content

🛡️ Schema System Demo

Distributed component-owned schema validation with automatic registration and comprehensive error handling. Each component owns its schema for better maintainability and isolation.

📊 Schema System Overview

🔧 System Status

  • ✅ Registered Schemas: 0
  • ✅ Architecture: Distributed component-owned
  • ✅ Validation Library: Zod with TypeScript
  • ✅ Auto-Registration: Global schema registry

🎯 Active Schemas

    🧪 Interactive Schema Testing

    🎨 Theme System

    Validates theme configuration and CSS file references

    Component: ThemeSwitcher

    Test Validation:

    🏗️ Distributed Architecture

    📁 Component-Owned Schemas

    Each component owns its validation schema:

    src/components/
├── ThemeSwitcher/
│   ├── index.tsx
│   └── schema.ts    ← Component schema
├── Projects/
│   ├── index.tsx
│   └── schema.ts    ← Component schema
└── .../

    Benefits:

    • ✅ Component isolation
    • ✅ Better maintainability
    • ✅ Easier testing
    • ✅ Clear ownership

    🌐 Global Registry

    Automatic schema registration and management:

    // src/schemas/index.ts
import { validateData } from './index';

// Auto-imports all schemas
const isValid = validateData(
  'themes', 
  themesData
);

    Features:

    • ✅ Auto-registration
    • ✅ Centralized validation
    • ✅ Error handling
    • ✅ TypeScript integration

    💻 Implementation Examples

    Creating a Component Schema

    // src/components/YourComponent/schema.ts
import { z } from 'zod';

export const componentSchema = z.object({
  title: z.string(),
  items: z.array(z.object({
    id: z.string(),
    name: z.string(),
    optional: z.string().optional()
  })),
  settings: z.object({
    enabled: z.boolean(),
    maxItems: z.number().min(1).max(100)
  })
});

export const schemaKey = 'yourComponent';

    Using Schema Validation

    // In your component
import { validateData } from '@site/src/schemas';

export default function YourComponent(props) {
  // Validate component data
  const isValid = validateData('yourComponent', props.data);
  
  if (!isValid) {
    return React.createElement('div', null, 'Invalid configuration');
  }
  
  return React.createElement('div', null, 'Valid component content');
}

    🎯 System Benefits

    🔧 Development

    • Type-safe validation
    • Better error messages
    • Automatic IntelliSense
    • Catch errors early

    🏗️ Architecture

    • Distributed ownership
    • Modular validation
    • Easy maintenance
    • Clear boundaries

    🚀 Production

    • Runtime validation
    • Graceful degradation
    • Error reporting
    • Configuration safety

    🔗 Related Resources

    Learn more about the schema system and validation architecture:

    📖 Schema System Docs🧩 Components System📋 Migration Guide