feat: init heroui codemod package (#124)

* feat: init heroui codemod package * feat: add json migrate * feat: add import provider migration * feat: optimize package name and logic * feat: add codemod argument run * feat: add tailwindcss and npmrc migration * fix: add utf8 * fix: store undefined * fix: update json replace to regex * fix: update log warn * fix: path * fix: build jscodeshift into dist * fix: remove useless pkg * fix: lint * feat: add migrate css variables * fix: ignore md mdx files * feat: update desc * feat: add debug mode * docs: init README * docs: update heroui * feat: only collect js ts tsx jsx json files * fix: skip the json file parse * docs: update pnpm only * fix: update store value * fix: step update * fix: update rawContent
heroui-inc · Jan 9, 2025 · 2ddf426 · 2ddf426
1 parent b746d8f
commit 2ddf426
Show file tree

Hide file tree

Showing 35 changed files with 1,999 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,12 @@
 # output
-/dist
+dist
 
 # ide
-/.idea
+.idea
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing

diff --git a/.prettierrc b/.prettierrc
@@ -5,11 +5,9 @@
   "semi": true,
   "useTabs": false,
   "singleQuote": true,
-  "editorconfig": true,
   "bracketSpacing": false,
   "jsxSingleQuote": false,
   "bracketSameLine": false,
-  "pluginSearchDirs": false,
   "endOfLine": "auto",
   "arrowParens": "always",
   "trailingComma": "none",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "cSpell.words": ["nextui", "tailwindcss"]
+  "cSpell.words": ["codemod", "codemods", "heroui", "nextui", "tailwindcss"]
 }
