wip

.eslintrc.js

@@ -109,11 +109,6 @@ module.exports = {
 				'packages/**/*.test.ts',
 				'packages/kotti-ui/source/test-utils/**/*.ts',
 			],
-			env: {
-				jest: true,
-			},
-			plugins: ['jest'],
-			extends: ['plugin:jest/recommended'],
 			rules: {
 				'import/order': [
 					'warn',
@@ -132,5 +127,11 @@ module.exports = {
 				'@typescript-eslint/ban-ts-comment': 'off',
 			},
 		},
+		{
+			files: ['**/*.json'],
+			rules: {
+				'sonarjs/no-duplicate-string': 'off',
+			},
+		},
 	],
 }

.github/labeler.yml

@@ -1,9 +1,6 @@
 package:kotti-ui:
   - packages/kotti-ui/**/*
 
-package:sass-node-modules-importer:
-  - packages/sass-node-modules-importer/**/*
-
 package:yoco:
   - packages/yoco/**/*
 

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Run ESLint
         run: yarn run check:eslint
-  jest:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -42,7 +42,7 @@ jobs:
         run: yarn workspace @3yourmind/vue-use-tippy run build
       - name: Run tests
         run: yarn run test
-  prettier:
+  check-prettier:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -58,7 +58,7 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Run Prettier
         run: yarn run check:prettier
-  stylelint:
+  check-stylelint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -74,7 +74,7 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Run Stylelint
         run: yarn run check:stylelint
-  unimported:
+  check-unimported:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -5,3 +5,4 @@ node_modules/
 packages/kotti-ui/report.*.html
 packages/yoco/fonts/
 yarn-error.log
+lerna-debug.log

.vscode/settings.json

@@ -1,8 +1,10 @@
 {
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "always"
+	},
 	"editor.formatOnSave": true,
-	"eslint.alwaysShowStatus": true,
 	"eslint.options": {
-		"extensions": [".js", ".vue", ".jsx", ".ts", ".tsx"]
+		"extensions": [".js", ".vue", ".ts"]
 	},
 	"eslint.validate": [
 		"javascript",
@@ -11,11 +13,5 @@
 		"typescriptreact",
 		"vue"
 	],
-	"javascript.validate.enable": false,
-	"vetur.validation.template": true,
-	"vetur.validation.script": true,
-	"vetur.format.enable": false,
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "always"
-	}
+	"javascript.validate.enable": false
 }

README.md

@@ -49,10 +49,6 @@ import Vue from 'vue'
 import KottiUI from '@3yourmind/kotti-ui'
 import '@3yourmind/kotti-ui/dist/styles.css'
 
-// also make sure to set-up @vue/composition-api as it’s required for newer Kotti features
-import VueCompositionAPI from '@vue/composition-api' // right now, 0.6.1 is recommended
-Vue.use(VueCompositionAPI) // should be added before KottiUi
-
 // (optional) register all KtComponents globally
 Vue.use(KottiUI)
 
