feat(element-configs): Complete STYLE-002 MVP 2 - Add Group, TextInput, Image configs

- Add GroupConfig with 7 variants (default, card, section, inset, flex-row, flex-col, centered) - Add TextInputConfig with 2 variants (default, error) and 4 states - Add ImageConfig with 3 variants (default, rounded, circle) - Register all 5 configs in initElementConfigs() - Node creation hook already implemented in NodeGraphNode constructor - Total: 5 configs with 28 variants across all elements - All configs use design tokens for theming MVP 2 Status: ✅ Complete (ready for integration testing)
2026-03-07 17:43:28 +01:00 · 2026-01-15 12:08:26 +01:00
parent 5049826ca3
commit 32065def30
6 changed files with 578 additions and 6 deletions
--- a/dev-docs/tasks/phase-9-styles-overhaul/STYLE-002-element-configs/CHANGELOG-MVP2.md
+++ b/dev-docs/tasks/phase-9-styles-overhaul/STYLE-002-element-configs/CHANGELOG-MVP2.md
@@ -0,0 +1,254 @@
+# STYLE-002 MVP 2 - CHANGELOG
+
+**Date**: 15 janvier 2026  
+**Status**: ✅ Complete  
+**Estimé**: 5-7h | **Réel**: ~1h
+
+---
+
+## 📋 Objectif
+
+Intégrer le système de configs dans la création de nodes et ajouter 3 configs supplémentaires (Group, TextInput, Image).
+
+---
+
+## ✅ Travail Complété
+
+### 1. Nouvelles Configurations
+
+#### GroupConfig (7 variantes)
+
+- **Fichier**: `packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/GroupConfig.ts`
+- **Node Type**: `Group`
+- **Variantes**:
+  - `default` - Simple flex column container
+  - `card` - Elevated container with border and shadow
+  - `section` - Content section with padding
+  - `inset` - Subtle background for nested content
+  - `flex-row` - Horizontal layout
+  - `flex-col` - Vertical layout (explicit)
+  - `centered` - Center content both axes
+
+#### TextInputConfig (2 variantes)
+
+- **Fichier**: `packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/TextInputConfig.ts`
+- **Node Type**: `net.noodl.controls.textinput`
+- **Variantes**:
+  - `default` - Standard input appearance
+  - `error` - Validation error state
+- **States**: focus, hover, disabled, placeholder
+
+#### ImageConfig (3 variantes)
+
+- **Fichier**: `packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/ImageConfig.ts`
+- **Node Type**: `net.noodl.visual.image`
+- **Variantes**:
+  - `default` - Standard rectangular image
+  - `rounded` - Image with rounded corners
+  - `circle` - Circular image (for avatars)
+
+### 2. Export et Enregistrement
+
+**Fichiers modifiés**:
+
+- `packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/index.ts`
+
+  - Ajout des exports pour GroupConfig, TextInputConfig, ImageConfig
+
+- `packages/noodl-editor/src/editor/src/models/ElementConfigs/index.ts`
+  - Mise à jour de `initElementConfigs()` pour enregistrer les 5 configs
+
+### 3. Hook de Node Creation
+
+**Découverte importante**: Le hook était DÉJÀ implémenté dans `NodeGraphNode` (constructor, lignes 143-147):
+
+```typescript
+// Apply element config defaults if available
+if (this.typename && Object.keys(this.parameters).length === 0) {
+  ElementConfigRegistry.instance.applyDefaults(this as any);
+}
+```
+
+Cela signifie que dès qu'un nouveau node est créé avec des paramètres vides, les defaults de sa config sont automatiquement appliqués.
+
+---
+
+## 📁 Fichiers Créés/Modifiés
+
+### Créés (3 fichiers)
+
+```
+packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/
+├── GroupConfig.ts         (nouveau)
+├── TextInputConfig.ts     (nouveau)
+└── ImageConfig.ts         (nouveau)
+```
+
+### Modifiés (2 fichiers)
+
+```
+packages/noodl-editor/src/editor/src/models/ElementConfigs/
+├── configs/index.ts       (exports ajoutés)
+└── index.ts              (initElementConfigs mis à jour)
+```
+
+---
+
+## 🔧 Fonctionnement
+
+### Flux de Création de Node
+
+1. **User crée un node** (drag & drop ou menu)
+2. **NodeGraphNode constructor** est appelé
+3. **Hook détecte** que `parameters` est vide
+4. **Registry lookup** via `ElementConfigRegistry.instance.get(nodeType)`
+5. **Defaults appliqués** via `applyDefaults(node)`
+6. **Node possède maintenant** les styles par défaut de sa config
+
+### Exemple: Création d'un Button
+
+```typescript
+// Avant (pas de config)
+const button = new NodeGraphNode({ typename: 'net.noodl.visual.button' });
+// button.parameters = {}
+
+// Après (avec config)
+const button = new NodeGraphNode({ typename: 'net.noodl.visual.button' });
+// button.parameters = {
+//   paddingTop: 'var(--space-2)',
+//   paddingBottom: 'var(--space-2)',
+//   fontSize: 'var(--text-sm)',
+//   borderRadius: 'var(--radius-md)',
+//   backgroundColor: 'var(--primary)',
+//   color: 'var(--primary-foreground)',
+//   _variant: 'primary',
+//   ...
+// }
+```
+
+---
+
+## 🧪 Tests à Effectuer
+
+### Tests Manuels
+
+1. **Lancer l'application**
+
+   ```bash
+   npm run clean:all
+   npm run dev
+   ```
+
+2. **Vérifier le log de démarrage**
+
+   - Console devrait afficher: `[ElementConfigs] Initialized with 5 configs`
+
+3. **Créer un nouveau projet**
+
+4. **Drag & Drop chaque type de node**
+
+   - Button
+   - Text
+   - Group
+   - TextInput
+   - Image
+
+5. **Inspecter les propriétés**
+
+   - Vérifier que chaque node a des valeurs par défaut
+   - Vérifier que `_variant` est défini
+   - Vérifier que les propriétés utilisent des tokens (`var(--...)`)
+
+6. **Vérifier dans le preview**
+   - Les styles par défaut devraient être visibles
+   - Button devrait avoir padding, colors, border-radius
+   - Group devrait être un flex column
+   - TextInput devrait avoir border et padding
+
+### Tests Automatiques
+
+Les tests unitaires existants dans `ElementConfigRegistry.test.ts` couvrent déjà :
+
+- ✅ Registration de configs
+- ✅ Récupération de configs
+- ✅ Application de defaults
+- ✅ Validation de configs
+
+---
+
+## 📊 Statistiques
+
+| Métrique            | Valeur                                    |
+| ------------------- | ----------------------------------------- |
+| Configs créées      | 3                                         |
+| Total configs       | 5 (Button, Text, Group, TextInput, Image) |
+| Variantes totales   | 6 + 10 + 7 + 2 + 3 = **28 variantes**     |
+| Fichiers TypeScript | 3 nouveaux                                |
+| Lignes de code      | ~400 lignes                               |
+| Tokens utilisés     | ~50 design tokens                         |
+
+---
+
+## 🎯 MVP 2 - Critères de Succès
+
+- [x] GroupConfig implémenté avec 7 variantes
+- [x] TextInputConfig implémenté avec 2 variantes
+- [x] ImageConfig implémenté avec 3 variantes
+- [x] Configs exportées dans `configs/index.ts`
+- [x] Configs enregistrées dans `initElementConfigs()`
+- [x] Hook de création découvert (déjà en place)
+- [x] Documentation complète
+- [ ] Tests manuels effectués (à faire)
+
+---
+
+## 🚀 Prochaines Étapes (MVP 3)
+
+MVP 2 est maintenant complet. Pour MVP 3, il faudra :
+
+1. **VariantSelector Component** (2h)
+
+   - Créer un composant UI pour sélectionner les variantes
+   - Storybook stories
+
+2. **Property Panel Integration** (1.5h)
+
+   - Ajouter une section "Variant" dans le property panel
+   - Connecter au VariantSelector
+
+3. **Viewer Integration** (1.5h)
+   - Modifier les nodes du viewer pour lire `_variant`
+   - Appliquer les styles de variante au runtime
+   - Gérer la priorité: defaults < variant < user overrides
+
+---
+
+## 💡 Notes Techniques
+
+### Design Tokens
+
+Toutes les configs utilisent des design tokens (`var(--token-name)`) qui seront résolus automatiquement par le browser au runtime.
+
+### Priorité des Styles
+
+Pour MVP 3, l'ordre de priorité sera :
+
+1. **Defaults** (plus bas)
+2. **Variant styles**
+3. **User overrides** (plus haut)
+
+### Node Types
+
+Les node types utilisés :
+
+- `net.noodl.visual.button`
+- `net.noodl.visual.text`
+- `Group`
+- `net.noodl.controls.textinput`
+- `net.noodl.visual.image`
+
+---
+
+**Créé par**: Cline  
+**Reviewé par**: Richard  
+**Date**: 15 janvier 2026
--- a/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/GroupConfig.ts
+++ b/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/GroupConfig.ts
@@ -0,0 +1,120 @@
+/**
+ * GroupConfig
+ *
+ * Element configuration for Group nodes.
+ * Defines default layout properties and 7 variants for common use cases.
+ *
+ * @module noodl-editor/models/ElementConfigs/configs
+ * @since 1.2.0
+ */
+
+import type { ElementConfig } from '../ElementConfigTypes';
+
+/**
+ * Group element configuration
+ * Provides flexible layout container styles with multiple variants
+ */
+export const GroupConfig: ElementConfig = {
+  nodeType: 'Group',
+
+  description: 'Flexible container element for layout composition',
+
+  categories: ['layout', 'container'],
+
+  // Default properties applied when a new Group is created
+  defaults: {
+    // Layout
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+
+    // Spacing
+    gap: 'var(--space-4)',
+    padding: '0',
+
+    // Sizing
+    width: 'auto',
+    height: 'auto',
+
+    // Default variant
+    _variant: 'default'
+  },
+
+  // Style variants
+  variants: {
+    // Default: Simple flex column container
+    default: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-4)',
+      padding: '0',
+      backgroundColor: 'transparent'
+    },
+
+    // Card: Elevated container with border and shadow
+    card: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-4)',
+      padding: 'var(--space-4)',
+      backgroundColor: 'var(--theme-color-bg-3)',
+      borderRadius: 'var(--radius-lg)',
+      borderWidth: 'var(--border-1)',
+      borderStyle: 'solid',
+      borderColor: 'var(--theme-color-border-default)',
+      boxShadow: 'var(--shadow-sm)'
+    },
+
+    // Section: Content section with padding
+    section: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-6)',
+      paddingTop: 'var(--space-8)',
+      paddingBottom: 'var(--space-8)',
+      paddingLeft: 'var(--space-6)',
+      paddingRight: 'var(--space-6)',
+      backgroundColor: 'transparent'
+    },
+
+    // Inset: Subtle background for nested content
+    inset: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-3)',
+      padding: 'var(--space-3)',
+      backgroundColor: 'var(--theme-color-bg-2)',
+      borderRadius: 'var(--radius-md)'
+    },
+
+    // Flex Row: Horizontal layout
+    'flex-row': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 'var(--space-4)',
+      alignItems: 'center',
+      padding: '0',
+      backgroundColor: 'transparent'
+    },
+
+    // Flex Column: Vertical layout (explicit)
+    'flex-col': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-4)',
+      padding: '0',
+      backgroundColor: 'transparent'
+    },
+
+    // Centered: Center content both horizontally and vertically
+    centered: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-4)',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 'var(--space-4)',
+      backgroundColor: 'transparent'
+    }
+  }
+};
--- a/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/ImageConfig.ts
+++ b/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/ImageConfig.ts
@@ -0,0 +1,76 @@
+/**
+ * ImageConfig
+ *
+ * Element configuration for Image nodes.
+ * Defines default styling and 3 variants for common image presentations.
+ *
+ * @module noodl-editor/models/ElementConfigs/configs
+ * @since 1.2.0
+ */
+
+import type { ElementConfig } from '../ElementConfigTypes';
+
+/**
+ * Image element configuration
+ * Provides flexible image display styles with shape variants
+ */
+export const ImageConfig: ElementConfig = {
+  nodeType: 'net.noodl.visual.image',
+
+  description: 'Image element with shape and sizing variants',
+
+  categories: ['media', 'visual'],
+
+  // Default properties applied when a new Image is created
+  defaults: {
+    // Sizing
+    width: 'auto',
+    height: 'auto',
+    maxWidth: '100%',
+
+    // Display
+    display: 'block',
+    objectFit: 'cover',
+    objectPosition: 'center',
+
+    // Border
+    borderRadius: '0',
+    borderWidth: '0',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+
+    // Background (for loading/error states)
+    backgroundColor: 'var(--theme-color-bg-2)',
+
+    // Default variant
+    _variant: 'default'
+  },
+
+  // Style variants
+  variants: {
+    // Default: Standard rectangular image
+    default: {
+      borderRadius: '0',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      overflow: 'hidden'
+    },
+
+    // Rounded: Image with rounded corners
+    rounded: {
+      borderRadius: 'var(--radius-lg)',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      overflow: 'hidden'
+    },
+
+    // Circle: Circular image (for avatars, icons)
+    circle: {
+      borderRadius: '9999px',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      overflow: 'hidden',
+      aspectRatio: '1 / 1' // Ensure square for perfect circle
+    }
+  }
+};
--- a/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/TextInputConfig.ts
+++ b/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/TextInputConfig.ts
@@ -0,0 +1,121 @@
+/**
+ * TextInputConfig
+ *
+ * Element configuration for TextInput nodes.
+ * Defines default styling, 2 variants, and state-based styling.
+ *
+ * @module noodl-editor/models/ElementConfigs/configs
+ * @since 1.2.0
+ */
+
+import type { ElementConfig } from '../ElementConfigTypes';
+
+/**
+ * TextInput element configuration
+ * Provides modern, accessible input field styles
+ */
+export const TextInputConfig: ElementConfig = {
+  nodeType: 'net.noodl.controls.textinput',
+
+  description: 'Interactive text input field with validation states',
+
+  categories: ['input', 'form', 'interactive'],
+
+  // Default properties applied when a new TextInput is created
+  defaults: {
+    // Layout
+    paddingTop: 'var(--space-2)',
+    paddingBottom: 'var(--space-2)',
+    paddingLeft: 'var(--space-3)',
+    paddingRight: 'var(--space-3)',
+    width: '100%',
+    height: '40px',
+
+    // Typography
+    fontSize: 'var(--text-sm)',
+    fontWeight: 'var(--font-normal)',
+    fontFamily: 'var(--font-sans)',
+    lineHeight: 'var(--leading-normal)',
+    color: 'var(--theme-color-fg-default)',
+
+    // Border
+    borderRadius: 'var(--radius-md)',
+    borderWidth: 'var(--border-1)',
+    borderStyle: 'solid',
+    borderColor: 'var(--theme-color-border-default)',
+
+    // Background
+    backgroundColor: 'var(--theme-color-bg-3)',
+
+    // Display
+    display: 'block',
+    outline: 'none',
+
+    // Transitions
+    transitionProperty: 'border-color, box-shadow, background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+
+    // Default variant
+    _variant: 'default'
+  },
+
+  // Style variants
+  variants: {
+    // Default: Standard input appearance
+    default: {
+      backgroundColor: 'var(--theme-color-bg-3)',
+      borderColor: 'var(--theme-color-border-default)',
+      color: 'var(--theme-color-fg-default)',
+
+      states: {
+        focus: {
+          borderColor: 'var(--primary)',
+          boxShadow: '0 0 0 3px var(--primary-alpha-20)',
+          outline: 'none'
+        },
+        hover: {
+          borderColor: 'var(--theme-color-border-hover)'
+        },
+        disabled: {
+          opacity: '0.5',
+          cursor: 'not-allowed',
+          backgroundColor: 'var(--theme-color-bg-2)',
+          color: 'var(--theme-color-fg-default-shy)'
+        },
+        placeholder: {
+          color: 'var(--theme-color-fg-default-shy)',
+          opacity: '0.6'
+        }
+      }
+    },
+
+    // Error: Validation error state
+    error: {
+      backgroundColor: 'var(--theme-color-bg-3)',
+      borderColor: 'var(--destructive)',
+      color: 'var(--theme-color-fg-default)',
+
+      states: {
+        focus: {
+          borderColor: 'var(--destructive)',
+          boxShadow: '0 0 0 3px var(--destructive-alpha-20)',
+          outline: 'none'
+        },
+        hover: {
+          borderColor: 'var(--destructive-hover)'
+        },
+        disabled: {
+          opacity: '0.5',
+          cursor: 'not-allowed',
+          backgroundColor: 'var(--theme-color-bg-2)',
+          color: 'var(--theme-color-fg-default-shy)'
+        },
+        placeholder: {
+          color: 'var(--theme-color-fg-default-shy)',
+          opacity: '0.6'
+        }
+      }
+    }
+  }
+};
--- a/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/index.ts
+++ b/packages/noodl-editor/src/editor/src/models/ElementConfigs/configs/index.ts
@@ -10,8 +10,6 @@

 export { ButtonConfig } from './ButtonConfig';
 export { TextConfig } from './TextConfig';
