feat(Placeholder): rename prop header to title. Subcomponent `Hea…

…der` to `Title`, `Text` to `Description` (#7766) h2. Описание Для компонента `Placeholder` переименовал свойство `header` на`title`. А также переименовал подкомпоненты `Header` на `Title`, `Text` на `Description` h2. Release notes - Placeholder: - свойство `header` переименовано на `title` ```diff <Placeholder icon={<Icon56UsersOutline />} - header={<Button size="m">Подключить сообщества</Button>} + title={<Button size="m">Подключить сообщества</Button>} > Подключите сообщества, от которых Вы хотите получать уведомления </Placeholder> ``` - подкомпонент `Header` переименован на `Title`, `Text` переименован на `Description` ```diff <Placeholder.Container> - <Placeholder.Header> + <Placeholder.Title> Find friends - </Placeholder.Header> + </Placeholder.Title> - <Placeholder.Text> + <Placeholder.Description> The people you add as your friends will be displayed here - </Placeholder.Text> + </Placeholder.Description> </Placeholder.Container> ```
VKCOM · Oct 21, 2024 · 96fcb5a · 96fcb5a
1 parent 596d928
commit 96fcb5a
Show file tree

Hide file tree

Showing 31 changed files with 207 additions and 74 deletions.
diff --git 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
@@ -0,0 +1,38 @@
+import { Button,ButtonGroup, Icon56UserAddOutline, Icon56UsersOutline, Placeholder } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      {/* Проверяем переименование свойства header */}
+      <Placeholder
+        icon={<Icon56UsersOutline />}
+        header={<Button size="m">Подключить сообщества</Button>}
+      >
+        Подключите сообщества, от которых Вы хотите получать уведомления
+      </Placeholder>
+
+      {/* Проверяем переименование подкомпонента Header */}
+      <Placeholder.Container>
+        <Placeholder.Header>Find friends</Placeholder.Header>
+      </Placeholder.Container>
+
+      {/* Проверяем переименование подкомпонента Header и Text */}
+      <Placeholder.Container>
+        <Placeholder.Icon>
+          <Icon56UserAddOutline />
+        </Placeholder.Icon>
+        <Placeholder.Header>Find friends</Placeholder.Header>
+        <Placeholder.Text>The people you add as your friends will be displayed here</Placeholder.Text>
+        <Placeholder.Actions>
+          <ButtonGroup mode="vertical" align="center">
+            <Button size="m">Button</Button>
+            <Button size="m" mode="tertiary">
+              Button
+            </Button>
+          </ButtonGroup>
+        </Placeholder.Actions>
+      </Placeholder.Container>
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/placeholder.ts.snap 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 (
+    (<React.Fragment>
+      {/* Проверяем переименование свойства header */}
+      <Placeholder
+        icon={<Icon56UsersOutline />}
+        title={<Button size="m">Подключить сообщества</Button>}
+      >
+        Подключите сообщества, от которых Вы хотите получать уведомления
+      </Placeholder>
+      {/* Проверяем переименование подкомпонента Header */}
+      <Placeholder.Container>
+        <Placeholder.Title>Find friends</Placeholder.Title>
+      </Placeholder.Container>
+      {/* Проверяем переименование подкомпонента Header и Text */}
+      <Placeholder.Container>
+        <Placeholder.Icon>
+          <Icon56UserAddOutline />
+        </Placeholder.Icon>
+        <Placeholder.Title>Find friends</Placeholder.Title>
+        <Placeholder.Description>The people you add as your friends will be displayed here</Placeholder.Description>
+        <Placeholder.Actions>
+          <ButtonGroup mode="vertical" align="center">
+            <Button size="m">Button</Button>
+            <Button size="m" mode="tertiary">
+              Button
+            </Button>
+          </ButtonGroup>
+        </Placeholder.Actions>
+      </Placeholder.Container>
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/placeholder.ts 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
@@ -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
@@ -11,10 +11,10 @@ export const DropZonePlayground = (props: ComponentPlaygroundProps) => (
           <Placeholder.Icon>
             <Icon56CameraOutline />
           </Placeholder.Icon>
-          <Placeholder.Header>Быстрая отправка</Placeholder.Header>
-          <Placeholder.Text>
+          <Placeholder.Title>Быстрая отправка</Placeholder.Title>
+          <Placeholder.Description>
             Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-          </Placeholder.Text>
+          </Placeholder.Description>
         </Placeholder.Container>
       </DropZone>
     )}

diff --git 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 = {
         <Placeholder.Icon>
           <Icon56CameraOutline />
         </Placeholder.Icon>
-        <Placeholder.Header>Быстрая отправка</Placeholder.Header>
-        <Placeholder.Text>
+        <Placeholder.Title>Быстрая отправка</Placeholder.Title>
+        <Placeholder.Description>
           Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-        </Placeholder.Text>
+        </Placeholder.Description>
       </Placeholder.Container>
     </DropZone>
   ),

diff --git a/packages/vkui/src/components/DropZone/Readme.md b/packages/vkui/src/components/DropZone/Readme.md
@@ -4,10 +4,10 @@ const Item = ({ active }) => (
     <Placeholder.Icon>
       <Icon56CameraOutline fill={active ? 'var(--vkui--color_icon_accent)' : undefined} />
     </Placeholder.Icon>
-    <Placeholder.Header>Быстрая отправка</Placeholder.Header>
-    <Placeholder.Text>
+    <Placeholder.Title>Быстрая отправка</Placeholder.Title>
+    <Placeholder.Description>
       Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-    </Placeholder.Text>
+    </Placeholder.Description>
   </Placeholder.Container>
 );
 
@@ -40,10 +40,10 @@ const Item = ({ active }) => (
     <Placeholder.Icon>
       <Icon56CameraOutline fill={active ? 'var(--vkui--color_icon_accent)' : undefined} />
     </Placeholder.Icon>
-    <Placeholder.Header>Быстрая отправка</Placeholder.Header>
-    <Placeholder.Text>
+    <Placeholder.Title>Быстрая отправка</Placeholder.Title>
+    <Placeholder.Description>
       Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-    </Placeholder.Text>
+    </Placeholder.Description>
   </Placeholder.Container>
 );
 

diff --git 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 = () => (
       <Placeholder.Icon>
         <Icon56CameraOutline />
       </Placeholder.Icon>
-      <Placeholder.Header>Быстрая отправка</Placeholder.Header>
-      <Placeholder.Text>
+      <Placeholder.Title>Быстрая отправка</Placeholder.Title>
+      <Placeholder.Description>
         Перенесите файл сюда для быстрой отправки. В таком случае изображения будут сжаты.
-      </Placeholder.Text>
+      </Placeholder.Description>
     </Placeholder.Container>
   </DropZone>
 );

diff --git a/packages/vkui/src/components/Gradient/Readme.md b/packages/vkui/src/components/Gradient/Readme.md
@@ -15,7 +15,7 @@ const Example = () => {
           <Gradient mode="tint" to="top">
             <Placeholder
               icon={<Avatar size={96} />}
-              header="Алексей Мазелюк"
+              title="Алексей Мазелюк"
               action={
                 <Button size="m" mode="secondary">
                   Редактировать

diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
@@ -127,7 +127,7 @@ export const FullscreenModalPage: Story = {
           <Gradient mode="tint">
             <Placeholder
               icon={<Avatar size={96} src={randomUser.photo_100} />}
-              header={randomUser.first_name + ' ' + randomUser.last_name}
+              title={randomUser.first_name + ' ' + randomUser.last_name}
             ></Placeholder>
           </Gradient>
           <Group

diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -141,7 +141,7 @@ const App = () => {
       <Gradient mode="tint">
         <Placeholder
           icon={<Avatar size={96} src={randomUser.photo_100} />}
-          header={randomUser.first_name + ' ' + randomUser.last_name}
+          title={randomUser.first_name + ' ' + randomUser.last_name}
         ></Placeholder>
       </Gradient>
       <Group

diff --git a/packages/vkui/src/components/Placeholder/Placeholder.e2e-playground.tsx b/packages/vkui/src/components/Placeholder/Placeholder.e2e-playground.tsx
@@ -30,13 +30,13 @@ export const PlaceholderPlayground = (props: ComponentPlaygroundProps) => {
       propSets={[
         // All = On
         {
-          header: ['Find friends'],
+          title: ['Find friends'],
           children: ['The people you add as your friends will be displayed here'],
           ...propsPlaceholder,
         },
         // Subtitle = Off
         {
-          header: ['Find friends'],
+          title: ['Find friends'],
           ...propsPlaceholder,
         },
         // Title = Off

diff --git a/packages/vkui/src/components/Placeholder/Placeholder.module.css b/packages/vkui/src/components/Placeholder/Placeholder.module.css
@@ -24,15 +24,15 @@
   color: var(--vkui--color_icon_secondary);
 }
 
-.header {
+.title {
   color: var(--vkui--color_text_primary);
 }
 
-.text {
+.description {
   color: var(--vkui--color_text_secondary);
 }
 
-.header + .text {
+.title + .description {
   margin-block-start: 8px;
 }
 

diff --git a/packages/vkui/src/components/Placeholder/Placeholder.stories.tsx b/packages/vkui/src/components/Placeholder/Placeholder.stories.tsx
@@ -16,7 +16,7 @@ type Story = StoryObj<PlaceholderProps>;
 export const Playground: Story = {
   args: {
     children: 'Подключите сообщества, от которых Вы хотите получать уведомления',
-    header: 'Уведомления от сообществ',
+    title: 'Уведомления от сообществ',
     icon: <Icon56UsersOutline />,
   },
 };
diff --git a/packages/vkui/src/components/Placeholder/Placeholder.test.tsx b/packages/vkui/src/components/Placeholder/Placeholder.test.tsx
@@ -11,17 +11,17 @@ describe('Placeholder', () => {
     render(
       <Placeholder data-testid="container" stretched>
         <Placeholder.Icon data-testid="icon">Icon</Placeholder.Icon>
-        <Placeholder.Header data-testid="header">Header</Placeholder.Header>
+        <Placeholder.Title data-testid="header">Header</Placeholder.Title>
         <Placeholder.Actions data-testid="actions">Actions</Placeholder.Actions>
-        <Placeholder.Text data-testid="text">Text</Placeholder.Text>
+        <Placeholder.Description data-testid="text">Text</Placeholder.Description>
       </Placeholder>,
     );
     expect(screen.getByTestId('container')).toHaveClass(
       classNames(styles.host, styles.stretched, styles.withPadding),
     );
     expect(screen.getByTestId('icon')).toHaveClass(styles.icon);
-    expect(screen.getByTestId('header')).toHaveClass(styles.header);
-    expect(screen.getByTestId('text')).toHaveClass(styles.text);
+    expect(screen.getByTestId('header')).toHaveClass(styles.title);
+    expect(screen.getByTestId('text')).toHaveClass(styles.description);
     expect(screen.getByTestId('actions')).toHaveClass(styles.action);
 
     expect(screen.getByText('Icon')).toBeInTheDocument();

diff --git a/packages/vkui/src/components/Placeholder/Placeholder.tsx b/packages/vkui/src/components/Placeholder/Placeholder.tsx
@@ -6,7 +6,8 @@ import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';
 import styles from './Placeholder.module.css';
 
-export interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+export interface PlaceholderContainerProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {
   /**
    * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
    */
@@ -40,17 +41,17 @@ const PlaceholderIcon = (props: PlaceholderIconProps): React.ReactNode => (
 
 export type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
 
-const PlaceholderHeader = ({
-  className,
-  ...restProps
-}: PlaceholderHeaderProps): React.ReactNode => (
-  <Title level="2" weight="2" className={classNames(className, styles.header)} {...restProps} />
+const PlaceholderTitle = ({ className, ...restProps }: PlaceholderHeaderProps): React.ReactNode => (
+  <Title level="2" weight="2" className={classNames(className, styles.title)} {...restProps} />
 );
 
 export type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
 
-const PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps): React.ReactNode => (
-  <Headline weight="3" className={classNames(className, styles.text)} {...restProps} />
+const PlaceholderDescription = ({
+  className,
+  ...restProps
+}: PlaceholderTextProps): React.ReactNode => (
+  <Headline weight="3" className={classNames(className, styles.description)} {...restProps} />
 );
 
 export type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;
@@ -67,7 +68,7 @@ export interface PlaceholderProps extends PlaceholderContainerProps {
   /**
    * Заголовок плейсхолдера
    */
-  header?: React.ReactNode;
+  title?: React.ReactNode;
   /**
    * Кнопка действия
    */
@@ -80,20 +81,20 @@ export interface PlaceholderProps extends PlaceholderContainerProps {
 export const Placeholder: React.FC<PlaceholderProps> & {
   Container: typeof PlaceholderContainer;
   Icon: typeof PlaceholderIcon;
-  Header: typeof PlaceholderHeader;
-  Text: typeof PlaceholderText;
+  Title: typeof PlaceholderTitle;
+  Description: typeof PlaceholderDescription;
   Actions: typeof PlaceholderActions;
-} = ({ icon, header, children, action, noPadding = false, ...restProps }: PlaceholderProps) => (
+} = ({ icon, title, children, action, noPadding = false, ...restProps }: PlaceholderProps) => (
   <PlaceholderContainer noPadding={noPadding} {...restProps}>
     {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}
-    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}
-    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}
+    {hasReactNode(title) && <PlaceholderTitle>{title}</PlaceholderTitle>}
+    {hasReactNode(children) && <PlaceholderDescription>{children}</PlaceholderDescription>}
     {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}
   </PlaceholderContainer>
 );
 
 Placeholder.Container = PlaceholderContainer;
 Placeholder.Icon = PlaceholderIcon;
-Placeholder.Header = PlaceholderHeader;
-Placeholder.Text = PlaceholderText;
+Placeholder.Title = PlaceholderTitle;
+Placeholder.Description = PlaceholderDescription;
 Placeholder.Actions = PlaceholderActions;