# Studio Design System

## Introduction

Studio Design System is Patreon’s web design system and is built with React and [Styled Components](https://www.styled-components.com/) 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](https://studio.patreon.com).

## Local Development

Run `npm run dev` and open `localhost:6006` in your browser. This will start [Storybook](https://storybook.js.org/) and watch for changes.

## Tests

### How to run tests

Run `npm run test` or `npm run test:watch`

#### Updating snapshots

If you make changes to a component and the snapshot test fails, you can update the snapshot by running `npm run test:ci -- -u` or `npm run test:ci -- [file] -u` for a specific snapshot file.

### 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"
1.  Create a `.env` file in the `studio` directory (it will be ignored by git)
1.  Add the .env variables from the 1Password document to the new file.
1.  If you haven’t already, run `npm install` to make sure dependencies are installed (`dotenv` in particular).
1.  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](https://github.com/enduire/happo.io/blob/master/README.md#local-development) for more info.
1.  Happo will run tests, then provide a url where you can see the report.

## Developing with PRF
Within PRF, install Studio in the home directory, then run the same instructions as above:
- `cd studio`
- `npm install`
- `npm run prf:link`

### Clean up when done

Run `npm run prf:unlink` to revert to the published version of Studio.