build: fix storybook build (#2659)

---------

Co-authored-by: Jeremias Peier <[email protected]>

.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

.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, <UserConfig>{
       assetsInclude: ['src/**/*.md'],
-      build,
     });
   },
 };

.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<string, number>,
 );
 
-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,11 +71,19 @@ export const parameters = {
   },
 };
 
-export const decorators: Decorator[] = [
+const decorators: Decorator[] = [
   (story, context: StoryContext) =>
     isChromatic() && context.parameters.layout !== 'fullscreen'
       ? html`<div style="padding: 2rem;min-height: 100vh">${story()}</div>`
       : story(),
   withBackgroundDecorator,
   (story) => (isChromatic() ? html`<div class="sbb-disable-animation">${story()}</div>` : story()),
 ];
+
+const preview: Preview = {
+  decorators,
+  parameters,
+  tags: ['autodocs'],
+};
+
+export default preview;

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.