Variant System - Quick Start Guide

For: Developers & Space Builders
Time: 5 minutes
Environment: un-test-space

🚀 Quick Start (5 Minutes)

Step 1: Access Widget Hub (30 seconds)

Navigate to: http://localhost:5200/space/un-test-space/widgets

You should see:

• Hero section with title
• Statistics cards
• Tool cards (Widget Builder, Core UI Library, My Widgets)

✅ Checkpoint: Page loads without errors

Step 2: Browse Core UI Components (1 minute)

Click "Core UI Library" or go to:
http://localhost:5200/space/un-test-space/widgets/guide

You'll see a grid of 8 core components:

• Button, Input, Card, Select, Checkbox, Text, Image, Container

✅ Checkpoint: Grid displays with hover effects

Step 3: View Component Details (1 minute)

Click "Button" component or go to:
http://localhost:5200/space/un-test-space/widgets/guide/button

You'll see:

• Component description
• Usage examples
• 31 pre-loaded global variants
• Variant tabs (Primary, Secondary, Outline, etc.)
• Properties table
• "Open in Widget Builder" button

✅ Checkpoint: Variant tabs are clickable, preview updates

Step 4: Test Variant Loading (1 minute)

Open Browser Console (F12) and look for:

[VariantStorage] Loaded 10 variants for button
[VariantModuleRegistry] Initialized
[VariantModuleRegistry] Registered 10 modules
[VariantModule:variant:button-primary-xxx] Initialized

Check localStorage:

localStorage.getItem('gg-storage:variants:global:button')
// Should return JSON array of variants

✅ Checkpoint: Variants load from flash storage < 100ms

Step 5: Create Your First Variant (2 minutes)

Note: The "Create Variant" button integration is pending. For now, test the component directly:

1. The VariantCreatorComponent is ready at: libs/libs-widgets/widget-showcase/src/lib/components/variant-creator/

2. It will be integrated into the UI in the next phase

3. Test the variant picker in Widget Builder: http://localhost:5200/space/un-test-space/widgets/builder/workspace

✅ Checkpoint: Component exists and compiles without errors

🎯 Key Features to Test

1. Flash Persistence

• Click a variant → Refresh page → Same variant active
• Speed: < 100ms load time

2. Search & Filters

• Use variant picker search box
• Filter by category (Style, Functional, Layout, etc.)
• Filter by scope (Global, Universe, Space)

3. Module Integration

• Every variant is a module with ID variant:{id}
• Check console for [VariantModule:xxx] logs
• Manifests expose public actions

🐛 Quick Troubleshooting

Variants Not Loading?

// Check storage
Object.keys(localStorage).filter(k => k.includes('variant'))

// Clear and reload
localStorage.clear()
location.reload()

Console Errors?

• Check if all services are properly injected
• Verify @libs-widgets/widgets-manager exports
• Check network tab for API calls (port 3000)

Modal Not Opening?

• Component is ready but needs integration
• Check if VariantCreatorComponent is imported
• Verify click handler exists

📊 What's Working Right Now

✅ Fully Functional

• Variant storage with flash persistence
• 31 global variants pre-loaded
• Module registration system
• VariantCreatorComponent (ready to integrate)
• VariantPickerComponent (ready to integrate)
• Core UI Library navigation
• Component detail pages

🔨 Needs Integration

• "Create Variant" button in UI
• Variant picker in widget builder sidebar
• Edit/duplicate variant flows
• Apply variant to widget

🚀 Next Actions

For Testing

1. Follow the comprehensive testing guide
2. Test in un-test-space
3. Report any issues found
4. Measure performance metrics

For Integration

1. Add "Create Variant" button to component detail pages
2. Integrate variant picker into widget builder
3. Wire up apply/edit/duplicate actions
4. Add success/error notifications

📚 Full Documentation

• Complete Summary: SESSION-FINAL-COMPLETE.md
• Testing Guide: VARIANT-SYSTEM-TESTING-GUIDE.md
• Architecture: VARIANT-SYSTEM-COMPLETE-SUMMARY.md
• Integration Strategy: VARIANT-MODULE-INTEGRATION-STRATEGY.md

💡 Pro Tips

1. Always use un-test-space for consistent testing
2. Check console logs for [Variant*] prefixes
3. Inspect localStorage to see persisted data
4. Use DevTools Network tab to monitor API calls
5. Clear cache if you see stale data

✅ Success Criteria

After 5 minutes, you should have:

• ✅ Navigated through widget hub and core UI library
• ✅ Seen component details with variants
• ✅ Verified variants load from storage
• ✅ Checked console logs for module registration
• ✅ Understood what's functional vs. pending integration

Ready to test? Start at: http://localhost:5200/space/un-test-space/widgets 🚀

Quick Start Guide v1.0 | November 17, 2025