refactor(project): sort prop types in alphabetical order (#6620)

* feat(eslint-config-carbon): enable sort rule

* feat(project): add codemods package

* refactor(project): sort prop types in alphabetical order

* chore(project): sync offline mirror

* chore(project): update lint command

* chore(project): remove redundant lockfile

* chore(colors): remove scss from source control

* refactor(codemods): update from switch statement

Co-authored-by: TJ Egan <[email protected]>

codemods/.npmignore

@@ -0,0 +1,4 @@
+**/__mocks__/**
+**/__tests__/**
+**/examples/**
+**/tasks/**

codemods/ARCHITECTURE.md

@@ -0,0 +1,43 @@
+# @carbon/codemods
+
+> An internal package for codemods for the Carbon Design System
+
+## Usage
+
+You can run a specific transform for a path in the project by running:
+
+```bash
+yarn jscodeshift -t codemods/transform/<name>.js 'path/to/file'
+```
+
+If you want to preview changes that are being made, you should enable the `dry`
+and `print` options:
+
+```bash
+yarn jscodeshift -d -p -t codemods/transform/<name>.js 'path/to/file'
+```
+
+## Writing transforms
+
+Transforms are written in the `transforms` directory with their tests and
+fixtures written in the `__tests__` and `__testfixtures__` directories,
+accordingly.
+
+As an example, to add a transform called `sort-prop-types` oone would create the
+following files:
+
+```
+- codemods
+  - transforms
+    - __testfixtures__
+      - sort-prop-types.input.js
+      - sort-prop-types.output.js
+    - __tests__
+      - sort-prop-types-test.js
+    - sort-prop-types.js
+```
+
+In this structure, the test file will determine which test fixtures get run.
+Test fixtures are written with a `*.input.js` and `*.output.js` convention.
+Files that end with `*.input.js` are given to your transform and the test runner
+will assert that the output matches what is available in `*.output.js`.

codemods/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@carbon/codemods",
+  "private": true,
+  "description": "Codemods for the Carbon monorepo",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "repository": "https://github.com/carbon-design-system/carbon/tree/master/codemods",
+  "bugs": "https://github.com/carbon-design-system/carbon/issues",
+  "keywords": [
+    "ibm",
+    "carbon",
+    "carbon-design-system",
+    "components",
+    "react"
+  ],
+  "dependencies": {
+    "jscodeshift": "^0.10.0"
+  }
+}

codemods/transforms/__testfixtures__/sort-prop-types.input.js

@@ -0,0 +1,7 @@
+function MyComponent() {}
+
+MyComponent.propTypes = {
+  a: PropTypes.string,
+  c: PropTypes.string,
+  b: PropTypes.string,
+};

codemods/transforms/__testfixtures__/sort-prop-types.output.js

@@ -0,0 +1,7 @@
+function MyComponent() {}
+
+MyComponent.propTypes = {
+  a: PropTypes.string,
+  b: PropTypes.string,
+  c: PropTypes.string,
+};

codemods/transforms/__testfixtures__/sort-prop-types2.input.js

@@ -0,0 +1,7 @@
+class A extends React.Component {
+  static propTypes = {
+    a: PropTypes.string,
+    c: PropTypes.string,
+    b: PropTypes.string,
+  };
+}

codemods/transforms/__testfixtures__/sort-prop-types2.output.js

@@ -0,0 +1,7 @@
+class A extends React.Component {
+  static propTypes = {
+    a: PropTypes.string,
+    b: PropTypes.string,
+    c: PropTypes.string,
+  };
+}

codemods/transforms/__tests__/sort-prop-types-test.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'sort-prop-types');
+defineTest(__dirname, 'sort-prop-types', null, 'sort-prop-types2');

codemods/transforms/sort-prop-types.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+function transform(fileInfo, api, options) {
+  const printOptions = options.printOptions || defaultOptions;
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  root
+    .find(j.AssignmentExpression, {
+      left: {
+        type: 'MemberExpression',
+        property: {
+          name: 'propTypes',
+        },
+      },
+    })
+    .forEach((path) => {
+      path.node.right.properties.sort((a, b) => {
+        if (a.type === 'Property' && b.type === 'Property') {
+          if (getPropName(a) > getPropName(b)) {
+            return 1;
+          }
+          return -1;
+        }
+
+        if (a.type === 'SpreadElement' && b.type === 'SpreadElement') {
+          if (getPropName(a) > getPropName(b)) {
+            return 1;
+          }
+          return -1;
+        }
+
+        if (a.type === 'SpreadElement') {
+          return -1;
+        }
+
+        return 1;
+      });
+    });
+
+  root
+    .find(j.ClassProperty, {
+      key: {
+        name: 'propTypes',
+      },
+    })
+    .forEach((path) => {
+      path.node.value.properties.sort((a, b) => {
+        if (getPropName(a) > getPropName(b)) {
+          return 1;
+        }
+        return -1;
+      });
+    });
+
+  function getPropName(node) {
+    if (node.type === 'SpreadElement') {
+      return node.argument.name;
+    }
+
+    if (node.type === 'Property') {
+      if (node.key.type === 'Identifier') {
+        return node.key.name;
+      }
+      if (node.key.type === 'Literal') {
+        return node.key.value;
+      }
+    }
+
+    throw new Error(`Unknown node of type: ${node.type}`);
+  }
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;

config/eslint-config-carbon/plugins/react.js

@@ -32,6 +32,7 @@ module.exports = {
     'react/no-find-dom-node': 1,
     'react/jsx-no-useless-fragment': 2,
     'react/no-typos': 2,
+    'react/sort-prop-types': 2,
 
     // react-hooks
     'react-hooks/rules-of-hooks': 2,

lerna.json

@@ -6,6 +6,7 @@
   "useWorkspaces": true,
   "ignoreChanges": [
     "actions/**",
+    "codemods/**",
     "**/__fixtures__/**",
     "**/__tests__/**",
     "**/docs/**",

package.json

@@ -9,9 +9,10 @@
   },
   "workspaces": {
     "packages": [
-      "packages/*",
       "actions/*",
-      "config/*"
+      "codemods",
+      "config/*",
+      "packages/*"
     ],
     "nohoist": []
   },
@@ -22,7 +23,7 @@
     "doctoc": "doctoc --title '## Table of Contents'",
     "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
-    "lint": "eslint packages actions",
+    "lint": "eslint actions config codemods packages",
     "lint:docs": "alex 'docs/**/*.md' -q",
     "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
     "sync": "carbon-cli sync",

packages/colors/.gitignore

@@ -0,0 +1 @@
+scss