Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ee6afcb

Browse files
chunming-cAllenFang
authored andcommitted
fix #17
* storybook environment setup * customized loader * add basic example of BasicTable * add script to bootstrap storybook * import bootstrap css for storybook * update webpack.config for adding loader for font and css * add sass loader and allow to customize css for storybook * uncheck lint for react-bootstrap-table-example * package example has its own lint check * run yarn in each package when boostrapping lerna * add peerDependencies for package example
1 parent 4da199f commit ee6afcb

File tree

13 files changed

+5361
-26
lines changed

13 files changed

+5361
-26
lines changed

‎lerna.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"packages": [
44
"packages/*"
55
],
6-
"version": "0.0.0"
6+
"version": "0.0.0",
7+
"npmClient": "yarn"
78
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"pretest": "yarn lint --cache",
1010
"test": "jest",
1111
"test:coverage": "jest --coverage",
12-
"test:watch": "jest --watch"
12+
"test:watch": "jest --watch",
13+
"storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook"
1314
},
1415
"repository": {
1516
"type": "git",
@@ -40,7 +41,9 @@
4041
"html-webpack-plugin": "^2.30.1",
4142
"jest": "^20.0.4",
4243
"lerna": "^2.0.0",
44+
"node-sass": "^4.5.3",
4345
"react-test-renderer": "^15.6.1",
46+
"sass-loader": "^6.0.6",
4447
"sinon": "^3.2.1",
4548
"webpack": "^3.5.4",
4649
"webpack-dev-server": "^2.7.1"
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
2+
3+
import '@storybook/addon-actions/register';
4+
import '@storybook/addon-links/register';
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
2+
3+
import { configure } from '@storybook/react';
4+
5+
function loadStories() {
6+
require('stories');
7+
}
8+
9+
configure(loadStories, module);
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const path = require('path');
2+
3+
const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
4+
const storyPath = path.join(__dirname, '../stories');
5+
const examplesPath = path.join(__dirname, '../examples');
6+
const aliasPath = {
7+
examples: examplesPath,
8+
stories: storyPath,
9+
};
10+
11+
const loaders = [{
12+
enforce: 'pre',
13+
test: /\.js?$/,
14+
exclude: /node_modules/,
15+
include: [examplesPath, storyPath],
16+
loader: 'eslint-loader',
17+
}, {
18+
test: /\.js?$/,
19+
use: ['babel-loader'],
20+
exclude: /node_modules/,
21+
include: [sourcePath, storyPath],
22+
}, {
23+
test: /\.css$/,
24+
use: ['style-loader', 'css-loader'],
25+
}, {
26+
test: /\.scss$/,
27+
use: ['style-loader', 'css-loader', 'sass-loader'],
28+
include: [storyPath, sourcePath, examplesPath],
29+
}, {
30+
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
31+
loader: 'url-loader?limit=100000',
32+
}];
33+
34+
// Export a function. Accept the base config as the only param.
35+
module.exports = (storybookBaseConfig, configType) => {
36+
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
37+
// You can change the configuration based on that.
38+
// 'PRODUCTION' is used when building the static version of storybook.
39+
40+
// loaders
41+
loaders.forEach(value => {
42+
storybookBaseConfig.module.rules.push(value);
43+
})
44+
45+
// alias
46+
storybookBaseConfig.resolve.alias = aliasPath;
47+
48+
// Return the altered config
49+
return storybookBaseConfig;
50+
};
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
3+
import { BootstrapTable } from 'react-bootstrap-table2';
4+
5+
const products = [];
6+
7+
function addProducts(quantity) {
8+
const startId = products.length;
9+
for (let i = 0; i < quantity; i += 1) {
10+
const id = startId + i;
11+
products.push({
12+
id,
13+
name: `Item name ${id}`,
14+
price: 2100 + i,
15+
nest: {
16+
address: 'Address 1',
17+
postcal: '0922-1234'
18+
}
19+
});
20+
}
21+
}
22+
23+
addProducts(5);
24+
25+
const columns = [{
26+
dataField: 'id',
27+
text: 'Product ID',
28+
style: {
29+
backgroundColor: 'red'
30+
},
31+
headerTitle: (column, colIndex) => 'yes~~~ oh', // eslint-disable-line no-unused-vars
32+
classes: 'my-xxx'
33+
}, {
34+
dataField: 'name',
35+
text: 'Product Name',
36+
headerTitle: true,
37+
formatter: (cell, row) =>
38+
(<h3>{ cell }::: ${ row.price }</h3>)
39+
}, {
40+
dataField: 'price',
41+
text: 'Product Price',
42+
style: (cell, row, colIndex) => ({ // eslint-disable-line no-unused-vars
43+
backgroundColor: 'blue'
44+
})
45+
}, {
46+
dataField: 'nest.address',
47+
text: 'Address'
48+
}, {
49+
dataField: 'nest.postcal',
50+
text: 'Postal'
51+
}];
52+
53+
export default () => <BootstrapTable keyField="id" data={ products } columns={ columns } />;

‎packages/react-bootstrap-table2-example/package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,22 @@
44
"description": "",
55
"main": "index.js",
66
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"storybook": "start-storybook -p 6006",
9+
"build-storybook": "build-storybook"
810
},
911
"author": "",
1012
"license": "ISC",
13+
"peerDependencies": {
14+
"prop-types": "^15.0.0",
15+
"react": "^15.0.0",
16+
"react-dom": "^15.0.0"
17+
},
1118
"dependencies": {
19+
"bootstrap": "^3.3.7",
1220
"react-bootstrap-table2": "0.0.1"
21+
},
22+
"devDependencies": {
23+
"@storybook/react": "^3.2.8"
1324
}
1425
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* eslint import/no-unresolved: 0 */
2+
import React from 'react';
3+
import { storiesOf } from '@storybook/react';
4+
import { linkTo } from '@storybook/addon-links';
5+
6+
import { Welcome } from '@storybook/react/demo';
7+
import BasicTable from 'examples/basic/index.js';
8+
9+
// css style
10+
import 'bootstrap/dist/css/bootstrap.min.css';
11+
import 'stories/stylesheet/storybook.scss';
12+
13+
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
14+
15+
storiesOf('Basic Table', module)
16+
.add('default', () => <BasicTable />);
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* customized style for storybook*/

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /