support form icon (#1)

* feat: support Icon and Form

* feat: update pkg.name

* build: enable circleci

.circleci/config.yml

@@ -0,0 +1,37 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:latest
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn test

.prettierignore

@@ -10,3 +10,4 @@ public
 _site
 .umi
 .doc
+__testfixtures__

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["${relativeFile}"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+      }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest All",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+      }
+    }
+  ]
+}

README.md

@@ -1 +1,10 @@
 # Ant Design Codemod
+
+A collection of codemod scripts that help upgrade antd v4 using [jscodeshift](https://github.com/facebook/jscodeshift).(Inspired by [react-codemod](https://github.com/reactjs/react-codemod))
+
+## Usage samples
+
+```shell
+npx jscodeshift -t transforms/v3-Icon-to-v4-Icon.js src/**/*.js
+npx jscodeshift -t transforms/v3-Icon-to-v4-Form.js src/**/*.js
+```

bin/antd-codemod.js

@@ -0,0 +1,21 @@
+const minimist = require('minimist');
+const program = require('commander');
+const pkg = require('../package.json');
+
+program.version(`${pkg.name} ${pkg.version}`).usage('<command> [options]');
+
+program
+  .command('form <path>')
+  .description('antd codemod for antd v4 Form migration')
+  .action((path, cmd) => {
+    console.log(name, cmd);
+  });
+
+program
+  .command('icon <path>')
+  .description('antd codemod for antd v4 Icon migration')
+  .action((path, cmd) => {
+    console.log(name, cmd);
+  });
+
+program.parse(process.argv);

package.json

@@ -1,7 +1,10 @@
 {
-  "name": "antd-codemod",
+  "name": "@ant-design/codemod",
   "version": "0.0.1",
   "description": "Codemod for ant design upgrade",
+  "bin": {
+    "antd-codemod": "bin/antd-codemod.js"
+  },
   "keywords": [
     "ant design",
     "codemod",
@@ -18,24 +21,31 @@
   "license": "MIT",
   "scripts": {
     "prepublishOnly": "npm run compile && np --yolo --no-publish && npm run gh-pages",
-    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "lint": "eslint transforms/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "pretty-quick": "pretty-quick"
+    "pretty-quick": "pretty-quick",
+    "test": "jest"
   },
   "dependencies": {
+    "@ant-design/compatible": "^0.0.1-alpha.5",
+    "@ant-design/icons": "^4.0.0-alpha.11",
+    "commander": "^4.0.1",
+    "jscodeshift": "^0.6.4"
   },
   "devDependencies": {
     "@umijs/fabric": "^1.1.10",
     "coveralls": "^3.0.6",
     "cross-env": "^6.0.0",
     "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.1",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^6.6.0",
+    "father": "^2.27.0",
     "husky": "^3.0.9",
+    "jest": "^24.9.0",
     "np": "^5.1.0",
     "prettier": "^1.18.2",
-    "pretty-quick": "^2.0.1"
+    "pretty-quick": "^2.0.1",
+    "typescript": "^3.7.2"
   },
   "husky": {
     "hooks": {

transforms/__testfixtures__/.eslintrc.js

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

transforms/__testfixtures__/v3-Form-to-v4-Form/alias-import.input.js

@@ -0,0 +1,14 @@
+import { Form as AntdForm, Input, Button } from 'antd';
+
+class MyForm extends React.Component {
+  render() {
+    return (
+      <AntdForm>
+        {getFieldDecorator('username')(<Input />)}
+        <Button>Submit</Button>
+      </AntdForm>
+    );
+  }
+}
+
+export default Form.create()(MyForm);

transforms/__testfixtures__/v3-Form-to-v4-Form/alias-import.output.js

@@ -0,0 +1,15 @@
+import { LegacyForm as AntdForm } from '@ant-design/compatible';
+import { Input, Button } from 'antd';
+
+class MyForm extends React.Component {
+  render() {
+    return (
+      <AntdForm>
+        {getFieldDecorator('username')(<Input />)}
+        <Button>Submit</Button>
+      </AntdForm>
+    );
+  }
+}
+
+export default Form.create()(MyForm);

transforms/__testfixtures__/v3-Form-to-v4-Form/basic.input.js

@@ -0,0 +1,14 @@
+import { Form, Input, Button } from 'antd';
+
+class MyForm extends React.Component {
+  render() {
+    return (
+      <Form>
+        {getFieldDecorator('username')(<Input />)}
+        <Button>Submit</Button>
+      </Form>
+    );
+  }
+}
+
+export default Form.create()(MyForm);

transforms/__testfixtures__/v3-Form-to-v4-Form/basic.output.js

@@ -0,0 +1,15 @@
+import { LegacyForm as Form } from '@ant-design/compatible';
+import { Input, Button } from 'antd';
+
+class MyForm extends React.Component {
+  render() {
+    return (
+      <Form>
+        {getFieldDecorator('username')(<Input />)}
+        <Button>Submit</Button>
+      </Form>
+    );
+  }
+}
+
+export default Form.create()(MyForm);

transforms/__testfixtures__/v3-Icon-to-v4-Icon/basic.input.js

@@ -0,0 +1,40 @@
+import { Icon } from 'antd';
+
+const Component = () => {
+  return <Icon type="code" theme="filled" />;
+};
+
+const Component1 = props => {
+  return <Icon type="code" theme={props.fill ? 'filled' : 'outlined'} />;
+};
+
+const Component2 = props => {
+  return <Icon type={props.type} theme="outlined" />;
+};
+
+const Component3 = props => {
+  return <Icon type="code" theme="filled" />;
+};
+
+const Component4 = props => {
+  return <Icon type="smile" theme="twoTone" twoToneColor="#eb2f96" />;
+};
+
+const Component5 = () => {
+  return <Icon type="code" />;
+};
+
+const HeartSvg = () => (
+  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
+  </svg>
+);
+
+const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
+
+const ChildIcon = props => (
+  <Icon viewBox="0 0 24 24">
+    <title>Cool Home</title>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+  </Icon>
+)

transforms/__testfixtures__/v3-Icon-to-v4-Icon/basic.output.js

@@ -0,0 +1,41 @@
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import Icon, { CodeFilled, CodeOutlined, SmileTwoTone } from '@ant-design/icons';
+
+const Component = () => {
+  return <CodeFilled />;
+};
+
+const Component1 = props => {
+  return <LegacyIcon type="code" theme={props.fill ? 'filled' : 'outlined'} />;
+};
+
+const Component2 = props => {
+  return <LegacyIcon type={props.type} theme="outlined" />;
+};
+
+const Component3 = props => {
+  return <CodeFilled />;
+};
+
+const Component4 = props => {
+  return <SmileTwoTone twoToneColor="#eb2f96" />;
+};
+
+const Component5 = () => {
+  return <CodeOutlined />;
+};
+
+const HeartSvg = () => (
+  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
+    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
+  </svg>
+);
+
+const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
+
+const ChildIcon = props => (
+  <Icon viewBox="0 0 24 24">
+    <title>Cool Home</title>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+  </Icon>
+)

transforms/__testfixtures__/v3-Icon-to-v4-Icon/icon-static-methods.input.js

@@ -0,0 +1,8 @@
+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+});
+
+Icon.setTwoToneColor('#eb2f96');
+Icon.getTwoToneColor(); // #eb2f96

transforms/__testfixtures__/v3-Icon-to-v4-Icon/icon-static-methods.output.js

@@ -0,0 +1,8 @@
+import { createFromIconfontCN, getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+});
+
+setTwoToneColor('#eb2f96');
+getTwoToneColor(); // #eb2f96

transforms/__tests__/v3-Form-to-v4-Form.test.js

@@ -0,0 +1,14 @@
+const tests = ['basic', 'alias-import'];
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+describe('icon', () => {
+  tests.forEach(test =>
+    defineTest(
+      __dirname,
+      'v3-Form-to-v4-Form',
+      null,
+      `v3-Form-to-v4-Form/${test}`,
+    ),
+  );
+});

transforms/__tests__/v3-Icon-to-v4-Icon.test.js

@@ -0,0 +1,14 @@
+const tests = ['basic', 'icon-static-methods'];
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+describe('icon', () => {
+  tests.forEach(test =>
+    defineTest(
+      __dirname,
+      'v3-Icon-to-v4-Icon',
+      null,
+      `v3-Icon-to-v4-Icon/${test}`,
+    ),
+  );
+});

transforms/config.js

@@ -0,0 +1,8 @@
+// https://github.com/benjamn/recast/blob/master/lib/options.ts
+const printOptions = {
+  quote: 'single',
+};
+
+module.exports = {
+  printOptions,
+};