@vkontakte/vkui 4.28.0 → 4.28.1

package/tasks/styleint-atomic.js

@@ -0,0 +1,57 @@
+const path = require("path");
+const stylelint = require("stylelint");
+const selectorParser = require("postcss-selector-parser");
+
+const ruleName = "vkui/atomic";
+const messages = stylelint.utils.ruleMessages(ruleName, {});
+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")) {
+      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}`,
+          });
+        }
+      });
+    });
+  };
+});
+
+module.exports.ruleName = ruleName;
+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

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  // only include source, not testing
+  "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/testing/"
+  ],
+  "files": ["src/lib/jsxRuntime.d.ts", "types/global.d.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "createScopedElement",
+    "target": "esnext",
+    "lib": ["es6", "dom"],
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "strict": true,
+    "baseUrl": "src",
+    "paths": {
+      "@react-playwright": ["../e2e"]
+    }
+  },
+  "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",
+    "src/lib/jsxRuntime.d.ts",
+    "types/global.d.ts"
+  ]
+}

package/types/global.d.ts

@@ -0,0 +1,7 @@
+import "react";
+
+declare module "react" {
+  interface Attributes {
+    vkuiClass?: string | string[];
+  }
+}

package/unstable/index.d.ts

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

package/unstable/package.json

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

package/webpack.config.js

@@ -0,0 +1,86 @@
+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 styleLoader = {
+  loader: "style-loader",
+  options: {
+    // singleton is faster, but does not support sourcemaps
+    injectType: isProduction ? "singletonStyleTag" : "styleTag",
+    attributes: {
+      class: "vkui-style",
+    },
+  },
+};
+
+const config = {
+  entry: {
+    vkui: "./src/vkui.js",
+  },
+  output: {
+    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",
+      },
+      {
+        test: /\.(jpeg|jpg|png|woff|woff2|svg|otf)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/[name].[hash:8].[ext]",
+        },
+      },
+      {
+        test: /\.css$/,
+        exclude: /styleguide/,
+        use: [styleLoader, "css-loader", "postcss-loader"],
+      },
+      {
+        test: /\.css$/,
+        include: /styleguide/,
+        use: [styleLoader, "css-loader"],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  devtool: "source-map",
+  stats: {
+    children: false,
+  },
+  externals: [
+    {
+      react: "react",
+      "prop-types": "prop-types",
+      "react-dom": "react-dom",
+    },
+    /@vkontakte\/icons/i,
+  ],
+};
+
+const devConfig = {
+  mode: "development",
+};
+
+const prodConfig = {
+  mode: "production",
+};
+
+module.exports = isProduction
+  ? merge(config, prodConfig)
+  : merge(config, devConfig);

package/webpack.styles.config.js

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

package/dist/components.js.tmp

@@ -1,24 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-/******/ })()
-;

package/dist/default_scheme.js.tmp

@@ -1,24 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-/******/ })()
-;

package/dist/fonts.js.tmp

@@ -1,24 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-/******/ })()
-;

package/dist/stable.js.tmp

@@ -1,166 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ([
-/* 0 */
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-
-/***/ }),
-/* 1 */
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-
-/***/ })
-/******/ 	]);
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/chunk loaded */
-/******/ 	!function() {
-/******/ 		var deferred = [];
-/******/ 		__webpack_require__.O = function(result, chunkIds, fn, priority) {
-/******/ 			if(chunkIds) {
-/******/ 				priority = priority || 0;
-/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
-/******/ 				deferred[i] = [chunkIds, fn, priority];
-/******/ 				return;
-/******/ 			}
-/******/ 			var notFulfilled = Infinity;
-/******/ 			for (var i = 0; i < deferred.length; i++) {
-/******/ 				var chunkIds = deferred[i][0];
-/******/ 				var fn = deferred[i][1];
-/******/ 				var priority = deferred[i][2];
-/******/ 				var fulfilled = true;
-/******/ 				for (var j = 0; j < chunkIds.length; j++) {
-/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {
-/******/ 						chunkIds.splice(j--, 1);
-/******/ 					} else {
-/******/ 						fulfilled = false;
-/******/ 						if(priority < notFulfilled) notFulfilled = priority;
-/******/ 					}
-/******/ 				}
-/******/ 				if(fulfilled) {
-/******/ 					deferred.splice(i--, 1)
-/******/ 					var r = fn();
-/******/ 					if (r !== undefined) result = r;
-/******/ 				}
-/******/ 			}
-/******/ 			return result;
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	!function() {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			3: 0,
-/******/ 			5: 0
-/******/ 		};
-/******/ 		
-/******/ 		// no chunk on demand loading
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = function(parentChunkLoadingFunction, data) {
-/******/ 			var chunkIds = data[0];
-/******/ 			var moreModules = data[1];
-/******/ 			var runtime = data[2];
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0;
-/******/ 			if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {
-/******/ 				for(moduleId in moreModules) {
-/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 					}
-/******/ 				}
-/******/ 				if(runtime) var result = runtime(__webpack_require__);
-/******/ 			}
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					installedChunks[chunkId][0]();
-/******/ 				}
-/******/ 				installedChunks[chunkId] = 0;
-/******/ 			}
-/******/ 			return __webpack_require__.O(result);
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = self["webpackChunk_vkontakte_vkui"] = self["webpackChunk_vkontakte_vkui"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, [5], function() { return __webpack_require__(0); })
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [5], function() { return __webpack_require__(1); })
-/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
-/******/ 	
-/******/ })()
-;

package/dist/unstable.js.tmp

@@ -1,24 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-/******/ })()
-;