From c09bf7c2f12ef1a9cac9b2edb9aae1a80f1cc1e3 Mon Sep 17 00:00:00 2001 From: "ChunMing, Chen" Date: Mon, 28 Aug 2017 08:52:49 +0800 Subject: [PATCH] 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 --- .../.storybook/config.js | 16 ++++++- .../examples/welcome.js | 40 ++++++++++++++++ .../package.json | 3 +- .../stories/index.js | 8 ++-- .../stories/stylesheet/base/_base.scss | 10 ++++ .../stories/stylesheet/base/_misc.scss | 48 +++++++++++++++++++ .../stories/stylesheet/storybook.scss | 4 ++ .../stories/stylesheet/welcome/_index.scss | 17 +++++++ 8 files changed, 139 insertions(+), 7 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/welcome.js create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/base/_misc.scss create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss diff --git a/packages/react-bootstrap-table2-example/.storybook/config.js b/packages/react-bootstrap-table2-example/.storybook/config.js index 6f68803..be93e84 100644 --- a/packages/react-bootstrap-table2-example/.storybook/config.js +++ b/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) => ( +
+ { story() } +
+); + +addDecorator(componentDecorator); + configure(loadStories, module); diff --git a/packages/react-bootstrap-table2-example/examples/welcome.js b/packages/react-bootstrap-table2-example/examples/welcome.js new file mode 100644 index 0000000..7438298 --- /dev/null +++ b/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 ♥'], + 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 ( +
+
+

react-bootstrap-table2

+ { this.el = el; }} + /> +
+ + + +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json index 15ea5f6..4e8bb00 100644 --- a/packages/react-bootstrap-table2-example/package.json +++ b/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" } } diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 97fb566..bba557e 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/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', () => ); +storiesOf('Welcome', module) + .add('react bootstrap table 2 ', () => ); storiesOf('Basic Table', module) .add('default', () => ); diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss new file mode 100644 index 0000000..786a4b1 --- /dev/null +++ b/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; diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base/_misc.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base/_misc.scss new file mode 100644 index 0000000..a9c50f1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss index c5a965e..5b4fa49 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss +++ b/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"; diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss new file mode 100644 index 0000000..00d6e64 --- /dev/null +++ b/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; +}