feat: add generic type for property value

src/shared/lib/helpers/createFilter/createFilter.svelte.ts

@@ -1,4 +1,4 @@
-export interface Property {
+export interface Property<TValue extends string> {
     /**
      * Property identifier
      */
@@ -7,13 +7,17 @@ export interface Property {
      * Property name
      */
     name: string;
+    /**
+     * Property value
+     */
+    value: TValue;
     /**
      * Property selected state
      */
     selected?: boolean;
 }
 
-export interface FilterModel {
+export interface FilterModel<TValue extends string> {
     /**
      * Search query
      */
@@ -21,15 +25,15 @@ export interface FilterModel {
     /**
      * Properties
      */
-    properties: Property[];
+    properties: Property<TValue>[];
 }
 
 /**
  * Create a filter store.
  * @param initialState - Initial state of the filter store
  */
-export function createFilter<T extends FilterModel>(
-    initialState: T,
+export function createFilter<TValue extends string>(
+    initialState: FilterModel<TValue>,
 ) {
     let properties = $state(
         initialState.properties.map(p => ({

src/shared/lib/helpers/createFilter/createFilter.test.ts

@@ -22,6 +22,7 @@ describe('createFilter - Filter Logic', () => {
         return Array.from({ length: count }, (_, i) => ({
             id: `prop-${i}`,
             name: `Property ${i}`,
+            value: `Value ${i}`,
             selected: selectedIndices.includes(i),
         }));
     }

src/shared/ui/CheckboxFilter/CheckboxFilter.svelte.test.ts

@@ -33,7 +33,7 @@ describe('CheckboxFilter Component', () => {
     /**
      * Helper function to create a filter for testing
      */
-    function createTestFilter(properties: Property[]) {
+    function createTestFilter<T extends string>(properties: Property<T>[]) {
         return createFilter({ properties });
     }
 
@@ -44,6 +44,7 @@ describe('CheckboxFilter Component', () => {
         return Array.from({ length: count }, (_, i) => ({
             id: `prop-${i}`,
             name: `Property ${i}`,
+            value: `Value ${i}`,
             selected: selectedIndices.includes(i),
         }));
     }
@@ -437,10 +438,11 @@ describe('CheckboxFilter Component', () => {
 
     describe('Edge Cases', () => {
         it('handles long property names', () => {
-            const properties: Property[] = [
+            const properties: Property<string>[] = [
                 {
                     id: '1',
                     name: 'This is a very long property name that might wrap to multiple lines',
+                    value: '1',
                     selected: false,
                 },
             ];
@@ -458,10 +460,10 @@ describe('CheckboxFilter Component', () => {
         });
 
         it('handles special characters in property names', () => {
-            const properties: Property[] = [
-                { id: '1', name: 'Café & Restaurant', selected: true },
-                { id: '2', name: '100% Organic', selected: false },
-                { id: '3', name: '(Special) <Characters>', selected: false },
+            const properties: Property<string>[] = [
+                { id: '1', name: 'Café & Restaurant', value: '1', selected: true },
+                { id: '2', name: '100% Organic', value: '2', selected: false },
+                { id: '3', name: '(Special) <Characters>', value: '3', selected: false },
             ];
             const filter = createTestFilter(properties);
             render(CheckboxFilter, {
@@ -475,8 +477,8 @@ describe('CheckboxFilter Component', () => {
         });
 
         it('handles single property filter', () => {
-            const properties: Property[] = [
-                { id: '1', name: 'Only One', selected: true },
+            const properties: Property<string>[] = [
+                { id: '1', name: 'Only One', value: '1', selected: true },
             ];
             const filter = createTestFilter(properties);
             render(CheckboxFilter, {
@@ -527,12 +529,12 @@ describe('CheckboxFilter Component', () => {
 
     describe('Component Integration', () => {
         it('works correctly with real filter data', async () => {
-            const realProperties: Property[] = [
-                { id: 'sans-serif', name: 'Sans-serif', selected: true },
-                { id: 'serif', name: 'Serif', selected: false },
-                { id: 'display', name: 'Display', selected: false },
-                { id: 'handwriting', name: 'Handwriting', selected: true },
-                { id: 'monospace', name: 'Monospace', selected: false },
+            const realProperties: Property<string>[] = [
+                { id: 'sans-serif', name: 'Sans-serif', value: 'sans-serif', selected: true },
+                { id: 'serif', name: 'Serif', value: 'serif', selected: false },
+                { id: 'display', name: 'Display', value: 'display', selected: false },
+                { id: 'handwriting', name: 'Handwriting', value: 'handwriting', selected: true },
+                { id: 'monospace', name: 'Monospace', value: 'monospace', selected: false },
             ];
             const filter = createTestFilter(realProperties);
             render(CheckboxFilter, {