Merge pull request #1002 from 3YOURMIND/introduce-eslint-perfectionist

dx(#914): use eslint-plugin-perfectionist to sort everything

eslint.config.mjs

@@ -1,9 +1,11 @@
 // @ts-check
 
+import path from 'node:path'
+import { fileURLToPath } from 'url'
+
 import tseslint from 'typescript-eslint'
+
 import eslintConfig3YD from '@3yourmind/eslint-config'
-import { fileURLToPath } from 'url'
-import path from 'node:path'
 
 import kottiUIPackageJSON from './packages/kotti-ui/package.json' assert { type: 'json' }
 import vueUseTippyPackageJSON from './packages/vue-use-tippy/package.json' assert { type: 'json' }
@@ -113,11 +115,11 @@ const config = tseslint.config(
 							name: 'lodash',
 						},
 						...notYetESMCompatible.map((name) => ({
-							name,
-							message:
-								'The default import is the only export guaranteed to resolve in packages without explicit cjs/esm import declarations. Named imports, inferred through heuristics, may fail in various environments. Therefore, it is advisable to always use the default import.',
 							allowImportNames: ['default'],
 							allowTypeImports: true,
+							message:
+								'The default import is the only export guaranteed to resolve in packages without explicit cjs/esm import declarations. Named imports, inferred through heuristics, may fail in various environments. Therefore, it is advisable to always use the default import.',
+							name,
 						})),
 					],
 				},

packages/documentation/components/ActionBar.vue

@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
+
 import { KtActionbar } from '@3yourmind/kotti-ui'
 
 import type { Section, Subsection } from '../data/menu'

packages/documentation/components/ColorPalette.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
+import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
 import { defineComponent, ref } from 'vue'
