README
VIP Design System
Design system components used throughout VIP.
Development
Prerequisites
Make sure you have node.js and NPM installed. Here's a handy installer for Windows, Mac, and Linux.
Install
To get setup run the following command in the vip-design-system
directory:
npm install
Watching for changes
You can build it continuously so that every time you make a change, build files are automatically updated:
npm run watch
Testing
We can test two ways:
Storybook
For components that include storybooks, we can run npm run storybook
to view the components in a sandbox-ed storybook environment.
npm link
- Run
npm link
in your checkout of this repo. - Spin up a local copy of the VIP Dashboard and navigate to a page using the linked components from
@automattic/vip-design-system
Note: it's super useful to run npm run watch
in another process, so any changes will be almost immediately available / testable.
Publish NPM Package Instructions
Once all the changes needed are merged to master, and you are ready to release a new version, follow these steps:
- Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
- Pull all the changes to your local master. Make sure you have the latest master locally.
- We follow the https://semver.org/ versioning. You should run the specific version you are trying to publish:
npm version major|minor|patch
- You should see a version bump in the
package.json
file. - Build the application:
npm run build
- Publish the application
npm publish
Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.
- Push the tags to the repository and master updates.
git push --tags
git push origin master
- For major versions or breaking changes, it's recommended to create a RELEASE with the published tag.