README
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:
- Open up 1Password and search for a secure note titled: "Happo .env Variables - Studio"
- Create a
.env
file in thestudio
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 in PRF
- Make sure
studio
is a sibling topatreon_react_features
in adevx
synced folder - In
patreon_react_features
execnpm run link:studio
- In
studio
execnpm run build:module:watch
- Restart react:
devx service react restart
- Restart web (for safe measure):
devx service web restart
- HMR + file watching works!
Remove the link
$ rm app/libs/studio
$ devx service react restart
$ devx service web restart
- That's it!