Welcome to Ray, and thank you for contributing. Let's get you setup!
Clone the project and
cd into the directory.
$ git clone email@example.com:WeWork/ray.git $ cd ray
Then install dependencies and bootstrap Lerna.
$ yarn bootstrap
Ray is a multi-package repository powered by Lerna. These packages can be found in
The primary packages are
|packages/core/||CSS and JS that make up the design system|
|packages/docs-app/||A documentation site built with Gatsby|
After following the setup instructions above, you can use these steps to begin your contributions to the design system.
- Start the development servers
# Spin up both the storybook and docs servers $ yarn dev # Run only the storybook server $ yarn dev:core # Run only the documentation server $ yarn dev:docs
- Modify or create new SCSS/JS in the
- Modify or create new stories in the
- Modify or create new documentation in the
- Test your changes (and write tests if applicable):
- Commit and push your changes to GitHub and create a pull-request.
- Wait for a review by the maintainers.
This is a playground for developers to build and test their HTML/CSS/JS. It runs React for ease of development.
We also use storybook in our continuous integration for visual regression testing. So it's key that stories exist for every component.
localhost:6006 to find the storybook.
Our documentation is built with GastbyJS, with content sourced from the markdown in
localhost:8000 to find the docs site.
- All components should be right-to-left (RTL) compatible
- Strive to document all component permutations in storybook so they're visually tested
- Keep HTML examples simple and follow best practices such as using proper a11y attributes where applicable
- Keep SVGs in HTML examples simple so they code can be easily scanned
- Put focus states and keyboard navigation effects behind the
$ray-accessibility-classvariable, search the codebase for examples