@vkontakte/vkui 4.27.2 → 4.29.0

package/eslint-plugin-vkui/index.js

@@ -0,0 +1,64 @@
+/** @type {import('eslint').Rule.RuleModule} */
+const noObjectExpressionInArguments = {
+  meta: {
+    schema: [
+      {
+        type: "object",
+        properties: {
+          onlyForFunctionsWithNames: {
+            oneOf: [
+              {
+                type: "array",
+                items: {
+                  type: "string",
+                },
+              },
+              {
+                type: "string",
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  create(context) {
+    const options = context.options;
+    let onlyForFunctionsWithNames = null;
+
+    options.forEach((option) => {
+      if ("onlyForFunctionsWithNames" in option) {
+        onlyForFunctionsWithNames = option.onlyForFunctionsWithNames;
+      }
+    });
+
+    return {
+      /** @param node {import('estree').CallExpression} */
+      CallExpression(node) {
+        if (
+          onlyForFunctionsWithNames &&
+          !onlyForFunctionsWithNames.includes(node.callee.name)
+        ) {
+          return;
+        }
+        const args = node.arguments;
+        for (let i = 0; i < args.length; i += 1) {
+          const arg = args[i];
+          if (arg.type === "ObjectExpression") {
+            context.report({
+              node,
+              message: "Do not use object expression in arguments.",
+            });
+            break;
+          }
+        }
+      },
+    };
+  },
+};
+
+module.exports = {
+  rules: {
+    "no-object-expression-in-arguments": noObjectExpressionInArguments,
+  },
+};

package/eslint-plugin-vkui/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-vkui",
+  "version": "1.0.0",
+  "main": "index.js"
+}

package/jest.unit.config.js

@@ -1,7 +1,10 @@
 const path = require("path");
 module.exports = {
   displayName: "unit",
-  roots: [path.join(__dirname, "src")],
+  roots: [
+    path.join(__dirname, "src"),
+    path.join(__dirname, "postcss-plugin-vk-sans"),
+  ],
   setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,
   collectCoverageFrom: ["src/*/**/*.{ts,tsx}"],

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.27.2",
+  "version": "4.29.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "license": "MIT",
-  "description": "VKUI library",
-  "repository": "https://github.com/VKCOM/VKUI",
-  "homepage": "https://vkcom.github.io/VKUI/",
-  "defaultSchemeId": "bright_light",
   "sideEffects": [
     "./dist/lib/polyfills.js",
     "./dist/index.js",
@@ -18,6 +13,11 @@
     "./dist/cssm/index.js",
     "*.css"
   ],
+  "license": "MIT",
+  "description": "VKUI library",
+  "repository": "https://github.com/VKCOM/VKUI",
+  "homepage": "https://vkcom.github.io/VKUI/",
+  "defaultSchemeId": "bright_light",
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.7",
@@ -45,9 +45,9 @@
     "@typescript-eslint/parser": "^2.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
     "@vkontakte/eslint-config": "2.5.0",
-    "@vkontakte/icons": "^1.136.0",
+    "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.3.1",
+    "@vkontakte/vkui-tokens": "4.7.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -68,6 +68,7 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-vkui": "file:./eslint-plugin-vkui",
     "expect-playwright": "^0.2.6",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
@@ -76,9 +77,8 @@
     "jest-playwright-preset": "^1.4.1",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.5.2",
-    "playwright": "^1.8.0",
-    "playwright-chromium": "^1.8.0",
-    "playwright-core": "^1.8.0",
+    "playwright": "1.17.2",
+    "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
@@ -206,7 +206,11 @@
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
     "@vkontakte/vkjs": "^0.22.2",
+    "dayjs": "^1.11.0",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
+  },
+  "engines": {
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

package/postcss-plugin-vk-sans/__tests__/custom_properties.css

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line vkui/atomic */
+:root {
+  --avatar-size-40-font-size: 14px;
+}

package/postcss-plugin-vk-sans/index.js

@@ -0,0 +1,343 @@
+/* stylelint-disable */
+const postcss = require("postcss");
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Обязательные правила для стилизации "VK Sans"
+ *
+ * 1) Леттер-спейсинг "VK Sans" должен способствовать FOUT с `-apple-system`
+ * 2) Размер шрифта более чем 21px необходимо переопределять на "VK Sans Display"
+ */
+
+let cache = {
+  config: {},
+  fontSizeUsages: {},
+};
+
+const defaultFeatures = {
+  injectLetterSpacing: true,
+  injectVkSansDisplay: true,
+  overrideToVkSansDisplay: true,
+  overrideCustomFonts: true,
+};
+
+const ignoredFontSizeUnits = ["em", "%", "pt"];
+const initializedCustomPropertiesFiles = new Set();
+const VK_SANS_DISPLAY_SIZE_STARTS = 21;
+
+const letterSpacingFontSizes = Object.entries({
+  none: ["inherit", "0", "0px", "1px"],
+  normal: ["12px", "12.5px", "13px", "small"],
+  "-0.035em": ["20px", "38px", "64px"],
+  "-0.007em": ["13.5px"],
+  "-0.02em": ["medium", "16px", "21px"],
+  "-0.025em": ["large", "17px", "18px", "22px", "23px", "24px", "25px", "28px"],
+  "-0.027em": ["19px", "29px", "30px", "31px", "32px", "34px", "35px", "36px"],
+  "-0.08em": ["20px"],
+  "-0.01em": ["14px", "14.5px"],
+  "-0.017em": ["15px"],
+  "0.05em": ["5px"],
+  "0.04em": ["6px"],
+  "0.035em": ["7px"],
+  "0.027em": ["8px"],
+  "0.02em": ["9px"],
+  "0.015em": ["9.5px", "10px"],
+  "0.007em": ["11px"],
+  "0.005em": ["11.5px"],
+}).reduce((acc, [k, v]) => ({ ...acc, [k]: new Set(v) }), {});
+
+const getLetterSpacingByFontSizeValue = (fontSizeValue, platform) => {
+  const fontSize = Object.entries(cache.config[platform]).find(
+    ([, fontSizes]) => fontSizes.has(fontSizeValue)
+  );
+  if (fontSize) {
+    return fontSize[0];
+  }
+};
+
+const wrapVarValue = (letterSpacingValue, fallbackValue) => {
+  const computedValue = letterSpacingValue.replace("em", "").replace("0.0", "");
+  const varFallbackValue = fallbackValue ? `, ${fallbackValue}` : "";
+
+  if (["normal", "inherit", "initial"].includes(letterSpacingValue)) {
+    return letterSpacingValue;
+  }
+
+  return `var(--vk-sans-ls${computedValue}${varFallbackValue})`;
+};
+
+const updateFontSizeStats = (value = "", platform) => {
+  const cacheHit = cache.fontSizeUsages[value];
+
+  if (
+    getLetterSpacingByFontSizeValue(value, platform) ||
+    ignoredFontSizeUnits.some((i) => value.endsWith(i)) ||
+    value.startsWith("calc")
+  ) {
+    return;
+  }
+
+  if (!cacheHit) {
+    console.log(
+      `[VkSansMandatoryDeclarations]: No "letter-spacing" was configured for "font-size: ${value}"`
+    );
+    cache.fontSizeUsages[value] = 0;
+  }
+
+  return ++cache.fontSizeUsages[value];
+};
+
+const extendConfigWithCustomProperties = (customPropertiesFile, platform) => {
+  const customProperties = fs.readFileSync(
+    path.resolve(customPropertiesFile),
+    "utf8"
+  );
+  const customPropertiesValues = {};
+
+  postcss.parse(customProperties).walkRules((rule) => {
+    if (
+      rule.parent.type === "root" &&
+      rule.type === "rule" &&
+      rule.selector === ":root"
+    ) {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--") && decl.value.endsWith("px")) {
+          if (!customPropertiesValues[decl.value]) {
+            customPropertiesValues[decl.value] = [];
+          }
+
+          customPropertiesValues[decl.value].push(`var(${decl.prop})`);
+        }
+      });
+    }
+  });
+
+  for (const [letterSpacing, fontSizes] of Object.entries(
+    cache.config[platform]
+  )) {
+    for (const fontSize of fontSizes) {
+      customPropertiesValues[fontSize] &&
+        customPropertiesValues[fontSize].forEach((f) =>
+          cache.config[platform][letterSpacing].add(f)
+        );
+    }
+  }
+};
+
+const selectorShouldBeIgnored = (rule, ignoreSelectors) => {
+  if (!ignoreSelectors) {
+    return false;
+  }
+
+  return ignoreSelectors.some((i) =>
+    i instanceof RegExp
+      ? rule.selectors.some((j) => j.search(i) !== -1)
+      : rule.selectors.includes(i)
+  );
+};
+
+const initializeConfig = (platform, overrides) => {
+  cache.config[platform] = { ...letterSpacingFontSizes };
+
+  if (overrides) {
+    for (const [letterSpacing, fontSizes] of Object.entries(overrides)) {
+      fontSizes.forEach((f) => {
+        if (!cache.config[platform][letterSpacing]) {
+          cache.config[platform][letterSpacing] = new Set();
+        }
+
+        cache.config[platform][letterSpacing].add(f);
+      });
+    }
+  }
+};
+
+const initializeCustomPropertiesFiles = (customPropertiesFiles, platform) => {
+  customPropertiesFiles.forEach((i) => {
+    if (!initializedCustomPropertiesFiles.has(i)) {
+      extendConfigWithCustomProperties(i, platform);
+      initializedCustomPropertiesFiles.add(i);
+    }
+  });
+};
+
+const VkSansMandatoryDeclarations = postcss.plugin(
+  "vk-sans-mandatory-declarations",
+  (opts) => {
+    const {
+      debug,
+      overrides,
+      platform = "test",
+      features = defaultFeatures,
+      customPropertiesFiles,
+      ignoreFiles,
+      ignoreSelectors,
+      explicitNormalLetterSpacing,
+      respectImportant,
+      varName = "--palette-vk-font",
+    } = opts;
+
+    return (css) => {
+      if (!cache.config[platform]) {
+        initializeConfig(platform, overrides);
+      }
+
+      if (customPropertiesFiles) {
+        initializeCustomPropertiesFiles(customPropertiesFiles, platform);
+      }
+
+      if (
+        !ignoreFiles ||
+        !ignoreFiles.length ||
+        !ignoreFiles.some((i) => css.source.input.file.endsWith(i))
+      ) {
+        css.walkRules((rule) => {
+          let hasFontShorthandProp = rule.some((i) => i.prop === "font");
+          let hasFontFamilyProp = rule.some((i) => i.prop === "font-family");
+          let hasFontSizeProp =
+            hasFontShorthandProp || rule.some((i) => i.prop === "font-size");
+          let hasLetterSpacingProp = rule.some(
+            (i) => i.prop === "letter-spacing"
+          );
+          let fontSizeValue;
+          let letterSpacingOverride;
+
+          if (!selectorShouldBeIgnored(rule, ignoreSelectors)) {
+            rule.walkDecls(/^(font|font-size)$/, (decl) => {
+              if (decl.prop === "font") {
+                const match = decl.value.match(
+                  /(([0-9]|[1-9][0-9])px|inherit)/
+                );
+                if (match) {
+                  fontSizeValue = match[0];
+                }
+              } else {
+                fontSizeValue = decl.value.replace(/\s?!important$/, "");
+              }
+
+              letterSpacingOverride = getLetterSpacingByFontSizeValue(
+                fontSizeValue,
+                platform
+              );
+
+              if (debug) {
+                updateFontSizeStats(fontSizeValue, platform);
+                if (Object.keys(cache.fontSizeUsages).length) {
+                  console.log(
+                    `[VkSansMandatoryDeclarations] Unhandled Font Size Usages in "${platform}":`,
+                    cache.fontSizeUsages
+                  );
+                }
+              }
+
+              if (
+                features.injectLetterSpacing &&
+                !hasLetterSpacingProp &&
+                !(
+                  explicitNormalLetterSpacing
+                    ? [undefined]
+                    : ["normal", undefined]
+                ).includes(letterSpacingOverride)
+              ) {
+                const newRule = {
+                  prop: "letter-spacing",
+                  value: wrapVarValue(letterSpacingOverride),
+                };
+
+                hasLetterSpacingProp = true;
+                rule.append(newRule);
+              }
+
+              if (fontSizeValue && fontSizeValue.endsWith("px")) {
+                if (
+                  parseFloat(fontSizeValue.replace("px", "")) >=
+                  VK_SANS_DISPLAY_SIZE_STARTS
+                ) {
+                  if (
+                    features.injectVkSansDisplay ||
+                    features.overrideToVkSansDisplay
+                  ) {
+                    let fontFamilyValue;
+
+                    if (hasFontFamilyProp && features.overrideToVkSansDisplay) {
+                      rule.walkDecls("font-family", (decl) => {
+                        fontFamilyValue = `var(--vk-sans-display, ${decl.value})`;
+                        decl.remove();
+                      });
+                    }
+
+                    if (
+                      fontFamilyValue ||
+                      (!hasFontFamilyProp && features.injectVkSansDisplay)
+                    ) {
+                      rule.append({
+                        prop: "font-family",
+                        value: fontFamilyValue || `var(--vk-sans-display)`,
+                      });
+                      hasFontFamilyProp = true;
+                    }
+                  }
+                } else if (hasFontFamilyProp) {
+                  if (features.overrideCustomFonts) {
+                    rule.walkDecls("font-family", (decl) => {
+                      const fontFaceWhitelist = [
+                        varName,
+                        "--vk-sans-text",
+                        "--palette-vk-font",
+                        "monospace",
+                        "Monospace",
+                      ];
+
+                      if (
+                        decl.value !== "inherit" &&
+                        !fontFaceWhitelist.some((i) => decl.value.includes(i))
+                      ) {
+                        decl.replaceWith({
+                          prop: "font-family",
+                          value: `var(--vk-sans-text, ${decl.value})`,
+                        });
+                      }
+                    });
+                  }
+                }
+              }
+            });
+
+            if (features.injectLetterSpacing) {
+              rule.walkDecls("letter-spacing", (decl) => {
+                const currentLetterSpacingOverride =
+                  getLetterSpacingByFontSizeValue(fontSizeValue, platform);
+
+                if (respectImportant ? !decl.important : true) {
+                  if (
+                    !hasFontSizeProp ||
+                    ["none", undefined].includes(letterSpacingOverride)
+                  ) {
+                    decl.remove();
+                  } else if (
+                    (letterSpacingOverride || currentLetterSpacingOverride) &&
+                    ![
+                      wrapVarValue(currentLetterSpacingOverride),
+                      currentLetterSpacingOverride,
+                    ].includes(decl.value)
+                  ) {
+                    decl.replaceWith({
+                      prop: "letter-spacing",
+                      value: wrapVarValue(
+                        currentLetterSpacingOverride,
+                        decl.value
+                      ),
+                    });
+                  }
+                }
+              });
+            }
+          }
+        });
+      }
+    };
+  }
+);
+
+module.exports = VkSansMandatoryDeclarations;

package/src/components/ActionSheet/ActionSheet.tsx

@@ -6,7 +6,7 @@ import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
 import { hasReactNode, noop } from "../../lib/utils";
 import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -61,7 +61,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   };
 
   if (process.env.NODE_ENV === "development" && !restProps.onClose) {
-    warn("can't close on outer click without onClose");
+    warn("can't close on outer click without onClose", "error");
   }
 
   const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
@@ -117,17 +117,14 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
           <header vkuiClass="ActionSheet__header">
             {hasReactNode(header) && (
               <Caption
-                level="1"
-                weight={platform === IOS ? "semibold" : "medium"}
+                weight={platform === IOS ? "1" : "2"}
                 vkuiClass="ActionSheet__title"
               >
                 {header}
               </Caption>
             )}
             {hasReactNode(text) && (
-              <Caption level="1" weight="regular" vkuiClass="ActionSheet__text">
-                {text}
-              </Caption>
+              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
             )}
           </header>
         )}

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -23,6 +23,7 @@ export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
     <FocusTrap
       {...restProps}
       onClick={stopPropagation}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(baseClaseName, {
         "ActionSheet--closing": closing,
       })}

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -38,7 +38,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   useEffectDev(() => {
     const toggleEl = getEl(toggleRef);
     if (!toggleEl) {
-      warn("toggleRef not passed");
+      warn("toggleRef not passed", "error");
     }
   }, [toggleRef]);
 

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -4,8 +4,8 @@ import { getClassName } from "../../helpers/getClassName";
 import Tappable from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode, noop } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
-import Title from "../Typography/Title/Title";
+import { Subhead } from "../Typography/Subhead/Subhead";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { Icon16Done, Icon24Done } from "@vkontakte/icons";
@@ -13,7 +13,7 @@ import {
   ActionSheetContext,
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
@@ -85,6 +85,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
           : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
       }
       activeMode="ActionSheetItem--active"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ActionSheetItem", platform),
         `ActionSheetItem--${mode}`,
@@ -150,13 +151,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
         </div>
         {hasReactNode(subtitle) &&
           (sizeY === SizeType.COMPACT ? (
-            <Caption
-              weight="regular"
-              vkuiClass="ActionSheetItem__subtitle"
-              level="1"
-            >
-              {subtitle}
-            </Caption>
+            <Caption vkuiClass="ActionSheetItem__subtitle">{subtitle}</Caption>
           ) : (
             <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
           ))}