chore: add codemod for heading, label, paragraph (#690)

* chore: add heading, label and paragraph codemode

Author: dmitrsavk

.prettierignore

@@ -0,0 +1 @@
+__testfixtures__

bin/build.sh

@@ -14,6 +14,7 @@ echo "start build on $CONCURRENCY parallel process"
 lerna exec --concurrency $CONCURRENCY \
     --ignore @alfalab/core-components-vars \
     --ignore @alfalab/core-components-themes \
+    --ignore @alfalab/core-components-codemod \
     -- $(pwd)/bin/rollup.sh
 
 # собираю css пакеты

docs/12.migrations.stories.mdx

@@ -0,0 +1,6 @@
+import { Description } from '@storybook/addon-docs/blocks';
+import migrationsReadme from '../packages/codemod/README.md';
+
+<Meta title='Гайдлайны|Миграция со старых компонентов' />
+
+<Description>{migrationsReadme}</Description>

jest.codemod.config.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
         '\\.css$': 'identity-obj-proxy',
     },
     testMatch: ['**/*.test.ts?(x)', '!**/*.screenshots.test.ts?(x)'],
+    testPathIgnorePatterns: ['codemod'],
     coverageReporters: ['lcov', 'text', 'text-summary', 'clover'],
     coveragePathIgnorePatterns: ['index.ts'],
 };

lerna.json

@@ -9,7 +9,8 @@
             "ignoreChanges": [
                 "*.stories.*",
                 "**/__snapshots__/**",
-                "*.test.*"
+                "*.test.*",
+                "**/codemod/**"
             ]
 
         }

package.json

@@ -27,6 +27,7 @@
         "lint:js": "eslint ./packages --ext .ts,.tsx,.js,.jsx",
         "test": "jest --watchAll=false --env=jsdom-sixteen",
         "test:screenshots": "jest --config=jest.screenshots.config.js",
+        "test:codemod": "jest --config=jest.codemod.config.js packages/codemod/",
         "format": "prettier --write \"./{packages,bin}/**/*.{ts,tsx,js,jsx,css,json}\"",
         "clean": "rimraf packages/*/{tsconfig.tsbuildinfo,dist} && rimraf {dist,build}",
         "cm": "git-cz",

packages/codemod/.npmignore

@@ -0,0 +1 @@
+node_modules

packages/codemod/README.md

@@ -0,0 +1,35 @@
+## Тулзы для миграции с arui-feather на core-components.
+
+С помощью данного cli-инструмента можно быстро заменить компоненты из arui-feather на компоненты из core-components.
+
+На данный момент, для замены доступны следуюшие компоненты из arui-feather:
+
+-   Heading
+-   Paragraph
+-   Label
+
+### Использование
+
+1. Установить к себе на проект:
+
+```bash
+$ yarn add --dev @alfalab/core-components-codemod
+```
+
+2. Заменить компоненты:
+
+Можно заменить сразу все доступные компоненты:
+
+```bash
+$ ./node_modules/.bin/core-components-codemod src/**/*.tsx
+```
+
+Можно заменять компоненты частично. Например только Label и Paragraph:
+
+```bash
+$ ./node_modules/.bin/core-components-codemod --components=Label,Paragraph src/**/*.tsx
+```
+
+В большинстве случаев можно заменить один компонент на другой и однозначно поменять ему пропсы. Но это не всегда возможно. В таких случаях вы увидите предупреждение, и должны будете руками поменять пропсы у компонента.
+
+Сейчас замена компонентов доступна только для кода, написанного на `typescript`. Если кому-то нужно мигрировать с `js` - дайте знать, докрутим.

packages/codemod/bin/index.js

