Add AFL data; lint fixes

Author: Rafferty97

TODO

@@ -1,3 +1,5 @@
 - Extract out context menu
 - Extract out cell content
-- Lift cell component to top level?
+- Lift cell component to top level?
+- Column auto-sizing
+- Fix reactivity in Basic Usage story

package.json

@@ -58,9 +58,11 @@
     "solid-js": "^1.6.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.2.7",
     "@storybook/addon-docs": "10.2.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^25.2.1",
+    "@types/papaparse": "^5.5.2",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "concurrently": "^9.2.1",
@@ -81,8 +83,7 @@
     "vite": "^7.3.1",
     "vite-plugin-solid": "^2.11.10",
     "vite-tsconfig-paths": "^6.0.5",
-    "vitest": "^4.0.18",
-    "@storybook/addon-a11y": "^10.2.7"
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "solid"
@@ -96,6 +97,7 @@
     "@kobalte/core": "^0.13.11",
     "@tanstack/solid-virtual": "^3.13.18",
     "clsx": "^2.1.1",
+    "papaparse": "^5.5.3",
     "radashi": "^12.7.1"
   }
 }

pnpm-lock.yaml

@@ -43,15 +43,15 @@ export async function pasteTableFromClipboard(): Promise<string[][] | null> {
         return parseTextTable(text)
       }
     }
-  } catch (e) {
+  } catch (_err) {
     // Ignore error, try readText
   }
 
   try {
     const text = await navigator.clipboard.readText()
     return parseTextTable(text)
-  } catch (e) {
-    console.error('Failed to read clipboard', e)
+  } catch (_err) {
+    // console.error('Failed to read clipboard', e)
     return null
   }
 }

src/lib/clipboard.ts

@@ -1,19 +1,33 @@
-import { createSignal } from 'solid-js'
+import { createSignal, onMount } from 'solid-js'
 import type { Meta, StoryObj } from 'storybook-solidjs-vite'
 import { fn } from 'storybook/test'
 import { ActiveRange, Table } from 'src'
+import Papa from 'papaparse'
 
 const meta = {
   args: {
-    columns: ['A', 'B', 'C', 'D', 'E'],
-    numRows: 10,
     accentColor: '#de3b84',
     setCellValue: fn(),
   },
   render: props => {
     const [activeRange, setActiveRange] = createSignal<ActiveRange>()
     const [widths, setWidths] = createSignal(new Map<string, number>())
 
+    const [data, setData] = createSignal<Record<string, unknown>[]>(props.data ?? [])
+
+    onMount(() => {
+      if (!props.url) return
+      fetch(props.url)
+        .then(resp => (resp.ok ? resp.text() : ''))
+        .then(raw => {
+          const parsed = Papa.parse<Record<string, unknown>>(raw, {
+            header: true,
+            skipEmptyLines: true,
+          })
+          setData(parsed.data)
+        })
+    })
+
     return (
       <div
         style={{
@@ -24,8 +38,11 @@ const meta = {
         }}
       >
         <Table
-          {...props}
-          getCellValue={(row, col) => `${col}${row}`}
+          columns={Object.keys(data()[0] ?? {})}
+          numRows={data().length}
+          getCellValue={(row, col) => data()[row]![col]!}
+          // getCellValue={(row, col) => `${col}${row}`}
+          setCellValue={props.setCellValue}
           activeRange={activeRange()}
           setActiveRange={setActiveRange}
           getColumnSize={col => widths().get(col)}
@@ -38,16 +55,27 @@ const meta = {
     )
   },
 } satisfies Meta<{
-  columns: string[]
-  numRows: number
+  data?: Record<string, unknown>[]
+  url?: string
   accentColor: string
-  setCellValue: (row: number, column: string, value: string) => void
+  setCellValue: (row: number, column: string, value: unknown) => void
 }>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
 export const BasicUsage = {
-  args: {},
+  args: {
+    data: [
+      { A: 1, B: 2, C: 3 },
+      { A: 4, B: 5, C: 6 },
+    ],
+  },
+} satisfies Story
+
+export const MediumSizedTable = {
+  args: {
+    url: new URL('/src/stories/stats.csv', import.meta.url),
+  },
 } satisfies Story