diff --git a/.gitignore b/.gitignore index 964f8c52e7..7c940fe464 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ coverage/ dist/ docs/build/ docs/app/docgenInfo.json +docs/app/menuInfo.json dll/ .DS_Store diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js index 8adb676aed..3e32b26267 100644 --- a/docs/app/Components/ComponentDoc/ComponentDoc.js +++ b/docs/app/Components/ComponentDoc/ComponentDoc.js @@ -1,252 +1,73 @@ -import cx from 'classnames' -import _ from 'lodash' import PropTypes from 'prop-types' -import React, { Component } from 'react' +import React, {Component} from 'react' import DocumentTitle from 'react-document-title' -import { Link } from 'react-router-dom' +import {Grid} from 'semantic-ui-react' -import { repoURL } from 'docs/app/utils' -import { META } from 'src/lib' -import * as semanticUIReact from 'src' -import docgenInfo from '../../docgenInfo.json' import ComponentExamples from './ComponentExamples' import ComponentProps from './ComponentProps' +import ComponentDocHeader from './ComponentDocHeader' +import ComponentDocLinks from './ComponentDocLinks' +import ComponentDocSee from './ComponentDocSee' +import ComponentSidebar from './ComponentSidebar' -const { Divider, Grid, Header, Icon, List } = semanticUIReact - -const docgenPaths = _.keys(docgenInfo) - -const pathSepRegEx = new RegExp(_.escapeRegExp(__PATH_SEP__), 'g') - -const getDocgenPath = componentName => _.find(docgenPaths, path => ( - new RegExp(`${__PATH_SEP__}${componentName}.js$`).test(path) -)) - -// no matter the OS path separator, use '/' -const getPosixPath = componentName => getDocgenPath(componentName).replace(pathSepRegEx, '/') - -const getGithubSourceUrl = (componentName) => { - const posixPath = getPosixPath(componentName) - return `${repoURL}/blob/master/${posixPath}` -} - -const getGithubEditUrl = (componentName) => { - const posixPath = getPosixPath(componentName) - return `${repoURL}/edit/master/${posixPath}` -} - -const getSemanticUIDocsUrl = _meta => ( - `https://semantic-ui.com/${_meta.type}s/${_meta.parent || _meta.name}`.toLowerCase() -) - -const showPropsStyle = { - display: 'inline-flex', - margin: '1em 0.5em', - marginLeft: 0, - cursor: 'pointer', -} - -const subDescriptionStyle = { - fontSize: '1.08em', - color: '#777', -} - -const linkListStyle = { - position: 'absolute', - padding: '0.5em', - margin: '0.5em', - top: '0', - right: '0', - boxShadow: '0 0 1em 0.5em #f7f7f7', - background: '#f7f7f7', -} +const topRowStyle = {margin: '1em'} export default class ComponentDoc extends Component { - static propTypes = { - _meta: PropTypes.object, - } - - componentWillMount() { - this.setState({ - showPropsFor: this.props._meta.name, - }) - } - - componentWillReceiveProps(nextProps) { - this.setState({ - showPropsFor: this.state.showPropsFor ? nextProps._meta.name : null, - }) + static childContextTypes = { + onTopPassed: PropTypes.func } - toggleProps = (name) => { - this.setState({ - showPropsFor: this.state.showPropsFor === name ? null : name, - }) - } - - renderSee() { - const { _meta } = this.props - const docPath = getDocgenPath(_meta.name) - const docgen = docgenInfo[docPath] - const seeTags = _.filter(docgen.docBlock.tags, ['title', 'see']) - - const seeLinks = _.map(seeTags, ({ description }) => { - const seeMeta = _.get(semanticUIReact[description], '_meta') - if (!seeMeta) return - - const { type, name } = seeMeta - - return ( - - {description} - - ) - }) - - // still render empty lists to reserve the whitespace - return ( - - -
- {seeLinks.length > 0 ? 'See:' : ' '} -
- - {seeLinks} - - ) + static propTypes = { + _meta: PropTypes.object, } - renderSemanticDocsLink = () => { - const { _meta } = this.props - - if (META.isAddon(_meta)) return null + state = {} - return ( - - - - - Semantic UI {_meta.parent || _meta.name} Docs - - - - ) + getChildContext() { + return { + onTopPassed: this.handleExampleTopPassed, + }; } - renderGithubSourceLink() { - const { _meta } = this.props - const docPath = getDocgenPath(_meta.name) - // no matter the OS path separator, use '/' since these link to github - const posixPath = docPath.replace(pathSepRegEx, '/') - return ( - - - - - {posixPath} - - - - ) + handleExampleTopPassed = (e, { examplePath, title }) => { + console.log(title) + this.setState({ activePath: examplePath }) } - renderProps = () => { - const { _meta } = this.props - const { showPropsFor } = this.state - - const itemCX = name => cx(showPropsFor === name && 'active', 'link item') - const selectedDocgen = docgenInfo[getDocgenPath(showPropsFor)] - const toggleIcon = `toggle ${showPropsFor ? 'on' : 'off'}` - - const subComponents = _.flatMap(semanticUIReact, SDComponent => _.filter(SDComponent, staticValue => ( - _.get(staticValue, '_meta.parent') === _meta.name - ))) - - const hasSubComponents = !_.isEmpty(subComponents) - const showSubDescription = hasSubComponents && _.get(selectedDocgen, 'docBlock.description') - - const subComponentItems = _.map(subComponents, ({ _meta: { name } }) => ( -
this.toggleProps(name)}> - {_meta.name}.{name.replace(_meta.name, '')} -
- )) - - return ( -
-
this.toggleProps(showPropsFor || _meta.name)} - > - Props{hasSubComponents && ':'} -
-
- {hasSubComponents && ( -
this.toggleProps(_meta.name)}> - {_meta.name} -
- )} - {subComponentItems} -
- {selectedDocgen && ( -
- {showSubDescription && ( -
- {selectedDocgen.docBlock.description} - -
- )} - -
- )} -
- ) - } - - renderHeader = () => { - const { _meta } = this.props - const docgen = docgenInfo[getDocgenPath(_meta.name)] - - return ( -
- {_meta.name} - - {/* TODO: Remove once all components have descriptions */} - {docgen.docBlock.description || ( - - Add a description. Instructions are{' '} - - here. - - {' '}Description is in the SUI Docs, right there - - )} - -
- ) - } + handleExamplesRef = examplesRef => this.setState({ examplesRef }) render() { - const { _meta } = this.props + const {_meta} = this.props + const { activePath, examplesRef } = this.state return ( - -
- + + + + + + + + + + + + + - {this.renderHeader()} - {this.renderSee()} - - {this.renderGithubSourceLink()} - {this.renderSemanticDocsLink()} - - {this.renderProps()} +
+ +
+ + + - - -
+ + ) } diff --git a/docs/app/Components/ComponentDoc/ComponentDocHeader.js b/docs/app/Components/ComponentDoc/ComponentDocHeader.js new file mode 100644 index 0000000000..ab02d646c1 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentDocHeader.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { Header } from 'semantic-ui-react' + +import { pure } from 'docs/app/HOC' +import { getDocDescription } from 'docs/app/utils' + +const headerStyle = { marginBottom: '0.25em' } + +const ComponentDocHeader = ({ componentName }) => ( +
+ {componentName} + {getDocDescription(componentName)} +
+) + +ComponentDocHeader.propTypes = { + componentName: PropTypes.string, +} + +export default pure(ComponentDocHeader) diff --git a/docs/app/Components/ComponentDoc/ComponentDocLinks.js b/docs/app/Components/ComponentDoc/ComponentDocLinks.js new file mode 100644 index 0000000000..65ac09a155 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentDocLinks.js @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { List } from 'semantic-ui-react' + +import { pure } from 'docs/app/HOC' +import { getGithubSourceUrl, getPosixPath, getSemanticUIDocsUrl } from 'docs/app/utils' + +const linkListStyle = { + background: '#f7f7f7', + boxShadow: '0 0 1em 0.5em #f7f7f7', + margin: '0.5em', + padding: '0.5em', + position: 'absolute', + right: '0', + top: '0', +} + +const ComponentDocLinks = ({ componentName, type }) => { + const ghLink = getGithubSourceUrl(componentName) + const suiLink = getSemanticUIDocsUrl(componentName, type) + + return ( + + + {getPosixPath(componentName)} + + )} + icon='github' + /> + {suiLink && ( + Semantic UI {componentName} Docs} + icon='book' + /> + )} + + ) +} + +ComponentDocLinks.propTypes = { + componentName: PropTypes.string, + type: PropTypes.string, +} + +export default pure(ComponentDocLinks) diff --git a/docs/app/Components/ComponentDoc/ComponentDocSee.js b/docs/app/Components/ComponentDoc/ComponentDocSee.js new file mode 100644 index 0000000000..6375c84f40 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentDocSee.js @@ -0,0 +1,37 @@ +import _ from 'lodash' +import PropTypes from 'prop-types' +import React from 'react' +import { Link } from 'react-router-dom' +import { Header, List } from 'semantic-ui-react' + +import { getSeeLinks } from 'docs/app/utils' + +const listStyle = { display: 'block' } + +const ComponentDocSee = ({ componentName }) => { + const links = getSeeLinks(componentName) + + return ( + + {/* still render empty lists to reserve the whitespace */} + +
0 ? 'See:' : ' '} + size='tiny' + /> + + {_.map(links, ({ description, name, type }) => ( + + {description} + + ))} + + ) +} + +ComponentDocSee.propTypes = { + componentName: PropTypes.string, +} + +export default ComponentDocSee diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js index 2ac3448878..154d10423f 100644 --- a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js +++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js @@ -8,7 +8,7 @@ import { html } from 'js-beautify' import copyToClipboard from 'copy-to-clipboard' import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils' -import { Divider, Grid, Menu } from 'src' +import { Divider, Grid, Menu, Visibility } from 'src' import Editor from 'docs/app/Components/Editor/Editor' import ComponentControls from '../ComponentControls' import ComponentExampleTitle from './ComponentExampleTitle' @@ -40,6 +40,10 @@ const errorStyle = { * Allows toggling the the raw `code` code block. */ class ComponentExample extends Component { + static contextTypes = { + onTopPassed: PropTypes.func, + }; + static propTypes = { children: PropTypes.node, description: PropTypes.node, @@ -110,6 +114,8 @@ class ComponentExample extends Component { else this.removeHash() } + handleTopPassed = () => _.invoke(this.context, 'onTopPassed', null, this.props) + copyJSX = () => { copyToClipboard(this.state.sourceCode) this.setState({ copiedCode: true }) @@ -381,6 +387,11 @@ class ComponentExample extends Component { } return ( + + ) } } diff --git a/docs/app/Components/ComponentDoc/ComponentExamples.js b/docs/app/Components/ComponentDoc/ComponentExamples.js index 6f5908eaa7..3326d76048 100644 --- a/docs/app/Components/ComponentDoc/ComponentExamples.js +++ b/docs/app/Components/ComponentDoc/ComponentExamples.js @@ -8,24 +8,24 @@ import ContributionPrompt from './ContributionPrompt' export default class ComponentExamples extends Component { static propTypes = { - name: PropTypes.string, + componentName: PropTypes.string, } renderExamples = () => { - const { name } = this.props + const { componentName } = this.props - const examplePath = _.find(exampleContext.keys(), path => new RegExp(`${name}/index.js$`).test(path)) + const examplePath = _.find(exampleContext.keys(), path => new RegExp(`${componentName}/index.js$`).test(path)) return examplePath && createElement(exampleContext(examplePath).default) } renderMissingExamples = () => { - const { name } = this.props + const { componentName } = this.props return ( - Looks like we're missing {`<${name} />`} examples. + Looks like we're missing {`<${componentName} />`} examples. diff --git a/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDefaultValue.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDefaultValue.js new file mode 100644 index 0000000000..579fb4948e --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDefaultValue.js @@ -0,0 +1,13 @@ +import _ from 'lodash' +import PropTypes from 'prop-types' +import React from 'react' + +import { pure } from 'docs/app/HOC' + +const ComponentPropDefaultValue = ({ value }) => (_.isNil(value) ? null : {value}) + +ComponentPropDefaultValue.propTypes = { + value: PropTypes.node, +} + +export default pure(ComponentPropDefaultValue) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDescription.js similarity index 59% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDescription.js index fca3df9b71..af8d80471e 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropDescription.js @@ -4,14 +4,14 @@ import React from 'react' import { pure } from 'docs/app/HOC' -const ComponentPropsDescription = ({ description }) => (_.isNil(description) ? null : ( +const ComponentPropDescription = ({ description }) => (_.isNil(description) ? null : (

