Source code

Reshaped is a great starting point for teams building their own design systems, helping you skip the implementation of core features. Most design systems have a lot in common, so this saves you time by avoiding the need to discover best practices and learn from pitfalls.

With the Pro license, you get access to the system’s code exactly as we develop it. This includes uncompiled component code, Storybook examples you can run locally, an extensive test suite, and a development environment for adding new features. As you update the source code, you can easily adjust the tests and examples to fit your needs.

Download the latest source code archive and unpack it on your local file system. You can use it as a separate repository with no additional setup or integrate it into your own monorepo.

By default, we use Yarn. Run yarn in the project directory to install all dependencies.

yarn build

Build the whole project, including ESM build for the components, CommonJS build for the CLI, library bundle, styles, themes, and Storybook. You can also run each part individually if you only need to test a specific change.

To build the project, we use a combination of tools:

• vite for building the library bundle and Storybook
• tsc for building ESM and CommonJS output files
• postcss and css modules for CSS files
• our custom Node CLI for building themes

yarn dev

Start the Storybook with all component examples. It includes an accessibility plugin and custom controls for toggling content direction and color mode. We’re building it using vite.

yarn lint

Run eslint and stylelint against the codebase. If your editor supports linting, you should see errors and warnings as you change the code, so you won’t need to run this script manually. When you commit any files in the project, they are automatically checked using lefthook.

yarn release

In case you need to release your package for internal use, you can use our release scripts. You’ll likely want to update them to fit your needs, as you may prefer publishing to your internal NPM registry instead of creating a .tgz file.

There are three additional scripts for quality assurance:

yarn test:unit

Runs unit tests written with jest and react-testing-library. We provide tests for the components included in the source code, which you can modify as you customize the code.

yarn test:size

Runs size-limit to check the bundle size after your local code changes. This helps prevent mistakes with package imports. We also provide a GitHub action to run this check on every pull request.

yarn test:vrt

Runs visual regression tests using chromatic. Every component story in storybook automatically turns into a screenshot test.

Note: We use a Chromatic token from a .chromatic file, which is not included in the source code. To use screenshot testing, generate your own token in Chromatic and create a file containing its value.

The source code for our React library includes a GitHub Actions setup that activates automatically with every pull request. This setup includes essential scripts: lint, build, and test:unit. These scripts ensure code quality, proper build, and functionality through unit testing.

For monitoring bundle size, we’ve integrated the size-limit GitHub action. This tool runs during pull requests and posts the results as a comment, making it easy to track any significant size changes.

Screenshot testing isn’t included by default in each pull request. Its implementation depends on whether you’re using Chromatic and the type of license you have. If you decide to include screenshot testing, you can easily add it by modifying the workflow files in the .github/workflows directory. This flexibility allows you to tailor the testing process to your project’s specific needs.

While Reshaped has a standalone website hosting all documentation, Pro license users get access to our Storybook environment. If you plan to add, update, or remove component features, we recommend using Storybook to document these changes. Usually, adding examples for new features will suffice, but you can also include markdown documentation if needed.

With the Pro license, you receive lifetime updates. Even after modifying the original code, you can review the latest changes and learn their implementation details. This helps you stay productive and adopt new components added to Reshaped.

For teams wanting to maximize source code updates, we recommend copying only the source code of components you want to customize. Use other components directly from Reshaped to get automatic updates and cherry-pick changes for the components you’ve modified.

Reshaped comes as a standalone project that works autonomously without any customizations. You can push it to your private Git repository as is, and it will continue working, including its complete development environment. You can also publish it to your private NPM registry.

If you want to use it inside your monorepo, move Reshaped into one of the monorepo packages and review the package.json dependencies to remove any devDependencies already used in your project.

Reshaped uses an exports field in the package.json. It means that it explicitly defines which paths can be used for importing files. In case you're using our source code to publish the components internally and add more folders that you would like to keep available for import, update the package.json accordingly._createMdxContent

For example, if you're adding a new iconset inside the icons/streamline, add this folder to the package.json:

{
  "exports": {
    "./icons/custom": {
      "types": "./dist/icons/custom/index.d.ts",
      "import": "./dist/icons/custom/index.js"
    }
  }
}