diff --git a/.storybook/addons.js b/.storybook/addons.js index f782d05c1b5..c09a470411d 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 7bffa1dfcee..344badfc98e 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/components/Docs/Container/index.js b/components/Docs/Container/index.js index f368b26f857..8ea86d16eea 100644 --- a/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/components/Docs/Nav/dropdown.js b/components/Docs/Nav/dropdown.js index 25b24a07025..59de074672e 100644 --- a/components/Docs/Nav/dropdown.js +++ b/components/Docs/Nav/dropdown.js @@ -13,13 +13,16 @@ class Nav extends React.Component { } changeRoute(selectedCatId, selectedSectionId, selectedItemId) { - const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}`; + const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}/`; browserHistory.push(url); } handleHeadingChange(evt) { - const { selectedCatId } = this.props; - this.changeRoute(selectedCatId, evt.target.value, ''); + const { selectedCatId, sections } = this.props; + const selectedSectionId = evt.target.value + const section = sections.find(section => section.id === selectedSectionId) + const itemId = section.items[0].id + this.changeRoute(selectedCatId, selectedSectionId, itemId); } handleNavChange(evt) { diff --git a/components/Docs/Nav/index.js b/components/Docs/Nav/index.js index 35d8906cd3a..8bf0cd86c27 100644 --- a/components/Docs/Nav/index.js +++ b/components/Docs/Nav/index.js @@ -9,7 +9,7 @@ class Nav extends React.Component { ? 'selected' : ''; - const url = `/docs/${selectedCatId}/${section.id}/${item.id}`; + const url = `/docs/${selectedCatId}/${section.id}/${item.id}/`; return (
  • diff --git a/components/Docs/index.js b/components/Docs/index.js index 1dcacc043bd..34454494a79 100644 --- a/components/Docs/index.js +++ b/components/Docs/index.js @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import Helmet from 'react-helmet'; -import Header from '../Homepage/Header'; +import Header from '../Header'; import Container from './Container'; -import Footer from '../Homepage/Footer'; +import Footer from '../Footer'; import './style.css'; class Docs extends React.Component { diff --git a/components/Header/index.js b/components/Header/index.js index 81fb7fb96de..c8c27f6d98c 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -1,168 +1,54 @@ -import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router' -import { Container, Grid, Span } from 'react-responsive-grid' -import { prefixLink } from 'gatsby-helpers' -import includes from 'underscore.string/include' - -import { rhythm, adjustFontSizeTo } from 'utils/typography' -import { colors, activeColors } from 'utils/colors' -import { config } from 'config' - -import storybookLogo from '../../design/homepage/storybook-logo.png'; +import React from 'react'; import './style.css'; -const Header = ({ location }) => { - const homeActive = location.pathname === prefixLink('/') - const docsActive = includes(location.pathname, '/docs/') - const examplesActive = includes(location.pathname, '/examples/') +import storybookLogo from '../../design/homepage/storybook-logo.png'; - return ( -
    - - - - { - homeActive - ? null - : ( - - Storybook Logo - - ) - } - - - - Github +const sections = [ + { id: 'home', caption: 'Home', href: '/' }, + { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' }, +]; + +class Header extends React.Component { + renderSections() { + return sections.map(section => { + const { currentSection } = this.props; + const className = currentSection === section.id ? 'selected' : ''; + + return ( + + {section.caption} + + ); + }); + } + + render() { + const { currentSection } = this.props; + let titleClassname = 'pull-left'; + if (currentSection === 'home') { + titleClassname += ' hide'; + } + + return ( + +
    + ); + } } Header.propTypes = { - location: PropTypes.object, -} + currentSection: PropTypes.string, +}; -export default Header - -// const sections = [ -// { id: 'home', caption: 'Home', href: '/' }, -// { id: 'docs', caption: 'Docs', href: '/docs' }, -// ]; -// -// class Header extends React.Component { -// renderSections() { -// return sections.map(section => { -// const { currentSection } = this.props; -// const className = currentSection === section.id ? 'selected' : ''; -// -// return ( -// -// {section.caption} -// -// ); -// }); -// } -// -// render() { -// const { currentSection } = this.props; -// let titleClassname = 'pull-left'; -// if (currentSection === 'home') { -// titleClassname += ' hide'; -// } -// -// return ( -// -// ); -// } -// } -// -// Header.propTypes = { -// currentSection: PropTypes.string, -// }; -// -// export default Header; +export default Header; diff --git a/components/Homepage/index.js b/components/Homepage/index.js index e4b3382a5e4..5d933982a7d 100644 --- a/components/Homepage/index.js +++ b/components/Homepage/index.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Helmet from 'react-helmet'; - +import './style.css'; import Header from '../Header'; import Heading from './Heading'; import Demo from './Demo'; @@ -10,8 +10,6 @@ import MainLinks from './MainLinks'; import Featured from './Featured'; import Footer from '../Footer'; -import './style.css'; - const featuredStorybooks = [ { owner: 'https://avatars0.githubusercontent.com/u/698437?v=3&s=200', @@ -44,11 +42,13 @@ const featuredStorybooks = [ const Homepage = () => (
    +
    +
    ); diff --git a/config.toml b/config.toml index d0783ea2e4c..aa159d1b573 100644 --- a/config.toml +++ b/config.toml @@ -11,7 +11,7 @@ basics = [ "/docs/react-storybook/basics/exporting-storybook/", "/docs/react-storybook/basics/faq/", ] -configuration = [ +configurations = [ "/docs/react-storybook/configurations/default-config/", "/docs/react-storybook/configurations/custom-webpack-config/", "/docs/react-storybook/configurations/custom-babel-config/", diff --git a/html.js b/html.js index a883c916a0b..d3615d67f5c 100644 --- a/html.js +++ b/html.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types' import DocumentTitle from 'react-document-title' import { prefixLink } from 'gatsby-helpers' -import { TypographyStyle, GoogleFont } from 'react-typography' import typography from './utils/typography' import { colors } from 'utils/colors' @@ -28,8 +27,6 @@ class HTML extends Component { content="width=device-width, initial-scale=1.0" /> {title} - - {css} diff --git a/package.json b/package.json index 87f9120b81d..dbc01287712 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,12 @@ "description": "storybooks.js.org documentation", "version": "1.0.0", "dependencies": { + "bootstrap": "^3.3.7", "chroma-js": "^0.7.2", "color-pairs-picker": "^1.3.5", "gatsby": "^0.12.45", "lodash": "^4.17.2", + "marked": "^0.3.6", "react-document-title": "^2.0.3", "react-helmet": "^5.0.3", "react-motion": "^0.1.0", @@ -18,6 +20,7 @@ "underscore.string": "^3.2.2" }, "devDependencies": { + "@kadira/storybook": "^2.35.3", "gh-pages": "^0.12.0" }, "keywords": [ @@ -27,9 +30,11 @@ "license": "MIT", "main": "n/a", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "develop": "gatsby develop", + "build-storybook": "build-storybook", "build": "gatsby build", - "deploy": "gh-pages -r git@github.com:storybooks/storybooks.github.io.git -d public -o origin -b master" + "deploy": "gh-pages -r git@github.com:storybooks/storybooks.github.io.git -d public -o origin -b master", + "develop": "gatsby develop", + "storybook": "start-storybook -p 9009", + "test": "echo \"Error: no test specified\" && exit 1" } } diff --git a/pages/_template.jsx b/pages/_template.jsx index 3878f2b5f3f..c7df97e3916 100644 --- a/pages/_template.jsx +++ b/pages/_template.jsx @@ -5,12 +5,11 @@ import { colors, activeColors } from 'utils/colors' import { rhythm, adjustFontSizeTo } from 'utils/typography' import { config } from 'config' -import Header from 'components/Header' -import Footer from 'components/Footer' // Import styles. import 'css/main.css' import 'css/github.css' +import 'bootstrap/dist/css/bootstrap.css' const PageTemplate = ({ children, location }) => (
    @@ -21,7 +20,6 @@ const PageTemplate = ({ children, location }) => ( -
    ( > {children} -
    ) diff --git a/pages/docs/_template.jsx b/pages/docs/_template.jsx index e695ecb19db..26591b3be39 100644 --- a/pages/docs/_template.jsx +++ b/pages/docs/_template.jsx @@ -1,114 +1,80 @@ -import React, { Component } from 'react' +import React from 'react'; import PropTypes from 'prop-types' -import { Link } from 'react-router' - -import Header from 'components/Header' -import Breakpoint from 'components/Breakpoint' import find from 'lodash/find' -import { flatten, values } from 'lodash' -import { prefixLink } from 'gatsby-helpers' +import capitalize from 'lodash/capitalize' + +import Docs from 'components/Docs'; import { config } from 'config' -import typography from 'utils/typography' -const { rhythm } = typography +const categories = [{ + id: 'react-storybook', + title: 'React Storybook', +}] -class DocPage extends Component { - handleTopicChange (e) { - return this.context.router.push(e.target.value) - } +const getSections = (catId, config, pages) => { + // FIXME: use catId + const sections = Object.keys(config.docSections) + return sections.map(key => ({ + id: key, + heading: capitalize(key), + items: config.docSections[key].map((path) => { + const page = pages.find(p => p.path === path) + return page.data + }) + })) +} - render () { - const { route, location } = this.props - const childPages = flatten(values(config.docSections)).map((p) => { - const page = find(route.pages, (_p) => _p.path === p) - return { - title: page.data.title, - path: page.path, - } - }) - const docOptions = childPages.map((child) => - - ) - const docPages = childPages.map((child) => { - const isActive = prefixLink(child.path) === location.pathname - return ( -
  • - - {isActive ? {child.title} : child.title} - -
    • - ) - }) - return ( -
    - -
    -
      - {docPages} -
    -
    -
    - {this.props.children} -
    -     - - Topics: - {' '} - -
    -
    - {this.props.children} -     -
    - ) +const getSelectedItem = (children, sectionId) => { + const { data } = children.props.route.page + return { + id: data.id, + section: sectionId, + title: data.title, + content: data.body } } -DocPage.propTypes = { + +const getCategories = () => { + + const sections = Object.keys(config.docSections) + return sections.map(key => ({ + id: key, + title: key.toUpperCase(), + })) +} + +const parsePath = (path) => { + const comps = path.split('/') + const [empty, itemId, sectionId, catId, ...rest] = comps.reverse() + return { catId, sectionId, itemId } +} + +class DocsContainer extends React.Component { + render() { + const { pages, path } = this.props.route + const { children } = this.props + const { catId, sectionId, itemId } = parsePath(children.props.route.path) + + const props = { + categories, + selectedCatId: catId, + sections: getSections(catId, config, pages), + selectedItem: getSelectedItem(children, sectionId), + selectedSectionId: sectionId, + selectedItemId: itemId, + } + console.log('props', props) + + return + } +} + +DocsContainer.propTypes = { location: PropTypes.object, route: PropTypes.object, } -DocPage.contextTypes = { +DocsContainer.contextTypes = { router: PropTypes.object.isRequired, } -export default DocPage + +export default DocsContainer; diff --git a/stories/data.js b/stories/data.js new file mode 100644 index 00000000000..3a443b27cf3 --- /dev/null +++ b/stories/data.js @@ -0,0 +1,90 @@ +import marked from 'marked' + +export const docsData = { + categories: [ + { + id: 'cat-1', + title: 'CAT 1', + }, + { + id: 'cat-2', + title: 'CAT 2', + }, + ], + sections: [ + { + id: 'basics', + heading: 'Basics', + items: [ + { id: 'getting-started', title: 'Getting Started' }, + { id: 'writing-stories', title: 'Writing Stories' }, + { id: 'build-as-a-static-app', title: 'Build as a Static App' }, + ], + }, + { + id: 'configurations', + heading: 'Configuations', + items: [ + { id: 'default-config', title: 'Default Config' }, + { id: 'webpack', title: 'Webpack' }, + { id: 'babel', title: 'Babel' }, + ], + }, + ], + selectedItem: { + id: 'writing-stories', + section: 'basics', + title: 'Writing Stories', + 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. + +When you are writing stories, you can follow these guidelines
    +to write great stories. + +* Write UI components by passing data via props. +* In this way, you can isolate UI components easilly. +* Do not write app-specific code inside your UI components. + +~~~js +import { linkTo } from @kadira/Storybook + +storiesOf('Toggle', module) + .add('on', () => { + return + }) + .add('off', () => { + return + }); +~~~ + `), + }, + featuredStorybooks: [ + { + 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', + }, + ], +}; diff --git a/stories/implementations.js b/stories/implementations.js new file mode 100644 index 00000000000..dddef14928d --- /dev/null +++ b/stories/implementations.js @@ -0,0 +1,52 @@ +import React from 'react'; +import Homepage from '../components/Homepage'; +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/Footer'; +import Docs from '../components/Docs'; +import DocsContainer from '../components/Docs/Container'; +import DocsContent from '../components/Docs/Content'; +import DocsNav from '../components/Docs/Nav'; + +import { docsData } from './data'; + +export default { + 'Homepage.page': , + 'Homepage.header':
    , + 'Homepage.heading': , + 'Homepage.demo': , + 'Homepage.built-for': , + 'Homepage.main-links': , + 'Homepage.featured-storybooks': , + 'Homepage.footer':