From 1e6dcad98ed90a4a1c0380bc5a400500d64655e0 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Fri, 20 Sep 2024 14:32:22 +0300 Subject: [PATCH] feat(Spacing): remove 3xs size type --- .../__testfixtures__/spacing/basic.input.tsx | 16 ++++++++++ .../__tests__/__snapshots__/spacing.ts.snap | 18 ++++++++++++ .../src/transforms/v7/__tests__/spacing.ts | 11 +++++++ .../v7/common/remapSizePropValue.ts | 22 ++++++++++++-- packages/codemods/src/transforms/v7/header.ts | 1 + .../codemods/src/transforms/v7/spacing.ts | 29 +++++++++++++++++++ .../codemods/src/transforms/v7/spinner.ts | 1 + .../src/components/Header/Header.module.css | 2 +- .../src/components/Spacing/Spacing.module.css | 5 ---- .../vkui/src/components/Spacing/Spacing.tsx | 3 +- .../spacing-vkcom-chromium-light-1-snap.png | 4 +-- .../spacing-vkcom-firefox-light-1-snap.png | 4 +-- .../spacing-vkcom-webkit-light-1-snap.png | 4 +-- 13 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/spacing/basic.input.tsx create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/spacing.ts.snap create mode 100644 packages/codemods/src/transforms/v7/__tests__/spacing.ts create mode 100644 packages/codemods/src/transforms/v7/spacing.ts diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/spacing/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/spacing/basic.input.tsx new file mode 100644 index 0000000000..370d63c81b --- /dev/null +++ b/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 ( + + + + + + + + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/spacing.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/spacing.ts.snap new file mode 100644 index 0000000000..dedf28c20a --- /dev/null +++ b/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 ( + ( + + + + + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/spacing.ts b/packages/codemods/src/transforms/v7/__tests__/spacing.ts new file mode 100644 index 0000000000..c3f249b740 --- /dev/null +++ b/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}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/common/remapSizePropValue.ts b/packages/codemods/src/transforms/v7/common/remapSizePropValue.ts index 3b54e8eae8..0ad581a632 100644 --- a/packages/codemods/src/transforms/v7/common/remapSizePropValue.ts +++ b/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; @@ -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.`); } }); }; diff --git a/packages/codemods/src/transforms/v7/header.ts b/packages/codemods/src/transforms/v7/header.ts index e0a64eb7c8..f397688acc 100644 --- a/packages/codemods/src/transforms/v7/header.ts +++ b/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: { diff --git a/packages/codemods/src/transforms/v7/spacing.ts b/packages/codemods/src/transforms/v7/spacing.ts new file mode 100644 index 0000000000..e1006337bf --- /dev/null +++ b/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(); +} diff --git a/packages/codemods/src/transforms/v7/spinner.ts b/packages/codemods/src/transforms/v7/spinner.ts index eb5b631035..2ed3960122 100644 --- a/packages/codemods/src/transforms/v7/spinner.ts +++ b/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: { diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css index 5762f9472a..f29cc9eae7 100644 --- a/packages/vkui/src/components/Header/Header.module.css +++ b/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 { diff --git a/packages/vkui/src/components/Spacing/Spacing.module.css b/packages/vkui/src/components/Spacing/Spacing.module.css index b96cf0099c..846d0dd9f7 100644 --- a/packages/vkui/src/components/Spacing/Spacing.module.css +++ b/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); } diff --git a/packages/vkui/src/components/Spacing/Spacing.tsx b/packages/vkui/src/components/Spacing/Spacing.tsx index 8ea686a81a..a2e2081e76 100644 --- a/packages/vkui/src/components/Spacing/Spacing.tsx +++ b/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 = { - '3xs': styles['Spacing--3xs'], '2xs': styles['Spacing--2xs'], 'xs': styles['Spacing--xs'], 's': styles['Spacing--s'], @@ -19,7 +18,7 @@ export const sizesClassNames: Record = { '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 { /** diff --git a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-chromium-light-1-snap.png index 05dc854e6d..0fa37fbe3b 100644 --- a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ddb07ab72b7d0430d923693b509fe32aa97516c731ed94ed90f6b4cbd917695d -size 7831 +oid sha256:426da6e137c369af0f35cb25f60e5e6eb69ee18ba51603bb277db5e794d2599e +size 7385 diff --git a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-firefox-light-1-snap.png index 6d6de0e4d8..d9bfee1f4a 100644 --- a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2e9a80df8bff4f6fe0496e8020bbb104b6e2709effc6412661a1061bee608a96 -size 14260 +oid sha256:b4a7e8873839134b451b70489cf1ef828c24a7c3ab61f4608a121d579f496e42 +size 13642 diff --git a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-webkit-light-1-snap.png index a899f5b6eb..9d2c13b62f 100644 --- a/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Spacing/__image_snapshots__/spacing-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f8b3b25315ba825ae5c1a708ce8f19cab1a06876267d07cf19ef70c0ce9d2de5 -size 7431 +oid sha256:612fc15808c0b85e6a44348aa7bc19ce43b995de90955f8e42f24520f02f4b83 +size 6896