Workleap/Orbiter To Hopper

Last update

May 21, 2025

This codemod migrates components from Orbiter to the Hopper design system.

How to Use?

Before

import { Div } from "@workleap/orbiter-ui";

export function App() {
  return <Div width="100px"/>;
}

After

import { Div } from "@hopper-ui/components";

export function App() {
  return <Div UNSAFE_width="100px"/>;
}

Analyze Orbiter Components Usages

To find out the Orbiter's components and their properties usage, run the following command. This command writes the usages in orbiter-usage.json file.

⚠️ It is important to pass -n 1 to use only one thread and get reliable output.

npx codemod workleap/orbiter-to-hopper -a result.json -n 1

The sample output is an ordered JSON that prioritizes the most frequently used components. Within each component, the commonly used properties are also organized in order of frequency:

{
  "Div": {
    "usage": 5,
    "props": {
      "backgroundColor": 2,
      "width": 2,
      "height": 1
    }
  },
  "Text": {
    "usage": 4,
    "props": {
      "color": 3,
      "backgroundColor": 1
    }
  },
}

Run Migrations

All Components

npx codemod workleap/orbiter-to-hopper

npx codemod workleap/orbiter-to-hopper -c all

One Component

npx codemod workleap/orbiter-to-hopper -c Div

In a Path

npx codemod workleap/orbiter-to-hopper -t /app/users

Other Options

Read the Codemod CLI options doc for more options.

How to Contribute?

First, install the codemod CLI globally.

Then, do the modifications and publish a new version by running:

pnpm publish

But if you want to test them locally before publishing, you can run this command in your target project:

codemod --source THIS_PROJECT_LOCAL_PATH

[!TIP] To run the latest modifications, the cdmd_dist folder should not exist. If you use the pnpm deploy:codemod, this folder is getting deleted after each deployment automatically.

Simple Modifications

Modify the mappings.ts for simple mappings. Just add the components and props to map.

{
  sourcePackage: "@workleap/orbiter-ui",
  targetPackage: "@hopper-ui/components",
  components: {
    Div: {
      targetName: "Div",
      props: {
        width: "UNSAFE_width",
        height: "UNSAFE_height",
        maxWidth: (oldValue) => {
            return {
                value: oldValue,
                propName: "UNSAFE_maxWidth"
            }

        }
      },
    },
    Text: {
      targetName: "Text",
    },
  },
};