Neptune is TransferWise's design system. It helps us ship cohesive products to our customers, faster. This monorepo centralizes Neptune's efforts on the web, allowing you to build components or CSS, along with their technical documentation, on a single PR.
Check out the documentation website to learn more about the components and CSS we have available.
Design guidelines for when to use each component or pattern are shared across all platforms and available here.
Instructions for usage are available in each package's page:
To introduce or update a component, create a branch and submit a pull request. The documentation and the new npm release will be automatically deployed when merging changes to master.
We use Conventional Commits on the master branch, so all the commits in a PR should follow the specification before merging, there's a CI job that monitors this. This gives us automatic changelogs and version bumps on all packages. All commits are rebased into master, so make them meaningful or squash them before requesting review.
- Create a feature branch from master.
- ️
⚠️ Make sure each commit only affects files from a single package (componentsorcss). - Open a PR and ensure that all commits adhere to conventional commits. You may need a rebase in order to reorganize your existing code.
- Before asking for a review, the title of your PR should have the final commit message that you want to be used in the changelog.
- Ask for a review (post to #neptune-dev channel) and, once approved, ask for a member of the design system team to squash and merge your branch using a valid conventional commit message.
git clone git@github.com:transferwise/neptune-web.git
cd neptune
yarn setup
- Clones repository.
- Installs dependencies.
- Creates initial builds of all packages.
To start the live-reloading environment for:
yarn dev
This command starts the storybook dev environment. Please use this playground for React development and to test React css related changes.
This command will run the following commands in the following locations
| command | what | where |
|---|---|---|
| yarn dev | storybook | component |
| yarn dev | less watch | css |
yarn docs
This command starts the nextjs docs environment. Please use this env to document all your react and css code changes and to test pure html css related changes.
This command will run the following commands in the following locations
| command | what | where |
|---|---|---|
| yarn docs | next dev | docs |
| yarn docs | docs:babel | components |
| less watch | components | |
| yarn docs | less watch | css |
Run testing suite:
yarn test
This command runs react testing suite located in component's folder