@@ -0,0 +1,67 @@
+#! /usr/bin/env node
+/* eslint-disable @typescript-eslint/no-var-requires, no-console */
+
+const yargs = require('yargs/yargs');
+const shell = require('shelljs');
+const chalk = require('chalk');
+const path = require('path');
+const kebab = require('lodash.kebabcase');
+const { hideBin } = require('yargs/helpers');
+
+const getTransformerPath = componentName =>
+    path.resolve(__dirname, `../src/${kebab(componentName)}/transform.ts`);
+
+const availableComponentsTransformers = ['Label', 'Heading', 'Paragraph'];
+
+function main() {
+    const { argv } = yargs(hideBin(process.argv));
+
+    if (argv.help) {
+        // TODO: show help
+        return;
+    }
+
+    if (!argv._ || argv._.length === 0) {
+        console.log(
+            chalk.red(
+                'Укажите glob для файлов, которые нужно трансформировать, например src/**/*.tsx',
+            ),
+        );
+
+        return;
+    }
+
+    if (argv.components && typeof argv.components !== 'string') {
+        console.log(
+            chalk.red(
+                'Укажите компоненты, которые хотите заменить, например --components="Label,Heading,Paragraph"',
+            ),
+        );
+
+        return;
+    }
+
+    let components = availableComponentsTransformers;
+
+    if (argv.components) {
+        components = argv.components.split(',');
+    }
+
+    components.forEach(componentName => {
+        if (!availableComponentsTransformers.includes(componentName)) {
+            console.log(chalk.yellow(`Для компонента ${componentName} еще нет трансформера`));
+            return;
+        }
+
+        const transformer = getTransformerPath(componentName);
+
+        try {
+            console.log(chalk.green(`Трансформируем ${componentName}:`));
+            shell.exec(`jscodeshift --parser=tsx --transform=${transformer} ${argv._.join(' ')}`);
+        } catch (error) {
+            console.log(chalk.red(error));
+        }
+    });
+}
+
+main();

packages/codemod/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@alfalab/core-components-codemod",
+    "version": "1.0.0",
+    "description": "Codemod tools for migrating from feather to core-components",
+    "keywords": [],
+    "license": "MIT",
+    "scripts": {
+        "postinstall": "npm i -g jscodeshift @types/jscodeshift lodash > /dev/null 2>&1 || exit 0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "bin": "./bin/index.js",
+    "dependencies": {
+        "chalk": "^4.1.1",
+        "lodash.kebabcase": "^4.1.1",
+        "shelljs": "^0.8.4",
+        "yargs": "^17.0.1"
+    }
+}

packages/codemod/src/heading/__testfixtures__/transform.input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Heading from 'arui-feather/heading';
+
+const someVar = false;
+
+export const Component = () => (
+    <React.Fragment>
+        <Heading size='xs'>Heading xs</Heading>
+        <Heading size='s' hasDefaultMargins={true}>Heading s</Heading>
+        <Heading size='m'>Heading m</Heading>
+        <Heading size='l'>Heading l</Heading>
+        <Heading size='xl'>Heading xl</Heading>
+        <Heading className='custom' data-test-id='test-id' id='id' hasDefaultMargins={false}>Heading</Heading>
+        <Heading size={someVar ? 'xs' : 'l'}>Heading</Heading>
+    </React.Fragment>
+);

packages/codemod/src/heading/__testfixtures__/transform.output.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Typography } from '@alfalab/core-components/typography';
+
+const someVar = false;
+
+export const Component = () => (
+    <React.Fragment>
+        <Typography.TitleResponsive view='xsmall' tag='h5' defaultMargins={true} font='system' color='primary'>Heading xs</Typography.TitleResponsive>
+        <Typography.TitleResponsive view='small' defaultMargins={true} tag='h4' font='system' color='primary'>Heading s</Typography.TitleResponsive>
+        <Typography.TitleResponsive view='medium' tag='h3' defaultMargins={true} font='system' color='primary'>Heading m</Typography.TitleResponsive>
+        <Typography.TitleResponsive view='large' tag='h2' defaultMargins={true} font='system' color='primary'>Heading l</Typography.TitleResponsive>
+        <Typography.TitleResponsive view='xlarge' tag='h1' defaultMargins={true} font='system' color='primary'>Heading xl</Typography.TitleResponsive>
+        <Typography.TitleResponsive className='custom' dataTestId='test-id' id='id' view='xlarge' tag='h1' font='system' color='primary'>Heading</Typography.TitleResponsive>
+        <Typography.TitleResponsive view={someVar ? 'xs' : 'l'} defaultMargins={true} font='system' color='primary'>Heading</Typography.TitleResponsive>
+    </React.Fragment>
+);

packages/codemod/src/heading/__tests__/transform.test.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line prefer-destructuring
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+jest.autoMockOff();
+
+defineTest(__dirname, 'transform', null, 'transform', { parser: 'tsx' });