This repository has been archived by the owner on Feb 29, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(storybook): #1039 Implement React Storybook support
- Loading branch information
Dan Mosedale
committed
Aug 10, 2016
1 parent
e4697d7
commit f1e1375
Showing
19 changed files
with
217 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ logs/ | |
| firefox/ | ||
| lib/vendor.bundle.js | ||
| activity-streams-env/ | ||
| !.* | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const {configure} = require("@kadira/storybook"); | ||
|
|
||
| function loadStories() { | ||
| require("../content-test/components/Spotlight.story"); | ||
| require("../content-test/components/ContextMenu.story"); | ||
| // require as many stories as you need. | ||
| } | ||
|
|
||
| configure(loadStories, module); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <link rel="stylesheet" href="main.css" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| "use strict"; | ||
| const {plugins, resolve} = require("../webpack.common"); | ||
|
|
||
| module.exports = storybookBaseConfig => | ||
| Object.assign(storybookBaseConfig, { | ||
| resolve, | ||
| module: { | ||
| loaders: [ | ||
| {test: /\.json$/, loader: "json"}, | ||
| { | ||
| test: /\.jsx?$/, | ||
| exclude: /node_modules/, | ||
| loader: "babel" | ||
| } | ||
| ] | ||
| }, | ||
| devtool: "eval-sourcemap", | ||
| plugins: storybookBaseConfig.plugins.concat(plugins) | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,7 +14,7 @@ | |
| width: $loader-size; | ||
| height: $loader-size; | ||
| display: inline-block; | ||
| background-image: url('img/[email protected]'); | ||
| background-image: url('#{$image-path}[email protected]'); | ||
| background-size: $loader-size $loader-size; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,13 +14,13 @@ | |
| content: ''; | ||
| width: 65px; | ||
| height: 40px; | ||
| background: url('img/[email protected]') no-repeat center center; | ||
| background: url('#{$image-path}[email protected]') no-repeat center center; | ||
| background-size: 65px 40px; | ||
| display: block; | ||
| } | ||
|
|
||
| &:hover::after { | ||
| background-image: url('img/[email protected]'); | ||
| background-image: url('#{$image-path}[email protected]'); | ||
| } | ||
|
|
||
| &.isPlaying::after { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| const React = require("react"); | ||
| const {storiesOf} = require("@kadira/storybook"); | ||
| const ContextMenu = require("components/ContextMenu/ContextMenu"); | ||
|
|
||
| const DEFAULT_OPTIONS = [ | ||
| {label: "Apples", onClick: () => {}}, | ||
| {label: "Oranges", onClick: () => {}}, | ||
| {label: "Grapes", onClick: () => {}} | ||
| ]; | ||
|
|
||
| // This is so we can show the context menu. Note that this is only | ||
| // necessary because ContextMenu has certain implicit dependencies on | ||
| // its container. Fully encapsulated components (hopefully any new | ||
| // new ones!) should be renderable without needing a container! | ||
| const ContextMenuContainer = React.createClass({ | ||
| getInitialState() { | ||
| return {visible: true}; | ||
| }, | ||
| render() { | ||
| const style = { | ||
| position: "relative", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| width: 150, | ||
| height: 60, | ||
| border: "1px dashed #DDD" | ||
| }; | ||
| const buttonStyle = { | ||
| fontSize: 11, | ||
| display: "inline-block" | ||
| }; | ||
| return (<div style={style}> | ||
| <ContextMenu | ||
| options={this.props.options} | ||
| visible={this.state.visible} | ||
| onUpdate={visible => this.setState({visible})} /> | ||
| <button style={buttonStyle} onClick={() => this.setState({visible: !this.state.visible})}>Toggle menu</button> | ||
| </div>); | ||
| } | ||
| }); | ||
|
|
||
| storiesOf("ContextMenu", module) | ||
| .add("default props", () => ( | ||
| <ContextMenuContainer options={DEFAULT_OPTIONS} /> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| const React = require("react"); | ||
| const {SpotlightItem} = require("components/Spotlight/Spotlight"); | ||
| const {storiesOf, action} = require("@kadira/storybook"); | ||
| const {createMockProvider} = require("../test-utils"); | ||
| const {createSite} = require("../faker"); | ||
| const Provider = createMockProvider({dispatch: action("dispatched a redux action")}); | ||
|
|
||
| // XXX should get rid of container here. See comment in ContextMenu.story | ||
| // for details. | ||
| const Container = props => ( | ||
| <Provider> | ||
| <div style={{padding: "20px"}}> | ||
| {props.children} | ||
| </div> | ||
| </Provider> | ||
| ); | ||
|
|
||
| // Note that if a site image is not in the cache, it can take a while | ||
| // (eg 10 seconds) to load, because the image load starts very late, for | ||
| // unclear reasons. Presumably something to do with faker, tippy-top-sites, | ||
| // lorempixel (used by faker for the images), or Spotlight (aka Highlight) | ||
| // itself. | ||
| storiesOf("Highlight", module) | ||
| .add("All valid properties", () => { | ||
| const site = createSite({images: 1}); | ||
| site.bestImage = site.images[0]; | ||
| return (<Container><SpotlightItem {...site} /></Container>); | ||
| }) | ||
| .add("Missing an image", () => { | ||
| const site = createSite({images: 0}); | ||
| return (<Container><SpotlightItem {...site} /></Container>); | ||
| }) | ||
| .add("Missing a favicon_url", () => { | ||
| const site = createSite({images: 1}); | ||
| site.bestImage = site.images[0]; | ||
| site.favicon_url = null; | ||
| site.favicon = null; | ||
| site.favicon_color = null; | ||
| site.favicon_colors = null; | ||
| return (<Container><SpotlightItem {...site} /></Container>); | ||
| }) | ||
| .add("Missing a description", () => { | ||
| const site = createSite({images: 1}); | ||
| site.bestImage = site.images[0]; | ||
| site.description = null; | ||
| return (<Container><SpotlightItem {...site} /></Container>); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.