From 3472bdcfd4ea0a6145dd68972f563e483baf7e6b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Nov 2017 11:16:35 -0600 Subject: Refactor docs to be more declarative, put all hard-coded doc-related data in one place so it easier to add new doc pages --- .../website/ts/pages/documentation/docs_info.ts | 52 ++++++ .../ts/pages/documentation/event_definition.tsx | 10 +- .../website/ts/pages/documentation/interface.tsx | 7 +- .../ts/pages/documentation/method_block.tsx | 4 + .../ts/pages/documentation/method_signature.tsx | 35 +++- .../smart_contracts_documentation.tsx | 67 +++++--- .../website/ts/pages/documentation/source_link.tsx | 3 +- packages/website/ts/pages/documentation/type.tsx | 13 +- .../ts/pages/documentation/type_definition.tsx | 8 +- .../documentation/zero_ex_js_documentation.tsx | 177 +++++++++++++++++---- .../ts/pages/shared/nested_sidebar_menu.tsx | 8 +- .../website/ts/pages/shared/version_drop_down.tsx | 5 +- 12 files changed, 320 insertions(+), 69 deletions(-) create mode 100644 packages/website/ts/pages/documentation/docs_info.ts (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts new file mode 100644 index 000000000..326ebb31c --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -0,0 +1,52 @@ +import compareVersions = require('compare-versions'); +import * as _ from 'lodash'; +import {DocsInfoConfig, DocsMenu, SectionsMap} from 'ts/types'; + +export class DocsInfo { + public packageName: string; + public packageUrl: string; + public websitePath: string; + public docsJsonRoot: string; + public menu: DocsMenu; + public sections: SectionsMap; + public sectionNameToMarkdown: {[sectionName: string]: string}; + private docsInfo: DocsInfoConfig; + constructor(config: DocsInfoConfig) { + this.packageName = config.packageName; + this.packageUrl = config.packageUrl; + this.websitePath = config.websitePath; + this.docsJsonRoot = config.docsJsonRoot; + this.sections = config.sections; + this.sectionNameToMarkdown = config.sectionNameToMarkdown; + this.docsInfo = config; + } + public isPublicType(typeName: string): boolean { + if (_.isUndefined(this.docsInfo.publicTypes)) { + return false; + } + const isPublic = _.includes(this.docsInfo.publicTypes, typeName); + return isPublic; + } + public getModulePathsIfExists(sectionName: string): string[] { + const modulePathsIfExists = this.docsInfo.sectionNameToModulePath[sectionName]; + return modulePathsIfExists; + } + public getMenu(selectedVersion?: string): {[section: string]: string[]} { + if (_.isUndefined(selectedVersion) || _.isUndefined(this.docsInfo.menuSubsectionToVersionWhenIntroduced)) { + return this.docsInfo.menu; + } + + const finalMenu = _.cloneDeep(this.docsInfo.menu); + finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => { + const versionIntroducedIfExists = this.docsInfo.menuSubsectionToVersionWhenIntroduced[contractName]; + if (!_.isUndefined(versionIntroducedIfExists)) { + const existsInSelectedVersion = compareVersions(selectedVersion, + versionIntroducedIfExists) >= 0; + return existsInSelectedVersion; + } else { + return true; + } + }); + return finalMenu; + } +} diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index ea75d78bc..3b1b86112 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {Type} from 'ts/pages/documentation/type'; import {AnchorTitle} from 'ts/pages/shared/anchor_title'; import {Event, EventArg, HeaderSizes} from 'ts/types'; @@ -11,6 +12,7 @@ const CUSTOM_GREEN = 'rgb(77, 162, 75)'; interface EventDefinitionProps { event: Event; + docsInfo: DocsInfo; } interface EventDefinitionState { @@ -53,9 +55,15 @@ export class EventDefinition extends React.Component indexed; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { + const t = ( + + ); return ( - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: , + {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {t}, ); }); diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx index d8d4aec32..e671db2b8 100644 --- a/packages/website/ts/pages/documentation/interface.tsx +++ b/packages/website/ts/pages/documentation/interface.tsx @@ -1,11 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {MethodSignature} from 'ts/pages/documentation/method_signature'; import {Type} from 'ts/pages/documentation/type'; import {CustomType, TypeDocTypes} from 'ts/types'; interface InterfaceProps { type: CustomType; + docsInfo: DocsInfo; } export function Interface(props: InterfaceProps) { @@ -15,11 +17,12 @@ export function Interface(props: InterfaceProps) { {property.name}:{' '} {property.type.typeDocType !== TypeDocTypes.Reflection ? - : + : }, @@ -30,7 +33,7 @@ export function Interface(props: InterfaceProps) { const is = type.indexSignature; const param = ( - {is.keyName}: + {is.keyName}: ); properties.push(( diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 026c46918..3f4eb7164 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -4,6 +4,7 @@ import {colors} from 'material-ui/styles'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; import {Comment} from 'ts/pages/documentation/comment'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {MethodSignature} from 'ts/pages/documentation/method_signature'; import {SourceLink} from 'ts/pages/documentation/source_link'; import {AnchorTitle} from 'ts/pages/shared/anchor_title'; @@ -23,6 +24,7 @@ interface MethodBlockProps { method: SolidityMethod|TypescriptMethod; libraryVersion: string; typeDefinitionByName: TypeDefinitionByName; + docsInfo: DocsInfo; } interface MethodBlockState { @@ -85,12 +87,14 @@ export class MethodBlock extends React.Component {(method as TypescriptMethod).source && } {method.comment && diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index e3806b2fa..197252fb4 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {Type} from 'ts/pages/documentation/type'; import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types'; @@ -8,6 +9,7 @@ interface MethodSignatureProps { shouldHideMethodName?: boolean; shouldUseArrowSyntax?: boolean; typeDefinitionByName?: TypeDefinitionByName; + docsInfo: DocsInfo; } const defaultProps = { @@ -16,45 +18,64 @@ const defaultProps = { }; export const MethodSignature: React.SFC = (props: MethodSignatureProps) => { - const parameters = renderParameters(props.method, props.typeDefinitionByName); + const parameters = renderParameters(props.method, props.docsInfo, props.typeDefinitionByName); const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => { return [prev, ', ', curr]; }); const methodName = props.shouldHideMethodName ? '' : props.method.name; const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ? undefined : - renderTypeParameter(props.method, props.typeDefinitionByName); + renderTypeParameter(props.method, props.docsInfo, props.typeDefinitionByName); return ( {props.method.callPath}{methodName}{typeParameterIfExists}({paramString}) {props.shouldUseArrowSyntax ? ' => ' : ': '} {' '} {props.method.returnType && - + } ); }; -function renderParameters(method: TypescriptMethod|SolidityMethod, typeDefinitionByName?: TypeDefinitionByName) { +function renderParameters( + method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo, typeDefinitionByName?: TypeDefinitionByName, +) { const parameters = method.parameters; const params = _.map(parameters, (p: Parameter) => { const isOptional = p.isOptional; + const t = ( + + ); return ( - {p.name}{isOptional && '?'}: + {p.name}{isOptional && '?'}: {t} ); }); return params; } -function renderTypeParameter(method: TypescriptMethod, typeDefinitionByName?: TypeDefinitionByName) { +function renderTypeParameter( + method: TypescriptMethod, docsInfo: DocsInfo, typeDefinitionByName?: TypeDefinitionByName, +) { const typeParameter = method.typeParameter; const typeParam = ( {`<${typeParameter.name} extends `} - + {`>`} ); diff --git a/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx b/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx index 0d5751ffb..c7104e150 100644 --- a/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx +++ b/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx @@ -11,6 +11,7 @@ import semverSort = require('semver-sort'); import {TopBar} from 'ts/components/top_bar'; import {Badge} from 'ts/components/ui/badge'; import {Comment} from 'ts/pages/documentation/comment'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {EventDefinition} from 'ts/pages/documentation/event_definition'; import {MethodBlock} from 'ts/pages/documentation/method_block'; import {SourceLink} from 'ts/pages/documentation/source_link'; @@ -26,16 +27,17 @@ import { CustomType, DocAgnosticFormat, Docs, + DocsInfoConfig, DoxityDocObj, EtherscanLinkSuffixes, Event, MenuSubsectionsBySection, Networks, Property, - SmartContractsDocSections, SolidityMethod, Styles, TypeDefinitionByName, + WebsitePaths, } from 'ts/types'; import {constants} from 'ts/utils/constants'; import {docUtils} from 'ts/utils/doc_utils'; @@ -46,14 +48,36 @@ const IntroMarkdown = require('md/docs/smart_contracts/introduction'); /* tslint:enable:no-var-requires */ const SCROLL_TO_TIMEOUT = 500; +const SCROLL_TOP_ID = 'docsScrollTop'; const CUSTOM_PURPLE = '#690596'; const CUSTOM_RED = '#e91751'; const CUSTOM_TURQUOIS = '#058789'; -const DOC_JSON_ROOT = constants.S3_SMART_CONTRACTS_DOCUMENTATION_JSON_ROOT; -const sectionNameToMarkdown = { - [SmartContractsDocSections.Introduction]: IntroMarkdown, +const sections = constants.smartContractDocSections; + +const docsInfoConfig: DocsInfoConfig = { + packageName: '0x Smart Contracts', + packageUrl: 'https://github.com/0xProject/contracts', + websitePath: WebsitePaths.SmartContracts, + docsJsonRoot: 'https://s3.amazonaws.com/smart-contracts-docs-json', + menu: { + introduction: [ + sections.Introduction, + ], + contracts: [ + sections.Exchange, + sections.TokenRegistry, + sections.ZRXToken, + sections.EtherToken, + sections.TokenTransferProxy, + ], + }, + sectionNameToMarkdown: { + [sections.Introduction]: IntroMarkdown, + }, + sections, }; + const networkNameToColor: {[network: string]: string} = { [Networks.kovan]: CUSTOM_PURPLE, [Networks.ropsten]: CUSTOM_RED, @@ -90,6 +114,7 @@ const styles: Styles = { marginLeft: 20, }, }; +const docsInfo = new DocsInfo(docsInfoConfig); export class SmartContractsDocumentation extends React.Component { @@ -119,9 +144,10 @@ export class SmartContractsDocumentation extends location={this.props.location} docsVersion={this.props.docsVersion} availableDocVersions={this.props.availableDocVersions} + menu={docsInfo.getMenu(this.props.docsVersion)} menuSubsectionsBySection={menuSubsectionsBySection} shouldFullWidth={true} - doc={Docs.SmartContracts} + docPath={docsInfo.websitePath} /> {_.isUndefined(this.state.docAgnosticFormat) ?
@@ -162,7 +188,7 @@ export class SmartContractsDocumentation extends style={styles.mainContainers} className="absolute" > -
+

0x Smart Contracts @@ -177,19 +203,19 @@ export class SmartContractsDocumentation extends ); } private renderDocumentation(): React.ReactNode { - const subMenus = _.values(constants.menuSmartContracts); + const subMenus = _.values(docsInfo.getMenu()); const orderedSectionNames = _.flatten(subMenus); // Since smart contract method params are all base types, no need to pass // down the typeDefinitionByName const typeDefinitionByName = {}; - const sections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName)); + const renderedSections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName)); - return sections; + return renderedSections; } private renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { const docSection = this.state.docAgnosticFormat[sectionName]; - const markdownFileIfExists = sectionNameToMarkdown[sectionName]; + const markdownFileIfExists = docsInfo.sectionNameToMarkdown[sectionName]; if (!_.isUndefined(markdownFileIfExists)) { return ( ); }); @@ -293,7 +320,7 @@ export class SmartContractsDocumentation extends typeDefinitionByName: TypeDefinitionByName): React.ReactNode { const constructorDefs = _.map(constructors, constructor => { return this.renderMethodBlocks( - constructor, SmartContractsDocSections.zeroEx, constructor.isConstructor, typeDefinitionByName, + constructor, docsInfo.sections.zeroEx, constructor.isConstructor, typeDefinitionByName, ); }); return ( @@ -309,12 +336,13 @@ export class SmartContractsDocumentation extends className="pb3" > - {property.name}: + {property.name}: {property.source && } {property.comment && @@ -334,6 +362,7 @@ export class SmartContractsDocumentation extends method={method} typeDefinitionByName={typeDefinitionByName} libraryVersion={this.props.docsVersion} + docsInfo={docsInfo} /> ); } @@ -341,7 +370,7 @@ export class SmartContractsDocumentation extends const hashWithPrefix = this.props.location.hash; let hash = hashWithPrefix.slice(1); if (_.isEmpty(hash)) { - hash = 'smartContractsDocs'; // scroll to the top + hash = SCROLL_TOP_ID; // scroll to the top } scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); @@ -352,14 +381,14 @@ export class SmartContractsDocumentation extends return menuSubsectionsBySection; } - const docSections = _.keys(SmartContractsDocSections); + const docSections = _.keys(docsInfo.sections); _.each(docSections, sectionName => { const docSection = docAgnosticFormat[sectionName]; if (_.isUndefined(docSection)) { return; // no-op } - if (sectionName === SmartContractsDocSections.types) { + if (sectionName === docsInfo.sections.types) { const sortedTypesNames = _.sortBy(docSection.types, 'name'); const typeNames = _.map(sortedTypesNames, t => t.name); menuSubsectionsBySection[sectionName] = typeNames; @@ -374,7 +403,7 @@ export class SmartContractsDocumentation extends return menuSubsectionsBySection; } private async fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { - const versionToFileName = await docUtils.getVersionToFileNameAsync(DOC_JSON_ROOT); + const versionToFileName = await docUtils.getVersionToFileNameAsync(docsInfo.docsJsonRoot); const versions = _.keys(versionToFileName); this.props.dispatcher.updateAvailableDocVersions(versions); const sortedVersions = semverSort.desc(versions); @@ -390,7 +419,7 @@ export class SmartContractsDocumentation extends this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); const versionFileNameToFetch = versionToFileName[versionToFetch]; - const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, DOC_JSON_ROOT); + const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsInfo.docsJsonRoot); const docAgnosticFormat = doxityUtils.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); this.setState({ diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 0d40a4b7a..408dcabc7 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -5,6 +5,7 @@ import {constants} from 'ts/utils/constants'; interface SourceLinkProps { source: Source; + baseUrl: string; version: string; } @@ -12,7 +13,7 @@ const SUB_PKG = '0x.js'; export function SourceLink(props: SourceLinkProps) { const src = props.source; - const url = constants.GITHUB_0X_JS_URL; + const url = props.baseUrl; const sourceCodeUrl = `${url}/blob/${SUB_PKG}%40${props.version}/packages/${SUB_PKG}/${src.fileName}#L${src.line}`; return (
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index b7d56f360..acd46ab72 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -3,6 +3,7 @@ import {colors} from 'material-ui/styles'; import * as React from 'react'; import {Link as ScrollLink} from 'react-scroll'; import * as ReactTooltip from 'react-tooltip'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {TypeDefinition} from 'ts/pages/documentation/type_definition'; import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types'; import {constants} from 'ts/utils/constants'; @@ -38,6 +39,7 @@ const typeToSection: {[typeName: string]: string} = { interface TypeProps { type: TypeDef; + docsInfo: DocsInfo; typeDefinitionByName?: TypeDefinitionByName; } @@ -70,6 +72,7 @@ export function Type(props: TypeProps): any { key={key} type={arg.elementType} typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} />[] ); @@ -79,6 +82,7 @@ export function Type(props: TypeProps): any { key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`} type={arg} typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} /> ); return subType; @@ -102,6 +106,7 @@ export function Type(props: TypeProps): any { key={`type-${t.name}-${t.value}-${t.typeDocType}`} type={t} typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} /> ); }); @@ -141,7 +146,7 @@ export function Type(props: TypeProps): any { ); } else if ((isReference || isArray) && - (typeDocUtils.isPublicType(typeName as string) || + (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))) { const id = Math.random().toString(); const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ? typeName : sectionNameIfExists; @@ -176,7 +181,11 @@ export function Type(props: TypeProps): any { id={id} className="typeTooltip" > - + } diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index 984c223b6..17b182c70 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import {Comment} from 'ts/pages/documentation/comment'; import {CustomEnum} from 'ts/pages/documentation/custom_enum'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {Enum} from 'ts/pages/documentation/enum'; import {Interface} from 'ts/pages/documentation/interface'; import {MethodSignature} from 'ts/pages/documentation/method_signature'; @@ -17,6 +18,7 @@ const KEYWORD_COLOR = '#a81ca6'; interface TypeDefinitionProps { customType: CustomType; shouldAddId?: boolean; + docsInfo: DocsInfo; } interface TypeDefinitionState { @@ -35,7 +37,7 @@ export class TypeDefinition extends React.Component ); break; @@ -81,11 +84,12 @@ export class TypeDefinition extends React.Component type {customType.name} ={' '} {customType.type.typeDocType !== TypeDocTypes.Reflection ? - : + : } diff --git a/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx b/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx index d64b196ed..5acd99b60 100644 --- a/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx +++ b/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx @@ -16,6 +16,7 @@ import semverSort = require('semver-sort'); import {TopBar} from 'ts/components/top_bar'; import {Loading} from 'ts/components/ui/loading'; import {Comment} from 'ts/pages/documentation/comment'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {MethodBlock} from 'ts/pages/documentation/method_block'; import {SourceLink} from 'ts/pages/documentation/source_link'; import {Type} from 'ts/pages/documentation/type'; @@ -29,6 +30,7 @@ import { CustomType, DocAgnosticFormat, Docs, + DocsInfoConfig, KindString, Property, ScreenWidths, @@ -36,7 +38,7 @@ import { TypeDefinitionByName, TypeDocNode, TypescriptMethod, - ZeroExJsDocSections, + WebsitePaths, } from 'ts/types'; import {constants} from 'ts/utils/constants'; import {docUtils} from 'ts/utils/doc_utils'; @@ -51,16 +53,127 @@ const versioningMarkdown = require('md/docs/0xjs/versioning'); /* tslint:enable:no-var-requires */ const SCROLL_TO_TIMEOUT = 500; -const DOC_JSON_ROOT = constants.S3_0XJS_DOCUMENTATION_JSON_ROOT; +const SCROLL_TOP_ID = 'docsScrollTop'; -const sectionNameToMarkdown = { - [ZeroExJsDocSections.introduction]: IntroMarkdown, - [ZeroExJsDocSections.installation]: InstallationMarkdown, - [ZeroExJsDocSections.async]: AsyncMarkdown, - [ZeroExJsDocSections.errors]: ErrorsMarkdown, - [ZeroExJsDocSections.versioning]: versioningMarkdown, +const zeroExJsDocSections = { + introduction: 'introduction', + installation: 'installation', + testrpc: 'testrpc', + async: 'async', + errors: 'errors', + versioning: 'versioning', + zeroEx: 'zeroEx', + exchange: 'exchange', + token: 'token', + tokenRegistry: 'tokenRegistry', + etherToken: 'etherToken', + proxy: 'proxy', + types: 'types', }; +const docsInfoConfig: DocsInfoConfig = { + packageName: '0x.js', + packageUrl: 'https://github.com/0xProject/0x.js', + websitePath: WebsitePaths.ZeroExJs, + docsJsonRoot: 'https://s3.amazonaws.com/0xjs-docs-jsons', + menu: { + introduction: [ + zeroExJsDocSections.introduction, + ], + install: [ + zeroExJsDocSections.installation, + ], + topics: [ + zeroExJsDocSections.async, + zeroExJsDocSections.errors, + zeroExJsDocSections.versioning, + ], + zeroEx: [ + zeroExJsDocSections.zeroEx, + ], + contracts: [ + zeroExJsDocSections.exchange, + zeroExJsDocSections.token, + zeroExJsDocSections.tokenRegistry, + zeroExJsDocSections.etherToken, + zeroExJsDocSections.proxy, + ], + types: [ + zeroExJsDocSections.types, + ], + }, + sectionNameToMarkdown: { + [zeroExJsDocSections.introduction]: IntroMarkdown, + [zeroExJsDocSections.installation]: InstallationMarkdown, + [zeroExJsDocSections.async]: AsyncMarkdown, + [zeroExJsDocSections.errors]: ErrorsMarkdown, + [zeroExJsDocSections.versioning]: versioningMarkdown, + }, + // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is + // currently no way to extract the re-exported types from index.ts via TypeDoc :( + publicTypes: [ + 'Order', + 'SignedOrder', + 'ECSignature', + 'ZeroExError', + 'EventCallback', + 'EventCallbackAsync', + 'EventCallbackSync', + 'ExchangeContractErrs', + 'ContractEvent', + 'Token', + 'ExchangeEvents', + 'IndexedFilterValues', + 'SubscriptionOpts', + 'BlockParam', + 'OrderFillOrKillRequest', + 'OrderCancellationRequest', + 'OrderFillRequest', + 'ContractEventEmitter', + 'Web3Provider', + 'ContractEventArgs', + 'LogCancelArgs', + 'LogFillArgs', + 'LogErrorContractEventArgs', + 'LogFillContractEventArgs', + 'LogCancelContractEventArgs', + 'TokenEvents', + 'ExchangeContractEventArgs', + 'TransferContractEventArgs', + 'ApprovalContractEventArgs', + 'TokenContractEventArgs', + 'ZeroExConfig', + 'TransactionReceiptWithDecodedLogs', + 'LogWithDecodedArgs', + 'DecodedLogArgs', + 'MethodOpts', + 'ValidateOrderFillableOpts', + 'OrderTransactionOpts', + 'ContractEventArg', + 'LogEvent', + 'LogEntry', + 'DecodedLogEvent', + ], + sectionNameToModulePath: { + [zeroExJsDocSections.zeroEx]: ['"src/0x"'], + [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'], + [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'], + [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'], + [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'], + [zeroExJsDocSections.proxy]: [ + '"src/contract_wrappers/proxy_wrapper"', + '"src/contract_wrappers/token_transfer_proxy_wrapper"', + ], + [zeroExJsDocSections.types]: ['"src/types"'], + }, + menuSubsectionToVersionWhenIntroduced: { + [zeroExJsDocSections.etherToken]: '0.7.1', + [zeroExJsDocSections.proxy]: '0.8.0', + }, + sections: zeroExJsDocSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + export interface ZeroExJSDocumentationPassedProps { source: string; location: Location; @@ -113,20 +226,21 @@ export class ZeroExJSDocumentation extends React.Component - + {_.isUndefined(this.state.docAgnosticFormat) ?
@@ -167,10 +281,10 @@ export class ZeroExJSDocumentation extends React.Component -
+

- - 0x.js + + {docsInfo.packageName}

{this.renderDocumentation()} @@ -182,10 +296,10 @@ export class ZeroExJSDocumentation extends React.Component ); }); @@ -231,7 +346,7 @@ export class ZeroExJSDocumentation extends React.Component - {sectionName === ZeroExJsDocSections.zeroEx && docSection.constructors.length > 0 && + {sectionName === docsInfo.sections.zeroEx && docSection.constructors.length > 0 &&

Constructor

{this.renderZeroExConstructors(docSection.constructors, typeDefinitionByName)} @@ -261,7 +376,7 @@ export class ZeroExJSDocumentation extends React.Component { return this.renderMethodBlocks( - constructor, ZeroExJsDocSections.zeroEx, constructor.isConstructor, typeDefinitionByName, + constructor, docsInfo.sections.zeroEx, constructor.isConstructor, typeDefinitionByName, ); }); return ( @@ -277,11 +392,12 @@ export class ZeroExJSDocumentation extends React.Component - {property.name}: + {property.name}: {property.comment && ); } @@ -307,13 +424,13 @@ export class ZeroExJSDocumentation extends React.Component { - const versionToFileName = await docUtils.getVersionToFileNameAsync(DOC_JSON_ROOT); + const versionToFileName = await docUtils.getVersionToFileNameAsync(docsInfo.docsJsonRoot); const versions = _.keys(versionToFileName); this.props.dispatcher.updateAvailableDocVersions(versions); const sortedVersions = semverSort.desc(versions); @@ -329,8 +446,12 @@ export class ZeroExJSDocumentation extends React.Component void; selectedVersion?: string; versions?: string[]; - doc?: Docs; + docPath?: string; isSectionHeaderClickable?: boolean; } @@ -77,11 +77,11 @@ export class NestedSidebarMenu extends React.Component {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.doc) && + !_.isUndefined(this.props.docPath) && } {navigation} diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx index 8f4f1a35b..4af9a834f 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -8,7 +8,7 @@ import {constants} from 'ts/utils/constants'; interface VersionDropDownProps { selectedVersion: string; versions: string[]; - doc: Docs; + docPath: string; } interface VersionDropDownState {} @@ -40,7 +40,6 @@ export class VersionDropDown extends React.Component Date: Tue, 28 Nov 2017 15:11:04 -0600 Subject: Refactor the topLevel documentation react components for 0x.js and Smart contracts into a single component --- .../website/ts/pages/documentation/docs_info.ts | 55 ++- .../ts/pages/documentation/documentation.tsx | 398 ++++++++++++++++++ .../smart_contracts_documentation.tsx | 431 ------------------- .../documentation/zero_ex_js_documentation.tsx | 462 --------------------- 4 files changed, 452 insertions(+), 894 deletions(-) create mode 100644 packages/website/ts/pages/documentation/documentation.tsx delete mode 100644 packages/website/ts/pages/documentation/smart_contracts_documentation.tsx delete mode 100644 packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index 326ebb31c..f607c2185 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -1,6 +1,14 @@ import compareVersions = require('compare-versions'); import * as _ from 'lodash'; -import {DocsInfoConfig, DocsMenu, SectionsMap} from 'ts/types'; +import { + DocAgnosticFormat, + DocsInfoConfig, + DocsMenu, + DoxityDocObj, + MenuSubsectionsBySection, + SectionsMap, + TypeDocNode, +} from 'ts/types'; export class DocsInfo { public packageName: string; @@ -49,4 +57,49 @@ export class DocsInfo { }); return finalMenu; } + public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { + const menuSubsectionsBySection = {} as MenuSubsectionsBySection; + if (_.isUndefined(docAgnosticFormat)) { + return menuSubsectionsBySection; + } + + const docSections = _.keys(this.sections); + _.each(docSections, sectionName => { + const docSection = docAgnosticFormat[sectionName]; + if (_.isUndefined(docSection)) { + return; // no-op + } + + if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) { + const sortedTypesNames = _.sortBy(docSection.types, 'name'); + const typeNames = _.map(sortedTypesNames, t => t.name); + menuSubsectionsBySection[sectionName] = typeNames; + } else { + let eventNames: string[] = []; + if (!_.isUndefined(docSection.events)) { + const sortedEventNames = _.sortBy(docSection.events, 'name'); + eventNames = _.map(sortedEventNames, m => m.name); + } + const sortedMethodNames = _.sortBy(docSection.methods, 'name'); + const methodNames = _.map(sortedMethodNames, m => m.name); + menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames]; + } + }); + return menuSubsectionsBySection; + } + public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat) { + if (_.isUndefined(this.sections.types)) { + return {}; + } + + const typeDocSection = docAgnosticFormat[this.sections.types]; + const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name'); + return typeDefinitionByName; + } + public isVisibleConstructor(sectionName: string): boolean { + return _.includes(this.docsInfo.visibleConstructors, sectionName); + } + public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat { + return this.docsInfo.convertToDocAgnosticFormatFn(docObj, this); + } } diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx new file mode 100644 index 000000000..288a8f79c --- /dev/null +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -0,0 +1,398 @@ +import findVersions = require('find-versions'); +import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; +import {colors} from 'material-ui/styles'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { + scroller, +} from 'react-scroll'; +import semverSort = require('semver-sort'); +import {TopBar} from 'ts/components/top_bar'; +import {Badge} from 'ts/components/ui/badge'; +import {Comment} from 'ts/pages/documentation/comment'; +import {DocsInfo} from 'ts/pages/documentation/docs_info'; +import {EventDefinition} from 'ts/pages/documentation/event_definition'; +import {MethodBlock} from 'ts/pages/documentation/method_block'; +import {SourceLink} from 'ts/pages/documentation/source_link'; +import {Type} from 'ts/pages/documentation/type'; +import {TypeDefinition} from 'ts/pages/documentation/type_definition'; +import {AnchorTitle} from 'ts/pages/shared/anchor_title'; +import {MarkdownSection} from 'ts/pages/shared/markdown_section'; +import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; +import {SectionHeader} from 'ts/pages/shared/section_header'; +import {Dispatcher} from 'ts/redux/dispatcher'; +import { + AddressByContractName, + CustomType, + DocAgnosticFormat, + Docs, + DocsInfoConfig, + DoxityDocObj, + EtherscanLinkSuffixes, + Event, + MenuSubsectionsBySection, + Networks, + Property, + SolidityMethod, + Styles, + TypeDefinitionByName, + TypeDocNode, + TypescriptMethod, + WebsitePaths, +} from 'ts/types'; +import {constants} from 'ts/utils/constants'; +import {docUtils} from 'ts/utils/doc_utils'; +import {utils} from 'ts/utils/utils'; + +const SCROLL_TO_TIMEOUT = 500; +const SCROLL_TOP_ID = 'docsScrollTop'; +const CUSTOM_PURPLE = '#690596'; +const CUSTOM_RED = '#e91751'; +const CUSTOM_TURQUOIS = '#058789'; + +const networkNameToColor: {[network: string]: string} = { + [Networks.kovan]: CUSTOM_PURPLE, + [Networks.ropsten]: CUSTOM_RED, + [Networks.mainnet]: CUSTOM_TURQUOIS, +}; + +export interface DocumentationAllProps { + source: string; + location: Location; + dispatcher: Dispatcher; + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; +} + +interface DocumentationState { + docAgnosticFormat?: DocAgnosticFormat; +} + +const styles: Styles = { + mainContainers: { + position: 'absolute', + top: 60, + left: 0, + bottom: 0, + right: 0, + overflowZ: 'hidden', + overflowY: 'scroll', + minHeight: 'calc(100vh - 60px)', + WebkitOverflowScrolling: 'touch', + }, + menuContainer: { + borderColor: colors.grey300, + maxWidth: 330, + marginLeft: 20, + }, +}; + +export class Documentation extends + React.Component { + constructor(props: DocumentationAllProps) { + super(props); + this.state = { + docAgnosticFormat: undefined, + }; + } + public componentWillMount() { + const pathName = this.props.location.pathname; + const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1); + const versions = findVersions(lastSegment); + const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined; + // tslint:disable-next-line:no-floating-promises + this.fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); + } + public render() { + const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ? + {} : + this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + return ( +
+ + + {_.isUndefined(this.state.docAgnosticFormat) ? +
+
+
+ +
+
Loading documentation...
+
+
: +
+
+
+ +
+
+
+
+
+

+ + {this.props.docsInfo.packageName} + +

+ {this.renderDocumentation()} +
+
+
+ } +
+ ); + } + private renderDocumentation(): React.ReactNode { + const subMenus = _.values(this.props.docsInfo.getMenu()); + const orderedSectionNames = _.flatten(subMenus); + + const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.state.docAgnosticFormat); + const renderedSections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName)); + + return renderedSections; + } + private renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { + const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName]; + if (!_.isUndefined(markdownFileIfExists)) { + return ( + + ); + } + + const docSection = this.state.docAgnosticFormat[sectionName]; + if (_.isUndefined(docSection)) { + return null; + } + + const sortedTypes = _.sortBy(docSection.types, 'name'); + const typeDefs = _.map(sortedTypes, customType => { + return ( + + ); + }); + + const sortedProperties = _.sortBy(docSection.properties, 'name'); + const propertyDefs = _.map(sortedProperties, this.renderProperty.bind(this)); + + const sortedMethods = _.sortBy(docSection.methods, 'name'); + const methodDefs = _.map(sortedMethods, method => { + const isConstructor = false; + return this.renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName); + }); + + const sortedEvents = _.sortBy(docSection.events, 'name'); + const eventDefs = _.map(sortedEvents, (event: Event, i: number) => { + return ( + + ); + }); + return ( +
+
+
+ +
+ {this.renderNetworkBadgesIfExists(sectionName)} +
+ {docSection.comment && + + } + {docSection.constructors.length > 0 && + this.props.docsInfo.isVisibleConstructor(sectionName) && +
+

Constructor

+ {this.renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} +
+ } + {docSection.properties.length > 0 && +
+

Properties

+
{propertyDefs}
+
+ } + {docSection.methods.length > 0 && +
+

Methods

+
{methodDefs}
+
+ } + {!_.isUndefined(docSection.events) && docSection.events.length > 0 && +
+

Events

+
{eventDefs}
+
+ } + {!_.isUndefined(typeDefs) && typeDefs.length > 0 && +
+
{typeDefs}
+
+ } +
+ ); + } + private renderNetworkBadgesIfExists(sectionName: string) { + const networkToAddressByContractName = constants.contractAddresses[this.props.docsVersion]; + const badges = _.map(networkToAddressByContractName, + (addressByContractName: AddressByContractName, networkName: string) => { + const contractAddress = addressByContractName[sectionName]; + if (_.isUndefined(contractAddress)) { + return null; + } + const linkIfExists = utils.getEtherScanLinkIfExists( + contractAddress, constants.networkIdByName[networkName], EtherscanLinkSuffixes.address, + ); + return ( + + + + ); + }); + return badges; + } + private renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[], + sectionName: string, + typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + const constructorDefs = _.map(constructors, constructor => { + return this.renderMethodBlocks( + constructor, sectionName, constructor.isConstructor, typeDefinitionByName, + ); + }); + return ( +
+ {constructorDefs} +
+ ); + } + private renderProperty(property: Property): React.ReactNode { + return ( +
+ + {property.name}: + + {property.source && + + } + {property.comment && + + } +
+ ); + } + private renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string, + isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode { + return ( + + ); + } + private scrollToHash(): void { + const hashWithPrefix = this.props.location.hash; + let hash = hashWithPrefix.slice(1); + if (_.isEmpty(hash)) { + hash = SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); + } + private async fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { + const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot); + const versions = _.keys(versionToFileName); + this.props.dispatcher.updateAvailableDocVersions(versions); + const sortedVersions = semverSort.desc(versions); + const latestVersion = sortedVersions[0]; + + let versionToFetch = latestVersion; + if (!_.isUndefined(preferredVersionIfExists)) { + const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists]; + if (!_.isUndefined(preferredVersionFileNameIfExists)) { + versionToFetch = preferredVersionIfExists; + } + } + this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); + + const versionFileNameToFetch = versionToFileName[versionToFetch]; + const versionDocObj = await docUtils.getJSONDocFileAsync( + versionFileNameToFetch, this.props.docsInfo.docsJsonRoot, + ); + const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); + + this.setState({ + docAgnosticFormat, + }, () => { + this.scrollToHash(); + }); + } +} diff --git a/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx b/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx deleted file mode 100644 index c7104e150..000000000 --- a/packages/website/ts/pages/documentation/smart_contracts_documentation.tsx +++ /dev/null @@ -1,431 +0,0 @@ -import findVersions = require('find-versions'); -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import {colors} from 'material-ui/styles'; -import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { - scroller, -} from 'react-scroll'; -import semverSort = require('semver-sort'); -import {TopBar} from 'ts/components/top_bar'; -import {Badge} from 'ts/components/ui/badge'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {EventDefinition} from 'ts/pages/documentation/event_definition'; -import {MethodBlock} from 'ts/pages/documentation/method_block'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {Type} from 'ts/pages/documentation/type'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import { - AddressByContractName, - CustomType, - DocAgnosticFormat, - Docs, - DocsInfoConfig, - DoxityDocObj, - EtherscanLinkSuffixes, - Event, - MenuSubsectionsBySection, - Networks, - Property, - SolidityMethod, - Styles, - TypeDefinitionByName, - WebsitePaths, -} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {docUtils} from 'ts/utils/doc_utils'; -import {doxityUtils} from 'ts/utils/doxity_utils'; -import {utils} from 'ts/utils/utils'; -/* tslint:disable:no-var-requires */ -const IntroMarkdown = require('md/docs/smart_contracts/introduction'); -/* tslint:enable:no-var-requires */ - -const SCROLL_TO_TIMEOUT = 500; -const SCROLL_TOP_ID = 'docsScrollTop'; -const CUSTOM_PURPLE = '#690596'; -const CUSTOM_RED = '#e91751'; -const CUSTOM_TURQUOIS = '#058789'; - -const sections = constants.smartContractDocSections; - -const docsInfoConfig: DocsInfoConfig = { - packageName: '0x Smart Contracts', - packageUrl: 'https://github.com/0xProject/contracts', - websitePath: WebsitePaths.SmartContracts, - docsJsonRoot: 'https://s3.amazonaws.com/smart-contracts-docs-json', - menu: { - introduction: [ - sections.Introduction, - ], - contracts: [ - sections.Exchange, - sections.TokenRegistry, - sections.ZRXToken, - sections.EtherToken, - sections.TokenTransferProxy, - ], - }, - sectionNameToMarkdown: { - [sections.Introduction]: IntroMarkdown, - }, - sections, -}; - -const networkNameToColor: {[network: string]: string} = { - [Networks.kovan]: CUSTOM_PURPLE, - [Networks.ropsten]: CUSTOM_RED, - [Networks.mainnet]: CUSTOM_TURQUOIS, -}; - -export interface SmartContractsDocumentationAllProps { - source: string; - location: Location; - dispatcher: Dispatcher; - docsVersion: string; - availableDocVersions: string[]; -} - -interface SmartContractsDocumentationState { - docAgnosticFormat?: DocAgnosticFormat; -} - -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 60, - left: 0, - bottom: 0, - right: 0, - overflowZ: 'hidden', - overflowY: 'scroll', - minHeight: 'calc(100vh - 60px)', - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - marginLeft: 20, - }, -}; -const docsInfo = new DocsInfo(docsInfoConfig); - -export class SmartContractsDocumentation extends - React.Component { - constructor(props: SmartContractsDocumentationAllProps) { - super(props); - this.state = { - docAgnosticFormat: undefined, - }; - } - public componentWillMount() { - const pathName = this.props.location.pathname; - const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1); - const versions = findVersions(lastSegment); - const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined; - // tslint:disable-next-line:no-floating-promises - this.fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); - } - public render() { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.getMenuSubsectionsBySection(this.state.docAgnosticFormat); - return ( -
- - - {_.isUndefined(this.state.docAgnosticFormat) ? -
-
-
- -
-
Loading documentation...
-
-
: -
-
-
- -
-
-
-
-
-

- - 0x Smart Contracts - -

- {this.renderDocumentation()} -
-
-
- } -
- ); - } - private renderDocumentation(): React.ReactNode { - const subMenus = _.values(docsInfo.getMenu()); - const orderedSectionNames = _.flatten(subMenus); - // Since smart contract method params are all base types, no need to pass - // down the typeDefinitionByName - const typeDefinitionByName = {}; - const renderedSections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName)); - - return renderedSections; - } - private renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { - const docSection = this.state.docAgnosticFormat[sectionName]; - - const markdownFileIfExists = docsInfo.sectionNameToMarkdown[sectionName]; - if (!_.isUndefined(markdownFileIfExists)) { - return ( - - ); - } - - if (_.isUndefined(docSection)) { - return null; - } - - const sortedProperties = _.sortBy(docSection.properties, 'name'); - const propertyDefs = _.map(sortedProperties, this.renderProperty.bind(this)); - - const sortedMethods = _.sortBy(docSection.methods, 'name'); - const methodDefs = _.map(sortedMethods, method => { - const isConstructor = false; - return this.renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName); - }); - - const sortedEvents = _.sortBy(docSection.events, 'name'); - const eventDefs = _.map(sortedEvents, (event: Event, i: number) => { - return ( - - ); - }); - return ( -
-
-
- -
- {this.renderNetworkBadges(sectionName)} -
- {docSection.comment && - - } - {docSection.constructors.length > 0 && -
-

Constructor

- {this.renderConstructors(docSection.constructors, typeDefinitionByName)} -
- } - {docSection.properties.length > 0 && -
-

Properties

-
{propertyDefs}
-
- } - {docSection.methods.length > 0 && -
-

Methods

-
{methodDefs}
-
- } - {docSection.events.length > 0 && -
-

Events

-
{eventDefs}
-
- } -
- ); - } - private renderNetworkBadges(sectionName: string) { - const networkToAddressByContractName = constants.contractAddresses[this.props.docsVersion]; - const badges = _.map(networkToAddressByContractName, - (addressByContractName: AddressByContractName, networkName: string) => { - const contractAddress = addressByContractName[sectionName]; - const linkIfExists = utils.getEtherScanLinkIfExists( - contractAddress, constants.networkIdByName[networkName], EtherscanLinkSuffixes.address, - ); - return ( - - - - ); - }); - return badges; - } - private renderConstructors(constructors: SolidityMethod[], - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { - const constructorDefs = _.map(constructors, constructor => { - return this.renderMethodBlocks( - constructor, docsInfo.sections.zeroEx, constructor.isConstructor, typeDefinitionByName, - ); - }); - return ( -
- {constructorDefs} -
- ); - } - private renderProperty(property: Property): React.ReactNode { - return ( -
- - {property.name}: - - {property.source && - - } - {property.comment && - - } -
- ); - } - private renderMethodBlocks(method: SolidityMethod, sectionName: string, isConstructor: boolean, - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { - return ( - - ); - } - private scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); - } - private getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { - const menuSubsectionsBySection = {} as MenuSubsectionsBySection; - if (_.isUndefined(docAgnosticFormat)) { - return menuSubsectionsBySection; - } - - const docSections = _.keys(docsInfo.sections); - _.each(docSections, sectionName => { - const docSection = docAgnosticFormat[sectionName]; - if (_.isUndefined(docSection)) { - return; // no-op - } - - if (sectionName === docsInfo.sections.types) { - const sortedTypesNames = _.sortBy(docSection.types, 'name'); - const typeNames = _.map(sortedTypesNames, t => t.name); - menuSubsectionsBySection[sectionName] = typeNames; - } else { - const sortedEventNames = _.sortBy(docSection.events, 'name'); - const eventNames = _.map(sortedEventNames, m => m.name); - const sortedMethodNames = _.sortBy(docSection.methods, 'name'); - const methodNames = _.map(sortedMethodNames, m => m.name); - menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames]; - } - }); - return menuSubsectionsBySection; - } - private async fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { - const versionToFileName = await docUtils.getVersionToFileNameAsync(docsInfo.docsJsonRoot); - const versions = _.keys(versionToFileName); - this.props.dispatcher.updateAvailableDocVersions(versions); - const sortedVersions = semverSort.desc(versions); - const latestVersion = sortedVersions[0]; - - let versionToFetch = latestVersion; - if (!_.isUndefined(preferredVersionIfExists)) { - const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists]; - if (!_.isUndefined(preferredVersionFileNameIfExists)) { - versionToFetch = preferredVersionIfExists; - } - } - this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); - - const versionFileNameToFetch = versionToFileName[versionToFetch]; - const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsInfo.docsJsonRoot); - const docAgnosticFormat = doxityUtils.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); - - this.setState({ - docAgnosticFormat, - }, () => { - this.scrollToHash(); - }); - } -} diff --git a/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx b/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx deleted file mode 100644 index 5acd99b60..000000000 --- a/packages/website/ts/pages/documentation/zero_ex_js_documentation.tsx +++ /dev/null @@ -1,462 +0,0 @@ -import findVersions = require('find-versions'); -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import MenuItem from 'material-ui/MenuItem'; -import Paper from 'material-ui/Paper'; -import {colors} from 'material-ui/styles'; -import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import * as ReactMarkdown from 'react-markdown'; -import { - Element as ScrollElement, - Link as ScrollLink, - scroller, -} from 'react-scroll'; -import semverSort = require('semver-sort'); -import {TopBar} from 'ts/components/top_bar'; -import {Loading} from 'ts/components/ui/loading'; -import {Comment} from 'ts/pages/documentation/comment'; -import {DocsInfo} from 'ts/pages/documentation/docs_info'; -import {MethodBlock} from 'ts/pages/documentation/method_block'; -import {SourceLink} from 'ts/pages/documentation/source_link'; -import {Type} from 'ts/pages/documentation/type'; -import {TypeDefinition} from 'ts/pages/documentation/type_definition'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import { - CustomType, - DocAgnosticFormat, - Docs, - DocsInfoConfig, - KindString, - Property, - ScreenWidths, - Styles, - TypeDefinitionByName, - TypeDocNode, - TypescriptMethod, - WebsitePaths, -} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {docUtils} from 'ts/utils/doc_utils'; -import {typeDocUtils} from 'ts/utils/typedoc_utils'; -import {utils} from 'ts/utils/utils'; -/* tslint:disable:no-var-requires */ -const IntroMarkdown = require('md/docs/0xjs/introduction'); -const InstallationMarkdown = require('md/docs/0xjs/installation'); -const AsyncMarkdown = require('md/docs/0xjs/async'); -const ErrorsMarkdown = require('md/docs/0xjs/errors'); -const versioningMarkdown = require('md/docs/0xjs/versioning'); -/* tslint:enable:no-var-requires */ - -const SCROLL_TO_TIMEOUT = 500; -const SCROLL_TOP_ID = 'docsScrollTop'; - -const zeroExJsDocSections = { - introduction: 'introduction', - installation: 'installation', - testrpc: 'testrpc', - async: 'async', - errors: 'errors', - versioning: 'versioning', - zeroEx: 'zeroEx', - exchange: 'exchange', - token: 'token', - tokenRegistry: 'tokenRegistry', - etherToken: 'etherToken', - proxy: 'proxy', - types: 'types', -}; - -const docsInfoConfig: DocsInfoConfig = { - packageName: '0x.js', - packageUrl: 'https://github.com/0xProject/0x.js', - websitePath: WebsitePaths.ZeroExJs, - docsJsonRoot: 'https://s3.amazonaws.com/0xjs-docs-jsons', - menu: { - introduction: [ - zeroExJsDocSections.introduction, - ], - install: [ - zeroExJsDocSections.installation, - ], - topics: [ - zeroExJsDocSections.async, - zeroExJsDocSections.errors, - zeroExJsDocSections.versioning, - ], - zeroEx: [ - zeroExJsDocSections.zeroEx, - ], - contracts: [ - zeroExJsDocSections.exchange, - zeroExJsDocSections.token, - zeroExJsDocSections.tokenRegistry, - zeroExJsDocSections.etherToken, - zeroExJsDocSections.proxy, - ], - types: [ - zeroExJsDocSections.types, - ], - }, - sectionNameToMarkdown: { - [zeroExJsDocSections.introduction]: IntroMarkdown, - [zeroExJsDocSections.installation]: InstallationMarkdown, - [zeroExJsDocSections.async]: AsyncMarkdown, - [zeroExJsDocSections.errors]: ErrorsMarkdown, - [zeroExJsDocSections.versioning]: versioningMarkdown, - }, - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Order', - 'SignedOrder', - 'ECSignature', - 'ZeroExError', - 'EventCallback', - 'EventCallbackAsync', - 'EventCallbackSync', - 'ExchangeContractErrs', - 'ContractEvent', - 'Token', - 'ExchangeEvents', - 'IndexedFilterValues', - 'SubscriptionOpts', - 'BlockParam', - 'OrderFillOrKillRequest', - 'OrderCancellationRequest', - 'OrderFillRequest', - 'ContractEventEmitter', - 'Web3Provider', - 'ContractEventArgs', - 'LogCancelArgs', - 'LogFillArgs', - 'LogErrorContractEventArgs', - 'LogFillContractEventArgs', - 'LogCancelContractEventArgs', - 'TokenEvents', - 'ExchangeContractEventArgs', - 'TransferContractEventArgs', - 'ApprovalContractEventArgs', - 'TokenContractEventArgs', - 'ZeroExConfig', - 'TransactionReceiptWithDecodedLogs', - 'LogWithDecodedArgs', - 'DecodedLogArgs', - 'MethodOpts', - 'ValidateOrderFillableOpts', - 'OrderTransactionOpts', - 'ContractEventArg', - 'LogEvent', - 'LogEntry', - 'DecodedLogEvent', - ], - sectionNameToModulePath: { - [zeroExJsDocSections.zeroEx]: ['"src/0x"'], - [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'], - [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'], - [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'], - [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'], - [zeroExJsDocSections.proxy]: [ - '"src/contract_wrappers/proxy_wrapper"', - '"src/contract_wrappers/token_transfer_proxy_wrapper"', - ], - [zeroExJsDocSections.types]: ['"src/types"'], - }, - menuSubsectionToVersionWhenIntroduced: { - [zeroExJsDocSections.etherToken]: '0.7.1', - [zeroExJsDocSections.proxy]: '0.8.0', - }, - sections: zeroExJsDocSections, -}; -const docsInfo = new DocsInfo(docsInfoConfig); - -export interface ZeroExJSDocumentationPassedProps { - source: string; - location: Location; -} - -export interface ZeroExJSDocumentationAllProps { - source: string; - location: Location; - dispatcher: Dispatcher; - docsVersion: string; - availableDocVersions: string[]; -} - -interface ZeroExJSDocumentationState { - docAgnosticFormat?: DocAgnosticFormat; -} - -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 60, - left: 0, - bottom: 0, - right: 0, - overflowZ: 'hidden', - overflowY: 'scroll', - minHeight: 'calc(100vh - 60px)', - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - marginLeft: 20, - }, -}; - -export class ZeroExJSDocumentation extends React.Component { - constructor(props: ZeroExJSDocumentationAllProps) { - super(props); - this.state = { - docAgnosticFormat: undefined, - }; - } - public componentWillMount() { - const pathName = this.props.location.pathname; - const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1); - const versions = findVersions(lastSegment); - const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined; - // tslint:disable-next-line:no-floating-promises - this.fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); - } - public render() { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ? - {} : - typeDocUtils.getMenuSubsectionsBySection(docsInfo.sections, this.state.docAgnosticFormat); - return ( -
- - - {_.isUndefined(this.state.docAgnosticFormat) ? -
-
-
- -
-
Loading documentation...
-
-
: -
-
-
- -
-
-
-
-
-

- - {docsInfo.packageName} - -

- {this.renderDocumentation()} -
-
-
- } -
- ); - } - private renderDocumentation(): React.ReactNode { - const typeDocSection = this.state.docAgnosticFormat[docsInfo.sections.types]; - const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name'); - - const subMenus = _.values(docsInfo.getMenu()); - const orderedSectionNames = _.flatten(subMenus); - const sections = _.map(orderedSectionNames, this.renderSection.bind(this, typeDefinitionByName)); - - return sections; - } - private renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { - const docSection = this.state.docAgnosticFormat[sectionName]; - - const markdownFileIfExists = docsInfo.sectionNameToMarkdown[sectionName]; - if (!_.isUndefined(markdownFileIfExists)) { - return ( - - ); - } - - if (_.isUndefined(docSection)) { - return null; - } - - const typeDefs = _.map(docSection.types, customType => { - return ( - - ); - }); - const propertyDefs = _.map(docSection.properties, this.renderProperty.bind(this)); - const methodDefs = _.map(docSection.methods, method => { - const isConstructor = false; - return this.renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName); - }); - return ( -
- - - {sectionName === docsInfo.sections.zeroEx && docSection.constructors.length > 0 && -
-

Constructor

- {this.renderZeroExConstructors(docSection.constructors, typeDefinitionByName)} -
- } - {docSection.properties.length > 0 && -
-

Properties

-
{propertyDefs}
-
- } - {docSection.methods.length > 0 && -
-

Methods

-
{methodDefs}
-
- } - {typeDefs.length > 0 && -
-
{typeDefs}
-
- } -
- ); - } - private renderZeroExConstructors(constructors: TypescriptMethod[], - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { - const constructorDefs = _.map(constructors, constructor => { - return this.renderMethodBlocks( - constructor, docsInfo.sections.zeroEx, constructor.isConstructor, typeDefinitionByName, - ); - }); - return ( -
- {constructorDefs} -
- ); - } - private renderProperty(property: Property): React.ReactNode { - return ( -
- - {property.name}: - - - {property.comment && - - } -
- ); - } - private renderMethodBlocks(method: TypescriptMethod, sectionName: string, isConstructor: boolean, - typeDefinitionByName: TypeDefinitionByName): React.ReactNode { - return ( - - ); - } - private scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); - } - private async fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { - const versionToFileName = await docUtils.getVersionToFileNameAsync(docsInfo.docsJsonRoot); - const versions = _.keys(versionToFileName); - this.props.dispatcher.updateAvailableDocVersions(versions); - const sortedVersions = semverSort.desc(versions); - const latestVersion = sortedVersions[0]; - - let versionToFetch = latestVersion; - if (!_.isUndefined(preferredVersionIfExists)) { - const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists]; - if (!_.isUndefined(preferredVersionFileNameIfExists)) { - versionToFetch = preferredVersionIfExists; - } - } - this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); - - const versionFileNameToFetch = versionToFileName[versionToFetch]; - const versionDocObj = await docUtils.getJSONDocFileAsync( - versionFileNameToFetch, docsInfo.docsJsonRoot, - ); - const docAgnosticFormat = typeDocUtils.convertToDocAgnosticFormat( - docsInfo, (versionDocObj as TypeDocNode), - ); - - this.setState({ - docAgnosticFormat, - }, () => { - this.scrollToHash(); - }); - } -} -- cgit v1.2.3 From 4258e6dab18a7149d199bcbcb55b83a29f42bca0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Nov 2017 16:05:13 -0600 Subject: rename for clarity --- packages/website/ts/pages/documentation/event_definition.tsx | 4 ++-- packages/website/ts/pages/documentation/method_signature.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 3b1b86112..469e6bb37 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -55,7 +55,7 @@ export class EventDefinition extends React.Component indexed; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { - const t = ( + const type = ( - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {t}, + {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type}, ); }); diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 197252fb4..846c9fa4f 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -48,7 +48,7 @@ function renderParameters( const parameters = method.parameters; const params = _.map(parameters, (p: Parameter) => { const isOptional = p.isOptional; - const t = ( + const type = ( - {p.name}{isOptional && '?'}: {t} + {p.name}{isOptional && '?'}: {type} ); }); -- cgit v1.2.3