mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 10:03:31 +01:00
67 lines
3.1 KiB
Markdown
67 lines
3.1 KiB
Markdown
# STYLE-003: Style Presets — CHANGELOG
|
||
|
||
## 2026-02-18 — Implementation Complete
|
||
|
||
### New files created
|
||
|
||
**Data layer (noodl-editor)**
|
||
|
||
- `models/StylePresets/StylePresetTypes.ts` — `StylePreset` and `PresetPreview` interfaces
|
||
- `models/StylePresets/presets/ModernPreset.ts` — Default (clean blue, 8px radius, soft shadows)
|
||
- `models/StylePresets/presets/MinimalPreset.ts` — Monochromatic, 2–4px radius, no shadows
|
||
- `models/StylePresets/presets/PlayfulPreset.ts` — Purple/pink, very rounded (16px), tinted shadows
|
||
- `models/StylePresets/presets/EnterprisePreset.ts` — Dark navy, conservative 4px radius, barely-there shadows
|
||
- `models/StylePresets/presets/SoftPreset.ts` — Indigo, 12px radius, ultra-light shadows
|
||
- `models/StylePresets/presets/index.ts` — barrel
|
||
- `models/StylePresets/StylePresetsModel.ts` — `getAllPresets`, `getPreset`, `getDefaultPreset`, `setPendingPresetId`, `consumePendingPreset`
|
||
- `models/StylePresets/index.ts` — public surface
|
||
|
||
**UI layer (noodl-core-ui)**
|
||
|
||
- `components/StylePresets/PresetCard.tsx` — Mini mockup card with primary swatch, text lines, surface strip
|
||
- `components/StylePresets/PresetCard.module.scss` — Card styles with selection ring
|
||
- `components/StylePresets/PresetSelector.tsx` — Horizontal grid + description below selected
|
||
- `components/StylePresets/PresetSelector.module.scss`
|
||
- `components/StylePresets/index.ts` — barrel
|
||
|
||
### Modified files
|
||
|
||
**`models/StyleTokensModel/StyleTokensModel.ts`**
|
||
|
||
- Added `applyPreset(tokens)` public method — bulk-sets tokens without undo
|
||
- Added `_applyAndClearPendingPreset()` private method — called from `_bindListeners` reload path
|
||
- Added `consumePendingPreset` import and call in the `reload` closure
|
||
|
||
**`preview/launcher/Launcher/components/CreateProjectModal/CreateProjectModal.tsx`**
|
||
|
||
- Added `presets?: PresetDisplayInfo[]` prop
|
||
- Added `selectedPresetId` local state (default `'modern'`)
|
||
- Renders `<PresetSelector>` when presets provided
|
||
- Extended `onConfirm` signature to include `presetId: string`
|
||
|
||
**`pages/ProjectsPage/ProjectsPage.tsx`**
|
||
|
||
- Added `getAllPresets`, `setPendingPresetId` imports
|
||
- Added `STYLE_PRESETS` module-level constant
|
||
- Updated `handleCreateProjectConfirm(name, location, presetId)` to call `setPendingPresetId(presetId)`
|
||
- Passes `presets={STYLE_PRESETS}` to `<CreateProjectModal>`
|
||
- Error path clears pending preset via `setPendingPresetId(null)`
|
||
|
||
### Architecture — pending preset flow
|
||
|
||
```
|
||
User picks preset → CreateProjectModal.onConfirm(name, loc, presetId)
|
||
→ ProjectsPage.handleCreateProjectConfirm
|
||
→ setPendingPresetId(presetId) // stored in module-level var
|
||
→ LocalProjectsModel.newProject(...)
|
||
→ route to editor
|
||
→ StyleTokensModel._bindListeners reload fires (ProjectModel.instanceHasChanged)
|
||
→ _applyAndClearPendingPreset()
|
||
→ consumePendingPreset() reads + clears _pendingPresetId
|
||
→ applyPreset(preset.tokens)
|
||
→ setToken() x N → _store() → ProjectModel.instance.setMetaData('designTokens', ...)
|
||
→ tokens persisted to project.json
|
||
```
|
||
|
||
Modern preset has `tokens: {}` so it is a no-op (defaults already apply).
|