diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml index 9050f779fc..42bf46aa50 100644 --- a/.github/workflows/continuous-integration.yml +++ b/.github/workflows/continuous-integration.yml @@ -144,8 +144,6 @@ jobs: result-encoding: string - name: Create versioned storybook for chromatic run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.result }} yarn build:storybook - env: - CHROMATIC: true - name: Publish to Chromatic id: chromatic-publish uses: chromaui/action@v1 @@ -192,7 +190,7 @@ jobs: permissions: packages: write if: github.event_name == 'push' && github.ref == 'refs/heads/main' - needs: test + needs: lint services: visual-regression: image: ghcr.io/${{ github.repository }}/visual-regression:baseline diff --git a/.storybook/main.ts b/.storybook/main.ts index 1eea577b5c..2860d039df 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,5 @@ import type { StorybookConfig } from '@storybook/web-components-vite'; -import { type BuildOptions, type UserConfig, mergeConfig } from 'vite'; +import { type UserConfig, mergeConfig } from 'vite'; const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'], @@ -8,27 +8,9 @@ const config: StorybookConfig = { name: '@storybook/web-components-vite', options: {}, }, - docs: { - autodocs: true, - }, async viteFinal(config) { - let build: BuildOptions = {}; - if (process.env.CHROMATIC) { - build = { - sourcemap: false, - rollupOptions: { - output: { - manualChunks(_id) { - return 'main'; - }, - }, - }, - }; - } - return mergeConfig(config, { assetsInclude: ['src/**/*.md'], - build, }); }, }; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cc4bf441e9..a1b2185129 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,6 +1,6 @@ import * as tokens from '@sbb-esta/lyne-design-tokens'; -import type { StoryContext } from '@storybook/types'; -import type { Decorator } from '@storybook/web-components'; +import type { Parameters, StoryContext } from '@storybook/types'; +import type { Decorator, Preview } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; import { html } from 'lit'; @@ -41,7 +41,7 @@ const storybookViewports = breakpoints.reduce( {} as Record, ); -export const parameters = { +const parameters: Parameters = { // Set the viewports in Chromatic globally. chromatic: { delay: 2000, @@ -52,6 +52,7 @@ export const parameters = { breakpointNames, debounceTimeout: 10, }, + tags: ['autodocs'], docs: { toc: { ignoreSelector: '.docs-story h2', @@ -70,7 +71,7 @@ export const parameters = { }, }; -export const decorators: Decorator[] = [ +const decorators: Decorator[] = [ (story, context: StoryContext) => isChromatic() && context.parameters.layout !== 'fullscreen' ? html`
${story()}
` @@ -78,3 +79,11 @@ export const decorators: Decorator[] = [ withBackgroundDecorator, (story) => (isChromatic() ? html`
${story()}
` : story()), ]; + +const preview: Preview = { + decorators, + parameters, + tags: ['autodocs'], +}; + +export default preview; diff --git a/tools/visual-regression-testing/exec.ts b/tools/visual-regression-testing/exec.ts index 13ebd9665b..0f95de0070 100644 --- a/tools/visual-regression-testing/exec.ts +++ b/tools/visual-regression-testing/exec.ts @@ -2,7 +2,7 @@ // and if it is not Linux, runs it in a container. import { execSync, type ExecSyncOptionsWithStringEncoding } from 'child_process'; -import { cpSync, existsSync, mkdirSync } from 'fs'; +import { cpSync, existsSync, mkdirSync, writeFileSync } from 'fs'; import { platform } from 'os'; import { startTestRunner } from '@web/test-runner'; @@ -24,6 +24,7 @@ if (process.env.GITHUB_ACTIONS) { const screenshotDir = new URL('../../dist/screenshots/', import.meta.url); const artifactDir = new URL('../../dist/screenshots-artifact/', import.meta.url); mkdirSync(artifactDir, { recursive: true }); + writeFileSync(new URL('./.keep', artifactDir), '', 'utf8'); if (runner.passed) { // Tests passed. Do nothing.