Introduce eslint - SCRAP ME (see notes)

.github/workflows/storybook-tests.yml

@@ -35,16 +35,22 @@ jobs:
       - name: Build Storybook
         run: yarn build-storybook
 
+      - name: Install test dependencies
+        run: yarn add --dev http-server wait-on
+
       - name: Run Storybook tests
         run: |
           # Start Storybook in the background
-          npx http-server storybook-static --port 6006 --silent &
+          yarn http-server storybook-static --port 6006 --silent &
 
           # Wait for Storybook to be ready
-          npx wait-on http://localhost:6006
+          yarn wait-on http://localhost:6006
+
+          # Set environment variable for Storybook URL
+          export STORYBOOK_URL=http://localhost:6006
 
-          # Run the tests using test-runner directly
-          npx test-storybook --url http://localhost:6006 --browsers chromium
+          # Run the tests using Vitest
+          yarn test:storybook
 
       - name: Upload test artifacts on failure
         if: failure()

.gitignore

@@ -137,3 +137,4 @@ dist
 
 *storybook.log
 storybook-static
+.vscode/settings.json

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-vitest'
   ],
   framework: {
     name: '@storybook/html-vite',

.storybook/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from '@storybook/html-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([projectAnnotations]);

.windsurf/rules/storybook.md

@@ -6,4 +6,6 @@ This is guidance for generation and maintenance of StoryBook stories.
 
 Lots of data tables are generated for StoryBook tests.  Do not create them as template text in the story.  Generate them as suitably named `.html` files in the `stories` sub-folder.
 
-This make it easier to understand and maintain them.
+This make it easier to understand and maintain them.
+
+We will be using Storybook V9 interaction tests, as documented here: https://storybook.js.org/docs/writing-tests/interaction-testing

eslint.config.js

@@ -0,0 +1,52 @@
+import js from '@eslint/js'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import globals from 'globals'
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: './tsconfig.json',
+        ecmaVersion: 2020,
+        sourceType: 'module'
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslint
+    },
+    rules: {
+      // No trailing semi-colons
+      'semi': ['error', 'never'],
+
+      // Single quotes for strings
+      'quotes': ['error', 'single', { 'avoidEscape': true }],
+
+      // Other standard rules
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }],
+
+      // Additional rules based on user preferences
+      'indent': ['error', 2],
+      'object-curly-spacing': ['error', 'always'],
+      'array-bracket-spacing': ['error', 'never'],
+      'comma-dangle': ['error', 'never'],
+      'arrow-parens': ['error', 'always'],
+      'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }]
+    }
+  },
+  {
+    // Special rules for JSON files
+    files: ['**/*.json'],
+    rules: {
+      'quotes': ['error', 'double']
+    }
+  }
+]

package.json

@@ -7,28 +7,36 @@
     "dev": "vite",
     "build": "tsc && vite build && node scripts/copy-demo.js",
     "preview": "vite preview",
