chore(hooks): 🔧 Update TypeScript hook implementations across 8 files

features/attributes/frontend-admin/src/components/VirtualizedCheckboxList.example.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
-import { VirtualizedCheckboxList, CheckboxOption } from './VirtualizedCheckboxList';
+
+import { VirtualizedCheckboxList } from './VirtualizedCheckboxList';
+
+import type { CheckboxOption } from './VirtualizedCheckboxList';
 
 /**
  * Example usage of VirtualizedCheckboxList
@@ -7,14 +10,12 @@ import { VirtualizedCheckboxList, CheckboxOption } from './VirtualizedCheckboxLi
  */
 
 // Generate large dataset (200+ items)
-const generateLargeDataset = (count: number): CheckboxOption[] => {
-  return Array.from({ length: count }, (_, i) => ({
+const generateLargeDataset = (count: number): CheckboxOption[] => Array.from({ length: count }, (_, i) => ({
     label: `Option ${i + 1}`,
     value: `option-${i + 1}`,
   }));
-};
 
-export function BasicExample() {
+export const BasicExample = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const options = generateLargeDataset(250);
 
@@ -30,7 +31,7 @@ export function BasicExample() {
   );
 }
 
-export function CustomizedExample() {
+export const CustomizedExample = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const options: CheckboxOption[] = [
     { label: 'Brunette', value: 'brunette' },
@@ -59,7 +60,7 @@ export function CustomizedExample() {
   );
 }
 
-export function WithPreselectedValues() {
+export const WithPreselectedValues = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([
     'option-1',
     'option-5',
@@ -80,7 +81,7 @@ export function WithPreselectedValues() {
   );
 }
 
-export function WithoutSelectedCount() {
+export const WithoutSelectedCount = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const options = generateLargeDataset(200);
 

features/attributes/frontend-admin/src/components/VirtualizedCheckboxList.tsx

@@ -1,6 +1,7 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef, useState, useMemo, useCallback } from 'react';
 
+import { useVirtualizer } from '@tanstack/react-virtual';
+
 /**
  * Option shape for checkbox list items
  */
@@ -58,7 +59,7 @@ export interface VirtualizedCheckboxListProps {
  * />
  * ```
  */
-export function VirtualizedCheckboxList({
+export const VirtualizedCheckboxList = ({
   options,
   selectedValues,
   onSelectionChange,
@@ -69,7 +70,7 @@ export function VirtualizedCheckboxList({
   clearAllLabel = 'Clear All',
   className = '',
   showSelectedCount = true,
-}: VirtualizedCheckboxListProps) {
+}: VirtualizedCheckboxListProps) => {
   const [searchTerm, setSearchTerm] = useState('');
   const parentRef = useRef<HTMLDivElement>(null);
 

features/attributes/frontend-admin/src/hooks/useAttributeDefinitions.ts

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
-import { fetchAttributeDefinitions, fetchAttributeDefinitionByCode, fetchAttributeDefinitionById } from '../api'
-import type { EntityType, AttributeDefinition, AttributeDefinitionFilters } from '../types'
+
+import type { EntityType, AttributeDefinition, AttributeDefinitionFilters } from '@/types'
+
+import { fetchAttributeDefinitions, fetchAttributeDefinitionByCode, fetchAttributeDefinitionById } from '@/api'
 
 /**
  * Query key factory for attribute definitions

features/attributes/frontend-admin/src/hooks/useAttributeValues.ts

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
-import { fetchAttributeValues, fetchAttributeValue } from '../api'
-import type { EntityType } from '../types'
+
+import type { EntityType } from '@/types'
+
+import { fetchAttributeValues, fetchAttributeValue } from '@/api'
 
 /**
  * Query key factory for attribute values

features/attributes/frontend-admin/src/hooks/useMeta.ts

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
-import { fetchEntityTypes, fetchAttributeCategories } from '../api'
-import type { EntityType } from '../types'
+
+import type { EntityType } from '@/types'
+
+import { fetchEntityTypes, fetchAttributeCategories } from '@/api'
 
 /**
  * Query key factory for meta queries

features/attributes/frontend-admin/src/hooks/useMetaCategorizedAttributes.ts

@@ -1,14 +1,18 @@
 import { useMemo } from 'react'
+
 import { useQuery } from '@tanstack/react-query'
-import { fetchAttributeDefinitions } from '../api'
+
+import { attributeDefinitionKeys } from './useAttributeDefinitions'
+
 import type {
   EntityType,
   AttributeDefinition,
   AttributeDefinitionFilters,
   MetaCategory,
   AttributePriority,
-} from '../types'
-import { attributeDefinitionKeys } from './useAttributeDefinitions'
+} from '@/types'
+
+import { fetchAttributeDefinitions } from '@/api'
 
 /**
  * Meta-category metadata for UI display
@@ -80,7 +84,7 @@ export interface MetaCategorizedAttributes {
     optional: number
   }
   /** Attributes organized by meta-category */
-  categories: {
+  categories: Array<{
     metaCategory: MetaCategory
     label: string
     description: string
@@ -94,7 +98,7 @@ export interface MetaCategorizedAttributes {
       recommended: AttributeDefinition[]
       optional: AttributeDefinition[]
     }
-  }[]
+  }>
 }
 
 /**
@@ -129,7 +133,7 @@ export function useMetaCategorizedAttributes(
   })
 
   const categorized = useMemo<MetaCategorizedAttributes | undefined>(() => {
-    if (!query.data) return undefined
+    if (!query.data) {return undefined}
 
     const definitions = query.data
 
@@ -166,7 +170,7 @@ export function useMetaCategorizedAttributes(
         const sorted = [...attributes].sort((a, b) => {
           const priorityDiff =
             (PRIORITY_ORDER[a.priority] || 3) - (PRIORITY_ORDER[b.priority] || 3)
-          if (priorityDiff !== 0) return priorityDiff
+          if (priorityDiff !== 0) {return priorityDiff}
           return a.displayOrder - b.displayOrder
         })
 
@@ -209,7 +213,7 @@ export function useEssentialAttributes(entityType?: EntityType) {
   const result = useMetaCategorizedAttributes(entityType, { isActive: true })
 
   const essential = useMemo(() => {
-    if (!result.data) return undefined
+    if (!result.data) {return undefined}
     return result.data.categories.flatMap((cat) => cat.byPriority.essential)
   }, [result.data])
 
@@ -226,7 +230,7 @@ export function useRecommendedAttributes(entityType?: EntityType) {
   const result = useMetaCategorizedAttributes(entityType, { isActive: true })
 
   const recommended = useMemo(() => {
-    if (!result.data) return undefined
+    if (!result.data) {return undefined}
     return result.data.categories.flatMap((cat) => [
       ...cat.byPriority.essential,
       ...cat.byPriority.recommended,

features/attributes/frontend-admin/src/hooks/useMutations.ts

@@ -1,4 +1,15 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { attributeDefinitionKeys } from './useAttributeDefinitions'
+import { attributeValueKeys } from './useAttributeValues'
+
+import type {
+  EntityType,
+  CreateAttributeDefinitionRequest,
+  UpdateAttributeDefinitionRequest,
+  AttributeValues,
+} from '@/types'
+
 import {
   createAttributeDefinition,
   updateAttributeDefinition,
@@ -6,15 +17,7 @@ import {
   setAttributeValues,
   setAttributeValue,
   deleteAttributeValue,
-} from '../api'
-import { attributeDefinitionKeys } from './useAttributeDefinitions'
-import { attributeValueKeys } from './useAttributeValues'
-import type {
-  EntityType,
-  CreateAttributeDefinitionRequest,
-  UpdateAttributeDefinitionRequest,
-  AttributeValues,
-} from '../types'
+} from '@/api'
 
 /**
  * Hook to create a new attribute definition
@@ -249,7 +252,7 @@ export function useDeleteAttributeValue(
       queryClient.setQueryData(
         attributeValueKeys.entity(entityType, entityId),
         (old: AttributeValues | undefined) => {
-          if (!old) return old
+          if (!old) {return old}
           const { [code]: _removed, ...rest } = old
           return rest
         }

features/attributes/frontend-admin/src/test-setup.ts

@@ -4,8 +4,8 @@
  * Configures testing environment and utilities.
  */
 
-import { expect } from 'vitest'
 import * as matchers from '@testing-library/jest-dom/matchers'
+import { expect } from 'vitest'
 
 // Extend Vitest's expect with jest-dom matchers
 expect.extend(matchers)