-import { TimeConversion } from '@metatypes/units'
 
 export default defineComponent({
 	name: 'ColorPalette',

packages/documentation/components/ComponentInfo.vue

@@ -145,14 +145,15 @@
 </template>
 
 <script lang="ts">
-import { KtHeading, Kotti } from '@3yourmind/kotti-ui'
-import { Yoco } from '@3yourmind/yoco'
 import { Dashes } from '@metatypes/typography'
 import castArray from 'lodash/castArray.js'
 import kebabCase from 'lodash/kebabCase.js'
 import type { PropType } from 'vue'
 import { computed, defineComponent, ref } from 'vue'
 
+import { Kotti, KtHeading } from '@3yourmind/kotti-ui'
+import { Yoco } from '@3yourmind/yoco'
+
 import ComponentInfoSlots from './component-info/Slots.vue'
 
 type VuePropType =

packages/documentation/components/LayoutContainer.vue

@@ -10,6 +10,8 @@
 
 <script>
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
+/* eslint-disable perfectionist/sort-objects */
 export default {
 	name: 'LayoutContainer',
 	computed: {
@@ -18,4 +20,5 @@ export default {
 		},
 	},
 }
+/* eslint-enable perfectionist/sort-objects */
 </script>

packages/documentation/components/NavBar.vue

@@ -14,9 +14,10 @@
 </template>
 
 <script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
 import type { Kotti } from '@3yourmind/kotti-ui'
 import { KtNavbar } from '@3yourmind/kotti-ui'
-import { computed, defineComponent, ref } from 'vue'
 
 import navLogo from '../assets/img/nav_logo.svg'
 import { menu } from '../data/menu'

packages/documentation/components/YocoPreview.vue

@@ -27,10 +27,11 @@
 </template>
 
 <script lang="ts">
+import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
 import { computed, defineComponent, ref } from 'vue'
-import { TimeConversion } from '@metatypes/units'
+
 import type { Yoco } from '@3yourmind/yoco'
 
 export default defineComponent({

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

@@ -54,11 +54,12 @@
 </template>
 
 <script lang="ts">
-import type { Kotti } from '@3yourmind/kotti-ui'
-import { KtHeading } from '@3yourmind/kotti-ui'
 import type { PropType } from 'vue'
 import { defineComponent, ref } from 'vue'
 
+import type { Kotti } from '@3yourmind/kotti-ui'
+import { KtHeading } from '@3yourmind/kotti-ui'
+
 export default defineComponent({
 	name: 'ComponentInfoSlots',
 	components: {

packages/documentation/data/menu.ts

@@ -1,3 +1,6 @@
+import kebabCase from 'lodash/kebabCase.js'
+import startCase from 'lodash/startCase.js'
+
 import type { Kotti } from '@3yourmind/kotti-ui'
 import {
 	KtAccordion,
@@ -26,8 +29,6 @@ import {
 	KtValueLabel,
 } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
-import kebabCase from 'lodash/kebabCase.js'
-import startCase from 'lodash/startCase.js'
 
 export enum Tag {
 	CSS = 'css',
@@ -40,25 +41,25 @@ export enum Tag {
 
 type SubsectionPage = {
 	label: string
-	tags: Array<Tag>
 	path: string
+	tags: Array<Tag>
 }
 
 export type Subsection = {
 	icon: Yoco.Icon
-	title: string
-	path: string
 	pages: Array<SubsectionPage>
+	path: string
+	title: string
 }
 
 export type Section = {
-	title: string | null
 	subsections: Array<Subsection>
+	title: string | null
 }
 
 const makeComponentMenuItem = (component: {
-	name: string
 	meta: Kotti.Meta
+	name: string
 }): SubsectionPage => ({
 	label: startCase(component.name.replace(/^Kt/, '')),
 	path: kebabCase(component.name.replace(/^Kt/, '')),
@@ -71,39 +72,36 @@ const makeComponentMenuItem = (component: {
 
 export const menu: Array<Section> = [
 	{
-		title: null,
 		subsections: [
-			{ icon: Yoco.Icon.FILE, title: 'Overview', path: '', pages: [] },
+			{ icon: Yoco.Icon.FILE, pages: [], path: '', title: 'Overview' },
 			{
 				icon: Yoco.Icon.VERSION,
-				title: 'Changelog',
-				path: 'changelog',
 				pages: [],
+				path: 'changelog',
+				title: 'Changelog',
 			},
 		],
+		title: null,
 	},
 	{
-		title: 'Foundations',
 		subsections: [
 			{
 				icon: Yoco.Icon.EDIT,
-				title: 'Text',
-				path: 'foundations/text',
 				pages: [
 					{ label: 'Typography', path: 'typography', tags: [Tag.CSS] },
 					{ label: 'Writing Style ', path: 'writing-style', tags: [Tag.GUIDE] },
 				],
+				path: 'foundations/text',
+				title: 'Text',
 			},
 			{
 				icon: Yoco.Icon.DIMENSION,
-				title: 'Units',
-				path: 'foundations/units',
 				pages: [],
+				path: 'foundations/units',
+				title: 'Units',
 			},
 			{
 				icon: Yoco.Icon.MARKUP,
-				title: 'Icons',
-				path: 'foundations/icons',
 				pages: [
 					{ label: 'List', path: 'list', tags: [Tag.CSS, Tag.TS] },
 					{
@@ -117,11 +115,11 @@ export const menu: Array<Section> = [
 						tags: [Tag.GUIDE],
 					},
 				],
+				path: 'foundations/icons',
+				title: 'Icons',
 			},
 			{
 				icon: Yoco.Icon.MATERIAL,
-				title: 'Colors & Tokens',
-				path: 'foundations/colors',
 				pages: [
 					{
 						label: 'Introduction to Design Tokens',
@@ -141,16 +139,16 @@ export const menu: Array<Section> = [
 						tags: [Tag.GUIDE, Tag.OUTDATED],
 					},
 				],
+				path: 'foundations/colors',
+				title: 'Colors & Tokens',
 			},
 		],
+		title: 'Foundations',
 	},
 	{
-		title: 'Usage',
 		subsections: [
 			{
 				icon: Yoco.Icon.DASHBOARD,
-				title: 'Components',
-				path: 'usage/components',
 				pages: [
 					makeComponentMenuItem(KtAccordion),
 					makeComponentMenuItem(KtAvatar),
@@ -180,25 +178,28 @@ export const menu: Array<Section> = [
 					makeComponentMenuItem(KtToaster),
 					makeComponentMenuItem(KtValueLabel),
 				],
+				path: 'usage/components',
+				title: 'Components',
 			},
 			{
 				icon: Yoco.Icon.LAYER,
-				title: 'Layouts',
-				path: 'usage/layouts',
 				pages: [
 					{ label: 'Introduction', path: 'introduction', tags: [Tag.GUIDE] },
 					{ label: 'Grid System', path: 'grid-system', tags: [Tag.TS] },
 					makeComponentMenuItem(KtNavbar),
 					makeComponentMenuItem(KtActionbar),
 					makeComponentMenuItem(KtUserMenu),
 				],
+				path: 'usage/layouts',
+				title: 'Layouts',
 			},
 			{
 				icon: Yoco.Icon.SCALE,
-				title: 'Utilities',
-				path: 'usage/utilities',
 				pages: [],
+				path: 'usage/utilities',
+				title: 'Utilities',
 			},
 		],
+		title: 'Usage',
 	},
 ]

packages/documentation/layouts/default.vue

@@ -23,6 +23,7 @@ import ActionBar from '~/components/ActionBar.vue'
 import LayoutContainer from '~/components/LayoutContainer.vue'
 import NavBar from '~/components/NavBar.vue'
 
+/* eslint-disable perfectionist/sort-objects */
 export default {
 	name: 'DefaultLayout',
 	components: {
@@ -32,6 +33,7 @@ export default {
 		LayoutContainer,
 	},
 }
+/* eslint-enable perfectionist/sort-objects */
 </script>
 
 <style>

packages/documentation/layouts/fullpage.vue

@@ -11,15 +11,18 @@
 
 <script>
 import { KtI18nContext } from '@3yourmind/kotti-ui'
+
 import NavBar from '~/components/NavBar.vue'
 
+/* eslint-disable perfectionist/sort-objects */
 export default {
 	name: 'FullPageLayout',
 	components: {
 		KtI18nContext,
 		NavBar,
 	},
 }
+/* eslint-enable perfectionist/sort-objects */
 </script>
 
 <style lang="scss" scoped>

packages/documentation/nuxt.config.ts

@@ -6,24 +6,24 @@ const config: NuxtConfig = {
 	/*
 	 ** Headers of the page
 	 */
+	css: ['./styles/main.scss'],
 	head: {
-		title: 'Kotti Design System',
+		link: [{ href: '/favicon.ico', rel: 'icon', type: 'image/x-icon' }],
 		meta: [
 			{ charset: 'utf-8' },
-			{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+			{ content: 'width=device-width, initial-scale=1', name: 'viewport' },
 			{
+				content: `Kotti helps to unify our design language and provides the documentation for further product design decisions. The Kotti design system has two main parts: foundation and components.`,
 				hid: 'description',
 				name: 'description',
-				content: `Kotti helps to unify our design language and provides the documentation for further product design decisions. The Kotti design system has two main parts: foundation and components.`,
 			},
 		],
-		link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+		title: 'Kotti Design System',
 	},
-	css: ['./styles/main.scss'],
-	modules: ['@nuxtjs/markdownit', '@nuxtjs/style-resources'],
 	loading: {
 		color: '#2C64CC',
 	},
+	modules: ['@nuxtjs/markdownit', '@nuxtjs/style-resources'],
 	plugins: ['~/plugins/yoco', { src: '~/plugins/kotti-ui', ssr: false }],
 	/*
 	 ** Build configuration

packages/documentation/pages/changelog.vue

@@ -107,7 +107,7 @@ import cloneDeep from 'lodash/cloneDeep.js'
 import { marked } from 'marked'
 import naturalSort from 'natural-sort'
 import type { Ref } from 'vue'
-import { computed, onBeforeMount, defineComponent, ref } from 'vue'
+import { computed, defineComponent, onBeforeMount, ref } from 'vue'
 
 const octokit = new Octokit()
 

packages/documentation/pages/examples/layouts.vue

@@ -50,6 +50,7 @@ import { Yoco } from '@3yourmind/yoco'
 
 import LayoutContainer from '~/components/LayoutContainer.vue'
 
+/* eslint-disable perfectionist/sort-objects */
 export default {
 	name: 'DocumentationPageExamplesLayouts',
 	components: {
@@ -231,4 +232,5 @@ export default {
 		},
 	},
 }
+/* eslint-enable perfectionist/sort-objects */
 </script>

packages/documentation/pages/foundations/colors/figma.vue

@@ -77,9 +77,9 @@ tokens = {{[...baseImportableList,...tokenImportableList]}}
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import {
 	baseColorsFactory,
+	factoryToFigmaImportable,
 	figma,
 	tokenColorsFactory,
-	factoryToFigmaImportable,
 } from '@3yourmind/kotti-ui/tokens'
 
 const figmaImportScript = `tokens.forEach(token => {
@@ -108,6 +108,7 @@ const figmaImportScript = `tokens.forEach(token => {
 	]
 })`
 
+/* eslint-disable perfectionist/sort-objects */
 export default {
 	name: 'DocumenationPageFoundationsColorsFigma',
 	data() {
@@ -135,4 +136,5 @@ export default {
 		},
 	},
 }
+/* eslint-enable perfectionist/sort-objects */
 </script>