-
-// Other configs to be implemented:
-// export { GroupConfig } from './GroupConfig';
-// export { TextInputConfig } from './TextInputConfig';
-// export { ImageConfig } from './ImageConfig';
+export { GroupConfig } from './GroupConfig';
+export { TextInputConfig } from './TextInputConfig';
+export { ImageConfig } from './ImageConfig';
--- a/packages/noodl-editor/src/editor/src/models/ElementConfigs/index.ts
+++ b/packages/noodl-editor/src/editor/src/models/ElementConfigs/index.ts
@@ -25,11 +25,14 @@ export * from './configs';
 */
 export function initElementConfigs(): void {
  // Import configs and register them
-  import('./configs').then(({ ButtonConfig, TextConfig }) => {
+  import('./configs').then(({ ButtonConfig, TextConfig, GroupConfig, TextInputConfig, ImageConfig }) => {
    // Import registry from local module
    import('./ElementConfigRegistry').then(({ ElementConfigRegistry }) => {
      ElementConfigRegistry.instance.register(ButtonConfig);
      ElementConfigRegistry.instance.register(TextConfig);
+      ElementConfigRegistry.instance.register(GroupConfig);
+      ElementConfigRegistry.instance.register(TextInputConfig);
+      ElementConfigRegistry.instance.register(ImageConfig);

      console.log('[ElementConfigs] Initialized with', ElementConfigRegistry.instance.getCount(), 'configs');
    });