IT-5852 Upgrade storybook and start with vite

.github/workflows/build-to-review-on-trigger.yml

@@ -60,6 +60,23 @@ jobs:
       - name: Push to S3 🚀
         run: s3cmd put -r -P public/storybook/* s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/
 
+      - name: "Setting Content-Type to application/javascript for all .js files"
+        run: >-
+          find "$LOCAL_DIRECTORY" -type f -name "*.js" | while read FILE; do
+            RELATIVE_PATH="${FILE#public/storybook/}"
+            echo "s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/$RELATIVE_PATH"
+            s3cmd modify --add-header="Content-Type: application/javascript" s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/$RELATIVE_PATH
+          done
+
+
+      - name: "Set Content-Type to text/css for all .css files"
+        run: >-
+          find "$LOCAL_DIRECTORY" -type f -name "*.css" | while read FILE; do
+            RELATIVE_PATH="${FILE#public/storybook/}"
+            echo "s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/$RELATIVE_PATH"
+            s3cmd modify --add-header="Content-Type: text/css" s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/$RELATIVE_PATH
+          done
+
       - name: Add comment with URL
         uses: thollander/actions-comment-pull-request@v2
         with:

.storybook/main.ts

@@ -0,0 +1,42 @@
+import { StorybookConfig } from '@storybook/vue3-vite';
+import { scssPreviewStylesPlugin } from './scss-preview-styles-plugin';
+
+const isProductionMode = () => {
+	return process.env.NODE_ENV === 'production';
+}
+
+const ignoredProductionPlugins = [
+	'vite:dts',
+];
+
+const config: StorybookConfig = {
+	stories: ['../lib/**/*.stories.@(js|ts)'],
+	addons: [
+		'@storybook/addon-actions',
+		'@storybook/addon-designs',
+		'@storybook/addon-docs',
+		'@storybook/addon-controls',
+		'@storybook/addon-storysource',
+		'@storybook/addon-viewport',
+	],
+	staticDirs: [
+		{
+			from: '../lib/fonts',
+			to: '~design-system/lib/fonts',
+		}
+	],
+	framework: '@storybook/vue3-vite',
+	viteFinal: (config) => {
+		return {
+			...config,
+			plugins: [
+				...config.plugins.filter((plugin) => !ignoredProductionPlugins.includes((plugin as any)?.name)),
+				scssPreviewStylesPlugin({
+					isProductionMode: isProductionMode(),
+				})
+			]
+		};
+	},
+};
+
+export default config;

