UNPKG

@patreon/studio

Version:

Patreon Studio Design System

github.com/Patreon/studio

Patreon/studio

55 lines (33 loc) • 2.03 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# 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.