From c1ac9b5bc4781a8ad45bfbf343af7a8927d463d4 Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Thu, 16 Apr 2026 08:22:08 +0300 Subject: [PATCH] chore(SetupFont): rename controlManager to typographySettingsStore for better semantic --- src/features/SetupFont/lib/index.ts | 6 +- .../settingsManager.svelte.ts} | 6 +- .../settingsManager.test.ts} | 90 +++++++++---------- src/features/SetupFont/model/index.ts | 4 +- .../SetupFont/model/state/manager.svelte.ts | 6 -- .../model/state/typographySettingsStore.ts | 8 ++ .../ui/TypographyMenu/TypographyMenu.svelte | 15 ++-- 7 files changed, 68 insertions(+), 67 deletions(-) rename src/features/SetupFont/lib/{controlManager/controlManager.svelte.ts => settingsManager/settingsManager.svelte.ts} (98%) rename src/features/SetupFont/lib/{controlManager/controlManager.test.ts => settingsManager/settingsManager.test.ts} (89%) delete mode 100644 src/features/SetupFont/model/state/manager.svelte.ts create mode 100644 src/features/SetupFont/model/state/typographySettingsStore.ts diff --git a/src/features/SetupFont/lib/index.ts b/src/features/SetupFont/lib/index.ts index 223fdba..a05ed6e 100644 --- a/src/features/SetupFont/lib/index.ts +++ b/src/features/SetupFont/lib/index.ts @@ -1,4 +1,4 @@ export { - createTypographyControlManager, - type TypographyControlManager, -} from './controlManager/controlManager.svelte'; + createTypographySettingsManager, + type TypographySettingsManager, +} from './settingsManager/settingsManager.svelte'; diff --git a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts b/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts similarity index 98% rename from src/features/SetupFont/lib/controlManager/controlManager.svelte.ts rename to src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts index 39b0315..a3c9414 100644 --- a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts +++ b/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts @@ -52,7 +52,7 @@ export interface TypographySettings { * Manages multiple typography controls with persistent storage and * responsive scaling support for font size. */ -export class TypographyControlManager { +export class TypographySettingsManager { /** Map of controls keyed by ID */ #controls = new SvelteMap(); /** Responsive multiplier for font size display */ @@ -242,7 +242,7 @@ export class TypographyControlManager { * @param storageId - Persistent storage identifier * @returns Typography control manager instance */ -export function createTypographyControlManager( +export function createTypographySettingsManager( configs: ControlModel[], storageId: string = 'glyphdiff:typography', ) { @@ -252,5 +252,5 @@ export function createTypographyControlManager( lineHeight: DEFAULT_LINE_HEIGHT, letterSpacing: DEFAULT_LETTER_SPACING, }); - return new TypographyControlManager(configs, storage); + return new TypographySettingsManager(configs, storage); } diff --git a/src/features/SetupFont/lib/controlManager/controlManager.test.ts b/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts similarity index 89% rename from src/features/SetupFont/lib/controlManager/controlManager.test.ts rename to src/features/SetupFont/lib/settingsManager/settingsManager.test.ts index 7e73e49..a50cdb7 100644 --- a/src/features/SetupFont/lib/controlManager/controlManager.test.ts +++ b/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts @@ -15,14 +15,14 @@ import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA, } from '../../model'; import { - TypographyControlManager, type TypographySettings, -} from './controlManager.svelte'; + TypographySettingsManager, +} from './settingsManager.svelte'; /** - * Test Strategy for TypographyControlManager + * Test Strategy for TypographySettingsManager * - * This test suite validates the TypographyControlManager state management logic. + * This test suite validates the TypographySettingsManager state management logic. * These are unit tests for the manager logic, separate from component rendering. * * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects @@ -45,7 +45,7 @@ async function flushEffects() { await Promise.resolve(); } -describe('TypographyControlManager - Unit Tests', () => { +describe('TypographySettingsManager - Unit Tests', () => { let mockStorage: TypographySettings; let mockPersistentStore: { value: TypographySettings; @@ -85,7 +85,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Initialization', () => { it('creates manager with default values from storage', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -105,7 +105,7 @@ describe('TypographyControlManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -117,7 +117,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('initializes font size control with base size multiplied by current multiplier (1)', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -126,7 +126,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('returns all controls via controls getter', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -142,7 +142,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('returns individual controls via specific getters', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -160,7 +160,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('control instances have expected interface', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -179,7 +179,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Multiplier System', () => { it('has default multiplier of 1', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -188,7 +188,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates multiplier when set', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -201,7 +201,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('does not update multiplier if set to same value', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -217,7 +217,7 @@ describe('TypographyControlManager - Unit Tests', () => { mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -241,7 +241,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates font size control display value when multiplier increases', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -262,7 +262,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Base Size Setter', () => { it('updates baseSize when set directly', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -273,7 +273,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates size control value when baseSize is set', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -284,7 +284,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('applies multiplier to size control when baseSize is set', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -298,7 +298,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Rendered Size Calculation', () => { it('calculates renderedSize as baseSize * multiplier', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -307,7 +307,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates renderedSize when multiplier changes', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -320,7 +320,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates renderedSize when baseSize changes', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -340,7 +340,7 @@ describe('TypographyControlManager - Unit Tests', () => { // proxy effect behavior should be tested in E2E tests. it('does NOT immediately update baseSize from control change (effect is async)', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -355,7 +355,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('updates baseSize via direct setter (synchronous)', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -380,7 +380,7 @@ describe('TypographyControlManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -393,7 +393,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('syncs to storage after effect flush (async)', async () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -409,7 +409,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('syncs control changes to storage after effect flush (async)', async () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -422,7 +422,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('syncs height control changes to storage after effect flush (async)', async () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -434,7 +434,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('syncs spacing control changes to storage after effect flush (async)', async () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -448,7 +448,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Control Value Getters', () => { it('returns current weight value', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -460,7 +460,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('returns current height value', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -472,7 +472,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('returns current spacing value', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -485,7 +485,7 @@ describe('TypographyControlManager - Unit Tests', () => { it('returns default value when control is not found', () => { // Create a manager with empty configs (no controls) - const manager = new TypographyControlManager([], mockPersistentStore); + const manager = new TypographySettingsManager([], mockPersistentStore); expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT); expect(manager.height).toBe(DEFAULT_LINE_HEIGHT); @@ -503,7 +503,7 @@ describe('TypographyControlManager - Unit Tests', () => { }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -536,7 +536,7 @@ describe('TypographyControlManager - Unit Tests', () => { clear: clearSpy, }; - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -547,7 +547,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('respects multiplier when resetting font size control', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -565,7 +565,7 @@ describe('TypographyControlManager - Unit Tests', () => { describe('Complex Scenarios', () => { it('handles changing multiplier then modifying baseSize', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -586,7 +586,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('maintains correct renderedSize throughout changes', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -608,7 +608,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles multiple control changes in sequence', async () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -633,7 +633,7 @@ describe('TypographyControlManager - Unit Tests', () => { mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockPersistentStore = createMockPersistentStore(mockStorage); - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -645,7 +645,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles very small multiplier', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -658,7 +658,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles large base size with multiplier', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -671,7 +671,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles floating point precision in multiplier', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -690,7 +690,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles control methods (increase/decrease)', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); @@ -704,7 +704,7 @@ describe('TypographyControlManager - Unit Tests', () => { }); it('handles control boundary conditions', () => { - const manager = new TypographyControlManager( + const manager = new TypographySettingsManager( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, mockPersistentStore, ); diff --git a/src/features/SetupFont/model/index.ts b/src/features/SetupFont/model/index.ts index 891cf1f..2e7f5e0 100644 --- a/src/features/SetupFont/model/index.ts +++ b/src/features/SetupFont/model/index.ts @@ -20,5 +20,5 @@ export { export { type ControlId, - controlManager, -} from './state/manager.svelte'; + typographySettingsStore, +} from './state/typographySettingsStore'; diff --git a/src/features/SetupFont/model/state/manager.svelte.ts b/src/features/SetupFont/model/state/manager.svelte.ts deleted file mode 100644 index 33bd362..0000000 --- a/src/features/SetupFont/model/state/manager.svelte.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createTypographyControlManager } from '../../lib'; -import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const'; - -export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing'; - -export const controlManager = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA); diff --git a/src/features/SetupFont/model/state/typographySettingsStore.ts b/src/features/SetupFont/model/state/typographySettingsStore.ts new file mode 100644 index 0000000..65d6fb1 --- /dev/null +++ b/src/features/SetupFont/model/state/typographySettingsStore.ts @@ -0,0 +1,8 @@ +import { createTypographySettingsManager } from '../../lib'; +import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const'; + +export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing'; +export const typographySettingsStore = createTypographySettingsManager( + DEFAULT_TYPOGRAPHY_CONTROLS_DATA, + 'glyphdiff:comparison:typography', +); diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte index f49a28a..e4e864c 100644 --- a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte +++ b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte @@ -9,7 +9,6 @@ import type { ResponsiveManager } from '$shared/lib'; import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { - Button, ComboControl, ControlGroup, Slider, @@ -24,7 +23,7 @@ import { MULTIPLIER_L, MULTIPLIER_M, MULTIPLIER_S, - controlManager, + typographySettingsStore, } from '../../model'; interface Props { @@ -52,16 +51,16 @@ $effect(() => { if (!responsive) return; switch (true) { case responsive.isMobile: - controlManager.multiplier = MULTIPLIER_S; + typographySettingsStore.multiplier = MULTIPLIER_S; break; case responsive.isTablet: - controlManager.multiplier = MULTIPLIER_M; + typographySettingsStore.multiplier = MULTIPLIER_M; break; case responsive.isDesktop: - controlManager.multiplier = MULTIPLIER_L; + typographySettingsStore.multiplier = MULTIPLIER_L; break; default: - controlManager.multiplier = MULTIPLIER_L; + typographySettingsStore.multiplier = MULTIPLIER_L; } }); @@ -133,7 +132,7 @@ $effect(() => { - {#each controlManager.controls as control (control.id)} + {#each typographySettingsStore.controls as control (control.id)} { - {#each controlManager.controls as control, i (control.id)} + {#each typographySettingsStore.controls as control, i (control.id)} {#if i > 0}
{/if}