chore: codemods for v6 (#6178)

* chore: codemods for v6

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

.github/workflows/publish_codemods.yml

@@ -0,0 +1,81 @@
+name: 'Publish @vkontakte/vkui-codemods'
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'codemods version (without v)'
+        required: true
+
+run-name: Publish codemods@${{ inputs.version }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/codemods
+    permissions:
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.DEVTOOLS_GITHUB_TOKEN }}
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+          always-auth: true
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: YARN_ENABLE_SCRIPTS=false yarn install --immutable
+
+      - name: Run tests
+        run: yarn run test
+
+      - name: Build package
+        run: yarn run build
+
+      - name: Set Git credentials
+        run: |
+          git config --local user.email "actions@github.com"
+          git config --local user.name "GitHub Action"
+
+      - name: Saving current version to env
+        id: prev_version
+        run: |
+          echo "version=$(yarn node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Bump version
+        run: yarn run g:npm:version ${{ github.event.inputs.version }}
+
+      - name: Saving updated version to env
+        id: updated_version
+        run: |
+          echo "version=$(yarn node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Adding commit and tag with updated version number
+        run: |
+          git add -A
+          git commit -m 'bump(@vkontakte/vkui-codemods): from ${{ steps.prev_version.outputs.version }} to ${{ steps.updated_version.outputs.version }}'
+          git tag @vkontakte/vkui-codemods@${{ steps.updated_version.outputs.version }}
+
+      - name: Pushing changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.DEVTOOLS_GITHUB_TOKEN }}
+          branch: ${{ github.ref }}
+          tags: true
+
+      - name: Generate archive
+        run: yarn pack
+
+      - name: Publishing release
+        run: |
+          npm publish package.tgz
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_PUBLISH_TOKEN }}

.prettierignore

@@ -15,6 +15,7 @@ tmp/
 .github/**/*.md
 target/
 fixture/
+**/__testfixtures__
 storybook-static/
 playwright-report/
 blob-report/

packages/codemods/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["import"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal"],
+        "newlines-between": "never",
+        "alphabetize": {
+          "order": "asc"
+        }
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "allowSeparatedGroups": true,
+        "memberSyntaxSortOrder": ["none", "single", "all", "multiple"]
+      }
+    ],
+    "curly": "error", // Enforce consistent brace style
+    "eqeqeq": "error" // Only type-safe equality operators
+  }
+}

packages/codemods/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+
+.yarn

packages/codemods/.prettierignore

@@ -0,0 +1,2 @@
+**/__testfixtures__
+dist

packages/codemods/.yarnrc

@@ -0,0 +1 @@
+frozen-lockfile true

packages/codemods/README.md

@@ -0,0 +1,63 @@
+# VKUI v6 Codemods
+
+Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов.
+
+> Для начала обновите ваше приложение до новой мажорной версии (**v6**) в соответствии с требованиями вашего пакетного менеджера и среды
+
+> Обратите внимание, минимальная поддерживаемая версия **React** увеличена до `v18.2.0`
+
+> Пока для перевода доступны только `Typescript`-файлы (_.ts/_.tsx)
+
+Перейдите в директорию с исходниками вашего проекта (обычно это `src/`) и запустите следующую команду:
+
+```shell
+npx @vkontakte/vkui-codemods
+```
+
+Инструмент представляет собой консольное приложение, с помощью которого вы можете выбрать необходимые изменения и применить их, доступны следующие команды:
+
+```
+$ npx @vkontakte/vkui-codemods --help
+
+Usage: @vkontakte/vkui-codemod [codemod-name]
+
+Arguments:
+ codemod-name              which codemod should be applied
+
+Options:
+ -V, --version             output the version number
+ -l --list                 list available codemods
+ --all                     apply all available codemods
+ -p --path <paths>         path to files in which to apply the codemods (default: current directory)
+ --dry-run                 no changes are made to files
+ --ignore-config <config>  ignore files if they match patterns sourced from a configuration file (e.g. a .gitignore)
+ --debug                   all logs are shown
+ --alias <alias>           in case you have adapter over original library (default: "@vkontakte/vkui")
+ -h, --help                display help for command
+```
+
+При запуске приложения без аргументов будет предложено выбрать один из имеющихся codemod (их название отражает название компонента, к которому будет применено изменение). Если вам необходимо применить все имеющиеся codemods, запустите команду с опцией `--all`:
+
+```shell
+npx @vkontakte/vkui-codemods --all
+```
+
+Если вы хотите исключить некоторые файлы или директории из обработки, то временно создайте файл (по примеру .gitignore) с перечисленными исключениями:
+
+```shell
+npx @vkontakte/vkui-codemods --all --path "./examples" --ignore-config "./.codemodignore"
+```
+
+```
+// .codemodignore
+MyBeautifulComponentToIgnore.tsx
+directoryToIgnore/
+```
+
+Приведенная выше команда применит все codemods в директории `examples` (находится в корне текущей директории), игонорируя файл `MyBeautifulComponentToIgnore.tsx` и директорию `directoryToIgnore`, указанные в `.codemodignore` (находится в корне текущей директории)
+
+> Обратите внимание, если вы используете собственный адаптер над библиотекой `VKUI` и делаете ре-экспорт существующих компонентов, то можете воспользоваться опцией `--alias` для указания правильного пути.
+
+```shell
+npx @vkontakte/vkui-codemods --all --alias "@myscope/VKUIFake"
+```

