Skip to content

Commit

Permalink
Merge pull request #382 from bethinkpl/IT-5852-sb8-vite
Browse files Browse the repository at this point in the history
  • Loading branch information
rogatty authored Oct 3, 2024
2 parents a27428f + dffe125 commit 5a63497
Show file tree
Hide file tree
Showing 166 changed files with 4,877 additions and 13,754 deletions.
File renamed without changes.
17 changes: 17 additions & 0 deletions .github/workflows/build-to-review-on-trigger.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
86 changes: 0 additions & 86 deletions .storybook/main.js

This file was deleted.

42 changes: 42 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion .storybook/manager.js → .storybook/manager.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { addons } from '@storybook/addons';
import { addons } from '@storybook/manager-api';

addons.setConfig({
sidebar: {
Expand Down
1 change: 1 addition & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<link rel="stylesheet" href="./preview.css">
3 changes: 3 additions & 0 deletions .storybook/preview.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import '../lib/styles/normalize';
@import '../lib/styles/design-system';
@import './storybook';
29 changes: 11 additions & 18 deletions .storybook/preview.js → .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -83,6 +79,9 @@ const customViewports = {
};

export const parameters = {
controls: {
disableSaveFromUI: true,
},
viewport: { viewports: customViewports },
options: {
storySort: {
Expand All @@ -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();
});
43 changes: 43 additions & 0 deletions .storybook/scss-preview-styles-plugin.ts
Original file line number Diff line number Diff line change
@@ -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',
});
}
},
});
20 changes: 10 additions & 10 deletions lib/styles/storybook.scss → .storybook/storybook.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
12 changes: 0 additions & 12 deletions babel.config.json

This file was deleted.

17 changes: 16 additions & 1 deletion deploy_storybook_to_s3.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
25 changes: 14 additions & 11 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
};
Loading

0 comments on commit 5a63497

Please sign in to comment.