@@ -70,12 +66,11 @@ const CustomVueComponent = {
 
 ## Packages
 
-|                                                                            Name | NPM                                                                                                                                        | Downloads (Month)                                                            | Downloads (Total)                                                            | Size                                                                                      |
-| ------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
-|                                     [`@3yourmind/kotti-ui`](/packages/kotti-ui) | [![](https://img.shields.io/npm/v/@3yourmind/kotti-ui)](https://npmjs.com/package/@3yourmind/kotti-ui)                                     | ![](https://img.shields.io/npm/dm/@3yourmind/kotti-ui.svg)                   | ![](https://img.shields.io/npm/dt/@3yourmind/kotti-ui.svg)                   | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/kotti-ui.svg)                   |
-|                                             [`@3yourmind/yoco`](/packages/yoco) | [![](https://img.shields.io/npm/v/@3yourmind/yoco)](https://npmjs.com/package/@3yourmind/yoco)                                             | ![](https://img.shields.io/npm/dm/@3yourmind/yoco.svg)                       | ![](https://img.shields.io/npm/dt/@3yourmind/yoco.svg)                       | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/yoco.svg)                       |
-|                           [`@3yourmind/vue-use-tippy`](/packages/vue-use-tippy) | [![](https://img.shields.io/npm/v/@3yourmind/vue-use-tippy)](https://npmjs.com/package/@3yourmind/vue-use-tippy)                           | ![](https://img.shields.io/npm/dm/@3yourmind/vue-use-tippy.svg)              | ![](https://img.shields.io/npm/dt/@3yourmind/vue-use-tippy.svg)              | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/vue-use-tippy.svg)              |
-| [`@3yourmind/sass-node-modules-importer`](/packages/sass-node-modules-importer) | [![](https://img.shields.io/npm/v/@3yourmind/sass-node-modules-importer)](https://npmjs.com/package/@3yourmind/sass-node-modules-importer) | ![](https://img.shields.io/npm/dm/@3yourmind/sass-node-modules-importer.svg) | ![](https://img.shields.io/npm/dt/@3yourmind/sass-node-modules-importer.svg) | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/sass-node-modules-importer.svg) |
+|                                                  Name | NPM                                                                                                              | Downloads (Month)                                               | Downloads (Total)                                               | Size                                                                         |
+| ----------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------- | :--------------------------------------------------------------------------- |
+|           [`@3yourmind/kotti-ui`](/packages/kotti-ui) | [![](https://img.shields.io/npm/v/@3yourmind/kotti-ui)](https://npmjs.com/package/@3yourmind/kotti-ui)           | ![](https://img.shields.io/npm/dm/@3yourmind/kotti-ui.svg)      | ![](https://img.shields.io/npm/dt/@3yourmind/kotti-ui.svg)      | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/kotti-ui.svg)      |
+|                   [`@3yourmind/yoco`](/packages/yoco) | [![](https://img.shields.io/npm/v/@3yourmind/yoco)](https://npmjs.com/package/@3yourmind/yoco)                   | ![](https://img.shields.io/npm/dm/@3yourmind/yoco.svg)          | ![](https://img.shields.io/npm/dt/@3yourmind/yoco.svg)          | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/yoco.svg)          |
+| [`@3yourmind/vue-use-tippy`](/packages/vue-use-tippy) | [![](https://img.shields.io/npm/v/@3yourmind/vue-use-tippy)](https://npmjs.com/package/@3yourmind/vue-use-tippy) | ![](https://img.shields.io/npm/dm/@3yourmind/vue-use-tippy.svg) | ![](https://img.shields.io/npm/dt/@3yourmind/vue-use-tippy.svg) | ![](https://img.shields.io/bundlephobia/minzip/@3yourmind/vue-use-tippy.svg) |
 
 ## Dependencies
 

package.json

@@ -47,54 +47,33 @@
 		}
 	],
 	"devDependencies": {
-		"@babel/core": "7.15.5",
-		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-		"@babel/plugin-proposal-optional-chaining": "^7.14.5",
-		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.15.4",
-		"@babel/preset-typescript": "^7.15.0",
-		"@types/jest": "^27.0.1",
+		"@types/node": "20.x",
 		"@typescript-eslint/eslint-plugin": "^6.12.0",
 		"@typescript-eslint/parser": "^6.12.0",
 		"@vue/eslint-config-typescript": "^12.0.0",
-		"@vue/test-utils": "^1.1.2",
-		"autoprefixer": "^9.8.5",
-		"babel-core": "^6.26.3",
-		"babel-helper-vue-jsx-merge-props": "^2.0.3",
-		"babel-plugin-syntax-jsx": "^6.18.0",
-		"babel-plugin-transform-vue-jsx": "^3.7.0",
 		"concurrently": "^6.2.0",
 		"es-check": "^6.0.0",
 		"eslint": "^8.33.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jest": "^27.2.1",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-sonarjs": "^0.18.0",
 		"eslint-plugin-vue": "^9.9.0",
 		"husky": "^7.0.1",
-		"jest": "^27.1.0",
-		"jsdom-global": "^3.0.2",
-		"lerna": "^6.5.1",
+		"lerna": "^7.4.2",
 		"lint-staged": "^11.0.1",
 		"nodemon": "^2.0.12",
 		"postcss": "^8.2.10",
 		"postcss-html": "^1.5.0",
 		"prettier": "^2.6.1",
-		"sass": "^1.58.3",
-		"sass-loader": "^10.4.1",
 		"stylelint": "^15.11.0",
 		"stylelint-config-recess-order": "^4.3.0",
 		"stylelint-config-recommended-vue": "^1.5.0",
 		"stylelint-config-standard-scss": "^10.0.0",
 		"stylelint-csstree-validator": "^3.0.0",
 		"stylelint-prettier": "^3.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^5.3",
-		"unimported": "^1.19.0",
-		"vue": "^2.6.11",
-		"vue-jest": "^3.0.7",
-		"vue-template-compiler": "^2.6.11"
+		"unimported": "^1.19.0"
 	},
 	"husky": {
 		"hooks": {
@@ -106,7 +85,7 @@
 		"*.{css,scss,vue}": [
 			"stylelint --fix"
 		],
-		"*.{js,jsx,vue,ts,tsx}": [
+		"*.{js,vue,ts}": [
 			"eslint --fix"
 		],
 		"*.{json,md}": [
@@ -127,18 +106,19 @@
 	"scripts": {
 		"build:render.com": "yarn run watch:build-kotti-dependencies && yarn workspace @3yourmind/kotti-ui run build && yarn workspace @3yourmind/documentation run nuxt generate",
 		"check": "yarn run check:stylelint && yarn run check:eslint && yarn run check:prettier",
-		"check:eslint": "eslint --max-warnings=0 --ignore-path .gitignore '**/*.{js,jsx,json,ts,tsx,vue}'",
+		"check:eslint": "eslint --max-warnings=0 --ignore-path .gitignore '**/*.{js,json,ts,vue}'",
 		"check:prettier": "prettier --check --ignore-path .gitignore .",
 		"check:stylelint": "stylelint 'packages/**/*.{css,scss,vue}'",
 		"check:unimported": "lerna run check:unimported",
 		"fix": "yarn run fix:eslint && yarn run fix:stylelint && yarn run fix:prettier",
 		"fix:eslint": "yarn run check:eslint --fix",
 		"fix:prettier": "prettier --write --ignore-path .gitignore .",
 		"fix:stylelint": "yarn run check:stylelint --fix",
+		"prepare": "husky install",
 		"prepublishOnly": "yarn run check && lerna run --no-private build",
-		"test": "jest",
-		"watch:build-kotti-dependencies": "concurrently \"yarn workspace @3yourmind/sass-node-modules-importer run build\" \"yarn workspace @3yourmind/vue-use-tippy run build\" \"yarn workspace @3yourmind/yoco run build\"",
-		"watch": "yarn run watch:build-kotti-dependencies && nodemon --legacy-watch --watch packages/vue-use-tippy/source --watch packages/yoco/source --watch packages/sass-node-modules-importer/source --watch packages/kotti-ui/source --ignore packages/kotti-ui/source/kotti-style/tokens.css -e js,jsx,ts,tsx,vue,scss,css,json --exec \"yarn --cwd packages/kotti-ui run build && yarn --cwd packages/documentation run serve\""
+		"test": "vitest",
+		"watch:build-kotti-dependencies": "concurrently \"yarn workspace @3yourmind/vue-use-tippy run build\" \"yarn workspace @3yourmind/yoco run build\"",
+		"watch": "./scripts/watch.sh"
 	},
 	"version": "1.0.0",
 	"workspaces": [

packages/documentation/components/ActionBar.vue

@@ -8,15 +8,15 @@
 				<div class="kt-actionbar-menu has-icon-right">
 					<ul>
 						<nuxt-link
-							v-for="page in subsection.pages"
-							:key="page.to"
+							v-for="(page, index) in subsection.pages"
+							:key="index"
 							:to="`/${subsection.path}/${page.path}`"
 						>
 							<li>
 								<span v-text="page.label" />
 								<span
-									v-for="(tag, index) in page.tags"
-									:key="index"
+									v-for="(tag, tagIndex) in page.tags"
+									:key="tagIndex"
 									class="tag"
 									:class="`tag--is-${tag}`"
 									:title="tagTitles[tag]"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 
 import { Section, Subsection, menu, Tag } from '../data/menu'
 import { useRoute } from '../hooks/use-route'

packages/documentation/components/CodePreview.vue

@@ -11,15 +11,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api'
+import { computed, defineComponent, ref } from 'vue'
 
 export default defineComponent({
 	name: 'CodePreview',
 	props: {
 		vueSlotLabel: { default: 'Kotti-UI', type: String },
 		styleSlotLabel: { default: 'Kotti-Style', type: String },
 	},
-	setup(props: { styleSlotLabel: string; vueSlotLabel: string }) {
+	setup(props) {
 		const showCode = ref(true)
 
 		return {

packages/documentation/components/ComponentInfo.vue

@@ -129,9 +129,9 @@
 import { Kotti } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 import { Dashes } from '@metatypes/typography'
-import { computed, defineComponent, ref } from '@vue/composition-api'
 import castArray from 'lodash/castArray'
 import kebabCase from 'lodash/kebabCase'
+import { computed, defineComponent, ref, PropType } from 'vue'
 
 import ComponentInfoSlots from './component-info/Slots.vue'
 
@@ -148,15 +148,16 @@ export default defineComponent({
 		ComponentInfoSlots,
 	},
 	props: {
-		component: { required: true, type: Object },
-	},
-	setup(props: {
 		component: {
-			meta: Kotti.Meta
-			name: string
-			props?: Record<string, unknown>
-		}
-	}) {
+			required: true,
+			type: Object as PropType<{
+				meta: Kotti.Meta
+				name: string
+				props?: Record<string, unknown>
+			}>,
+		},
+	},
+	setup(props) {
 		return {
 			Dashes,
 			labels: computed(() => {

packages/documentation/components/NavBar.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { Kotti } from '@3yourmind/kotti-ui'
-import { computed, defineComponent, ref } from '@vue/composition-api'
+import { computed, defineComponent, ref } from 'vue'
 
 import navLogo from '../assets/img/nav_logo.svg'
 import { menu } from '../data/menu'

packages/documentation/components/component-info/Slots.vue

@@ -55,14 +55,14 @@
 
 <script lang="ts">
 import { Kotti } from '@3yourmind/kotti-ui'
-import { defineComponent, ref } from '@vue/composition-api'
+import { PropType, defineComponent, ref } from 'vue'
 
 export default defineComponent({
 	name: 'ComponentInfoSlots',
 	props: {
-		slots: { required: true, type: Object },
+		slots: { required: true, type: Object as PropType<Kotti.Meta['slots']> },
 	},
-	setup(_: { slots: Kotti.Meta['slots'] }) {
+	setup() {
 		return {
 			showSlots: ref(false),
 		}

packages/documentation/hooks/use-route.ts

@@ -1,4 +1,4 @@
-import { computed, getCurrentInstance } from '@vue/composition-api'
+import { computed, getCurrentInstance } from 'vue'
 import { Route } from 'vue-router'
 
 /**

packages/documentation/hooks/use-router.ts

@@ -1,4 +1,4 @@
-import { computed, getCurrentInstance } from '@vue/composition-api'
+import { computed, getCurrentInstance } from 'vue'
 import Router from 'vue-router'
 
 export const useRouter = () => {

packages/documentation/layouts/empty.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
 	name: 'EmptyLayout',