packages/codemods/_templates/codemod-test/new/input-testfixture.ejs.t

@@ -0,0 +1,13 @@
+---
+to: src/transforms/__testfixtures__/<%= name %>/basic.input.tsx
+---
+import { } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+
+    </React.Fragment>
+  );
+};

packages/codemods/_templates/codemod-test/new/output-testfixture.ejs.t

@@ -0,0 +1,13 @@
+---
+to: src/transforms/__testfixtures__/<%= name %>/basic.output.tsx
+---
+import { } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+
+    </React.Fragment>
+  );
+};

packages/codemods/_templates/codemod-test/new/test.ejs.t

@@ -0,0 +1,17 @@
+---
+to: src/transforms/__tests__/<%= name %>.ts
+---
+jest.autoMockOff();
+
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+const name = '<%= name %>';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineTest(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`, {
+      parser: 'tsx',
+    }),
+  );
+});

packages/codemods/_templates/generator/help/index.ejs.t

@@ -0,0 +1,5 @@
+---
+message: |
+  hygen {bold generator new} --name [NAME] --action [ACTION]
+  hygen {bold generator with-prompt} --name [NAME] --action [ACTION]
+---

packages/codemods/_templates/generator/new/hello.ejs.t

@@ -0,0 +1,18 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
+---
+---
+to: app/hello.js
+---
+const hello = ```
+Hello!
+This is your first hygen template.
+
+Learn what it can do here:
+
+/~https://github.com/jondot/hygen
+```
+
+console.log(hello)
+
+

packages/codemods/_templates/generator/with-prompt/hello.ejs.t

@@ -0,0 +1,18 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
+---
+---
+to: app/hello.js
+---
+const hello = ```
+Hello!
+This is your first prompt based hygen template.
+
+Learn what it can do here:
+
+/~https://github.com/jondot/hygen
+```
+
+console.log(hello)
+
+

packages/codemods/_templates/generator/with-prompt/prompt.ejs.t

@@ -0,0 +1,14 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/prompt.js
+---
+
+// see types of prompts:
+// /~https://github.com/enquirer/enquirer/tree/master/examples
+//
+module.exports = [
+  {
+    type: 'input',
+    name: 'message',
+    message: "What's your message?"
+  }
+]

packages/codemods/_templates/init/repo/new-repo.ejs.t

@@ -0,0 +1,4 @@
+---
+setup: <%= name %>
+force: true # this is because mostly, people init into existing folders is safe
+---

packages/codemods/jest.config.ts

@@ -0,0 +1,14 @@
+import { Config } from 'jest';
+
+const config: Config = {
+  roots: ['<rootDir>/src/transforms'],
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
+  testEnvironment: 'node',
+  globals: {
+    TRANSFORM_OPTIONS: { alias: '@vkontakte/vkui' },
+  },
+};
+
+export default config;

packages/codemods/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vkontakte/vkui-codemods",
+  "version": "0.0.0",
+  "description": "Codemods for automatic VKUI major version upgrade",
+  "repository": "/~https://github.com/VKCOM/VKUI",
+  "homepage": "https://vkcom.github.io/VKUI/",
+  "license": "MIT",
+  "bin": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "yarn": "^1.21.1",
+    "node": ">16.0.0"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
+    "cross-spawn": "^7.0.3",
+    "jscodeshift": "^0.13.1",
+    "prompts": "^2.4.2",
+    "typescript": "^5.3.2"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.3.100",
+    "@swc/jest": "^0.2.29",
+    "@types/cross-spawn": "^6.0.6",
+    "@types/jest": "^29.5.10",
+    "@types/jscodeshift": "^0.11.11",
+    "@types/node": "^20.10.0",
+    "@types/prompts": "^2.4.2",
+    "jest": "^29.7.0",
+    "ts-node": "^10.9.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "test:ci": "yarn test",
+    "migrate": "jscodeshift"
+  },
+  "publishConfig": {
+    "provenance": true
+  }
+}

packages/codemods/scripts/generate.sh

@@ -0,0 +1,6 @@
+#!/bin/zsh
+
+for param in "$@" 
+do
+    npx hygen codemod-test new "${param}"
+done