diff --git a/package.json b/package.json index df71eb1546..f1e46750c5 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,6 @@ "qqjs>globby": "^11.1.0" }, "patchedDependencies": { - "element-ui@2.15.12": "patches/element-ui@2.15.12.patch", "typedi@0.10.0": "patches/typedi@0.10.0.patch", "@sentry/cli@2.17.0": "patches/@sentry__cli@2.17.0.patch" } diff --git a/packages/design-system/.storybook/font-awesome-icons.js b/packages/design-system/.storybook/font-awesome-icons.js deleted file mode 100644 index 8713b3b661..0000000000 --- a/packages/design-system/.storybook/font-awesome-icons.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * These icons are only defined for storybook build - * Editor icons are defined seperately - */ -import { library } from '@fortawesome/fontawesome-svg-core'; -import { fas } from '@fortawesome/free-solid-svg-icons'; - -library.add(fas); diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js index d3a302a1b4..0cc118d97b 100644 --- a/packages/design-system/.storybook/main.js +++ b/packages/design-system/.storybook/main.js @@ -1,59 +1,58 @@ -const path = require('path'); +const { mergeConfig } = require('vite'); +const { resolve } = require('path'); -/** - * @type {import('@storybook/types').StorybookConfig} - */ module.exports = { - framework: { - name: '@storybook/vue-webpack5', - options: {}, - }, - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.{ts,js}'], + stories: [ + '../src/styleguide/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nActionBox/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nActionDropdown/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nActionToggle/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nAlert/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nAvatar/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nBadge/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nBlockUi/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nButton/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nCallout/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nCard/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nDatatable/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nHeading/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nIcon/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nIconButton/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nText/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nPopover/*.stories.@(js|jsx|ts|tsx)', + '../src/components/N8nTooltip/*.stories.@(js|jsx|ts|tsx)', + ], addons: [ + '@storybook/addon-styling', '@storybook/addon-links', '@storybook/addon-essentials', - { - name: '@storybook/addon-postcss', - options: { - postcssLoaderOptions: { - implementation: require('postcss'), - }, - }, - }, - 'storybook-addon-themes', + // Disabled until this is actually used rather otherwise its a blank tab + // '@storybook/addon-interactions', + '@storybook/addon-a11y', + 'storybook-dark-mode', ], - webpackFinal: async (config) => { - config.module.rules.push({ - test: /\.scss$/, - oneOf: [ - { - resourceQuery: /module/, - use: [ - 'vue-style-loader', - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[path][name]__[local]--[hash:base64:5]', - }, - }, - }, - 'sass-loader', - ], - include: path.resolve(__dirname, '../'), - }, - { - use: ['vue-style-loader', 'css-loader', 'sass-loader'], - include: path.resolve(__dirname, '../'), - }, - ], + staticDirs: ['../public'], + framework: { + name: '@storybook/vue3-vite', + options: {}, + }, + disableTelemetry: true, + async viteFinal(config, { configType }) { + // return the customized config + return mergeConfig(config, { + // customize the Vite config here + resolve: { + alias: [ + { + find: /^@n8n-design-system\//, + replacement: `${resolve(__dirname, '..')}/src/`, + }, + ], + }, + define: { 'process.env': {} }, }); - - config.resolve.alias = { - ...config.resolve.alias, - '@/': path.resolve(__dirname, '../src/'), - }; - - return config; + }, + docs: { + autodocs: true, }, }; diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js index 1e01ec1dd4..6a2d629bd8 100644 --- a/packages/design-system/.storybook/preview.js +++ b/packages/design-system/.storybook/preview.js @@ -1,23 +1,34 @@ -import './font-awesome-icons'; +import { setup } from '@storybook/vue3'; + import './storybook.scss'; -import ElementUI from 'element-ui'; -import lang from 'element-ui/lib/locale/lang/en'; -import locale from 'element-ui/lib/locale'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { fas } from '@fortawesome/free-solid-svg-icons'; + +// import ElementUI from 'element-ui'; +// import lang from 'element-ui/lib/locale/lang/en'; +// import { locale } from 'element-plus'; import { N8nPlugin } from '../src/plugin'; -import Vue from 'vue'; +// import Vue from 'vue'; +// +// Vue.use(ElementUI); +// Vue.use(N8nPlugin); +// -Vue.use(ElementUI); -Vue.use(N8nPlugin); +// // https://github.com/storybookjs/storybook/issues/6153 +// Vue.prototype.toJSON = function () { +// return this; +// }; -locale.use(lang); +setup((app) => { + library.add(fas); -// https://github.com/storybookjs/storybook/issues/6153 -Vue.prototype.toJSON = function () { - return this; -}; + // locale.use(lang); + + app.use(N8nPlugin); +}); export const parameters = { actions: { diff --git a/packages/design-system/.storybook/storybook.scss b/packages/design-system/.storybook/storybook.scss index 125f7d57a8..e40bdff1d1 100644 --- a/packages/design-system/.storybook/storybook.scss +++ b/packages/design-system/.storybook/storybook.scss @@ -1,11 +1,11 @@ @use './fonts.scss'; -@use '~/src/css/base.scss' with ( - $font-path: '~element-ui/lib/theme-chalk/fonts' -); +@use '../src/css/base.scss'; // with ( +// $font-path: 'element-ui/lib/theme-chalk/fonts' +//); -@use '~/src/css/reset.scss'; -@use '~/src/css/index.scss'; +@use '../src/css/reset.scss'; +@use '../src/css/index.scss'; .multi-container > * { margin-bottom: 10px; diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 4010a05b9b..8085df7f9f 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -40,37 +40,43 @@ "devDependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@fortawesome/vue-fontawesome": "^2.0.9", - "@storybook/addon-actions": "^7.0.7", - "@storybook/addon-docs": "^7.0.7", - "@storybook/addon-essentials": "^7.0.7", - "@storybook/addon-links": "^7.0.7", - "@storybook/addon-postcss": "^3.0.0-alpha.1", - "@storybook/vue": "^7.0.7", - "@storybook/vue-webpack5": "^7.0.7", + "@fortawesome/vue-fontawesome": "^3.0.3", + "@storybook/addon-a11y": "^7.0.21", + "@storybook/addon-actions": "^7.0.21", + "@storybook/addon-docs": "^7.0.21", + "@storybook/addon-essentials": "^7.0.21", + "@storybook/addon-links": "^7.0.21", + "@storybook/addon-postcss": "3.0.0-alpha.1", + "@storybook/addon-styling": "^1.3.0", + "@storybook/vue3": "^7.0.21", + "@storybook/vue3-vite": "^7.0.21", "@testing-library/jest-dom": "^5.16.5", "@testing-library/user-event": "^14.4.3", - "@testing-library/vue": "^5.8.3", + "@testing-library/vue": "^6.6.1", "@types/markdown-it": "^12.2.3", "@types/markdown-it-emoji": "^2.0.2", "@types/markdown-it-link-attributes": "^3.0.1", - "@types/sanitize-html": "^2.8.0", - "autoprefixer": "^10.4.13", - "core-js": "^3.27.2", + "@types/sanitize-html": "^2.9.0", + "@vitejs/plugin-vue": "^4.2.3", + "autoprefixer": "^10.4.14", + "core-js": "^3.31.0", "jsdom": "21.1.0", - "sass": "^1.58.0", - "sass-loader": "^13.2.0", - "storybook": "^7.0.7", - "storybook-addon-themes": "^6.1.0" + "sass": "^1.63.4", + "sass-loader": "^13.3.2", + "storybook": "^7.0.21", + "storybook-addon-themes": "^6.1.0", + "storybook-dark-mode": "^3.0.0" }, "dependencies": { - "element-ui": "~2.15.12", + "element-plus": "^2.3.6", + "element-ui": "~2.15.13", "markdown-it": "^13.0.1", "markdown-it-emoji": "^2.0.2", "markdown-it-link-attributes": "^4.0.1", "markdown-it-task-lists": "^2.1.1", "sanitize-html": "2.10.0", - "vue": "^2.7.14", + "vue": "^3.3.4", + "vue-boring-avatars": "^1.3.0", "vue2-boring-avatars": "^0.3.8", "xss": "^1.0.14" } diff --git a/packages/design-system/public/assets/images/storybook-logo-dark.png b/packages/design-system/public/assets/images/storybook-logo-dark.png new file mode 100644 index 0000000000..fa5e878f0b Binary files /dev/null and b/packages/design-system/public/assets/images/storybook-logo-dark.png differ diff --git a/packages/design-system/public/assets/images/storybook-logo-light.png b/packages/design-system/public/assets/images/storybook-logo-light.png new file mode 100644 index 0000000000..3a99ee7e71 Binary files /dev/null and b/packages/design-system/public/assets/images/storybook-logo-light.png differ diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.stories.ts b/packages/design-system/src/components/N8nActionBox/ActionBox.stories.ts index dfc6d27cf7..b8d90ca151 100644 --- a/packages/design-system/src/components/N8nActionBox/ActionBox.stories.ts +++ b/packages/design-system/src/components/N8nActionBox/ActionBox.stories.ts @@ -1,6 +1,6 @@ import N8nActionBox from './ActionBox.vue'; import { action } from '@storybook/addon-actions'; -import type { StoryFn } from '@storybook/vue'; +import type { StoryFn } from '@storybook/vue3'; export default { title: 'Atoms/ActionBox', @@ -9,8 +9,8 @@ export default { calloutTheme: { control: { type: 'select', - options: ['info', 'success', 'warning', 'danger', 'custom'], }, + options: ['info', 'success', 'warning', 'danger', 'custom'], }, }, parameters: { @@ -23,11 +23,12 @@ const methods = { }; const Template: StoryFn = (args, { argTypes }) => ({ + setup: () => ({ args }), props: Object.keys(argTypes), components: { N8nActionBox, }, - template: '', + template: '', methods, }); diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts index feb43c23bf..8e229231df 100644 --- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts +++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts @@ -1,5 +1,5 @@ import N8nActionDropdown from './ActionDropdown.vue'; -import type { StoryFn } from '@storybook/vue'; +import type { StoryFn } from '@storybook/vue3'; export default { title: 'Atoms/ActionDropdown', @@ -8,8 +8,8 @@ export default { placement: { control: { type: 'select', - options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'], }, + options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'], }, activatorIcon: { control: { @@ -19,18 +19,19 @@ export default { trigger: { control: { type: 'select', - options: ['click', 'hover'], }, + options: ['click', 'hover'], }, }, }; const template: StoryFn = (args, { argTypes }) => ({ + setup: () => ({ args }), props: Object.keys(argTypes), components: { N8nActionDropdown, }, - template: '', + template: '', }); export const defaultActionDropdown = template.bind({}); diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue index 75a785a590..57e28af281 100644 --- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue +++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue @@ -36,11 +36,7 @@