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

refactor(createTypographyControl): createControlStore rewrote to runes

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-07 16:53:17 +03:00
parent baff3b9e27
commit 76f27a64b2
10 changed files with 178 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/features/SetupFont/lib/controlManager/controlManager.svelte.ts Normal file
View File

@@ -0,0 +1,22 @@
import {
type ControlModel,
createTypographyControl,
} from '$shared/lib';
export function createTypographyControlManager(configs: ControlModel[]) {
const controls = $state(
configs.map(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => ({
id,
increaseLabel,
decreaseLabel,
controlLabel,
instance: createTypographyControl(config),
})),
);
return {
get controls() {
return controls;
},
};
}

56
src/features/SetupFont/model/state/manager.svetle.ts Normal file
View File

@@ -0,0 +1,56 @@
import {
createTypographyControlManager,
} from '$features/SetupFont/lib/controlManager/controlManager.svelte';
import type { ControlModel } from '$shared/lib';
import {
DEFAULT_FONT_SIZE,
DEFAULT_FONT_WEIGHT,
DEFAULT_LINE_HEIGHT,
FONT_SIZE_STEP,
FONT_WEIGHT_STEP,
LINE_HEIGHT_STEP,
MAX_FONT_SIZE,
MAX_FONT_WEIGHT,
MAX_LINE_HEIGHT,
MIN_FONT_SIZE,
MIN_FONT_WEIGHT,
MIN_LINE_HEIGHT,
} from '../const/const';
const controlData: ControlModel[] = [
{
id: 'font_size',
value: DEFAULT_FONT_SIZE,
max: MAX_FONT_SIZE,
min: MIN_FONT_SIZE,
step: FONT_SIZE_STEP,
increaseLabel: 'Increase Font Size',
decreaseLabel: 'Decrease Font Size',
controlLabel: 'Font Size',
},
{
id: 'font_weight',
value: DEFAULT_FONT_WEIGHT,
max: MAX_FONT_WEIGHT,
min: MIN_FONT_WEIGHT,
step: FONT_WEIGHT_STEP,
increaseLabel: 'Increase Font Weight',
decreaseLabel: 'Decrease Font Weight',
controlLabel: 'Font Weight',
},
{
id: 'line_height',
value: DEFAULT_LINE_HEIGHT,
max: MAX_LINE_HEIGHT,
min: MIN_LINE_HEIGHT,
step: LINE_HEIGHT_STEP,
increaseLabel: 'Increase Line Height',
decreaseLabel: 'Decrease Line Height',
controlLabel: 'Line Height',
},
];
export const controlManager = createTypographyControlManager(controlData);

17
src/features/SetupFont/model/stores/fontSizeStore.ts
View File

@@ -1,17 +0,0 @@
import {
type ControlModel,
createControlStore,
} from '$shared/lib/store/createControlStore/createControlStore';
import {
DEFAULT_FONT_SIZE,
MAX_FONT_SIZE,
MIN_FONT_SIZE,
} from '../const/const';
const initialValue: ControlModel = {
value: DEFAULT_FONT_SIZE,
max: MAX_FONT_SIZE,
min: MIN_FONT_SIZE,
};
export const fontSizeStore = createControlStore(initialValue);

19
src/features/SetupFont/model/stores/fontWeightStore.ts
View File

@@ -1,19 +0,0 @@
import {
type ControlModel,
createControlStore,
} from '$shared/lib/store/createControlStore/createControlStore';
import {
DEFAULT_FONT_WEIGHT,
FONT_WEIGHT_STEP,
MAX_FONT_WEIGHT,
MIN_FONT_WEIGHT,
} from '../const/const';
const initialValue: ControlModel = {
value: DEFAULT_FONT_WEIGHT,
max: MAX_FONT_WEIGHT,
min: MIN_FONT_WEIGHT,
step: FONT_WEIGHT_STEP,
};
export const fontWeightStore = createControlStore(initialValue);

19
src/features/SetupFont/model/stores/lineHeightStore.ts
View File

@@ -1,19 +0,0 @@
import {
type ControlModel,
createControlStore,
} from '$shared/lib/store/createControlStore/createControlStore';
import {
DEFAULT_LINE_HEIGHT,
LINE_HEIGHT_STEP,
MAX_LINE_HEIGHT,
MIN_LINE_HEIGHT,
} from '../const/const';
const initialValue: ControlModel = {
value: DEFAULT_LINE_HEIGHT,
max: MAX_LINE_HEIGHT,
min: MIN_LINE_HEIGHT,
step: LINE_HEIGHT_STEP,
};
export const lineHeightStore = createControlStore(initialValue);

53
src/features/SetupFont/ui/SetupFontMenu.svelte
View File

@@ -1,55 +1,14 @@
<script lang="ts">
import * as Item from '$shared/shadcn/ui/item';
import { Separator } from '$shared/shadcn/ui/separator/index';
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import ComboControl from '$shared/ui/ComboControl/ComboControl.svelte';
import { fontSizeStore } from '../model/stores/fontSizeStore';
import { fontWeightStore } from '../model/stores/fontWeightStore';
import { lineHeightStore } from '../model/stores/lineHeightStore';
const fontSize = $derived($fontSizeStore);
const fontWeight = $derived($fontWeightStore);
const lineHeight = $derived($lineHeightStore);
import { ComboControl } from '$shared/ui';
import { controlManager } from '../model/state/manager.svetle';
</script>
<div class="w-full p-2 flex flex-row items-center">
<div class="w-full p-2 flex flex-row items-center gap-2">
<Sidebar.Trigger />
<Separator orientation="vertical" class="h-full" />
<ComboControl
value={fontSize.value}
minValue={fontSize.min}
maxValue={fontSize.max}
onChange={fontSizeStore.setValue}
onIncrease={fontSizeStore.increase}
onDecrease={fontSizeStore.decrease}
increaseDisabled={fontSizeStore.isAtMax()}
decreaseDisabled={fontSizeStore.isAtMin()}
increaseLabel="Increase Font Size"
decreaseLabel="Decrease Font Size"
/>
<ComboControl
value={fontWeight.value}
minValue={fontWeight.min}
maxValue={fontWeight.max}
onChange={fontWeightStore.setValue}
onIncrease={fontWeightStore.increase}
onDecrease={fontWeightStore.decrease}
increaseDisabled={fontWeightStore.isAtMax()}
decreaseDisabled={fontWeightStore.isAtMin()}
increaseLabel="Increase Font Weight"
decreaseLabel="Decrease Font Weight"
/>
<ComboControl
value={lineHeight.value}
minValue={lineHeight.min}
maxValue={lineHeight.max}
step={lineHeight.step}
onChange={lineHeightStore.setValue}
onIncrease={lineHeightStore.increase}
onDecrease={lineHeightStore.decrease}
increaseDisabled={lineHeightStore.isAtMax()}
decreaseDisabled={lineHeightStore.isAtMin()}
increaseLabel="Increase Line Height"
decreaseLabel="Decrease Line Height"
/>
{#each controlManager.controls as control (control.id)}
<ComboControl control={control.instance} />
{/each}
</div>