Skip to content
This repository was archived by the owner on Oct 24, 2019. It is now read-only.

Commit 075eff0

Browse files
author
DongWoo Kim
committed
feat: implement all requirements with storybook
1 parent 27ebee9 commit 075eff0

File tree

10 files changed

+10243
-2742
lines changed

10 files changed

+10243
-2742
lines changed

‎.storybook/addons.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-knobs/register';
2+
import '@storybook/addon-actions/register';

‎.storybook/config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@storybook/react';
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context('../stories', true, /.stories.js$/);
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename));
7+
}
8+
9+
configure(loadStories, module);

‎.storybook/webpack.config.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// you can use this file to add your custom webpack plugins, loaders and anything you like.
2+
// This is just the basic way to add additional webpack configurations.
3+
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
4+
5+
// IMPORTANT
6+
// When you add this file, we won't add the default configurations which is similar
7+
// to "React Create App". This only has babel loader to load JavaScript.
8+
9+
module.exports = {
10+
plugins: [
11+
// your custom plugins
12+
],
13+
module: {
14+
rules: [
15+
{
16+
test: /\.css$/,
17+
use: ['style-loader', 'css-loader']
18+
}
19+
]
20+
}
21+
};

‎package-lock.json‎

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

‎package.json‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
{
22
"name": "toast-ui.react-grid",
33
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
4+
"description": "Toat UI Grid for React",
5+
"main": "dist/toastui-react-grid.js",
66
"scripts": {
77
"dev": "webpack-dev-server --open --mode development",
8-
"build": "webpack -p --progress"
8+
"build": "webpack -p --progress",
9+
"storybook": "start-storybook -p 6006",
10+
"build-storybook": "build-storybook"
911
},
1012
"browserslist": "last 2 versions, ie 9",
1113
"peerDependencies": {
12-
"react": "^16.0.0"
14+
"react": "^16.0.0",
15+
"react-dom": "^16.0.0"
1316
},
1417
"author": "",
1518
"license": "MIT",
@@ -19,18 +22,24 @@
1922
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
2023
"@babel/preset-env": "^7.2.3",
2124
"@babel/preset-react": "^7.0.0",
25+
"@storybook/addon-actions": "^4.1.7",
26+
"@storybook/addon-knobs": "^4.1.7",
27+
"@storybook/addon-links": "^4.1.7",
28+
"@storybook/addons": "^4.1.7",
29+
"@storybook/react": "^4.1.7",
2230
"babel-loader": "^8.0.5",
2331
"css-loader": "^2.1.0",
24-
"html-webpack-plugin": "^3.2.0",
32+
"jquery-mockjax": "^2.5.0",
2533
"prettier": "^1.16.0",
34+
"react": "^16.7.0",
35+
"react-dom": "^16.7.0",
36+
"storybook": "^1.0.0",
2637
"style-loader": "^0.23.1",
2738
"webpack": "^4.29.0",
2839
"webpack-cli": "^3.2.1",
2940
"webpack-dev-server": "^3.1.14"
3041
},
3142
"dependencies": {
32-
"react": "^16.7.0",
33-
"react-dom": "^16.7.0",
3443
"tui-grid": "^3.4.0"
3544
}
3645
}

‎src/index.js‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,72 @@
11
import React from 'react';
2-
import {render} from 'react-dom';
2+
import TuiGrid from 'tui-grid';
33

4-
import Grid from './wrapper';
4+
const reactivePropSetterMap = {
5+
data: 'setData',
6+
columns: 'setColumns',
7+
bodyHeight: 'setBodyHeight',
8+
frozenColumnCount: 'setFrozenColumnCount'
9+
};
510

