@contentful/f36-codemod

Forma 36 Codemod

Usage no npm install needed!

<script type="module">
  import contentfulF36Codemod from 'https://cdn.skypack.dev/@contentful/f36-codemod';
</script>

README

f36-codemod

This repository contains a collection of codemod scripts for use with JSCodeshift that help update Forma-36 usage.

Usage

Run this command to start an interactive wizard and then run the specified transform:

npx @contentful/f36-codemod <transform> <path> [...options]

  • transform - name of transform, see available transforms below, separate multiple transforms with a ,.
  • path - files or directory to transform
  • use the --dry option for a dry-run and use --print to print the output for comparison

Using environment variables

We have some environment variables that can be used:

  • FORMA_IMPORT: It should be used when you don't import forma components directly from '@contentful/forma-36-react-components';
  • FORMA_SKIP_UPDATE_IMPORT: It should be used when you don't want to update the import statement.

Example usage with the environment variables:

# In this example it would search for: import { Pill } from "custom-import"
# and would not update the import statement, only the props of the Pill component itself
FORMA_IMPORT=custom-import FORMA_SKIP_UPDATE_IMPORT=true npx @contentful/f36-codemod v4-pill

Running locally

To run the codemod directly without publishing it needs some additional steps due to some issues resolving the dependencies when running locally. You need to first install all dependencies on the codemod directory.

# Inside the forma-36-codemod directory
npm install --legacy-peer-deps
npm link

After this you can run the codemod in your project. If using nvm or similar make sure to be on the same version that you used to link the codemod.

f36-codemod <transform> <path> [...options]

Included Transforms

color-tokens-to-new-tokens

Converts usage of deprecated color tokens with the correct new token. eg. tokens.colorElementMid to tokens.gray300.

v4-text-link

Migrates TextLink component from Forma@v3 to Forma@v4

v4-badge

Migrates Tag component from Forma@v3 to Badge component from Forma@v4

v4-note

Migrates Note component from Forma@v3 to Forma@v4

v4-flex

Migrates Flex component from Forma@v3 to Forma@v4

v4-list

Migrates List component from Forma@v3 to Forma@v4

v4-pill

Migrates Pill component from Forma@v3 to Forma@v4

v4-button

Migrates Button component from Forma@v3 to Forma@v4

v4-tooltip

Migrates Tooltip component from Forma@v3 to Forma@v4

v4-entity-list

Converts EntityList components from Forma v3 to v4

v4-text-field

Migrates TextField component from Forma@v3 to Forma@v4

v4-notification

Migrate Notification component from v3 to v4

v4-asset-card

Migrate AssetCard components from v3 to v4

v4-entry-card

Migrate EntryCard components from v3 to v4

v4-helptext

Migrates HelpText components outside form from v3 to v4

v4-inline-entry-card

Converts InlineEntryCard from Forma v3 to v4