refactor: eslint fixes (#147)

Author: nickytonline

.continue/rules/mcp-app-demo-standards.md

@@ -45,7 +45,7 @@ const users = await fetchUsers() // Let TypeScript infer User[]
 // ✅ Good: Generic constraints for reusable utilities
 function createApiResponse<T extends Record<string, unknown>>(
   data: T,
-  status: 'success' | 'error' = 'success'
+  status: 'success' | 'error' = 'success',
 ): ApiResponse<T> {
   return { data, status, timestamp: Date.now() }
 }
@@ -86,14 +86,14 @@ interface ButtonProps {
   disabled?: boolean
 }
 
-export default function Button({ 
-  children, 
-  onClick, 
+export default function Button({
+  children,
+  onClick,
   variant = 'primary',
-  disabled = false 
+  disabled = false
 }: ButtonProps) {
   return (
-    <button 
+    <button
       onClick={onClick}
       disabled={disabled}
       className={cn(buttonVariants({ variant }), disabled && 'opacity-50')}

.continue/rules/state-management.md

@@ -45,15 +45,15 @@ export const Route = createFileRoute('/dashboard')({
 
 function Dashboard() {
   const initialData = Route.useLoaderData()
-  
+
   // Use React Query only for data that needs frequent updates
   const { data: liveMetrics } = useQuery({
     queryKey: ['live-metrics'],
     queryFn: fetchLiveMetrics,
     initialData: initialData.metrics,
     refetchInterval: 30000, // Update every 30 seconds
   })
-  
+
   return <DashboardView user={initialData.user} metrics={liveMetrics} />
 }
 

.continue/rules/styling-ui-guidelines.md

@@ -113,13 +113,13 @@ You are an expert in Tailwind CSS and Shadcn/ui component development.
 // ✅ Good: Accessible modal with focus management
 function AccessibleModal({ isOpen, onClose, children }) {
   const modalRef = useRef<HTMLDivElement>(null)
-  
+
   useEffect(() => {
     if (isOpen && modalRef.current) {
       modalRef.current.focus()
     }
   }, [isOpen])
-  
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent

.continue/rules/testing-guidelines.md

@@ -32,16 +32,16 @@ describe('Button Component', () => {
   it('should call onClick when clicked', () => {
     const handleClick = vi.fn()
     render(<Button onClick={handleClick}>Click me</Button>)
-    
+
     const button = screen.getByRole('button', { name: /click me/i })
     fireEvent.click(button)
-    
+
     expect(handleClick).toHaveBeenCalledOnce()
   })
-  
+
   it('should be disabled when disabled prop is true', () => {
     render(<Button disabled onClick={vi.fn()}>Click me</Button>)
-    
+
     const button = screen.getByRole('button', { name: /click me/i })
     expect(button).toBeDisabled()
   })
@@ -62,13 +62,13 @@ import { renderWithRouter } from '@/test-utils'
 describe('UserDetail Route', () => {
   it('should display user information', () => {
     const mockUser = { id: '1', name: 'John Doe', email: '[email protected]' }
-    
+
     renderWithRouter({
       component: UserDetail,
       loaderData: mockUser,
-      path: '/users/1'
+      path: '/users/1',
     })
-    
+
     expect(screen.getByText('John Doe')).toBeInTheDocument()
     expect(screen.getByText('[email protected]')).toBeInTheDocument()
   })
@@ -89,13 +89,13 @@ import { useToggle } from '@/hooks/useToggle'
 describe('useToggle Hook', () => {
   it('should toggle value when called', () => {
     const { result } = renderHook(() => useToggle(false))
-    
+
     expect(result.current[0]).toBe(false)
-    
+
     act(() => {
       result.current[1]()
     })
-    
+
     expect(result.current[0]).toBe(true)
   })
 })
@@ -108,7 +108,7 @@ describe('validateUser', () => {
   it('should validate correct user data', () => {
     const validUser = { id: '1', name: 'John', email: '[email protected]' }
     const result = validateUser(validUser)
-    
+
     expect(result.success).toBe(true)
     expect(userSchema.safeParse(result.data).success).toBe(true)
   })
@@ -132,7 +132,7 @@ export function renderWithProviders(ui: React.ReactElement) {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } }
   })
-  
+
   return render(
     <QueryClientProvider client={queryClient}>
       {ui}
@@ -147,4 +147,4 @@ export function renderWithProviders(ui: React.ReactElement) {
 • Use proper cleanup to prevent test pollution
 • Mock external dependencies at the appropriate level
 • Write tests that fail for the right reasons
-• Maintain test coverage for critical user flows and edge cases
+• Maintain test coverage for critical user flows and edge cases

.continue/rules/validation-zod.md

@@ -82,35 +82,38 @@ export const Route = createServerFileRoute('/api/users').methods({
   async POST({ request }) {
     const body = await request.json()
     const result = createUserSchema.safeParse(body)
-    
+
     if (!result.success) {
-      return new Response(JSON.stringify({ 
-        error: 'Validation failed',
-        details: result.error.flatten()
-      }), { 
-        status: 400,
-        headers: { 'Content-Type': 'application/json' }
-      })
+      return new Response(
+        JSON.stringify({
+          error: 'Validation failed',
+          details: result.error.flatten(),
+        }),
+        {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' },
+        },
+      )
     }
-    
+
     const user = await createUser(result.data)
     return new Response(JSON.stringify(user), {
-      headers: { 'Content-Type': 'application/json' }
+      headers: { 'Content-Type': 'application/json' },
     })
-  }
+  },
 })
 
 // ✅ Good: External API validation
 async function fetchUserFromAPI(id: string): Promise<User> {
   const response = await fetch(`/api/users/${id}`)
   const data = await response.json()
-  
+
   // Always validate external API responses
   const result = userSchema.safeParse(data)
   if (!result.success) {
     throw new Error(`Invalid user data from API: ${result.error.message}`)
   }
-  
+
   return result.data
 }
 ```

.github/workflows/test.yaml

@@ -24,6 +24,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Check for formatting errors
+        run: npm run format:check
+
       - name: Run tests
         run: npm run test:ci
       # This can be removed one we deploy to Netlify and Storybook deploying is a check for PRs. See https://github.com/pomerium/mcp-app-demo/issues/123

.storybook/preview.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
 import type { Preview } from '@storybook/react-vite'
 import '../src/styles.css'
-import { useEffect } from 'react'
 
 const preview: Preview = {
   parameters: {

.storybook/vitest.setup.ts

@@ -1,7 +1,7 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
+import { setProjectAnnotations } from '@storybook/react-vite'
+import * as projectAnnotations from './preview'
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])

components.json

@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

eslint.config.js

@@ -1,8 +1,34 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
+import storybook from 'eslint-plugin-storybook'
 
 //  @ts-check
 
-import { tanstackConfig } from "@tanstack/eslint-config";
+import { tanstackConfig } from '@tanstack/eslint-config'
 
-export default [...tanstackConfig, ...storybook.configs["flat/recommended"]];
+export default [
+  {
+    ignores: [
+      '.nitro/**',
+      '.output/**',
+      '.netlify/**',
+      'storybook-static/**',
+      'eslint.config.js',
+      'prettier.config.js',
+    ],
+  },
+  {
+    rules: {
+      // TypeScript unused variables (includes imports)
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  ...tanstackConfig,
+  ...storybook.configs['flat/recommended'],
+]