-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IT-5852 Upgrade storybook and start with vite #382
Merged
Merged
Changes from all commits
Commits
Show all changes
50 commits
Select commit
Hold shift + click to select a range
816bc0a
IT-5852 Upgrade storybook and start with vite
fraszczakszymon 6b6fda5
Merge branch 'refs/heads/master' into IT-5852-sb8-vite
tweetgeek 35875a3
upgrade to 8.2, add support node_modules for yarn 3
tweetgeek 8904fe9
set sb config
tweetgeek 7678764
wrap all in defineComponent
tweetgeek af1120d
migrate defaultValue
tweetgeek c975998
fix dependencies version
tweetgeek 4f4cabc
fix types
tweetgeek 7c73389
fix reactivity, add 2 components in new API (Well & Tile)
tweetgeek a736637
set content-type on uploaded files
tweetgeek 4429b24
remove type: module
tweetgeek 1efe3d1
set [email protected]
tweetgeek 1126d9b
add @types/jest
tweetgeek 5349bc5
change jest preset
tweetgeek a148194
IT-5852 Handle styles in production bundles
fraszczakszymon 00adc7b
IT-5852 Move global.css
fraszczakszymon c00b4f8
Merge branch 'master' into IT-5852-sb8-vite
fraszczakszymon 71d85c1
IT-5852 Fix tests
fraszczakszymon 786a67d
IT-5852 Fix OverlayHeader
fraszczakszymon 5b17e08
IT-5852 Move dev dependencies
fraszczakszymon b9cc2ac
IT-5852 Remove vue-tsc
fraszczakszymon bc8de9a
IT-5852 Define type=module
fraszczakszymon 74b6bdc
IT-5852 Fix global css
fraszczakszymon d4761ca
IT-5852 Fix jest config
fraszczakszymon 5b1b74d
IT-5852 Handle global styles in dev mode
fraszczakszymon 26ea2a3
IT-5852 Revert module
fraszczakszymon ef5e675
IT-5852 Clean up
fraszczakszymon d2901f1
IT-5852 Clean up yarn changes
fraszczakszymon d645a9f
IT-5852 global.scss -> preview.scss, fix IconDefinition
fraszczakszymon 77779f2
IT-5852 Resolve fonts
fraszczakszymon 6b5eca4
IT-5852 Fix font paths
fraszczakszymon b475622
IT-5852 Revert initial alias
fraszczakszymon 6d1dd80
IT-5852 Fix stories args
fraszczakszymon 00c0cc3
IT-5852 Fix updateArgs usages
fraszczakszymon 28f9c9c
IT-5852 Upgrade storybook and set disableSaveFromUI
fraszczakszymon 14ae9c6
IT-5852 Use es2019
fraszczakszymon a77c452
IT-5852 Move plugin to separate file and add comments
fraszczakszymon 14c2cd9
IT-5852 Move storybook.scss
fraszczakszymon 99493db
IT-5852 Remove comment
fraszczakszymon d266200
IT-5852 Remove not needed dependencies
fraszczakszymon 9031ab2
IT-5852 Define type=module
fraszczakszymon 5ee5862
IT-5852 Clean up isDimmed
fraszczakszymon c1c6e23
IT-5852 Build umd only and exclude vite.config from tsconfig
fraszczakszymon 93014bd
IT-5852 Remove BethinkPreset
fraszczakszymon ccd9ee8
Merge branch 'master' into IT-5852-sb8-vite
fraszczakszymon d7515a6
IT-5852 Fix file types
fraszczakszymon e08c343
IT-5852 Fix actions
fraszczakszymon 7e20f4b
IT-5852 Reverted DrawerSection new lines change
fraszczakszymon 0d6cf6b
IT-5852 Disable dts in storybook build
fraszczakszymon dffe125
IT-5852 Fix datepicker story
fraszczakszymon File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<link rel="stylesheet" href="./preview.css"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}); | ||
} | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | ||
}, | ||
}, | ||
}, | ||
}; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are so many assets and it takes so long... I hope we find a better solution soon.