mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-03-08 01:53:30 +01:00

Files

Richard Osborne 64e565f00f test(styles): STYLE-005 StyleAnalyzer unit tests (17 cases)

Covers: hex/rgb color detection, spacing detection, variant candidate
threshold logic, toSuggestions ordering, stable IDs, edge cases.

Infra note: tests in tests/models/ — use 'npm run test:editor' not
'npx jest' directly (webpack build required by test-editor.ts script).
'npx jest' alone hangs on webpack. Move tests to tests/models/ not
tests/services/ — transform config only covers models/ path.

2026-02-18 17:14:52 +01:00

3.8 KiB

Raw Blame History

Phase 9: Styles Overhaul — Richard's Progress

Branch: cline-dev-richard

Sprint 1 — 18 Feb 2026

STYLE-005: Smart Style Suggestion Engine ✅ (committed `05379c9`)

Files created:

packages/noodl-editor/src/editor/src/services/StyleAnalyzer/types.ts — TypeScript interfaces: ElementReference, RepeatedValue, VariantCandidate, StyleAnalysisResult, StyleSuggestion, StyleAnalysisOptions, TokenModelLike, SUGGESTION_THRESHOLDS
packages/noodl-editor/src/editor/src/services/StyleAnalyzer/StyleAnalyzer.ts — Static analyzer class:
- analyzeProject(options?) — scans all visual nodes for repeated raw colors/spacing (threshold: 3) and variant candidates (threshold: 3 overrides)
- analyzeNode(nodeId) — per-node analysis for property panel integration
- toSuggestions(result) — converts analysis to ordered StyleSuggestion[]
- TokenModelLike injected via options to avoid static singleton coupling
packages/noodl-editor/src/editor/src/services/StyleAnalyzer/SuggestionActionHandler.ts — executeSuggestionAction():
- repeated-color/spacing → calls tokenModel.setToken() + replaces all occurrences with var(--token-name)
- variant-candidate → sets _variant param on node
packages/noodl-editor/src/editor/src/services/StyleAnalyzer/index.ts — barrel export
packages/noodl-core-ui/src/components/StyleSuggestions/SuggestionBanner.tsx — Compact banner UI (accept / ignore / never-show)
packages/noodl-core-ui/src/components/StyleSuggestions/SuggestionBanner.module.scss — Styled with CSS tokens only
packages/noodl-core-ui/src/components/StyleSuggestions/index.ts — barrel export
packages/noodl-editor/src/editor/src/hooks/useStyleSuggestions.ts — Hook: runs analyzer on mount, exposes activeSuggestion, pendingCount, dismissSession, dismissPermanent, refresh

Pending (next session):

Unit tests for StyleAnalyzer (value detection, threshold logic, toSuggestions ordering)
Wire SuggestionBanner into ElementStyleSection / property panel
Consider debounced auto-refresh on componentAdded/nodeParametersChanged events

Previously Completed (before Sprint 1)

STYLE-001: Token System Enhancement ✅

StyleTokensModel — CRUD for design tokens
TokenResolver — resolves CSS var references
DEFAULT_TOKENS — baseline token set
TOKEN_CATEGORIES / TOKEN_CATEGORY_GROUPS — category definitions

STYLE-002: Element Configs ✅

ElementConfigRegistry — maps node types to ElementConfig
ButtonConfig, GroupConfig, TextConfig, TextInputConfig, CheckboxConfig
VariantSelector component

STYLE-003: Style Presets ✅

StylePresetsModel — manages presets
5 presets: Modern, Minimal, Playful, Enterprise, Soft
PresetCard, PresetSelector UI components

STYLE-004: Property Panel Integration ✅

ElementStyleSection — groups style props with token picker
SizePicker — visual size selector
TokenPicker — token autocomplete input
Property panel HTML + TS wired up

Outstanding Issues

Issue	Status
`StyleTokensModel.setToken()` — verify method name matches actual API	⚠️ Needs verification before action handler is used
`node.setParameter()` / `node.getParameter()` — verify these are valid NodeGraphNode methods	⚠️ Needs verification
StyleAnalyzer unit tests	📋 Planned

3.8 KiB Raw Blame History