@bethinkpl/design-system 25.0.10 → 26.0.0

package/lib/js/components/Tooltip/Tooltip.stories.ts

@@ -13,7 +13,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -44,8 +44,8 @@ const args = {
 
 const argTypes = {
 	placement: {
-		control: { type: 'select', options: Object.values(TOOLTIP_PLACEMENTS) },
-		defaultValue: TOOLTIP_PLACEMENTS.BOTTOM,
+		control: 'select',
+		options: Object.values(TOOLTIP_PLACEMENTS),
 	},
 } as ArgTypes;
 
@@ -62,7 +62,7 @@ Interactive.parameters = {
 const OnDsSwitchTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip, DsSwitch },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -85,13 +85,13 @@ const OnDsSwitchTemplate: StoryFn<typeof Tooltip> = (args) => ({
 
 export const OnDsSwitch = OnDsSwitchTemplate.bind({});
 
-OnDsSwitch.argTypes = argTypes;
-OnDsSwitch.args = { ...args, switchDisabled: true, inline: false };
+OnDsSwitch.argTypes = { ...argTypes, switchDisabled: { control: 'boolean' } } as ArgTypes;
+OnDsSwitch.args = { ...args, switchDisabled: true, inline: false } as Args;
 
 const OnDsButtonTemplate: StoryFn<typeof Tooltip> = (args) => ({
 	components: { Tooltip, DsButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="padding: 60px; width: 100%;display: flex;  justify-content: center">
@@ -114,5 +114,5 @@ const OnDsButtonTemplate: StoryFn<typeof Tooltip> = (args) => ({
 
 export const OnDsButton = OnDsButtonTemplate.bind({});
 
-OnDsButton.argTypes = argTypes;
-OnDsButton.args = { ...args, buttonDisabled: true, inline: false };
+OnDsButton.argTypes = { ...argTypes, buttonDisabled: { control: 'boolean' } } as ArgTypes;
+OnDsButton.args = { ...args, buttonDisabled: true, inline: false } as Args;

package/lib/js/components/Well/Well.stories.ts

@@ -1,40 +1,47 @@
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+// SB8.0 Good code to copy when creating a new story - this code use new API
+
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
 import { WELL_PADDINGS } from './Well.consts';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type WellProps = ComponentProps<typeof Well>;
 
-export default {
+const meta: Meta<WellProps> = {
 	title: 'Components/Well',
 	component: Well,
-} as Meta<typeof Well>;
-
-const StoryTemplate: StoryFn<typeof Well> = (args) => ({
-	components: { Well },
-	setup() {
-		return { args };
+	render: (args) => ({
+		components: { Well },
+		setup() {
+			return { args };
+		},
+		template: '<well v-bind="args"><div v-html="args.content" /></well>',
+	}),
+	argTypes: {
+		padding: {
+			control: 'select',
+			options: [null, ...Object.values(WELL_PADDINGS)],
+		},
+		content: {
+			control: 'text',
+		},
+	} as ArgTypes,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
+		},
 	},
-	template: '<well v-bind="args"><div v-html="args.content" /></well>',
-});
+};
+export default meta;
 
-export const Interactive = StoryTemplate.bind({});
+type Story = StoryObj<WellProps>;
 
-const argTypes = {
-	padding: {
-		control: { type: 'select', options: [null, ...Object.values(WELL_PADDINGS)] },
-		defaultValue: null,
-	},
-	content: {
-		control: { type: 'text' },
-		defaultValue:
+export const Interactive: Story = {
+	args: {
+		padding: null,
+		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
-	},
-} as ArgTypes;
-
-Interactive.argTypes = argTypes;
-
-Interactive.parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
-	},
+	} as Args,
 };

package/lib/js/components/Well/Well.vue

@@ -32,7 +32,9 @@
 <script>
 import { WELL_PADDINGS } from './Well.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'Well',
 	props: {
 		padding: {
@@ -48,5 +50,5 @@ export default {
 			WELL_PADDINGS: Object.freeze(WELL_PADDINGS),
 		};
 	},
-};
+});
 </script>

package/lib/js/icons/fontawesome.ts

@@ -406,4 +406,4 @@ export function initializeWithDomWatcher() {
 	dom.watch();
 }
 
-export { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export type { IconDefinition } from '@fortawesome/fontawesome-svg-core';

package/lib/js/index.ts

@@ -166,5 +166,6 @@ export { initializePrimeVue } from './primevue';
 export {
 	initialize as initializeIcons,
 	initializeWithDomWatcher as initializeIconsWithDomWatcher,
-	IconDefinition,
 } from './icons/fontawesome';
+
+export type { IconDefinition } from './icons/fontawesome';

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

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

@@ -13,7 +13,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/styles/ItemsColor.vue

@@ -16,9 +16,9 @@
 
 <script lang="ts">
 import { ColorToken } from './TokenTypes';
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'ItemsColor',
 	props: {
 		items: {
@@ -26,5 +26,5 @@ export default {
 			required: true,
 		},
 	},
-};
+});
 </script>

package/lib/js/styles/ItemsList.vue

@@ -58,6 +58,7 @@
 		line-height: var(--typography-line-height-xl);
 	}
 }
+
 /* stylelint-enable */
 </style>
 
@@ -66,9 +67,9 @@ import { ItemsListsItem, TOKENS_TYPES } from './TokenTypes';
 import { Value } from '../utils/type.utils';
 import ItemsColor from './ItemsColor.vue';
 import ItemsTypography from './ItemsTypography.vue';
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'ItemsList',
 	components: {
 		ItemsColor,
@@ -110,5 +111,5 @@ export default {
 			return itemsLocal;
 		},
 	},
-};
+});
 </script>