6-
render(<Grid />, document.querySelector('#content'));
11+
export default class Grid extends React.Component {
12+
rootEl = React.createRef();
13+
14+
gridInst = null;
15+
16+
componentDidMount() {
17+
this.gridInst = new TuiGrid({
18+
el: this.rootEl.current,
19+
...this.props
20+
});
21+
22+
this.useAddons();
23+
this.bindEventHandlers();
24+
}
25+
26+
useAddons() {
27+
const {addon} = this.props;
28+
29+
if (addon) {
30+
Object.keys(addon).forEach((addonName) => {
31+
this.gridInst.use(addonName, addon[addonName]);
32+
});
33+
}
34+
}
35+
36+
bindEventHandlers() {
37+
Object.keys(this.props)
38+
.filter((key) => /on[A-Z][a-z0-9]+/.test(key))
39+
.forEach((key) => {
40+
const eventName = key[2].toLowerCase() + key.slice(3);
41+
this.gridInst.on(eventName, this.props[key]);
42+
});
43+
}
44+
45+
getGridInstance() {
46+
return this.gridInst;
47+
}
48+
49+
getRootElement() {
50+
return this.rootEl.current;
51+
}
52+
53+
shouldComponentUpdate(nextProps) {
54+
const reactiveProps = this.props.reactiveProps || Object.keys(reactivePropSetterMap);
55+
56+
reactiveProps.forEach((propName) => {
57+
const currentValue = this.props[propName];
58+
const nextValue = nextProps[propName];
59+
60+
if (currentValue !== nextValue) {
61+
const setterName = reactivePropSetterMap[propName];
62+
this.gridInst[setterName](nextValue);
63+
}
64+
});
65+
66+
return false;
67+
}
68+
69+
render() {
70+
return <div ref={this.rootEl} />;
71+
}
72+
}

‎src/wrapper.js‎

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

‎stories/dummy-data.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
export const data = [
2+
{
3+
id: 549731,
4+
name: 'Beautiful Lies',
5+
artist: 'Birdy',
6+
release: '2016.03.26',
7+
type: 'Deluxe',
8+
genre: 'Pop'
9+
},
10+
{
11+
id: 436461,
12+
name: 'X',
13+
artist: 'Ed Sheeran',
14+
release: '2014.06.24',
15+
type: 'Deluxe',
16+
genre: 'Pop'
17+
},
18+
{
19+
id: 295651,
20+
name: 'Moves Like Jagger',
21+
release: '2011.08.08',
22+
artist: 'Maroon5',
23+
type: 'Single',
24+
genre: 'Pop,Rock'
25+
},
26+
{
27+
id: 541713,
28+
name: 'A Head Full Of Dreams',
29+
artist: 'Coldplay',
30+
release: '2015.12.04',
31+
type: 'Deluxe',
32+
genre: 'Rock'
33+
},
34+
{
35+
id: 265289,
36+
name: '21',
37+
artist: 'Adele',
38+
release: '2011.01.21',
39+
type: 'Deluxe',
40+
genre: 'Pop,R&B'
41+
},
42+
{
43+
id: 555871,
44+
name: 'Warm On A Cold Night',
45+
artist: 'HONNE',
46+
release: '2016.07.22',
47+
type: 'EP',
48+
genre: 'R&B,Electronic'
49+
},
50+
{
51+
id: 550571,
52+
name: 'Take Me To The Alley',
53+
artist: 'Gregory Porter',
54+
release: '2016.09.02',
55+
type: 'Deluxe',
56+
genre: 'Jazz'
57+
},
58+
{
59+
id: 544128,
60+
name: 'Make Out',
61+
artist: 'LANY',
62+
release: '2015.12.11',
63+
type: 'EP',
64+
genre: 'Electronic'
65+
},
66+
{
67+
id: 366374,
68+
name: 'Get Lucky',
69+
artist: 'Daft Punk',
70+
release: '2013.04.23',
71+
type: 'Single',
72+
genre: 'Pop,Funk'
73+
},
74+
{
75+
id: 8012747,
76+
name: 'Valtari',
77+
artist: 'Sigur Rós',
78+
release: '2012.05.31',
79+
type: 'EP',
80+
genre: 'Rock'
81+
},
82+
{
83+
id: 502792,
84+
name: 'Bush',
85+
artist: 'Snoop Dogg',
86+
release: '2015.05.12',
87+
type: 'EP',
88+
genre: 'Hiphop'
89+
},
90+
{
91+
id: 294574,
92+
name: '4',
93+
artist: 'Beyoncé',
94+
release: '2011.07.26',
95+
type: 'Deluxe',
96+
genre: 'Pop'
97+
}
98+
];

0 commit comments

Comments
 (0)