@bethinkpl/design-system 15.2.1 → 16.0.0

package/lib/js/styles/ColorsTokensPrimaryWnl/ColorsTokensPrimaryWnl.stories.ts

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import tokensList from '../../../styles/settings/colors/_tokens-wnl.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

package/lib/js/styles/Spacings/Spacings.stories.ts

@@ -1,4 +1,4 @@
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'foundations/Spacings',
@@ -19,9 +19,7 @@ const spacings = [
 	{ name: 'space-xxxxxs', value: 2 },
 ];
 
-const StoryTemplate: StoryFn = (argTypes) => ({
-	components: {},
-	props: Object.keys(argTypes),
+const StoryTemplate: StoryFn = () => ({
 	data() {
 		return {
 			spacings: Object.freeze(spacings),
@@ -38,15 +36,15 @@ const StoryTemplate: StoryFn = (argTypes) => ({
 		},
 	},
 	template: `
-      <div>
-      <div v-for="spacing in spacings">
-        <h2>{{spacing.name}}</h2>
-        <code>
-          \${{spacing.name}}: {{spacing.value}}px
-        </code>
-        <div :style="getStyles(spacing)"></div>
-      </div>
-      </div>
+			<div>
+			<div v-for="spacing in spacings">
+				<h2>{{ spacing.name }}</h2>
+				<code>
+					\${{ spacing.name }}: {{ spacing.value }}px
+				</code>
+				<div :style="getStyles(spacing)"></div>
+			</div>
+			</div>
     `,
 });
 

package/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import source from '../../../styles/settings/typography/_tokens.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

package/lib/js/styles/TypographyVariables/TypographyVariables.stories.ts

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
 
 import ItemsList from './../ItemsList.vue';
 import source from '../../../styles/settings/typography/_variables-css.json';
@@ -9,9 +9,11 @@ export default {
 	component: ItemsList,
 } as Meta<typeof ItemsList>;
 
-const StoryTemplate: StoryFn<typeof ItemsList> = (argTypes) => ({
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
-	props: Object.keys(argTypes),
+	setup() {
+		return { ...args };
+	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
 });

package/lib/js/tests/emptyTransformer.ts

@@ -1,6 +1,8 @@
 module.exports = {
 	process() {
-		return 'module.exports = {};';
+		return {
+			code: 'module.exports = ""',
+		};
 	},
 	getCacheKey() {
 		// The output is always the same.

package/lib/js/typings.d.ts

@@ -1,17 +1,21 @@
 // TypeScript compiler doesn't read webpack config so we need to tell him how interpret import Vue files
 
 declare module '*.vue' {
-	import Vue from 'vue';
-	export default Vue;
+	import { ConcreteComponent } from '@vue/runtime-dom';
+	export { ConcreteComponent };
 }
 
 declare module '*.svg' {
-	import Vue, { VueConstructor } from 'vue';
-	const content: VueConstructor<Vue>;
-	export default content;
+	import { CompatVue } from '@vue/runtime-dom';
+	const Vue: CompatVue;
+	export default Vue;
+	export * from '@vue/runtime-dom';
+	const { configureCompat } = Vue;
+	export { configureCompat };
 }
 
 declare module 'vue-ripple-directive' {
+	// TODO does it work?
 	import { DirectiveFunction } from 'vue/types/options';
 	export default {} as DirectiveFunction;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "15.2.1",
+  "version": "16.0.0",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",
@@ -36,20 +36,24 @@
     "@fortawesome/pro-light-svg-icons": "6.1.1",
     "@fortawesome/pro-regular-svg-icons": "6.1.1",
     "@fortawesome/pro-solid-svg-icons": "6.1.1",
-    "@fortawesome/vue-fontawesome": "2.0.6",
-    "@storybook/addon-actions": "6.5.13",
+    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-controls": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",
     "@storybook/addon-storysource": "^6.5.13",
     "@storybook/addon-viewport": "^6.5.13",
-    "@storybook/vue": "^6.5.13",
+    "@storybook/builder-webpack5": "6.5.13",
+    "@storybook/manager-webpack5": "6.5.13",
+    "@storybook/vue3": "6.5.13",
     "@types/node": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "5.40.1",
-    "@typescript-eslint/parser": "5.40.1",
-    "@vue/cli-plugin-typescript": "^4.5.19",
-    "@vue/cli-plugin-unit-jest": "^4.5.3",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/test-utils": "^1.3.0",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
+    "@vue/cli-plugin-typescript": "5.0.4",
+    "@vue/cli-plugin-unit-jest": "5.0.4",
+    "@vue/cli-service": "5.0.4",
+    "@vue/compiler-sfc": "3.2.31",
+    "@vue/test-utils": "2.2.7",
+    "@vue/vue3-jest": "29.2.2",
     "axios": "^0.26.0",
     "babel-eslint": "10.1.0",
     "dotenv": "16.0.3",
@@ -58,7 +62,8 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-storybook": "0.6.6",
     "eslint-plugin-vue": "9.6.0",
-    "jest": "26.1.0",
+    "jest": "^29.4.0",
+    "jest-environment-jsdom": "^29.4.0",
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
     "postcss-prefix-selector": "^1.9.0",
@@ -70,15 +75,13 @@
     "stylelint-config-standard": "20.0.0",
     "stylelint-order": "6.0.3",
     "stylelint-scss": "3.18.0",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "4.6.4",
-    "vue": "^2.6.11",
-    "vue-jest": "^4.0.1",
-    "vue-loader": "^15.9.6",
-    "vue-popperjs": "catalystio/vue-popper#master",
-    "vue-ripple-directive": "bethinkpl/vue-ripple-directive#2.1.1",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.12"
+    "vue": "3.2.45",
+    "vue-loader": "17.0.0",
+    "vue-popperjs": "bethinkpl/vue-popper#4714b024fda5c3b66f3f856c5ca2a470ff2cb51e",
+    "vue-ripple-directive": "bethinkpl/vue-ripple-directive#3.0.0",
+    "vue-svg-loader": "0.17.0-beta.2"
   }
 }

package/stylelint.config.js

@@ -8,6 +8,10 @@ module.exports = {
 
 		'order/order': [
 			[
+				{
+					name: 'use',
+					type: 'at-rule',
+				},
 				{
 					name: 'import',
 					type: 'at-rule',
@@ -26,10 +30,10 @@ module.exports = {
 		indentation: 'tab',
 		'value-list-comma-newline-after': null,
 		'declaration-colon-newline-after': null,
-		'selector-pseudo-element-no-unknown': [
+		'selector-pseudo-class-no-unknown': [
 			true,
 			{
-				ignorePseudoElements: ['v-deep'],
+				ignorePseudoClasses: ['deep'],
 			},
 		],
 		'value-keyword-case': [

package/tsconfig.json

@@ -10,10 +10,12 @@
     "moduleResolution": "node",
     "noImplicitReturns": true,
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    // It causes `TS6133: '_withScopeId' is declared but its value is never read.`
+    // "noUnusedLocals": true,
     "skipLibCheck": true,
     "strictBindCallApply": true,
-    "noUnusedParameters": true,
+    // Re-enable after https://github.com/vuejs/core/issues/4668 is fixed
+    // "noUnusedParameters": true,
     "strictFunctionTypes": true,
     "target": "es2019",
     "strictNullChecks": true,

package/vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
 	/**
 	 * we disable parallel for production, because if we use ts-loader the Thread Loader does
 	 * not work properly and communicates it with an error:
-	 * 		Syntax Error: Thread Loader (Worker 0)
-	 * 		Cannot read properties of undefined (reading 'hooks')
+	 *        Syntax Error: Thread Loader (Worker 0)
+	 *        Cannot read properties of undefined (reading 'hooks')
 	 */
 	parallel: process.env.NODE_ENV !== 'production',
 	css: {
@@ -33,9 +33,13 @@ module.exports = {
 
 		svgRule.uses.clear();
 
+		// remove properties which breaks vue-svg-loader output
+		svgRule.store.delete('generator');
+		svgRule.store.delete('type');
+
 		svgRule
-			.use('babel-loader')
-			.loader('babel-loader')
+			.use('vue-loader')
+			.loader('vue-loader')
 			.end()
 			.use('vue-svg-loader')
 			.loader('vue-svg-loader');