Skip to main content

Developing for Quartz

First of all, thank you for contributing to the Quartz Open design system 💎!

This page tells you what you need to start developing for Quartz: the skills to learn and deepen, and how to set up your environment.

Then, you should read on the other topics in this section:

We suggest to follow them in order, but feel free to jump straight to the topic you're most interested in. Just don't forget to read the topics you're less interested in 😅

Expected skills​

You will need the following skills to work in the Quartz ecosystem.

Mandatory​

We expect you to be comfortable with the following skills:

  • JavaScript and TypeScript
  • Node.js basic tooling
  • npm and Yarn fundamentals: package.json, installing, managing dependencies
  • Git fundamentals: cloning, fetch/pull/push, branching, rebasing
  • GitHub basics: UI, issues, forking, pull requests

You will strengthen the following skills as you go, but make sure to have a minimal understanding of them before you start:

Set up your environment​

Install the tools​

Quartz only requires the most common JavaScript tooling:

The following sections give context-specific advice to help you get started quickly.

Windows (Schneider Electric)​

We recommend to use the corporate Software Center to install the tools that are already supported:

  • Visual Studio Code
  • GIT for Windows
  • Google Chrome (optional)

Because Node.js is not yet part of that catalog, we recommend installing NVM because it does not require administrator rights. On top of that, it's very useful to quickly toggle between different versions of Node.

This Microsoft article will guide you getting NVM setup in a clean way.

Finally, enable Yarn by typing corepack enable in a command prompt, and optionally install GitHub Desktop (no admin rights required).

macOS​

On a Mac, we recommend using a package manager like NVM or Homebrew to manage your Node.js installations. Refer to the Node.js download page to get specific instructions for them.

Fork and clone your Git repository​

See the instructions in the Contribution lifecycle section.

Check that everything works​

Open a command prompt in your local repository (you can use the Terminal panel in VS Code), then type the following commands and check there is no error in the output:

  1. yarn or yarn install: download the dependencies locally
  2. yarn build: build the library and its associated Storybook website
  3. yarn lint: check that the code conforms to the Quartz standards
  4. yarn test: run the unit tests
  5. yarn test:e2e: run the end-to-end tests
  6. yarn dev: build the library and Storybook website in live changes mode
  7. Ctrl+Click the URL displayed in the console to open the live Storybook
  8. Navigate to different pages and play with the components
  9. Make a few changes in a component's code or CSS styles: changes should reflect in Storybook as soon as you save the file

If all these steps worked...

Best practices​

Quartz is a large ecosystem of complementary modules with shared ownership. With many people contributing to it, the system can quickly become a mess.

Consistent quality is crucial for our consumers. They will build habits and expectations as they use more and more elements of the ecosystem. That's why we follow the best standards and practices from the open source world.

Good practices are provided along the pages of this section. That way, you will learn them while studying a specific topic.

Last updated on