@oceanbase/codemod 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2023-present OceanBase, https://www.oceanbase.com
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# OceanBase Codemod
+
+A collection of codemod scripts that help migrate to OceanBase Design using [jscodeshift](https://github.com/facebook/jscodeshift) and [postcss](https://github.com/postcss/postcss).(Inspired by [@oceanbase/codemod](https://github.com/ant-design/codemod-v5))
+
+[![NPM version](https://img.shields.io/npm/v/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![NPM downloads](http://img.shields.io/npm/dm/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![Github Action](https://github.com/oceanbase/design/actions/workflows/ci.yml/badge.svg)](https://github.com/oceanbase/design/actions/workflows/ci.yml)
+
+## Usage
+
+Before run codemod scripts, you'd better make sure to commit your local git changes firstly.
+
+```shell
+# Run directly through npx
+npx -p @oceanbase/codemod codemod src
+```
+
+## Codemod scripts introduction
+
+### `antd-to-oceanbase-design`
+
+import components and typs from `antd` and `@alipay/bigfish/antd` to `@oceanbase/design`.
+
+```diff
+  import React from 'react';
+- import { Button, Card } from 'antd';
+- import type { ButtonProps, CardProps } from 'antd';
+- import type { ModalProps } from 'antd/es/modal';
+- import type { Route } from 'antd/es/breadcrumb/Breadcrumb';
+- import type { TooltipProps } from 'antd/lib/tooltip';
+- import type { FilterDropdownProps } from 'antd/lib/table/interface';
++ import { Button, Card } from '@oceanbase/design';
++ import type { ButtonProps, CardProps } from '@oceanbase/design';
++ import type { ModalProps } from '@oceanbase/design/es/modal';
++ import type { Route } from '@oceanbase/design/es/breadcrumb/Breadcrumb';
++ import type { TooltipProps } from '@oceanbase/design/lib/tooltip';
++ import type { FilterDropdownProps } from '@oceanbase/design/lib/table/interface';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```
+
+### `obui-to-oceanbase-design-and-ui`
+
+import components and typs from `antd` to `@oceanbase/design` and `@oceanbase/ui`.
+
+```diff
+  import React from 'react';
+- import { Alert, Button, BasicLayout, Login, PageContainer } from '@alipay/ob-ui';
+- import type { BasicLayoutProps } from '@alipay/ob-ui/es/BasicLayout';
+- import type { LoginProps } from '@alipay/ob-ui/es/Login';
+- import type { PageContainerProps } from '@alipay/ob-ui/es/PageContainer';
++ import { Alert, Button } from '@oceanbase/design';
++ import { BasicLayout, Login, PageContainer } from '@oceanbase/ui';
++ import type { BasicLayoutProps } from '@oceanbase/ui/es/BasicLayout';
++ import type { LoginProps } from '@oceanbase/ui/es/Login';
++ import type { PageContainerProps } from '@oceanbase/ui/es/PageContainer';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```
+
+### `techui-to-oceanbase-ui`
+
+import `PageContainer` from `@alipay/tech-ui` to `@ant-design/pro-components` and `@oceanbase/ui`.
+
+```diff
+  import React from 'react';
+- import { PageContainer, ProTable, WelcomeCard } from '@alipay/tech-ui';
+- import type { PageContainerProps, ProTableProps, WelcomeCardProps } from '@alipay/tech-ui';
++ import { ProTable, WelcomeCard } from '@alipay/tech-ui';
++ import { PageContainer } from '@oceanbase/ui';
++ import type { ProTableProps, WelcomeCardProps } from '@alipay/tech-ui';
++ import type { PageContainerProps } from '@oceanbase/ui';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```
+
+### `antd-charts-to-oceanbase-charts`
+
+import components and typs from `@ant-design/charts` to `@oceanbase/charts`.
+
+```diff
+  import React from 'react';
+- import { Bar, Line } from '@ant-design/charts';
+- import type { BarConfig, LineConfig } from '@ant-design/charts';
++ import { Bar, Line } from '@oceanbase/charts';
++ import type { BarConfig, LineConfig } from '@oceanbase/charts';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```
+
+### `obutil-to-oceanbase-util`
+
+import components and typs from `@alipay/ob-util` to `@oceanbase/util`.
+
+```diff
+  import React from 'react';
+- import { isNullValue, sortByNumber } from '@alipay/ob-util';
++ import { isNullValue, sortByNumber } from '@oceanbase/util';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@oceanbase/codemod",
+  "version": "0.2.0",
+  "description": "Codemod for OceanBase Design upgrade",
+  "keywords": [
+    "oceanbase",
+    "oceanbase design",
+    "codemod"
+  ],
+  "homepage": "https://github.com/oceanbase/oceanbase-design/packages/codemod",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:oceanbase/design.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "bin": {
+    "codemod": "./bin/codemod.js"
+  },
+  "scripts": {
+    "build": "father build"
+  },
+  "dependencies": {
+    "chalk": "^3.0.0",
+    "find-up": "^4.1.0",
+    "glob": "^8.0.3",
+    "is-git-clean": "^1.1.0",
+    "jscodeshift": "^0.14.0",
+    "lodash": "^4.17.15",
+    "read-pkg-up": "^9.1.0",
+    "semver": "^7.1.3",
+    "update-check": "^1.5.3",
+    "yargs-parser": "^21.1.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.3",
+    "@types/jscodeshift": "^0.11.5",
+    "enzyme": "^3.0.0",
+    "enzyme-to-json": "^3.4.0"
+  },
+  "gitHead": "6f801e95ba5ddc345f6d2c462bcf2af1abc74c84"
+}

package/src/bin/cli.js

@@ -0,0 +1,271 @@
+/* eslint no-console: 0 */
+
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+
+const _ = require('lodash');
+const chalk = require('chalk');
+const isGitClean = require('is-git-clean');
+const updateCheck = require('update-check');
+const findUp = require('find-up');
+const semver = require('semver');
+const { run: jscodeshift } = require('jscodeshift/src/Runner');
+
+const pkg = require('../package.json');
+const pkgUpgradeList = require('./upgrade-list');
+const { getDependencies } = require('../transforms/utils/marker');
+
+// jscodeshift codemod scripts dir
+const transformersDir = path.join(__dirname, '../transforms');
+
+// jscodeshift bin#--ignore-config
+const ignoreConfig = path.join(__dirname, './codemod.ignore');
+
+const transformers = [
+  'antd-to-oceanbase-design',
+  'obui-to-oceanbase-design',
+  'techui-to-oceanbase-ui',
+];
+
+const dependencyProperties = [
+  'dependencies',
+  'devDependencies',
+  'clientDependencies',
+  'isomorphicDependencies',
+  'buildDependencies',
+];
+
+async function ensureGitClean() {
+  let clean = false;
+  try {
+    clean = await isGitClean();
+  } catch (err) {
+    if (err && err.stderr && err.stderr.toLowerCase().includes('not a git repository')) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    console.log(chalk.yellow('Sorry that there are still some git changes'));
+    console.log('\n you must commit or stash them firstly');
+    process.exit(1);
+  }
+}
+
+async function checkUpdates() {
+  let update;
+  try {
+    update = await updateCheck(pkg);
+  } catch (err) {
+    console.log(chalk.yellow(`Failed to check for updates: ${err}`));
+  }
+
+  if (update) {
+    console.log(chalk.blue(`Latest version is ${update.latest}. Please update firstly`));
+    process.exit(1);
+  }
+}
+
+function getMaxWorkers(options = {}) {
+  // limit usage for cpus
+  return options.cpus || Math.max(2, Math.ceil(os.cpus().length / 3));
+}
+
+function getRunnerArgs(transformerPath, parser = 'tsx', options = {}) {
+  const args = {
+    verbose: 2,
+    // limit usage for cpus
+    cpus: getMaxWorkers(options),
+    parser,
+    extensions: ['tsx', 'ts', 'jsx', 'js'].join(','),
+    transform: transformerPath,
+    ignorePattern: '**/node_modules',
+    ignoreConfig,
+  };
+
+  return args;
+}
+
+async function run(filePath, args = {}) {
+  for (const transformer of transformers) {
+    await transform(transformer, 'tsx', filePath, args);
+  }
+}
+
+async function transform(transformer, parser, filePath, options) {
+  console.log(chalk.bgGreen.bold('Transform'), transformer);
+  const transformerPath = path.join(transformersDir, `${transformer}.js`);
+
+  const args = getRunnerArgs(transformerPath, parser, {
+    ...options,
+  });
+
+  try {
+    if (process.env.NODE_ENV === 'local') {
+      console.log(`Running jscodeshift with: ${JSON.stringify(args)}`);
+    }
+
+    // js part
+    await jscodeshift(transformerPath, [filePath], args);
+  } catch (err) {
+    console.error(err);
+    if (process.env.NODE_ENV === 'local') {
+      const errorLogFile = path.join(__dirname, './error.log');
+      fs.appendFileSync(errorLogFile, err);
+      fs.appendFileSync(errorLogFile, '\n');
+    }
+  }
+}
+
+async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
+  const result = [];
+  const cwd = path.join(process.cwd(), targetDir);
+  const { readPackageUp } = await import('read-pkg-up');
+  const closetPkgJson = await readPackageUp({ cwd });
+
+  let pkgJsonPath;
+  if (!closetPkgJson) {
+    pkgJsonPath = "we didn't find your package.json";
+    // unknown dependency property
+    result.push(['install', '@oceanbase/design', pkgUpgradeList['@oceanbase/design']]);
+    result.push(['install', '@oceanbase/ui', pkgUpgradeList['@oceanbase/ui']]);
+    if (needOBCharts) {
+      result.push(['install', '@oceanbase/charts', pkgUpgradeList['@oceanbase/charts'].version]);
+    }
+
+    if (needObUtil) {
+      result.push(['install', '@oceanbase/util', pkgUpgradeList['@oceanbase/util'].version]);
+    }
+  } else {
+    const { packageJson } = closetPkgJson;
+    pkgJsonPath = closetPkgJson.path;
+
+    // dependencies must be installed or upgraded with correct version
+    const mustInstallOrUpgradeDeps = ['@oceanbase/design', '@oceanbase/ui'];
+    if (needOBCharts) {
+      mustInstallOrUpgradeDeps.push('@oceanbase/charts');
+    }
+    if (needObUtil) {
+      mustInstallOrUpgradeDeps.push('@oceanbase/util');
+    }
+
+    // handle mustInstallOrUpgradeDeps
+    mustInstallOrUpgradeDeps.forEach(depName => {
+      let hasDependency = false;
+      const expectVersion = pkgUpgradeList[depName].version;
+      // const upgradePkgDescription = pkgUpgradeList[depName].description;
+      dependencyProperties.forEach(property => {
+        const versionRange = _.get(packageJson, `${property}.${depName}`);
+        // mark dependency installment state
+        hasDependency = hasDependency || !!versionRange;
+        // no dependency or improper version dependency
+        if (versionRange && !semver.satisfies(semver.minVersion(versionRange), expectVersion)) {
+          result.push(['update', depName, expectVersion, property]);
+        }
+      });
+      if (!hasDependency) {
+        // unknown dependency property
+        result.push(['install', depName, pkgUpgradeList[depName].version]);
+      }
+    });
+
+    // dependencies must be upgraded to correct version
+    const mustUpgradeDeps = _.without(Object.keys(pkgUpgradeList), ...mustInstallOrUpgradeDeps);
+    mustUpgradeDeps.forEach(depName => {
+      dependencyProperties.forEach(property => {
+        const expectVersion = pkgUpgradeList[depName].version;
+        const versionRange = _.get(packageJson, `${property}.${depName}`);
+        /**
+         * we may have dependencies in `package.json`
+         * make sure that they can `work well` with `oceanbase design system`
+         * so we check dependency's version here
+         */
+        if (versionRange && !semver.satisfies(semver.minVersion(versionRange), expectVersion)) {
+          result.push(['update', depName, expectVersion, property]);
+        }
+      });
+    });
+  }
+
+  if (!result.length) {
+    console.log(chalk.green('Checking passed'));
+    return;
+  }
+
+  console.log(
+    chalk.yellow(
+      "It's recommended to install or upgrade these dependencies to ensure working well with oceanbase design system\n"
+    )
+  );
+  console.log(`> package.json file:  ${pkgJsonPath} \n`);
+  const dependencies = result.map(([operateType, depName, expectVersion, dependencyProperty]) =>
+    [
+      _.capitalize(operateType),
+      `${depName}${expectVersion}`,
+      dependencyProperty ? `in ${dependencyProperty}` : '',
+    ].join(' ')
+  );
+
+  console.log(dependencies.map(n => `* ${n}`).join('\n'));
+}
+
+/**
+ * options
+ * --force   // force skip git checking (dangerously)
+ * --cpus=1  // specify cpus cores to use
+ */
+
+async function bootstrap() {
+  const dir = process.argv[2];
+  // eslint-disable-next-line global-require
+  const args = require('yargs-parser')(process.argv.slice(3));
+  if (process.env.NODE_ENV !== 'local') {
+    // check for updates
+    await checkUpdates();
+    // check for git status
+    if (!args.force) {
+      await ensureGitClean();
+    } else {
+      console.log(
+        Array(3)
+          .fill(1)
+          .map(() =>
+            chalk.yellow('WARNING: You are trying to skip git status checking, please be careful')
+          )
+          .join('\n')
+      );
+    }
+  }
+
+  // check for `path`
+  if (!dir || !fs.existsSync(dir)) {
+    console.log(chalk.yellow('Invalid dir:', dir, ', please pass a valid dir'));
+    process.exit(1);
+  }
+
+  await run(dir, args);
+
+  try {
+    console.log('----------- dependencies alert -----------\n');
+    const depsList = await getDependencies();
+    await upgradeDetect(
+      dir,
+      depsList.includes('@ant-design/charts'),
+      depsList.includes('@alipay/ob-util')
+    );
+  } catch (err) {
+    console.log('skip summary due to', err);
+  } finally {
+    console.log(`\n----------- Thanks for using @oceanbase/codemod ${pkg.version} -----------`);
+  }
+}
+
+module.exports = {
+  bootstrap,
+  ensureGitClean,
+  transform,
+  run,
+  getRunnerArgs,
+  checkUpdates,
+};

package/src/bin/codemod.ignore

@@ -0,0 +1,9 @@
+node_modules
+*.css
+*.json
+*.less
+*.sass
+*.scss
+.umi
+.umi-production
+.umi-test

package/src/bin/codemod.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('./cli').bootstrap();

package/src/bin/upgrade-list.json

@@ -0,0 +1,23 @@
+{
+  "@oceanbase/design": {
+    "version": "^0.2.0"
+  },
+  "@oceanbase/icons": {
+    "version": "^0.2.0"
+  },
+  "@oceanbase/ui": {
+    "version": "^0.2.0"
+  },
+  "@oceanbase/charts": {
+    "version": "^0.2.0"
+  },
+  "@oceanbase/util": {
+    "version": "^0.2.0"
+  },
+  "react": {
+    "version": "^16.9.0"
+  },
+  "react-dom": {
+    "version": "^16.9.0"
+  }
+}

package/src/transforms/__testfixtures__/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'no-undef': 0,
+    'no-unused-vars': 0,
+    'no-redeclare': 0,
+  },
+};

package/src/transforms/__testfixtures__/antd-charts-to-oceanbase-charts/antd-charts.input.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Bar, Line } from '@ant-design/charts';
+import type { BarConfig, LineConfig } from '@ant-design/charts';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/antd-charts-to-oceanbase-charts/antd-charts.output.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Bar, Line } from '@oceanbase/charts';
+import type { BarConfig, LineConfig } from '@oceanbase/charts';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/antd-to-oceanbase-design/antd.input.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  // Genaral
+  Button,
+  FloatButton,
+  Typography,
+  // Layout
+  Divider,
+  Grid,
+  Layout,
+  Space,
+  // Navigation
+  Anchor,
+  Breadcrumb,
+  Dropdown,
+  Menu,
+  Pagination,
+  Steps,
+  // Data Entry
+  AutoComplete,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Mentions,
+  Radio,
+  Rate,
+  Select,
+  Slider,
+  Switch,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  // Data Display
+  Avatar,
+  Badge,
+  Calendar,
+  Card,
+  Carousel,
+  Callapse,
+  Descripions,
+  Empty,
+  Image,
+  List,
+  Popover,
+  QRCode,
+  Segmented,
+  Statistic,
+  Table,
+  Tabs,
+  Tag,
+  Timeline,
+  Tooltip,
+  Tour,
+  Tree,
+  // Feedback
+  Alert,
+  Drawer,
+  message,
+  Modal,
+  notification,
+  Popconfirm,
+  Progress,
+  Result,
+  Skeleton,
+  Spin,
+  Watermark,
+  // Other
+  Affix,
+  App,
+  ConfigProvider,
+  // Theme
+  theme,
+} from 'antd';
+// type
+import type { ButtonProps, CardProps } from 'antd';
+// es
+import type { ModalProps } from 'antd/es/modal';
+import type { Route } from 'antd/es/breadcrumb/Breadcrumb';
+// lib
+import type { TooltipProps } from 'antd/lib/tooltip';
+import type { FilterDropdownProps } from 'antd/lib/table/interface';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;