src/entities/Font/model/font.ts

@@ -5,73 +5,12 @@ import type { Category } from '$shared/store/createFilterStore';
  */
 export type FontCategory = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
 
-export const FONT_CATEGORIES: Category[] = [
-    {
-        id: 'sans-serif',
-        name: 'Sans-serif',
-    },
-    {
-        id: 'serif',
-        name: 'Serif',
-    },
-    {
-        id: 'display',
-        name: 'Display',
-    },
-    {
-        id: 'handwriting',
-        name: 'Handwriting',
-    },
-    {
-        id: 'monospace',
-        name: 'Monospace',
-    },
-] as const;
-
 /**
  * Font provider
  */
 export type FontProvider = 'google' | 'fontshare';
 
-export const FONT_PROVIDERS: Category[] = [
-    {
-        id: 'google',
-        name: 'Google Fonts',
-    },
-    {
-        id: 'fontshare',
-        name: 'Fontshare',
-    },
-] as const;
-
 /**
  * Font subset
  */
 export type FontSubset = 'latin' | 'latin-ext' | 'cyrillic' | 'greek' | 'arabic' | 'devanagari';
-
-export const FONT_SUBSETS: Category[] = [
-    {
-        id: 'latin',
-        name: 'Latin',
-    },
-    {
-        id: 'latin-ext',
-        name: 'Latin Extended',
-    },
-    {
-        id: 'cyrillic',
-        name: 'Cyrillic',
-    },
-    {
-        id: 'greek',
-        name: 'Greek',
-    },
-    {
-        id: 'arabic',
-        name: 'Arabic',
-    },
-    {
-        id: 'devanagari',
-        name: 'Devanagari',
-    },
-] as const;

src/features/ProvidersFilter/index.ts

@@ -0,0 +1,7 @@
+import { FONT_PROVIDERS } from './model/state';
+import { providersFilterStore } from './store/providersFilterStore';
+
+export {
+    FONT_PROVIDERS,
+    providersFilterStore,
+};

src/features/ProvidersFilter/model/state.ts

@@ -0,0 +1,20 @@
+import type {
+    Category,
+    FilterModel,
+} from '$shared/store/createFilterStore';
+
+/**
+ * Model of state for ProvidersFilter
+ */
+export type ProvidersFilterModel = FilterModel;
+
+export const FONT_PROVIDERS: Category[] = [
+    {
+        id: 'google',
+        name: 'Google Fonts',
+    },
+    {
+        id: 'fontshare',
+        name: 'Fontshare',
+    },
+] as const;

src/features/ProvidersFilter/store/providersFilterStore.ts

@@ -0,0 +1,18 @@
+import { createFilterStore } from '$shared/store/createFilterStore';
+import {
+    FONT_PROVIDERS,
+    type ProvidersFilterModel,
+} from '../model/state';
+
+/**
+ * Initial state for ProvidersFilter
+ */
+export const initialState: ProvidersFilterModel = {
+    searchQuery: '',
+    categories: FONT_PROVIDERS,
+};
+
+/**
+ * ProvidersFilter store
+ */
+export const providersFilterStore = createFilterStore(initialState);

src/features/SubsetsFilter/index.ts

@@ -0,0 +1,7 @@
+import { FONT_SUBSETS } from './model/state';
+import { subsetsFilterStore } from './store/subsetsFilterStore';
+
+export {
+    FONT_SUBSETS,
+    subsetsFilterStore,
+};

src/features/SubsetsFilter/model/state.ts

@@ -0,0 +1,36 @@
+import type {
+    Category,
+    FilterModel,
+} from '$shared/store/createFilterStore';
+
+/**
+ * Model of state for SubsetsFilter
+ */
+export type SubsetsFilterModel = FilterModel;
+
+export const FONT_SUBSETS: Category[] = [
+    {
+        id: 'latin',
+        name: 'Latin',
+    },
+    {
+        id: 'latin-ext',
+        name: 'Latin Extended',
+    },
+    {
+        id: 'cyrillic',
+        name: 'Cyrillic',
+    },
+    {
+        id: 'greek',
+        name: 'Greek',
+    },
+    {
+        id: 'arabic',
+        name: 'Arabic',
+    },
+    {
+        id: 'devanagari',
+        name: 'Devanagari',
+    },
+] as const;

src/features/SubsetsFilter/store/subsetsFilterStore.ts

@@ -0,0 +1,18 @@
+import { createFilterStore } from '$shared/store/createFilterStore';
+import {
+    FONT_SUBSETS,
+    type SubsetsFilterModel,
+} from '../model/state';
+
+/**
+ * Initial state for SubsetsFilter
+ */
+export const initialState: SubsetsFilterModel = {
+    searchQuery: '',
+    categories: FONT_SUBSETS,
+};
+
+/**
+ * SubsetsFilter store
+ */
+export const subsetsFilterStore = createFilterStore(initialState);