FOUR-13446 Implement Pages Fixes

.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
   extends: [
     "plugin:vue/recommended",
     "airbnb-base",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
 
   parserOptions: {

.github/workflows/storybook.yml

@@ -0,0 +1,38 @@
+name: Storybook
+on:
+    pull_request:
+      types: [opened, reopened, synchronize, edited]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
+      - name: Cache playwright binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+          path: |
+            ~/.cache/ms-playwright
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - 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:6006 && npm run test-storybook --coverage"

.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/vue-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-docs",
+    "@storybook/addon-interactions"
+  ],
+  framework: {
+    name: "@storybook/vue-vite",
+    options: {}
+  },
+  docs: {
+    autodocs: "tag"
+  }
+};
+export default config;

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  // Place the controls panel at the bottom of the canvas
+  panelPosition: 'bottom',
+});

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/vue').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;