@vkontakte/vkui 4.22.1 → 4.25.0

package/tasks/generate_scheme.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
-const path = require('path');
-const schemeVKUI = require('@vkontakte/appearance/main.valette/scheme');
-const paletteVKUI = require('@vkontakte/appearance/main.valette/palette');
-const schemeWeb = require('@vkontakte/appearance/main.valette/scheme_web');
-const paletteWeb = require('@vkontakte/appearance/main.valette/palette_web');
-const pkg = require('../package.json');
-const generateScheme = require('@vkontakte/vkjs/build/tasks/generate_scheme');
+const path = require("path");
+const schemeVKUI = require("@vkontakte/appearance/main.valette/scheme");
+const paletteVKUI = require("@vkontakte/appearance/main.valette/palette");
+const schemeWeb = require("@vkontakte/appearance/main.valette/scheme_web");
+const paletteWeb = require("@vkontakte/appearance/main.valette/palette_web");
+const pkg = require("../package.json");
+const generateScheme = require("@vkontakte/vkjs/build/tasks/generate_scheme");
 
-const stylesDir = path.resolve(__dirname, '../src/styles');
+const stylesDir = path.resolve(__dirname, "../src/styles");
 
 generateScheme(schemeVKUI, paletteVKUI, pkg.defaultSchemeId, stylesDir);
 generateScheme(schemeWeb, paletteWeb, pkg.defaultSchemeId, stylesDir);

package/tasks/postcss-check-keyframes.js

