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

packages/react-bootstrap-table2-example/.storybook/config.js

@@ -1,9 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
-import { configure } from '@storybook/react';
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
 
 function loadStories() {
   require('stories');
 }
 
+const styles = {
+  margin: '15px',
+};
+
+const componentDecorator = (story) => (
+  <div style={styles}>
+    { story() }
+  </div>
+);
+
+addDecorator(componentDecorator);
+
 configure(loadStories, module);

packages/react-bootstrap-table2-example/examples/welcome.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Typed from 'typed.js';
+
+export default class Welcome extends React.Component {
+  componentDidMount() {
+    // type.js config
+    const options = {
+      strings: ['It\'s a bootstrap table rebuilt for React.js <span class="love-icon">♥</span>'],
+      typeSpeed: 50,
+      backSpeed: 50
+    };
+    this.typed = new Typed(this.el, options);
+  }
+
+  componentWillUnmount() {
+    // Make sure to destroy Typed instance on unmounting to prevent memory leaks
+    this.typed.destroy();
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="welcome">
+          <h1 className="welcome-title">react-bootstrap-table2</h1>
+          <span
+            className="welcome-sub-title"
+            ref={(el) => { this.el = el; }}
+          />
+        </div>
+        <a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" className="github-corner" aria-label="View source on Github">
+          <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">
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+            <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" />
+            <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" />
+          </svg>
+        </a>
+      </div>
+    );
+  }
+}

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

@@ -20,6 +20,7 @@
     "react-bootstrap-table2": "0.0.1"
   },
   "devDependencies": {
-    "@storybook/react": "^3.2.8"
+    "@storybook/react": "^3.2.8",
+    "typed.js": "^2.0.5"
   }
 }

packages/react-bootstrap-table2-example/stories/index.js

@@ -1,16 +1,16 @@
 /* eslint import/no-unresolved: 0 */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { linkTo } from '@storybook/addon-links';
 
-import { Welcome } from '@storybook/react/demo';
-import BasicTable from 'examples/basic/index.js';
+import Welcome from 'examples/welcome';
+import BasicTable from 'examples/basic';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'stories/stylesheet/storybook.scss';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .add('react bootstrap table 2 ', () => <Welcome />);
 
 storiesOf('Basic Table', module)
   .add('default', () => <BasicTable />);

packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss

@@ -0,0 +1,10 @@
+
+body {
+  font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-weight: 300;
+}
+
+// font color
+$grey-500: #9E9E9E;
+$grey-900: #212121;
+$pink-500: #E91E63;

packages/react-bootstrap-table2-example/stories/stylesheet/base/_misc.scss

@@ -0,0 +1,48 @@
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+
+/* Adding cursor blinking animation */
+.typed-cursor{
+  font-size: 30px;
+  color: $grey-500;
+  opacity: 1;
+  animation: typedjsBlink 0.7s infinite;
+}
+@keyframes typedjsBlink{
+  50% { opacity: 0.0; }
+}
+@-webkit-keyframes typedjsBlink{
+  0% { opacity: 1; }
+  50% { opacity: 0.0; }
+  100% { opacity: 1; }
+}
+.typed-fade-out{
+  opacity: 0;
+  transition: opacity .25s;
+  animation: 0;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -1 +1,5 @@
 /* customized style for storybook*/
+@import "base/base";
+@import "base/misc";
+
+@import "welcome/index";

packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss

@@ -0,0 +1,17 @@
+.welcome {
+  margin-top: 70px;
+  text-align: center;
+  padding: 30px 30px;
+
+  &-title {
+    color: $grey-900;
+  }
+  &-sub-title {
+    font-size: 30px;
+    color: $grey-500;
+  }
+}
+
+span.love-icon {
+  color: $pink-500;
+}