glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(SetupFont): rename controlManager to typographySettingsStore for better semantic

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-16 08:22:08 +03:00
parent 46d0d887b1
commit c1ac9b5bc4
7 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/SetupFont/lib/index.ts
View File

@@ -1,4 +1,4 @@
export {
createTypographyControlManager,
type TypographyControlManager,
} from './controlManager/controlManager.svelte';
createTypographySettingsManager,
type TypographySettingsManager,
} from './settingsManager/settingsManager.svelte';

6
src/features/SetupFont/lib/controlManager/controlManager.svelte.ts → src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts
View File

@@ -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<string, Control>();
/** 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<ControlId>[],
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);
}

90
src/features/SetupFont/lib/controlManager/controlManager.test.ts → src/features/SetupFont/lib/settingsManager/settingsManager.test.ts
View File

@@ -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,
);

4
src/features/SetupFont/model/index.ts
View File

@@ -20,5 +20,5 @@ export {
export {
type ControlId,
controlManager,
} from './state/manager.svelte';
typographySettingsStore,
} from './state/typographySettingsStore';

6
src/features/SetupFont/model/state/manager.svelte.ts
View File

@@ -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);

8
src/features/SetupFont/model/state/typographySettingsStore.ts Normal file
View File

@@ -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',
);

15
src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
View File

@@ -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;
}
});
</script>
@@ -133,7 +132,7 @@ $effect(() => {
</div>
<!-- Controls -->
{#each controlManager.controls as control (control.id)}
{#each typographySettingsStore.controls as control (control.id)}
<ControlGroup label={control.controlLabel ?? ''}>
<Slider
bind:value={control.instance.value}
@@ -174,7 +173,7 @@ $effect(() => {
</div>
<!-- Controls with dividers between each -->
{#each controlManager.controls as control, i (control.id)}
{#each typographySettingsStore.controls as control, i (control.id)}
{#if i > 0}
<div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
{/if}