Rework codebase to use changesets and storybook deploy

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/main.yml

@@ -0,0 +1,61 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+
+      # There is possibly a better way to do this. 
+      # One problem this has is it will still publish snapshots when it's a documentation/pipeline only change
+      # But maybe that's a good thing, an abundance of caution that a configuration change isn't breaking something. 
+      # Also, rather than inspecting the output of the changeset version command, we could use `npx changeset status --output=summary.json` and inspect that.
+
+      - name: Publish Snapshot 
+        run: |
+          OUTPUT=$(npx changeset version --snapshot ${COMMIT_SHA::8} 2>&1)
+              echo "$OUTPUT"
+              if echo "$OUTPUT" | grep -q "No unreleased changesets found, exiting"; then
+                echo "No unreleased changesets found. Skipping snapshot publish."
+                exit 0
+              fi
+          npx changeset publish --tag prerelease
+          git checkout -- .
+        env:
+          COMMIT_SHA: ${{ github.sha }}
+
+      - name: Create Release Pull Request
+
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/scripts/run-tests.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+output=$(node .github/workflows/scripts/wait-for-netlify-deploy.js)
+exit_code=$?
+
+# Check if the process exited with a non-zero status
+if [ $exit_code -ne 0 ]; then
+    echo "The process exited with a non-zero status: $exit_code"
+    exit $exit_code
+fi
+
+deploy_url=$(echo "$output" | grep -o 'Deploy URL: https://[^ ]*' | awk '{print $3}')
+echo "Deploy URL is: $deploy_url"
+TARGET_URL=$deploy_url/storybook-static npm run test-storybook -- --no-index-json

.github/workflows/scripts/wait-for-netlify-deploy.js

@@ -0,0 +1,89 @@
+[
+    "PR_NUMBER",
+    "BRANCH_NAME",
+    "NETLIFY_SITE_ID",
+    "NETLIFY_TOKEN",
+    "UPDATED_AT",
+    "COMMIT_SHA"
+].forEach((v) => {
+    if (!(process.env[v])) {
+        throw new Error(`❌ Env var: '${v}' was not provided`)
+    }
+})
+const {
+    PR_NUMBER,
+    BRANCH_NAME,
+    NETLIFY_SITE_ID,
+    NETLIFY_TOKEN,
+    UPDATED_AT,
+    COMMIT_SHA
+} = process.env;
+
+// 6 minutes
+const MAX_NUM_TRIES = 120;
+const DELAY_TIME_MS = 5000;
+
+async function main() {
+
+    let numTries = 0;
+    while (numTries <= MAX_NUM_TRIES) {
+        numTries++;
+        await new Promise((res) => setTimeout(res, DELAY_TIME_MS))
+        console.info(`Attempt #${numTries}`);
+
+        let pageNum = 1;
+        const result = await fetch(`https://api.netlify.com/api/v1/sites/${NETLIFY_SITE_ID}/deploys?branch=${BRANCH_NAME}&page=${pageNum}`, {
+            headers: {
+                "Authorization": `Bearer ${NETLIFY_TOKEN}`
+            }
+        });
+
+        if (!result.ok) {
+            throw new Error(`Result was not ok: ${result.statusText}`)
+        }
+
+        const json = await result.json();
+
+        if (json.length === 100) {
+            throw new Error("Result length was 100, you have there is probably another page of results")
+        }
+
+        const filteredResults = json.filter((v) => v.review_id === parseInt(PR_NUMBER) && v.commit_ref === COMMIT_SHA);
+        console.info(`Found ${filteredResults.length} results with matching review_id and commit_ref`);
+
+
+        const filteredResults2 = filteredResults.filter((v) => {
+            return new Date(v.created_at) > new Date(UPDATED_AT);
+        })
+
+        console.info(`Found ${filteredResults2.length} results with matching created_at greater than UPDATED_AT (${UPDATED_AT})`);
+
+        if (filteredResults2.length > 1) {
+            throw new Error(`Expect only one deploy to exist, got ${filteredResults2.length}`)
+        }
+
+
+        if (filteredResults2.length === 0) {
+            console.info("No matching results, deploy isn't created yet.");
+            continue;
+        }
+
+        const singleResult = filteredResults2[0];
+        const resultStatus = singleResult.state;
+
+        console.info(`Result state is '${resultStatus}'`)
+
+        if (resultStatus === "ready") {
+            console.info(`Deploy URL: ${singleResult.deploy_ssl_url}`)
+            process.exit(0);
+        }
+
+        if (result.status === "error") {
+            throw new Error("Deploy had an error status")
+        }
+    }
+
+    throw new Error("Maximum retries exceeded.")
+}
+
+main(); 

.github/workflows/wait-for-netlify.yml

@@ -0,0 +1,37 @@
+name: Tests after Netlify Deploy
+
+on:
+  pull_request:
+    branches:
+      - main
+env: 
+  PR_NUMBER: ${{ github.event.number }}
+  BRANCH_NAME: ${{ github.event.pull_request.head.ref }}
+  NETLIFY_SITE_ID: ${{ vars.NETLIFY_SITE_ID }}
+  NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
+
+  UPDATED_AT: ${{ github.event.pull_request.updated_at }}
+  COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
+
+
+jobs:
+  storybook-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps   
+
+      - name: Storybook tests
+        run: .github/workflows/scripts/run-tests.sh

.gitignore

@@ -37,3 +37,7 @@ next-env.d.ts
 
 
 dist/ 
+
+# storybook build
+storybook-static/
+public/storybook-static/

.storybook/main.ts

@@ -1,26 +1,21 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 
+const config = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs"
+  ],
+  framework: "@storybook/nextjs",
+  "staticDirs": [
+    "../public"
+  ],
   features: {
     experimentalRSC: true,
   },
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "@chromatic-com/storybook"
-  ],
-
-  framework: '@storybook/nextjs', 
-
-
-  docs: {},
-
-  staticDirs: ["../public"],
-
   typescript: {
     reactDocgen: "react-docgen-typescript"
   }

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+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
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);