diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/flex/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/flex/basic.input.tsx new file mode 100644 index 0000000000..83c04e82d3 --- /dev/null +++ b/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 ( + + +
+
+ + + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/simple-grid/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/simple-grid/basic.input.tsx new file mode 100644 index 0000000000..3e8fe8b88e --- /dev/null +++ b/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 ( + + +
+
+ + + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/flex.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/flex.ts.snap new file mode 100644 index 0000000000..e3bacf76a6 --- /dev/null +++ b/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 ( + ( + +
+
+ + + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-grid.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-grid.ts.snap new file mode 100644 index 0000000000..04e1813a61 --- /dev/null +++ b/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 ( + ( + +
+
+ + + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/flex.ts b/packages/codemods/src/transforms/v7/__tests__/flex.ts new file mode 100644 index 0000000000..69d94594e0 --- /dev/null +++ b/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}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/__tests__/simple-grid.ts b/packages/codemods/src/transforms/v7/__tests__/simple-grid.ts new file mode 100644 index 0000000000..36d5588166 --- /dev/null +++ b/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}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/common/swapGapPropElements.ts b/packages/codemods/src/transforms/v7/common/swapGapPropElements.ts new file mode 100644 index 0000000000..fddf7febba --- /dev/null +++ b/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]; + } + } + } + }); +}; diff --git a/packages/codemods/src/transforms/v7/flex.ts b/packages/codemods/src/transforms/v7/flex.ts new file mode 100644 index 0000000000..56f63149b4 --- /dev/null +++ b/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(); +} diff --git a/packages/codemods/src/transforms/v7/simple-grid.ts b/packages/codemods/src/transforms/v7/simple-grid.ts new file mode 100644 index 0000000000..4e1740ddab --- /dev/null +++ b/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(); +} diff --git a/packages/vkui/src/components/Flex/Flex.e2e-playground.tsx b/packages/vkui/src/components/Flex/Flex.e2e-playground.tsx index 376a84e516..85ca34fa7e 100644 --- a/packages/vkui/src/components/Flex/Flex.e2e-playground.tsx +++ b/packages/vkui/src/components/Flex/Flex.e2e-playground.tsx @@ -20,7 +20,7 @@ export const FlexPlayground = (props: ComponentPlaygroundProps) => { }, { children: [[, , ]], - gap: [[8, 16]], + gap: [[16, 8]], style: [{ width: 120 }], }, ]} diff --git a/packages/vkui/src/components/Flex/Flex.test.tsx b/packages/vkui/src/components/Flex/Flex.test.tsx index a85b90f87c..fd812f6759 100644 --- a/packages/vkui/src/components/Flex/Flex.test.tsx +++ b/packages/vkui/src/components/Flex/Flex.test.tsx @@ -14,8 +14,8 @@ describe(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', () => { diff --git a/packages/vkui/src/components/Flex/Flex.tsx b/packages/vkui/src/components/Flex/Flex.tsx index b516e47e24..f252648a35 100644 --- a/packages/vkui/src/components/Flex/Flex.tsx +++ b/packages/vkui/src/components/Flex/Flex.tsx @@ -47,9 +47,7 @@ export interface FlexProps extends HTMLAttributesWithRootRef { /** * Отступы между элементами. * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям. - * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются. - * - * TODO [>=7]: порядок следования будет [row, column] + * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются. */ gap?: GapsProp; /** @@ -89,7 +87,7 @@ export const Flex: React.FC & { ...props }: FlexProps) => { const withGaps = Children.count(children) > 1 && gap; - const [columnGap, rowGap] = calculateGap(withGaps ? gap : undefined); + const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined); return ( { { {Array.from({ length: itemsCount }, (item, index) => { diff --git a/packages/vkui/src/components/SimpleGrid/SimpleGrid.e2e-playground.tsx b/packages/vkui/src/components/SimpleGrid/SimpleGrid.e2e-playground.tsx index 17abec691c..d9af47f265 100644 --- a/packages/vkui/src/components/SimpleGrid/SimpleGrid.e2e-playground.tsx +++ b/packages/vkui/src/components/SimpleGrid/SimpleGrid.e2e-playground.tsx @@ -21,7 +21,7 @@ export const SimpleGridPlayground = (props: ComponentPlaygroundProps) => { }, { children: [[, , ]], - gap: [[8, 16]], + gap: [[16, 8]], columns: [2], }, ]} diff --git a/packages/vkui/src/components/SimpleGrid/SimpleGrid.test.tsx b/packages/vkui/src/components/SimpleGrid/SimpleGrid.test.tsx index ffcafbf002..033a0f93e5 100644 --- a/packages/vkui/src/components/SimpleGrid/SimpleGrid.test.tsx +++ b/packages/vkui/src/components/SimpleGrid/SimpleGrid.test.tsx @@ -15,7 +15,7 @@ describe('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: { diff --git a/packages/vkui/src/components/SimpleGrid/SimpleGrid.tsx b/packages/vkui/src/components/SimpleGrid/SimpleGrid.tsx index a92e652efe..20f94de054 100644 --- a/packages/vkui/src/components/SimpleGrid/SimpleGrid.tsx +++ b/packages/vkui/src/components/SimpleGrid/SimpleGrid.tsx @@ -31,9 +31,7 @@ export interface SimpleGridProps extends HTMLAttributesWithRootRef=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`; } diff --git a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-android-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-android-chromium-light-1-snap.png index af44440e79..a22a2c91f2 100644 --- a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:43ff18747569867ec3133b7ca523706e90e6389d1356d2d3de1b3c14b3604012 -size 26454 +oid sha256:7f1dc5d1b9d8dafdeb8ca1a3a7aa1bb9cf2a18c398008402e9620796761cdafe +size 26436 diff --git a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-ios-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-ios-webkit-light-1-snap.png index df2454845c..312245e987 100644 --- a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3abf41d470ebf72c93073e9bd048848590682a5de903fd1077ef18c7ada91613 -size 26760 +oid sha256:2c9e354a6b7a74b2f20d9ea222228745caaf3149d7674b612747927b486f685d +size 26750 diff --git a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-chromium-light-1-snap.png index 8bb6ad4bbe..0d0dd74751 100644 --- a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8e2a69280c2f333b74470dc578f4dd8b65f14c5d5062511f89635da82acde5ff -size 25643 +oid sha256:bc71f53019a70fea2f0cb8fa965e5e17eadabdc8efe3a923867fd4c66ef3454d +size 25625 diff --git a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-firefox-light-1-snap.png index cbec462021..6db4d54a71 100644 --- a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a15f87ff71fe19bf009a1187474280c1b94ce52a221cb327e8902f5a7bb4468 -size 37704 +oid sha256:bd557f766efa369d466a7dba1ff26139cfdcfcd605e33f8c395b26e680d220ef +size 37663 diff --git a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-webkit-light-1-snap.png index 663627a397..128349d750 100644 --- a/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SimpleGrid/__image_snapshots__/simplegrid-rendering-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6027fed85deddc9d55924efc737891abd4c6b34e1b648506b84ebe4790b994dd -size 25807 +oid sha256:27a1ccbf3681320eb44c189892cfe359e32e96754a837ec4203838c7df261e78 +size 25797