jyapayne/react-csv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Generate pattern library for components

Browse source
This commit is contained in:
abdennour 2017-02-18 12:11:34 +03:00
commit 83e13c8b36
11 changed files with 193 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.npmignore
View file

@ -5,3 +5,4 @@ docs/
docs-site/ docs-site/
server.js server.js
webpack.sample.config.js webpack.sample.config.js
styleguide.config.js

9
docs/build/1.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

30
docs/build/bundle.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

8
docs/forkme.js
View file

@ -1,6 +1,8 @@
const forkme = document.createElement('a'); const forkme = document.createElement('a');
forkme.href='http://github.com/abdennour/XXX-PACKAGE-NAME'; forkme.href = 'http://github.com/abdennour/react-csv';
forkme.innerHTML=` forkme.target = '_blank';
<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"> forkme.innerHTML = `
<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">
`; `;
document.body.appendChild(forkme); document.body.appendChild(forkme);
document.querySelector('footer').remove();

15
docs/index.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>React CSV pattern library</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="build/bundle.js"></script>
<script type="text/javascript" src="forkme.js"></script>
</body>
</html>

6
package.json
View file

@ -14,7 +14,9 @@
"coverage": "istanbul cover _mocha -- --ui bdd -R spec -t 5000;open ./coverage/lcov-report/index.html", "coverage": "istanbul cover _mocha -- --ui bdd -R spec -t 5000;open ./coverage/lcov-report/index.html",
"cover": "node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha", "cover": "node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha",
"coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls", "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
"docgen": "documentation build src/** -f html -o docs" "docgen": "documentation build src/** -f html -o docs",
"styleguide-server": "styleguidist server",
"styleguide-build": "styleguidist build"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -67,7 +69,9 @@
"mocha-lcov-reporter": "^1.2.0", "mocha-lcov-reporter": "^1.2.0",
"react": "^15.4.1", "react": "^15.4.1",
"react-addons-test-utils": "^15.4.1", "react-addons-test-utils": "^15.4.1",
"react-docgen": "^2.13.0",
"react-dom": "^15.4.1", "react-dom": "^15.4.1",
"react-styleguidist": "^4.6.3",
"sass-loader": "^4.0.2", "sass-loader": "^4.0.2",
"sinon": "^1.17.6", "sinon": "^1.17.6",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",

15
sample-site/csvdownload.example.md Normal file
View file

@ -0,0 +1,15 @@
Basic example
```html
const data = [
['name', 'age'],
['Ahmed', 12],
['John', 8]
];
<CSVDownload data={data} />
```
## Note:
> We avoid to make live examples for `CSVDownload` component, since mounting
> this component triggers the download directly.
> Please, check the next component since you can test it directly.

90
sample-site/csvlink.example.md Normal file
View file

@ -0,0 +1,90 @@
Basic example
```
const data = [
['firstname', 'lastname', 'email'] ,
['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
['Raed', 'Labes' , 'rl@smthing.co.com'] ,
['Yezzi','Min l3b', 'ymin@cocococo.com']
];
<CSVLink data={data} >Click here to download CSV file</CSVLink>
```
Set **data props** as "Array of literal (json) objects" ;
```
const data = [
{firstname: 'Ahmed', lastname: 'Tomi' , email: 'ah@smthing.co.com'},
{firstname:'Raed', lastname:'Labes' , email:'rl@smthing.co.com'} ,
{firstname:'Yezzi', lastname:'Min l3b', email:'ymin@cocococo.com'}
];
<CSVLink data={data} >Click here to download CSV file</CSVLink>
```
Add styling to your link via **style props** or **className props** :
```example
const prettyLink = {
backgroundColor: '#8dc63f',
fontSize: 14,
fontWeight: 500,
height: 52,
padding: '0 48px',
borderRadius: 5,
color: '#fff'
};
const data = [
['firstname', 'lastname', 'email'] ,
['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
['Raed', 'Labes' , 'rl@smthing.co.com'] ,
['Yezzi','Min l3b', 'ymin@cocococo.com']
];
<span>
Download <CSVLink data={data} style={prettyLink}>CSV ⬇</CSVLink> to download CSV
</span>
```
Set the separator between cells via **separator props**:
```example
const data = [
['firstname', 'lastname', 'email'] ,
['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
['Raed', 'Labes' , 'rl@smthing.co.com'] ,
['Yezzi','Min l3b', 'ymin@cocococo.com']
];
<span>
Download <CSVLink data={data} separator={";"}>CSV ⬇</CSVLink>
</span>
```
Set the default **filename** of the downloaded CSV file :
```
const randomData = Array.from({length:10}, (v, k) =>
Array.from({length:4}, (vv, kk) => Math.random().toString(36).substring(7))
);
// -----------------------Double click here👇🏼 to change the name (it is editable)
<CSVLink data={randomData} filename="another-name.csv">Download me with another name </CSVLink>
```
Add **headers** :
```
//It is editable content : you can change code and see results on live.
const randomData = Array.from({length:10}, (v, k) =>
Array.from({length:4}, (vv, kk) => Math.random().toString(36).substring(5))
);
const headers =['Rando-🍌', 'Rando-🍑', 'Rando-🌺', 'Rando-🍀'];
<CSVLink data={randomData} headers={headers}>Download with Headers </CSVLink>
```

5
src/components/Download.js
View file

@ -6,6 +6,11 @@ import {
const defaultProps = { const defaultProps = {
target: '_blank' target: '_blank'
}; };
/**
*
* @example ../../sample-site/csvdownload.example.md
*/
class CSVDownload extends React.Component { class CSVDownload extends React.Component {
static defaultProps = Object.assign( static defaultProps = Object.assign(

4
src/components/Link.js
View file

@ -4,6 +4,10 @@ import {
defaultProps as commonDefaultProps, defaultProps as commonDefaultProps,
propTypes as commonPropTypes} from '../metaProps'; propTypes as commonPropTypes} from '../metaProps';
/**
*
* @example ../../sample-site/csvlink.example.md
*/
class CSVLink extends React.Component { class CSVLink extends React.Component {
static defaultProps = commonDefaultProps; static defaultProps = commonDefaultProps;

14
styleguide.config.js Normal file
View file

@ -0,0 +1,14 @@
const path = require('path');
module.exports = {
title: 'React CSV pattern library',
components: './src/components/**/*.js',
styleguideDir: 'docs',
updateWebpackConfig: function(webpackConfig) {
// Your source files folder or array of folders, should not include node_modules
const dir = path.join(__dirname, 'src');
webpackConfig.module.loaders.push(
{ test: /\.js/, loader: 'babel', exclude: /node_modules/ }
);
return webpackConfig;
}
};