Reshaped can be used as a starting point for the teams building their own design systems to skip the implementation of the core features. Since most design systems have so much in common, this is a huge time saver for companies who don't want to waste time discovering the best practices and learning about pitfalls.
When you get the Pro license, you get the system's code in precisely the same state as we develop it. It means that you get access to uncompiled code of the components, their Storybook examples which you can run locally, an extensive test suite and the development environment that helps you adding new features. As you keep changing the source code of the components, you may also easily adjust the tests and examples you need.
Download the latest source code archive and unpack it in your local file system. You can use it as a separate repository without any additional setup or you can turn it into a package inside your own monorepo.
By default, we're using Yarn, so run yarn in the project to install all dependencies.
yarn build
Build the whole project, including a ESM build for the components, CJS 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're using a combination of multiple tools:
yarn dev
Start the Storybook with all component examples. It includes an accessibility plugin, 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 the 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 – we're running them autmatically against the updated files using lefthook.
yarn release
In case you need to release your package for internal use – you can use our release scripts. Most likely you'll want to update how they work, since probably you don't need a release process for the source code and instead of creating a .tgz you would publish it to your internal NPM registry.
There are 3 more scripts responsible for the quality assurance:
yarn test:unit
Run unit tests written with jest and react-testing-library. We're already providing you with tests for the components coming with the source code. You can modify these tests as you keep customizing the code.
yarn test:size
Run size-limit to check the bundle size after your local code changes. This could be very helpful to prevent mistakes with package imports and we're also providing a GitHub action to run this check on every pull request.
yarn test:vrt
Run visual regression tests using chromatic. Every component story you have in storybook automatically turns into a screenshot tests.
Note that we're using a Chromatic token from a .chromatic file which we don't include in the source code. To use screenshot testing, you need to generate your own token in Chromatic and create a file containing its value.
With the pro license purchased, you will be receiving lifetime updates. So even after you start changing the original code, you will be able to look into the latest changes and learn their implementation details. It should help you stay productive with your system development and will help you adopt new components added to Reshaped.
For teams who want to make the most out of the source code updates, we recommend to only copy the source code of the components you want to customize. You can use other components directly from the Reshaped, which means you will be getting automatic updates for those components and can cherry pick the changes for the components you've modified.