feat(CardScroll): rename prop noSpaces to padding (#7788)

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 (
+    <React.Fragment>
+      {/* noSpaces by default -> padding=true */}
+      <CardScroll
+        size="s"
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+
+      {/* noSpaces="false" -> padding="true" */}
+      <CardScroll
+        size="s"
+        noSpaces={false}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+
+      {/* noSpaces="true" -> padding="false" */}
+      <CardScroll
+        size="s"
+        noSpaces={true}
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+
+      {/* noSpaces="true" -> padding="false" */}
+      <CardScroll
+        size="s"
+        noSpaces
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+    </React.Fragment>
+  );
+};

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 (
+    (<React.Fragment>
+      {/* noSpaces by default -> padding=true */}
+      <CardScroll size="s" padding>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+      {/* noSpaces="false" -> padding="true" */}
+      <CardScroll
+        size="s"
+        padding
+      >
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+      {/* noSpaces="true" -> padding="false" */}
+      <CardScroll size="s">
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+      {/* noSpaces="true" -> padding="false" */}
+      <CardScroll size="s">
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: '66%' }} />
+        </Card>
+      </CardScroll>
+    </React.Fragment>)
+  );
+};"
+`;

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}`),
+  );
+});

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<JSXAttribute | JSXSpreadAttribute> | 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();
+}

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],
         },
       ]}
     >

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,15 +29,15 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
-  .withSpaces
+  .withPaddings
   .gap {
   inline-size: 16px;
 }
 
 @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);
   }
 }

packages/vkui/src/components/CardScroll/CardScroll.tsx

@@ -20,7 +20,10 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElemen
    */
   size?: 's' | 'm' | 'l' | false;
   showArrows?: HorizontalScrollProps['showArrows'];
-  noSpaces?: boolean;
+  /**
+   * Добавляет отступы по краям слева и справа
+   */
+  padding?: boolean;
 }
 
 /**
@@ -30,7 +33,7 @@ export const CardScroll = ({
   children,
   size = 's',
   showArrows = true,
-  noSpaces = false,
+  padding = false,
   Component = 'ul',
   ...restProps
 }: CardScrollProps): React.ReactNode => {
@@ -99,7 +102,7 @@ export const CardScroll = ({
         styles.host,
         'vkuiInternalCardScroll',
         size !== false && stylesSize[size],
-        !noSpaces && styles.withSpaces,
+        padding && styles.withPaddings,
       )}
     >
       <HorizontalScroll