Studio Design System

Introduction

Studio Design System is Patreon’s web design system and is built with React and Styled Components and written in Typescript.

The docs for Studio Design System live at https://studio.patreon.com

Getting Started

Installation

npm i -P @patreon/studio

How to use

View available Studio components and how to use them in the docs.

As an example, here’s how you’d import the Text component:

import { Text } from '@patreon/studio'

Docs

We use Docz to generate the Studio docs that live at https://studio.patreon.com.

How to run the docs locally

Run npm run docs:server and open localhost:3003 in your browser.

Storybook

Storybook is a component development environment. Our version of Storybook uses the component story format, which expects stories to be written in the following format.

export ExampleStory = () => <ExampleComponent />

How to run Storybook locally

Run npm run storybook.

Tests

How to run tests

Run npm run test or npm run test:watch

How to use Happo locally

Happo is our tool for visual regression testing. It's integrated as part of our CircleCI tests, but can also be run locally, with a little bit of setup:

1. Open up 1Password and search for a secure note titled: "Happo .env Variables - Studio"
2. Create a .env file in the studio directory (it will be ignored by git)
3. Add the .env variables from the 1Password document to the new file.
4. If you haven’t already, run npm install to make sure dependencies are installed (dotenv in particular).
5. Run npm run happo dev, which will watch files for changes and with the --only flag can be limited to specific components. See the docs for more info.
6. Happo will run tests, then provide a url where you can see the report.

Developing in PRF

This is currently the easiest and most foolproof way to integrate Studio with PRF.

1. Run devx service builder stop
2. If your devx sync command is already running you can skip this step. Otherwise, run devx sync --once
3. Run devx attach. Inside of that SSH connection, run the following:
   1. cd /opt/code/studio
   2. npm ci
   3. npm run build
   4. cd ../patreon_react_features/node_modules/@patreon
   5. rm -r studio
   6. cp -r /opt/code/studio . Note: studio does not have a trailing slash.
   7. exit
4. Back on your local machine, continue with:
   1. devx service restart react
   2. devx service ssr restart

Clean up when done

1. Run devx attach. Inside of that SSH connection, run the following:

   1. cd /opt/code/patreon_react_features/node_modues/@patreon
   2. rm -r studio
   3. cd ../../
   4. npm ci
   5. exit

2. Back on your local machine, continue with:

   1. devx service restart react
   2. devx service ssr restart

3. That's it!