diff --git a/.gatsby-context.js b/.gatsby-context.js new file mode 100644 index 000000000000..9922bb09fa9c --- /dev/null +++ b/.gatsby-context.js @@ -0,0 +1,15 @@ +'use strict'; + +/* weak */ +// This file is auto-written and used by Gatsby to require +// files from your pages directory. +module.exports = function (callback) { + var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line + if (module.hot) { + module.hot.accept(context.id, function () { + context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line + return callback(context); + }); + } + return callback(context); +}; \ No newline at end of file diff --git a/.gitignore b/.gitignore index 1b6241f1f98f..d5b66fb82978 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ dist build packages/examples/automated-* yarn.lock +public diff --git a/.storybook/addons.js b/.storybook/addons.js index f782d05c1b5e..c09a470411dc 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,3 +1 @@ -import { register } from './notes_addon'; -register(); require('@kadira/storybook/addons'); diff --git a/.storybook/config.js b/.storybook/config.js index 7bffa1dfcee3..344badfc98e6 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,9 +1,10 @@ import { configure } from '@kadira/storybook'; + import 'bootstrap/dist/css/bootstrap.css'; -import '../src/index.css'; +import '../css/main.css'; function loadStories() { - require('../src/stories'); + require('../stories') } configure(loadStories, module); diff --git a/.storybook/notes_addon.js b/.storybook/notes_addon.js deleted file mode 100644 index 9f2329163082..000000000000 --- a/.storybook/notes_addon.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import addons from '@kadira/storybook-addons'; - -const styles = { - notesPanel: { - margin: 10, - fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif', - fontSize: 14, - color: '#444', - width: '100%', - overflow: 'auto', - } -}; - -export class WithNote extends React.Component { - render() { - const { children, note } = this.props; - // This is to make sure, we'll always call this at the end of the eventloop. - // So we know that, panel will get cleared, before we render the note. - setTimeout(() => { - addons.getChannel().emit('kadira/notes/add_note', note); - }, 0); - return children; - } -} - -class Notes extends React.Component { - constructor(...args) { - super(...args); - this.state = {text: ''}; - this.onAddNote = this.onAddNote.bind(this); - } - - onAddNote(text) { - this.setState({text}); - } - - componentDidMount() { - const { channel, api } = this.props; - channel.on('kadira/notes/add_note', this.onAddNote); - - this.stopListeningOnStory = api.onStory(() => { - this.setState({text: ''}); - }); - } - - componentWillUnmount() { - if(this.stopListeningOnStory) { - this.stopListeningOnStory(); - } - - this.unmounted = true; - const { channel, api } = this.props; - channel.removeListener('kadira/notes/add_note', this.onAddNote); - } - - render() { - const { text } = this.state; - const textAfterFormatted = text? text.trim().replace(/\n/g, '
') : ""; - - return ( -
-
-
- ); - } -} - -export function register() { - addons.register('kadira/notes', (api) => { - addons.addPanel('kadira/notes/panel', { - title: 'Notes', - render: () => ( - - ), - }) - }) -} diff --git a/404.html b/404.html deleted file mode 100644 index 7f83bf6ec9e7..000000000000 --- a/404.html +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/LICENSE b/LICENSE deleted file mode 100644 index d48957f60ca9..000000000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017 Storybooks - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/app.json b/app.json deleted file mode 100644 index bc1535ec1749..000000000000 --- a/app.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "storybooks.js.org", - "scripts": { - }, - "env": { - }, - "formation": { - "web": { - "quantity": 1 - } - }, - "addons": [ - - ], - "buildpacks": [ - { - "url": "https://github.com/mars/create-react-app-buildpack.git" - } - ] -} diff --git a/components/Breakpoint.js b/components/Breakpoint.js new file mode 100644 index 000000000000..f7dbfe97410f --- /dev/null +++ b/components/Breakpoint.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import './breakpoints.css' + +class Breakpoint extends Component { + render () { + const { mobile, children } = this.props + + if (mobile) { + return ( +
+ {children} +
+ ) + } + + return ( +
+ {children} +
+ ) + } +} + +Breakpoint.propTypes = { + children: PropTypes.array, + mobile: PropTypes.bool, +} + +export default Breakpoint diff --git a/src/components/Docs/Container/index.js b/components/Docs/Container/index.js similarity index 77% rename from src/components/Docs/Container/index.js rename to components/Docs/Container/index.js index f368b26f8571..8ea86d16eea3 100644 --- a/src/components/Docs/Container/index.js +++ b/components/Docs/Container/index.js @@ -6,17 +6,6 @@ import Content from '../Content'; import './style.css'; class Container extends React.Component { - renderTopNav(cat) { - const { selectedCatId } = this.props; - const path = `/docs/${cat.id}`; - - if (selectedCatId === cat.id) { - return
  • {cat.title}
    • ; - } - - return
  • {cat.title}
    • ; - } - render() { const { categories, @@ -29,18 +18,10 @@ class Container extends React.Component { const gitHubRepoUrl = 'https://github.com/storybooks/storybooks.github.io'; const docPath = `${selectedCatId}/${selectedSectionId}/${selectedItemId}`; - const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/src/docs/${docPath}.js`; + const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/pages/docs/${docPath}/index.md`; return (
    -
    -
    -
      - {categories.map(this.renderTopNav.bind(this))} -
    -
    -
    -
    - -
    ); diff --git a/src/components/Homepage/Footer/style.css b/components/Footer/style.css similarity index 100% rename from src/components/Homepage/Footer/style.css rename to components/Footer/style.css diff --git a/src/components/Homepage/Header/index.js b/components/Header/index.js similarity index 88% rename from src/components/Homepage/Header/index.js rename to components/Header/index.js index 81cf1a96a7a2..c8c27f6d98c4 100644 --- a/src/components/Homepage/Header/index.js +++ b/components/Header/index.js @@ -2,11 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import './style.css'; -import storybookLogo from '../../../design/homepage/storybook-logo.png'; +import storybookLogo from '../../design/homepage/storybook-logo.png'; const sections = [ { id: 'home', caption: 'Home', href: '/' }, - { id: 'docs', caption: 'Docs', href: '/docs' }, + { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' }, ]; class Header extends React.Component { diff --git a/src/components/Homepage/Header/style.css b/components/Header/style.css similarity index 100% rename from src/components/Homepage/Header/style.css rename to components/Header/style.css diff --git a/src/lib/highlight.js b/components/Highlight.js similarity index 100% rename from src/lib/highlight.js rename to components/Highlight.js diff --git a/src/components/Homepage/Demo/images/demo.gif b/components/Homepage/Demo/images/demo.gif similarity index 100% rename from src/components/Homepage/Demo/images/demo.gif rename to components/Homepage/Demo/images/demo.gif diff --git a/src/components/Homepage/Demo/index.js b/components/Homepage/Demo/index.js similarity index 100% rename from src/components/Homepage/Demo/index.js rename to components/Homepage/Demo/index.js diff --git a/src/components/Homepage/Demo/style.css b/components/Homepage/Demo/style.css similarity index 100% rename from src/components/Homepage/Demo/style.css rename to components/Homepage/Demo/style.css diff --git a/src/components/Homepage/Featured/images/airbnb.png b/components/Homepage/Featured/images/airbnb.png similarity index 100% rename from src/components/Homepage/Featured/images/airbnb.png rename to components/Homepage/Featured/images/airbnb.png diff --git a/src/components/Homepage/Featured/images/rb.png b/components/Homepage/Featured/images/rb.png similarity index 100% rename from src/components/Homepage/Featured/images/rb.png rename to components/Homepage/Featured/images/rb.png diff --git a/src/components/Homepage/Featured/images/rnw.png b/components/Homepage/Featured/images/rnw.png similarity index 100% rename from src/components/Homepage/Featured/images/rnw.png rename to components/Homepage/Featured/images/rnw.png diff --git a/src/components/Homepage/Featured/index.js b/components/Homepage/Featured/index.js similarity index 100% rename from src/components/Homepage/Featured/index.js rename to components/Homepage/Featured/index.js diff --git a/src/components/Homepage/Featured/style.css b/components/Homepage/Featured/style.css similarity index 100% rename from src/components/Homepage/Featured/style.css rename to components/Homepage/Featured/style.css diff --git a/src/components/Homepage/Heading/index.js b/components/Homepage/Heading/index.js similarity index 100% rename from src/components/Homepage/Heading/index.js rename to components/Homepage/Heading/index.js diff --git a/src/components/Homepage/Heading/style.css b/components/Homepage/Heading/style.css similarity index 100% rename from src/components/Homepage/Heading/style.css rename to components/Homepage/Heading/style.css diff --git a/src/components/Homepage/MainLinks/images/docs.png b/components/Homepage/MainLinks/images/docs.png similarity index 100% rename from src/components/Homepage/MainLinks/images/docs.png rename to components/Homepage/MainLinks/images/docs.png diff --git a/src/components/Homepage/MainLinks/index.js b/components/Homepage/MainLinks/index.js similarity index 100% rename from src/components/Homepage/MainLinks/index.js rename to components/Homepage/MainLinks/index.js diff --git a/src/components/Homepage/MainLinks/style.css b/components/Homepage/MainLinks/style.css similarity index 100% rename from src/components/Homepage/MainLinks/style.css rename to components/Homepage/MainLinks/style.css diff --git a/src/components/Homepage/Platforms/index.js b/components/Homepage/Platforms/index.js similarity index 100% rename from src/components/Homepage/Platforms/index.js rename to components/Homepage/Platforms/index.js diff --git a/src/components/Homepage/Platforms/style.css b/components/Homepage/Platforms/style.css similarity index 100% rename from src/components/Homepage/Platforms/style.css rename to components/Homepage/Platforms/style.css diff --git a/src/components/Homepage/index.js b/components/Homepage/index.js similarity index 95% rename from src/components/Homepage/index.js rename to components/Homepage/index.js index 59cfc786e2cb..5d933982a7d8 100644 --- a/src/components/Homepage/index.js +++ b/components/Homepage/index.js @@ -2,13 +2,13 @@ import PropTypes from 'prop-types'; import React from 'react'; import Helmet from 'react-helmet'; import './style.css'; -import Header from './Header'; +import Header from '../Header'; import Heading from './Heading'; import Demo from './Demo'; import Platforms from './Platforms'; import MainLinks from './MainLinks'; import Featured from './Featured'; -import Footer from './Footer'; +import Footer from '../Footer'; const featuredStorybooks = [ { diff --git a/src/components/Homepage/style.css b/components/Homepage/style.css similarity index 100% rename from src/components/Homepage/style.css rename to components/Homepage/style.css diff --git a/components/breakpoints.css b/components/breakpoints.css new file mode 100644 index 000000000000..d447679be867 --- /dev/null +++ b/components/breakpoints.css @@ -0,0 +1,16 @@ +@media only screen and (min-width: 700px) { + .breakpoint-min-width-700 { + display: block; + } + .breakpoint-max-width-700 { + display: none; + } +} +@media only screen and (max-width: 700px) { + .breakpoint-min-width-700 { + display: none; + } + .breakpoint-max-width-700 { + display: block; + } +} diff --git a/config.toml b/config.toml new file mode 100644 index 000000000000..aa159d1b5736 --- /dev/null +++ b/config.toml @@ -0,0 +1,36 @@ +siteTitle = "Storybook" +baseColor = "#e64074" +linkPrefix = "/" + +[docSections] +basics = [ + "/docs/react-storybook/basics/introduction/", + "/docs/react-storybook/basics/quick-start-guide/", + "/docs/react-storybook/basics/slow-start-guide/", + "/docs/react-storybook/basics/writing-stories/", + "/docs/react-storybook/basics/exporting-storybook/", + "/docs/react-storybook/basics/faq/", +] +configurations = [ + "/docs/react-storybook/configurations/default-config/", + "/docs/react-storybook/configurations/custom-webpack-config/", + "/docs/react-storybook/configurations/custom-babel-config/", + "/docs/react-storybook/configurations/add-custom-head-tags/", + "/docs/react-storybook/configurations/serving-static-files/", + "/docs/react-storybook/configurations/env-vars/", + "/docs/react-storybook/configurations/cli-options/", +] +testing = [ + "/docs/react-storybook/testing/react-ui-testing/", + "/docs/react-storybook/testing/structural-testing/", + "/docs/react-storybook/testing/interaction-testing/", + "/docs/react-storybook/testing/css-style-testing/", + "/docs/react-storybook/testing/manual-testing/", +] +addons = [ + "/docs/react-storybook/addons/introduction/", + "/docs/react-storybook/addons/using-addons/", + "/docs/react-storybook/addons/addon-gallery/", + "/docs/react-storybook/addons/writing-addons/", + "/docs/react-storybook/addons/api/", +] diff --git a/css/github.css b/css/github.css new file mode 100644 index 000000000000..9cec1ddd4822 --- /dev/null +++ b/css/github.css @@ -0,0 +1,91 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ +.hljs-comment, +.hljs-quote { + color: #998; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #008080; +} + +.hljs-string, +.hljs-doctag { + color: #d14; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #900; + font-weight: bold; +} + +.hljs-subst { + font-weight: normal; +} + +.hljs-type, +.hljs-class .hljs-title { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-name, +.hljs-attribute { + color: #000080; + font-weight: normal; +} + +.hljs-regexp, +.hljs-link { + color: #009926; +} + +.hljs-symbol, +.hljs-bullet { + color: #990073; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #0086b3; +} + +.hljs-meta { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + diff --git a/css/main.css b/css/main.css new file mode 100644 index 000000000000..32714000f734 --- /dev/null +++ b/css/main.css @@ -0,0 +1,21 @@ +@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800'; + +body, div, p, ul, li, a { + font-family: 'Open Sans', sans-serif; + font-size: 14px; +} + +a, +a:visited, +a:hover, +a:active, +a:focus { + text-decoration: none; + color: #000; +} + +a:hover { + opacity: 0.7; +} + +.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}} diff --git a/src/design/docs/docs-container.png b/design/docs/docs-container.png similarity index 100% rename from src/design/docs/docs-container.png rename to design/docs/docs-container.png diff --git a/src/design/docs/docs-content.png b/design/docs/docs-content.png similarity index 100% rename from src/design/docs/docs-content.png rename to design/docs/docs-content.png diff --git a/src/design/docs/docs-nav.png b/design/docs/docs-nav.png similarity index 100% rename from src/design/docs/docs-nav.png rename to design/docs/docs-nav.png diff --git a/src/design/docs/docs.png b/design/docs/docs.png similarity index 100% rename from src/design/docs/docs.png rename to design/docs/docs.png diff --git a/src/design/homepage/built-for.png b/design/homepage/built-for.png similarity index 100% rename from src/design/homepage/built-for.png rename to design/homepage/built-for.png diff --git a/src/design/homepage/demo.png b/design/homepage/demo.png similarity index 100% rename from src/design/homepage/demo.png rename to design/homepage/demo.png diff --git a/src/design/homepage/featured-storybooks.png b/design/homepage/featured-storybooks.png similarity index 100% rename from src/design/homepage/featured-storybooks.png rename to design/homepage/featured-storybooks.png diff --git a/src/design/homepage/footer.png b/design/homepage/footer.png similarity index 100% rename from src/design/homepage/footer.png rename to design/homepage/footer.png diff --git a/src/design/homepage/header.png b/design/homepage/header.png similarity index 100% rename from src/design/homepage/header.png rename to design/homepage/header.png diff --git a/src/design/homepage/heading.png b/design/homepage/heading.png similarity index 100% rename from src/design/homepage/heading.png rename to design/homepage/heading.png diff --git a/src/design/homepage/homepage.png b/design/homepage/homepage.png similarity index 100% rename from src/design/homepage/homepage.png rename to design/homepage/homepage.png diff --git a/src/design/homepage/main-links.png b/design/homepage/main-links.png similarity index 100% rename from src/design/homepage/main-links.png rename to design/homepage/main-links.png diff --git a/src/design/homepage/screenshot.png b/design/homepage/screenshot.png similarity index 100% rename from src/design/homepage/screenshot.png rename to design/homepage/screenshot.png diff --git a/src/design/homepage/storybook-icon-sqaure.png b/design/homepage/storybook-icon-sqaure.png similarity index 100% rename from src/design/homepage/storybook-icon-sqaure.png rename to design/homepage/storybook-icon-sqaure.png diff --git a/src/design/homepage/storybook-icon.png b/design/homepage/storybook-icon.png similarity index 100% rename from src/design/homepage/storybook-icon.png rename to design/homepage/storybook-icon.png diff --git a/src/design/homepage/storybook-logo.png b/design/homepage/storybook-logo.png similarity index 100% rename from src/design/homepage/storybook-logo.png rename to design/homepage/storybook-logo.png diff --git a/public/favicon.ico b/favicon.ico similarity index 100% rename from public/favicon.ico rename to favicon.ico diff --git a/html.js b/html.js new file mode 100644 index 000000000000..af35d5fc6925 --- /dev/null +++ b/html.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import DocumentTitle from 'react-document-title' + +import { prefixLink } from 'gatsby-helpers' +import typography from './utils/typography' +import { colors } from 'utils/colors' +import favicon from './design/homepage/storybook-icon.png' + +const BUILD_TIME = new Date().getTime() + +class HTML extends Component { + render () { + const title = DocumentTitle.rewind() + + let css + if (process.env.NODE_ENV === 'production') { + css = -
    - - - diff --git a/src/containers/Docs.js b/src/containers/Docs.js deleted file mode 100644 index abed4004ed3e..000000000000 --- a/src/containers/Docs.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import Docs from '../components/Docs'; -import { - getCategories, - getNavigationData, - getItem, - getFirstItem, - getFirstItemOfSection, -} from '../docs'; - -class DocsContainer extends React.Component { - render() { - const { catId, sectionId, itemId } = this.props.params; - - let selectedItem; - const selectedCatId = catId || getCategories()[0].id; - - if (!sectionId) { - selectedItem = getFirstItem(selectedCatId); - } else if (!itemId) { - selectedItem = getFirstItemOfSection(selectedCatId, sectionId); - } else { - selectedItem = getItem(selectedCatId, sectionId, itemId); - } - - const selectedSectionId = sectionId || 'basics'; - const selectedItemId = selectedItem.id; - - const props = { - categories: getCategories(), - selectedCatId, - sections: getNavigationData(selectedCatId), - selectedItem, - selectedSectionId, - selectedItemId, - }; - - return ; - } -} - -export default DocsContainer; diff --git a/src/docs/index.js b/src/docs/index.js deleted file mode 100644 index 89c695c3ceb6..000000000000 --- a/src/docs/index.js +++ /dev/null @@ -1,62 +0,0 @@ -const data = { - 'react-storybook': { - title: 'React Storybook', - sections: require('./react-storybook').default, - }, -}; - -export function getCategories() { - const catIds = Object.keys(data); - const categories = []; - - catIds.forEach(catId => { - categories.push({ - id: catId, - title: data[catId].title, - }); - }); - - return categories; -} - -export function getNavigationData(catId) { - if (!catId) { - catId = getCategories[0].id; - } - - return data[catId].sections; -} - -export function getItem(catId, sectionId, itemId) { - if (!catId) { - catId = getCategories[0].id; - } - - const section = data[catId].sections.find(section => section.id === sectionId); - if (!section) return null; - - const item = section.items.find(item => item.id === itemId); - return item; -} - -export function getFirstItemOfSection(catId, sectionId) { - if (!catId) { - catId = getCategories[0].id; - } - - const section = data[catId].sections.find(section => section.id === sectionId); - if (!section) return null; - - return section.items[0]; -} - -export function getFirstItem(catId) { - if (!catId) { - catId = getCategories[0].id; - } - - const sections = data[catId].sections || []; - if (sections.length === 0) return null; - - return sections[0].items[0]; -} diff --git a/src/docs/react-storybook/addons/addon-gallery.js b/src/docs/react-storybook/addons/addon-gallery.js deleted file mode 100644 index 63d2168ddb14..000000000000 --- a/src/docs/react-storybook/addons/addon-gallery.js +++ /dev/null @@ -1,78 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'addon-gallery', - title: 'Addon Gallery', - content: stripIndent` - This is a list of available addons for Storybook. - - ## Built-In Addons. - - These addons ship with Storybook by default. You can use them right away. - - ### [Actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) - - With actions, you can inspect events related to your components. This is pretty neat when you are manually testing your components. - - Also, you can think of this as a way to document events in your components. - - ## Third Party Addons - - You need to install these addons directly from NPM in order to use them. - - ### [Host](https://github.com/philcockfield/storybook-host) - - A [decorator](/docs/react-storybook/addons/introduction) with - powerful display options for hosting, sizing and framing your components. - - ### [Specs](https://github.com/mthuret/storybook-addon-specifications) - - This is a very special addon where it'll allow you to write test specs directly inside your stories. - You can even run these tests inside a CI box. - - ### [Knobs](https://github.com/storybooks/storybook/tree/master/packages/addon-knobs) - - Knobs allow you to edit React props dynamically using the Storybook UI. - You can also use Knobs as dynamic variables inside your stories. - - ### [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes) - - With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team. - - ### [Info](https://github.com/storybooks/storybook/tree/master/packages/addon-info) - - If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer. - - ### [Options](https://github.com/storybooks/storybook/tree/master/packages/addon-options) - - The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default. - - ### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters) - - With this addon, you can showcase multiple components (or varying component states) within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness. - - ### [Backgrounds](https://github.com/NewSpring/react-storybook-addon-backgrounds) - - With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides. - - ### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui) - - Wraps your story into MuiThemeProvider. It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file - - ### [README](https://github.com/tuchk4/storybook-readme) - - With this addon, you can add docs in markdown format for each story. It very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook. - - ### [i18n tools](https://github.com/joscha/storybook-addon-i18n-tools) - - With this addon, you can test your storybooks with a different text-direction. It is very useful if you are working on components that have to work both in LTR as well as in RTL languages. - - ### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations) - - Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once. - - ### [StoryRouter](https://github.com/gvaldambrini/storybook-router) - - A [decorator](/docs/react-storybook/addons/introduction) that allows you to integrate react-router v.4 components in your stories. - `, -}; diff --git a/src/docs/react-storybook/addons/api.js b/src/docs/react-storybook/addons/api.js deleted file mode 100644 index 42efb2a492f9..000000000000 --- a/src/docs/react-storybook/addons/api.js +++ /dev/null @@ -1,137 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'api', - title: 'API', - content: stripIndent` - ## Core Addon API - - This is the core addon API. This is how to get the addon API: - - ~~~js - import addonAPI from '@kadira/storybook-addons'; - ~~~ - - Have a look at the API methods for more details: - - ### addonAPI.getChannel() - - Get an instance to the channel where you can communicate with the manager and the preview. You can find this in both the addon register code and in your addonā€™s wrapper component (where used inside a story). - - It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API. So, you can use it to emit events and listen for events. - - ### addonAPI.register() - - This method allows you to register an addon and get the storybook API. You can do this only in the Manager App. - See how we can use this: - - ~~~js - // Register the addon with a unique name. - addonAPI.register('kadira/notes', (storybookAPI) => { - - }); - ~~~ - - Now you'll get an instance to our StorybookAPI. See the [api docs](/docs/react-storybook/addons/api#storybook-api) for Storybook API regarding using that. - - ### addonAPI.addPanel() - - This method allows you to add a panel to Storybook. (Storybook's Action Logger is a panel). You can do this only in the Manager App. - See how you can use this method: - - ~~~js - const MyPanel = () => ( -
    - This is a panel. -
    - ); - - // give a unique name for the panel - addonAPI.addPanel('kadira/notes/panel', { - title: 'Notes', - render: () => ( - - ), - }); - ~~~ - - As you can see, you can set any React Component as the panel. Currently, it's just a text. But you can do anything you want. - - You also pass the channel and the Storybook API into that. See: - - ~~~js - addonAPI.register('kadira/notes', (storybookAPI) => { - // Also need to set a unique name to the panel. - addonAPI.addPanel('kadira/notes/panel', { - title: 'Notes', - render: () => ( - - ), - }) - }) - ~~~ - - ## Storybook API - - Storybook API allows you to access different functionalities of Storybook UI. You can move an instance to the Storybook API when you register an addon. - - Let's have a look at API methods. - - ### storybookAPI.selectStory() - - With this method, you can select a story via an API. This method accepts two parameters. - - 1. story kind name - 2. story name (optional) - - Let's say you've got a story like this: - - ~~~js - storiesOf('Button', module) - .add('with text', () => ( - - )); - ~~~ - - This is how you can select the above story: - - ~~~js - storybookAPI.selectStory('Button', 'with text'); - ~~~ - - ### storybookAPI.setQueryParams() - - This method allows you to set query string parameters. You can use that as temporary storage for addons. Here's how you set query params. - - ~~~js - storybookAPI.setQueryParams({ - abc: 'this is abc', - bbc: 'this is bbc', - }); - ~~~ - - > If you need to remove a query param, use \`null\` for that. For an example, let's say we need to remove bbc query param. This is how we do it: - - ~~~js - storybookAPI.setQueryParams({ - bbc: null, - }); - ~~~ - - ### storybookAPI.getQueryParam() - - This method allows you to get a query param set by above API \`setQueryParams\`. For example, let's say we need to get the bbc query param. Then this how we do it: - - ~~~js - storybookAPI.getQueryParam('bbc'); - ~~~ - - ### storybookAPI.onStory(fn) - - This method allows you to register a handler function which will be called whenever the user navigates between stories. - - ~~~js - storybookAPI.onStory((kind, story) => console.log(kind, story)); - ~~~ - `, -}; diff --git a/src/docs/react-storybook/addons/introduction.js b/src/docs/react-storybook/addons/introduction.js deleted file mode 100644 index 2337017f4955..000000000000 --- a/src/docs/react-storybook/addons/introduction.js +++ /dev/null @@ -1,111 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - addonActionsDemo: require('./static/addon-actions-demo.gif'), -}; - -export default { - id: 'introduction', - title: 'Intro to Addons', - content: stripIndent` - By default, Storybook comes with a way to list stories and visualize them. Addons implement extra features for Storybooks to make them more useful. - - Basically, there are two types of addons. (Decorators and Native Addons) - - ## 1. Decorators - - These are wrapper components or Storybook decorators that wrap a story. - - ### Wrapper Components - - For example, let's say we want to center a story rendered on the screen. For that, we can use a wrapper component like this: - - ~~~js - const Center = ({ children }) => ( -
    - { children } -
    - ); - ~~~ - - Then we can use it when writing stories. - - ~~~js - storiesOf('Button', module) - .add('with text', () => ( -
    - -
    - )); - ~~~ - - ### Storybook Decorators - - You can also expose this functionality as a Storybook decorator and use it like this. - - ~~~js - const CenterDecorator = (story) => ( -
    - {story()} -
    - ); - - storiesOf('Button', module) - .addDecorator(CenterDecorator) - .add('with text', () => ( - - )) - .add('with some emojies', () => ( - - )); - ~~~ - - You can also add a decorator globally for all stories like this: - - ~~~js - import { - storiesOf, action, addDecorator - } from '@kadira/storybook'; - - const CenterDecorator = (story) => ( -
    - {story()} -
    - ); - addDecorator(CenterDecorator); - - storiesOf('Welcome', module) - .add('to Storybook', () => ( - - )); - - storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with some emojies', () => ( - - )); - ~~~ - - > You can call \`addDecorator()\` inside the story definition file as shown above. But adding it to the Storybook config file is a much better option. - - ## 2. Native Addons - - Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories. - - For example, [storybook-actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) is such an addon. - - ![Demo of Storybook Addon Actions](${images.addonActionsDemo}) - - > This addon ships with Storybook by default. [Check here](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) for more info. - - It will allow you to inspect the parameters of any event of your components. - - See the following links to learn more about native addons: - - * [Using addons](/docs/react-storybook/addons/using-addons) - * [Addon gallery](/docs/react-storybook/addons/addon-gallery) - * [Write your own addon](/docs/react-storybook/addons/writing-addons) - `, -}; diff --git a/src/docs/react-storybook/addons/using-addons.js b/src/docs/react-storybook/addons/using-addons.js deleted file mode 100644 index 2842c6d0c40f..000000000000 --- a/src/docs/react-storybook/addons/using-addons.js +++ /dev/null @@ -1,71 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - storiesWithoutNotes: require('./static/stories-without-notes.png'), - storiesWithNotes: require('./static/stories-with-notes.png'), -}; - -export default { - id: 'using-addons', - title: 'Using Addons', - content: stripIndent` - By default, Storybook comes with two addons, which are [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But you can use any third party addons distributed via NPM. - - Here's how to do it. - - Now we are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories. - - First, you need to create a file called \`addons.js\` inside the storybook config directory and add the following content: - - ~~~js - import '@kadira/storybook/addons'; - ~~~ - - This will load our default addons. - - Then install the notes addon with: - - ~~~sh - npm i --save '@kadira/storybook-addon-notes'; - ~~~ - - - After that, add it to the addons.js like this: - - ~~~js - import '@kadira/storybook/addons'; - import '@kadira/storybook-addon-notes/register'; - ~~~ - - - Then you'll be able to see those notes when you are viewing the story. - - ![Stories without notes](${images.storiesWithoutNotes}) - - Now when you are writing a story it like this and add some notes: - - ~~~js - import React from 'react'; - import { storiesOf, action, linkTo } from '@kadira/storybook'; - import Button from './Button'; - import { WithNotes } from '@kadira/storybook-addon-notes'; - - storiesOf('Button', module) - .add('with some emoji', () => ( - - - - )); - ~~~ - - Then you'll be able to see those notes when you are viewing the story. - - ![Stories with notes](${images.storiesWithNotes}) - - Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/docs/react-storybook/addons/addon-gallery) to discover more addons. - - > This particular addon has created a panel in Storybook. Some addons may not create a panel and may use some other Storybook platform features. - > - > So, look at the addonā€™s own documentation on how to use it. - `, -}; diff --git a/src/docs/react-storybook/addons/writing-addons.js b/src/docs/react-storybook/addons/writing-addons.js deleted file mode 100644 index a16af2533f0e..000000000000 --- a/src/docs/react-storybook/addons/writing-addons.js +++ /dev/null @@ -1,189 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - storybookComponents: require('./static/storybook-components.png'), - storiesWithoutNotes: require('./static/stories-without-notes.png'), - storiesWithNotes: require('./static/stories-with-notes.png'), -}; - -export default { - id: 'writing-addons', - title: 'Writing Addons', - content: stripIndent` - This is a complete guide on how to create addons for Storybook. - - ## Storybook Basics - - Before we begin, we need to learn a bit about how Storybook works. Basically, Storybook has a **Manager App** and a **Preview Area**. - - Manager App is the client side UI for Storybook. Preview Area is the place where the story is rendered. Usually the Preview Area is an iframe. - - When you select a story from the Manager App, the relevant story is rendered inside the Preview Area. - - ![Storybook Components](${images.storybookComponents}) - - As shown in the above image, there's a communication channel that the Manager App and Preview Area use to communicate with each other. - - ## Capabilities - - With an addon, you can add more functionality to Storybook. Here are a few things you could do: - - * Add a panel to Storybook (like Action Logger). - * Interact with the story and the panel. - * Set and get URL query params. - * Select a story. - * Register keyboard shortcuts (coming soon). - - With this, you can write some pretty cool addons. Look at our [Addon gallery](/docs/react-storybook/addons/addon-gallery) to have a look at some sample addons. - - ## Getting Started - - Let's write a simple addon for Storybook. It's a Notes addon on which you can display some notes for a story. - - - > Just for the simplicity, we'll write the addon right inside our app. But we can easily move it into a separate NPM module. - - ## How it looks - - We write a story for our addon like this: - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - import Button from './Button'; - import { WithNotes } from '../notes-addon'; - - storiesOf('Button', module) - .add('with text', () => ( - - - - )) - .add('with some emoji', () => ( - - - - )); - ~~~ - - Then it will appear in the Notes panel like this: - - ![Without notes](${images.storiesWithNotes}) - - ## Setup - - First, create an \`addons.js\` inside the Storybook config directory and add the following content to it. - - ~~~js - // Storybook's default addons - import '@kadira/storybook/addons'; - ~~~ - - We'll use this file shortly to register the Notes addon we are building. - - Now we need to create two files, \`register.js\` and \`index.js,\` inside a directory called \`src/notes-addon\`. - - ## The Addon - - Let's add the following content to the \`index.js\`. It will expose a class called \`WithNotes\`, which wraps our story. - - ~~~js - import React from 'react'; - import addons from '@kadira/storybook-addons'; - - export class WithNotes extends React.Component { - render() { - const { children, notes } = this.props; - const channel = addons.getChannel(); - - // send the notes to the channel. - channel.emit('kadira/notes/add_notes', notes); - // return children elements. - return children; - } - } - ~~~ - - In this case, our component can access something called the channel. It lets us communicate with the panel (where we display notes). It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API. - - In the above case, it will emit the notes text to the channel, so our panel can listen to it. - - Then add the following code to the register.js. - - See: https://gist.github.com/arunoda/fb3859840ff616cc5ea0fa3ef8e3f358 - - It will register our addon and add a panel. In this case, the panel represents a React component called \`Notes\`. That component has access to the channel and storybook api. - - Then it will listen to the channel and render the notes text on the panel. Have a look at the above annotated code. - - > In this example, we are only sending messages from the Preview Area to the Manager App (our panel). But we can do it the other way around as well. - - It also listens to another event, called onStory, in the storybook API, which fires when the user selects a story. We use that event to clear the previous notes when selecting a story. - - ### Register the addon - - Now, finally, we need to register the addon by importing it to the \`.storybook/addons.js\` file. - - ~~~js - // Storybook's default addons - import '@kadira/storybook/addons'; - - // Our addon - import '../src/notes-addon/register'; - ~~~ - - > Above code runs in the Manager App but not in the preview area. - - - That's it. Now you can create notes for any story as shown below: - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - import Button from './Button'; - import { WithNotes } from '../notes-addon'; - - storiesOf('Button', module) - .add('with text', () => ( - - - - )) - .add('with some emojies', () => ( - - - - )); - ~~~ - - ## Addon API - - Here we've only used a few functionalities of our [Addon API](/docs/react-storybook/addons/api). - You can learn more about the complete API [here](/docs/react-storybook/addons/api). - - ## Packaging - - You can package this addon into a NPM module very easily. Have a look at this [repo](https://github.com/storybooks/storybook/tree/master/packages/addon-notes/tree/version1). - - In addition to moving the above code to an NPM module, we've set \`react\` and \`@kadira/storybook-addons\` as peer dependencies. - - ### Local Development - - When you are developing your addon as a package, you can't use \`npm link\` to add it your project. Instead add your package as a local dependency into your \`package.json\` as shown below: - - ~~~json - { - ... - "dependencies": { - "@kadira/storybook-addon-notes": "file:///home/username/myrepo" - } - ... - } - ~~~ - - ### Package Maintenance - - Your packaged Storybook addon needed to be written in ES5. If you are using ES6, then you need to transpile it. - In that case, we recommend to use [React CDK](https://github.com/kadirahq/react-cdk) for that. - `, -}; diff --git a/src/docs/react-storybook/basics/exporting-storybook.js b/src/docs/react-storybook/basics/exporting-storybook.js deleted file mode 100644 index 9d33fa255ab4..000000000000 --- a/src/docs/react-storybook/basics/exporting-storybook.js +++ /dev/null @@ -1,44 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'exporting-storybook', - title: 'Exporting Storybook as a Static App', - content: stripIndent` - Storybook gives a great developer experience with its dev time features, like instance change updates via Webpack's HMR. - - But Storybook is also a tool you can use to showcase your components to others. - Demos of [React Native Web](http://necolas.github.io/react-native-web/storybook/) and [React Dates](http://airbnb.io/react-dates/) are a good example for that. - - For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service. - - Simply add the following NPM script: - - ~~~sh - { - ... - "scripts": { - "storybook": "build-storybook -c .storybook -o .out" - } - ... - } - ~~~ - - Then run \`npm run storybook\`. - - This will build the storybook configured in the Storybook directory into a static webpack and place it inside the \`.out\` directory. - Now you can deploy the content in the \`.out\` directory wherever you want. - - To test it locally, simply run the following commands: - - ~~~sh - cd .out - python -m SimpleHTTPServer - ~~~ - - ## Deploying to GitHub Pages - - Additionally, you can deploy Storybook directly into GitHub pages with our [storybook-deployer](https://github.com/storybooks/storybook-deployer) tool. - - Or, you can simply export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information. - `, -}; diff --git a/src/docs/react-storybook/basics/faq.js b/src/docs/react-storybook/basics/faq.js deleted file mode 100644 index 3bcaafeef474..000000000000 --- a/src/docs/react-storybook/basics/faq.js +++ /dev/null @@ -1,17 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'faq', - title: 'Frequently Asked Questions', - content: stripIndent` - Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybooks/storybook/). - - ### How can I run coverage tests with Create React App and leave out stories? - - Create React App does not allow providing options to Jest in your \`package.json\`, however you can run \`jest\` with commandline arguments: - - ~~~ - npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stories/*"]' - ~~~ - `, -}; diff --git a/src/docs/react-storybook/basics/introduction.js b/src/docs/react-storybook/basics/introduction.js deleted file mode 100644 index 2e9f5efc7335..000000000000 --- a/src/docs/react-storybook/basics/introduction.js +++ /dev/null @@ -1,25 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - screenshot: require('./static/screenshot.png'), -}; - -export default { - id: 'introduction', - title: 'Introduction', - content: stripIndent` - React Storybook is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively. - - It runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - - ![React Storybook](${images.screenshot}) - - React Storybook also comes with a lot of [addons](/docs/react-storybook/addons/introduction) and a great API to customize as you wish. You can also build a [static version](/docs/react-storybook/basics/exporting-storybook) of your storybook and deploy it anywhere you want. - - Here are some featured storybooks that you can reference to see how Storybook works: - - * [React Button](http://kadira-samples.github.io/react-button) - [source](https://github.com/kadira-samples/react-button) - * [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) - * [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) - `, -}; diff --git a/src/docs/react-storybook/basics/quick-start-guide.js b/src/docs/react-storybook/basics/quick-start-guide.js deleted file mode 100644 index 61e9d6c39a32..000000000000 --- a/src/docs/react-storybook/basics/quick-start-guide.js +++ /dev/null @@ -1,28 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'quick-start-guide', - title: 'Quick Start Guide', - content: stripIndent` - React Storybook is very easy to use. You can use it with any kind of React project. - Follow these steps to get started with Storybook. - - ~~~sh - npm i -g getstorybook - cd my-react-app - getstorybook - ~~~ - - This will configure your app for Storybook. After that, you can run your Storybook with: - - ~~~ - npm run storybook - ~~~ - - Then you can access your storybook from the browser. - - --- - - To learn more about what \`getstorybook\` command does, have a look at our [Slow Start Guide](/docs/react-storybook/basics/slow-start-guide). - `, -}; diff --git a/src/docs/react-storybook/basics/slow-start-guide.js b/src/docs/react-storybook/basics/slow-start-guide.js deleted file mode 100644 index 6ab1a9a642b7..000000000000 --- a/src/docs/react-storybook/basics/slow-start-guide.js +++ /dev/null @@ -1,107 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - basicsStories: require('./static/basic-stories.png'), -}; - -export default { - id: 'slow-start-guide', - title: 'Slow Start Guide', - content: stripIndent` - You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you. - - > This will also help you to understand how Storybook works. - - ## Basics - - Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure as you want. - - In this guide, we are trying to set up Storybook for your React project. - - ## Add @kadira/storybook - - First of all, you need to add \`@kadira/storybook\` to your project. To do that, simply run: - - ~~~sh - npm i --save-dev @kadira/storybook - ~~~ - - ## Add react and react-dom - Make sure that you have \`react\` and \`react-dom\` in your dependencies as well: - - ~~~sh - npm i --save react react-dom - ~~~ - - Then add the following NPM script to your package json in order to start the storybook later in this guide: - - ~~~js - { - ... - "scripts": { - "storybook": "start-storybook -p 9001 -c .storybook" - } - ... - } - ~~~ - - ## Create the config file - - Storybook can be configured in several different ways. Thatā€™s why we need a config directory. We've added a \`-c\` option to the above NPM script mentioning \`.storybook\` as the config directory. - - For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories. - - To do that, simply create a file at \`.storybook/config.js\` with the following content: - - ~~~js - import { configure } from '@kadira/storybook'; - - function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. - } - - configure(loadStories, module); - ~~~ - - That'll load stories in \`../stories/index.js\`. - - Just like that, you can load stories from wherever you want to. - - ## Write your stories - - Now you can write some stories inside the \`../stories/index.js\` file, like this: - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - - storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with some emoji', () => ( - - )); - ~~~ - - Story is a single state of your component. In the above case, there are two stories for the native button component: - - 1. with text - 2. with some emoji - - ## Run your Storybook - - Now everything is ready. Simply run your storybook with: - - ~~~js - npm run storybook - ~~~ - - Then you can see all your stories, like this: - - ![](${images.basicsStories}) - - Now you can change components and write stories whenever you need to. You'll get those changes into Storybook in a snap with the help of Webpack's HMR API. - `, -}; diff --git a/src/docs/react-storybook/basics/writing-stories.js b/src/docs/react-storybook/basics/writing-stories.js deleted file mode 100644 index 3691e48156e0..000000000000 --- a/src/docs/react-storybook/basics/writing-stories.js +++ /dev/null @@ -1,176 +0,0 @@ -import { stripIndent } from 'common-tags'; - -const images = { - basicsStories: require('./static/basic-stories.png'), -}; - -export default { - id: 'writing-stories', - title: 'Writing Stories', - content: stripIndent` - Storybook is all about writing stories. Usually a story contains a single state of one of your components. That's like a visual test case. - - > Technically, a story is a function that returns a React element. - - You can write a set of stories for your components and you'll get a storybook. - - ## Keeping your stories - - There's no hard and fast rule for this. But, keeping stories close to your components is a good idea. - - For example, let's say your UI components live in a directory called: \`src/components.\` Then you can write stories inside the \`src/stories\` directory. - - This is just one way to do that. You can always edit your storybook config file and ask it to load stories from anywhere you want. - - ## Writing stories - - This is how you write stories: - (Let's assume there's a component called "Button" in \`src/components/Button.js\`.) - - ~~~js - // file: src/stories/index.js - - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - import Button from '../components/Button'; - - storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with some emoji', () => ( - - )); - ~~~ - - This will show stories in your storybook like this: - - ![](${images.basicsStories}) - - This is just our core API for writing stories. In addition to this, you can use the official and third party Storybook [addons](/docs/react-storybook/addons/introduction) to get more functionality. - - - ## Loading stories dynamically - - Sometimes, you will want to load your stories dynamically rather than explicitly requiring them in the Storybook config file. - - For example, you may write stories for your app inside the \`src/components\` directory with the \`.stories.js\` extension. Then you will want to load them at once. Simply edit your config directory at \`.storybook/config.js\` as follows: - - ~~~js - import { configure } from '@kadira/storybook'; - - const req = require.context('../src/components', true, /\.stories\.js$/) - - function loadStories() { - req.keys().forEach((filename) => req(filename)) - } - - configure(loadStories, module); - ~~~ - - Here we use Webpack's [require.context](https://webpack.github.io/docs/context.html#require-context) to load modules dynamically. Have a look at the relevant Webpack [docs](https://webpack.github.io/docs/context.html#require-context) to learn more about how to use require.context. - - ## Using Decorators - - A decorator is a way to wrap a story with a common set of component(s). Let's say you want to center all your stories. Here is how we can do this with a decorator: - - ~~~js - import React from 'react'; - import { storiesOf } from '@kadira/storybook'; - import MyComponent from '../my_component'; - - storiesOf('MyComponent', module) - .addDecorator((story) => ( -
    - {story()} -
    - )) - .add('without props', () => ()) - .add('with some props', () => ()); - ~~~ - - Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.) - - But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that: - - ~~~js - import { configure, addDecorator } from '@kadira/storybook'; - addDecorator((story) => ( -
    - {story()} -
    - )); - - configure(function () { - ... - }, module); - ~~~ - - ## Linking stories - - With \`linkTo\` you can link stories together to build demos and prototypes directly from your UI components. (Similar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/)) - - ~~~js - import { storiesOf, linkTo } from '@kadira/storybook' - - storiesOf('Button', module) - .add('First', () => ( - - )) - .add('Second', () => ( - - )); - ~~~ - - With that, you can link an event in a component to any story in the Storybook. - - * First parameter is the story kind (what you named with storiesOf). - * Second parameter is the story name (what you named with .add). - - You can also pass a function instead for any of above parameters. That function accepts arguments emitted by the event and it should return a string. For example: - - ~~~js - linkTo(() => 'Button', () => 'Second') - ~~~ - - ## Managing stories - - Storybook has a very simple API to write stories. With that, you canā€™t display nested stories. - _**This is something we've done purposely.**_ - - But you might ask, how do I manage stories If I have many of them? Here's how different developers address this issue. Therefore, there's no need to build a built-in feature for this (at least in the short term). - - ### Prefix with dots - - For example, you can prefix story names with a dot (\`.\`): - - ~~~js - storiesOf('core.Button', module) - ~~~ - - Then you can filter stories to display only the stories you want to see. - - ### Run multiple storybooks - - You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See: - - ~~~js - { - ... - "scripts": { - "start-storybook-for-theme": "start-storybook -p 9001 -c .storybook-theme" - "start-storybook-for-app": "start-storybook -p 8001 -c .storybook-app" - } - ... - } - ~~~ - - ### Use multiple repos - - This is a popular option. You can create different repos for different kinds of UI components and have a storybook for each of them. Here are some ways to separate them: - - * Have one repo for the theme, and one for the app. - * Have one repo for each UI component and use those in different apps. - * Have a few repos for different kinds of UI components and use them in different apps. - `, -}; diff --git a/src/docs/react-storybook/configurations/add-custom-head-tags.js b/src/docs/react-storybook/configurations/add-custom-head-tags.js deleted file mode 100644 index 5b67298bf390..000000000000 --- a/src/docs/react-storybook/configurations/add-custom-head-tags.js +++ /dev/null @@ -1,22 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'add-custom-head-tags', - title: 'Add Custom Head Tags', - content: stripIndent` - Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts. - - You can do this very easily. Simply create a file called \`head.html\` inside the Storybook config directory and add tags like this: - - ~~~html - - - ~~~ - - That's it. Storybook will inject these tags. - - > **Important** - - > Storybook will inject these tags to the iframe where your components are rendered. So, these wonā€™t be loaded into the main Storybook UI. - `, -}; diff --git a/src/docs/react-storybook/configurations/cli-options.js b/src/docs/react-storybook/configurations/cli-options.js deleted file mode 100644 index b478a8366630..000000000000 --- a/src/docs/react-storybook/configurations/cli-options.js +++ /dev/null @@ -1,43 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'cli-options', - title: 'CLI Options', - content: stripIndent` - React Storybook comes with two CLI utilities. They are \`start-storybook\` and \`build-storybook\`. - - They have some options you can pass to alter the storybook behaviors. We have seen some of them in previous docs. - - Here are all those options: - - ## For start-storybook - - ~~~ - Usage: start-storybook [options] - - Options: - - -h, --help output usage information - -V, --version output the version number - -p, --port [number] Port to run Storybook (Required) - -h, --host [string] Host to run Storybook - -s, --static-dir Directory where to load static files from - -c, --config-dir [dir-name] Directory where to load Storybook configurations from - ~~~ - - ## For build-storybook - - ~~~ - Usage: build-storybook [options] - - Options: - - -h, --help output usage information - -V, --version output the version number - -s, --static-dir Directory where to load static files from - -o, --output-dir [dir-name] Directory where to store built files - -c, --config-dir [dir-name] Directory where to load Storybook configurations from - ~~~ - - `, -}; diff --git a/src/docs/react-storybook/configurations/custom-babel-config.js b/src/docs/react-storybook/configurations/custom-babel-config.js deleted file mode 100644 index 52635081ef80..000000000000 --- a/src/docs/react-storybook/configurations/custom-babel-config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'custom-babel-config', - title: 'Custom Babel Config', - content: stripIndent` - By default, Storybook loads your root \`.babelrc\` file and load those configurations. But sometimes some of those options may cause Storybook to throw errors. - - In that case, you can provide a custom \`.babelrc\` just for Storybook. For that, simply create a file called \`.babelrc\` file inside the Storybook config directory (by default, it's \`.storybook\`). - - Then Storybook will load the Babel configuration only from that file. - - > Currently we do not support loading the Babel config from the package.json. - `, -}; diff --git a/src/docs/react-storybook/configurations/custom-webpack-config.js b/src/docs/react-storybook/configurations/custom-webpack-config.js deleted file mode 100644 index 0d868d54a455..000000000000 --- a/src/docs/react-storybook/configurations/custom-webpack-config.js +++ /dev/null @@ -1,110 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'custom-webpack-config', - title: 'Custom Webpack Config', - content: stripIndent` - **NOTE: Storybook doesn't currently support webpack 2, so write your storybook webpack config to be webpack 1.x-compatable.** - - The default Webpack config of React Storybook is usually well balanced for a medium-size React project (specially created with [Create React App](https://github.com/facebookincubator/create-react-app)) or a library. But if you already have your own Webpack setup, that's not useable. - - That's why we allow you to customize our Webpack setup. There are a few ways to do it. Let's discuss: - - ## Simple Mode - - Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. This is how to do it. - Simply add the following content to a file called \`webpack.config.js\` in your Storybook config directory (\`.storybook\` by default ). - - ~~~js - const path = require('path'); - - module.exports = { - module: { - loaders: [ - { - test: /\.scss$/, - loaders: ["style", "css", "sass"], - include: path.resolve(__dirname, '../') - } - ] - } - } - ~~~ - - Since this config file stays in the Storybook directory, you need to set the include path as above. If the config directory stays in a different directory, you need to set the include path relative to that. - - You also need to install the loaders (style, css, and sass) used in above config manually. - - - > Once you create this \`webpack.config.js\` file, Storybook won't load the [default Webpack config](/docs/react-storybook/configurations/default-config) other than loading JS files with the Babel loader. - - ### Supported Webpack Options - - You can add any kind of Webpack configuration options with the above config, whether they are plugins, loaders, or aliases. - But you won't be able to change the following config options: - - * entry - * output - * js loader with babel - - ## Full Control Mode - - Sometimes, you will want to have full control over the webpack configuration. Maybe you want to add different configurations for dev and production environments. That's where you can use our full control mode. - - To enable that, you need to export a **function** from the above \`webpack.config.js\` file, just like this: - - ~~~js - // Export a function. Accept the base config as the only param. - module.exports = function(storybookBaseConfig, configType) { - // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - - // Make whatever fine-grained changes you need - storybookBaseConfig.module.loaders.push({ - test: /\.scss$/, - loaders: ["style", "css", "sass"], - include: path.resolve(__dirname, '../') - }); - - // Return the altered config - return storybookBaseConfig; - }; - ~~~ - - Storybook uses the config returned from the above function. So, try to edit the \`storybookBaseConfig\` with care. Make sure to preserve the following config options: - - * entry - * output - * first loader in the module.loaders (Babel loader for JS) - - Other than that, you should try to keep the default set of plugins. - - ## Extending The Default Config - - You may want to keep Storybook's [default config](/docs/react-storybook/configurations/default-config), but just need to extend it. If so, this is how you do it using the Full Control Mode. - Add following content to the \`webpack.config.js\` in your Storybook config directory. - - ~~~js - // load the default config generator. - var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js'); - - module.exports = function(config, env) { - var config = genDefaultConfig(config, env); - - // Extend it as you need. - - return config; - }; - ~~~ - - ## Using Your Existing Config - - You may have an existing Webpack config for your project. So, you may need to copy and paste some config items into Storybook's custom Webpack config file. - - But you don't need to. There are a few options: - - * Simply import your main Webpack config into Storybook's \`webpack.config.js\` and use the loaders and plugins used in that. - * Create a new file with common Webpack options and use it in both inside the main Webpack config and inside Storybook's \`webpack.config.js\`. - `, -}; diff --git a/src/docs/react-storybook/configurations/default-config.js b/src/docs/react-storybook/configurations/default-config.js deleted file mode 100644 index ba42dc9c04c3..000000000000 --- a/src/docs/react-storybook/configurations/default-config.js +++ /dev/null @@ -1,72 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'default-config', - title: 'Default Config', - content: stripIndent` - Storybook has a default Webpack setup which is similar to [Create React App](https://github.com/facebookincubator/create-react-app). - Let's learn about the default config comes with Storybook. - - ## Babel - - We use Babel for JavaScript(ES6) transpiling. Here are some key features of Storybook's Babel configurations. - - ### ES2016+ Support - - We have added ES2016 support with Babel for transpiling your JS code. In addition to that, we've added a few experimental features, like object spreading and async await. Check out our [source](https://github.com/storybooks/storybook/blob/master/packages/react-storybook/src/server/config/babel.js#L19) to learn more about these plugins. - - ### .babelrc support - - If your project has a \`.babelrc\` file, we'll use that instead of the default config file. So, you could use any babel plugins or presets that you have used in your project with Storybook. - - ## Webpack - - We use Webpack to serve and load JavaScript modules for the web. We've added some Webpack loaders to bring some good defaults. (This setup is very close to what you get with the [Create React App](https://github.com/facebookincubator/create-react-app).) - - ### CSS Support - - You can simply import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file. - - Basically, you can import CSS like this: - - ~~~js - // locally - import './styles.css' - // or from NPM modules - import 'bootstrap/dist/css/bootstrap.css'; - ~~~ - - ### Image and Static File Support - - You can also import images and media files directly via JavaScript. This helps you to write stories with media files easily. This is how to do it: - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - - import imageFile from './static/image.png'; - - storiesOf('', module) - .add('with a image', () => ( - - )); - ~~~ - - When you are building a storybook, we'll also export the imported image. So, this is a good approach to loading all of your static content. - - - > Storybook also has a way to mention static directories via the -s option of the \`react-storybook\` and \`build-storybook\` commands. - - ### JSON Loader - - You can import \`.json\` files, as you do with Node.js. This will also allow you to use NPM projects, which imports \`.json\` files inside them. - - ## NPM Modules - - You can use any of the NPM modules installed on your project. You can simply import and use them. - - - > Unfortunately, we don't support Meteor packages. If your UI component includes one or more Meteor packages, try to avoid using them in UI components. - > If they are containers, you can use [React Stubber](https://github.com/kadirahq/react-stubber) to use them in Storybook. - `, -}; diff --git a/src/docs/react-storybook/configurations/env-vars.js b/src/docs/react-storybook/configurations/env-vars.js deleted file mode 100644 index 741982e299d7..000000000000 --- a/src/docs/react-storybook/configurations/env-vars.js +++ /dev/null @@ -1,39 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'env-vars', - title: 'Using Environment Variables', - content: stripIndent` - Sometimes, we may use configuration items inside Storybook. It might be a theme color, some client secret, or a JSON string. So, we usually tend to hard code them. - - But you can expose those configurations via "environment variables." For that, you need to prefix your environment variables with \`STORYBOOK_\` prefix. - - For an example, let's expose two environment variables like this: - - ~~~sh - STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook - ~~~ - - Then we can access these environment variables anywhere inside our JS code like below: - - ~~~js - console.log(process.env.STORYBOOK_THEME) - console.log(process.env.STORYBOOK_DATA_KEY) - ~~~ - - > Even though we can access these env variables anywhere in the client side JS code, it's better to use them only inside stories and inside the main Storybook config file. - - ## Build time environment variables - - You can also pass these environment variables when you are [building your storybook](/docs/react-storybook/basics/exporting-storybook) with \`build-storybook\`. - - Then they'll be hard coded to the static version of your Storybook. - - ## NODE_ENV env variable - - In addition to the above prefixed environment variables, you can also pass the NODE_ENV variable to Storybook. But, you normally don't need to do that since we set a reasonable default value for it. - - * When running \`npm run storybook\`, we set NODE_ENV to 'development' - * When building storybook, we set NODE_ENV to 'production' - `, -}; diff --git a/src/docs/react-storybook/configurations/serving-static-files.js b/src/docs/react-storybook/configurations/serving-static-files.js deleted file mode 100644 index 65fb756384b7..000000000000 --- a/src/docs/react-storybook/configurations/serving-static-files.js +++ /dev/null @@ -1,79 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'serving-static-files', - title: 'Serving Static Files', - content: stripIndent` - It's often useful to load static files like images and videos when creating components and stories. - - Storybook provides two ways to do that. - - ## 1. Via Imports - - You can import any media assets by simply importing (or requiring) them as shown below. - - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - - import imageFile from './static/image.png'; - - storiesOf('', module) - .add('with a image', () => ( - - )); - ~~~ - - - This is enabled with our [default config](/docs/react-storybook/configurations/default-config). But, if you are using a [custom Webpack config](/docs/react-storybook/configurations/custom-webpack-config), you need to add the [file-loader](https://github.com/webpack/file-loader) into your custom Webpack config. - - ## 2. Via a Directory - - You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag. - - See the following npm script on how to use it: - - ~~~js - { - "scripts": { - "start-storybook": "start-storybook -s ./public -p 9001" - } - } - ~~~ - - - Here \`./public\` is our static directory. Now you can use static files in the public directory in your components or stories like this. - - ~~~js - import React from 'react'; - import { storiesOf, action } from '@kadira/storybook'; - - // assume image.png is located in the "public" directory. - storiesOf('', module) - .add('with a image', () => ( - - )); - ~~~ - - - > You can also pass a list of directories, instead of a single directory, as shown below. - > ~~~js - > { - > "scripts": { - > "start-storybook": "start-storybook -s ./public,./static -p 9001" - > } - > } - > ~~~ - - ## Absolute versus relative paths - - Sometimes, you may want to deploy your storybook into a subpath, like https://kadira-samples.github.io/react-button. - - In this case, you need to have all your images and media files with relative paths. Otherwise, Storybook cannot locate those files. - - If you load static content via importing, this is automatic and you do not have to do anything. - - If you are using a static directory, then you need to use _relative paths_ to load images. - `, -}; diff --git a/src/docs/react-storybook/index.js b/src/docs/react-storybook/index.js deleted file mode 100644 index dba7c086415f..000000000000 --- a/src/docs/react-storybook/index.js +++ /dev/null @@ -1,49 +0,0 @@ -export default [ - { - id: 'basics', - heading: 'Basics', - items: [ - require('./basics/introduction').default, - require('./basics/quick-start-guide').default, - require('./basics/slow-start-guide').default, - require('./basics/writing-stories').default, - require('./basics/exporting-storybook').default, - require('./basics/faq').default, - ], - }, - { - id: 'configurations', - heading: 'Configurations', - items: [ - require('./configurations/default-config').default, - require('./configurations/custom-webpack-config').default, - require('./configurations/custom-babel-config').default, - require('./configurations/add-custom-head-tags').default, - require('./configurations/serving-static-files').default, - require('./configurations/env-vars').default, - require('./configurations/cli-options').default, - ], - }, - { - id: 'testing', - heading: 'Testing', - items: [ - require('./testing/react-ui-testing').default, - require('./testing/structural-testing').default, - require('./testing/interaction-testing').default, - require('./testing/css-style-testing').default, - require('./testing/manual-testing').default, - ], - }, - { - id: 'addons', - heading: 'Addons', - items: [ - require('./addons/introduction').default, - require('./addons/using-addons').default, - require('./addons/addon-gallery').default, - require('./addons/writing-addons').default, - require('./addons/api').default, - ], - }, -]; diff --git a/src/docs/react-storybook/testing/css-style-testing.js b/src/docs/react-storybook/testing/css-style-testing.js deleted file mode 100644 index e230d9dce2a8..000000000000 --- a/src/docs/react-storybook/testing/css-style-testing.js +++ /dev/null @@ -1,36 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import storybookScreenshot from './static/storybook-screenshot.png'; -import storybookIframeScreenshot from './static/storybook-iframe-screenshot.png'; - -export default { - id: 'css-style-testing', - title: 'CSS/Style Testing', - content: stripIndent` - We can also use Storybook as the base for CSS/Style testing with stories as the base. First, have a look at the following Storybook. - - ![Storybook Screenshot](${storybookScreenshot}) - - In that, you can seeĀ the Storybook's manager UI. It has UI elements that are not related to your app. However, there's a way to access just a single story. - - For an example, let's assume theĀ above storybook runs on port 9009 and we can access it via [http://localhost:9009](http://localhost:9009/). - Then Let's pick a single story: the "with text" story of the Button. So, in this case: - - * selectedKind = Button - * selectedStory = with text - - Then, we can see the above story using the following URL: - - http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text&dataId=0 - - ![Storybook Iframe Screenshot](${storybookIframeScreenshot}) - - Just like that, you can access all ofĀ the stories in your Storybook. - - ## Supported CSS/Style Testing Frameworks - - It will be hard to use all the frameworks we've [mentioned](/docs/react-storybook/testing/react-ui-testing#3-css-style-testing), but we'll be able to use frameworks which are based on URL as the input source. (Such as [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini)) - - > In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storyshots). - `, -}; diff --git a/src/docs/react-storybook/testing/interaction-testing.js b/src/docs/react-storybook/testing/interaction-testing.js deleted file mode 100644 index 23eb7d5241e0..000000000000 --- a/src/docs/react-storybook/testing/interaction-testing.js +++ /dev/null @@ -1,22 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import specsAddon from './static/specs-addon.png'; - -export default { - id: 'interaction-testing', - title: 'Interaction Testing', - content: stripIndent` - For the interaction testing, [Enzyme](https://github.com/airbnb/enzyme) is the best tool we can use. With that, we can [simulate](http://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html) user inputs and see what they are doing. - - You can directly write these kind of tests with a full-featured testing framework,Ā suchĀ as **Mocha** or **Jest**. Have a look atĀ theĀ [Enzyme guidelines](https://github.com/airbnb/enzyme/) forĀ moreĀ informationĀ on howĀ to integrate them. - - ## Specs Addon - - If you like to write your tests directly inside your stories, we alsoĀ have an addon called [specs](https://github.com/mthuret/storybook-addon-specifications). - - ![Storybook Specs Addon](${specsAddon}) - - With that, you can write test specs directly inside stories. - Additionally, you alsoĀ can use your CI server to run those tests. - `, -}; diff --git a/src/docs/react-storybook/testing/manual-testing.js b/src/docs/react-storybook/testing/manual-testing.js deleted file mode 100644 index afd4e023f01e..000000000000 --- a/src/docs/react-storybook/testing/manual-testing.js +++ /dev/null @@ -1,24 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'manual-testing', - title: 'Manual Testing', - content: stripIndent` - Now we arriveĀ at the mostĀ interestingĀ (but alsoĀ hardest) part of UI testing. We usuallyĀ do this as a team. - - First, we need to make a pretty solid Storybook or a set of Storybooks covering most of the scenarios of our UI components. For that we can follow the following structure: - - * Write stories for your individual UI components. - * Write another set of stories for integrating theĀ above UI components (youĀ could consider your pages). - - For the individual UI components, you may beĀ using a different repository. Then, keep a storybook inside it for those components. Then, in the main app, write stories for integrations. - - ## Testing Plan - Open a new PR (or multiple of them). Then run your Storybook and start reviewing one story at a time. Then you can comment on the PR. - - > To get a better result, you can use **Storybook Hub**, where you can comment inside individual stories and share your storybook with non-developers.
    - > We willĀ be releasing it in the first week of October. - > Join our [Newsletter](http://tinyletter.com/storybooks) or [Slack Team](https://storybooks-slackin.herokuapp.com/) to get updates. - - `, -}; diff --git a/src/docs/react-storybook/testing/react-ui-testing.js b/src/docs/react-storybook/testing/react-ui-testing.js deleted file mode 100644 index 36bf6ece4619..000000000000 --- a/src/docs/react-storybook/testing/react-ui-testing.js +++ /dev/null @@ -1,81 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import loginForm from './static/login_form.png'; - -export default { - id: 'react-ui-testing', - title: 'Introduction: React UI Testing', - content: stripIndent` - There are different aspects we need to look at when testing UI. There are also a lot of tools and techniques we can use.Ā  - - ## Reasons for Testing - - Before we talk about testing, we need to think about why we need to test. There are many reasons;Ā here are someĀ ofĀ ourĀ reasons: - - * To find bugs. - * To make sure things won't break between new code commits. - * To keep tests as living documentations. - - Specifically, testing is important when working with teams since it allows different people theĀ abilityĀ toĀ contribute with confidence. - - ## Different Aspects of UI Testing - - We refer UI for many things. ToĀ putĀ this in focus, let's narrow it down to React based user interfaces. - - ### 1. Structural Testing - - Here we'll focus on the structure of the UI and how it's laid out. For an example, let's say we have a "login component" as shown below: - - ![Login Form](${loginForm}) - - For structural testing, we are testing whether orĀ notĀ it has following content: - - * A title with "Login in to Facebook" - * Two inputs for the username and password. - * A submit button. - * An error screen to show errors. - - For React, we have been using [Enzyme](https://github.com/airbnb/enzyme) as a way to do structural testing, but now we can also use [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) to make things evenĀ moreĀ simple. - - ### 2. Interaction Testing - - UI is all about interacting with the user. We do this with a bunch of UI elements, such as buttons, links, and input elements. With interaction testing, we need to test if they are working properly. - - Let's again use the above login component as an example. It should do these things: - - * When we click the submit button, it should give us the username and password. - * When we click the "Forgotten Account" link, it should redirect to a new page. - - We have few ways to do this type of testing with React. TheĀ simple way is to use [Enzyme](https://github.com/airbnb/enzyme). - - ### 3. CSS/Style Testing - - UI is all about styles (whether they're simple, beautiful, or even ugly). With style testing, we are evaluating the look and feel of our UI components between code changes. This is a pretty complex subjectĀ and usually we doĀ itĀ by comparing images. - - If we are using inline styles all the way, we can use JEST snapshot testing. But to get evenĀ better results, we should consider using tools suchĀ as: - - * [BackstopJS](https://github.com/garris/BackstopJS) - * [PhantomCSS](https://github.com/Huddle/PhantomCSS) - * [Gemini](https://github.com/gemini-testing/gemini) - * [Happo](https://github.com/Galooshi/happo) - - ### 4. Manual Testing - - All the above sections are about testing with automatedĀ tools. ButĀ sinceĀ we are building UI for humans, we must alsoĀ manually test them to see how they feel. - - AnotherĀ reasonĀ forĀ manualĀ testingĀ isĀ forĀ the better user experience. - - We should always try to test our UI with the naked eye. For this, we can simply use our existing Storybook.This is something thatĀ we can't automate(yet) and takes time. But itĀ would be great if we could do this once in a while (especially with a major code changes). - - ## How Storybook Can Help Us - - A **story** is a smallest unit in Storybook. It's a fully functioning UI element where the input canĀ beĀ usedĀ for any of the testing methods we've mentioned above. - - Let's lookĀ atĀ how Storybook can help you do theĀ above mentioned different aspects of testing. - - * [Structural Testing with StoryShots](/docs/react-storybook/testing/structural-testing) - * [Interaction Testing with Specs Addon](/docs/react-storybook/testing/interaction-testing) - * [Storybook as the Base for CSS/Style Testing](/docs/react-storybook/testing/css-style-testing) - * [Storybook for Manual UI Testing](/docs/react-storybook/testing/manual-testing) - `, -}; diff --git a/src/docs/react-storybook/testing/structural-testing.js b/src/docs/react-storybook/testing/structural-testing.js deleted file mode 100644 index f1553ce2889e..000000000000 --- a/src/docs/react-storybook/testing/structural-testing.js +++ /dev/null @@ -1,65 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import storyshotsFirstRun from './static/storyshots-first-run.png'; -import storyshotsDiffView from './static/storyshots-diff-view.png'; - -export default { - id: 'structural-testing', - title: 'Structural Testing', - content: stripIndent` - - For React, [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) is the best way to do Structural Testing. It's painless to use and maintain. We've integrated Jest's snapshot testing directly into Storybook using a new tool called [StoryShots](https://github.com/storybooks/storyshots). Now we can simply use existing stories as the input for snapshot testing. - - ## What's Snapshot Testing? - - With Snapshot testing, we keep a fileĀ copy of the structure of UI components. Think ofĀ it like aĀ set of HTML sources. - - Then, after we've completed any UI changes, we compare new snapshots with the snapshots thatĀ we kept in the file. - - If things are not the same, we can do two things: - - 1. We can consider new snapshots that show the current state, and thenĀ update them as new snapshots. - 2. We can find the root cause for the change and fix our code. - - > We can also commit these snapshots directly into the source code. - - ## Using StoryShots - - [StoryShots](https://github.com/storybooks/storybook/tree/master/packages/storyshots) is our integration between Storybook and Jest Snapshot Testing. It's pretty simple to use. - - First, make sure you are inside a Storybook-enabled repo (make sure it has few stories). - Then, install StoryShots into your app with: - - ~~~sh - npm i -D @kadira/storyshots - ~~~ - - Then, add the following NPM script into your package.json: - - ~~~js - { - "scripts": { - "test-storybook": "storyshots" - } - } - ~~~ - - Now you can run the above command with: - ~~~sh - npm run test-storybook - ~~~ - - ThisĀ will save the initial set of snapshots inside your Storybook config directory. - - ![StoryShots First ](${storyshotsFirstRun}) - - After you completeĀ any changes, you canĀ run the above NPM script again and find our structural changes. - - ![StoryShots Diff View](${storyshotsDiffView}) - - --- - - StoryShots alsoĀ comes with aĀ few important [productive features](https://github.com/storybooks/storyshots#key-features) thatĀ canĀ be customized. Have a look at the StoryShots [repo](https://github.com/storybooks/storyshots) for more information. - - `, -}; diff --git a/src/docs/storybook-hub/basics/comments.js b/src/docs/storybook-hub/basics/comments.js deleted file mode 100644 index c2eedb52df18..000000000000 --- a/src/docs/storybook-hub/basics/comments.js +++ /dev/null @@ -1,43 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import commentsInsideStorybookImage from './static/comments-inside-storybook.png'; - -export default { - id: 'comments', - title: 'Comments', - content: stripIndent` - You can comment inside Storybooks and discuss with your team. Comments are namespaced based on the git branch. - So, any storybook associated with a particular branch has the same set of comments. - - ![Comment Inside Storybook](${commentsInsideStorybookImage}) - - Adding comments support is easy. Add following NPM packages into your app: - - ~~~sh - npm i -D @kadira/storybook-database-cloud - npm i -D @kadira/storybook-addon-comments - ~~~ - - Then add following code into your \`addons.js\` file in \`.storybook\` directory. - - ~~~js - // To get built in addons. - import '@kadira/storybook/addons'; - - import '@kadira/storybook-database-cloud/register'; - import '@kadira/storybook-addon-comments/register'; - ~~~ - - Then push this into GitHub. Now you could comment inside your storybooks. - - ## Access Comments Locally - - You can also access comments even locally. For that, your project needs to have few requirements: - - - * Make sure it has a correct GIT remote called origin points to your repo on GitHub - * Make sure you are on the correct branch. - - Then you'll be able to access these comments. You'll be asked to login to storybook Hub, if needed, right from your comments panel. - `, -}; diff --git a/src/docs/storybook-hub/basics/getting-started.js b/src/docs/storybook-hub/basics/getting-started.js deleted file mode 100644 index 1a7a6221df24..000000000000 --- a/src/docs/storybook-hub/basics/getting-started.js +++ /dev/null @@ -1,57 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import authorizeGithubImage from './static/authorize-github.png'; -import storybooksViaHubImage from './static/storybooks-via-hub.png'; -import storybooksViaPRImage from './static/storybooks-via-pr.png'; - -export default { - id: 'getting-started', - title: 'Getting Started', - content: stripIndent` - This guide will help you to connect your React app (or project) to [Storybook Hub](https://hub.storybooks.js.org/). - - ## Add Storybook for Your Project - - Most probably, you'll have a storybook configured for your project. If not, follow our [docs](/docs/react-storybook/basics/introduction). - Then make sure it has a \`build-storybook\` npm script as shown below: - - ~~~js - { - "scripts": { - ... - "build-storybook": "build-storybook -o ./.out" - ... - } - } - ~~~ - - > Output directory provided with \`-o\` option could be any directory. We'll override it while we are building it. - - ## Create an App on Storybook Hub - - Then create a Storybook Hub account. Make sure to sign up via GitHub. Otherwise, you won't be able to link your GitHub repo. - Then follow the screens and create an app. - - Here, you'll be able to authorize Github again to grant more permission. - If you are looking to only use Storybook Hub for public app, authorize for public apps. Otherwise, authorize for private apps. - - ![Authorize GitHub for Storybook Hub](${authorizeGithubImage}) - - > Here, you authorize for your whole account. Not just for this app. So, make sure to do this with caution. - You could always go from public to private. - But going from private to public may be an issue if you already have private apps. - - - Then select your repo and create an app. - - ## Push Some Code Commits - - Now, everything is ready. Push some code commits and we'll start building storybooks for your apps. We group storybooks by branches. You can access them by visiting your app's page on Storybook Hub. - - ![Access Storybooks via Storybook Hub](${storybooksViaHubImage}) - - You can also access these storybooks, right next to your PR. - - ![Access Storybooks via GitHub PR](${storybooksViaPRImage}) - `, -}; diff --git a/src/docs/storybook-hub/basics/github-pr-integration.js b/src/docs/storybook-hub/basics/github-pr-integration.js deleted file mode 100644 index a5f318f0b40f..000000000000 --- a/src/docs/storybook-hub/basics/github-pr-integration.js +++ /dev/null @@ -1,25 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import githubPRCommentImage from './static/github-pr-comment.png'; -import githubPRDeployLinkImage from './static/github-pr-deploy-link.png'; - -export default { - id: 'github-pr-integration', - title: 'GitHub PR Integration', - content: stripIndent` - We'll create Storybooks for every code commit in your app. You can also access them alongside your Github Pull Requests. - - For every full request, we'll add a comment like this: - - ![Storybooks via GitHub PR Comment](${githubPRCommentImage}) - - Here you'll get an URL to the latest version of the storybook for this branch. It's a fixed URL for your PR. - So, you can share it with anyone. - - You can even access storybooks for individual commits. They are listed just below the code commit like this: - - ![Storybooks via GitHub Deploy Link](${githubPRDeployLinkImage}) - - You can access all these storybooks by visiting your app's page on Storybook Hub as well. We arrange them according to your branches. - `, -}; diff --git a/src/docs/storybook-hub/basics/private-or-public-apps.js b/src/docs/storybook-hub/basics/private-or-public-apps.js deleted file mode 100644 index 155bd764a7f4..000000000000 --- a/src/docs/storybook-hub/basics/private-or-public-apps.js +++ /dev/null @@ -1,24 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'private-or-public-apps', - title: 'Private or Public Apps', - content: stripIndent` - In Storybook Hub, you could create either private or public apps. This guide will help you choose an app type for your project. - - ## For Open Source Repos - - Most of the time, you may want to create a public app for your repo. Then, anyone could access these storybooks and comment inside them. - - If you need to keep conversation only between your team, you could make a private app for even your open source projects. Then, only your collaborators could access storybooks. - - ## For Private Repos - - You may want to create a private app on Storybook Hub where only you and your collaborators could access storybooks. - - However, you can also create a public app for your private repo. Then you can share storybooks with the public. With this way, anyone in the public could access these URLS and comment on them. - - > Anyway, since your GitHub repo is private, no one in the public will be able to see your storybooks, unless you share them. - Additionally, our storybook URLs are hard to guess. (They carried an UUID) - `, -}; diff --git a/src/docs/storybook-hub/basics/security.js b/src/docs/storybook-hub/basics/security.js deleted file mode 100644 index 8af8748bca5e..000000000000 --- a/src/docs/storybook-hub/basics/security.js +++ /dev/null @@ -1,63 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'security', - title: 'Security', - content: stripIndent` - We have access to your GitHub repos and some other personal information about you. We understand that with great power comes great responsibility. We try to minimize the possibility of security breaches by always following essential security measures and adhering to stringent company-wide policies. - - As a startup, we know that a security breach would pose a critical threat to our credibility and ability to attract and retain customers. So, we'll do whatever we can to prevent it. Here are some of the security measures we follow. - - ## Everything Goes Over SSL - - All our network communication is carried over SSL. This includes communications between: - - * Web browser and the Storybook Hub web server. - * All of our Internal Services. - * All of the Database communications. - - So, it's highly unlikely that someone in between you, us, and GitHub will be able to read your code or other information. - - ## We Don't Keep Your Code - - Even though we have access to your code, we don't keep it. We only keep your storybooks. Storybooks are stored on encrypted disks, and you can only access these storybooks by visiting a given storybook URLs. Only the collaborators in your workspace can access these storybooks. - - > In the case of public apps, anyone could access these storybooks. - - ## We Use Isolated Build Environments - - Each and every storybook is built inside an isolated build environment with the help of Docker containers. So, there's no way that others' repositories can access your code unless there's an issue with Docker itself. We always use a stable version of Docker and apply operating system security patches to minimize such issues. - - These build servers cannot be accessed from the Internet and run inside a private network. So, it's impossible for someone to launch an internet-based attack. - - ## Kadira Employees Don't Read Your Code - - Our developers do not have access to your GitHub access keys and they never will be able to read your code. Our system engineers and founders do have access to your access tokens, since they have full access to our servers and databases. But they don't read or use your access tokens manually for any reason. - - Each of our employees is required to sign a contract regarding these matters before they start working for us. - - ## We Don't Use Your Repositories When Testing - - For development and staging purposes, we won't use your access keys and reposā€”for those purposes, we use our own set of keys and repos. In this way, we make sure we won't damage your repositories or code while testing. - - ## Partner Access - - We use Amazon AWS, Google Cloud, Galaxy, Heroku, and Compose to build our infrastructure. So, if there were a security breach in those services it might be possible to access your code. However, this is a risk shared by all cloud deployments and is very unlikely. - - ## Deleting Your Apps and The Account - - You can delete apps via our user interface. Once you have done that, we'll stop building storybooks for the related repository and access code for that repository. However, we don't delete your existing storybooks. - - If you need to delete existing storybooks or delete your entire account, just contact us via [storybooks@kadira.io](mailto:storybooks@kadira.io). - - ## Enterpise Deployments - - Even though we've implemented these security practices, your company policies may prevent you from using Kadira Storybooks. We understand that. That's why we support Enterprise deployments that work nicely with your GitHub Enterprise instance (or [github.com](http://github.com/)). - - Contact us via [storybooks@kadira.io](mailto:storybooks@kadira.io) to get started. - - ## TALK TO US - - If you need more information or have found a vulnerability, email us at [storybooks@kadira.io](mailto:storybooks@kadira.io). We're happy to talk with you. - `, -}; diff --git a/src/docs/storybook-hub/basics/static/authorize-github.png b/src/docs/storybook-hub/basics/static/authorize-github.png deleted file mode 100644 index bdce2780962b..000000000000 Binary files a/src/docs/storybook-hub/basics/static/authorize-github.png and /dev/null differ diff --git a/src/docs/storybook-hub/basics/static/comments-inside-storybook.png b/src/docs/storybook-hub/basics/static/comments-inside-storybook.png deleted file mode 100644 index a8917bf8cee0..000000000000 Binary files a/src/docs/storybook-hub/basics/static/comments-inside-storybook.png and /dev/null differ diff --git a/src/docs/storybook-hub/basics/static/github-pr-comment.png b/src/docs/storybook-hub/basics/static/github-pr-comment.png deleted file mode 100644 index 7c43574f3702..000000000000 Binary files a/src/docs/storybook-hub/basics/static/github-pr-comment.png and /dev/null differ diff --git a/src/docs/storybook-hub/basics/static/github-pr-deploy-link.png b/src/docs/storybook-hub/basics/static/github-pr-deploy-link.png deleted file mode 100644 index 53c048d59b22..000000000000 Binary files a/src/docs/storybook-hub/basics/static/github-pr-deploy-link.png and /dev/null differ diff --git a/src/docs/storybook-hub/basics/static/storybooks-via-hub.png b/src/docs/storybook-hub/basics/static/storybooks-via-hub.png deleted file mode 100644 index 09be2a8d7f67..000000000000 Binary files a/src/docs/storybook-hub/basics/static/storybooks-via-hub.png and /dev/null differ diff --git a/src/docs/storybook-hub/basics/static/storybooks-via-pr.png b/src/docs/storybook-hub/basics/static/storybooks-via-pr.png deleted file mode 100644 index 5839419b2b5b..000000000000 Binary files a/src/docs/storybook-hub/basics/static/storybooks-via-pr.png and /dev/null differ diff --git a/src/docs/storybook-hub/index.js b/src/docs/storybook-hub/index.js deleted file mode 100644 index 68e659709d9e..000000000000 --- a/src/docs/storybook-hub/index.js +++ /dev/null @@ -1,24 +0,0 @@ -export default [ - { - id: 'basics', - heading: 'Basics', - items: [ - require('./basics/getting-started').default, - require('./basics/github-pr-integration').default, - require('./basics/comments').default, - require('./basics/private-or-public-apps').default, - require('./basics/security').default, - ], - }, - - { - id: 'management-features', - heading: 'Management Features', - items: [ - require('./management-features/workspaces').default, - require('./management-features/sharing-storybooks').default, - require('./management-features/env-variables').default, - require('./management-features/private-npm-packages').default, - ], - }, -]; diff --git a/src/docs/storybook-hub/management-features/env-variables.js b/src/docs/storybook-hub/management-features/env-variables.js deleted file mode 100644 index ce0e6649f371..000000000000 --- a/src/docs/storybook-hub/management-features/env-variables.js +++ /dev/null @@ -1,24 +0,0 @@ -import { stripIndent } from 'common-tags'; - -import editAppButtonImage from './static/edit-app-button.png'; -import envVarsImage from './static/env-vars.png'; - -export default { - id: 'env-variables', - title: 'Environment Variables', - content: stripIndent` - You can pass dynamic information to Storybook via environmental variables. This can be used to pass configurations and secrets. Here's [how to](/docs/react-storybook/configurations/env-vars) use them with storybook. - - As you expected, you can set env variables directly from Storybook Hub. Therefore, you don't need to commit those configuration into GitHub or any other store. - - These configurations are carried with your storybook. Since storybooks for private apps are only available to people you trust, this is a good way to pass secrets to Storybook. - - To set environment variables, click the "Edit" button your app page on Storybook Hub. - - ![Edit App Button](${editAppButtonImage}) - - Then you could set environment variables like this: - - ![Set Environment Varibles](${envVarsImage}) - `, -}; diff --git a/src/docs/storybook-hub/management-features/private-npm-packages.js b/src/docs/storybook-hub/management-features/private-npm-packages.js deleted file mode 100644 index fbb1cdf35892..000000000000 --- a/src/docs/storybook-hub/management-features/private-npm-packages.js +++ /dev/null @@ -1,35 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'private-npm-packages', - title: 'Private NPM Packages', - content: stripIndent` - If you are using private NPM repos or private Github urls we won't be able to access those repos by default. But there are some ways you could grant permission to us. - - ## NPM Token - - You can provide a NPM token while we are building storybooks. With that, we could could use your private NPM packages inside Storybook Hub. For that, simply create the following environmet variable. - - ~~~sh - SB_NPM_TOKEN - ~~~ - - ## Custom .npmrc - - You can set a [custom \`.npmrc\` file](http://blog.npmjs.org/post/118393368555/deploying-with-npm-private-modules) when we are building storybook. With that, you can provide NPM tokens to access your private packages. For that, simply expose the following environmental variable with your custom .npmrc content: - - ~~~sh - SB_NPMRC - ~~~ - - We will append the above content to your existing .npmrc file if there's a one. - - ## SSH Private Keys - - You may use private Github repos as NPM packages. Then you can set a private key which is authorized to access those repos. For that, simply expose the following environmental variable: - - ~~~sh - SB_SSHKEY - ~~~ - `, -}; diff --git a/src/docs/storybook-hub/management-features/sharing-storybooks.js b/src/docs/storybook-hub/management-features/sharing-storybooks.js deleted file mode 100644 index 5ba2733d158f..000000000000 --- a/src/docs/storybook-hub/management-features/sharing-storybooks.js +++ /dev/null @@ -1,23 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'sharing-storybooks', - title: 'Sharing Storybooks', - content: stripIndent` - One of the coolest thing about Storybook Hub is you can share storybooks with anyone even they don't have a GitHub account. - - All of our storybook URLs are permalinks. So, you can share them with anyone you like. - You could get these URLS either from Github PRs or from Storybook Hub. - - ## Access Control - - ### public apps - - Any storybook URL associated with public apps is available for anyone. Anyone with an account at Storybook Hub could comment on storybooks. - - ### private apps - - For private apps, any collaborator in your workspace could access storybooks for that app. - You can easily add or remove collaborators by visiting your [workspace](https://hub.getstorybook.io/workspaces). - `, -}; diff --git a/src/docs/storybook-hub/management-features/static/edit-app-button.png b/src/docs/storybook-hub/management-features/static/edit-app-button.png deleted file mode 100644 index 56bfb68008c2..000000000000 Binary files a/src/docs/storybook-hub/management-features/static/edit-app-button.png and /dev/null differ diff --git a/src/docs/storybook-hub/management-features/static/env-vars.png b/src/docs/storybook-hub/management-features/static/env-vars.png deleted file mode 100644 index c4f39a2e485d..000000000000 Binary files a/src/docs/storybook-hub/management-features/static/env-vars.png and /dev/null differ diff --git a/src/docs/storybook-hub/management-features/workspaces.js b/src/docs/storybook-hub/management-features/workspaces.js deleted file mode 100644 index 1fca227a0f3a..000000000000 --- a/src/docs/storybook-hub/management-features/workspaces.js +++ /dev/null @@ -1,18 +0,0 @@ -import { stripIndent } from 'common-tags'; - -export default { - id: 'workspaces', - title: 'Workspaces', - content: stripIndent` - We group apps on storybook based on workspaces. Every account on Storybook Hub has a workspace. - Each workspaces has: - - * It's own set of app - * A set of collaborators - * Isolated payment setup - - You'll have access to more workspaces as you are added as a collaborator. Then you can see apps from those workspaces as well. - - > Currently, we don't allow the creation of additional workspaces. But we'll be adding that feature soon. - `, -}; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 10cbb1b06abd..000000000000 --- a/src/index.css +++ /dev/null @@ -1,19 +0,0 @@ -@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800'; - -body, div, p, ul, li, a { - font-family: 'Open Sans', sans-serif; - font-size: 14px; -} - -a, -a:visited, -a:hover, -a:active, -a:focus { - text-decoration: none; - color: #000; -} - -a:hover { - opacity: 0.7; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 833e6f2ef02f..000000000000 --- a/src/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Homepage from './components/Homepage'; -import Docs from './containers/Docs'; -import { Router, Route, browserHistory, applyRouterMiddleware } from 'react-router'; -import { useScroll } from 'react-router-scroll'; -import 'bootstrap/dist/css/bootstrap.css'; -import './index.css'; -import './lib/autolinker'; -import 'airbnb-js-shims'; - -ReactDOM.render( - - - - - , - document.getElementById('root'), -); diff --git a/src/lib/autolinker.js b/src/lib/autolinker.js deleted file mode 100644 index 9d98edd104d5..000000000000 --- a/src/lib/autolinker.js +++ /dev/null @@ -1,92 +0,0 @@ -import { browserHistory } from 'react-router'; - -if (typeof window !== 'undefined') { - watchClickEvents(); -} - -function watchClickEvents() { - // This logic is taken from page.js - // See: https://github.com/visionmedia/page.js - const clickEvent = typeof document !== 'undefined' && document.ontouchstart - ? 'touchstart' - : 'click'; - document.addEventListener(clickEvent, onclick, false); - - function onclick(e) { - if (which(e) !== 1) { - return; - } - - if (e.metaKey || e.ctrlKey || e.shiftKey) { - return; - } - - if (e.defaultPrevented) { - return; - } - - // ensure link - // use shadow dom when available - let el = e.path ? e.path[0] : e.target; - while (el && el.nodeName !== 'A') { - el = el.parentNode; - } - - if (!el || el.nodeName !== 'A') { - return; - } - - // Ignore if tag has - // 1. "download" attribute - // 2. rel="external" attribute - if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') { - return; - } - - // ensure non-hash for the same path - const link = el.getAttribute('href'); - if (el.pathname === location.pathname && (el.hash || link === '#')) { - return; - } - - // Check for mailto: in the href - if (link && link.indexOf('mailto:') > -1) { - return; - } - - // check target - if (el.target) { - return; - } - - // x-origin - if (!sameOrigin(el.href)) { - return; - } - - // rebuild path - let path = el.pathname + el.search + (el.hash || ''); - - // strip leading "/[drive letter]:" on NW.js on Windows - if (typeof process !== 'undefined' && path.match(/^\/[a-zA-Z]:\//)) { - path = path.replace(/^\/[a-zA-Z]:\//, '/'); - } - - e.preventDefault(); - browserHistory.push(path); - } - - function which(e) { - e = e || window.event; - return e.which === null ? e.button : e.which; - } - - function sameOrigin(href) { - let origin = `${location.protocol}//${location.hostname}`; - if (location.port) { - origin += `:${location.port}`; - } - - return href && href.indexOf(origin) === 0; - } -} diff --git a/src/stories/designs.js b/src/stories/designs.js deleted file mode 100644 index bfaeef95100f..000000000000 --- a/src/stories/designs.js +++ /dev/null @@ -1,161 +0,0 @@ -export default { - 'Homepage.page': { - design: require('../design/homepage/homepage.png'), - note: ` - For this we'll use Bootsrap for sake of simplicity. (Specially for the layouts). - Then we use Open Sans as the base font. - - Overall this will be a simple design. - All these content should render inside a BS containers and it support mobile. - `, - }, - - 'Homepage.header': { - design: require('../design/homepage/header.png'), - note: ` - Just a simple header. In the mobile view, this will show one after other. - `, - }, - - 'Homepage.heading': { - design: require('../design/homepage/heading.png'), - note: ` - Use the "Storybook" font to make it super bold. (font-weight=800) - In the mobile view, try to make the font-size smaller. - `, - }, - - 'Homepage.demo': { - design: require('../design/homepage/demo.png'), - note: ` - Use the image located at src/design/homepage/screenshot.png for this. - But in production we use an animated GIF here. - `, - }, - - 'Homepage.built-for': { - design: require('../design/homepage/built-for.png'), - note: ` - In this, React and React Native are links for following repos: - - * React - https://github.com/storybooks/storybook/tree/master/packages/react-storybook - * React Native - https://github.com/storybooks/storybook/tree/master/packages/react-native-storybook - - --- - - This one and few components below share some commong features. - Those includes bottom border and margins. So create a common component inside - the Homepage/styles.css stylesheet and use that class in this other components below. - `, - }, - - 'Homepage.main-links': { - design: require('../design/homepage/main-links.png'), - note: ` - This one has two headings. Use a common style in Homepage/styles.css and use it in here. - You can also use that in the component below. - - In the mobile view, two sections in here show one after other. - `, - }, - - 'Homepage.featured-storybooks': { - design: require('../design/homepage/featured-storybooks.png'), - note: ` - This components accepts a input as follows and render links to storybooks as shown above. - In the mobile view, these links shows one after other. - - When we clicked on the Name in the above, we should load the storybook in a new tab. - - Here are the data for this components (to show links): - - [ - { - owner: "https://avatars0.githubusercontent.com/u/698437?v=3&s=200", - storybook: { - "name": "React Dates", - "link": "http://airbnb.io/react-dates/", - } - source: "https://github.com/airbnb/react-dates" - }, - - { - owner: "https://avatars3.githubusercontent.com/u/239676?v=3&s=460", - storybook: { - "name": "React Native Web", - "link": "https://necolas.github.io/react-native-web/storybook", - } - source: "https://github.com/necolas/react-native-web" - }, - - { - owner: "https://avatars1.githubusercontent.com/u/15616844?v=3&s=200", - storybook: { - "name": "React Button", - "link": "http://kadira-samples.github.io/react-button/", - } - source: "https://github.com/kadira-samples/react-button" - }, - ] - `, - }, - - 'Homepage.footer': { - design: require('../design/homepage/footer.png'), - note: ` - Here are the links: - - * Slack: https://storybooks-slackin.herokuapp.com/ - * NewsLetter: https://tinyletter.com/storybooks - * Twiiter: https://twitter.com/kadirahq - * Medium: https://voice.kadira.io - `, - }, - - 'Docs.page': { - design: require('../design/docs/docs.png'), - note: ` - Here we use the docs layout which is similar to BulletProof Meteor. - We've used Arial for some texts. I'll mention them. Otherwise still the - fonts are Open Sans. - - Here we reuse the header and footer from the Homepage. - Bootstrap Layout is also pretty similar to the Homepage. - `, - }, - - 'Docs.docs-container': { - design: require('../design/docs/docs-container.png'), - note: ` - This is a container and this as no content. - But this one has top and bottom borders and some margins. - `, - }, - - 'Docs.docs-nav': { - design: require('../design/docs/docs-nav.png'), - note: ` - This is docs navigation and accept some dataset to render this. - Here's some sample data: https://gist.github.com/arunoda/04fd23e93766eb883afcac93f06fbff7 - - Here topic Titles are on Open Sans with 20px and bold texts with color #444. - Others are with '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif"' and 17px. - Selected item is marked with bold and in this color: #E25E5E. - - `, - }, - - 'Docs.docs-content': { - design: require('../design/docs/docs-content.png'), - note: ` - This title is with Open Sans 30px font. color #444. - Content is with following style: - * font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif. - * size: 17px, - * line-height: 25px - * color: #333 - - (You can look at the BulletProof Meteor for the actual styles.) - `, - }, -}; diff --git a/src/stories/index.js b/src/stories/index.js deleted file mode 100644 index a6bebc694c98..000000000000 --- a/src/stories/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@kadira/storybook'; -import WithDesign from './with_design'; -import { WithNote } from '../../.storybook/notes_addon'; -import designs from './designs'; -import implementations from './implementations'; - -const storyGroups = {}; - -for (const key in designs) { - const [groupName, itemName] = key.split('.'); - const info = designs[key]; - const implementation = implementations[key]; - - if (!storyGroups[groupName]) { - storyGroups[groupName] = storiesOf(groupName, module); - } - - storyGroups[groupName].add(itemName, () => ( - - - {implementation} - - - )); -} diff --git a/src/stories/with_design.js b/src/stories/with_design.js deleted file mode 100644 index d712891d6e3e..000000000000 --- a/src/stories/with_design.js +++ /dev/null @@ -1,204 +0,0 @@ -import React from 'react'; -import { Flex, Box } from 'reflexbox'; -const { localStorage } = window; - -const styles = { - toolbar: { - marginBottom: 10, - fontSize: 11, - fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif', - }, - - toolbarButton: { - marginRight: 10, - border: 0, - backgroundColor: '#fff', - textTransform: 'uppercase', - cursor: 'pointer', - outline: 0, - letterSpacing: 0.5, - WebkitFontSmoothing: 'antialiased', - }, - - wrapper: { - padding: 10, - }, - - heading: { - fontFamily: 'monospace', - textTransform: 'uppercase', - fontSize: 20, - margin: '10px 0', - padding: '0', - }, - - container: { - border: '1px dashed #DDD', - }, -}; - -export default class WithDesign extends React.Component { - constructor(...args) { - super(...args); - const type = localStorage.getItem('WITH_DESIGN_TYPE') || 'COMPARE'; - this.state = { type }; - - this.calculateScale = this.calculateScale.bind(this); - } - - tryCalculateScale() { - const calculate = () => { - // Sometimes, this code may after this instance is unmounted. - // Specially when navigating between stories quickly. - // So, we need to handle it. - if (this.unmounted) return; - this.calculateScale(); - }; - - // This is some bad code where we are trying to do the scale based on - // some data from the actutal DOM. - // We don't have way(or I don't know how) to determine when to detect DOM - // complete it's rendering. - // So, to do that, we need to run this logic in muliple times. - // It's ugly. But safe and working. - calculate(); - setTimeout(calculate, 0); - setTimeout(calculate, 50); - setTimeout(calculate, 100); - setTimeout(calculate, 200); - setTimeout(calculate, 500); - } - - calculateScale() { - const designImage = this.refs.design; - if (!designImage) { - this.setState({ implementationScale: 1 }); - return; - } - - const implementationScale = designImage.width / designImage.naturalWidth; - this.setState({ implementationScale }); - } - - componentDidMount() { - window.addEventListener('resize', this.calculateScale); - this.tryCalculateScale(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.calculateScale); - this.unmounted = true; - } - - renderToolbar() { - const { type: currentType } = this.state; - - const changeState = type => () => { - localStorage.setItem('WITH_DESIGN_TYPE', type); - this.setState({ type }); - this.tryCalculateScale(); - }; - - const buttons = [ - ['Side by Side', 'COMPARE'], - ['One After Other', 'SHOW_BOTH'], - ['Implementation', 'SHOW_IMPLEMENTATION'], - ['Design', 'SHOW_DESIGN'], - ].map(([caption, typeName]) => { - const style = { - ...styles.toolbarButton, - fontWeight: currentType === typeName ? 600 : 400, - }; - - return ( - - ); - }); - - return ( -
    - {buttons} -
    - ); - } - - renderDesign(options = {}) { - const { scaleImage = true } = options; - const { design } = this.props; - const designStyle = {}; - if (scaleImage) { - designStyle.width = '100%'; - } - - return ( -
    -
    - -
    -
    - ); - } - - renderImplementation() { - const { children } = this.props; - const { implementationScale = 1 } = this.state; - - const containerStyle = { - ...styles.container, - zoom: implementationScale, - }; - - return ( -
    -
    - {children} -
    -
    - ); - } - - render() { - const { type } = this.state; - - switch (type) { - case 'SHOW_DESIGN': - return ( -
    - {this.renderToolbar()} - {this.renderDesign({ scaleImage: false })} -
    - ); - - case 'SHOW_IMPLEMENTATION': - return ( -
    - {this.renderToolbar()} - {this.renderImplementation()} -
    - ); - - case 'COMPARE': - return ( -
    - {this.renderToolbar()} - - {this.renderDesign()} - {this.renderImplementation()} - -
    - ); - - case 'SHOW_BOTH': - default: - return ( -
    - {this.renderToolbar()} - {this.renderDesign()} - {this.renderImplementation()} -
    - ); - } - } -} diff --git a/static.json b/static.json deleted file mode 100644 index a879d985de6f..000000000000 --- a/static.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "root": "build/", - "clean_urls": false, - "routes": { - "/**": "index.html" - } -} diff --git a/src/stories/data.js b/stories/data.js similarity index 97% rename from src/stories/data.js rename to stories/data.js index 12b910fccd92..3a443b27cf3c 100644 --- a/src/stories/data.js +++ b/stories/data.js @@ -1,3 +1,5 @@ +import marked from 'marked' + export const docsData = { categories: [ { @@ -33,7 +35,7 @@ export const docsData = { id: 'writing-stories', section: 'basics', title: 'Writing Stories', - content: ` + content: marked(` You need to write stories to show your components inside React Storybook.
    We've a set of APIs allows you to write stories and do more with them. @@ -55,7 +57,7 @@ storiesOf('Toggle', module) return }); ~~~ - `, + `), }, featuredStorybooks: [ { diff --git a/src/stories/implementations.js b/stories/implementations.js similarity index 59% rename from src/stories/implementations.js rename to stories/implementations.js index d516eb495808..dddef14928df 100644 --- a/src/stories/implementations.js +++ b/stories/implementations.js @@ -1,12 +1,12 @@ import React from 'react'; import Homepage from '../components/Homepage'; -import Header from '../components/Homepage/Header'; +import Header from '../components/Header'; import Heading from '../components/Homepage/Heading'; import Demo from '../components/Homepage/Demo'; import Platforms from '../components/Homepage/Platforms'; import MainLinks from '../components/Homepage/MainLinks'; import Featured from '../components/Homepage/Featured'; -import Footer from '../components/Homepage/Footer'; +import Footer from '../components/Footer'; import Docs from '../components/Docs'; import DocsContainer from '../components/Docs/Container'; import DocsContent from '../components/Docs/Content'; @@ -14,20 +14,6 @@ import DocsNav from '../components/Docs/Nav'; import { docsData } from './data'; -const content = ` - React Storybook is a UI development environment for your React components. - - With it, you can visualize different states of your UI components and develop them interactively. React Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - - React Storybook also comes with a lot of [addons](/docs/addons/introduction) and a great API to customize as you wish. You can also build a [static version](/docs/basics/exporting-storybook) of your storybook and deploy it anywhere you want. - - Here are some featured storybooks that you can reference to see how Storybook works: - - * [React Button](http://kadira-samples.github.io/react-button) - [source](https://github.com/kadira-samples/react-button) - * [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) - * [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) -`; - export default { 'Homepage.page': , 'Homepage.header':
    , diff --git a/stories/index.js b/stories/index.js new file mode 100644 index 000000000000..03aae06f96e0 --- /dev/null +++ b/stories/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import implementations from './implementations'; + +const storyGroups = {}; + +for (const key in implementations) { + const [groupName, itemName] = key.split('.'); + const implementation = implementations[key]; + + if (!storyGroups[groupName]) { + storyGroups[groupName] = storiesOf(groupName, module); + } + + storyGroups[groupName].add(itemName, () => implementation); +} diff --git a/utils/colors.js b/utils/colors.js new file mode 100644 index 000000000000..e4ac923a13d5 --- /dev/null +++ b/utils/colors.js @@ -0,0 +1,13 @@ +import colorPairsPicker from 'color-pairs-picker' +import chroma from 'chroma-js' + +import { config } from 'config' + +export const colors = colorPairsPicker(config.baseColor, { + contrast: 5.5, +}) + +const darker = chroma(config.baseColor).darken(10).hex() +export const activeColors = colorPairsPicker(darker, { + contrast: 7, +}) diff --git a/utils/typography.js b/utils/typography.js new file mode 100644 index 000000000000..32400ca11a8d --- /dev/null +++ b/utils/typography.js @@ -0,0 +1,18 @@ +import Typography from 'typography' +import CodePlugin from 'typography-plugin-code' + +const options = { + scaleRatio: 1.618, + plugins: [ + new CodePlugin(), + ], +} + +const typography = new Typography(options) + +// Hot reload typography in development. +if (process.env.NODE_ENV !== 'production') { + typography.injectStyles() +} + +export default typography diff --git a/wrappers/md.jsx b/wrappers/md.jsx new file mode 100644 index 000000000000..04f6d6c0033e --- /dev/null +++ b/wrappers/md.jsx @@ -0,0 +1,29 @@ +import React from 'react' +import PropTypes from 'prop-types' +import DocumentTitle from 'react-document-title' +import { config } from 'config' + +const Markdown = ({ route }) => { + const post = route.page.data + const repoUrl = 'https://github.com/storybooks/storybooks.github.io' + const editUrl = `{repoUrl}/tree/source/pages${route.path.replace(/\/$/g, '.md')}` + return ( + +
    +

    {post.title}

    +

    + + Edit this page + +

    +
    +
    + + ) +} + +Markdown.propTypes = { + route: PropTypes.object, +} + +export default Markdown