diff --git a/.github/stale.yml b/.github/stale.yml index 5935decc230..29f1395531b 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -4,11 +4,12 @@ daysUntilStale: 45 daysUntilClose: 15 # Issues with these labels will never be considered stale exemptLabels: - - bug - - 'help wanted' + - todo + - ready - 'in progress' - 'do not merge' - 'needs review' + - 'high priority' # Label to use when marking an issue as stale staleLabel: inactive @@ -16,11 +17,12 @@ staleLabel: inactive markComment: > Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue - the discussion. We do try to do some housekeeping every once in a while so - inactive issues will get closed after 60 days. Thanks! + the discussion. Unfortunately, we don't have time to get to every issue. We + are always open to contributions so please send us a pull request if you would + like to help. Inactive issues will be closed after 60 days. Thanks! # Comment to post when closing a stale issue. Set to `false` to disable closeComment: > - Hey there, it's me again! I am going to help our maintainers close this issue - so they can focus on development efforts instead. If the issue mentioned is + Hey there, it's me again! I am going close this issue to help our maintainers + focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook! diff --git a/addons/a11y/.storybook/addons.js b/addons/a11y/.storybook/addons.js new file mode 100755 index 00000000000..e4f70f25bfa --- /dev/null +++ b/addons/a11y/.storybook/addons.js @@ -0,0 +1 @@ +import '../register'; diff --git a/addons/a11y/.storybook/components/Button/component.js b/addons/a11y/.storybook/components/Button/component.js new file mode 100644 index 00000000000..cef6111d522 --- /dev/null +++ b/addons/a11y/.storybook/components/Button/component.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const styles = { + button: { + padding: '12px 6px', + fontSize: '12px', + lineHeight: '16px', + borderRadius: '5px', + }, + ok: { + backgroundColor: '#028402', + color: '#ffffff', + }, + wrong: { + color: '#ffffff', + backgroundColor: '#4caf50', + } +} + +function Button({ label, content, disabled, contrast }) { + return ( + + ) +} + +Button.propTypes = { + label: PropTypes.string, + content: PropTypes.string, + disabled: PropTypes.bool, + contrast: PropTypes.oneOf(['ok', 'wrong']) +}; + +Button.defaultProps = { + disabled: false, + contrast: 'ok', +}; + +export default Button; diff --git a/addons/a11y/.storybook/components/Button/stories.js b/addons/a11y/.storybook/components/Button/stories.js new file mode 100644 index 00000000000..269e5cab100 --- /dev/null +++ b/addons/a11y/.storybook/components/Button/stories.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { checkA11y } from './../../../src'; + +import Button from './component'; + +import Faker from 'faker'; + +const text = Faker.lorem.words(); + +storiesOf(' + )) + .add('Inaccessible', () => ( + + )); +``` + +## Roadmap + +* Make UI accessibile +* Add color blindness filters ([Example](http://lowvision.support/)) +* Show in story where violations are. +* Make it configurable +* Add more example tests +* Add tests +* Make CI integration possible diff --git a/addons/a11y/docs/screenshot.png b/addons/a11y/docs/screenshot.png new file mode 100644 index 00000000000..43fe0b333f3 Binary files /dev/null and b/addons/a11y/docs/screenshot.png differ diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js new file mode 100755 index 00000000000..caee93e065e --- /dev/null +++ b/addons/a11y/manager.js @@ -0,0 +1,3 @@ +const manager = require('./dist/register'); + +manager.init(); diff --git a/addons/a11y/package.json b/addons/a11y/package.json new file mode 100644 index 00000000000..1df2cf98797 --- /dev/null +++ b/addons/a11y/package.json @@ -0,0 +1,36 @@ +{ + "name": "@storybook/addon-a11y", + "version": "3.3.0-alpha.3", + "description": "a11y addon for storybook", + "keywords": [ + "a11y", + "accessibility", + "addon", + "storybook", + "valid", + "verify" + ], + "homepage": "https://github.com/storybooks/storybook#readme", + "bugs": { + "url": "https://github.com/storybooks/storybook/issues" + }, + "license": "MIT", + "main": "dist/index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/storybooks/storybook.git" + }, + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/addons": "^3.3.0-alpha.3", + "@storybook/components": "^3.3.0-alpha.3", + "axe-core": "^2.0.7", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } +} diff --git a/addons/a11y/register.js b/addons/a11y/register.js new file mode 100755 index 00000000000..81a1bbf9ea3 --- /dev/null +++ b/addons/a11y/register.js @@ -0,0 +1 @@ +require('./manager'); diff --git a/addons/a11y/src/A11yManager.js b/addons/a11y/src/A11yManager.js new file mode 100644 index 00000000000..2ed71f2c9bd --- /dev/null +++ b/addons/a11y/src/A11yManager.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import WrapStory from './components/WrapStory'; + +// Run all a11y checks inside +class A11yManager { + wrapStory(channel, storyFn, context) { + const props = { context, storyFn, channel }; + + return ; + } +} + +export default A11yManager; diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js new file mode 100644 index 00000000000..8b7b0416a88 --- /dev/null +++ b/addons/a11y/src/components/Panel.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import addons from '@storybook/addons'; + +import Tabs from './Tabs'; +import Report from './Report'; + +const styles = { + passes: { + color: '#2ecc71', + }, + violations: { + color: '#e74c3c', + }, +}; + +class Panel extends Component { + constructor(props, ...args) { + super(props, ...args); + this.state = { + passes: [], + violations: [], + }; + this.channel = addons.getChannel(); + + this.onUpdate = this.onUpdate.bind(this); + } + + componentDidMount() { + this.channel.on('addon:a11y:check', this.onUpdate); + } + + componentWillUnmount() { + this.channel.removeListener('addon:a11y:check', this.onUpdate); + } + + onUpdate({ passes, violations }) { + this.setState({ + passes, + violations, + }); + } + + render() { + const { passes, violations } = this.state; + + return ( + Violations, + panel: , + }, + { + label: Passes, + panel: , + }, + ]} + /> + ); + } +} + +export default Panel; diff --git a/addons/a11y/src/components/Report/Elements.js b/addons/a11y/src/components/Report/Elements.js new file mode 100644 index 00000000000..5b75aad016e --- /dev/null +++ b/addons/a11y/src/components/Report/Elements.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Rules from './Rules'; + +const styles = { + element: { + fontWeight: 600, + }, + target: { + borderBottom: '1px solid rgb(130, 130, 130)', + width: '100%', + display: 'inline-block', + paddingBottom: '4px', + marginBottom: '4px', + }, +}; + +function Element({ element, passes }) { + const { any, all, none } = element; + + const rules = [...any, ...all, ...none]; + + return ( +
  • + {element.target[0]} + +
    • + ); +} +Element.propTypes = { + element: PropTypes.shape({ + any: PropTypes.array.isRequired, + all: PropTypes.array.isRequired, + none: PropTypes.array.isRequired, + }).isRequired, + passes: PropTypes.bool.isRequired, +}; + +/* eslint-disable react/no-array-index-key */ +function Elements({ elements, passes }) { + return ( +
      + {elements.map((element, index) => )} +
    + ); +} +Elements.propTypes = { + elements: PropTypes.arrayOf( + PropTypes.shape({ + any: PropTypes.array.isRequired, + all: PropTypes.array.isRequired, + none: PropTypes.array.isRequired, + }) + ).isRequired, + passes: PropTypes.bool.isRequired, +}; + +export default Elements; diff --git a/addons/a11y/src/components/Report/Info.js b/addons/a11y/src/components/Report/Info.js new file mode 100644 index 00000000000..f3b50a6968a --- /dev/null +++ b/addons/a11y/src/components/Report/Info.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const styles = { + info: { + backgroundColor: 'rgb(234, 234, 234)', + padding: '12px', + marginBottom: '10px', + }, + help: { + margin: '0 0 12px', + }, + helpUrl: { + marginTop: '12px', + textDecoration: 'underline', + color: 'rgb(130, 130, 130)', + display: 'block', + }, +}; + +function Info({ item }) { + return ( +
    +

    {item.help}

    + + More info... + +
    + ); +} + +Info.propTypes = { + item: PropTypes.shape({ + help: PropTypes.node, + helpUrl: PropTypes.string, + }).isRequired, +}; + +export default Info; diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js new file mode 100644 index 00000000000..840c895d09f --- /dev/null +++ b/addons/a11y/src/components/Report/Item.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import Info from './Info'; +import Tags from './Tags'; +import Elements from './Elements'; + +const styles = { + item: { + padding: '0 14px', + cursor: 'pointer', + borderBottom: '1px solid rgb(234, 234, 234)', + }, + headerBar: { + padding: '12px 0px', + display: 'block', + width: '100%', + border: 0, + background: 'none', + }, +}; + +class Item extends Component { + static propTypes = { + item: PropTypes.shape({ + description: PropTypes.string, + nodes: PropTypes.array, + tags: PropTypes.array, + }).isRequired, + passes: PropTypes.bool.isRequired, + }; + + constructor() { + super(); + + this.state = { + open: false, + }; + } + + onToggle = () => + this.setState(prevState => ({ + open: !prevState.open, + })); + + render() { + const { item, passes } = this.props; + const { open } = this.state; + + return ( +
    + + {open && } + {open && } + {open && } +
    + ); + } +} + +export default Item; diff --git a/addons/a11y/src/components/Report/Rules.js b/addons/a11y/src/components/Report/Rules.js new file mode 100644 index 00000000000..e531f49f947 --- /dev/null +++ b/addons/a11y/src/components/Report/Rules.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const impactColors = { + minor: '#f1c40f', + moderate: '#e67e22', + serious: '#e74c3c', + critical: '#c0392b', + success: '#2ecc71', +}; + +const styles = { + rules: { + display: 'flex', + flexDirection: 'column', + padding: '4px', + fontWeight: '400', + }, + rule: { + display: 'flex', + flexDirection: 'row', + marginBottom: '6px', + }, + status: { + height: '16px', + width: '16px', + borderRadius: '8px', + fontSize: '10px', + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + color: '#fff', + textAlign: 'center', + flex: '0 0 16px', + }, + message: { + paddingLeft: '6px', + }, +}; + +function Rule({ rule, passes }) { + const color = passes ? impactColors.success : impactColors[rule.impact]; + + return ( +
    +
    + {passes ? '✔' : '✘'} +
    + {rule.message} +
    + ); +} + +Rule.propTypes = { + rule: PropTypes.shape({ + message: PropTypes.node, + }).isRequired, + passes: PropTypes.bool.isRequired, +}; + +/* eslint-disable react/no-array-index-key */ +function Rules({ rules, passes }) { + return ( +
    + {rules.map((rule, index) => )} +
    + ); +} +Rules.propTypes = { + rules: PropTypes.arrayOf( + PropTypes.shape({ + message: PropTypes.node, + }) + ).isRequired, + passes: PropTypes.bool.isRequired, +}; + +export default Rules; diff --git a/addons/a11y/src/components/Report/Tags.js b/addons/a11y/src/components/Report/Tags.js new file mode 100644 index 00000000000..c367e5f53a9 --- /dev/null +++ b/addons/a11y/src/components/Report/Tags.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const styles = { + tags: { + display: 'flex', + flexWrap: 'wrap', + margin: '12px 0', + }, + tag: { + margin: '0 6px', + padding: '5px', + border: '1px solid rgb(234, 234, 234)', + borderRadius: '2px', + color: 'rgb(130, 130, 130)', + fontSize: '12px', + }, +}; + +function Tags({ tags }) { + return ( +
    + {tags.map(tag => ( +
    + {tag} +
    + ))} +
    + ); +} +Tags.propTypes = { + tags: PropTypes.arrayOf(PropTypes.node).isRequired, +}; + +export default Tags; diff --git a/addons/a11y/src/components/Report/index.js b/addons/a11y/src/components/Report/index.js new file mode 100644 index 00000000000..f92cb13a635 --- /dev/null +++ b/addons/a11y/src/components/Report/index.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Item from './Item'; + +const styles = { + container: { + fontSize: '12px', + }, + empty: { + fontSize: '11px', + padding: '20px 12px', + width: '100%', + display: 'block', + textAlign: 'center', + textTransform: 'uppercase', + }, +}; + +function Report({ items, empty, passes }) { + if (items.length) { + return ( +
    + {items.map(item => )} +
    + ); + } + + return {empty}; +} + +Report.propTypes = { + items: PropTypes.arrayOf( + PropTypes.shape({ + description: PropTypes.string, + nodes: PropTypes.array, + tags: PropTypes.array, + }) + ).isRequired, + empty: PropTypes.string.isRequired, + passes: PropTypes.bool.isRequired, +}; + +export default Report; diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js new file mode 100644 index 00000000000..12f8b27dea2 --- /dev/null +++ b/addons/a11y/src/components/Tabs.js @@ -0,0 +1,105 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { baseFonts } from '@storybook/components'; + +const styles = { + container: { + width: '100%', + ...baseFonts, + }, + tabs: { + borderBottom: '1px solid rgb(234, 234, 234)', + flexWrap: 'wrap', + display: 'flex', + }, + tab: { + color: 'rgb(68, 68, 68)', + fontSize: '11px', + textDecoration: 'none', + textTransform: 'uppercase', + padding: '10px 15px', + letterSpacing: '1px', + cursor: 'pointer', + fontWeight: 500, + opacity: 0.7, + border: 'none', + background: 'none', + flex: 1, + }, + tabActive: { + opacity: 1, + fontWeight: 600, + }, +}; + +const tabStyle = active => ({ + ...styles.tab, + ...(active ? styles.tabActive : undefined), +}); + +class Tabs extends Component { + constructor(props) { + super(props); + + this.state = { + active: 0, + }; + + this.onToggle = this.onToggle.bind(this); + this.renderPanel = this.renderPanel.bind(this); + this.renderTabs = this.renderTabs.bind(this); + } + + onToggle(index) { + this.setState({ + active: index, + }); + } + + renderPanel() { + const { tabs } = this.props; + const { active } = this.state; + + return
    {tabs[active].panel}
    ; + } + + renderTabs() { + const { tabs } = this.props; + const { active } = this.state; + + /* eslint-disable react/no-array-index-key */ + return ( +
    + {tabs.map((tab, index) => ( + + ))} +
    + ); + } + + render() { + return ( +
    + {this.renderTabs()} + {this.renderPanel()} +
    + ); + } +} + +Tabs.propTypes = { + tabs: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + panel: PropTypes.node, + }) + ).isRequired, +}; + +export default Tabs; diff --git a/addons/a11y/src/components/WrapStory.js b/addons/a11y/src/components/WrapStory.js new file mode 100644 index 00000000000..ffb43cee017 --- /dev/null +++ b/addons/a11y/src/components/WrapStory.js @@ -0,0 +1,37 @@ +import { Component } from 'react'; +import { findDOMNode } from 'react-dom'; +import PropTypes from 'prop-types'; +import axe from 'axe-core'; + +class WrapStory extends Component { + static propTypes = { + context: PropTypes.shape({}), + storyFn: PropTypes.func, + channel: PropTypes.shape({}), + }; + static defaultProps = { + context: {}, + storyFn: () => {}, + channel: {}, + }; + + /* eslint-disable react/no-find-dom-node */ + componentDidMount() { + const { channel } = this.props; + const wrapper = findDOMNode(this); + + if (wrapper !== null) { + axe.a11yCheck(wrapper, {}, results => { + channel.emit('addon:a11y:check', results); + }); + } + } + + render() { + const { storyFn, context } = this.props; + + return storyFn(context); + } +} + +export default WrapStory; diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js new file mode 100644 index 00000000000..21db1a97f34 --- /dev/null +++ b/addons/a11y/src/index.js @@ -0,0 +1,13 @@ +import addons from '@storybook/addons'; + +import A11yManager from './A11yManager'; +import * as shared from './shared'; + +const manager = new A11yManager(); + +function checkA11y(storyFn, context) { + const channel = addons.getChannel(); + return manager.wrapStory(channel, storyFn, context); +} + +export { checkA11y, shared }; diff --git a/addons/a11y/src/register.js b/addons/a11y/src/register.js new file mode 100644 index 00000000000..043797800f6 --- /dev/null +++ b/addons/a11y/src/register.js @@ -0,0 +1,18 @@ +import React from 'react'; +import addons from '@storybook/addons'; + +import Panel from './components/Panel'; +import { ADDON_ID, PANEL_ID } from './shared'; + +function init() { + addons.register(ADDON_ID, () => { + addons.addPanel(PANEL_ID, { + title: 'Accessibility', + render() { + return ; + }, + }); + }); +} + +export { init }; diff --git a/addons/a11y/src/shared/index.js b/addons/a11y/src/shared/index.js new file mode 100755 index 00000000000..bc1dd032649 --- /dev/null +++ b/addons/a11y/src/shared/index.js @@ -0,0 +1,6 @@ +// addons, panels and events get unique names using a prefix +const ADDON_ID = '@storybook/addon-a11y'; +const PANEL_ID = `${ADDON_ID}/panel`; +const EVENT_ID = `${ADDON_ID}/event`; + +export { ADDON_ID, PANEL_ID, EVENT_ID }; diff --git a/addons/actions/package.json b/addons/actions/package.json index 27df7781965..be5c4d9d6f4 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -27,12 +27,6 @@ "react-inspector": "^2.2.1", "uuid": "^3.1.0" }, - "devDependencies": { - "react": "^16.1.0", - "react-dom": "^16.1.0", - "react-test-renderer": "^16.1.0", - "shelljs": "^0.7.8" - }, "peerDependencies": { "react": "*", "react-dom": "*" diff --git a/addons/events/package.json b/addons/events/package.json index b73c1fabe03..aae777b384a 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -24,13 +24,9 @@ "babel-runtime": "^6.26.0", "format-json": "^1.0.3", "prop-types": "^15.6.0", - "react-textarea-autosize": "^5.2.0", + "react-textarea-autosize": "^5.2.1", "uuid": "^3.1.0" }, - "devDependencies": { - "react": "^16.1.0", - "react-dom": "^16.1.0" - }, "peerDependencies": { "react": "*" } diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 2ec41eabbe0..f4d347b4d58 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -26,11 +26,6 @@ "graphql": "^0.11.7", "prop-types": "^15.6.0" }, - "devDependencies": { - "react": "^16.1.0", - "react-dom": "^16.1.0", - "shelljs": "^0.7.8" - }, "peerDependencies": { "react": "*" } diff --git a/addons/info/package.json b/addons/info/package.json index d349a5dbfa6..783aaba6576 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -24,11 +24,10 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "react": "^16.1.0", - "react-dom": "^16.1.0", "react-test-renderer": "^16.1.0" }, "peerDependencies": { - "react": "*" + "react": "*", + "react-dom": "*" } } diff --git a/addons/knobs/package.json b/addons/knobs/package.json index af5830c6bea..e2b6ac0fba9 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -21,17 +21,15 @@ "global": "^4.3.2", "insert-css": "^2.0.0", "lodash.debounce": "^4.0.8", - "moment": "^2.19.1", + "moment": "^2.19.2", "prop-types": "^15.6.0", "react-color": "^2.11.4", - "react-datetime": "^2.10.3", - "react-textarea-autosize": "^5.2.0", + "react-datetime": "^2.11.0", + "react-textarea-autosize": "^5.2.1", "util-deprecate": "^1.0.2" }, "devDependencies": { "raw-loader": "^0.5.1", - "react": "^16.1.0", - "react-dom": "^16.1.0", "style-loader": "^0.19.0", "vue": "^2.5.3" }, diff --git a/addons/notes/package.json b/addons/notes/package.json index e541ee52d4d..94c79970251 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -24,11 +24,6 @@ "prop-types": "^15.6.0", "util-deprecate": "^1.0.2" }, - "devDependencies": { - "react": "^16.1.0", - "react-addons-test-utils": "^15.5.1", - "react-dom": "^16.1.0" - }, "peerDependencies": { "react": "*" }, diff --git a/addons/options/package.json b/addons/options/package.json index 66fdf157534..3622dab7bc8 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -22,12 +22,6 @@ "dependencies": { "@storybook/addons": "^3.3.0-alpha.3" }, - "devDependencies": { - "react": "^16.1.0", - "react-dom": "^16.1.0", - "react-test-renderer": "^16.1.0", - "shelljs": "^0.7.8" - }, "peerDependencies": { "react": "*", "react-dom": "*" diff --git a/app/react-native/package.json b/app/react-native/package.json index 3d9de24d5d6..9f11522dcc5 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -72,9 +72,6 @@ "ws": "^3.3.1" }, "devDependencies": { - "babel-cli": "^6.26.0", - "react": "^16.1.0", - "react-dom": "^16.1.0", "react-native": "^0.50.3" }, "peerDependencies": { diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js index 9e4f423dd56..fae7c8ea141 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/index.js +++ b/app/react-native/src/preview/components/OnDeviceUI/index.js @@ -27,6 +27,8 @@ const isDeviceInPortrait = () => { const openMenuImage = require('./menu_open.png'); const closeMenuImage = require('./menu_close.png'); +const DRAWER_WIDTH = 250; + export default class OnDeviceUI extends Component { constructor(...args) { super(...args); @@ -36,7 +38,6 @@ export default class OnDeviceUI extends Component { isMenuOpen: false, selectedKind: null, selectedStory: null, - menuWidth: Dimensions.get('screen').width / 2, isPortrait: isDeviceInPortrait(), }; } @@ -58,7 +59,6 @@ export default class OnDeviceUI extends Component { handleDeviceRotation = () => { this.setState({ isPortrait: isDeviceInPortrait(), - menuWidth: Dimensions.get('screen').width / 2, }); }; @@ -86,7 +86,7 @@ export default class OnDeviceUI extends Component { render() { const { stories, events, url } = this.props; - const { isPortrait, menuAnimation, selectedKind, selectedStory, menuWidth } = this.state; + const { isPortrait, menuAnimation, selectedKind, selectedStory } = this.state; const iPhoneXStyles = ifIphoneX( isPortrait @@ -106,7 +106,7 @@ export default class OnDeviceUI extends Component { { translateX: menuAnimation.interpolate({ inputRange: [0, 1], - outputRange: [menuWidth * -1, 0], + outputRange: [-DRAWER_WIDTH - 30, 0], }), }, ], @@ -177,6 +177,7 @@ export default class OnDeviceUI extends Component { diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js index f5904bf8477..f3028404026 100644 --- a/app/react-native/src/preview/components/StoryListView/index.js +++ b/app/react-native/src/preview/components/StoryListView/index.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { ListView, View, Text, TouchableOpacity } from 'react-native'; -import { MinMaxView } from 'react-native-compat'; import style from './style'; const SectionHeader = ({ title, selected }) => ( @@ -92,25 +91,23 @@ export default class StoryListView extends Component { render() { return ( - - ( - this.changeStory(item.kind, item.name)} - /> - )} - renderSectionHeader={(sectionData, sectionName) => ( - - )} - dataSource={this.state.dataSource} - stickySectionHeadersEnabled={false} - /> - + ( + this.changeStory(item.kind, item.name)} + /> + )} + renderSectionHeader={(sectionData, sectionName) => ( + + )} + dataSource={this.state.dataSource} + stickySectionHeadersEnabled={false} + /> ); } } @@ -129,6 +126,7 @@ StoryListView.propTypes = { }).isRequired, selectedKind: PropTypes.string, selectedStory: PropTypes.string, + width: PropTypes.number.isRequired, }; StoryListView.defaultProps = { diff --git a/app/react/package.json b/app/react/package.json index 74f306e84da..8fa79448a09 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -78,10 +78,7 @@ "webpack-hot-middleware": "^2.20.0" }, "devDependencies": { - "babel-cli": "^6.26.0", - "nodemon": "^1.12.1", - "react": "^16.1.0", - "react-dom": "^16.1.0" + "nodemon": "^1.12.1" }, "peerDependencies": { "react": ">=15.0.0 || ^16.0.0", diff --git a/app/vue/package.json b/app/vue/package.json index 6dc444714cb..15fe4603b3f 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -77,7 +77,6 @@ "webpack-hot-middleware": "^2.20.0" }, "devDependencies": { - "babel-cli": "^6.26.0", "nodemon": "^1.12.1", "vue": "^2.5.3", "vue-loader": "^13.5.0", diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js index f00c26dc787..a46d9c4a595 100644 --- a/docs/.eslintrc.js +++ b/docs/.eslintrc.js @@ -1,8 +1,8 @@ const warn = 1; module.exports = { - settings: { - 'import/core-modules': ['config'], + globals: { + graphql: false, }, rules: { 'import/no-unresolved': warn, diff --git a/docs/.gatsby-context.js b/docs/.gatsby-context.js index b9048d71af6..df29ee95276 100644 --- a/docs/.gatsby-context.js +++ b/docs/.gatsby-context.js @@ -4,10 +4,10 @@ // 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 + var context = require.context('./src/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 + context = require.context('./src/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); }); } diff --git a/docs/.storybook/config.js b/docs/.storybook/config.js index 84074b87082..a19d86a3a9b 100644 --- a/docs/.storybook/config.js +++ b/docs/.storybook/config.js @@ -1,10 +1,14 @@ -import { configure } from '@storybook/react'; +import React from 'react'; +import { configure, addDecorator } from '@storybook/react'; +import { MemoryRouter } from 'react-router' import 'bootstrap/dist/css/bootstrap.css'; -import '../css/main.css'; +import '../src/css/main.css'; + +addDecorator(story => {story()}); function loadStories() { - require('../stories'); + require('../src/stories'); } configure(loadStories, module); diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html new file mode 100644 index 00000000000..a103dcffd3b --- /dev/null +++ b/docs/.storybook/preview-head.html @@ -0,0 +1,2 @@ + + diff --git a/docs/components/Homepage/MainLinks/index.js b/docs/components/Homepage/MainLinks/index.js deleted file mode 100644 index eb9c453e665..00000000000 --- a/docs/components/Homepage/MainLinks/index.js +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router'; -import { UsedByBg } from '../UsedBy/'; -import './style.css'; - -const MainLinks = () => ( - -); - -export default MainLinks; diff --git a/docs/config.toml b/docs/config.toml deleted file mode 100644 index 7ef8b8eb136..00000000000 --- a/docs/config.toml +++ /dev/null @@ -1,39 +0,0 @@ -siteTitle = "Storybook" -baseColor = "#e64074" -linkPrefix = "/" - -[docSections] -basics = [ - "/basics/introduction/", - "/basics/quick-start-guide/", - "/basics/slow-start-guide/", - "/basics/guide-react/", - "/basics/guide-vue/", - "/basics/writing-stories/", - "/basics/exporting-storybook/", - "/basics/faq/", - "/basics/community/", -] -configurations = [ - "/configurations/default-config/", - "/configurations/custom-webpack-config/", - "/configurations/custom-babel-config/", - "/configurations/add-custom-head-tags/", - "/configurations/serving-static-files/", - "/configurations/env-vars/", - "/configurations/cli-options/", -] -testing = [ - "/testing/react-ui-testing/", - "/testing/structural-testing/", - "/testing/interaction-testing/", - "/testing/css-style-testing/", - "/testing/manual-testing/", -] -addons = [ - "/addons/introduction/", - "/addons/using-addons/", - "/addons/addon-gallery/", - "/addons/writing-addons/", - "/addons/api/", -] diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js new file mode 100644 index 00000000000..f7f85920670 --- /dev/null +++ b/docs/gatsby-config.js @@ -0,0 +1,70 @@ +module.exports = { + siteMetadata: { + siteTitle: 'Storybook', + baseColor: '#e64074', + linkPrefix: '/', + + docSections: { + basics: [ + '/basics/introduction/', + '/basics/quick-start-guide/', + '/basics/slow-start-guide/', + '/basics/guide-react/', + '/basics/guide-vue/', + '/basics/writing-stories/', + '/basics/exporting-storybook/', + '/basics/faq/', + '/basics/community/', + ], + configurations: [ + '/configurations/default-config/', + '/configurations/custom-webpack-config/', + '/configurations/custom-babel-config/', + '/configurations/add-custom-head-tags/', + '/configurations/serving-static-files/', + '/configurations/env-vars/', + '/configurations/cli-options/', + ], + testing: [ + '/testing/react-ui-testing/', + '/testing/structural-testing/', + '/testing/interaction-testing/', + '/testing/css-style-testing/', + '/testing/manual-testing/', + ], + addons: [ + '/addons/introduction/', + '/addons/using-addons/', + '/addons/addon-gallery/', + '/addons/writing-addons/', + '/addons/api/', + ], + }, + }, + plugins: [ + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'pages', + path: `${__dirname}/src/pages/`, + }, + }, + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-images', + options: { + maxWidth: 690, + }, + }, + 'gatsby-remark-autolink-headers', + 'gatsby-remark-copy-linked-files', + 'gatsby-remark-smartypants', + ], + }, + }, + 'gatsby-plugin-sharp', + ], +}; diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index 6a1e57da584..1280361366a 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -1,6 +1,7 @@ // From: https://gist.github.com/ivanoats/8d01d9e934fdc17bae9090147f1e799b const fs = require('fs'); +const path = require('path'); const sm = require('sitemap'); function pagesToSitemap(pages) { @@ -21,8 +22,71 @@ function generateSitemap(pages) { } module.exports = { - postBuild(pages, callback) { - generateSitemap(pages); - callback(); + async onPostBuild({ graphql }) { + const result = await graphql(` + { + allSitePage { + edges { + node { + path + } + } + } + } + `); + generateSitemap(result.data.allSitePage.edges.map(({ node }) => node)); + }, + onCreateNode({ node, boundActionCreators, getNode }) { + const { createNodeField } = boundActionCreators; + let slug; + if (node.internal.type === 'MarkdownRemark') { + const fileNode = getNode(node.parent); + const parsedFilePath = path.parse(fileNode.relativePath); + if (parsedFilePath.name !== 'index' && parsedFilePath.dir !== '') { + slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`; + } else if (parsedFilePath.dir === '') { + slug = `/${parsedFilePath.name}/`; + } else { + slug = `/${parsedFilePath.dir}/`; + } + + // Add slug as a field on the node. + createNodeField({ node, name: 'slug', value: slug }); + } + }, + async createPages({ graphql, boundActionCreators }) { + const { createPage } = boundActionCreators; + + const template = path.resolve('src/templates/_docstemplate.jsx'); + // Query for all markdown "nodes" and for the slug we previously created. + const result = await graphql( + ` + { + allMarkdownRemark { + edges { + node { + fields { + slug + } + } + } + } + } + ` + ); + if (result.errors) { + throw result.errors; + } + + // Create pages. + result.data.allMarkdownRemark.edges.forEach(edge => { + createPage({ + path: edge.node.fields.slug, // required + component: template, + context: { + slug: edge.node.fields.slug, + }, + }); + }); }, }; diff --git a/docs/loaders/markdown-loader/index.js b/docs/loaders/markdown-loader/index.js deleted file mode 100644 index 9620424afa2..00000000000 --- a/docs/loaders/markdown-loader/index.js +++ /dev/null @@ -1,60 +0,0 @@ -// see also: https://github.com/gatsbyjs/gatsby-starter-kitchen-sink/blob/master/loaders/markdown-loader/index.js - -const frontMatter = require('front-matter'); -const markdownIt = require('markdown-it'); -const hljs = require('highlight.js'); -const path = require('path'); -const loaderUtils = require('loader-utils'); - -const logger = console; - -const highlight = (str, lang) => { - if (lang !== null && hljs.getLanguage(lang)) { - try { - return hljs.highlight(lang, str).value; - } catch (error) { - logger.error(error); - } - } - try { - return hljs.highlightAuto(str).value; - } catch (error) { - logger.error(error); - } - return ''; -}; - -const md = (linkPrefix, shouldPrefix) => - markdownIt({ - html: true, - linkify: true, - typographer: true, - highlight, - replaceLink: link => { - if (shouldPrefix && path.isAbsolute(link)) { - return linkPrefix + link; - } - return link; - }, - }) - .use(require('markdown-it-replace-link')) // eslint-disable-line - .use(require('markdown-it-anchor'), { // eslint-disable-line - permalink: true, - permalinkSymbol: '⚓️', - }); - -module.exports = function markdownLoader(content) { - this.cacheable(); - - const query = loaderUtils.parseQuery(this.query); - const linkPrefix = query.config.linkPrefix || ''; - const { shouldPrefix } = query; - - const meta = frontMatter(content); - const body = md(linkPrefix, shouldPrefix).render(meta.body); - const result = Object.assign({}, meta.attributes, { - body, - }); - this.value = result; - return `module.exports = ${JSON.stringify(result)}`; -}; diff --git a/docs/package.json b/docs/package.json index 2bb0488365e..0a573cb5619 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,7 +14,8 @@ "deploy:ci": "gh-pages -t -r https://${GH_TOKEN}@github.com/storybooks/storybook.git -d public -o origin -b gh-pages", "deploy:manual": "gh-pages -t -r git@github.com:storybooks/storybook.git -d public -o origin -b gh-pages", "dev": "gatsby develop", - "storybook": "start-storybook -p 9009 -s pages" + "serve": "gatsby serve", + "storybook": "start-storybook -p 9009 -s src/pages" }, "dependencies": { "@storybook/addon-actions": "^3.2.15", @@ -29,35 +30,28 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "bootstrap": "^3.3.7", - "chroma-js": "^0.7.8", - "color-pairs-picker": "^1.3.5", - "docsearch.js": "^2.3.3", - "front-matter": "^2.1.2", - "gatsby": "0.12.48", + "gatsby": "^1.9.112", + "gatsby-link": "^1.6.28", + "gatsby-plugin-sharp": "^1.6.21", + "gatsby-remark-autolink-headers": "^1.4.8", + "gatsby-remark-copy-linked-files": "^1.5.21", + "gatsby-remark-images": "^1.5.32", + "gatsby-remark-smartypants": "^1.4.8", + "gatsby-source-filesystem": "^1.5.8", + "gatsby-transformer-remark": "^1.7.21", "gh-pages": "^1.0.0", "global": "^4.3.2", "highlight.js": "^9.12.0", - "loader-utils": "^1.1.0", "lodash": "^4.17.2", - "markdown-it": "^8.3.1", - "markdown-it-anchor": "^4.0.0", - "markdown-it-replace-link": "^1.0.1", "marked": "^0.3.6", "prop-types": "^15.6.0", "react": "^15.6.1", "react-document-title": "^2.0.3", "react-dom": "^15.6.1", "react-helmet": "^5.0.3", - "react-motion": "^0.5.2", - "react-responsive-grid": "^0.3.3", - "react-router": "^2.6.1", - "react-stack-grid": "^0.5.0", - "react-typography": "^0.16.5", - "sitemap": "^1.12.0", - "typography": "^0.16.6", - "typography-plugin-code": "^0.15.9", - "underscore.string": "^3.2.2", - "webpack": "^1.15.0" + "react-router": "^4.2.0", + "react-stack-grid": "^0.6.0", + "sitemap": "^1.12.0" }, "private": true } diff --git a/docs/pages/_docstemplate.jsx b/docs/pages/_docstemplate.jsx deleted file mode 100644 index 1cd13f0c30d..00000000000 --- a/docs/pages/_docstemplate.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import capitalize from 'lodash/capitalize'; - -import Docs from '../components/Docs'; -import { config } from '../config.toml'; - -const categories = [ - { - id: 'react-storybook', - title: 'React Storybook', - }, -]; - -const getSections = (catId, options, pages) => { - // FIXME: use catId - const sections = Object.keys(options.docSections); - return sections.map(key => ({ - id: key, - heading: capitalize(key), - items: options.docSections[key].map(path => { - const page = pages.find(p => p.path === path); - return page.data; - }), - })); -}; - -const getSelectedItem = (children, sectionId) => { - const { data } = children.props.route.page; - return { - id: data.id, - section: sectionId, - title: data.title, - content: data.body, - }; -}; - -const parsePath = path => { - const comps = path.split('/'); - const [, itemId, sectionId, catId] = comps.reverse(); - return { catId, sectionId, itemId }; -}; - -const DocsContainer = props => { - const { pages } = props.route; - const { children } = props; - const { catId, sectionId, itemId } = parsePath(children.props.route.path); - - const docProps = { - categories, - selectedCatId: catId, - sections: getSections(catId, config, pages), - selectedItem: getSelectedItem(children, sectionId), - selectedSectionId: sectionId, - selectedItemId: itemId, - }; - - return ; -}; - -DocsContainer.propTypes = { - location: PropTypes.object, // eslint-disable-line - route: PropTypes.object, // eslint-disable-line - children: PropTypes.node.isRequired, -}; -DocsContainer.contextTypes = { - router: PropTypes.object.isRequired, -}; - -export default DocsContainer; diff --git a/docs/pages/addons/_template.jsx b/docs/pages/addons/_template.jsx deleted file mode 100644 index 513c252c577..00000000000 --- a/docs/pages/addons/_template.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from '../_docstemplate'; diff --git a/docs/pages/basics/_template.jsx b/docs/pages/basics/_template.jsx deleted file mode 100644 index 513c252c577..00000000000 --- a/docs/pages/basics/_template.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from '../_docstemplate'; diff --git a/docs/pages/configurations/_template.jsx b/docs/pages/configurations/_template.jsx deleted file mode 100644 index 513c252c577..00000000000 --- a/docs/pages/configurations/_template.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from '../_docstemplate'; diff --git a/docs/pages/testing/_template.jsx b/docs/pages/testing/_template.jsx deleted file mode 100644 index 513c252c577..00000000000 --- a/docs/pages/testing/_template.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from '../_docstemplate'; diff --git a/docs/components/Breakpoint.js b/docs/src/components/Breakpoint.js similarity index 100% rename from docs/components/Breakpoint.js rename to docs/src/components/Breakpoint.js diff --git a/docs/components/Docs/Container/index.js b/docs/src/components/Docs/Container/index.js similarity index 100% rename from docs/components/Docs/Container/index.js rename to docs/src/components/Docs/Container/index.js diff --git a/docs/components/Docs/Container/style.css b/docs/src/components/Docs/Container/style.css similarity index 100% rename from docs/components/Docs/Container/style.css rename to docs/src/components/Docs/Container/style.css diff --git a/docs/components/Docs/Content/index.js b/docs/src/components/Docs/Content/index.js similarity index 100% rename from docs/components/Docs/Content/index.js rename to docs/src/components/Docs/Content/index.js diff --git a/docs/components/Docs/Content/style.css b/docs/src/components/Docs/Content/style.css similarity index 100% rename from docs/components/Docs/Content/style.css rename to docs/src/components/Docs/Content/style.css diff --git a/docs/components/Docs/Nav/dropdown.js b/docs/src/components/Docs/Nav/dropdown.js similarity index 89% rename from docs/components/Docs/Nav/dropdown.js rename to docs/src/components/Docs/Nav/dropdown.js index 24cccede0bd..c8831064625 100644 --- a/docs/components/Docs/Nav/dropdown.js +++ b/docs/src/components/Docs/Nav/dropdown.js @@ -1,9 +1,14 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { browserHistory } from 'react-router'; +import { Redirect } from 'react-router'; import './style.css'; class Nav extends React.Component { + constructor(...args) { + super(...args); + this.state = {}; + } + handleHeadingChange(event) { const { sections } = this.props; const selectedSectionId = event.target.value; @@ -20,7 +25,7 @@ class Nav extends React.Component { changeRoute(selectedSectionId, selectedItemId) { const url = `/${selectedSectionId}/${selectedItemId}/`; - browserHistory.push(url); + this.setState({ redirect: url }); } renderNavOpts(nav) { @@ -46,7 +51,9 @@ class Nav extends React.Component { const selectedSectionData = sections.find(section => section.id === selectedSectionId); const navs = selectedSectionData.items; - return ( + return this.state.redirect ? ( + + ) : (
    + +
    +
    + +
    + +

    Basics

    + +
      +
    • + Quick setup +
      • +
    • + Adding to existing project +
      • +
    • + Writing stories +
      • +
    +
    + +
    + +

    Configuration

    + +
      +
    • + Babel configurations +
      • +
    • + Webpack configurations +
      • +
    • + Custom scripts & styling +
      • +
    • + Serving static files +
      • +
    +
    + +
    + +

    Addons

    + +
      +
    • + Intro to Addons +
      • +
    • + Using Addons +
      • +
    • + Addon Gallery +
      • +
    • + Writing Addons +
      • +
    • + Api +
      • +
    +
    + + + + ); + } +} + +export default MainLinks; diff --git a/docs/components/Homepage/MainLinks/style.css b/docs/src/components/Homepage/MainLinks/style.css similarity index 100% rename from docs/components/Homepage/MainLinks/style.css rename to docs/src/components/Homepage/MainLinks/style.css diff --git a/docs/components/Homepage/Platforms/index.js b/docs/src/components/Homepage/Platforms/index.js similarity index 100% rename from docs/components/Homepage/Platforms/index.js rename to docs/src/components/Homepage/Platforms/index.js diff --git a/docs/components/Homepage/Platforms/style.css b/docs/src/components/Homepage/Platforms/style.css similarity index 100% rename from docs/components/Homepage/Platforms/style.css rename to docs/src/components/Homepage/Platforms/style.css diff --git a/docs/components/Homepage/UsedBy/index.jsx b/docs/src/components/Homepage/UsedBy/index.jsx similarity index 98% rename from docs/components/Homepage/UsedBy/index.jsx rename to docs/src/components/Homepage/UsedBy/index.jsx index 84b3d73aef1..abf77257531 100644 --- a/docs/components/Homepage/UsedBy/index.jsx +++ b/docs/src/components/Homepage/UsedBy/index.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Link } from 'react-router'; +import Link from 'gatsby-link'; import './style.css'; export const UsedByBg = ({ color, style }) => ( diff --git a/docs/components/Homepage/UsedBy/style.css b/docs/src/components/Homepage/UsedBy/style.css similarity index 87% rename from docs/components/Homepage/UsedBy/style.css rename to docs/src/components/Homepage/UsedBy/style.css index 6cda47a98b6..f5b60b49b1e 100644 --- a/docs/components/Homepage/UsedBy/style.css +++ b/docs/src/components/Homepage/UsedBy/style.css @@ -67,7 +67,11 @@ font-size: 2em; } -.used-by-more-examples a { +.used-by-more-examples a, +.used-by-more-examples a:visited, +.used-by-more-examples a:hover, +.used-by-more-examples a:active, +.used-by-more-examples a:focus { background-color: #e4004f; color: #fff; padding: 20px; diff --git a/docs/components/Homepage/index.js b/docs/src/components/Homepage/index.js similarity index 100% rename from docs/components/Homepage/index.js rename to docs/src/components/Homepage/index.js diff --git a/docs/components/Homepage/style.css b/docs/src/components/Homepage/style.css similarity index 100% rename from docs/components/Homepage/style.css rename to docs/src/components/Homepage/style.css diff --git a/docs/components/breakpoints.css b/docs/src/components/breakpoints.css similarity index 100% rename from docs/components/breakpoints.css rename to docs/src/components/breakpoints.css diff --git a/docs/css/github.css b/docs/src/css/github.css similarity index 100% rename from docs/css/github.css rename to docs/src/css/github.css diff --git a/docs/css/main.css b/docs/src/css/main.css similarity index 100% rename from docs/css/main.css rename to docs/src/css/main.css diff --git a/docs/design/docs/docs-container.png b/docs/src/design/docs/docs-container.png similarity index 100% rename from docs/design/docs/docs-container.png rename to docs/src/design/docs/docs-container.png diff --git a/docs/design/docs/docs-content.png b/docs/src/design/docs/docs-content.png similarity index 100% rename from docs/design/docs/docs-content.png rename to docs/src/design/docs/docs-content.png diff --git a/docs/design/docs/docs-nav.png b/docs/src/design/docs/docs-nav.png similarity index 100% rename from docs/design/docs/docs-nav.png rename to docs/src/design/docs/docs-nav.png diff --git a/docs/design/docs/docs.png b/docs/src/design/docs/docs.png similarity index 100% rename from docs/design/docs/docs.png rename to docs/src/design/docs/docs.png diff --git a/docs/design/homepage/built-for.png b/docs/src/design/homepage/built-for.png similarity index 100% rename from docs/design/homepage/built-for.png rename to docs/src/design/homepage/built-for.png diff --git a/docs/design/homepage/demo.png b/docs/src/design/homepage/demo.png similarity index 100% rename from docs/design/homepage/demo.png rename to docs/src/design/homepage/demo.png diff --git a/docs/design/homepage/featured-storybooks.png b/docs/src/design/homepage/featured-storybooks.png similarity index 100% rename from docs/design/homepage/featured-storybooks.png rename to docs/src/design/homepage/featured-storybooks.png diff --git a/docs/design/homepage/footer.png b/docs/src/design/homepage/footer.png similarity index 100% rename from docs/design/homepage/footer.png rename to docs/src/design/homepage/footer.png diff --git a/docs/design/homepage/header.png b/docs/src/design/homepage/header.png similarity index 100% rename from docs/design/homepage/header.png rename to docs/src/design/homepage/header.png diff --git a/docs/design/homepage/heading.png b/docs/src/design/homepage/heading.png similarity index 100% rename from docs/design/homepage/heading.png rename to docs/src/design/homepage/heading.png diff --git a/docs/design/homepage/homepage.png b/docs/src/design/homepage/homepage.png similarity index 100% rename from docs/design/homepage/homepage.png rename to docs/src/design/homepage/homepage.png diff --git a/docs/design/homepage/main-links.png b/docs/src/design/homepage/main-links.png similarity index 100% rename from docs/design/homepage/main-links.png rename to docs/src/design/homepage/main-links.png diff --git a/docs/design/homepage/screenshot.png b/docs/src/design/homepage/screenshot.png similarity index 100% rename from docs/design/homepage/screenshot.png rename to docs/src/design/homepage/screenshot.png diff --git a/docs/design/homepage/storybook-icon.png b/docs/src/design/homepage/storybook-icon.png similarity index 100% rename from docs/design/homepage/storybook-icon.png rename to docs/src/design/homepage/storybook-icon.png diff --git a/docs/design/homepage/storybook-logo.svg b/docs/src/design/homepage/storybook-logo.svg similarity index 100% rename from docs/design/homepage/storybook-logo.svg rename to docs/src/design/homepage/storybook-logo.svg diff --git a/docs/html.js b/docs/src/html.js similarity index 61% rename from docs/html.js rename to docs/src/html.js index b9b98d3e2cf..b8ef2506983 100644 --- a/docs/html.js +++ b/docs/src/html.js @@ -3,36 +3,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import DocumentTitle from 'react-document-title'; -import { prefixLink } from 'gatsby/dist/isomorphic/gatsby-helpers'; import favicon from './design/homepage/storybook-icon.png'; -const BUILD_TIME = new Date().getTime(); - const HTML = props => { const title = DocumentTitle.rewind(); let css; if (process.env.NODE_ENV === 'production') { // eslint-disable-next-line - css =