CI checks

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: Linting/Formatting
+name: Linting
 
 # Run on the opening of a pull request and subsequent commits to it.
 on: pull_request

.github/workflows/nuxt.yml.disabled

@@ -0,0 +1,40 @@
+# checks if nuxt module builds successfully
+
+name: Build Nuxt Module
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/common/**'
+      - 'packages/nuxt/**'
+      - 'packages/vue/**'
+  pull_request:
+    paths:
+      - 'packages/common/**'
+      - 'packages/nuxt/**'
+      - 'packages/vue/**'
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Build static Storybook 🛠
+        run: make nuxt-build

.github/workflows/storybook.yml

@@ -0,0 +1,120 @@
+# https://storybook.js.org/docs/vue/writing-tests/test-runner#run-against-non-deployed-storybooks
+
+name: 'Storybook'
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'apps/vue-storybook/**'
+      - 'packages/common/**'
+      - 'packages/vue/**'
+  pull_request:
+    paths:
+      - 'apps/vue-storybook/**'
+      - 'packages/common/**'
+      - 'packages/vue/**'
+
+jobs:
+  build:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Build Storybook
+        run: make vue-storybook-build
+
+      - name: Upload build to artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+  a11y-tests:
+    needs: build
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Install Playwright
+        run: pnpm --filter @explorer-1/vue-storybook exec playwright install
+
+      - name: Download storybook build
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+      - name: Serve Storybook & Run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+             "pnpm --filter @explorer-1/vue-storybook start" \
+             "pnpm --filter @explorer-1/vue-storybook test:ci"
+
+  publish:
+    needs: [build, a11y-tests]
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Download storybook build
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          storybookBaseDir: 'apps/vue-storybook'
+          storybookBuildDir: 'apps/vue-storybook/storybook_compiled'
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.github/workflows/vue.yml

@@ -0,0 +1,38 @@
+# checks if vue package builds successfully
+
+name: Vue
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/common/**'
+      - 'packages/vue/**'
+  pull_request:
+    paths:
+      - 'packages/common/**'
+      - 'packages/vue/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Build Vue package 🛠
+        run: make vue-build

.nvmrc

@@ -1 +1 @@
-v20.13.1
+v20.15.1

apps/html-storybook/.storybook/preview.ts

@@ -62,7 +62,7 @@ const preview = {
     },
     variantsConfig: {
       defaultValue: {
-        variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+        variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
         method: 'css'
       }
     },
@@ -98,7 +98,8 @@ const preview = {
             icon: 'circlehollow',
             title: 'Light Variant'
           },
-          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+          { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' }
         ],
         dynamicTitle: true
       }

apps/html-storybook/.storybook/withGlobals.ts

@@ -124,7 +124,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -160,7 +160,8 @@ export const globalTypes = {
           icon: 'circlehollow',
           title: 'Light Variant'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+        { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' }
       ],
       dynamicTitle: true
     }

apps/html-storybook/package.json

@@ -41,24 +41,24 @@
     "@percy/cli": "^1.28.6",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.1.6",
-    "@storybook/addon-docs": "^8.1.6",
-    "@storybook/addon-essentials": "^8.1.6",
-    "@storybook/addon-links": "^8.1.6",
-    "@storybook/addon-viewport": "^8.1.6",
-    "@storybook/html": "^8.1.6",
-    "@storybook/html-vite": "^8.1.6",
-    "@storybook/manager-api": "^8.1.6",
-    "@storybook/preview-api": "^8.1.6",
-    "@storybook/theming": "^8.1.6",
+    "@storybook/addon-a11y": "^8.2.1",
+    "@storybook/addon-docs": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-viewport": "^8.2.1",
+    "@storybook/html": "^8.2.1",
+    "@storybook/html-vite": "^8.2.1",
+    "@storybook/manager-api": "^8.2.1",
+    "@storybook/preview-api": "^8.2.1",
+    "@storybook/theming": "^8.2.1",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.6",
+    "storybook": "^8.2.1",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

apps/vue-storybook/.storybook/main.ts

@@ -1,10 +1,16 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 import remarkGfm from 'remark-gfm'
 const config = {
-  stories: [
-    './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
-    './../node_modules/@explorer-1/vue/src/**/*.docs.mdx'
-  ],
+  stories:
+    process.env.NODE_ENV === 'production'
+      ? [
+          './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
+          './../node_modules/@explorer-1/vue/src/**/*.docs.mdx'
+        ]
+      : [
+          './../../../packages/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
+          './../../../packages/vue/src/**/*.docs.mdx'
+        ],
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -26,7 +32,8 @@ const config = {
     },
     '@storybook/addon-a11y',
     '@whitespace/storybook-addon-html',
-    'storybook-addon-vue-slots'
+    'storybook-addon-vue-slots',
+    '@chromatic-com/storybook'
   ],
   staticDirs: [
     './../public',

apps/vue-storybook/.storybook/preview.ts

@@ -1,23 +1,20 @@
 /** @type { import('@storybook/vue3').Preview } */
-import type { App } from 'vue'
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 import useMockComponents from './_mock-components.js'
-import { StoryContext } from '@storybook/types'
-import { VueRenderer, setup, type Preview } from '@storybook/vue3'
+import { setup, type Preview } from '@storybook/vue3'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
 import { createPinia } from 'pinia'
 import filters from '@explorer-1/vue/src/utils/filters'
-import '@explorer-1/common-storybook/src/config/canvas.css'
 import '@explorer-1/common/src/scss/styles.scss'
 import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 
 const pinia = createPinia()
 
-setup((app: App, context?: StoryContext<VueRenderer>) => {
+setup((app, _context) => {
   app.use(pinia)
   app.use(vClickOutside)
   app.use(VueCompareImage)

apps/vue-storybook/.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+import type { TestRunnerConfig } from '@storybook/test-runner'
+import { injectAxe, checkA11y } from 'axe-playwright'
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page)
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true
+      }
+    })
+  }
+}
+
+export default config

apps/vue-storybook/.storybook/withGlobals.ts

@@ -1,5 +1,6 @@
 import { useEffect, useGlobals } from '@storybook/preview-api'
-import { useThemeStore } from '@explorer-1/vue/src/store/theme'
+// intentionally importing from node_modules path to avoid pinia initialization errors
+import { useThemeStore } from './../node_modules/@explorer-1/vue/src/store/theme'
 import { type Explorer1Theme } from '@explorer-1/vue/src/interfaces'
 
 export const getConfig = (config) => {
@@ -146,7 +147,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -182,7 +183,8 @@ export const globalTypes = {
           icon: 'circlehollow',
           title: 'Light Variant'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+        { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' }
       ],
       dynamicTitle: true
     }