package/lib/js/styles/ItemsTypography.vue

@@ -27,12 +27,12 @@
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { TypographyToken } from './TokenTypes';
 import variables from '../../styles/settings/typography/_variables-css.json';
 import { IResultJsonObject } from '../../../tools/importers/helpers/structures';
 
-export default {
+export default defineComponent({
 	name: 'ItemsTypography',
 	props: {
 		items: {
@@ -65,5 +65,5 @@ export default {
 			return result;
 		},
 	},
-};
+});
 </script>

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
 	components: { ItemsList },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<items-list :items-lists="itemsLists" :type="type"></items-list>`,

package/lib/js/typings.d.ts

@@ -1,8 +1,7 @@
-// TypeScript compiler doesn't read webpack config so we need to tell him how interpret import Vue files
-
 declare module '*.vue' {
-	import { ConcreteComponent } from 'vue';
-	export { ConcreteComponent };
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent;
+	export default component;
 }
 
 declare module '*.svg' {

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "25.0.10",
+  "version": "26.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bethinkpl/design-system.git"
   },
   "author": "nerdy@bethink.pl",
-  "main": "./dist/design-system.umd.js",
+  "main": "./dist/design-system.umd.cjs",
+  "type": "module",
   "typings": "./dist/lib/js/index.d.ts",
   "license": "UNLICENSED",
   "engines": {
-    "yarn": "^1.22.0",
+    "yarn": "^1.22.1",
     "node": "^16.13.0 || ^18.17.0 || ^20.9.0"
   },
   "scripts": {
-    "build": "vue-cli-service build --target lib --formats umd --name design-system lib/js/index.ts",
-    "dev": "start-storybook -p 6006",
+    "build": "vite build",
+    "dev": "storybook dev -p 6006",
     "lint": "yarn lint:scripts && yarn lint:styles",
     "lint:fix": "yarn lint:scripts:fix && yarn lint:styles:fix",
     "lint:scripts": "eslint --max-warnings 0 --cache 'lib/js/**/*.{js,vue,ts}'",
@@ -25,8 +26,8 @@
     "lint:styles:fix": "stylelint 'lib/**/*.{vue,scss}' --fix",
     "format:check": "prettier --check 'lib/**/*.{js,ts,vue,scss}' && prettier --check ./*.js",
     "format:fix": "prettier --write 'lib/**/*.{js,ts,vue,scss}' && prettier --write ./*.js",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook -c .storybook -o public/storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -c .storybook -o public/storybook",
     "test": "jest",
     "ts:check": "tsc --noEmit",
     "synchronizeColors": "npx ts-node tools/importers/SynchronizeColorsTokens.ts",
@@ -40,41 +41,38 @@
     "@fortawesome/pro-regular-svg-icons": "6.4.2",
     "@fortawesome/pro-solid-svg-icons": "6.4.2",
     "@fortawesome/vue-fontawesome": "3.0.3",
-    "@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/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/vue3": "6.5.13",
+    "@storybook/addon-actions": "^8.3.4",
+    "@storybook/addon-controls": "^8.3.4",
+    "@storybook/addon-designs": "^8.0.3",
+    "@storybook/addon-docs": "^8.3.4",
+    "@storybook/addon-storysource": "^8.3.4",
+    "@storybook/addon-viewport": "^8.3.4",
+    "@storybook/vue3": "^8.3.4",
+    "@storybook/vue3-vite": "^8.3.4",
+    "@types/jest": "^29.5.12",
     "@types/node": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
-    "@vue/cli-plugin-typescript": "5.0.8",
-    "@vue/cli-plugin-unit-jest": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.2.31",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@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",
     "eslint": "8.25.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-storybook": "0.6.6",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vue": "9.6.0",
     "flatpickr": "^4.6.13",
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
+    "postcss": "^8.4.47",
     "postcss-prefix-selector": "^1.9.0",
     "prettier": "2.7.1",
     "sass": "^1.28.0",
-    "sass-loader": "^7.1.0",
-    "storybook-addon-designs": "^6.3.1",
+    "storybook": "^8.3.4",
     "stylelint": "13.8.0",
     "stylelint-config-standard": "20.0.0",
     "stylelint-order": "6.0.3",
@@ -82,10 +80,13 @@
     "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "4.6.4",
+    "vite": "^5.4.7",
+    "vite-plugin-checker": "^0.7.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-svg-loader": "^5.1.0",
     "vue": "3.2.45",
-    "vue-loader": "17.0.0",
-    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
-    "vue-svg-loader": "0.17.0-beta.2"
+    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f"
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",

package/tsconfig.json

@@ -3,10 +3,11 @@
     "lib/js/typings.d.ts"
   ],
   "compilerOptions": {
+    "importHelpers": true,
+    "removeComments": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./lib/js",
     "esModuleInterop": true,
-    "module": "commonjs",
     "moduleResolution": "node",
     "noImplicitReturns": true,
     "resolveJsonModule": true,
@@ -20,10 +21,13 @@
     "target": "es2019",
     "strictNullChecks": true,
     "paths": {
-      "design-system/lib/*": ["lib/*"]
+      "design-system/lib/*": [
+        "lib/*"
+      ]
     },
     "declaration": true,
-    "declarationDir": "dist"
+    "declarationDir": "dist",
+    "types": ["node", "jest"],
   },
   "include": [
     "lib/js/**/*.vue",
@@ -31,10 +35,13 @@
   ],
   "exclude": [
     "node_modules",
-    "public"
+    "public",
+    ".storybook",
+    "**/*.stories.ts",
+    "**/*.spec.ts"
   ],
   "typeRoots": [
-    "node_modules/@types",
+    "node_modules/@types"
   ]
 }
 

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import checker from 'vite-plugin-checker';
+import svgLoader from 'vite-svg-loader';
+import dts from 'vite-plugin-dts';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		vue(),
+		checker({
+			typescript: true,
+		}),
+		svgLoader(),
+		dts(),
+		cssInjectedByJsPlugin(),
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'lib/js/index.ts'),
+			name: 'design-system',
+			formats: ['umd'],
+			fileName: 'design-system',
+		},
+		rollupOptions: {
+			external: ['vue'],
+			output: {
+				globals: {
+					vue: 'Vue',
+				},
+			},
+		},
+		sourcemap: true,
+		target: 'es2019',
+	},
+});

package/.storybook/main.js

@@ -1,86 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-function getDirectories(module) {
-	return fs
-		.readdirSync(module)
-		.filter((file) => fs.statSync(path.join(module, file)).isDirectory());
-}
-
-module.exports = {
-	stories: ['../lib/**/*.stories.@(js|mdx|ts)'],
-	addons: [
-		'@storybook/addon-actions',
-		'@storybook/addon-docs',
-		'@storybook/addon-controls',
-		'@storybook/addon-storysource',
-		'@storybook/addon-viewport',
-		'storybook-addon-designs',
-	],
-	core: {
-		builder: 'webpack5',
-	},
-	webpackFinal: async (config) => {
-		let vueLoaderRule = config.module.rules.find(
-			(r) =>
-				r.test &&
-				r.test.toString().includes('vue') &&
-				r.loader &&
-				r.loader.includes('vue-loader'),
-		);
-
-		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-		// You can change the configuration based on that.
-		// 'PRODUCTION' is used when building the static version of storybook.
-
-		// // Storybook provides assets rule for svg. We have to disable it to make vue-svg-loader working
-		let fileLoaderRule = config.module.rules.find(
-			(r) =>
-				r.test &&
-				r.test.toString().includes('svg') &&
-				r.type &&
-				r.type === 'asset/resource',
-		);
-		fileLoaderRule.test = new RegExp(
-			fileLoaderRule.test.source.replace('svg|', ''),
-			fileLoaderRule.test.flags,
-		);
-
-		// Make whatever fine-grained changes you need
-		config.module.rules.push(
-			{
-				test: /\.scss$/,
-				use: [
-					'style-loader',
-
-					'css-loader',
-
-					{
-						loader: 'sass-loader',
-						options: {
-							implementation: require('sass'),
-						},
-					},
-				],
-				include: path.resolve(__dirname, '../../'),
-			},
-			{
-				test: /\.svg$/,
-				use: ['vue-loader', 'vue-svg-loader'],
-			},
-		);
-
-		// config.resolve.alias.lib = path.resolve(__dirname, '../lib');
-		config.resolve.alias['design-system'] = path.resolve(__dirname, '..');
-
-		const primePackages = ['primevue', '@primevue/themes'];
-		primePackages.forEach((pkg) => {
-			const modulePath = path.resolve(__dirname, `../node_modules/${pkg}`);
-			getDirectories(modulePath).forEach((dir) => {
-				config.resolve.alias[`${pkg}/${dir}`] = path.join(modulePath, dir);
-			});
-		});
-
-		return config;
-	},
-};

package/babel.config.json

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": true
-        }
-      }
-    ]
-  ]
-}