-    "preview:demo": "vite preview --port 3000 --open /demo",
+    "preview:demo": "vite preview --port 3000 --open grid-sight",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test:storybook": "test-storybook",
+    "test:storybook": "vitest run --project=storybook",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test tests/e2e/demo.spec.ts",
-    "test:e2e:ui": "playwright test --ui tests/e2e/demo.spec.ts"
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "test:e2e": "vite build && playwright test tests/e2e",
+    "test:e2e:ui": "vite build && playwright test --ui tests/e2e"
   },
   "devDependencies": {
     "@playwright/test": "^1.53.0",
     "@storybook/addon-docs": "^9.0.6",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-vitest": "^9.0.9",
     "@storybook/html-vite": "^9.0.6",
     "@storybook/test": "^8.6.14",
     "@types/fs-extra": "^11.0.4",
+    "@vitest/browser": "3.2.3",
     "@vitest/coverage-v8": "^3.2.3",
     "@vitest/ui": "^3.2.3",
+    "eslint": "^9.28.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.31.0",
     "fs-extra": "^11.3.0",
     "jsdom": "^26.1.0",
+    "playwright": "^1.53.0",
     "storybook": "^9.0.6",
     "terser": "^5.42.0",
     "typescript": "~5.8.3",

public/demo/index.html → public/index.html

@@ -60,58 +60,34 @@ <h2>Basic Usage</h2>
       <div class="table-wrapper">
         <h3>Product Inventory</h3>
         <table class="inventory-table">
-          <thead>
-            <tr>
-              <th>Product ID</th>
-              <th>Product Name</th>
-              <th>Category</th>
-              <th>Price</th>
-              <th>In Stock</th>
-              <th>Last Ordered</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>P1001</td>
-              <td>Wireless Mouse</td>
-              <td>Electronics</td>
-              <td>29.99</td>
-              <td>45</td>
-              <td>2023-05-15</td>
-            </tr>
-            <tr>
-              <td>P1002</td>
-              <td>Ergonomic Keyboard</td>
-              <td>Electronics</td>
-              <td>89.99</td>
-              <td>23</td>
-              <td>2023-05-18</td>
-            </tr>
-            <tr>
-              <td>P2001</td>
-              <td>Desk Lamp</td>
-              <td>Furniture</td>
-              <td>45.50</td>
-              <td>12</td>
-              <td>2023-05-10</td>
-            </tr>
-            <tr>
-              <td>P2002</td>
-              <td>Office Chair</td>
-              <td>Furniture</td>
-              <td>249.99</td>
-              <td>5</td>
-              <td>2023-05-05</td>
-            </tr>
-            <tr>
-              <td>P3001</td>
-              <td>Notebook Set</td>
-              <td>Stationery</td>
-              <td>12.99</td>
-              <td>87</td>
-              <td>2023-05-20</td>
-            </tr>
-          </tbody>
+          <tr>
+            <td>Gear / Revs</td>
+            <td>5</td>
+            <td>10</td>
+            <td>15</td>
+            <td>20</td>
+          </tr>
+          <tr>
+            <td>Low</td>
+            <td>10</td>
+            <td>15</td>
+            <td>20</td>
+            <td>25</td>
+          </tr>
+          <tr>
+            <td>Medium</td>
+            <td>17</td>
+            <td>22</td>
+            <td>27</td>
+            <td>32</td>
+          </tr>
+          <tr>
+            <td>High</td>
+            <td>27</td>
+            <td>25</td>
+            <td>30</td>
+            <td>35</td>
+          </tr>
         </table>
       </div>
 
@@ -124,7 +100,7 @@ <h3>Monthly Sales Data</h3>
               <th>Revenue</th>
               <th>Expenses</th>
               <th>Profit</th>
-              <th>Growth %</th>
+              <th>Dominant item</th>
             </tr>
           </thead>
           <tbody>
@@ -133,35 +109,35 @@ <h3>Monthly Sales Data</h3>
               <td>12500</td>
               <td>9800</td>
               <td>2700</td>
-              <td>5.2</td>
+              <td>Corded Mouse</td>
             </tr>
             <tr>
               <td>February</td>
               <td>11800</td>
               <td>9200</td>
               <td>2600</td>
-              <td>-3.7</td>
+              <td>Wireless Mouse</td>
             </tr>
             <tr>
               <td>March</td>
               <td>14200</td>
               <td>10100</td>
               <td>4100</td>
-              <td>20.3</td>
+              <td>Corded Mouse</td>
             </tr>
             <tr>
               <td>April</td>
               <td>13800</td>
               <td>9900</td>
               <td>3900</td>
-              <td>-2.8</td>
+              <td>Corded Mouse</td>
             </tr>
             <tr>
               <td>May</td>
               <td>15600</td>
               <td>10500</td>
               <td>5100</td>
-              <td>13.0</td>
+              <td>Desk Lamp</td>
             </tr>
           </tbody>
         </table>
@@ -182,7 +158,7 @@ <h3>Browser Console</h3>
   </footer>
 
   <!-- Load Grid-Sight library -->
-  <script src="grid-sight.iife.js"></script>
+  <script src="../dist/grid-sight.iife.js"></script>
 
   <script>
     // Simple console logger for the demo

scripts/copy-demo.js

@@ -12,7 +12,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const rootDir = path.resolve(__dirname, '..');
-const sourceDir = path.join(rootDir, 'public', 'demo');
+const sourceDir = path.join(rootDir, 'public');
 const targetDir = path.join(rootDir, 'dist');
 
 async function copyDemoFiles() {