Fix lint warnings (closes #146)

eslint.config.js

@@ -9,7 +9,7 @@ import tseslint from "typescript-eslint";
 import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(["dist", "storybook-static"]),
+  globalIgnores(["dist", "storybook-static", "gitignore"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [
@@ -24,7 +24,10 @@ export default defineConfig([
     },
     rules: {
       "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-unused-vars": ["warn", {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      }],
     },
   },
   ...storybook.configs["flat/recommended"],

scripts/generate-css.ts

@@ -25,7 +25,6 @@ const root = path.resolve(import.meta.dirname, '..');
 
 interface DimensionValue { value: number; unit: string }
 interface DTCGToken { $value: unknown; $type: string; $description?: string }
-interface TokenGroup { [key: string]: DTCGToken | TokenGroup }
 
 interface TokenFile {
   color: Record<string, Record<string, DTCGToken>>;

scripts/token-server.ts

@@ -86,7 +86,7 @@ const server = http.createServer((req, res) => {
     try {
       const content = fs.readFileSync(filePath, 'utf-8');
       json(res, 200, JSON.parse(content));
-    } catch (err) {
+    } catch {
       json(res, 500, { error: `Failed to read ${tokenType} tokens` });
     }
     return;

src/components/Dropdown/DropdownField.test.tsx

@@ -9,11 +9,6 @@ const choices = {
   choiceValues: ["red", "green", "blue"],
 };
 
-// Helper to open the dropdown
-async function openDropdown(user: ReturnType<typeof userEvent.setup>) {
-  await user.click(screen.getByRole("button", { name: /select\.\.\.|red|green|blue/i }));
-}
-
 // ─── DropdownField (single-select) ───────────────────────────────────────────
 
 describe("DropdownField - visibility", () => {

src/components/MessageBanner/MessageBanner.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Info, CheckCircle, AlertCircle, AlertTriangle, X } from 'lucide-react'
+import { Info, CheckCircle, AlertCircle, AlertTriangle } from 'lucide-react'
 import type { SAILShape, SAILMarginSize, SAILAlign } from '../../types/sail'
 import type { ButtonWidgetProps } from '../Button/ButtonWidget'
 import { ButtonWidget } from '../Button/ButtonWidget'

src/components/RadioButton/RadioButtonField.test.tsx

@@ -174,7 +174,7 @@ describe("RadioButtonField - choiceStyle CARDS", () => {
   it("clicking the card container (not the input) triggers selection", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    const { container } = render(
+    render(
       <RadioButtonField {...choices} choiceStyle="CARDS" onChange={onChange} />
     );
     // Click the label text (part of the card, not the input itself)

src/components/ReadOnlyGrid/ReadOnlyGrid.properties.test.tsx

@@ -218,9 +218,6 @@ describe("Property 3: Column configuration application", () => {
 
         // Hidden column labels should NOT appear in any header
         columns.hidden.forEach((col) => {
-          const matchingHeaders = headers.filter((h) =>
-            h.textContent?.includes(col.label)
-          );
           // Only fail if the hidden label uniquely doesn't appear
           // (it could coincidentally match a visible label, so we check headers only)
           const headerTexts = headers.map((h) => h.textContent);

src/components/ReadOnlyGrid/ReadOnlyGrid.tsx

@@ -195,7 +195,7 @@ export const ReadOnlyGrid: React.FC<ReadOnlyGridProps> = ({
   const pageSize = pageSizeProp > 0 ? pageSizeProp : 10;
 
   // Normalize data — treat undefined/null/non-array as empty
-  const rows = Array.isArray(data) ? data : [];
+  const rows = React.useMemo(() => Array.isArray(data) ? data : [], [data]);
 
   // Paging state (1-based)
   const [currentPage, setCurrentPage] = React.useState(1);
@@ -281,7 +281,6 @@ export const ReadOnlyGrid: React.FC<ReadOnlyGridProps> = ({
   const needsScrollContainer = height !== "AUTO" && heightClass !== "";
 
   // Compute paging state (use sortedRows for total count)
-  const totalPages = Math.ceil(sortedRows.length / pageSize);
   const startIndex = (currentPage - 1) * pageSize;
   const endIndex = Math.min(startIndex + pageSize, sortedRows.length);