Skip to content
This repository was archived by the owner on Jun 5, 2019. It is now read-only.

Commit 840327f

Browse files
committed
Add some docs for storybook + nyc
1 parent 180f304 commit 840327f

File tree

2 files changed

+30
-4
lines changed

2 files changed

+30
-4
lines changed

docs/stack.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Can't imagine doing web differently to be honest. I'm sure we will soon, but for
2929

3030
I like `preact` as well. I feel like the switching over will be pretty simple and I probably will.
3131

32-
## Component Styling ##
32+
## Components ##
3333

3434
> **glamor**
3535
@@ -71,14 +71,17 @@ Start your app only when your gut says, "You'll fuck this up long before your st
7171

7272
`glamor` gives me that vibe. 💃
7373

74+
> **Storybook**
75+
76+
Provides a sandbox to work on your components with whatever props you can dream of wanting set to make sure your components are in tip top shape before and during use in your application. If you are writing a component you should be writing stories about it.
7477

7578
## Animations
7679

77-
**react-transition-group**
80+
> **react-transition-group**
7881
7982
Brings enter + leave lifecycle events for animations.
8083

81-
**popmotion**
84+
> **popmotion**
8285
8386
Power animation & tweening library.
8487

@@ -145,6 +148,10 @@ This is great for spies and stubs.
145148
146149
Hooks require('') calls to hijack dependencies and replace with your own.
147150

151+
> **nyc**
152+
153+
Coverage report generation of your tests.
154+
148155

149156
## Compile Time Utilities
150157

docs/using.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ I'm still deciding on a simple way, but there will be a script you can run.
1919

2020
```sh
2121
# this does exist yet
22-
npm run time-to-shine
22+
npm run time-to-shine
2323
```
2424

2525

@@ -75,6 +75,25 @@ npm run watch:tests
7575

7676
Now when you edit your files, it'll recompile & re-run the relevant tests on the fly. And it's quick!
7777

78+
If you are ready to see how much of your codebase is covered simply run:
79+
80+
```sh
81+
npm run coverage
82+
```
83+
84+
and check out the output in the coverage folder.
85+
86+
87+
## Writing Components
88+
89+
When you are adding new components to your app you typically will want to write stories in `storybook`. You do this by simply creating a `<component name>.story.tsx` file along side your component and then writing stories that outline the different prop usage and put it in all the states that it could be in. While you are working on the component you will want to run
90+
91+
```sh
92+
npm run storybook
93+
```
94+
95+
and then switch to the storybook view from the `view` menu in your app so you can get a live preview of the component you are working on.
96+
7897

7998

8099
## Building

0 commit comments

Comments
 (0)