Skip to content

Commit 83e13c8

Browse files
abdennourabdennour
committed
Generate pattern library for components
1 parent d46773c commit 83e13c8

File tree

11 files changed

+193
-4
lines changed

11 files changed

+193
-4
lines changed

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ docs/
55
docs-site/
66
server.js
77
webpack.sample.config.js
8+
styleguide.config.js

‎docs/build/1.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.js

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/forkme.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
const forkme = document.createElement('a');
2-
forkme.href='http://github.com/abdennour/XXX-PACKAGE-NAME';
3-
forkme.innerHTML=`
4-
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
2+
forkme.href = 'http://github.com/abdennour/react-csv';
3+
forkme.target = '_blank';
4+
forkme.innerHTML = `
5+
<img class="forkme-img" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
56
`;
67
document.body.appendChild(forkme);
8+
document.querySelector('footer').remove();

‎docs/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>React CSV pattern library</title>
7+
</head>
8+
9+
<body>
10+
<div id="app"></div>
11+
<script type="text/javascript" src="build/bundle.js"></script>
12+
<script type="text/javascript" src="forkme.js"></script>
13+
</body>
14+
15+
</html>

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"coverage": "istanbul cover _mocha -- --ui bdd -R spec -t 5000;open ./coverage/lcov-report/index.html",
1515
"cover": "node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha",
1616
"coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
17-
"docgen": "documentation build src/** -f html -o docs"
17+
"docgen": "documentation build src/** -f html -o docs",
18+
"styleguide-server": "styleguidist server",
19+
"styleguide-build": "styleguidist build"
1820
},
1921
"repository": {
2022
"type": "git",
@@ -67,7 +69,9 @@
6769
"mocha-lcov-reporter": "^1.2.0",
6870
"react": "^15.4.1",
6971
"react-addons-test-utils": "^15.4.1",
72+
"react-docgen": "^2.13.0",
7073
"react-dom": "^15.4.1",
74+
"react-styleguidist": "^4.6.3",
7175
"sass-loader": "^4.0.2",
7276
"sinon": "^1.17.6",
7377
"style-loader": "^0.13.1",

‎sample-site/csvdownload.example.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Basic example
2+
3+
```html
4+
const data = [
5+
['name', 'age'],
6+
['Ahmed', 12],
7+
['John', 8]
8+
];
9+
<CSVDownload data={data} />
10+
```
11+
## Note:
12+
> We avoid to make live examples for `CSVDownload` component, since mounting
13+
> this component triggers the download directly.
14+
15+
> Please, check the next component since you can test it directly.

‎sample-site/csvlink.example.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
Basic example
2+
3+
```
4+
const data = [
5+
['firstname', 'lastname', 'email'] ,
6+
['Ahmed', 'Tomi' , '[email protected]'] ,
7+
['Raed', 'Labes' , '[email protected]'] ,
8+
['Yezzi','Min l3b', '[email protected]']
9+
];
10+
<CSVLink data={data} >Click here to download CSV file</CSVLink>
11+
```
12+
13+
Set **data props** as "Array of literal (json) objects" ;
14+
15+
```
16+
const data = [
17+
{firstname: 'Ahmed', lastname: 'Tomi' , email: '[email protected]'},
18+
{firstname:'Raed', lastname:'Labes' , email:'[email protected]'} ,
19+
{firstname:'Yezzi', lastname:'Min l3b', email:'[email protected]'}
20+
];
21+
<CSVLink data={data} >Click here to download CSV file</CSVLink>
22+
```
23+
24+
25+
26+
Add styling to your link via **style props** or **className props** :
27+
28+
```example
29+
30+
const prettyLink = {
31+
backgroundColor: '#8dc63f',
32+
fontSize: 14,
33+
fontWeight: 500,
34+
height: 52,
35+
padding: '0 48px',
36+
borderRadius: 5,
37+
color: '#fff'
38+
};
39+
const data = [
40+
['firstname', 'lastname', 'email'] ,
41+
['Ahmed', 'Tomi' , '[email protected]'] ,
42+
['Raed', 'Labes' , '[email protected]'] ,
43+
['Yezzi','Min l3b', '[email protected]']
44+
];
45+
46+
<span>
47+
Download <CSVLink data={data} style={prettyLink}>CSV ⬇</CSVLink> to download CSV
48+
</span>
49+
50+
```
51+
52+
Set the separator between cells via **separator props**:
53+
```example
54+
55+
const data = [
56+
['firstname', 'lastname', 'email'] ,
57+
['Ahmed', 'Tomi' , '[email protected]'] ,
58+
['Raed', 'Labes' , '[email protected]'] ,
59+
['Yezzi','Min l3b', '[email protected]']
60+
];
61+
62+
<span>
63+
Download <CSVLink data={data} separator={";"}>CSV ⬇</CSVLink>
64+
</span>
65+
66+
```
67+
68+
69+
Set the default **filename** of the downloaded CSV file :
70+
71+
```
72+
const randomData = Array.from({length:10}, (v, k) =>
73+
Array.from({length:4}, (vv, kk) => Math.random().toString(36).substring(7))
74+
);
75+
76+
// -----------------------Double click here👇🏼 to change the name (it is editable)
77+
<CSVLink data={randomData} filename="another-name.csv">Download me with another name </CSVLink>
78+
```
79+
80+
Add **headers** :
81+
82+
```
83+
//It is editable content : you can change code and see results on live.
84+
const randomData = Array.from({length:10}, (v, k) =>
85+
Array.from({length:4}, (vv, kk) => Math.random().toString(36).substring(5))
86+
);
87+
const headers =['Rando-🍌', 'Rando-🍑', 'Rando-🌺', 'Rando-🍀'];
88+
89+
<CSVLink data={randomData} headers={headers}>Download with Headers </CSVLink>
90+
```

‎src/components/Download.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import {
66
const defaultProps = {
77
target: '_blank'
88
};
9+
10+
/**
11+
*
12+
* @example ../../sample-site/csvdownload.example.md
13+
*/
914
class CSVDownload extends React.Component {
1015

1116
static defaultProps = Object.assign(

‎src/components/Link.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import {
44
defaultProps as commonDefaultProps,
55
propTypes as commonPropTypes} from '../metaProps';
66

7+
/**
8+
*
9+
* @example ../../sample-site/csvlink.example.md
10+
*/
711
class CSVLink extends React.Component {
812

913
static defaultProps = commonDefaultProps;

0 commit comments

Comments
 (0)