From 96fcb5ae2133b32a8ac338d37a93db6f6b38bb53 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Mon, 21 Oct 2024 12:02:07 +0300
Subject: [PATCH] feat(Placeholder): rename prop `header` to `title`.
Subcomponent `Header` to `Title`, `Text` to `Description` (#7766)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
h2. Описание
Для компонента `Placeholder` переименовал свойство `header` на`title`. А также переименовал подкомпоненты `Header` на `Title`, `Text` на `Description`
h2. Release notes
- Placeholder:
- свойство `header` переименовано на `title`
```diff
}
- header={}
+ title={}
>
Подключите сообщества, от которых Вы хотите получать уведомления
```
- подкомпонент `Header` переименован на `Title`, `Text` переименован на `Description`
```diff
-
+
Find friends
-
+
-
+
The people you add as your friends will be displayed here
-
+
```
---
packages/codemods/src/codemod-helpers.ts | 17 ++++++++
.../placeholder/basic.input.tsx | 38 ++++++++++++++++++
.../__snapshots__/placeholder.ts.snap | 40 +++++++++++++++++++
.../transforms/v7/__tests__/placeholder.ts | 12 ++++++
.../codemods/src/transforms/v7/placeholder.ts | 23 +++++++++++
.../DropZone/DropZone.e2e-playground.tsx | 6 +--
.../components/DropZone/DropZone.stories.tsx | 6 +--
.../vkui/src/components/DropZone/Readme.md | 12 +++---
.../DropZoneGrid.e2e-playground.tsx | 6 +--
.../vkui/src/components/Gradient/Readme.md | 2 +-
.../ModalPage/ModalPage.stories.tsx | 2 +-
.../vkui/src/components/ModalRoot/Readme.md | 2 +-
.../Placeholder.e2e-playground.tsx | 4 +-
.../Placeholder/Placeholder.module.css | 6 +--
.../Placeholder/Placeholder.stories.tsx | 2 +-
.../Placeholder/Placeholder.test.tsx | 8 ++--
.../components/Placeholder/Placeholder.tsx | 33 +++++++--------
.../vkui/src/components/Placeholder/Readme.md | 10 +++--
...aceholder-android-chromium-dark-1-snap.png | 4 +-
...ceholder-android-chromium-light-1-snap.png | 4 +-
.../placeholder-ios-webkit-dark-1-snap.png | 4 +-
.../placeholder-ios-webkit-light-1-snap.png | 4 +-
...placeholder-vkcom-chromium-dark-1-snap.png | 4 +-
...laceholder-vkcom-chromium-light-1-snap.png | 4 +-
.../placeholder-vkcom-firefox-dark-1-snap.png | 4 +-
...placeholder-vkcom-firefox-light-1-snap.png | 4 +-
.../placeholder-vkcom-webkit-dark-1-snap.png | 4 +-
.../placeholder-vkcom-webkit-light-1-snap.png | 4 +-
.../components/SplitCol/SplitCol.stories.tsx | 4 +-
.../vkui/src/components/SplitLayout/Readme.md | 4 +-
.../SplitLayout/SplitLayout.stories.tsx | 4 +-
31 files changed, 207 insertions(+), 74 deletions(-)
create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/placeholder/basic.input.tsx
create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/placeholder.ts.snap
create mode 100644 packages/codemods/src/transforms/v7/__tests__/placeholder.ts
create mode 100644 packages/codemods/src/transforms/v7/placeholder.ts
diff --git a/packages/codemods/src/codemod-helpers.ts b/packages/codemods/src/codemod-helpers.ts
index 7bb059ca89..3e99db0e5c 100644
--- a/packages/codemods/src/codemod-helpers.ts
+++ b/packages/codemods/src/codemod-helpers.ts
@@ -105,6 +105,23 @@ export function renameProp(
});
}
+export function renameSubComponent(
+ j: JSCodeshift,
+ source: Collection,
+ componentName: string,
+ prevSubcomponentName: string,
+ newSubcomponentName: string,
+) {
+ source
+ .find(j.MemberExpression, {
+ object: { name: componentName },
+ property: { name: prevSubcomponentName },
+ })
+ .replaceWith(
+ j.memberExpression(j.identifier(componentName), j.identifier(newSubcomponentName)),
+ );
+}
+
export function swapBooleanValue(
api: API,
source: Collection,
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/placeholder/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/placeholder/basic.input.tsx
new file mode 100644
index 0000000000..3c5206757d
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/placeholder/basic.input.tsx
@@ -0,0 +1,38 @@
+import { Button,ButtonGroup, Icon56UserAddOutline, Icon56UsersOutline, Placeholder } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+
+ {/* Проверяем переименование свойства header */}
+ }
+ header={}
+ >
+ Подключите сообщества, от которых Вы хотите получать уведомления
+
+
+ {/* Проверяем переименование подкомпонента Header */}
+
+ Find friends
+
+
+ {/* Проверяем переименование подкомпонента Header и Text */}
+
+
+
+
+ Find friends
+ The people you add as your friends will be displayed here
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/placeholder.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/placeholder.ts.snap
new file mode 100644
index 0000000000..2aa230f59f
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/placeholder.ts.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder transforms correctly 1`] = `
+"import { Button,ButtonGroup, Icon56UserAddOutline, Icon56UsersOutline, Placeholder } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+ (
+ {/* Проверяем переименование свойства header */}
+ }
+ title={}
+ >
+ Подключите сообщества, от которых Вы хотите получать уведомления
+
+ {/* Проверяем переименование подкомпонента Header */}
+
+ Find friends
+
+ {/* Проверяем переименование подкомпонента Header и Text */}
+
+
+
+
+ Find friends
+ The people you add as your friends will be displayed here
+
+
+
+
+
+
+
+ )
+ );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/placeholder.ts b/packages/codemods/src/transforms/v7/__tests__/placeholder.ts
new file mode 100644
index 0000000000..260830abe4
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__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/v7/placeholder.ts b/packages/codemods/src/transforms/v7/placeholder.ts
new file mode 100644
index 0000000000..9ece8c564d
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/placeholder.ts
@@ -0,0 +1,23 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp, renameSubComponent } 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);
+
+ if (!localName) {
+ return source.toSource();
+ }
+
+ renameProp(j, source, localName, { header: 'title' });
+
+ renameSubComponent(j, source, localName, 'Header', 'Title');
+ renameSubComponent(j, source, localName, 'Text', 'Description');
+
+ return source.toSource();
+}
diff --git a/packages/vkui/src/components/DropZone/DropZone.e2e-playground.tsx b/packages/vkui/src/components/DropZone/DropZone.e2e-playground.tsx
index fea1c31831..bcf47902ca 100644
--- a/packages/vkui/src/components/DropZone/DropZone.e2e-playground.tsx
+++ b/packages/vkui/src/components/DropZone/DropZone.e2e-playground.tsx
@@ -11,10 +11,10 @@ export const DropZonePlayground = (props: ComponentPlaygroundProps) => (
- Быстрая отправка
-
+ Быстрая отправка
+
Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-
+
)}
diff --git a/packages/vkui/src/components/DropZone/DropZone.stories.tsx b/packages/vkui/src/components/DropZone/DropZone.stories.tsx
index a28c2f6fa7..0571ea4e68 100644
--- a/packages/vkui/src/components/DropZone/DropZone.stories.tsx
+++ b/packages/vkui/src/components/DropZone/DropZone.stories.tsx
@@ -22,10 +22,10 @@ export const Playground: Story = {
- Быстрая отправка
-
+ Быстрая отправка
+
Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-
+
),
diff --git a/packages/vkui/src/components/DropZone/Readme.md b/packages/vkui/src/components/DropZone/Readme.md
index d8c54224c9..ffb9a739f2 100644
--- a/packages/vkui/src/components/DropZone/Readme.md
+++ b/packages/vkui/src/components/DropZone/Readme.md
@@ -4,10 +4,10 @@ const Item = ({ active }) => (
- Быстрая отправка
-
+ Быстрая отправка
+
Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-
+
);
@@ -40,10 +40,10 @@ const Item = ({ active }) => (
- Быстрая отправка
-
+ Быстрая отправка
+
Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-
+
);
diff --git a/packages/vkui/src/components/DropZone/components/DropZoneGrid.e2e-playground.tsx b/packages/vkui/src/components/DropZone/components/DropZoneGrid.e2e-playground.tsx
index 0cbb66647a..f86a5441a9 100644
--- a/packages/vkui/src/components/DropZone/components/DropZoneGrid.e2e-playground.tsx
+++ b/packages/vkui/src/components/DropZone/components/DropZoneGrid.e2e-playground.tsx
@@ -10,10 +10,10 @@ const Item = () => (
- Быстрая отправка
-
+ Быстрая отправка
+
Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-
+
);
diff --git a/packages/vkui/src/components/Gradient/Readme.md b/packages/vkui/src/components/Gradient/Readme.md
index 01b37acbe5..3660f706ce 100644
--- a/packages/vkui/src/components/Gradient/Readme.md
+++ b/packages/vkui/src/components/Gradient/Readme.md
@@ -15,7 +15,7 @@ const Example = () => {
}
- header="Алексей Мазелюк"
+ title="Алексей Мазелюк"
action={
}>
Здесь будут отображаться люди, которых вы добавите в друзья
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
index c60e7af11c..a17021db75 100644
--- a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
+++ b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
@@ -122,7 +122,7 @@ export const Example: Story = {
}
- header="Уведомления от сообществ"
+ title="Уведомления от сообществ"
action={Подключить сообщества}
>
Подключите сообщества, от которых Вы хотите получать уведомления
@@ -140,7 +140,7 @@ export const Example: Story = {
Доступ запрещён
Найти друзей}
>
Здесь будут отображаться люди, которых вы добавите в друзья