Skip to content

Commit

Permalink
CI checks (#484)
Browse files Browse the repository at this point in the history
* adding various ci checks

* replacing npx concurrently with pnpm regex in workflow script

* adding ThemeVariantGray to accommodate gray background use-cases

* fixing a few accessibility errors

* fixing a few storybook errors

* disabling nuxt module build test until we need it

* slight change to base teal to meet color contrast requirements

* ignoring image elements in chromatic that are expected to change in each snapshot

* documenting ThemeVariantGray

* tweaks to mixin carousel

* updating to storybook 8.2

* cleaning up dependencies

* fixing auto imports and hmr in storybook

* fixing imports in some page templates, updating node

* fixing pinia errors in local storybook

* fixing vue build error
  • Loading branch information
stephiescastle committed Jul 11, 2024
1 parent be9cc6d commit c0110fa
Show file tree
Hide file tree
Showing 61 changed files with 3,331 additions and 1,184 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/lint.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
40 changes: 40 additions & 0 deletions .github/workflows/nuxt.yml.disabled
Original file line number Diff line number Diff line change
@@ -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
120 changes: 120 additions & 0 deletions .github/workflows/storybook.yml
Original file line number Diff line number Diff line change
@@ -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
38 changes: 38 additions & 0 deletions .github/workflows/vue.yml
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v20.13.1
v20.15.1
5 changes: 3 additions & 2 deletions apps/html-storybook/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const preview = {
},
variantsConfig: {
defaultValue: {
variants: ['ThemeVariantLight', 'ThemeVariantDark'],
variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
method: 'css'
}
},
Expand Down Expand Up @@ -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
}
Expand Down
5 changes: 3 additions & 2 deletions apps/html-storybook/.storybook/withGlobals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const globalTypes = {
},
variantsConfig: {
defaultValue: {
variants: ['ThemeVariantLight', 'ThemeVariantDark'],
variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
method: 'css'
}
},
Expand Down Expand Up @@ -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
}
Expand Down
22 changes: 11 additions & 11 deletions apps/html-storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 12 additions & 5 deletions apps/vue-storybook/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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',
Expand Down
7 changes: 2 additions & 5 deletions apps/vue-storybook/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
22 changes: 22 additions & 0 deletions apps/vue-storybook/.storybook/test-runner.ts
Original file line number Diff line number Diff line change
@@ -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
8 changes: 5 additions & 3 deletions apps/vue-storybook/.storybook/withGlobals.ts
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -146,7 +147,7 @@ export const globalTypes = {
},
variantsConfig: {
defaultValue: {
variants: ['ThemeVariantLight', 'ThemeVariantDark'],
variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
method: 'css'
}
},
Expand Down Expand Up @@ -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
}
Expand Down
Loading

0 comments on commit c0110fa

Please sign in to comment.