feat(Flex, SimpleGrid): swap gap prop elements (#7550)

h2. Описание

Сейчас у свойства `gap` в компонентах `Flex` и `SimpleGrid` последовательность отступов такая: `[column, row]`. Нужно поменять местами и сделать `[row, column]`.
Нужно не забыть добавить кодмоды, чтобы поменять местами row и column

h2. Изменения

- Поменял последовательность отступов в `Flex` и `SimpleGrid` в свойстве `gap` на `[row, column]`
- Написал кодмоды для изменения последовательности в коде
- Обновил скриншотные тесты
- Поправил тесты

h2. Release notes
h2. BREAKING CHANGE

- Flex: изменена последовательность отступов в свойстве `gap` на `[row, column]`
  ```diff
  <Flex
    direction="column"
  -  gap={[20, 10]}
  +  gap={[10, 20]}
    align="center"
  >
    <div/>
    <div/>
  </Flex>
  ```
- SimpleGrid: изменена последовательность отступов в свойстве `gap` на `[row, column]`
  ```diff
  <SimpleGrid
    columns={2}
  -  gap={[20, 10]}
  +  gap={[10, 20]}
    align="center"
  >
    <div/>
    <div/>
  </SimpleGrid>
  ```

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

@@ -0,0 +1,27 @@
+import { Flex } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Flex
+        direction="column"
+        gap={[20, 10]}
+        align="center"
+      >
+        <div/>
+        <div/>
+      </Flex>
+      <Flex
+        direction="column"
+        gap={[15, 20]}
+        align="center"
+      />
+      <Flex
+        direction="column"
+        gap={20}
+        align="center"
+      />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__testfixtures__/simple-grid/basic.input.tsx

@@ -0,0 +1,25 @@
+import { SimpleGrid } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <SimpleGrid
+        columns={2}
+        gap={[20, 10]}
+        align="center"
+      >
+        <div/>
+        <div/>
+      </SimpleGrid>
+      <SimpleGrid
+        gap={[15, 20]}
+        align="center"
+      />
+      <SimpleGrid
+        gap={20}
+        align="center"
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`flex transforms correctly 1`] = `
+"import { Flex } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Flex
+        direction="column"
+        gap={[10, 20]}
+        align="center"
+      >
+        <div/>
+        <div/>
+      </Flex>
+      <Flex
+        direction="column"
+        gap={[20, 15]}
+        align="center"
+      />
+      <Flex
+        direction="column"
+        gap={20}
+        align="center"
+      />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-grid.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple-grid transforms correctly 1`] = `
+"import { SimpleGrid } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <SimpleGrid
+        columns={2}
+        gap={[10, 20]}
+        align="center"
+      >
+        <div/>
+        <div/>
+      </SimpleGrid>
+      <SimpleGrid
+        gap={[20, 15]}
+        align="center"
+      />
+      <SimpleGrid
+        gap={20}
+        align="center"
+      />
+    </React.Fragment>)
+  );
+};"
+`;

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

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

packages/codemods/src/transforms/v7/__tests__/simple-grid.ts

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

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

@@ -0,0 +1,31 @@
+import { Collection, JSCodeshift, JSXAttribute } from 'jscodeshift';
+
+export const swapGapPropElements = (j: JSCodeshift, source: Collection, componentName: string) => {
+  source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === componentName,
+    )
+    .forEach((path) => {
+      const attributes = path.node.attributes;
+      const gapAttribute = attributes?.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'gap',
+      ) as JSXAttribute;
+
+      if (
+        gapAttribute &&
+        gapAttribute.value &&
+        gapAttribute.value.type === 'JSXExpressionContainer'
+      ) {
+        const expression = gapAttribute.value.expression;
+
+        if (expression.type === 'ArrayExpression' && expression.elements.length === 2) {
+          // Меняем местами элементы массива
+          const [first, second] = expression.elements;
+          if (first && second) {
+            expression.elements = [second, first];
+          }
+        }
+      }
+    });
+};

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

@@ -0,0 +1,21 @@
+import { API, FileInfo } from 'jscodeshift';
+import { swapGapPropElements } from './common/swapGapPropElements';
+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, 'Flex', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  swapGapPropElements(j, source, localName);
+
+  return source.toSource();
+}

packages/codemods/src/transforms/v7/simple-grid.ts

@@ -0,0 +1,21 @@
+import { API, FileInfo } from 'jscodeshift';
+import { swapGapPropElements } from './common/swapGapPropElements';
+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, 'SimpleGrid', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  swapGapPropElements(j, source, localName);
+
+  return source.toSource();
+}

