Fix linting warnings + add pre-commit hook

.eslintrc.js

@@ -98,6 +98,10 @@ module.exports = {
 				format: ['PascalCase'],
 				custom: { regex: '^I[A-Z]', match: false },
 			},
+			{
+				selector: ['classProperty', 'objectLiteralProperty', 'typeProperty'], // могут быть какими угодно
+				format: null,
+			},
 		],
 		'@typescript-eslint/interface-name-prefix': 'off',
 		'@typescript-eslint/no-empty-interface': 'off',

.github/workflows/publish_dev.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           node-version: 18
           registry-url: 'https://registry.npmjs.org'
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - name: Assigning new version
         run: npm version prerelease --commit-hooks=false --git-tag-version=false --preid=dev-${GITHUB_SHA:0:6}
       - name: Publishing release

.github/workflows/publish_docs.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - run: npm run build
 
       - name: Prepare tokens data

.github/workflows/publish_from_git.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           node-version: 18
           registry-url: 'https://registry.npmjs.org'
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - name: Publishing release
         run: npm run publish:dist
         env:

.github/workflows/publish_release.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: 18
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - run: npm run publish:latest
         if: '!github.event.release.prerelease'
         env:

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '18'
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - run: npm run lint
   test:
     runs-on: ubuntu-latest
@@ -23,7 +23,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '18'
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - run: npm run test:ci
   build:
     runs-on: ubuntu-latest
@@ -32,7 +32,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '18'
-      - run: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
       - run: npm run build
       - run: npm run docs:prepare-data
       - run: npm run docs:build

.gitignore

@@ -23,3 +23,4 @@ junit.xml
 docs/src/**/*.d.ts
 docs/public/**/*.json
 docs/dist/
+!.husky

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn pre-commit

package.json

@@ -26,7 +26,18 @@
     "styleguide": "sh ./tasks/styleguide.sh",
     "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.js --mode development",
     "docs:build": "cd docs/webpack && webpack --config webpack.client.js --mode production",
