Cerebellum

Cerebrum's React Component Library

For information about how to use Cerebellum in your application, please see the Storybook documentation.

Local Development

You can run Storybook locally with

npm start

Testing changes locally via link

Once the component is working well in Storybook, you'll want to make sure it works as expected in your project. You can do this with npm link:

In the Cerebellum directory, run:

npm link

In the consuming app, run:

npm link @cerebruminc/cerebellum

You'll need to do this whenever you want to connect to your local Cerebellum build. Make sure to restart your local server.

Make sure to build Cerebellum to access your changes. You'll need to do this anytime you make changes.

npm run build

When you're done, unlink the local Cerebellum version:

npm unlink @cerebruminc/cerebellum

NOTE: There is a huge gotcha here. Running npm unlink @cerebruminc/cerebellum will uninstall Cerebellum, so you will need to re-install it before running your app again.

Linking with Next.js

To work with Next.js, you will need to alias react, react-dom, and styled-components to prevent conflicting versions:

// next.config.js
const nextConfig = {
  webpack: (config, options) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      react: path.resolve(__dirname, "node_modules/react"),
      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
      "styled-components": path.resolve(__dirname, "node_modules/styled-components"),
    };
    return config;
  },
  // Remaining config
}

Troubleshooting npm link

• Make sure the link is working. You can check it like this:

# run
ls -l node_modules/@cerebruminc 

# Linked to local build
total 0
lrwxr-xr-x@ 1 davebascom  staff  19 May 13 12:11 cerebellum -> ../../../cerebellum

# Using node_modules (not linked)
total 0
drwxr-xr-x  7 davebascom  staff  224 May 13 12:06 cerebellum

• Make sure you are not re-installing node_modules when you restart your server. This unlinks any symlinks.

# Do not run this - it will re-install node_modules and unlink Cerebellum
npm run go

# Start the server directly
npm run dev:https

• You may need to clear out node_modules in both Cerebellum and the consuming app.

• If you get a compile error after unlinking, make sure Cerebellum is installed. When you run npm unlink @cerebruminc/cerebellum, it will uninstall the package.

Testing the production build

Whenever you open a pull request, a production build is created and uploaded to the @cerebruminc/cerebellum npm package. The name of this beta package is added as a comment to he pull request, allowing you to test it in your own project:

Install this version in your package.json. Just make sure to omit the caret:

Codemods

There are some codemods written in jscodeshift that you can run to update your existing Cerebellum integration. More information can be found in the codemods readme.