diff options
Diffstat (limited to 'packages/react-docs/src')
| -rw-r--r-- | packages/react-docs/src/components/badge.tsx | 2 | ||||
| -rw-r--r-- | packages/react-docs/src/components/comment.tsx | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/components/custom_enum.tsx | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/components/doc_reference.tsx (renamed from packages/react-docs/src/components/documentation.tsx) | 191 | ||||
| -rw-r--r-- | packages/react-docs/src/components/event_definition.tsx | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/components/interface.tsx | 2 | ||||
| -rw-r--r-- | packages/react-docs/src/components/property_block.tsx | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/components/signature.tsx | 2 | ||||
| -rw-r--r-- | packages/react-docs/src/components/signature_block.tsx | 12 | ||||
| -rw-r--r-- | packages/react-docs/src/components/source_link.tsx | 10 | ||||
| -rw-r--r-- | packages/react-docs/src/components/type.tsx | 77 | ||||
| -rw-r--r-- | packages/react-docs/src/components/type_definition.tsx | 7 | ||||
| -rw-r--r-- | packages/react-docs/src/docs_info.ts | 70 | ||||
| -rw-r--r-- | packages/react-docs/src/index.ts | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/utils/typedoc_utils.ts | 14 |
15 files changed, 161 insertions, 246 deletions
diff --git a/packages/react-docs/src/components/badge.tsx b/packages/react-docs/src/components/badge.tsx index d34f8a0fc..e3d5be273 100644 --- a/packages/react-docs/src/components/badge.tsx +++ b/packages/react-docs/src/components/badge.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; const styles: Styles = { diff --git a/packages/react-docs/src/components/comment.tsx b/packages/react-docs/src/components/comment.tsx index c3687c510..4d34f711e 100644 --- a/packages/react-docs/src/components/comment.tsx +++ b/packages/react-docs/src/components/comment.tsx @@ -1,4 +1,4 @@ -import { MarkdownCodeBlock } from '@0xproject/react-shared'; +import { colors, MarkdownCodeBlock } from '@0x/react-shared'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; @@ -13,7 +13,7 @@ const defaultProps = { export const Comment: React.SFC<CommentProps> = (props: CommentProps) => { return ( - <div className={`${props.className} comment`}> + <div className={`${props.className} comment`} style={{ color: colors.greyTheme }}> <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} /> </div> ); diff --git a/packages/react-docs/src/components/custom_enum.tsx b/packages/react-docs/src/components/custom_enum.tsx index fa7c43146..e971a012a 100644 --- a/packages/react-docs/src/components/custom_enum.tsx +++ b/packages/react-docs/src/components/custom_enum.tsx @@ -1,8 +1,8 @@ -import { logUtils } from '@0xproject/utils'; +import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { CustomType } from '@0xproject/types'; +import { CustomType } from '@0x/types'; const STRING_ENUM_CODE_PREFIX = ' strEnum('; diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/doc_reference.tsx index a23111297..85547576b 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -2,13 +2,13 @@ import { colors, constants as sharedConstants, EtherscanLinkSuffixes, + HeaderSizes, + Link, MarkdownSection, - NestedSidebarMenu, Networks, SectionHeader, - Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; +} from '@0x/react-shared'; import { DocAgnosticFormat, Event, @@ -18,9 +18,8 @@ import { TypeDefinitionByName, TypescriptFunction, TypescriptMethod, -} from '@0xproject/types'; +} from '@0x/types'; import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import * as semver from 'semver'; @@ -42,142 +41,36 @@ const networkNameToColor: { [network: string]: string } = { [Networks.Rinkeby]: colors.darkYellow, }; -export interface DocumentationProps { +export interface DocReferenceProps { selectedVersion: string; availableVersions: string[]; docsInfo: DocsInfo; sourceUrl: string; - onVersionSelected: (semver: string) => void; docAgnosticFormat?: DocAgnosticFormat; - sidebarHeader?: React.ReactNode; - topBarHeight?: number; } -export interface DocumentationState { - isHoveringSidebar: boolean; -} +export interface DocReferenceState {} -export class Documentation extends React.Component<DocumentationProps, DocumentationState> { - public static defaultProps: Partial<DocumentationProps> = { - topBarHeight: 0, - }; - constructor(props: DocumentationProps) { - super(props); - this.state = { - isHoveringSidebar: false, - }; - } - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } - public componentWillUnmount(): void { - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); - } - public componentDidUpdate(prevProps: DocumentationProps, _prevState: DocumentationState): void { +export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> { + public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void { if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } } public render(): React.ReactNode { - const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflowX: 'hidden', - overflowY: 'scroll', - minHeight: `calc(100vh - ${this.props.topBarHeight}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - marginLeft: 20, - }, - }; - const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat); - return ( - <div> - {_.isUndefined(this.props.docAgnosticFormat) ? ( - this._renderLoading(styles.mainContainers) - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }} - > - <div - className="relative sm-hide xs-hide" - style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }} - > - <div - className="border-right absolute" - style={{ - ...styles.menuContainer, - ...styles.mainContainers, - height: `calc(100vh - ${this.props.topBarHeight}px)`, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - selectedVersion={this.props.selectedVersion} - versions={this.props.availableVersions} - sidebarHeader={this.props.sidebarHeader} - topLevelMenu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - </div> - <div - className="relative col lg-col-9 md-col-9 sm-col-12 col-12" - style={{ backgroundColor: colors.white }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={styles.mainContainers} - className="absolute px1" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - {this._renderDocumentation()} - </div> - </div> - </div> - </div> - )} - </div> - ); - } - private _renderLoading(mainContainersStyles: React.CSSProperties): React.ReactNode { - return ( - <div className="col col-12" style={mainContainersStyles}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading documentation... - </div> - </div> - </div> - ); - } - private _renderDocumentation(): React.ReactNode { - const subMenus = _.values(this.props.docsInfo.menu); + const subMenus = _.values(this.props.docsInfo.markdownMenu); const orderedSectionNames = _.flatten(subMenus); const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName)); - return renderedSections; + return ( + <div> + <div id={sharedConstants.SCROLL_TOP_ID} /> + {renderedSections} + </div> + ); } private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion); @@ -195,11 +88,16 @@ export class Documentation extends React.Component<DocumentationProps, Documenta const closestVersion = sortedEligibleVersions[0]; const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName]; if (!_.isUndefined(markdownFileIfExists)) { + // Special-case replace the `introduction` sectionName with the package name + const isIntroductionSection = sectionName === 'introduction'; + const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3; return ( <MarkdownSection key={`markdown-section-${sectionName}`} sectionName={sectionName} + headerSize={headerSize} markdownContent={markdownFileIfExists} + alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined} /> ); } @@ -290,7 +188,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta )} {!_.isEmpty(docSection.functions) && ( <div> - {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>} + {!isExportedFunctionSection && ( + <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div> + )} <div>{functionDefs}</div> </div> )} @@ -309,6 +209,15 @@ export class Documentation extends React.Component<DocumentationProps, Documenta <div>{typeDefs}</div> </div> )} + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + marginTop: 32, + marginBottom: 12, + }} + /> </div> ); } @@ -318,9 +227,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta <div className="pt2" key={`external-export-${exportName}`}> <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}> {`import { `} - <a href={link} target="_blank" style={{ color: colors.lightBlueA700, textDecoration: 'none' }}> + <Link to={link} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}> {exportName} - </a> + </Link> {` } from '${this.props.docsInfo.packageName}'`} </code> </div> @@ -349,14 +258,16 @@ export class Documentation extends React.Component<DocumentationProps, Documenta EtherscanLinkSuffixes.Address, ); return ( - <a - key={`badge-${networkName}-${sectionName}`} - href={linkIfExists} - target="_blank" - style={{ color: colors.white, textDecoration: 'none', marginTop: 8 }} - > - <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} /> - </a> + <div style={{ marginTop: 8 }}> + <Link + key={`badge-${networkName}-${sectionName}`} + to={linkIfExists} + shouldOpenInNewTab={true} + fontColor={colors.white} + > + <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} /> + </Link> + </div> ); }, ); @@ -406,18 +317,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta /> ); } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); - } } diff --git a/packages/react-docs/src/components/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx index 37236275b..b76769788 100644 --- a/packages/react-docs/src/components/event_definition.tsx +++ b/packages/react-docs/src/components/event_definition.tsx @@ -1,5 +1,5 @@ -import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; -import { Event, EventArg } from '@0xproject/types'; +import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared'; +import { Event, EventArg } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx index cad7d6c46..0df44ca1c 100644 --- a/packages/react-docs/src/components/interface.tsx +++ b/packages/react-docs/src/components/interface.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { CustomType, TypeDefinitionByName } from '@0xproject/types'; +import { CustomType, TypeDefinitionByName } from '@0x/types'; import { DocsInfo } from '../docs_info'; diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx index 8434e8682..d0bd84802 100644 --- a/packages/react-docs/src/components/property_block.tsx +++ b/packages/react-docs/src/components/property_block.tsx @@ -1,5 +1,5 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; -import { Property, TypeDefinitionByName } from '@0xproject/types'; +import { AnchorTitle, HeaderSizes } from '@0x/react-shared'; +import { Property, TypeDefinitionByName } from '@0x/types'; import * as React from 'react'; import { DocsInfo } from '../docs_info'; diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx index 1f3dd0ee8..c229999b1 100644 --- a/packages/react-docs/src/components/signature.tsx +++ b/packages/react-docs/src/components/signature.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '@0xproject/types'; +import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '@0x/types'; import { DocsInfo } from '../docs_info'; diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 5ec82983a..7cdf19bb0 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -1,11 +1,5 @@ -import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; -import { - Parameter, - SolidityMethod, - TypeDefinitionByName, - TypescriptFunction, - TypescriptMethod, -} from '@0xproject/types'; +import { AnchorTitle, colors, HeaderSizes, Styles } from '@0x/react-shared'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptFunction, TypescriptMethod } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; @@ -55,7 +49,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu <div id={`${this.props.sectionName}-${method.name}`} style={{ overflow: 'hidden', width: '100%' }} - className="pb4" + className="pb4 pt2" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx index 3096ad8d5..6459824c2 100644 --- a/packages/react-docs/src/components/source_link.tsx +++ b/packages/react-docs/src/components/source_link.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { Source } from '@0xproject/types'; +import { colors, Link } from '@0x/react-shared'; +import { Source } from '@0x/types'; import * as React from 'react'; export interface SourceLinkProps { @@ -13,9 +13,9 @@ export const SourceLink = (props: SourceLinkProps) => { const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`; return ( <div className="pt2" style={{ fontSize: 14 }}> - <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}> - Source - </a> + <Link to={sourceCodeUrl} shouldOpenInNewTab={true} textDecoration="underline" fontColor={colors.grey}> + {'Source'} + </Link> </div> ); }; diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 5c018f5dd..412b99b9d 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -1,6 +1,6 @@ -import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; -import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; -import { errorUtils } from '@0xproject/utils'; +import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0x/react-shared'; +import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types'; +import { errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; @@ -204,15 +204,12 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { const isExportedClassReference = !!props.type.isExportedClassReference; const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined; if (!_.isUndefined(typeNameUrlIfExists)) { - typeName = ( - <a - href={typeNameUrlIfExists} - target="_blank" - className="text-decoration-none" - style={{ color: colors.lightBlueA700 }} - > + typeName = props.isInPopover ? ( + <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> + ) : ( + <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}> {typeName} - </a> + </Link> ); } else if ( (isReference || isArray) && @@ -223,39 +220,41 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { ? props.type.name : `${props.docsInfo.typeSectionName}-${typeName}`; typeName = ( - <ScrollLink - to={typeDefinitionAnchorId} - offset={0} - hashSpy={true} - duration={sharedConstants.DOCS_SCROLL_DURATION_MS} - containerId={sharedConstants.DOCS_CONTAINER_ID} - > + <span> {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> ) : ( - <span - data-tip={true} - data-for={id} - style={{ - color: colors.lightBlueA700, - cursor: 'pointer', - display: 'inline-block', - }} + <ScrollLink + to={typeDefinitionAnchorId} + offset={0} + hashSpy={true} + duration={sharedConstants.DOCS_SCROLL_DURATION_MS} + containerId={sharedConstants.SCROLL_CONTAINER_ID} > - {typeName} - <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> - <TypeDefinition - sectionName={props.sectionName} - customType={props.typeDefinitionByName[typeName as string]} - shouldAddId={false} - docsInfo={props.docsInfo} - typeDefinitionByName={props.typeDefinitionByName} - isInPopover={true} - /> - </ReactTooltip> - </span> + <span + data-tip={true} + data-for={id} + style={{ + color: colors.lightBlueA700, + cursor: 'pointer', + display: 'inline-block', + }} + > + {typeName} + <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> + <TypeDefinition + sectionName={props.sectionName} + customType={props.typeDefinitionByName[typeName as string]} + shouldAddId={false} + docsInfo={props.docsInfo} + typeDefinitionByName={props.typeDefinitionByName} + isInPopover={true} + /> + </ReactTooltip> + </span> + </ScrollLink> )} - </ScrollLink> + </span> ); } return ( diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 9a3e50a1b..a1fde51da 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -1,6 +1,6 @@ -import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; -import { CustomType, CustomTypeChild, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; -import { errorUtils } from '@0xproject/utils'; +import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared'; +import { CustomType, CustomTypeChild, TypeDefinitionByName, TypeDocTypes } from '@0x/types'; +import { errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; @@ -124,6 +124,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef title={`${typePrefix} ${customType.name}`} id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} shouldShowAnchor={this.state.shouldShowAnchor} + isDisabled={this.props.isInPopover} /> <div style={{ fontSize: 16 }}> <pre> diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 092a8c266..54b59ef1f 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,5 +1,5 @@ -import { MenuSubsectionsBySection } from '@0xproject/react-shared'; -import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types'; +import { ALink, utils as sharedUtils } from '@0x/react-shared'; +import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0x/types'; import * as _ from 'lodash'; import { @@ -17,7 +17,7 @@ export class DocsInfo { public displayName: string; public packageName: string; public packageUrl: string; - public menu: DocsMenu; + public markdownMenu: DocsMenu; public typeSectionName: string; public sections: SectionsMap; public sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion; @@ -25,7 +25,7 @@ export class DocsInfo { constructor(config: DocsInfoConfig) { this.id = config.id; this.type = config.type; - this.menu = config.markdownMenu; + this.markdownMenu = config.markdownMenu; this.displayName = config.displayName; this.packageName = config.packageName; this.packageUrl = config.packageUrl; @@ -34,10 +34,31 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { - const menuSubsectionsBySection = {} as MenuSubsectionsBySection; + public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): ObjectMap<TypeDefinitionByName> { + if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) { + return {}; + } + + const section = docAgnosticFormat[this.typeSectionName]; + const typeDefinitionByName = _.keyBy(section.types, 'name') as any; + return typeDefinitionByName; + } + public getSectionNameToLinks(docAgnosticFormat: DocAgnosticFormat): ObjectMap<ALink[]> { + const sectionNameToLinks: ObjectMap<ALink[]> = {}; + _.each(this.markdownMenu, (linkTitles, sectionName) => { + sectionNameToLinks[sectionName] = []; + _.each(linkTitles, linkTitle => { + const to = sharedUtils.getIdFromName(linkTitle); + const links = sectionNameToLinks[sectionName]; + links.push({ + title: linkTitle, + to, + }); + }); + }); + if (_.isUndefined(docAgnosticFormat)) { - return menuSubsectionsBySection; + return sectionNameToLinks; } const docSections = _.keys(this.sections); @@ -58,7 +79,13 @@ export class DocsInfo { if (sectionName === this.typeSectionName) { const sortedTypesNames = _.sortBy(docSection.types, 'name'); const typeNames = _.map(sortedTypesNames, t => t.name); - menuSubsectionsBySection[sectionName] = typeNames; + const typeLinks = _.map(typeNames, typeName => { + return { + to: `${sectionName}-${typeName}`, + title: typeName, + }; + }); + sectionNameToLinks[sectionName] = typeLinks; } else if (isExportedFunctionSection) { // Noop so that we don't have the method listed underneath itself. } else { @@ -73,23 +100,18 @@ export class DocsInfo { const methodNames = _.map(methodsSortedByName, m => m.name); const sortedFunctionNames = _.sortBy(docSection.functions, 'name'); const functionNames = _.map(sortedFunctionNames, m => m.name); - menuSubsectionsBySection[sectionName] = [ - ...eventNames, - ...propertyNames, - ...functionNames, - ...methodNames, - ]; + const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames]; + + const links = _.map(names, name => { + return { + to: `${sectionName}-${name}`, + title: name, + }; + }); + + sectionNameToLinks[sectionName] = links; } }); - return menuSubsectionsBySection; - } - public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { - if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) { - return {}; - } - - const section = docAgnosticFormat[this.typeSectionName]; - const typeDefinitionByName = _.keyBy(section.types, 'name') as any; - return typeDefinitionByName; + return sectionNameToLinks; } } diff --git a/packages/react-docs/src/index.ts b/packages/react-docs/src/index.ts index f9382940c..a5ed788b1 100644 --- a/packages/react-docs/src/index.ts +++ b/packages/react-docs/src/index.ts @@ -1,11 +1,11 @@ -export { DocAgnosticFormat, GeneratedDocJson } from '@0xproject/types'; +export { DocAgnosticFormat, GeneratedDocJson } from '@0x/types'; // Exported to give users of this library added flexibility if they want to build // a docs page from scratch using the individual components. export { Badge } from './components/badge'; export { Comment } from './components/comment'; export { CustomEnum } from './components/custom_enum'; -export { Documentation } from './components/documentation'; +export { DocReference } from './components/doc_reference'; export { Enum } from './components/enum'; export { EventDefinition } from './components/event_definition'; export { Interface } from './components/interface'; diff --git a/packages/react-docs/src/utils/typedoc_utils.ts b/packages/react-docs/src/utils/typedoc_utils.ts index 19605d497..f74ec3e28 100644 --- a/packages/react-docs/src/utils/typedoc_utils.ts +++ b/packages/react-docs/src/utils/typedoc_utils.ts @@ -16,8 +16,8 @@ import { TypeParameter, TypescriptFunction, TypescriptMethod, -} from '@0xproject/types'; -import { errorUtils } from '@0xproject/utils'; +} from '@0x/types'; +import { errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import { DocsInfo } from '../docs_info'; @@ -95,7 +95,9 @@ export class TypeDocUtils { if (!_.isEmpty(this._externalExportToLink)) { this._docsInfo.sections[constants.EXTERNAL_EXPORTS_SECTION_NAME] = constants.EXTERNAL_EXPORTS_SECTION_NAME; - this._docsInfo.menu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [constants.EXTERNAL_EXPORTS_SECTION_NAME]; + this._docsInfo.markdownMenu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [ + constants.EXTERNAL_EXPORTS_SECTION_NAME, + ]; const docSection: DocSection = { comment: 'This package also re-exports some third-party libraries for your convenience.', constructors: [], @@ -119,7 +121,7 @@ export class TypeDocUtils { case KindString.ObjectLiteral: { sectionName = child.name; this._docsInfo.sections[sectionName] = sectionName; - this._docsInfo.menu[sectionName] = [sectionName]; + this._docsInfo.markdownMenu[sectionName] = [sectionName]; const entities = child.children; const commentObj = child.comment; const sectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; @@ -136,7 +138,7 @@ export class TypeDocUtils { case KindString.Function: { sectionName = child.name; this._docsInfo.sections[sectionName] = sectionName; - this._docsInfo.menu[sectionName] = [sectionName]; + this._docsInfo.markdownMenu[sectionName] = [sectionName]; const entities = [child]; const commentObj = child.comment; const SectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; @@ -158,7 +160,7 @@ export class TypeDocUtils { }); if (!_.isEmpty(typeEntities)) { this._docsInfo.sections[constants.TYPES_SECTION_NAME] = constants.TYPES_SECTION_NAME; - this._docsInfo.menu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME]; + this._docsInfo.markdownMenu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME]; const docSection = this._convertEntitiesToDocSection(typeEntities, constants.TYPES_SECTION_NAME); docAgnosticFormat[constants.TYPES_SECTION_NAME] = docSection; } |