@@ -1,10 +1,10 @@
-const { readFileSync } = require('fs');
-const postcss = require('postcss');
-const findAnimationName = require('stylelint/lib/utils/findAnimationName');
+const { readFileSync } = require("fs");
+const postcss = require("postcss");
+const findAnimationName = require("stylelint/lib/utils/findAnimationName");
 
 function getAnimations(root) {
   const animations = {};
-  root.walkAtRules('keyframes', atrule => {
+  root.walkAtRules("keyframes", (atrule) => {
     if (animations[atrule.params]) {
       throw atrule.error(`duplicate @keyframes ${atrule.params}`);
     }
@@ -15,20 +15,22 @@ function getAnimations(root) {
 
 module.exports = ({ importFrom } = {}) => {
   const sharedAnimations = importFrom
-    ? getAnimations(postcss.parse(readFileSync(importFrom), { from: importFrom }))
+    ? getAnimations(
+        postcss.parse(readFileSync(importFrom), { from: importFrom })
+      )
     : {};
   return {
-    postcssPlugin: 'postcss-scope-keyframes',
+    postcssPlugin: "postcss-scope-keyframes",
     Once: (root) => {
       const animations = { ...sharedAnimations, ...getAnimations(root) };
-      root.walkDecls(/^animation(-name)?/, decl => {
+      root.walkDecls(/^animation(-name)?/, (decl) => {
         findAnimationName(decl.value).forEach(({ value }) => {
-          if (value !== 'none' && !animations[value]) {
+          if (value !== "none" && !animations[value]) {
             throw decl.error(`@keyframes ${value} not found`, { word: value });
           }
         });
       });
-    }
+    },
   };
 };
 module.exports.postcss = true;

package/tasks/postcss-scope-root.js

@@ -1,7 +1,7 @@
 module.exports = ({ customPropRoot, except = [] }) => ({
-  postcssPlugin: 'postcss-scope-root',
+  postcssPlugin: "postcss-scope-root",
   Rule: (rule) => {
-    if (rule.selector === ':root' && !except.includes(rule.source.input.file)) {
+    if (rule.selector === ":root" && !except.includes(rule.source.input.file)) {
       rule.selector = customPropRoot;
     }
   },

package/tasks/styleint-atomic.js

@@ -1,59 +1,57 @@
-const path = require('path');
-const stylelint = require('stylelint');
-const selectorParser = require('postcss-selector-parser');
+const path = require("path");
+const stylelint = require("stylelint");
+const selectorParser = require("postcss-selector-parser");
 
-const ruleName = 'vkui/atomic';
+const ruleName = "vkui/atomic";
 const messages = stylelint.utils.ruleMessages(ruleName, {});
-const isPseudo = sel => sel.type === 'pseudo' || sel.parent && isPseudo(sel.parent);
+const isPseudo = (sel) =>
+  sel.type === "pseudo" || (sel.parent && isPseudo(sel.parent));
 
-module.exports = stylelint.createPlugin(
-  ruleName,
-  function () {
-    return function (root, result) {
-      const { file } = root.source.input;
-      // Only apply to component CSS, not styles/*.css
-      if (file.split(path.sep).includes('styles')) {
+module.exports = stylelint.createPlugin(ruleName, function () {
+  return function (root, result) {
+    const { file } = root.source.input;
+    // Only apply to component CSS, not styles/*.css
+    if (file.split(path.sep).includes("styles")) {
+      return;
+    }
+    const cssCmp = path.basename(file).split(".")[0];
+    root.walkRules((node) => {
+      if (node.parent.name === "keyframes") {
         return;
       }
-      const cssCmp = path.basename(file).split('.')[0];
-      root.walkRules(node => {
-        if (node.parent.name === 'keyframes') {
-          return;
+      node.selector.split(/,\s*/).forEach((sel) => {
+        let hasComponentScope = false;
+        let selTarget = "";
+        selectorParser((selectors) => {
+          selectors.walk((selector) => {
+            // exclude :not contents
+            if (isPseudo(selector)) {
+              return;
+            }
+            if (selector.type === "combinator") {
+              hasComponentScope = false;
+              selTarget = "";
+              return;
+            }
+            selTarget += String(selector);
+            if (selector.type === "class") {
+              const ruleCmp = selector.value.split(/(--|__)/g)[0];
+              hasComponentScope = hasComponentScope || ruleCmp === cssCmp;
+            }
+          });
+        }).processSync(sel);
+        if (!hasComponentScope) {
+          stylelint.utils.report({
+            ruleName,
+            node,
+            result,
+            message: `"${selTarget}" must reference .${cssCmp}`,
+          });
         }
-        node.selector.split(/,\s*/).forEach(sel => {
-          let hasComponentScope = false;
-          let selTarget = '';
-          selectorParser(selectors => {
-            selectors.walk(selector => {
-              // exclude :not contents
-              if (isPseudo(selector)) {
-                return;
-              }
-              if (selector.type === 'combinator') {
-                hasComponentScope = false;
-                selTarget = '';
-                return;
-              }
-              selTarget += String(selector);
-              if (selector.type === 'class') {
-                const ruleCmp = selector.value.split(/(--|__)/g)[0];
-                hasComponentScope = hasComponentScope || ruleCmp === cssCmp;
-              }
-            });
-          }).processSync(sel);
-          if (!hasComponentScope) {
-            stylelint.utils.report({
-              ruleName,
-              node,
-              result,
-              message: `"${selTarget}" must reference .${cssCmp}`,
-            });
-          }
-        })
       });
-    };
-  }
-);
+    });
+  };
+});
 
 module.exports.ruleName = ruleName;
-module.exports.messages = messages;
+module.exports.messages = messages;

package/tokenized/index.d.ts

@@ -0,0 +1 @@
+export * from "../dist/tokenized";

package/tokenized/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/cjs/tokenized/index.js",
+  "module": "../dist/tokenized/index.js"
+}

package/tsconfig.dist.json

@@ -4,13 +4,13 @@
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": [
     "node_modules",
-    "src/**/*.test.ts", "src/**/*.test.tsx",
-    "src/**/*.spec.ts", "src/**/*.spec.tsx",
-    "src/**/*.e2e.ts", "src/**/*.e2e.tsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.e2e.ts",
+    "src/**/*.e2e.tsx",
     "src/testing/"
   ],
-  "files": [
-    "src/lib/jsxRuntime.d.ts",
-    "types/global.d.ts"
-  ]
+  "files": ["src/lib/jsxRuntime.d.ts", "types/global.d.ts"]
 }

package/tsconfig.json

@@ -9,19 +9,26 @@
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitThis": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
     "isolatedModules": true,
-    "noImplicitAny": true,
-    "strict": false,
+    "strict": true,
     "baseUrl": "src",
     "paths": {
       "@react-playwright": ["../e2e"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "e2e/**/*.ts", "e2e/**/*.tsx", "e2e/**/*.js"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "e2e/**/*.ts",
+    "e2e/**/*.tsx",
+    "e2e/**/*.js",
+    "tasks/**/*.js",
+    ".github/**/*.js",
+    "*.js"
+  ],
   "files": [
     "node_modules/jest-playwright-preset/types/global.d.ts",
     "node_modules/expect-playwright/global.d.ts",

package/types/global.d.ts

@@ -1,7 +1,12 @@
-import 'react';
+import "react";
+import { Scheme } from "../src/helpers/scheme";
 
-declare module 'react' {
+declare module "react" {
   interface Attributes {
     vkuiClass?: string | string[];
   }
+
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    scheme?: Scheme | "inherit";
+  }
 }

package/unstable/index.d.ts

@@ -1 +1 @@
-export * from '../dist/unstable';
+export * from "../dist/unstable";

package/unstable/package.json

@@ -1,4 +1,4 @@
 {
   "main": "../dist/cjs/unstable/index.js",
   "module": "../dist/unstable/index.js"
-}
+}

package/webpack.config.js

@@ -1,82 +1,84 @@
-const path = require('path');
-const merge = require('webpack-merge');
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 
-const isProduction = process.env.NODE_ENV === 'production';
-process.env.BABEL_KEEP_CSS = '1';
+const isProduction = process.env.NODE_ENV === "production";
+process.env.BABEL_KEEP_CSS = "1";
 const styleLoader = {
-  loader: 'style-loader',
+  loader: "style-loader",
   options: {
     // singleton is faster, but does not support sourcemaps
-    injectType: isProduction ? 'singletonStyleTag' : 'styleTag',
+    injectType: isProduction ? "singletonStyleTag" : "styleTag",
     attributes: {
-      class: 'vkui-style'
+      class: "vkui-style",
     },
   },
 };
 
 const config = {
   entry: {
-    vkui: './src/vkui.js',
+    vkui: "./src/vkui.js",
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    libraryTarget: "umd",
     globalObject: `typeof self !== 'undefined' ? self : this`,
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+    }),
+  ],
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
       },
       {
         test: /\.(jpeg|jpg|png|woff|woff2|svg|otf)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            esModule: false,
-            outputPath: 'static/',
-            name: '[name].[hash:8].[ext]',
-          },
+        type: "asset/resource",
+        generator: {
+          filename: "static/[name].[hash:8].[ext]",
         },
       },
       {
         test: /\.css$/,
         exclude: /styleguide/,
-        use: [styleLoader, 'css-loader', 'postcss-loader']
+        use: [styleLoader, "css-loader", "postcss-loader"],
       },
       {
         test: /\.css$/,
         include: /styleguide/,
-        use: [styleLoader, 'css-loader']
+        use: [styleLoader, "css-loader"],
       },
     ],
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: [".ts", ".tsx", ".js"],
   },
-  devtool: 'source-map',
+  devtool: "source-map",
   stats: {
     children: false,
   },
   externals: [
     {
-      'react': 'react',
-      'prop-types': 'prop-types',
-      'react-dom': 'react-dom',
+      react: "react",
+      "prop-types": "prop-types",
+      "react-dom": "react-dom",
     },
     /@vkontakte\/icons/i,
   ],
 };
 
 const devConfig = {
-  mode: 'development',
+  mode: "development",
 };
 
 const prodConfig = {
-  mode: 'production',
+  mode: "production",
 };
 
 module.exports = isProduction

package/webpack.styles.config.js

@@ -1,61 +1,67 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
-const { defaultSchemeId } = require('./package.json');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+const { defaultSchemeId } = require("./package.json");
 
-process.env.BABEL_KEEP_CSS = '1';
+process.env.BABEL_KEEP_CSS = "1";
 
 module.exports = {
   // CSS is optimized via postcss, we dont care about JS
-  mode: 'none',
+  mode: "none",
   // TODO: Once CSS is modular, replace
   // './src/styles/components.css' -> './src/index.ts'
   // './src/styles/unstable.css' -> './src/unstable/index.ts'
   entry: {
-    stable: ['./src/styles/themes.css', './src/styles/components.css'],
-    unstable: './src/styles/unstable.css',
-    components: './src/styles/components.css',
+    stable: ["./src/styles/themes.css", "./src/styles/components.css"],
+    unstable: "./src/styles/unstable.css",
+    components: "./src/styles/components.css",
     default_scheme: `./src/styles/${defaultSchemeId}.css`,
+    fonts: "./src/fonts/fonts.css",
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js.tmp',
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js.tmp",
   },
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+      },
+      {
+        test: /\.woff|woff2$/,
+        type: "asset/resource",
       },
     ],
   },
   optimization: {
     splitChunks: {
-      chunks: chunk => ['stable', 'unstable'].includes(chunk.name),
+      chunks: (chunk) => ["stable", "unstable"].includes(chunk.name),
       cacheGroups: {
         // capture all common deps between stable & unstable
         vkui: {
-          name: 'vkui',
-          test: (_, chunks) => chunks.some(chunk => chunk.name === 'stable'),
-        }
+          name: "vkui",
+          test: (module, { chunkGraph }) =>
+            chunkGraph
+              .getModuleChunks(module)
+              .some((chunk) => chunk.name === "stable"),
+        },
       },
-    }
+    },
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: [".ts", ".tsx", ".js"],
   },
-  devtool: 'source-map',
-  plugins: [
-    new MiniCssExtractPlugin({ filename: '[name].css' }),
-  ],
+  devtool: "source-map",
+  plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
   stats: {
     all: false,
     assets: true,
     errors: true,
     warnings: true,
-  }
+  },
 };