feat(Spacing): remove 3xs size type (#7634)

h2. Описание

Сейчас в некоторых местах в css используется токен `--vkui--spacing_size_3xs`, но этот токен устарел и равен токену `--vkui--spacing_size_2xs`. Нужно избавиться от использования этого токена в css

h2. Изменения

- Выпилил использование этого токена в компоненте Spacing, соответственно удалил один из вариантов пропа size
- Реализовал кодмод, чтобы size: 3xs преобразовывался в 2xs в Spacing.
- Заменил использование токена `--vkui--spacing_size_3xs` на `--vkui--spacing_size_2xs` в css компонента Header

h2. Release notes

h2. BREAKING CHANGE
- Spacing: удален вариант значения пропа size `3xs` вместо него можно использовать `2xs`, он такой же по значению
  ```diff
  - <Spacing size="3xs" />
  + <Spacing size="2xs" />
  ```

packages/codemods/src/transforms/v7/__testfixtures__/spacing/basic.input.tsx

@@ -0,0 +1,16 @@
+import { Separator, Spacing } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Spacing size="3xs">
+        <Separator/>
+      </Spacing>
+
+      <Spacing size="3xs" />
+
+      <Spacing size={"3xs"} />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/spacing.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`spacing transforms correctly 1`] = `
+"import { Separator, Spacing } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Spacing size="2xs">
+        <Separator/>
+      </Spacing>
+      <Spacing size="2xs" />
+      <Spacing size={"2xs"} />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/spacing.ts

@@ -0,0 +1,11 @@
+jest.autoMockOff();
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'spacing';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});

packages/codemods/src/transforms/v7/common/remapSizePropValue.ts

@@ -1,11 +1,14 @@
-import { Collection, JSCodeshift } from 'jscodeshift';
+import { API, Collection, JSCodeshift } from 'jscodeshift';
+import { report } from '../../../report';
 
 export const remapSizePropValue = ({
   j,
   source,
   sizesMap,
   componentName,
+  api,
 }: {
+  api: API;
   j: JSCodeshift;
   source: Collection;
   sizesMap: Record<string, string>;
@@ -22,8 +25,23 @@ export const remapSizePropValue = ({
       return attributeName === 'size';
     })
     .forEach((attribute) => {
+      let nodeToReplaceValue;
+      if (attribute.node.value?.type === 'JSXExpressionContainer') {
+        const expression = attribute.node.value.expression;
+        if (expression.type === 'StringLiteral') {
+          nodeToReplaceValue = expression;
+        }
+      }
       if (attribute.node.value?.type === 'StringLiteral') {
-        attribute.node.value.value = sizesMap[attribute.node.value.value];
+        nodeToReplaceValue = attribute.node.value;
+      }
+      if (nodeToReplaceValue) {
+        const newValue = sizesMap[nodeToReplaceValue.value];
+        if (newValue) {
+          nodeToReplaceValue.value = newValue;
+        }
+      } else {
+        report(api, `Manual changes required for ${componentName}'s "size" prop.`);
       }
     });
 };

packages/codemods/src/transforms/v7/header.ts

@@ -16,6 +16,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   remapSizePropValue({
     j,
+    api,
     source,
     componentName: localName,
     sizesMap: {

packages/codemods/src/transforms/v7/spacing.ts

@@ -0,0 +1,29 @@
+import { API, FileInfo } from 'jscodeshift';
+import { remapSizePropValue } from './common/remapSizePropValue';
+import { getImportInfo } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'Spacing', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  remapSizePropValue({
+    j,
+    api,
+    source,
+    componentName: localName,
+    sizesMap: {
+      '3xs': '2xs',
+    },
+  });
+
+  return source.toSource();
+}

packages/codemods/src/transforms/v7/spinner.ts

@@ -16,6 +16,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   remapSizePropValue({
     j,
+    api,
     source,
     componentName: localName,
     sizesMap: {

packages/vkui/src/components/Header/Header.module.css

@@ -18,7 +18,7 @@
 .Header__before {
   align-self: center;
   margin-inline-end: var(--vkui--spacing_size_m);
-  margin-block-start: var(--vkui--spacing_size_3xs);
+  margin-block-start: var(--vkui--spacing_size_2xs);
 }
 
 .Header__before--withSubtitle {

packages/vkui/src/components/Spacing/Spacing.module.css

@@ -7,11 +7,6 @@
   box-sizing: border-box;
 }
 
-.Spacing--3xs {
-  /* TODO [>=7]: удалить deprecated токен */
-  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xs);
-}
-
 .Spacing--2xs {
   --vkui_internal--Spacing_gap: var(--vkui--spacing_size_2xs);
 }

packages/vkui/src/components/Spacing/Spacing.tsx

@@ -7,7 +7,6 @@ import styles from './Spacing.module.css';
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
 
 export const sizesClassNames: Record<SpacingSize, string> = {
-  '3xs': styles['Spacing--3xs'],
   '2xs': styles['Spacing--2xs'],
   'xs': styles['Spacing--xs'],
   's': styles['Spacing--s'],
@@ -19,7 +18,7 @@ export const sizesClassNames: Record<SpacingSize, string> = {
   '4xl': styles['Spacing--4xl'],
 };
 
-export type SpacingSize = 's' | 'm' | 'l' | '3xs' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';
+export type SpacingSize = 's' | 'm' | 'l' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**