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 c09bf7c

Browse files
chunming-cAllenFang
authored andcommitted
enhance storybook
* wrapper components with Decorators to set component margin * add sticker github-corners at welcome page * refactor welcome page for storybook * refactor scss code structure * add type.js to animate sub title
1 parent 507e554 commit c09bf7c

File tree

8 files changed

+139
-7
lines changed

8 files changed

+139
-7
lines changed
Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
2-
3-
import { configure } from '@storybook/react';
2+
importReactfrom'react';
3+
import { configure,addDecorator } from '@storybook/react';
44

55
function loadStories() {
66
require('stories');
77
}
88

9+
const styles = {
10+
margin: '15px',
11+
};
12+
13+
const componentDecorator = (story) => (
14+
<div style={styles}>
15+
{ story() }
16+
</div>
17+
);
18+
19+
addDecorator(componentDecorator);
20+
921
configure(loadStories, module);
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import Typed from 'typed.js';
3+
4+
export default class Welcome extends React.Component {
5+
componentDidMount() {
6+
// type.js config
7+
const options = {
8+
strings: ['It\'s a bootstrap table rebuilt for React.js <span class="love-icon">♥</span>'],
9+
typeSpeed: 50,
10+
backSpeed: 50
11+
};
12+
this.typed = new Typed(this.el, options);
13+
}
14+
15+
componentWillUnmount() {
16+
// Make sure to destroy Typed instance on unmounting to prevent memory leaks
17+
this.typed.destroy();
18+
}
19+
20+
render() {
21+
return (
22+
<div>
23+
<div className="welcome">
24+
<h1 className="welcome-title">react-bootstrap-table2</h1>
25+
<span
26+
className="welcome-sub-title"
27+
ref={(el) => { this.el = el; }}
28+
/>
29+
</div>
30+
<a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" className="github-corner" aria-label="View source on Github">
31+
<svg width="80" height="80" viewBox="0 0 250 250" style={{ fill: '#009688', color: '#fff', position: 'absolute', top: '0', border: '0', right: '0' }} aria-hidden="true">
32+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
33+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ transformOrigin: '130px 106px' }} className="octo-arm" />
34+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" />
35+
</svg>
36+
</a>
37+
</div>
38+
);
39+
}
40+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"react-bootstrap-table2": "0.0.1"
2121
},
2222
"devDependencies": {
23-
"@storybook/react": "^3.2.8"
23+
"@storybook/react": "^3.2.8",
24+
"typed.js": "^2.0.5"
2425
}
2526
}
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/* eslint import/no-unresolved: 0 */
22
import React from 'react';
33
import { storiesOf } from '@storybook/react';
4-
import { linkTo } from '@storybook/addon-links';
54

6-
import {Welcome }from '@storybook/react/demo';
7-
import BasicTable from 'examples/basic/index.js';
5+
import Welcome from 'examples/welcome';
6+
import BasicTable from 'examples/basic';
87

98
// css style
109
import 'bootstrap/dist/css/bootstrap.min.css';
1110
import 'stories/stylesheet/storybook.scss';
1211

13-
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
12+
storiesOf('Welcome', module)
13+
.add('react bootstrap table 2 ', () => <Welcome />);
1414

1515
storiesOf('Basic Table', module)
1616
.add('default', () => <BasicTable />);
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
body {
3+
font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
4+
font-weight: 300;
5+
}
6+
7+
// font color
8+
$grey-500: #9E9E9E;
9+
$grey-900: #212121;
10+
$pink-500: #E91E63;
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.github-corner:hover .octo-arm {
2+
animation: octocat-wave 560ms ease-in-out;
3+
}
4+
5+
@keyframes octocat-wave {
6+
0%,
7+
100% {
8+
transform: rotate(0)
9+
}
10+
20%,
11+
60% {
12+
transform: rotate(-25deg)
13+
}
14+
40%,
15+
80% {
16+
transform: rotate(10deg)
17+
}
18+
}
19+
20+
@media (max-width:500px) {
21+
.github-corner:hover .octo-arm {
22+
animation: none
23+
}
24+
.github-corner .octo-arm {
25+
animation: octocat-wave 560ms ease-in-out
26+
}
27+
}
28+
29+
/* Adding cursor blinking animation */
30+
.typed-cursor{
31+
font-size: 30px;
32+
color: $grey-500;
33+
opacity: 1;
34+
animation: typedjsBlink 0.7s infinite;
35+
}
36+
@keyframes typedjsBlink{
37+
50% { opacity: 0.0; }
38+
}
39+
@-webkit-keyframes typedjsBlink{
40+
0% { opacity: 1; }
41+
50% { opacity: 0.0; }
42+
100% { opacity: 1; }
43+
}
44+
.typed-fade-out{
45+
opacity: 0;
46+
transition: opacity .25s;
47+
animation: 0;
48+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
/* customized style for storybook*/
2+
@import "base/base";
3+
@import "base/misc";
4+
5+
@import "welcome/index";
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.welcome {
2+
margin-top: 70px;
3+
text-align: center;
4+
padding: 30px 30px;
5+
6+
&-title {
7+
color: $grey-900;
8+
}
9+
&-sub-title {
10+
font-size: 30px;
11+
color: $grey-500;
12+
}
13+
}
14+
15+
span.love-icon {
16+
color: $pink-500;
17+
}

0 commit comments

Comments
(0)

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