diff --git a/packages/codemod/README.md b/packages/codemod/README.md
@@ -0,0 +1,224 @@
+<p align="center">
+  <a href="https://nextui.org">
+      <img width="20%" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/isotipo.png" alt="nextui" />
+      <h1 align="center">@heroui/codemod</h1>
+  </a>
+</p>
+</br>
+<p align="center">
+  <a href="https://github.com/nextui-org/nextui-cli/blob/main/license">
+    <img src="https://img.shields.io/npm/l/@nextui-org/react?style=flat" alt="License">
+  </a>
+  <a href="https://www.npmjs.com/package/nextui-cli">
+    <img src="https://img.shields.io/npm/dm/nextui-cli.svg?style=flat-round" alt="npm downloads">
+  </a>
+</p>
+
+The CLI provides a comprehensive suite of tools to migrate your codebase from NextUI to heroui.
+
+## Quick Start
+
+> **Note**: The heroui CLI requires [Node.js](https://nodejs.org/en) _18.17.x_ or later
+
+You can start using @heroui/codemod in one of the following ways:
+
+### Npx
+
+```bash
+npx @heroui/codemod@latest
+```
+
+### Global Installation
+
+```bash
+npm install -g @heroui/codemod
+```
+
+## Usage
+
+```bash
+Usage: @heroui/codemod [command]
+
+A CLI tool for migrating your codebase to heroui
+
+Arguments:
+  codemod                Specify which codemod to run
+                         Codemods: import-heroui, package-json-package-name, heroui-provider, tailwindcss-heroui, css-variables, npmrc
+
+Options:
+  -v, --version          Output the current version
+  -d, --debug            Enable debug mode
+  -h, --help             Display help for command
+
+Commands:
+  migrate [projectPath]  Migrate your codebase to use heroui
+```
+
+## Codemod Arguments
+
+### import-heroui
+
+Updates all import statements from `@nextui-org/*` packages to their `@heroui/*` equivalents.
+
+```bash
+heroui-codemod import-heroui
+```
+
+Example:
+
+1. `import { Button } from "@nextui-org/button"` to `import { Button } from "@heroui/button"`
+
+### package-json-package-name
+
+Updates all package names in `package.json` from `@nextui-org/*` to `@heroui/*`.
+
+```bash
+heroui-codemod package-json-package-name
+```
+
+Example:
+
+1. `@nextui-org/button: x.xx.xxx` to `@heroui/button: x.xx.xxx`
+
+### heroui-provider
+
+Migrate `NextUIProvider` to `HeroProvider`.
+
+```bash
+heroui-codemod heroui-provider
+```
+
+Example:
+
+1. `import { NextUIProvider } from "@nextui-org/react"` to `import { HeroProvider } from "@heroui/react"`
+
+2. `<NextUIProvider>...</NextUIProvider>` to `<HeroProvider>...</HeroProvider>`
+
+### tailwindcss-heroui
+
+Migrate all the `tailwind.config.(j|t)s` file to use the `@heroui` package.
+
+```bash
+heroui-codemod tailwindcss-heroui
+```
+
+Example:
+
+1. `const {nextui} = require('@nextui-org/theme')` to `const {heroui} = require('@heroui/theme')`
+
+2. `plugins: [nextui({...})]` to `plugins: [heroui({...})]`
+
+3. `content: ['./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}']` to `content: ['./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}']`
+
+4. `var(--nextui-primary-500)` to `var(--heroui-primary-500)`
+
+### css-variables
+
+Migrate all the css variables in the file starting with `--nextui-` to `--heroui-`.
+
+```bash
+heroui-codemod css-variables
+```
+
+Example:
+
+1. `className="text-[var(--nextui-primary-500)]"` to `className="text-[var(--heroui-primary-500)]"`
+
+### npmrc (Pnpm only)
+
+Migrate the `.npmrc` file to use the `@heroui` package.
+
+```bash
+heroui-codemod npmrc
+```
+
+Example:
+
+1. `public-hoist-pattern[]=*@nextui-org/theme*` to `public-hoist-pattern[]=*@heroui/theme*`
+
+## Migrate Command
+
+Migrate your entire codebase from NextUI to heroui. You can choose which codemods to run during the migration process.
+
+```bash
+heroui-codemod migrate [projectPath]
+```
+
+Example:
+
+```bash
+heroui-codemod migrate ./my-nextui-app
+```
+
+Output:
+
+```bash
+heroui Codemod v0.0.1
+
+┌   Starting to migrate nextui to heroUI
+│
+◇  1. Migrating "package.json"
+│
+◇  Do you want to migrate package.json?
+│  Yes
+│
+◇  Migrated package.json
+│
+◇  2. Migrating import "nextui" to "heroUI"
+│
+◇  Do you want to migrate import nextui to heroui?
+│  Yes
+│
+◇  Migrated import nextui to heroui
+│
+◇  3. Migrating "NextUIProvider" to "HeroUIProvider"
+│
+◇  Do you want to migrate NextUIProvider to HeroUIProvider?
+│  Yes
+│
+◇  Migrated NextUIProvider to HeroUIProvider
+│
+◇  4. Migrating "tailwindcss"
+│
+◇  Do you want to migrate tailwindcss?
+│  Yes
+│
+◇  Migrated tailwindcss
+│
+◇  5. Migrating "css variables"
+│
+◇  Do you want to migrate css variables?
+│  Yes
+│
+◇  Migrated css variables
+│
+◇  6. Migrating "npmrc" (Pnpm only)
+│
+◇  Do you want to migrate npmrc (Pnpm only) ?
+│  Yes
+│
+◇  Migrated npmrc
+│
+└  ✅ Migration completed!
+```
+
+### Community
+
+We're excited to see the community adopt NextUI CLI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+- [Discord](https://discord.gg/9b6yyZKmH4)
+- [Twitter](https://twitter.com/getnextui)
+- [GitHub Discussions](https://github.com/nextui-org/nextui-cli/discussions)
+
+## Contributing
+
+Contributions are always welcome!
+
+See [CONTRIBUTING.md](https://github.com/nextui-org/nextui-cli/blob/main/CONTRIBUTING.md) for ways to get started.
+
+Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/nextui-org/nextui-cli/blob/main/CODE_OF_CONDUCT.md).
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/packages/codemod/package.json b/packages/codemod/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@heroui/codemod",
+  "private": false,
+  "type": "module",
+  "license": "MIT",
+  "version": "0.0.1",
+  "homepage": "https://github.com/nextui-org/nextui-cli#readme",
+  "description": "A CLI tool that modifies your codebase to use the heroui",
+  "keywords": [
+    "UI",
+    "CLI",
+    "Tool",
+    "NextUI",
+    "HeroUI",
+    "Integration",
+    "Modify Codebase"
+  ],
+  "author": {
+    "name": "NextUI",
+    "email": "support@nextui.org",
+    "url": "https://github.com/nextui-org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nextui-org/nextui-cli.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui-cli/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "bin": {
+    "@heroui-codemod": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "tsup --watch",
+    "link:cli": "pnpm link --global",
+    "link:remove": "pnpm uninstall --global @heroui/codemod",
+    "build": "tsup",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --max-warnings=0 --fix",
+    "check:prettier": "prettier --check .",
+    "check:types": "tsc --noEmit",
+    "changelog": "npx conventional-changelog -p angular -i CHANGELOG.md -s --commit-path packages/codemod",
+    "release": "bumpp --execute='pnpm run changelog' --all --tag='@heroui/codemodv%s'",
+    "prepublishOnly": "pnpm run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "0.7.0",
+    "async-retry": "1.3.3",
+    "chalk": "5.3.0",
+    "cli-progress": "3.12.0",
+    "commander": "11.0.0",
+    "compare-versions": "6.1.1",
+    "fast-glob": "3.3.2",
+    "gradient-string": "2.0.2",
+    "jscodeshift": "17.1.1",
+    "ora": "8.0.1",
+    "pathe": "1.1.2"
+  },
+  "engines": {
+    "pnpm": ">=9.x"
+  },
+  "packageManager": "pnpm@9.6.0",
+  "devDependencies": {
+    "@types/jscodeshift": "0.12.0"
+  }
+}
diff --git a/packages/codemod/src/actions/codemod-action.ts b/packages/codemod/src/actions/codemod-action.ts
@@ -0,0 +1,30 @@
+import {Logger} from '@helpers/logger';
+
+import {type Codemods, codemods} from '../types';
+
+import {migrateAction} from './migrate-action';
+
+function printUsage() {
+  Logger.grey('Usage: ');
+  Logger.log(`nextui [codemod]`);
+  Logger.log(`nextui migrate [projectPath]`);
+  Logger.newLine();
+  Logger.grey('Codemods:');
+  Logger.log(`- ${codemods.join('\n- ')}`);
+}
+
+export async function codemodAction(codemod: Codemods) {
+  if (!codemod) {
+    printUsage();
+
+    process.exit(0);
+  } else if (!codemods.includes(codemod)) {
+    Logger.error(`Codemod "${codemod}" is invalid`);
+    Logger.newLine();
+
+    printUsage();
+    process.exit(0);
+  }
+
+  migrateAction(['.'], {codemod});
+}