.storybook/manager.js → .storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
 	sidebar: {

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="./preview.css">

.storybook/preview.scss

@@ -0,0 +1,3 @@
+@import '../lib/styles/normalize';
+@import '../lib/styles/design-system';
+@import './storybook';

.storybook/preview.js → .storybook/preview.ts

@@ -1,12 +1,8 @@
-import 'design-system/lib/styles/_normalize.scss';
-import 'design-system/lib/styles/design-system.scss';
-import 'design-system/lib/styles/storybook.scss';
-
-import { useArgs } from '@storybook/client-api';
-import { initialize } from 'design-system/lib/js/icons/fontawesome';
-import { app } from '@storybook/vue3';
+import { initialize } from '../lib/js/icons/fontawesome';
 import { initializePrimeVue } from '../lib/js';
 
+import { setup } from '@storybook/vue3';
+
 const customViewports = {
 	mobile: {
 		name: 'Breakpoint mobile',
@@ -83,6 +79,9 @@ const customViewports = {
 };
 
 export const parameters = {
+	controls: {
+		disableSaveFromUI: true,
+	},
 	viewport: { viewports: customViewports },
 	options: {
 		storySort: {
@@ -99,14 +98,8 @@ export const parameters = {
 	},
 };
 
-// See https://craigbaldwin.com/blog/updating-args-storybook-vue/
-export const decorators = [
-	(story, context) => {
-		const [_, updateArgs] = useArgs();
-		return story({ ...context, updateArgs });
-	},
-];
-
-initializePrimeVue(app);
-
-initialize();
+setup((app) => {
+	// https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue#extending-the-vue-application
+	initializePrimeVue(app);
+	initialize();
+});

.storybook/scss-preview-styles-plugin.ts

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+import sass from 'sass';
+
+const cssFilePath = path.resolve(__dirname, '../public/storybook/preview.css');
+const previewStylesPath = path.resolve(__dirname, '../.storybook/preview.scss');
+
+// Custom plugin to compile global styles for storybook preview and load them at the very beginning
+// Due to the structure of our components, it's needed to load global styles before components styles
+export const scssPreviewStylesPlugin = ({ isProductionMode }) => ({
+    name: 'scss-preview-styles',
+    buildStart() {
+        if (isProductionMode) {
+            const result = sass.compile(previewStylesPath);
+
+            // Compile and save preview.css file, so we can serve it in build storybook (using preview-head.html)
+            if (!fs.existsSync(path.resolve(__dirname, '../public/storybook'))) {
+                fs.mkdirSync(path.resolve(__dirname, '../public/storybook'), { recursive: true });
+            }
+
+            fs.writeFileSync(cssFilePath, result.css.toString());
+        }
+    },
+    configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+            // Serve compiled CSS file in development mode so it's not required to manually compile the file upfront
+            if (req.originalUrl === '/preview.css' && !isProductionMode) {
+                res.setHeader('Content-Type', 'text/css');
+                res.end(sass.compile(previewStylesPath).css);
+            } else {
+                next();
+            }
+        });
+    },
+    handleHotUpdate({ file, server }) {
+        // Reload whole storybook on any scss change in order to catch and apply changes in global styles
+        if (file.endsWith('.scss')) {
+            server.ws.send({
+                type: 'full-reload',
+            });
+        }
+    },
+});

lib/styles/storybook.scss → .storybook/storybook.scss

@@ -1,13 +1,13 @@
-@import 'settings/colors/raw';
-@import 'settings/colors/raw-wnl';
-@import 'settings/colors/raw-bodywork';
-@import 'settings/colors/tokens-variables';
-@import 'settings/colors/tokens-wnl-variables';
-@import 'settings/colors/tokens-bodywork-variables';
-@import 'settings/colors/tokens';
-@import 'settings/colors/tokens-bodywork';
-@import 'settings/colors/tokens-wnl';
-@import 'settings/typography/tokens';
+@import '../lib/styles/settings/colors/raw';
+@import '../lib/styles/settings/colors/raw-wnl';
+@import '../lib/styles/settings/colors/raw-bodywork';
+@import '../lib/styles/settings/colors/tokens-variables';
+@import '../lib/styles/settings/colors/tokens-wnl-variables';
+@import '../lib/styles/settings/colors/tokens-bodywork-variables';
+@import '../lib/styles/settings/colors/tokens';
+@import '../lib/styles/settings/colors/tokens-bodywork';
+@import '../lib/styles/settings/colors/tokens-wnl';
+@import '../lib/styles/settings/typography/tokens';
 
 $fontFamily: 'BlinkMacSystemFont', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
 	'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

deploy_storybook_to_s3.sh

@@ -8,6 +8,7 @@ fi
 
 BUCKET="wnl-design-system-preview"
 BRANCH=$(git symbolic-ref --short -q HEAD | grep -oE -- '[A-Z]+-[0-9]+')
+LOCAL_DIRECTORY="public/storybook"
 
 if [ ! "$BRANCH" ]
 then
@@ -19,6 +20,20 @@ echo "I am building a storybook"
 yarn storybook:build
 
 echo "Deploying storybook to $BUCKET as $BRANCH"
-s3cmd put -r -P public/storybook/* s3://$BUCKET/$BRANCH/
+s3cmd put -r -P $LOCAL_DIRECTORY/* s3://$BUCKET/$BRANCH/
+
+echo "Setting Content-Type to application/javascript for all .js files"
+find "$LOCAL_DIRECTORY" -type f -name "*.js" | while read FILE; do
+    RELATIVE_PATH="${FILE#"$LOCAL_DIRECTORY/"}"
+    echo "s3://$BUCKET/$BRANCH/$RELATIVE_PATH"
+    s3cmd modify --add-header="Content-Type: application/javascript" s3://$BUCKET/$BRANCH/$RELATIVE_PATH
+done
+
+echo "Setting Content-Type to text/css for all .css files"
+find "$LOCAL_DIRECTORY" -type f -name "*.css" | while read FILE; do
+    RELATIVE_PATH="${FILE#"$LOCAL_DIRECTORY/"}"
+    echo "s3://$BUCKET/$BRANCH/$RELATIVE_PATH"
+    s3cmd modify --add-header="Content-Type: text/css" s3://$BUCKET/$BRANCH/$RELATIVE_PATH
+done
 
 echo "Your storybook is available on: https://$BUCKET.s3.amazonaws.com/$BRANCH/index.html"

jest.config.js

@@ -1,25 +1,28 @@
-module.exports = {
+export default {
 	verbose: true,
-	preset: '@vue/cli-plugin-unit-jest/presets/typescript',
-	testEnvironment: 'jsdom',
+	preset: 'ts-jest',
+	testEnvironment: 'jest-environment-jsdom',
 	moduleNameMapper: {
-		'^design-system/lib/(.*)$': '<rootDir>/lib/$1',
-		'^design-system/styles/(.*)$': '<rootDir>/lib/styles/$1',
-		'^design-system/images/(.*)$': '<rootDir>/lib/images/$1',
-		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.ts',
+		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.cjs',
 	},
 	testMatch: ['<rootDir>/lib/js/**/*.spec.ts', '<rootDir>/tools/importers/*.spec.ts'],
 	transform: {
 		'^.+\\.js$': 'babel-jest',
 		'^.+\\.ts$': 'ts-jest',
 		'.*\\.(vue)$': '@vue/vue3-jest',
-		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.ts',
-		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.ts',
+		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.cjs',
+		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.cjs',
 	},
-	moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
-
+	moduleFileExtensions: ['js', 'mjs', 'ts', 'json', 'vue'],
 	setupFilesAfterEnv: ['<rootDir>/lib/js/typings.d.ts', '<rootDir>/lib/js/tests/globals.ts'],
 	testEnvironmentOptions: {
 		customExportConditions: ['node', 'node-addons'],
 	},
+	globals: {
+		'vue-jest': {
+			compilerOptions: {
+				whitespace: 'preserve',
+			},
+		},
+	},
 };