packages/vkui/src/components/Flex/Flex.e2e-playground.tsx

@@ -20,7 +20,7 @@ export const FlexPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           children: [[<ChildNode key="1" />, <ChildNode key="2" />, <ChildNode key="3" />]],
-          gap: [[8, 16]],
+          gap: [[16, 8]],
           style: [{ width: 120 }],
         },
       ]}

packages/vkui/src/components/Flex/Flex.test.tsx

@@ -14,8 +14,8 @@ describe(Flex, () => {
         <div></div>
       </Flex>,
     );
-    expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--row_gap: 20px');
-    expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--column_gap: 15px');
+    expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--row_gap: 15px');
+    expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--column_gap: 20px');
   });
 
   it('should not have css custom variable with gaps values for one child', () => {

packages/vkui/src/components/Flex/Flex.tsx

@@ -47,9 +47,7 @@ export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Отступы между элементами.
    * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
-   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
-   *
-   * TODO [>=7]: порядок следования будет [row, column]
+   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.
    */
   gap?: GapsProp;
   /**
@@ -89,7 +87,7 @@ export const Flex: React.FC<FlexProps> & {
   ...props
 }: FlexProps) => {
   const withGaps = Children.count(children) > 1 && gap;
-  const [columnGap, rowGap] = calculateGap(withGaps ? gap : undefined);
+  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
 
   return (
     <RootComponent

packages/vkui/src/components/Flex/Readme.md

@@ -85,7 +85,7 @@ const Example = () => {
       <Flex.Item flex="content">
         <FlexContainer
           itemsCount={itemsCount}
-          gap={complexGap ? [columnGap, rowGap] : gap}
+          gap={complexGap ? [rowGap, columnGap] : gap}
           direction={direction}
           align={align}
           justify={justify}

packages/vkui/src/components/SimpleGrid/Readme.md

@@ -72,7 +72,7 @@ const Example = () => {
         <SimpleGrid
           align={align}
           columns={columns}
-          gap={complexGap ? [columnGap, rowGap] : gap}
+          gap={complexGap ? [rowGap, columnGap] : gap}
           margin={margin}
         >
           {Array.from({ length: itemsCount }, (item, index) => {

packages/vkui/src/components/SimpleGrid/SimpleGrid.e2e-playground.tsx

@@ -21,7 +21,7 @@ export const SimpleGridPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           children: [[<ChildNode key="1" />, <ChildNode key="2" />, <ChildNode key="3" />]],
-          gap: [[8, 16]],
+          gap: [[16, 8]],
           columns: [2],
         },
       ]}

packages/vkui/src/components/SimpleGrid/SimpleGrid.test.tsx

@@ -15,7 +15,7 @@ describe('SimpleGrid', () => {
       </SimpleGrid>,
     );
     expect(screen.getByTestId('grid')).toHaveStyle(
-      '--vkui_internal--row_gap: 15px; --vkui_internal--column_gap: 10px; --vkui_internal--grid_columns: 2; --vkui_internal--min_col_width: 150px',
+      '--vkui_internal--row_gap: 10px; --vkui_internal--column_gap: 15px; --vkui_internal--grid_columns: 2; --vkui_internal--min_col_width: 150px',
     );
   });
 
@@ -24,7 +24,7 @@ describe('SimpleGrid', () => {
       props: {
         gap: ['l', 'm'],
       },
-      className: classNames(gapsStyles['-column-gap--l'], gapsStyles['-row-gap--m']),
+      className: classNames(gapsStyles['-column-gap--m'], gapsStyles['-row-gap--l']),
     },
     {
       props: {

packages/vkui/src/components/SimpleGrid/SimpleGrid.tsx

@@ -31,9 +31,7 @@ export interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElemen
   /**
    * Отступы между элементами.
    * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
-   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
-   *
-   * TODO [>=7]: порядок следования будет [row, column]
+   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.
    */
   gap?: GapsProp;
   /**
@@ -64,7 +62,7 @@ export const SimpleGrid = ({
   ...props
 }: SimpleGridProps) => {
   const style: CSSCustomProperties = {};
-  const [columnGap, rowGap] = calculateGap(gap);
+  const [rowGap, columnGap] = calculateGap(gap);
   if (typeof rowGap === 'number') {
     style['--vkui_internal--row_gap'] = `${rowGap}px`;
   }