Generate pattern library for components
This commit is contained in:
abdennour
parent
d46773cc94
commit
83e13c8b36
11 changed files with 193 additions and 4 deletions
|
|
@ -5,3 +5,4 @@ docs/
|
|||
docs-site/
|
||||
server.js
|
||||
webpack.sample.config.js
|
||||
styleguide.config.js
|
||||
|
|
|
|||
9
docs/build/1.js
vendored
Normal file
9
docs/build/1.js
vendored
Normal file
File diff suppressed because one or more lines are too long
30
docs/build/bundle.js
vendored
Normal file
30
docs/build/bundle.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
const forkme = document.createElement('a');
|
||||
forkme.href='http://github.com/abdennour/XXX-PACKAGE-NAME';
|
||||
forkme.innerHTML=`
|
||||
<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.href = 'http://github.com/abdennour/react-csv';
|
||||
forkme.target = '_blank';
|
||||
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.querySelector('footer').remove();
|
||||
|
|
|
|||
15
docs/index.html
Normal file
15
docs/index.html
Normal 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>
|
||||
|
|
@ -14,7 +14,9 @@
|
|||
"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",
|
||||
"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": {
|
||||
"type": "git",
|
||||
|
|
@ -67,7 +69,9 @@
|
|||
"mocha-lcov-reporter": "^1.2.0",
|
||||
"react": "^15.4.1",
|
||||
"react-addons-test-utils": "^15.4.1",
|
||||
"react-docgen": "^2.13.0",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-styleguidist": "^4.6.3",
|
||||
"sass-loader": "^4.0.2",
|
||||
"sinon": "^1.17.6",
|
||||
"style-loader": "^0.13.1",
|
||||
|
|
|
|||
15
sample-site/csvdownload.example.md
Normal file
15
sample-site/csvdownload.example.md
Normal 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
90
sample-site/csvlink.example.md
Normal 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>
|
||||
```
|
||||
|
|
@ -6,6 +6,11 @@ import {
|
|||
const defaultProps = {
|
||||
target: '_blank'
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @example ../../sample-site/csvdownload.example.md
|
||||
*/
|
||||
class CSVDownload extends React.Component {
|
||||
|
||||
static defaultProps = Object.assign(
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import {
|
|||
defaultProps as commonDefaultProps,
|
||||
propTypes as commonPropTypes} from '../metaProps';
|
||||
|
||||
/**
|
||||
*
|
||||
* @example ../../sample-site/csvlink.example.md
|
||||
*/
|
||||
class CSVLink extends React.Component {
|
||||
|
||||
static defaultProps = commonDefaultProps;
|
||||
|
|
|
|||
14
styleguide.config.js
Normal file
14
styleguide.config.js
Normal 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;
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue