Skip to content

Commit 84d10dd

Browse files
AjayPoshakdanilowoz
AjayPoshak
authored and
danilowoz
committed
Add docz documentation (#119)
* Ignore file generated by docz * Add docz config * Bump react versions; Add docz deps; Add docz scripts * Introduction docs for docz * Add usage docs * Remove unused import * Ignore rpt2_cache in version control * Remove storybook and update dev script * Update docs to refer docz instead of storybook * Remove storybook files * Ignore vs code specific files in version control
1 parent d464745 commit 84d10dd

File tree

10 files changed

+4267
-258
lines changed

10 files changed

+4267
-258
lines changed

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,8 @@
77
npm-debug.log
88
node_modules
99
dist
10-
coverage
10+
coverage
11+
.docz/
12+
.rpt2_cache
13+
settings.json
14+
*.code-workspace

‎.storybook/.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.storybook/config.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,9 @@ Install the dependencies
170170

171171
`$ yarn`
172172

173-
Run the storybook to see your changes
173+
Run the docz to see your changes
174174

175-
`$ yarn storybook`
175+
`$ yarn dev`
176176

177177
## License
178178

‎docs/intro.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
name: Home
3+
route: /
4+
---
5+
6+
# Introduction
7+
<p align="center">
8+
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png" />
9+
</p>
10+
<p align="center">
11+
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
12+
</p>
13+
14+
React component that uses SVG to create a collection of loaders which simulates
15+
the structure of the content that will be loaded, similar to Facebook cards loaders.
16+
17+
## Features
18+
* :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
19+
* :pencil2: **Create your own loading:** use the
20+
[create-content-loader](https://danilowoz.github.io/create-content-loader/) to create
21+
your own custom loadings easily;
22+
* :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
23+
[examples](usage#different-type-of-loaders);
24+
* :rocket: **Performance:** written using only the SVG API.
25+
26+
## Installation
27+
28+
Yarn: `yarn add react-content-loader`
29+
30+
Npm: `npm i react-content-loader --save`
31+
32+
CDN: [from JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
33+
34+
**You can use it in two ways ([See the options)](#options):**
35+
36+
```jsx
37+
// import the component
38+
import ContentLoader, { Facebook } from 'react-content-loader'
39+
40+
const MyLoader = () => <ContentLoader />
41+
const MyFacebookLoader = () => <Facebook />
42+
```
43+
44+
**Or in custom mode, using the
45+
[online tool](https://danilowoz.github.io/create-react-content-loader/)**
46+
47+
48+
## Options
49+
50+
| <p align="left">Name</p>|<p align="left">Type</p>|<p align="left">Default</p>| <p align="left">Description</p> |
51+
| ----------------------- | ----------- | ---------------------- | ------------------------------------------------------------------------- |
52+
| **animate** | Boolean | true | `false` to render with no animation |
53+
| **ariaLabel** | String | Loading interface... | Describe what element it is |
54+
| **speed** | Number | 2 | Animation speed in seconds |
55+
| **className** | String | '' | Classname in the `<svg/>` |
56+
| **width** | Number | 400 | viewBox width of `<svg/>` |
57+
| **height** | Number | 130 | viewBox height of `<svg/>` |
58+
| **rtl** | Boolean | false | Right-to-left animation |
59+
| **preserveAspectRatio** | String | xMidYMid meet | Aspect ratio option of `<svg/>` |
60+
| **primaryColor** | String | #f3f3f3 | Background |
61+
| **secondaryColor** | String | #ecebeb | Animation color |
62+
| **primaryOpacity** | Number | 1 | Background opacity (0 = transparent, 1 = opaque) |
63+
| **secondaryOpacity** | Number | 1 | Animation opacity (0 = transparent, 1 = opaque) |
64+
| **style** | Object | null | Ex: `{ width: '100%', height: '70px' }` |
65+
| **uniquekey** | String | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |

‎docs/usage.mdx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
name: Usage
3+
route: /usage
4+
---
5+
import { Playground, PropsTable } from 'docz'
6+
import ContentLoader, {
7+
Facebook,
8+
Instagram,
9+
Code,
10+
List,
11+
BulletList
12+
} from "../src/index"
13+
import FacebookStyle from "../src/stylized/FacebookStyle"
14+
15+
16+
# React Content Loader
17+
<PropsTable of={FacebookStyle} />
18+
19+
## Different Type of Loaders
20+
21+
### Facebook Style Loader
22+
<Playground>
23+
<Facebook/>
24+
</Playground>
25+
26+
### Instagram Style Loader
27+
<Playground>
28+
<Instagram/>
29+
</Playground>
30+
31+
### Code Style Loader
32+
<Playground>
33+
<Code/>
34+
</Playground>
35+
36+
### List Style Loader
37+
<Playground>
38+
<List/>
39+
</Playground>
40+
41+
### BulletList Style Loader
42+
<Playground>
43+
<BulletList/>
44+
</Playground>
45+
46+
### Custom Loader
47+
<Playground>
48+
<ContentLoader
49+
height={140}
50+
speed={1}
51+
primaryColor={"#333"}
52+
secondaryColor={"#999"}
53+
>
54+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
55+
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
56+
<circle cx="35" cy="35" r="35" />
57+
</ContentLoader>
58+
</Playground>
59+
60+
## Unique key
61+
<Playground>
62+
<Facebook uniquekey="unique-key" />
63+
</Playground>
64+
65+
## No Animation
66+
Set animate props to false to stop Animation
67+
68+
<Playground>
69+
<Facebook animate={false} />
70+
</Playground>
71+
72+
## Right To Left Animation
73+
Set rtl props to animate from right to left
74+
<Playground>
75+
<Instagram rtl />
76+
</Playground>
77+
78+
## Use ViewBox
79+
Use viewbox props to set viewbox value.
80+
Additionally, pass viewBox props as empty string to remove viewBox.
81+
<Playground>
82+
<ContentLoader viewBox="" />
83+
</Playground>
84+
85+
## BugFix in Safari
86+
When using `rgba` as a `primaryColor` or `secondaryColor` value,
87+
[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
88+
meaning that the color will be opaque. To prevent this, instead of using an
89+
`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
90+
move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
91+
<Playground>
92+
<ContentLoader
93+
primaryColor="rgb(0,0,0)"
94+
secondaryColor="rgb(0,0,0)"
95+
primaryOpacity={0.06}
96+
secondaryOpacity={0.12}
97+
/>
98+
</Playground>

‎doczrc.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import emoji from "remark-emoji"
2+
export default {
3+
title: "React Content Loader",
4+
mdPlugins: [emoji],
5+
codeSandbox: false,
6+
htmlContext: {
7+
head: {
8+
links: [
9+
{
10+
rel: "stylesheet",
11+
href: "https://codemirror.net/theme/dracula.css"
12+
}
13+
]
14+
}
15+
},
16+
themeConfig: {
17+
codemirrorTheme: "dracula",
18+
colors: {
19+
primary: "#673ab7",
20+
sidebarBg: "#f3f3f3"
21+
}
22+
}
23+
}

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"mocha": "--require scripts/mocha_runner ./tests/**/*.js ./tests/*.js"
3232
},
3333
"scripts": {
34-
"dev": "start-storybook -p 6006",
34+
"dev": "docz dev",
35+
"docz:build": "docz build",
3536
"build": "rm -fr ./dist && rollup -c",
3637
"test": "npm run lint && npm run testonly && npm run flow",
3738
"test:watch": "npm run testonly -- --watch --watch-extensions js",
@@ -52,12 +53,13 @@
5253
"@babel/preset-react": "^7.0.0",
5354
"@babel/register": "^7.0.0",
5455
"@babel/runtime": "^7.0.0",
55-
"@storybook/react": "^3.4.11",
5656
"babel-core": "^7.0.0-bridge.0",
5757
"babel-eslint": "^10.0.1",
5858
"chai": "^4.1.2",
5959
"chai-enzyme": "^1.0.0-beta.0",
6060
"cross-env": "^5.1.3",
61+
"docz": "^0.12.13",
62+
"docz-theme-default": "^0.12.13",
6163
"enzyme": "^3.6.0",
6264
"enzyme-adapter-react-16": "^1.5.0",
6365
"eslint": "^4.12.0",
@@ -69,8 +71,9 @@
6971
"jsdom-global": "3.0.2",
7072
"mocha": "^4.0.1",
7173
"prettier": "^1.6.1",
72-
"react": "^16.1.1",
73-
"react-dom": "^16.1.1",
74+
"react": "^16.6.3",
75+
"react-dom": "^16.6.3",
76+
"remark-emoji": "^2.0.2",
7477
"rollup": "0.66.4",
7578
"rollup-plugin-babel": "^4.0.3",
7679
"rollup-plugin-replace": "^2.0.0",

‎stories/index.js‎

Lines changed: 0 additions & 118 deletions
This file was deleted.

0 commit comments

Comments
 (0)