v4.0.0: Removing Bit

Casper UI 2.0 has moved away from using Bit for component management and now uses npm instead.

1. Remove .npmrc

You should no longer use an .npmrc file to install the library. If you have it, delete the file.

.npmrc

 @caspeco:registry=https://node-registry.bit.cloud

You might have also set this in your npm config globally on your machine. You can run npm config list to check. If you see anything related to Bit or @caspeco:registry, you can remove this by running the following command:

npm config delete @caspeco:registry

2. Uninstall all Bit packages

Previously, each component was installed as a separate package. Now everything is bundled into a single package.

You can uninstall all Bit packages using the following command:

npm uninstall @caspeco/casper-ui-library.base-ui.theme @caspeco/casper-ui-library.components.accordion @caspeco/casper-ui-library.components.alert @caspeco/casper-ui-library.components.badge @caspeco/casper-ui-library.components.box @caspeco/casper-ui-library.components.breadcrumbs @caspeco/casper-ui-library.components.button @caspeco/casper-ui-library.components.checkbox-group @caspeco/casper-ui-library.components.checkbox @caspeco/casper-ui-library.components.chip @caspeco/casper-ui-library.components.combobox @caspeco/casper-ui-library.components.datepicker @caspeco/casper-ui-library.components.divider @caspeco/casper-ui-library.components.drawer @caspeco/casper-ui-library.components.flex @caspeco/casper-ui-library.components.formcontrol @caspeco/casper-ui-library.components.grid @caspeco/casper-ui-library.components.heading @caspeco/casper-ui-library.components.icon-button @caspeco/casper-ui-library.components.icon @caspeco/casper-ui-library.components.image @caspeco/casper-ui-library.framework.image-upload @caspeco/casper-ui-library.components.input @caspeco/casper-ui-library.components.link @caspeco/casper-ui-library.components.list @caspeco/casper-ui-library.components.menu @caspeco/casper-ui-library.components.message @caspeco/casper-ui-library.components.modal @caspeco/casper-ui-library.components.navigation-list @caspeco/casper-ui-library.components.paginator @caspeco/casper-ui-library.components.quantity-button @caspeco/casper-ui-library.components.radio-group @caspeco/casper-ui-library.components.radio @caspeco/casper-ui-library.components.segmented-control @caspeco/casper-ui-library.components.select @caspeco/casper-ui-library.components.skeleton @caspeco/casper-ui-library.components.stack @caspeco/casper-ui-library.components.stepper @caspeco/casper-ui-library.components.switch @caspeco/casper-ui-library.components.table @caspeco/casper-ui-library.components.tabs @caspeco/casper-ui-library.components.tag @caspeco/casper-ui-library.components.text @caspeco/casper-ui-library.components.textarea @caspeco/casper-ui-library.components.toast @caspeco/casper-ui-library.components.toggle-button @caspeco/casper-ui-library.components.tooltip

3. Install the new package

Now you can install the new package using npm:

npm install @caspeco/casper-ui-library

4. Update imports

You will need to update your imports to use the new package.

import { ThemeProvider } from "@caspeco/casper-ui-library.base-ui.theme";
import { Button } from "@caspeco/casper-ui-library.components.button";
import { Box } from "@caspeco/casper-ui-library.components.box";
import { Text } from "@caspeco/casper-ui-library.components.text";
import { ThemeProvider, Button, Box, Text } from "@caspeco/casper-ui-library";

Tip

In VSCode, you can use the “Find and Replace” feature to quickly update your imports.

1. Create .vscode/settings.json with the following content if it doesn’t exist:

   {
     "editor.codeActionsOnSave": {
       "source.organizeImports": "always"
     }
   }

2. Open the search panel (Ctrl + Shift + F), enter @caspeco/casper-ui-library\..* and turn on the “Use Regular Expression” option (Alt + R)

3. In the replace field, enter @caspeco/casper-ui-library";

4. Click “Replace All”

5. You can now undo the changes in ./vscode/settings.json.

5. Remove dependabot group

If your repository uses a separate dependabot group for Casper UI library, you should now remove it.

.github/dependabot.yml

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      casper-ui:
        applies-to: version-updates
        patterns:
          - "@caspeco/casper-ui-library*"
        update-types:
          - "major"
          - "minor"
          - "patch"
      non-major-updates:
        patterns:
          - "*"
        exclude-patterns:
          - "@caspeco/casper-ui-library*"
        update-types:
          - "minor"
          - "patch"

6. Done!

That should be it!