@patreon/studio NPM

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.

Local Development

Run npm run dev and open localhost:6006 in your browser. This will start Storybook 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:

Open up 1Password and search for a secure note titled: "Happo .env Variables - Studio"
Create a .env file in the studio directory (it will be ignored by git)
Add the .env variables from the 1Password document to the new file.
If you haven’t already, run npm install to make sure dependencies are installed (dotenv in particular).
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.
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.

patreon studio design-system

@floating-ui/react-dom classnames color eslint-plugin-react-server-components known-css-properties lodash react-focus-lock react-measure react-scrolllock w3c-keys

@infinitebrahmanuniverse/nolb-_pat @everything-registry/sub-chunk-707

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

11 months ago

11 months ago

7 months ago

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

5 months ago

8 months ago

8 months ago

8 months ago

12 months ago

7 months ago

6 months ago

6 months ago

6 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

8 months ago

11 months ago

5 months ago

11 months ago

11 months ago

9 months ago

11 months ago

7 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago