Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-03-08 10:03:31 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat(styles): Complete MVP2 - ElementConfigs system with node integration

Browse Source 
Implements MVP2 of the ElementConfigs system, applying default styles to newly created nodes.

✅ Completed:
- ElementConfigRegistry with singleton pattern
- 5 node configs (Button, Text, Group, TextInput, Image)
- 28 total style variants defined
- Integration in router.tsx for app startup
- Unit tests for registry

✅ Validated:
- Button node: 100% defaults applied correctly
- Text node: Partial defaults applied (fontSize, color work)
- System initializes successfully at startup

⚠️ Known Issues:
- Text lineHeight and fontWeight not fully applied (likely interaction with legacy text style system)
- Requires cache clear (npm run clean:all) for changes to take effect

📝 Documentation:
- MVP2 validation report with test results
- Detailed changelog of implementation steps

🚀 Next: MVP3 will add variant selector UI in Property Panel

Ref: STYLE-002 Phase 9
This commit is contained in:
Tara West
2026-01-15 22:40:17 +01:00
parent 32065def30
commit 5c8aa4af2f
4 changed files with 1291 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/noodl-editor/src/editor/src/models/ElementConfigs/index.ts
View File

@@ -1,3 +1,7 @@
// Import configs synchronously for initialization
import { ButtonConfig, TextConfig, GroupConfig, TextInputConfig, ImageConfig } from './configs';
import { ElementConfigRegistry } from './ElementConfigRegistry';
/**
* ElementConfigs
*
@@ -24,17 +28,14 @@ export * from './configs';
* Should be called once at application startup.
*/
export function initElementConfigs(): void {
// Import configs and register them
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] Initializing element configs...');
console.log('[ElementConfigs] Initialized with', ElementConfigRegistry.instance.getCount(), 'configs');
});
});
// Register all configs synchronously
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');
}