From 98faaace9836833434ba7848374e3ddc17d4bdc5 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Mon, 21 Oct 2024 14:59:53 +0300
Subject: [PATCH] feat(CardScroll): rename prop `noSpaces` to `padding` (#7788)
---
.../card-scroll/basic.input.tsx | 59 ++++++++++++++++
.../__snapshots__/card-scroll.ts.snap | 52 ++++++++++++++
.../transforms/v7/__tests__/card-scroll.ts | 12 ++++
.../codemods/src/transforms/v7/card-scroll.ts | 70 +++++++++++++++++++
.../CardScroll/CardScroll.e2e-playground.tsx | 4 +-
.../CardScroll/CardScroll.module.css | 18 ++---
.../src/components/CardScroll/CardScroll.tsx | 9 ++-
...ardscroll-android-chromium-dark-1-snap.png | 4 +-
...rdscroll-android-chromium-light-1-snap.png | 4 +-
.../cardscroll-ios-webkit-dark-1-snap.png | 4 +-
.../cardscroll-ios-webkit-light-1-snap.png | 4 +-
.../cardscroll-vkcom-chromium-dark-1-snap.png | 4 +-
...cardscroll-vkcom-chromium-light-1-snap.png | 4 +-
.../cardscroll-vkcom-firefox-dark-1-snap.png | 4 +-
.../cardscroll-vkcom-firefox-light-1-snap.png | 4 +-
.../cardscroll-vkcom-webkit-dark-1-snap.png | 4 +-
.../cardscroll-vkcom-webkit-light-1-snap.png | 4 +-
17 files changed, 231 insertions(+), 33 deletions(-)
create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/card-scroll/basic.input.tsx
create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/card-scroll.ts.snap
create mode 100644 packages/codemods/src/transforms/v7/__tests__/card-scroll.ts
create mode 100644 packages/codemods/src/transforms/v7/card-scroll.ts
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/card-scroll/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/card-scroll/basic.input.tsx
new file mode 100644
index 0000000000..b5bd05a95c
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/card-scroll/basic.input.tsx
@@ -0,0 +1,59 @@
+import { Card, CardScroll } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+
+ {/* noSpaces by default -> padding=true */}
+
+
+
+
+
+
+
+
+
+ {/* noSpaces="false" -> padding="true" */}
+
+
+
+
+
+
+
+
+
+ {/* noSpaces="true" -> padding="false" */}
+
+
+
+
+
+
+
+
+
+ {/* noSpaces="true" -> padding="false" */}
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/card-scroll.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/card-scroll.ts.snap
new file mode 100644
index 0000000000..9ed3c306b4
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/card-scroll.ts.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card-scroll transforms correctly 1`] = `
+"import { Card, CardScroll } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+ return (
+ (
+ {/* noSpaces by default -> padding=true */}
+
+
+
+
+
+
+
+
+ {/* noSpaces="false" -> padding="true" */}
+
+
+
+
+
+
+
+
+ {/* noSpaces="true" -> padding="false" */}
+
+
+
+
+
+
+
+
+ {/* noSpaces="true" -> padding="false" */}
+
+
+
+
+
+
+
+
+ )
+ );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/card-scroll.ts b/packages/codemods/src/transforms/v7/__tests__/card-scroll.ts
new file mode 100644
index 0000000000..e5989dc597
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__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/v7/card-scroll.ts b/packages/codemods/src/transforms/v7/card-scroll.ts
new file mode 100644
index 0000000000..723fd512e8
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/card-scroll.ts
@@ -0,0 +1,70 @@
+import { API, FileInfo, JSXAttribute, JSXSpreadAttribute } from 'jscodeshift';
+import { getImportInfo, removeAttribute } 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, 'CardScroll', alias);
+
+ if (!localName) {
+ return source.toSource();
+ }
+
+ const getValueFromAttribute = (attribute: JSXAttribute): boolean | null => {
+ if (attribute.value?.type === 'BooleanLiteral') {
+ return attribute.value.value;
+ }
+ if (attribute.value?.type === 'JSXExpressionContainer') {
+ const expression = attribute.value.expression;
+ if (expression.type === 'BooleanLiteral') {
+ return expression.value;
+ }
+ return null;
+ }
+ return true;
+ };
+
+ const addPropPadding = (attributes: Array | undefined) => {
+ attributes?.push(j.jsxAttribute(j.jsxIdentifier('padding')));
+ };
+
+ source
+ .find(j.JSXElement, {
+ openingElement: {
+ name: {
+ name: localName,
+ },
+ },
+ })
+ .forEach((path) => {
+ const attributes = path.node.openingElement.attributes;
+ const noSpacesAttr: JSXAttribute | undefined = attributes?.find(
+ (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'noSpaces',
+ ) as JSXAttribute | undefined;
+
+ if (!noSpacesAttr) {
+ addPropPadding(attributes);
+ return;
+ }
+ const attrValue = getValueFromAttribute(noSpacesAttr);
+ if (attrValue === null) {
+ report(
+ api,
+ `Manual changes required for ${localName}'s "noSpaces" prop. Need to change it to "padding" prop`,
+ );
+ return;
+ }
+ removeAttribute(attributes, noSpacesAttr);
+
+ if (!attrValue) {
+ addPropPadding(attributes);
+ }
+ });
+
+ return source.toSource();
+}
diff --git a/packages/vkui/src/components/CardScroll/CardScroll.e2e-playground.tsx b/packages/vkui/src/components/CardScroll/CardScroll.e2e-playground.tsx
index 6ae4df7393..f295b6903b 100644
--- a/packages/vkui/src/components/CardScroll/CardScroll.e2e-playground.tsx
+++ b/packages/vkui/src/components/CardScroll/CardScroll.e2e-playground.tsx
@@ -14,13 +14,15 @@ export const CardScrollPlayground = (props: ComponentPlaygroundProps) => {
{...props}
propSets={[
{
+ padding: [true],
size: ['s', 'm', 'l', false],
},
{
+ padding: [true],
showArrows: [true, false, 'always'],
},
{
- noSpaces: [false, true],
+ padding: [false],
},
]}
>
diff --git a/packages/vkui/src/components/CardScroll/CardScroll.module.css b/packages/vkui/src/components/CardScroll/CardScroll.module.css
index 38ca8e29b2..c10a988b5f 100644
--- a/packages/vkui/src/components/CardScroll/CardScroll.module.css
+++ b/packages/vkui/src/components/CardScroll/CardScroll.module.css
@@ -19,7 +19,7 @@
margin-block-start: 16px;
}
-.withSpaces .gap {
+.withPaddings .gap {
inline-size: var(--vkui--size_base_padding_horizontal--regular);
}
@@ -29,7 +29,7 @@
*/
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
- .withSpaces
+ .withPaddings
.gap {
inline-size: 16px;
}
@@ -37,7 +37,7 @@
@media (--viewWidth-smallTabletPlus) {
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
- .withSpaces
+ .withPaddings
.gap {
inline-size: 16px;
}
@@ -48,33 +48,33 @@
* Group
*/
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalGroup--mode-card) .withSpaces {
+:global(.vkuiInternalGroup--mode-card) .withPaddings {
margin-inline: -8px;
}
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalGroup--mode-card) .withSpaces:first-child {
+:global(.vkuiInternalGroup--mode-card) .withPaddings:first-child {
padding-block-start: var(--vkui--size_cardgrid_padding_vertical--regular);
}
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalGroup--mode-card) .withSpaces:last-child {
+:global(.vkuiInternalGroup--mode-card) .withPaddings:last-child {
padding-block-end: var(--vkui--size_cardgrid_padding_vertical--regular);
}
@media (--sizeX-regular) {
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
- :global(.vkuiInternalGroup--mode-none) .withSpaces {
+ :global(.vkuiInternalGroup--mode-none) .withPaddings {
margin-inline: -8px;
}
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
- :global(.vkuiInternalGroup--mode-none) .withSpaces:first-child {
+ :global(.vkuiInternalGroup--mode-none) .withPaddings:first-child {
padding-block-start: var(--vkui--size_cardgrid_padding_vertical--regular);
}
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
- :global(.vkuiInternalGroup--mode-none) .withSpaces:last-child {
+ :global(.vkuiInternalGroup--mode-none) .withPaddings:last-child {
padding-block-end: var(--vkui--size_cardgrid_padding_vertical--regular);
}
}
diff --git a/packages/vkui/src/components/CardScroll/CardScroll.tsx b/packages/vkui/src/components/CardScroll/CardScroll.tsx
index c38a86b5c4..23357b895d 100644
--- a/packages/vkui/src/components/CardScroll/CardScroll.tsx
+++ b/packages/vkui/src/components/CardScroll/CardScroll.tsx
@@ -20,7 +20,10 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef {
@@ -99,7 +102,7 @@ export const CardScroll = ({
styles.host,
'vkuiInternalCardScroll',
size !== false && stylesSize[size],
- !noSpaces && styles.withSpaces,
+ padding && styles.withPaddings,
)}
>