From 7841e55e91d1c7ec292f4c197196259b9069a66b Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Fri, 16 Jun 2023 14:41:31 +0300 Subject: [PATCH] feat: partial design-system migration --- package.json | 1 - .../.storybook/font-awesome-icons.js | 8 - packages/design-system/.storybook/main.js | 99 +- packages/design-system/.storybook/preview.js | 35 +- .../design-system/.storybook/storybook.scss | 10 +- packages/design-system/package.json | 42 +- .../assets/images/storybook-logo-dark.png | Bin 0 -> 8215 bytes .../assets/images/storybook-logo-light.png | Bin 0 -> 3812 bytes .../N8nActionBox/ActionBox.stories.ts | 7 +- .../ActionDropdown.stories.ts | 9 +- .../N8nActionDropdown/ActionDropdown.vue | 15 +- .../N8nActionToggle/ActionToggle.stories.ts | 8 +- .../N8nActionToggle/ActionToggle.vue | 6 +- .../src/components/N8nAlert/Alert.stories.ts | 8 +- .../components/N8nAvatar/Avatar.stories.ts | 8 +- .../src/components/N8nAvatar/Avatar.vue | 10 +- .../src/components/N8nBadge/Badge.stories.ts | 5 +- .../components/N8nBlockUi/BlockUi.stories.ts | 5 +- .../components/N8nButton/Button.stories.ts | 55 +- .../src/components/N8nButton/Button.vue | 2 +- .../N8nButton/overrides/ElButton.vue | 2 +- .../components/N8nCallout/Callout.stories.ts | 7 +- .../src/components/N8nCard/Card.stories.ts | 8 +- .../src/components/N8nCard/Card.vue | 2 +- .../N8nCheckbox/Checkbox.stories.ts | 4 +- .../N8nColorPicker/ColorPicker.stories.ts | 4 +- .../N8nDatatable/Datatable.stories.ts | 5 +- .../src/components/N8nDatatable/Datatable.vue | 4 +- .../components/N8nFormBox/FormBox.stories.ts | 5 +- .../N8nFormInput/FormInput.stories.ts | 5 +- .../N8nFormInputs/FormInputs.stories.ts | 5 +- .../components/N8nHeading/Heading.stories.ts | 9 +- .../src/components/N8nHeading/Heading.vue | 2 +- .../src/components/N8nIcon/Icon.stories.ts | 7 +- .../src/components/N8nIcon/Icon.vue | 2 +- .../N8nIconButton/IconButton.stories.ts | 10 +- .../components/N8nIconButton/IconButton.vue | 2 +- .../N8nInfoAccordion/InfoAccordion.stories.ts | 4 +- .../components/N8nInfoTip/InfoTip.stories.ts | 5 +- .../src/components/N8nInput/Input.stories.ts | 11 +- .../src/components/N8nInput/Input.vue | 2 +- .../N8nInputLabel/InputLabel.stories.ts | 5 +- .../components/N8nInputLabel/InputLabel.vue | 2 +- .../N8nInputNumber/InputNumber.stories.ts | 7 +- .../src/components/N8nLink/Link.stories.ts | 7 +- .../src/components/N8nLink/Link.vue | 2 +- .../components/N8nLoading/Loading.stories.ts | 9 +- .../N8nMarkdown/Markdown.stories.ts | 9 +- .../src/components/N8nMenu/Menu.stories.ts | 11 +- .../src/components/N8nMenu/Menu.vue | 4 +- .../N8nMenuItem/MenuItem.stories.ts | 5 +- .../NodeCreatorNode.stories.ts | 6 +- .../N8nNodeCreatorNode/NodeCreatorNode.vue | 2 +- .../N8nNodeIcon/NodeIcon.stories.ts | 4 +- .../src/components/N8nNodeIcon/NodeIcon.vue | 2 +- .../components/N8nNotice/Notice.stories.ts | 6 +- .../src/components/N8nOption/Option.vue | 17 +- .../N8nPagination/Pagination.stories.ts | 5 +- .../components/N8nPagination/Pagination.vue | 14 +- .../components/N8nPopover/Popover.stories.ts | 13 +- .../src/components/N8nPopover/Popover.vue | 23 +- .../src/components/N8nPulse/Pulse.stories.ts | 2 +- .../N8nRadioButtons/RadioButtons.stories.ts | 5 +- .../RecycleScroller.stories.ts | 4 +- .../N8nResizeWrapper/ResizeWrapper.stories.js | 1 + .../src/components/N8nRoute/Route.vue | 4 +- .../components/N8nSelect/Select.stories.ts | 13 +- .../src/components/N8nSelect/Select.vue | 10 +- .../components/N8nSpinner/Spinner.stories.ts | 9 +- .../components/N8nSticky/Sticky.stories.ts | 5 +- .../src/components/N8nTabs/Tabs.stories.ts | 5 +- .../src/components/N8nTag/Tag.stories.ts | 5 +- .../src/components/N8nTag/Tag.vue | 2 +- .../src/components/N8nTags/Tags.stories.ts | 5 +- .../src/components/N8nText/Text.stories.ts | 25 +- .../src/components/N8nText/Text.vue | 2 +- .../components/N8nTooltip/Tooltip.stories.ts | 5 +- .../src/components/N8nTooltip/Tooltip.vue | 5 +- .../src/components/N8nTree/Tree.stories.ts | 4 +- .../N8nUserInfo/UserInfo.stories.ts | 5 +- .../N8nUserSelect/UserSelect.stories.ts | 5 +- .../N8nUsersList/UsersList.stories.ts | 5 +- .../design-system/src/components/index.ts | 68 +- .../src/locale/{format.js => format.ts} | 32 +- packages/design-system/src/locale/index.js | 42 - packages/design-system/src/locale/index.ts | 53 + .../src/locale/lang/{en.js => en.ts} | 14 +- packages/design-system/src/plugin.ts | 142 +- .../src/shims-vue2-boring-avatars.d.ts | 1 - .../src/styleguide/utilities/lists.stories.ts | 2 +- .../styleguide/utilities/spacing.stories.ts | 5 +- packages/design-system/src/types/i18n.ts | 3 + packages/design-system/src/types/index.ts | 1 + packages/design-system/vite.config.ts | 3 +- packages/editor-ui/package.json | 11 +- packages/editor-ui/src/plugins/i18n/index.ts | 12 +- packages/editor-ui/vite.config.ts | 6 +- patches/element-ui@2.15.12.patch | 262 - pnpm-lock.yaml | 6895 +++++++++-------- 99 files changed, 4109 insertions(+), 4160 deletions(-) delete mode 100644 packages/design-system/.storybook/font-awesome-icons.js create mode 100644 packages/design-system/public/assets/images/storybook-logo-dark.png create mode 100644 packages/design-system/public/assets/images/storybook-logo-light.png rename packages/design-system/src/locale/{format.js => format.ts} (53%) delete mode 100644 packages/design-system/src/locale/index.js create mode 100644 packages/design-system/src/locale/index.ts rename packages/design-system/src/locale/lang/{en.js => en.ts} (65%) delete mode 100644 packages/design-system/src/shims-vue2-boring-avatars.d.ts create mode 100644 packages/design-system/src/types/i18n.ts delete mode 100644 patches/element-ui@2.15.12.patch 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 0000000000000000000000000000000000000000..fa5e878f0b6ed1a37158a9c6cf8a18d51a0cd304 GIT binary patch literal 8215 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 cQ;yn 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 ({ + 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 @@