From ff5ec6733164af3894c85390a28485f66dd84d36 Mon Sep 17 00:00:00 2001 From: Victoria Zhizhonkova Date: Fri, 29 Dec 2023 15:50:38 +0700 Subject: [PATCH] chore: add more codemods (#6340) * chore: ass more codemods * feat(codemodes/config-provider): support `tokensClassNames` * chore: refactor + add panel/modal header codmods --------- Co-authored-by: Inomdzhon Mirdzhamolov --- packages/codemods/src/codemod-helpers.ts | 34 +++++++++++++ .../card-scroll/basic.input.tsx | 12 +++++ .../config-provider/basic.input.tsx | 3 ++ .../__testfixtures__/gallery/basic.input.tsx | 11 +++++ .../image-base/basic.input.tsx | 12 +++++ .../modal-page-header/basic.input.tsx | 2 + .../panel-header/basic.input.tsx | 13 +++++ .../placeholder/basic.input.tsx | 12 +++++ .../popout-wrapper/basic.input.tsx | 11 +++++ .../__testfixtures__/select/basic.input.tsx | 12 +++++ .../__testfixtures__/tabbar/basic.input.tsx | 11 +++++ .../__snapshots__/card-scroll.ts.snap | 16 +++++++ .../__snapshots__/config-provider.ts.snap | 6 +++ .../__tests__/__snapshots__/gallery.ts.snap | 15 ++++++ .../__snapshots__/image-base.ts.snap | 16 +++++++ .../__snapshots__/modal-page-header.ts.snap | 2 + .../__snapshots__/panel-header.ts.snap | 17 +++++++ .../__snapshots__/placeholder.ts.snap | 16 +++++++ .../__snapshots__/popout-wrapper.ts.snap | 15 ++++++ .../__tests__/__snapshots__/select.ts.snap | 16 +++++++ .../__tests__/__snapshots__/tabbar.ts.snap | 15 ++++++ .../src/transforms/__tests__/card-scroll.ts | 12 +++++ .../src/transforms/__tests__/gallery.ts | 12 +++++ .../src/transforms/__tests__/image-base.ts | 12 +++++ .../src/transforms/__tests__/panel-header.ts | 12 +++++ .../src/transforms/__tests__/placeholder.ts | 12 +++++ .../transforms/__tests__/popout-wrapper.ts | 12 +++++ .../src/transforms/__tests__/select.ts | 12 +++++ .../src/transforms/__tests__/tabbar.ts | 12 +++++ .../src/transforms/action-sheet-item.ts | 26 +--------- .../codemods/src/transforms/card-scroll.ts | 16 +++++++ .../src/transforms/config-provider.ts | 48 ++++++++++++++++++- packages/codemods/src/transforms/gallery.ts | 16 +++++++ .../codemods/src/transforms/image-base.ts | 20 ++++++++ .../src/transforms/modal-page-header.ts | 10 ++-- .../codemods/src/transforms/panel-header.ts | 44 +++++++++++++++++ .../codemods/src/transforms/placeholder.ts | 16 +++++++ .../codemods/src/transforms/popout-wrapper.ts | 13 ++--- packages/codemods/src/transforms/select.ts | 20 ++++++++ packages/codemods/src/transforms/tabbar.ts | 16 +++++++ styleguide/pages/migration_v6.md | 7 +++ 41 files changed, 579 insertions(+), 36 deletions(-) create mode 100644 packages/codemods/src/transforms/__testfixtures__/card-scroll/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/gallery/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/image-base/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/panel-header/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/placeholder/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/popout-wrapper/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/select/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__testfixtures__/tabbar/basic.input.tsx create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/panel-header.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/placeholder.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/popout-wrapper.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/select.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/__snapshots__/tabbar.ts.snap create mode 100644 packages/codemods/src/transforms/__tests__/card-scroll.ts create mode 100644 packages/codemods/src/transforms/__tests__/gallery.ts create mode 100644 packages/codemods/src/transforms/__tests__/image-base.ts create mode 100644 packages/codemods/src/transforms/__tests__/panel-header.ts create mode 100644 packages/codemods/src/transforms/__tests__/placeholder.ts create mode 100644 packages/codemods/src/transforms/__tests__/popout-wrapper.ts create mode 100644 packages/codemods/src/transforms/__tests__/select.ts create mode 100644 packages/codemods/src/transforms/__tests__/tabbar.ts create mode 100644 packages/codemods/src/transforms/card-scroll.ts create mode 100644 packages/codemods/src/transforms/gallery.ts create mode 100644 packages/codemods/src/transforms/image-base.ts create mode 100644 packages/codemods/src/transforms/panel-header.ts create mode 100644 packages/codemods/src/transforms/placeholder.ts create mode 100644 packages/codemods/src/transforms/select.ts create mode 100644 packages/codemods/src/transforms/tabbar.ts diff --git a/packages/codemods/src/codemod-helpers.ts b/packages/codemods/src/codemod-helpers.ts index e8b14e8504..ca9546f3e2 100644 --- a/packages/codemods/src/codemod-helpers.ts +++ b/packages/codemods/src/codemod-helpers.ts @@ -59,6 +59,40 @@ export function renameProp( }); } +export function swapBooleanValue( + api: API, + source: Collection, + componentName: string, + previousPropName: string, + currentPropName: string, +) { + const j = api.jscodeshift; + source + .find( + j.JSXOpeningElement, + (element) => element.name.type === 'JSXIdentifier' && element.name.name === componentName, + ) + .find(j.JSXAttribute, (attribute) => attribute.name.name === previousPropName) + .forEach((attribute) => { + const node = attribute.node; + + if (!node.value) { + j(attribute).remove(); + } else if ( + node.value.type === 'JSXExpressionContainer' && + node.value.expression.type === 'BooleanLiteral' + ) { + if (node.value.expression.value) { + j(attribute).remove(); + } else { + j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(currentPropName))); + } + } else { + report(api, `Manual changes required for ${componentName}'s ${previousPropName} prop.`); + } + }); +} + interface AttributeManipulatorAPI { keyTo?: string | ((k?: string) => string); reportText?: string | (() => string); diff --git a/packages/codemods/src/transforms/__testfixtures__/card-scroll/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/card-scroll/basic.input.tsx new file mode 100644 index 0000000000..6c473656c7 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/card-scroll/basic.input.tsx @@ -0,0 +1,12 @@ +import { CardScroll } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + {cards} + {cards} + {cards} + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/config-provider/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/config-provider/basic.input.tsx index 2185265380..ade59f42bc 100644 --- a/packages/codemods/src/transforms/__testfixtures__/config-provider/basic.input.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/config-provider/basic.input.tsx @@ -29,6 +29,9 @@ const App = () => { + + + ); }; diff --git a/packages/codemods/src/transforms/__testfixtures__/gallery/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/gallery/basic.input.tsx new file mode 100644 index 0000000000..8ed2f0b830 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/gallery/basic.input.tsx @@ -0,0 +1,11 @@ +import { Gallery } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + {slides} + {slides} + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/image-base/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/image-base/basic.input.tsx new file mode 100644 index 0000000000..31076a7eb0 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/image-base/basic.input.tsx @@ -0,0 +1,12 @@ +import { Image, ImageBase, Avatar as VKUIAvatar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + + ); +}; \ No newline at end of file diff --git a/packages/codemods/src/transforms/__testfixtures__/modal-page-header/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/modal-page-header/basic.input.tsx index f00ffcde2a..dc8cf0c565 100644 --- a/packages/codemods/src/transforms/__testfixtures__/modal-page-header/basic.input.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/modal-page-header/basic.input.tsx @@ -7,6 +7,8 @@ const App = () => { ... ... + ... + ... ); }; diff --git a/packages/codemods/src/transforms/__testfixtures__/panel-header/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/panel-header/basic.input.tsx new file mode 100644 index 0000000000..9e6d935782 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/panel-header/basic.input.tsx @@ -0,0 +1,13 @@ +import { PanelHeader } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + PanelHeader + PanelHeader + PanelHeader + PanelHeader + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/placeholder/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/placeholder/basic.input.tsx new file mode 100644 index 0000000000..50bd3039e2 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/placeholder/basic.input.tsx @@ -0,0 +1,12 @@ +import { Placeholder } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + Placeholder + Placeholder + Placeholder + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/popout-wrapper/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/popout-wrapper/basic.input.tsx new file mode 100644 index 0000000000..6a65f33379 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/popout-wrapper/basic.input.tsx @@ -0,0 +1,11 @@ +import { PopoutWrapper } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/select/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/select/basic.input.tsx new file mode 100644 index 0000000000..99bd4fc203 --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/select/basic.input.tsx @@ -0,0 +1,12 @@ +import { ChipsSelect, CustomSelect, Select as VKUISelect } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + + ); +}; diff --git a/packages/codemods/src/transforms/__testfixtures__/tabbar/basic.input.tsx b/packages/codemods/src/transforms/__testfixtures__/tabbar/basic.input.tsx new file mode 100644 index 0000000000..971e8ddccd --- /dev/null +++ b/packages/codemods/src/transforms/__testfixtures__/tabbar/basic.input.tsx @@ -0,0 +1,11 @@ +import { Tabbar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + ); +}; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap new file mode 100644 index 0000000000..9613580bc1 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`card-scroll transforms correctly 1`] = ` +"import { CardScroll } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + {cards} + {cards} + {cards} + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap index 9fd8a46c2a..8317e3c334 100644 --- a/packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap @@ -32,6 +32,12 @@ const App = () => { + + + ); };" diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap new file mode 100644 index 0000000000..68017601d4 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`gallery transforms correctly 1`] = ` +"import { Gallery } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + {slides} + {slides} + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap new file mode 100644 index 0000000000..681fbf1a31 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`image-base transforms correctly 1`] = ` +"import { Image, ImageBase, Avatar as VKUIAvatar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap index bbed2993de..abd4ee7664 100644 --- a/packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap @@ -10,6 +10,8 @@ const App = () => { ... ... + ... + ... ); };" diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/panel-header.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/panel-header.ts.snap new file mode 100644 index 0000000000..2f87d64b59 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/panel-header.ts.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`panel-header transforms correctly 1`] = ` +"import { PanelHeader } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + PanelHeader + PanelHeader + PanelHeader + PanelHeader + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/placeholder.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/placeholder.ts.snap new file mode 100644 index 0000000000..2c924650c1 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/placeholder.ts.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`placeholder transforms correctly 1`] = ` +"import { Placeholder } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + Placeholder + Placeholder + Placeholder + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/popout-wrapper.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/popout-wrapper.ts.snap new file mode 100644 index 0000000000..cc3cde7019 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/popout-wrapper.ts.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`popout-wrapper transforms correctly 1`] = ` +"import { PopoutWrapper } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/select.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/select.ts.snap new file mode 100644 index 0000000000..4645054760 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/select.ts.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`select transforms correctly 1`] = ` +"import { ChipsSelect, CustomSelect, Select as VKUISelect } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/__snapshots__/tabbar.ts.snap b/packages/codemods/src/transforms/__tests__/__snapshots__/tabbar.ts.snap new file mode 100644 index 0000000000..599d1d61af --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/__snapshots__/tabbar.ts.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`tabbar transforms correctly 1`] = ` +"import { Tabbar } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + + + ); +};" +`; diff --git a/packages/codemods/src/transforms/__tests__/card-scroll.ts b/packages/codemods/src/transforms/__tests__/card-scroll.ts new file mode 100644 index 0000000000..a875109777 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/card-scroll.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'card-scroll'; +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/__tests__/gallery.ts b/packages/codemods/src/transforms/__tests__/gallery.ts new file mode 100644 index 0000000000..a66c56af4f --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/gallery.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'gallery'; +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/__tests__/image-base.ts b/packages/codemods/src/transforms/__tests__/image-base.ts new file mode 100644 index 0000000000..be75db94c8 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/image-base.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'image-base'; +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/__tests__/panel-header.ts b/packages/codemods/src/transforms/__tests__/panel-header.ts new file mode 100644 index 0000000000..3ba0986ae2 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/panel-header.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'panel-header'; +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/__tests__/placeholder.ts b/packages/codemods/src/transforms/__tests__/placeholder.ts new file mode 100644 index 0000000000..3786de0b02 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/placeholder.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'placeholder'; +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/__tests__/popout-wrapper.ts b/packages/codemods/src/transforms/__tests__/popout-wrapper.ts new file mode 100644 index 0000000000..693caee162 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/popout-wrapper.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'popout-wrapper'; +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/__tests__/select.ts b/packages/codemods/src/transforms/__tests__/select.ts new file mode 100644 index 0000000000..4a47a47cb0 --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/select.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'select'; +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/__tests__/tabbar.ts b/packages/codemods/src/transforms/__tests__/tabbar.ts new file mode 100644 index 0000000000..d8a0b782dd --- /dev/null +++ b/packages/codemods/src/transforms/__tests__/tabbar.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../testHelpers/testHelper'; + +const name = 'tabbar'; +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/action-sheet-item.ts b/packages/codemods/src/transforms/action-sheet-item.ts index 9a6ad78d7a..c4072d6848 100644 --- a/packages/codemods/src/transforms/action-sheet-item.ts +++ b/packages/codemods/src/transforms/action-sheet-item.ts @@ -1,5 +1,5 @@ import { API, FileInfo } from 'jscodeshift'; -import { getImportInfo } from '../codemod-helpers'; +import { getImportInfo, swapBooleanValue } from '../codemod-helpers'; import { JSCodeShiftOptions } from '../types'; export const parser = 'tsx'; @@ -10,29 +10,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi const source = j(file.source); const { localName } = getImportInfo(j, file, 'ActionSheetItem', alias); - source - .find(j.JSXOpeningElement) - .filter( - (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName, - ) - .find(j.JSXAttribute) - .filter((attribute) => attribute.node.name.name === 'autoClose') - .forEach((attribute) => { - const node = attribute.node; - - if (!node.value) { - j(attribute).remove(); - } else if ( - node.value.type === 'JSXExpressionContainer' && - node.value.expression.type === 'BooleanLiteral' - ) { - if (node.value.expression.value) { - j(attribute).remove(); - } else { - j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier('autoCloseDisabled'))); - } - } - }); + swapBooleanValue(api, source, localName, 'autoClose', 'autoCloseDisabled'); return source.toSource(); } diff --git a/packages/codemods/src/transforms/card-scroll.ts b/packages/codemods/src/transforms/card-scroll.ts new file mode 100644 index 0000000000..dad83cada5 --- /dev/null +++ b/packages/codemods/src/transforms/card-scroll.ts @@ -0,0 +1,16 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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, 'CardScroll', alias); + + swapBooleanValue(api, source, localName, 'withSpaces', 'noSpaces'); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/config-provider.ts b/packages/codemods/src/transforms/config-provider.ts index 1954e5fcfc..7b79fee385 100644 --- a/packages/codemods/src/transforms/config-provider.ts +++ b/packages/codemods/src/transforms/config-provider.ts @@ -2,6 +2,13 @@ import { API, FileInfo } from 'jscodeshift'; import { getImportInfo } from '../codemod-helpers'; import { JSCodeShiftOptions } from '../types'; +const ALLOWED_PLATFORM_LIST = ['android', 'ios', 'vkcom']; + +const wrapUnknownPlatformToVKUITokensClassName = ( + unknownPlatform: string, + appearance: 'light' | 'dark', +) => `vkui--${unknownPlatform}--${appearance}`; + export const parser = 'tsx'; export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { @@ -11,12 +18,14 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi let changed = false; const { localName } = getImportInfo(j, file, 'ConfigProvider', alias); - source + const attributes = source .find(j.JSXOpeningElement) .filter( (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName, ) - .find(j.JSXAttribute) + .find(j.JSXAttribute); + + attributes .filter((attribute) => attribute.node.name.name === 'webviewType') .forEach((attribute) => { const node = attribute.node.value; @@ -65,6 +74,41 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi } }); + attributes + .filter((attribute) => attribute.node.name.name === 'platform') + .forEach((attribute) => { + const node = attribute.node.value; + + if (!node) { + return; + } + + if ( + (node.type === 'Literal' || node.type === 'StringLiteral') && + typeof node.value === 'string' + ) { + if (!ALLOWED_PLATFORM_LIST.includes(node.value)) { + j(attribute).replaceWith( + j.jsxAttribute( + j.jsxIdentifier('tokensClassNames'), + j.jsxExpressionContainer( + j.objectExpression([ + j.objectProperty( + j.jsxIdentifier('light'), + j.stringLiteral(wrapUnknownPlatformToVKUITokensClassName(node.value, 'light')), + ), + j.objectProperty( + j.jsxIdentifier('dark'), + j.stringLiteral(wrapUnknownPlatformToVKUITokensClassName(node.value, 'dark')), + ), + ]), + ), + ), + ); + } + } + }); + if (changed) { source .find(j.ImportDeclaration) diff --git a/packages/codemods/src/transforms/gallery.ts b/packages/codemods/src/transforms/gallery.ts new file mode 100644 index 0000000000..c045c3c55f --- /dev/null +++ b/packages/codemods/src/transforms/gallery.ts @@ -0,0 +1,16 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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, 'Gallery', alias); + + swapBooleanValue(api, source, localName, 'isDraggable', 'dragDisabled'); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/image-base.ts b/packages/codemods/src/transforms/image-base.ts new file mode 100644 index 0000000000..650caff4e6 --- /dev/null +++ b/packages/codemods/src/transforms/image-base.ts @@ -0,0 +1,20 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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: imageBaseLocalName } = getImportInfo(j, file, 'ImageBase', alias); + const { localName: imageLocalName } = getImportInfo(j, file, 'Image', alias); + const { localName: avatarLocalName } = getImportInfo(j, file, 'Avatar', alias); + + swapBooleanValue(api, source, imageBaseLocalName, 'withBorder', 'noBorder'); + swapBooleanValue(api, source, imageLocalName, 'withBorder', 'noBorder'); + swapBooleanValue(api, source, avatarLocalName, 'withBorder', 'noBorder'); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/modal-page-header.ts b/packages/codemods/src/transforms/modal-page-header.ts index 46dbd121e6..361146f8ff 100644 --- a/packages/codemods/src/transforms/modal-page-header.ts +++ b/packages/codemods/src/transforms/modal-page-header.ts @@ -1,5 +1,5 @@ import { API, FileInfo } from 'jscodeshift'; -import { getImportInfo } from '../codemod-helpers'; +import { getImportInfo, swapBooleanValue } from '../codemod-helpers'; import { JSCodeShiftOptions } from '../types'; export const parser = 'tsx'; @@ -11,9 +11,9 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi const { localName } = getImportInfo(j, file, 'ModalPageHeader', alias); source - .find(j.JSXOpeningElement) - .filter( - (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName, + .find( + j.JSXOpeningElement, + (element) => element.name.type === 'JSXIdentifier' && element.name.name === localName, ) .forEach((element) => { const attributes = element.value.attributes; @@ -39,5 +39,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi } }); + swapBooleanValue(api, source, localName, 'separator', 'noSeparator'); + return source.toSource(); } diff --git a/packages/codemods/src/transforms/panel-header.ts b/packages/codemods/src/transforms/panel-header.ts new file mode 100644 index 0000000000..c2762a3cbd --- /dev/null +++ b/packages/codemods/src/transforms/panel-header.ts @@ -0,0 +1,44 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } from '../codemod-helpers'; +import { report } from '../report'; +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, 'PanelHeader', alias); + + swapBooleanValue(api, source, localName, 'visor', 'float'); + + source + .find( + j.JSXOpeningElement, + (element) => element.name.type === 'JSXIdentifier' && element.name.name === localName, + ) + .find(j.JSXAttribute, (attribute) => attribute.name.name === 'separator') + .forEach((attribute) => { + const node = attribute.node; + + if (!node.value) { + j(attribute).remove(); + } else if ( + node.value.type === 'JSXExpressionContainer' && + node.value.expression.type === 'BooleanLiteral' + ) { + if (node.value.expression.value) { + j(attribute).remove(); + } else { + j(attribute).replaceWith( + j.jsxAttribute(j.jsxIdentifier('delimiter'), j.stringLiteral('none')), + ); + } + } else { + report(api, `Manual changes required for PanelHeader's separator prop.`); + } + }); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/placeholder.ts b/packages/codemods/src/transforms/placeholder.ts new file mode 100644 index 0000000000..f8d4cf68a2 --- /dev/null +++ b/packages/codemods/src/transforms/placeholder.ts @@ -0,0 +1,16 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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, 'Placeholder', alias); + + swapBooleanValue(api, source, localName, 'withPadding', 'noPadding'); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/popout-wrapper.ts b/packages/codemods/src/transforms/popout-wrapper.ts index 4bdda9af54..336fc9cacb 100644 --- a/packages/codemods/src/transforms/popout-wrapper.ts +++ b/packages/codemods/src/transforms/popout-wrapper.ts @@ -1,6 +1,6 @@ import chalk from 'chalk'; import { API, FileInfo } from 'jscodeshift'; -import { getImportInfo } from '../codemod-helpers'; +import { getImportInfo, swapBooleanValue } from '../codemod-helpers'; import { report } from '../report'; import { JSCodeShiftOptions } from '../types'; @@ -12,11 +12,10 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi const source = j(file.source); const { localName } = getImportInfo(j, file, 'PopoutWrapper', alias); - const components = source - .find(j.JSXOpeningElement) - .filter( - (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName, - ); + const components = source.find( + j.JSXOpeningElement, + (element) => element.name.type === 'JSXIdentifier' && element.name.name === localName, + ); if (components.size() > 0) { report( @@ -27,5 +26,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi ); } + swapBooleanValue(api, source, localName, 'hasMask', 'noBackground'); + return source.toSource(); } diff --git a/packages/codemods/src/transforms/select.ts b/packages/codemods/src/transforms/select.ts new file mode 100644 index 0000000000..28d42224ee --- /dev/null +++ b/packages/codemods/src/transforms/select.ts @@ -0,0 +1,20 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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: selectLocalName } = getImportInfo(j, file, 'Select', alias); + const { localName: customSelectLocalName } = getImportInfo(j, file, 'CustomSelect', alias); + const { localName: chipsSelectLocalName } = getImportInfo(j, file, 'ChipsSelect', alias); + + swapBooleanValue(api, source, selectLocalName, 'fixDropdownWidth', 'dropdownAutoWidth'); + swapBooleanValue(api, source, customSelectLocalName, 'fixDropdownWidth', 'dropdownAutoWidth'); + swapBooleanValue(api, source, chipsSelectLocalName, 'fixDropdownWidth', 'dropdownAutoWidth'); + + return source.toSource(); +} diff --git a/packages/codemods/src/transforms/tabbar.ts b/packages/codemods/src/transforms/tabbar.ts new file mode 100644 index 0000000000..a3c2aa80d2 --- /dev/null +++ b/packages/codemods/src/transforms/tabbar.ts @@ -0,0 +1,16 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, swapBooleanValue } 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, 'Tabbar', alias); + + swapBooleanValue(api, source, localName, 'shadow', 'plain'); + + return source.toSource(); +} diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md index 103c2c9b98..021ee3c764 100644 --- a/styleguide/pages/migration_v6.md +++ b/styleguide/pages/migration_v6.md @@ -781,6 +781,13 @@ npx @vkontakte/vkui-codemods --help + ... ``` +```diff +- ... ++ ... +- ... ++ ... +``` +
### [`Pagination`](#/Pagination)