{_.map(description, line => [line,
])}

)) -ComponentPropsDescription.propTypes = { +ComponentPropDescription.propTypes = { description: PropTypes.arrayOf(PropTypes.string), } -export default pure(ComponentPropsDescription) +export default pure(ComponentPropDescription) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnum.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnum.js similarity index 52% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnum.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnum.js index 698e4633ac..38523739ae 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnum.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnum.js @@ -3,20 +3,20 @@ import PropTypes from 'prop-types' import React from 'react' import { updateForKeys } from 'docs/app/HOC' -import ComponentPropsExtra from './ComponentPropsExtra' -import ComponentPropsToggle from './ComponentPropsEnumToggle' -import ComponentPropsValue from './ComponentPropsEnumValue' +import ComponentPropExtra from './ComponentPropExtra' +import ComponentPropToggle from './ComponentPropEnumToggle' +import ComponentPropValue from './ComponentPropEnumValue' -const ComponentPropsEnum = ({ limit, showAll, toggle, type, values }) => { +const ComponentPropEnum = ({ limit, showAll, toggle, type, values }) => { if (type !== 'enum' || !values) return null const exceeds = values.length > limit const sliced = showAll ? values : _.slice(values, 0, limit) return ( - + {exceeds && ( - { )}
- {_.map(sliced, value => {value})} + {_.map(sliced, value => {value})} {exceeds && !showAll && '...'}
- + ) } -ComponentPropsEnum.defaultProps = { +ComponentPropEnum.defaultProps = { limit: 50, } -ComponentPropsEnum.propTypes = { +ComponentPropEnum.propTypes = { limit: PropTypes.number, showAll: PropTypes.bool, toggle: PropTypes.func, @@ -43,4 +43,4 @@ ComponentPropsEnum.propTypes = { values: PropTypes.array, } -export default updateForKeys(['showAll'])(ComponentPropsEnum) +export default updateForKeys(['showAll'])(ComponentPropEnum) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumToggle.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumToggle.js similarity index 66% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumToggle.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumToggle.js index 1186444ac1..c166318691 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumToggle.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumToggle.js @@ -7,16 +7,16 @@ const toggleStyle = { cursor: 'pointer', } -const ComponentPropsEnumToggle = ({ showAll, toggle, total }) => ( +const ComponentPropEnumToggle = ({ showAll, toggle, total }) => ( {showAll ? 'Show less' : `Show all ${total}`} ) -ComponentPropsEnumToggle.propTypes = { +ComponentPropEnumToggle.propTypes = { showAll: PropTypes.bool, toggle: PropTypes.func, total: PropTypes.number, } -export default updateForKeys(['showAll'])(ComponentPropsEnumToggle) +export default updateForKeys(['showAll'])(ComponentPropEnumToggle) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumValue.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumValue.js similarity index 66% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumValue.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumValue.js index e85a479122..9a94835fbf 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsEnumValue.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropEnumValue.js @@ -8,14 +8,14 @@ const spanStyle = { paddingRight: '0.2em', } -const ComponentPropsEnumValue = ({ children }) => ( +const ComponentPropEnumValue = ({ children }) => ( {children} ) -ComponentPropsEnumValue.propTypes = { +ComponentPropEnumValue.propTypes = { children: PropTypes.node, } -export default neverUpdate(ComponentPropsEnumValue) +export default neverUpdate(ComponentPropEnumValue) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsExtra.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropExtra.js similarity index 79% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsExtra.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropExtra.js index 8df08ecdaf..d7d3c5b22f 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsExtra.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropExtra.js @@ -16,7 +16,7 @@ const contentInlineStyle = { display: 'inline', } -const ComponentPropsExtra = ({ children, inline, title, ...rest }) => ( +const ComponentPropExtra = ({ children, inline, title, ...rest }) => (
{title}
@@ -25,10 +25,10 @@ const ComponentPropsExtra = ({ children, inline, title, ...rest }) => (
) -ComponentPropsExtra.propTypes = { +ComponentPropExtra.propTypes = { children: PropTypes.node, inline: PropTypes.bool, title: PropTypes.node, } -export default ComponentPropsExtra +export default ComponentPropExtra diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsFunctionSignature.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.js similarity index 78% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsFunctionSignature.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.js index 0c818bbc7f..6c17584045 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsFunctionSignature.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import React from 'react' import { neverUpdate } from 'docs/app/HOC' -import ComponentPropsExtra from './ComponentPropsExtra' +import ComponentPropExtra from './ComponentPropExtra' const descriptionStyle = { flex: '5 5 0', @@ -22,7 +22,7 @@ const rowStyle = { const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) -const ComponentPropsFunctionSignature = ({ name, tags }) => { +const ComponentPropFunctionSignature = ({ name, tags }) => { const params = _.filter(tags, { title: 'param' }) const returns = _.find(tags, { title: 'returns' }) @@ -51,15 +51,15 @@ const ComponentPropsFunctionSignature = ({ name, tags }) => { }) return ( - {name}({paramSignature}){returns ? `: ${getTagType(returns)}` : ''}}> + {name}({paramSignature}){returns ? `: ${getTagType(returns)}` : ''}}> {tagDescriptionRows} - + ) } -ComponentPropsFunctionSignature.propTypes = { +ComponentPropFunctionSignature.propTypes = { name: PropTypes.string, tags: PropTypes.object, } -export default neverUpdate(ComponentPropsFunctionSignature) +export default neverUpdate(ComponentPropFunctionSignature) diff --git a/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropHeader.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropHeader.js new file mode 100644 index 0000000000..a535f4aac5 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropHeader.js @@ -0,0 +1,17 @@ +import React from 'react' +import { Table } from 'semantic-ui-react' + +import { neverUpdate } from 'docs/app/HOC' + +const ComponentPropTableHeader = () => ( + + + Name + Default + Type + Description + + +) + +export default neverUpdate(ComponentPropTableHeader) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsName.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropName.js similarity index 80% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsName.js rename to docs/app/Components/ComponentDoc/ComponentProp/ComponentPropName.js index 1ab990d885..60043a4401 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsName.js +++ b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropName.js @@ -6,7 +6,7 @@ import { pure } from 'docs/app/HOC' const popupStyle = { padding: '0.5em' } -const ComponentPropsName = ({ name, required }) => ( +const ComponentPropName = ({ name, required }) => (
{name} {required && ( @@ -22,9 +22,9 @@ const ComponentPropsName = ({ name, required }) => (
) -ComponentPropsName.propTypes = { +ComponentPropName.propTypes = { name: PropTypes.string, required: PropTypes.bool, } -export default pure(ComponentPropsName) +export default pure(ComponentPropName) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js index b78a19873c..28332eeca6 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js @@ -1,34 +1,59 @@ -import _ from 'lodash' import PropTypes from 'prop-types' -import React from 'react' -import { Table } from 'semantic-ui-react' +import React, { Component } from 'react' +import { getDocSubComponents } from 'docs/app/utils' +import ComponentTable from '../ComponentTable' +import ComponentPropsComponentDescription from './ComponentPropsComponentDescription' import ComponentPropsHeader from './ComponentPropsHeader' -import ComponentPropsRow from './ComponentPropsRow' - -/** - * Displays a table of a Component's PropTypes. - */ -const ComponentProps = ({ props: propsDefinition }) => ( - - - - {_.map(propsDefinition, item => )} - -
-) - -ComponentProps.propTypes = { - /** - * A single Component's prop info as generated by react-docgen. - * @type {object} Props info object where keys are prop names and values are prop definitions. - */ - props: PropTypes.object, - /** - * A single Component's meta info. - * @type {object} Meta info object where enum prop values are defined. - */ - meta: PropTypes.object, -} +import ComponentPropsComponents from './ComponentPropsComponents' + +export default class ComponentProps extends Component { + static propTypes = { + componentName: PropTypes.string, + } + + constructor(props) { + super(props) + + this.state = { activeName: props.componentName } + } + + componentWillReceiveProps({ componentName: next }) { + const current = this.props.componentName + + if (current !== next) this.setState({ activeName: next }) + } -export default ComponentProps + handleComponentClick = (e, { name }) => this.setState({ activeName: name }) + + handleToggle = () => this.setState({ activeName: this.state.activeName ? false : this.props.componentName }) + + render() { + const { componentName } = this.props + const { activeName } = this.state + const subComponents = getDocSubComponents(componentName) + + return ( +
+ 0} + showProps={activeName} + onClick={this.handleToggle} + /> + + + {activeName && ( +
+ + +
+ )} +
+ ) + } +} diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponent.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponent.js new file mode 100644 index 0000000000..0f6f397a9a --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponent.js @@ -0,0 +1,23 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { Menu } from 'semantic-ui-react' + +import { updateForKeys } from 'docs/app/HOC' + +const ComponentPropsComponent = ({ active, name, onClick, parent }) => ( + +) + +ComponentPropsComponent.propTypes = { + active: PropTypes.bool, + name: PropTypes.string, + onClick: PropTypes.func, + parent: PropTypes.string, +} + +export default updateForKeys(['active'])(ComponentPropsComponent) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponentDescription.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponentDescription.js new file mode 100644 index 0000000000..31e0132c3c --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponentDescription.js @@ -0,0 +1,24 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { Divider } from 'semantic-ui-react' + +import { pure } from 'docs/app/HOC' +import { getDocDescription } from 'docs/app/utils' + +const descriptionStyle = { + fontSize: '1.08em', + color: '#777', +} + +const ComponentPropsComponent = ({ name }) => ( +
+ {getDocDescription(name)} + +
+) + +ComponentPropsComponent.propTypes = { + name: PropTypes.string, +} + +export default pure(ComponentPropsComponent) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js new file mode 100644 index 0000000000..7c68d350ba --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js @@ -0,0 +1,34 @@ +import _ from 'lodash' +import PropTypes from 'prop-types' +import React from 'react' +import { Menu } from 'semantic-ui-react' + +import { updateForKeys } from 'docs/app/HOC' +import ComponentPropsSubComponent from './ComponentPropsComponent' + +const ComponentPropsComponents = ({ activeName, components, onItemClick, parent }) => + components.length > 0 && ( + + {_.map([parent, ...components], component => ( + + ))} + + ) + +ComponentPropsComponents.propTypes = { + activeName: PropTypes.oneOf([ + PropTypes.bool, + PropTypes.string, + ]), + components: PropTypes.array, + onItemClick: PropTypes.func, + parent: PropTypes.string, +} + +export default updateForKeys(['activeName', 'parent'])(ComponentPropsComponents) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDefaultValue.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDefaultValue.js deleted file mode 100644 index 689ee154a1..0000000000 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDefaultValue.js +++ /dev/null @@ -1,13 +0,0 @@ -import _ from 'lodash' -import PropTypes from 'prop-types' -import React from 'react' - -import { pure } from 'docs/app/HOC' - -const ComponentPropsDefaultValue = ({ value }) => (_.isNil(value) ? null : {value}) - -ComponentPropsDefaultValue.propTypes = { - value: PropTypes.node, -} - -export default pure(ComponentPropsDefaultValue) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsHeader.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsHeader.js index abf98a9750..434bf48a36 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsHeader.js +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsHeader.js @@ -1,17 +1,45 @@ +import cx from 'classnames' +import PropTypes from 'prop-types' import React from 'react' -import { Table } from 'semantic-ui-react' +import { Header, Icon } from 'semantic-ui-react' -import { neverUpdate } from 'docs/app/HOC' +import { updateForKeys } from 'docs/app/HOC' -const ComponentPropsHeader = () => ( - - - Name - Default - Type - Description - - -) +const headerStyle = { + cursor: 'pointer', + display: 'inline-flex', + margin: '1em 0.5em', + marginLeft: 0, +} -export default neverUpdate(ComponentPropsHeader) +const linkStyle = { color: 'inherit' } + +const ComponentPropsHeader = ({ hasSubComponents, onClick, showProps }) => { + const iconClasses = cx( + showProps ? 'on' : 'off', + 'toggle', + ) + + return ( +
+ + + Props{hasSubComponents && ':'} + +
+ ) +} + +ComponentPropsHeader.propTypes = { + hasSubComponents: PropTypes.bool, + onClick: PropTypes.func, + showProps: PropTypes.bool, +} + +export default updateForKeys(['hasSubComponents', 'showProps'])(ComponentPropsHeader) diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar.js b/docs/app/Components/ComponentDoc/ComponentSidebar.js new file mode 100644 index 0000000000..2a587c0a2d --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentSidebar.js @@ -0,0 +1,47 @@ +import _ from 'lodash' +import React, {Component} from 'react' +import {Accordion, Menu, Sticky} from 'semantic-ui-react' +import { withRouter } from 'react-router' + +import { scrollToAnchor } from 'docs/app/utils' +import menuInfo from 'docs/app/menuInfo.json' + +const sidebarStyle = { + background: '#fff', + boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)', + paddingLeft: '1em', + paddingTop: '0.1em', +} + +class ComponentSidebar extends Component { + setHashAndScroll = (e, {name}) => { + const aName = _.kebabCase(_.last(name.split('/'))) + const { history } = this.props + history.replace(`${location.pathname}#${aName}`) + scrollToAnchor() + } + + render() { + const {activePath, componentName, examplesRef} = this.props + const items = _.get(menuInfo, componentName) + + return ( + + + {_.map(items, ({name, examples}) => { + return ( + + {name} + + {_.map(examples, ({title, path}) => )} + + + ) + })} + + + ) + } +} + +export default withRouter(ComponentSidebar) \ No newline at end of file diff --git a/docs/app/Components/ComponentDoc/ComponentTable/ComponentTable.js b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTable.js new file mode 100644 index 0000000000..5e1050c992 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTable.js @@ -0,0 +1,26 @@ +import _ from 'lodash' +import PropTypes from 'prop-types' +import React from 'react' +import { Table } from 'semantic-ui-react' + +import { getDocProps } from 'docs/app/utils' +import ComponentTableHeader from './ComponentTableHeader' +import ComponentTableRow from './ComponentTableRow' + +/** + * Displays a table of a Component's PropTypes. + */ +const ComponentTable = ({ name }) => ( + + + + {_.map(getDocProps(name), item => )} + +
+) + +ComponentTable.propTypes = { + name: PropTypes.string, +} + +export default ComponentTable diff --git a/docs/app/Components/ComponentDoc/ComponentTable/ComponentTableHeader.js b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTableHeader.js new file mode 100644 index 0000000000..7079a6fb91 --- /dev/null +++ b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTableHeader.js @@ -0,0 +1,17 @@ +import React from 'react' +import { Table } from 'semantic-ui-react' + +import { neverUpdate } from 'docs/app/HOC' + +const ComponentTableHeader = () => ( + + + Name + Default + Type + Description + + +) + +export default neverUpdate(ComponentTableHeader) diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsRow.js b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTableRow.js similarity index 59% rename from docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsRow.js rename to docs/app/Components/ComponentDoc/ComponentTable/ComponentTableRow.js index f3b3333d34..93103fb0f6 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsRow.js +++ b/docs/app/Components/ComponentDoc/ComponentTable/ComponentTableRow.js @@ -2,13 +2,13 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { Table } from 'semantic-ui-react' -import ComponentPropsDefaultValue from './ComponentPropsDefaultValue' -import ComponentPropsDescription from './ComponentPropsDescription' -import ComponentPropsEnum from './ComponentPropsEnum' -import ComponentPropsFunctionSignature from './ComponentPropsFunctionSignature' -import ComponentPropsName from './ComponentPropsName' +import ComponentPropDefaultValue from '../ComponentProp/ComponentPropDefaultValue' +import ComponentPropDescription from '../ComponentProp/ComponentPropDescription' +import ComponentPropEnum from '../ComponentProp/ComponentPropEnum' +import ComponentPropFunctionSignature from '../ComponentProp/ComponentPropFunctionSignature' +import ComponentPropName from '../ComponentProp/ComponentPropName' -export default class ComponentPropsRow extends Component { +export default class ComponentTableRow extends Component { static propTypes = { defaultValue: PropTypes.string, description: PropTypes.string, @@ -33,16 +33,16 @@ export default class ComponentPropsRow extends Component { return ( - + - + {`{${type}}`} - - - + + ( diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js index f2aaa0e5b3..3c314f36ad 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js @@ -11,7 +11,7 @@ export default class VisibilityExampleCallbackFrequency extends Component { once: true, } - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) updateLog = eventName => () => this.setState(({ log: [ diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js index 9652bfb6a6..6220d4f6c8 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js @@ -11,7 +11,7 @@ export default class VisibilityExampleGroupedCallbacks extends Component { once: true, } - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) updateLog = eventName => () => this.setState(({ log: [ diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js index 6b7a9c823e..4b0bed04d7 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js @@ -13,7 +13,7 @@ export default class VisibilityExampleOffset extends Component { }, } - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) handleUpdate = (e, { calculations }) => this.setState({ calculations }) diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js index 418c85f676..8cce836808 100644 --- a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js +++ b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js @@ -21,7 +21,7 @@ export default class VisibilityExampleVisibility extends Component { }, } - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) handleUpdate = (e, { calculations }) => this.setState({ calculations }) diff --git a/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js b/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js index adc443cc94..053b4a12f9 100644 --- a/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js +++ b/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyAdjacentContextExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js b/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js index 3ca1848d07..00d2de29ba 100644 --- a/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js +++ b/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyPushingExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js b/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js index 9714e97fd9..08b7d0e70a 100644 --- a/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js +++ b/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyOffsetExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js b/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js index 89fb491cb7..b0856d1297 100644 --- a/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js +++ b/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyOversizedExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ contextRef }) + handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Style.js b/docs/app/Style.js index 5403c89b2d..f8338016ad 100644 --- a/docs/app/Style.js +++ b/docs/app/Style.js @@ -19,8 +19,6 @@ style.menu = { style.main = { marginLeft: sidebarWidth, - minWidth: parseInt(sidebarWidth, 10) + 300, - maxWidth: parseInt(sidebarWidth, 10) + 900, } export default style diff --git a/docs/app/index.ejs b/docs/app/index.ejs index 5a472dceac..2c709f9b34 100644 --- a/docs/app/index.ejs +++ b/docs/app/index.ejs @@ -71,8 +71,8 @@ - - + +