-    "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts"
+    "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
   },
   "repository": "https://github.com/VKCOM/vkui-tokens.git",
   "dependencies": {
@@ -39,8 +50,8 @@
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "11.0.1",
     "@types/node": "18.11.10",
-    "@types/react-dom": "18.2.1",
     "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.1",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
@@ -70,8 +81,10 @@
     "eslint-plugin-sonarjs": "0.19.0",
     "fs-extra": "11.1.1",
     "html-webpack-plugin": "5.5.1",
+    "husky": "8.0.3",
     "jest": "29.5.0",
     "jest-junit": "16.0.0",
+    "lint-staged": "14.0.1",
     "lodash": "4.17.21",
     "prettier": "2.8.8",
     "react": "18.2.0",

src/build/compilers/cssVars/helpers/getVarString.ts

@@ -10,11 +10,11 @@ export const getVarString = ({
 	valuesObject,
 	prefix,
 	delimeter = '\n',
-	callback,
+	callback: callbackFn,
 }: GetVarStringParams): string => {
 	return Object.entries(valuesObject)
 		.map(([name, value]) => {
-			callback?.(name, value);
+			callbackFn?.(name, value);
 			return `${prefix}${name}: ${value};`;
 		})
 		.join(delimeter);

src/build/compilers/index.ts

@@ -58,6 +58,7 @@ function writeJsonFile<T = Theme>(themePath: string, theme: T, _?: ThemeBuildTyp
 	console.log(`успешно записали файл ${fileName}`);
 }
 
+// eslint-disable-next-line max-params
 function writeTsFile<T extends SpecialTokens = Theme>(
 	themePath: string,
 	theme: T,
@@ -123,9 +124,11 @@ function writeStyleFiles<PT extends PixelifyTheme = PixelifyTheme>(
 	});
 }
 
+// eslint-disable-next-line max-params
 function writeCssVarsSourceFile<PT extends PixelifyTheme = PixelifyTheme>(
 	themePath: string,
 	theme: PT,
+	// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 	cssVarsTheme: any,
 	themeBase?: PT,
 ): void {

src/build/compilers/styles/compileStyles.ts

@@ -100,7 +100,7 @@ export const compileStyles = <PT extends PixelifyTheme = PixelifyTheme>(
 	theme: PT,
 	mode: CompileStylesMode = 'default',
 	themeBase?: PT,
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// eslint-disable-next-line sonarjs/cognitive-complexity, max-params
 ): string => {
 	const classicCssType = isClassicCssType(format);
 	const prefix = getPrefix(format, theme);

src/build/compilers/styles/helpers/tokenRecognition.ts

@@ -6,19 +6,19 @@ import { ViewportsOrdered, ViewportsTuple } from '@/interfaces/general/tools/vie
 
 const stringKeys = ['themeName', 'themeNameBase', 'themeInheritsFrom'];
 
-export function isString(token: any, key: string): token is string {
+export function isString(token: unknown, key: string): token is string {
 	return typeof token === 'string' && stringKeys.includes(key);
 }
 
-export function isColor(token: any): token is ColorWithStates {
+export function isColor(token: unknown): token is ColorWithStates {
 	if (typeof token !== 'object') {
 		return false;
 	}
 
-	return token.normal !== undefined;
+	return (token as ColorWithStates).normal !== undefined;
 }
 
-export function isGroupToken(token: any): token is Record<string, any> {
+export function isGroupToken(token: unknown): token is Record<string, any> {
 	if (typeof token !== 'object') {
 		return false;
 	}
@@ -30,12 +30,15 @@ export function isGroupToken(token: any): token is Record<string, any> {
 	return !isColor(token);
 }
 
-export function isAdaptiveFlatToken(token: any): token is Adaptive<any> {
+export function isAdaptiveFlatToken(token: unknown): token is Adaptive<any> {
 	if (typeof token !== 'object') {
 		return false;
 	}
 
-	return token.regular !== undefined && typeof token.regular !== 'object';
+	return (
+		(token as Adaptive<any>).regular !== undefined &&
+		typeof (token as Adaptive<any>).regular !== 'object'
+	);
 }
 
 const allCustomMediaKeys = Object.keys(
@@ -69,6 +72,8 @@ const allCustomMediaKeys = Object.keys(
 	}),
 );
 
-export function isCustomMediaToken(key: any): key is CustomMediaByViewportUnion<ViewportsTuple> {
+export function isCustomMediaToken(
+	key: unknown,
+): key is CustomMediaByViewportUnion<ViewportsTuple> {
 	return typeof key === 'string' && allCustomMediaKeys.includes(key);
 }

src/build/helpers/getGradientPointsFromColor.ts

@@ -1,5 +1,5 @@
 import color from 'color';
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { GradientPoints } from '@/interfaces/general/gradients';
 

src/build/themeProcessors/expandColors/expandColors.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { isColorDescriptionCallable, isColorWithStates } from '@/build/helpers/cssHelpers';
 import { ColorsDescription, ColorsFinal } from '@/interfaces/general';

src/build/themeProcessors/expandColors/mixColors.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { mixColors } from './mixColors';
 

src/build/themeProcessors/expandColors/mixColors.ts

@@ -1,5 +1,5 @@
 import color from 'color';
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 export const mixColors = (
 	colorArg: Property.Color,

src/interfaces/general/animations/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 /**
  * Переменные отвечающие за параметры анимаций

src/interfaces/general/colors/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ColorsDescription, ColorsScheme } from '@/interfaces/general';
 

src/interfaces/general/elevation/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 export interface Elevation {
 	/**

src/interfaces/general/index.ts

@@ -1,4 +1,6 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
+
+import { StaticTokens, Tokens } from '@/interfaces/general/tools/tokenValue';
 
 import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
@@ -11,8 +13,6 @@ import { NamifyObject } from './tools/cssVars';
 import { StringifyObject } from './tools/utils';
 import { Fonts, TypographyBaseProps } from './typography';
 import { ZIndex } from './zIndex';
-import ColorScheme = Property.ColorScheme;
-import { StaticTokens, Tokens } from '@/interfaces/general/tools/tokenValue';
 
 interface AdaptiveInterfaceValues extends Sizes, Fonts {}
 
@@ -106,7 +106,7 @@ export type PixelifyTheme<T extends Partial<Record<keyof T, any>> = StaticTokens
 		Pick<T, Extract<'breakpoints', keyof T>> & {
 			themeType: 'pixelify';
 			themeName: string;
-			colorScheme: ColorScheme;
+			colorScheme: Property.ColorScheme;
 		};
 
 /**

src/interfaces/general/typography/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 type TLength = string | 0;
 

src/interfaces/namespaces/paradigm/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { Theme, ThemeCssVars, ThemeCssVarsWide, ThemeDescription } from '@/interfaces/general';
 import {

src/interfaces/themes/calendar/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ThemeCssVars } from '@/interfaces/general';
 import {

src/interfaces/themes/media/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ColorDescription, ColorWithStates } from '@/interfaces/general/colors';
 import { Adaptive } from '@/interfaces/general/tools';

src/interfaces/themes/mycom/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ColorWithStates } from '@/interfaces/general/colors';
 import { ParadigmThemeCssVars } from '@/interfaces/namespaces/paradigm';

src/interfaces/themes/octavius/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ThemeCssVars } from '@/interfaces/general';
 import {

src/interfaces/themes/portalUI/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ColorDescription, ColorWithStates } from '@/interfaces/general/colors';
 import { GradientPoints } from '@/interfaces/general/gradients';

src/interfaces/themes/promo/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { Adaptive } from '@/interfaces/general/tools';
 import { ViewportsOrdered } from '@/interfaces/general/tools/viewports';

src/interfaces/themes/pulse/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ColorsDescription, ThemeCssVars, ThemeDescription } from '@/interfaces/general';
 import { ColorDescription, ColorWithStates } from '@/interfaces/general/colors';

src/interfaces/themes/search/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import {
 	ColorDescription,

src/themeDescriptions/base/paradigm.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { getGradientPointsFromColor } from '@/build/helpers/getGradientPointsFromColor';
 import { alias, staticRef } from '@/build/helpers/tokenHelpers';

src/themeDescriptions/base/vk.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { getGradientPointsFromColor } from '@/build/helpers/getGradientPointsFromColor';
 import { alias } from '@/build/helpers/tokenHelpers';

src/themeDescriptions/common/colors/projectColors.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 export type ProjectColors = {
 	colorPrimaryAuto: Property.Color;

src/themeDescriptions/common/colors/socialColors.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 export type SocialColors = {
 	colorSocialVk: Property.Color;

src/themeDescriptions/themes/calendar/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ThemeCalendarDescription } from '@/interfaces/themes/calendar';
 import { ThemeCalendarDarkDescription } from '@/interfaces/themes/calendarDark';

src/themeDescriptions/themes/calls/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { ThemeCallsDescription } from '@/interfaces/themes/calls';
 

src/themeDescriptions/themes/cloud/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import { staticRef } from '@/build/helpers/tokenHelpers';
 import { Font } from '@/interfaces/general/typography';

src/themeDescriptions/themes/pulse/index.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
 import {
 	AllowedParadigmColorDescriptions,