Merge pull request #35 from github/more-examples

More examples

Author: mattcosta7

.changeset/better-ideas-watch.md

@@ -0,0 +1,5 @@
+---
+'@github-ui/storybook-addon-performance-panel': patch
+---
+
+Improve forced reflow detection by instrumenting CSS style property setters. Previously only layout-triggering getter reads were monitored, so write-then-read patterns using `element.style.width = '...'` or `style.setProperty()` were missed. The collector now intercepts writes to layout-affecting CSS properties (width, height, margin, padding, position, etc.) to correctly mark layout as dirty before a subsequent reflow-triggering read.

.changeset/fix-element-timing-clear.md

@@ -0,0 +1,5 @@
+---
+'@github-ui/storybook-addon-performance-panel': patch
+---
+
+Fix Element Timing collector not clearing on reset or story switch. Entries from the browser's performance timeline persisted across resets because `buffered: true` replayed stale entries. The collector now tracks an epoch timestamp and filters out entries recorded before the last reset/start.

.github/workflows/ci.yml

@@ -71,13 +71,9 @@ jobs:
       - run: npm run tsc
 
   test:
-    name: Test (${{ matrix.browser }})
+    name: Test
     needs: install
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chromium, firefox, webkit]
     steps:
       - uses: actions/checkout@v6
       - uses: actions/setup-node@v6
@@ -93,40 +89,15 @@ jobs:
       - uses: actions/cache@v5
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ matrix.browser }}-${{ hashFiles('**/package-lock.json') }}
-      - run: npx playwright install --with-deps ${{ matrix.browser }}
+          key: playwright-${{ hashFiles('**/package-lock.json') }}
+      - run: npx playwright install --with-deps chromium firefox webkit
       - run: npx vitest run --project browser
         working-directory: packages/storybook-addon-performance-panel
-        env:
-          VITEST_BROWSER: ${{ matrix.browser }}
-
-  build:
-    name: Build Docs
-    needs: install
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-      - uses: actions/cache/restore@v5
-        with:
-          path: |
-            node_modules
-            packages/*/node_modules
-            packages/storybook-addon-performance-panel/dist
-          key: deps-${{ github.sha }}
-      - run: npm run build-storybook -w @github-ui/docs
-      - uses: actions/upload-artifact@v6
-        with:
-          name: addon-dist
-          path: packages/storybook-addon-performance-panel/dist/
-          retention-days: 7
 
   ci:
     name: CI
     if: always()
-    needs: [lint, typecheck, test, build]
+    needs: [lint, typecheck, test]
     runs-on: ubuntu-latest
     steps:
       - run: |

eslint.config.ts

@@ -2,6 +2,7 @@ import eslint from '@eslint/js'
 import type {Linter} from 'eslint'
 import type {ESLint} from 'eslint'
 import {defineConfig} from 'eslint/config'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
 import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'
 import eslintPluginReact from 'eslint-plugin-react'
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
@@ -13,6 +14,10 @@ export default defineConfig(
   {
     ignores: ['**/dist/**', '**/node_modules/**', '**/storybook-static/**'],
   },
+  {
+    // ESLint 9 ignores dotfiles by default; explicitly include .storybook
+    files: ['**/.storybook/**/*.{ts,tsx}'],
+  },
   eslint.configs.recommended,
   tseslint.configs.strictTypeChecked,
   tseslint.configs.stylisticTypeChecked,
@@ -33,6 +38,8 @@ export default defineConfig(
     settings: {react: {version: 'detect'}},
   },
   eslintPluginReact.configs.flat['jsx-runtime'] as Linter.Config,
+
+  jsxA11y.flatConfigs.strict,
   {
     plugins: {'react-hooks': eslintPluginReactHooks as unknown as ESLint.Plugin},
     rules: eslintPluginReactHooks.configs.recommended.rules,