Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(upgrade): update-carbon-icons-react-import-to-carbon-react codemod #14217

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions docs/migration/v11.md
Original file line number Diff line number Diff line change
Expand Up @@ -661,14 +661,14 @@ instructions in [`@carbon/upgrade`](../../packages/upgrade/README.md).
#### Rewrite imports from `carbon-components-react` to `@carbon/react`.

```bash
npx @carbon/upgrade migrate update-carbon-components-react-import-to-scoped
npx @carbon/upgrade migrate update-carbon-components-react-import-to-scoped --write
```

#### Automates size prop changes.

```bash
npx @carbon/upgrade migrate small-to-size-props
npx @carbon/upgrade migrate size-prop-updates
npx @carbon/upgrade migrate small-to-size-props --write
npx @carbon/upgrade migrate size-prop-updates --write
```

For a full overview of changes to components, checkout our components section
Expand Down Expand Up @@ -1361,8 +1361,8 @@ The `@carbon/icons-react` package has been updated to minimize the number of
exports from the package to help reduce build and compile times. It also has
been updated to remove icons that were deprecated in v10.

_If you are using @carbon/react, you can now import icons directly from
@carbon/react/icons._
_If you are using `@carbon/react`, you can now import icons directly from
`@carbon/react/icons`._

### Changes to size

Expand Down Expand Up @@ -1444,15 +1444,28 @@ their replacement, if available, in v11.
### Migration

Most use-cases of the icons from the `@carbon/icons-react` package will be
covered by an automated codemod. To run this codemod, follow the instructions in
covered by automated codemods. To run these codemods, follow the instructions in
[`@carbon/upgrade`](../../packages/upgrade/README.md).

Update imports and size usage for @carbon/icons-react
#### Update imports and size usage for @carbon/icons-react

```bash
npx @carbon/upgrade migrate icons-react-size-prop
npx @carbon/upgrade migrate icons-react-size-prop --write
```

### Rewrite imports from `@carbon/icons-react` to `@carbon/react/icons`.

If you are using `@carbon/react`, you can now import icons directly from
`@carbon/react/icons`.

```bash
npx @carbon/upgrade migrate update-carbon-icons-react-import-to-carbon-react --write
```

Note: be sure to run this codemod _after `icons-react-size-prop`_.

#### Troubleshooting automated codemod migration

However, in certain situations, we will be unable to infer what the correct
update should be for a certain usage of the icon component. We have written the
codemod to work for most situations, but you will see console warnings for files
Expand Down
31 changes: 31 additions & 0 deletions packages/upgrade/src/upgrades.js
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,37 @@ export const upgrades = [
});
},
},
{
name: 'update-carbon-icons-react-import-to-carbon-react',
description:
'Rewrites imports from `@carbon/icons-react` to `@carbon/react/icons`',
migrate: async (options) => {
const transform = path.join(
TRANSFORM_DIR,
'update-carbon-icons-react-import-to-carbon-react.js'
);
const paths =
Array.isArray(options.paths) && options.paths.length > 0
? options.paths
: await glob(['**/*.js', '**/*.jsx'], {
cwd: options.workspaceDir,
ignore: [
'**/es/**',
'**/lib/**',
'**/umd/**',
'**/node_modules/**',
'**/storybook-static/**',
],
});

await run({
dry: !options.write,
transform,
paths,
verbose: options.verbose,
});
},
},
],
},
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
//prettier-ignore
import { Add } from '@carbon/icons-react';
//prettier-ignore
import { Settings, Search } from '@carbon/icons-react';
//prettier-ignore
import Icons from '@carbon/icons-react';
import Something from 'somewhere-else';
import { SomethingElse } from 'somewhere-else';
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
//prettier-ignore
import { Add } from "@carbon/react/icons";
//prettier-ignore
import { Settings, Search } from "@carbon/react/icons";
//prettier-ignore
import Icons from "@carbon/react/icons";
import Something from 'somewhere-else';
import { SomethingElse } from 'somewhere-else';
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* Copyright IBM Corp. 2016, 2023
*
* 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, 'update-carbon-icons-react-import-to-carbon-react');
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*
* Rewrites imports from '@carbon/icons-react' to '@carbon/react/icons'
*
* Transforms:
*
* import { Add } from '@carbon/icons-react';
*
* Into:
*
* import { Add } from "@carbon/react/icons";
*/

function transformer(file, api) {
const j = api.jscodeshift;

return j(file.source)
.find(j.ImportDeclaration, {
source: {
value: '@carbon/icons-react',
},
})
.forEach((path) => {
path.get('source').replace(j.stringLiteral('@carbon/react/icons'));
})
.toSource();
}

module.exports = transformer;