[Closes #465] Adds storybook testing to ci pipeline (#477)

* feat: EditStudenModal refactor into component + storybook + storybook testing

* fix: storybook tests

* feat: run storybook tests on pr/branch pushes

* fix: node version

* fix: ci

* fix: ci

* fix: test was failing, deleting for now

* fix: lint + type check

* Remove deprecated actions.argTypesRegex

* Use setup-node@v4 in entire file

---------

Co-authored-by: Francis Li <francisli@users.noreply.github.com>
Co-authored-by: Francis Li <mail@francisli.com>

.github/workflows/pr.yml

@@ -8,7 +8,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: "npm"
@@ -24,7 +24,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: "npm"
@@ -44,7 +44,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: "npm"
@@ -54,3 +54,24 @@ jobs:
         run: docker pull postgres:15
       - name: Run tests
         run: npm run test
+
+  storybook-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build:storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"

.storybook/preview.tsx

@@ -8,7 +8,6 @@ import "../src/styles/globals.css";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,