From ca25b816fabe15ce1ebc539c0316beba813683b8 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 13 Mar 2018 15:29:12 +0100 Subject: move scripts to monorepro-scripts --- packages/react-docs/src/components/badge.tsx | 56 +++ packages/react-docs/src/components/comment.tsx | 23 ++ packages/react-docs/src/components/custom_enum.tsx | 33 ++ .../react-docs/src/components/documentation.tsx | 375 +++++++++++++++++++++ packages/react-docs/src/components/enum.tsx | 23 ++ .../react-docs/src/components/event_definition.tsx | 84 +++++ packages/react-docs/src/components/interface.tsx | 63 ++++ .../react-docs/src/components/method_block.tsx | 150 +++++++++ .../react-docs/src/components/method_signature.tsx | 128 +++++++ packages/react-docs/src/components/source_link.tsx | 23 ++ packages/react-docs/src/components/type.tsx | 227 +++++++++++++ .../react-docs/src/components/type_definition.tsx | 131 +++++++ 12 files changed, 1316 insertions(+) create mode 100644 packages/react-docs/src/components/badge.tsx create mode 100644 packages/react-docs/src/components/comment.tsx create mode 100644 packages/react-docs/src/components/custom_enum.tsx create mode 100644 packages/react-docs/src/components/documentation.tsx create mode 100644 packages/react-docs/src/components/enum.tsx create mode 100644 packages/react-docs/src/components/event_definition.tsx create mode 100644 packages/react-docs/src/components/interface.tsx create mode 100644 packages/react-docs/src/components/method_block.tsx create mode 100644 packages/react-docs/src/components/method_signature.tsx create mode 100644 packages/react-docs/src/components/source_link.tsx create mode 100644 packages/react-docs/src/components/type.tsx create mode 100644 packages/react-docs/src/components/type_definition.tsx (limited to 'packages/react-docs/src/components') diff --git a/packages/react-docs/src/components/badge.tsx b/packages/react-docs/src/components/badge.tsx new file mode 100644 index 000000000..b342f2dca --- /dev/null +++ b/packages/react-docs/src/components/badge.tsx @@ -0,0 +1,56 @@ +import { Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +const styles: Styles = { + badge: { + width: 50, + fontSize: 11, + height: 10, + borderRadius: 5, + lineHeight: 0.9, + fontFamily: 'Roboto Mono', + marginLeft: 3, + marginRight: 3, + }, +}; + +export interface BadgeProps { + title: string; + backgroundColor: string; +} + +export interface BadgeState { + isHovering: boolean; +} + +export class Badge extends React.Component { + constructor(props: BadgeProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render() { + const badgeStyle = { + ...styles.badge, + backgroundColor: this.props.backgroundColor, + opacity: this.state.isHovering ? 0.7 : 1, + }; + return ( +
+ {this.props.title} +
+ ); + } + private _setHoverState(isHovering: boolean) { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/react-docs/src/components/comment.tsx b/packages/react-docs/src/components/comment.tsx new file mode 100644 index 000000000..0d63d4d31 --- /dev/null +++ b/packages/react-docs/src/components/comment.tsx @@ -0,0 +1,23 @@ +import { MarkdownCodeBlock } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; + +export interface CommentProps { + comment: string; + className?: string; +} + +const defaultProps = { + className: '', +}; + +export const Comment: React.SFC = (props: CommentProps) => { + return ( +
+ +
+ ); +}; + +Comment.defaultProps = defaultProps; diff --git a/packages/react-docs/src/components/custom_enum.tsx b/packages/react-docs/src/components/custom_enum.tsx new file mode 100644 index 000000000..deb33ff1d --- /dev/null +++ b/packages/react-docs/src/components/custom_enum.tsx @@ -0,0 +1,33 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { CustomType } from '../types'; +import { utils } from '../utils/utils'; + +const STRING_ENUM_CODE_PREFIX = ' strEnum('; + +export interface CustomEnumProps { + type: CustomType; +} + +// This component renders custom string enums that was a work-around for versions of +// TypeScript <2.4.0 that did not support them natively. We keep it around to support +// older versions of 0x.js <0.9.0 +export function CustomEnum(props: CustomEnumProps) { + const type = props.type; + if (!_.startsWith(type.defaultValue, STRING_ENUM_CODE_PREFIX)) { + utils.consoleLog('We do not yet support `Variable` types that are not strEnums'); + return null; + } + // Remove the prefix and postfix, leaving only the strEnum values without quotes. + const enumValues = type.defaultValue.slice(10, -3).replace(/'/g, ''); + return ( + + {`{`} + {'\t'} + {enumValues} +
+ {`}`} + + ); +} diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx new file mode 100644 index 000000000..b46358159 --- /dev/null +++ b/packages/react-docs/src/components/documentation.tsx @@ -0,0 +1,375 @@ +import { + colors, + constants as sharedConstants, + EtherscanLinkSuffixes, + MarkdownSection, + MenuSubsectionsBySection, + NestedSidebarMenu, + Networks, + SectionHeader, + Styles, + utils as sharedUtils, +} from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; +import * as React from 'react'; +import { scroller } from 'react-scroll'; + +import { DocsInfo } from '../docs_info'; +import { + AddressByContractName, + DocAgnosticFormat, + DoxityDocObj, + Event, + Property, + SolidityMethod, + SupportedDocJson, + TypeDefinitionByName, + TypescriptMethod, +} from '../types'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +import { Badge } from './badge'; +import { Comment } from './comment'; +import { EventDefinition } from './event_definition'; +import { MethodBlock } from './method_block'; +import { SourceLink } from './source_link'; +import { Type } from './type'; +import { TypeDefinition } from './type_definition'; + +const networkNameToColor: { [network: string]: string } = { + [Networks.Kovan]: colors.purple, + [Networks.Ropsten]: colors.red, + [Networks.Mainnet]: colors.turquois, + [Networks.Rinkeby]: colors.darkYellow, +}; + +export interface DocumentationProps { + 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 class Documentation extends React.Component { + public static defaultProps: Partial = { + topBarHeight: 0, + }; + constructor(props: DocumentationProps) { + super(props); + this.state = { + isHoveringSidebar: false, + }; + } + public componentDidMount() { + window.addEventListener('hashchange', this._onHashChanged.bind(this), false); + } + public componentWillUnmount() { + window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); + } + public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) { + if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { + const hash = window.location.hash.slice(1); + sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); + } + } + public render() { + const styles: Styles = { + mainContainers: { + position: 'absolute', + top: 1, + left: 0, + bottom: 0, + right: 0, + overflowZ: '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 ( +
+ {_.isUndefined(this.props.docAgnosticFormat) ? ( + this._renderLoading(styles.mainContainers) + ) : ( +
+
+
+
+ +
+
+
+
+
+ {this._renderDocumentation()} +
+
+
+
+ )} +
+ ); + } + private _renderLoading(mainContainersStyles: React.CSSProperties) { + return ( +
+
+
+ +
+
+ Loading documentation... +
+
+
+ ); + } + private _renderDocumentation(): React.ReactNode { + const subMenus = _.values(this.props.docsInfo.getMenu()); + const orderedSectionNames = _.flatten(subMenus); + + const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.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.props.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, sectionName)); + + 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 ( + + ); + }); + const headerStyle: React.CSSProperties = { + fontWeight: 100, + }; + 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) { + if (this.props.docsInfo.type !== SupportedDocJson.Doxity) { + return null; + } + + const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[ + this.props.selectedVersion + ]; + const badges = _.map( + networkToAddressByContractName, + (addressByContractName: AddressByContractName, networkName: string) => { + const contractAddress = addressByContractName[sectionName]; + if (_.isUndefined(contractAddress)) { + return null; + } + const linkIfExists = sharedUtils.getEtherScanLinkIfExists( + contractAddress, + sharedConstants.NETWORK_ID_BY_NAME[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(sectionName: string, 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 _onSidebarHover(event: React.FormEvent) { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff() { + this.setState({ + isHoveringSidebar: false, + }); + } + private _onHashChanged(event: any) { + const hash = window.location.hash.slice(1); + sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); + } +} diff --git a/packages/react-docs/src/components/enum.tsx b/packages/react-docs/src/components/enum.tsx new file mode 100644 index 000000000..37f82f26e --- /dev/null +++ b/packages/react-docs/src/components/enum.tsx @@ -0,0 +1,23 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { EnumValue } from '../types'; + +export interface EnumProps { + values: EnumValue[]; +} + +export function Enum(props: EnumProps) { + const values = _.map(props.values, (value, i) => { + const defaultValueIfAny = !_.isUndefined(value.defaultValue) ? ` = ${value.defaultValue}` : ''; + return `\n\t${value.name}${defaultValueIfAny},`; + }); + return ( + + {`{`} + {values} +
+ {`}`} + + ); +} diff --git a/packages/react-docs/src/components/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx new file mode 100644 index 000000000..67729ac87 --- /dev/null +++ b/packages/react-docs/src/components/event_definition.tsx @@ -0,0 +1,84 @@ +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { Event, EventArg } from '../types'; + +import { Type } from './type'; + +export interface EventDefinitionProps { + event: Event; + sectionName: string; + docsInfo: DocsInfo; +} + +export interface EventDefinitionState { + shouldShowAnchor: boolean; +} + +export class EventDefinition extends React.Component { + constructor(props: EventDefinitionProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const event = this.props.event; + const id = `${this.props.sectionName}-${event.name}`; + return ( +
+ +
+ 
+                        {this._renderEventCode()}
+
+
+
+ ); + } + private _renderEventCode() { + const indexed = indexed; + const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { + const type = ( + + ); + return ( + + {eventArg.name} + {eventArg.isIndexed ? indexed : ''}: {type}, + + ); + }); + const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, '\n\t', curr]; + }); + return ( + + {`{`} +
+ {'\t'} + {argList} +
+ {`}`} + + ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx new file mode 100644 index 000000000..01f4942ef --- /dev/null +++ b/packages/react-docs/src/components/interface.tsx @@ -0,0 +1,63 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { CustomType, TypeDocTypes } from '../types'; + +import { MethodSignature } from './method_signature'; +import { Type } from './type'; + +export interface InterfaceProps { + type: CustomType; + sectionName: string; + docsInfo: DocsInfo; +} + +export function Interface(props: InterfaceProps) { + const type = props.type; + const properties = _.map(type.children, property => { + return ( + + {property.name}:{' '} + {property.type.typeDocType !== TypeDocTypes.Reflection ? ( + + ) : ( + + )}, + + ); + }); + const hasIndexSignature = !_.isUndefined(type.indexSignature); + if (hasIndexSignature) { + const is = type.indexSignature; + const param = ( + + {is.keyName}: + + ); + properties.push( + + [{param}]: {is.valueName}, + , + ); + } + const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, '\n\t', curr]; + }); + return ( + + {`{`} +
+ {'\t'} + {propertyList} +
+ {`}`} + + ); +} diff --git a/packages/react-docs/src/components/method_block.tsx b/packages/react-docs/src/components/method_block.tsx new file mode 100644 index 000000000..44a1db8af --- /dev/null +++ b/packages/react-docs/src/components/method_block.tsx @@ -0,0 +1,150 @@ +import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types'; +import { constants } from '../utils/constants'; +import { typeDocUtils } from '../utils/typedoc_utils'; + +import { Comment } from './comment'; +import { MethodSignature } from './method_signature'; +import { SourceLink } from './source_link'; + +export interface MethodBlockProps { + method: SolidityMethod | TypescriptMethod; + sectionName: string; + libraryVersion: string; + typeDefinitionByName: TypeDefinitionByName; + docsInfo: DocsInfo; + sourceUrl: string; +} + +export interface MethodBlockState { + shouldShowAnchor: boolean; +} + +const styles: Styles = { + chip: { + fontSize: 13, + backgroundColor: colors.lightBlueA700, + color: colors.white, + height: 11, + borderRadius: 14, + lineHeight: 0.9, + }, +}; + +export class MethodBlock extends React.Component { + constructor(props: MethodBlockProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const method = this.props.method; + if (typeDocUtils.isPrivateOrProtectedProperty(method.name)) { + return null; + } + + return ( +
+ {!method.isConstructor && ( +
+ {(method as TypescriptMethod).isStatic && this._renderChip('Static')} + {(method as SolidityMethod).isConstant && this._renderChip('Constant')} + {(method as SolidityMethod).isPayable && this._renderChip('Payable')} +
+ +
+
+ )} + + + + {(method as TypescriptMethod).source && ( + + )} + {method.comment && } + {method.parameters && + !_.isEmpty(method.parameters) && ( +
+

+ ARGUMENTS +

+ {this._renderParameterDescriptions(method.parameters)} +
+ )} + {method.returnComment && ( +
+

+ RETURNS +

+ +
+ )} +
+ ); + } + private _renderChip(text: string) { + return ( +
+ {text} +
+ ); + } + private _renderParameterDescriptions(parameters: Parameter[]) { + const descriptions = _.map(parameters, parameter => { + const isOptional = parameter.isOptional; + return ( +
+
+
+ {parameter.name} +
+
+ {isOptional && 'optional'} +
+
+
+ {parameter.comment && } +
+
+ ); + }); + return descriptions; + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-docs/src/components/method_signature.tsx b/packages/react-docs/src/components/method_signature.tsx new file mode 100644 index 000000000..1400182ea --- /dev/null +++ b/packages/react-docs/src/components/method_signature.tsx @@ -0,0 +1,128 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +import { DocsInfo } from '../docs_info'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types'; +import { constants } from '../utils/constants'; + +import { Type } from './type'; + +export interface MethodSignatureProps { + method: TypescriptMethod | SolidityMethod; + sectionName: string; + shouldHideMethodName?: boolean; + shouldUseArrowSyntax?: boolean; + typeDefinitionByName?: TypeDefinitionByName; + docsInfo: DocsInfo; +} + +const defaultProps = { + shouldHideMethodName: false, + shouldUseArrowSyntax: false, +}; + +export const MethodSignature: React.SFC = (props: MethodSignatureProps) => { + const sectionName = constants.TYPES_SECTION_NAME; + const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); + const paramStringArray: any[] = []; + // HACK: For now we don't put params on newlines if there are less then 2 of them. + // Ideally we would check the character length of the resulting method signature and + // if it exceeds the available space, put params on their own lines. + const hasMoreThenTwoParams = parameters.length > 2; + _.each(parameters, (param: React.ReactNode, i: number) => { + const finalParam = hasMoreThenTwoParams ? ( + + {param} + + ) : ( + param + ); + paramStringArray.push(finalParam); + const comma = hasMoreThenTwoParams ? ( + + ,
+ + ) : ( + ', ' + ); + paramStringArray.push(comma); + }); + if (!hasMoreThenTwoParams) { + paramStringArray.pop(); + } + const methodName = props.shouldHideMethodName ? '' : props.method.name; + const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) + ? undefined + : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); + return ( + + {props.method.callPath} + {methodName} + {typeParameterIfExists}({hasMoreThenTwoParams &&
} + {paramStringArray}) + {props.method.returnType && ( + + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + + + )} + + ); +}; + +MethodSignature.defaultProps = defaultProps; + +function renderParameters( + method: TypescriptMethod | SolidityMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, +) { + const parameters = method.parameters; + const params = _.map(parameters, (p: Parameter) => { + const isOptional = p.isOptional; + const type = ( + + ); + return ( + + {p.name} + {isOptional && '?'}: {type} + + ); + }); + return params; +} + +function renderTypeParameter( + method: TypescriptMethod, + docsInfo: DocsInfo, + sectionName: string, + typeDefinitionByName?: TypeDefinitionByName, +) { + const typeParameter = method.typeParameter; + const typeParam = ( + + {`<${typeParameter.name} extends `} + + {`>`} + + ); + return typeParam; +} diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx new file mode 100644 index 000000000..89956a507 --- /dev/null +++ b/packages/react-docs/src/components/source_link.tsx @@ -0,0 +1,23 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Source } from '../types'; + +export interface SourceLinkProps { + source: Source; + sourceUrl: string; + version: string; +} + +export function SourceLink(props: SourceLinkProps) { + const src = props.source; + const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`; + return ( + + ); +} diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx new file mode 100644 index 000000000..56425a5df --- /dev/null +++ b/packages/react-docs/src/components/type.tsx @@ -0,0 +1,227 @@ +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ScrollLink } from 'react-scroll'; +import * as ReactTooltip from 'react-tooltip'; + +import { DocsInfo } from '../docs_info'; +import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +import { TypeDefinition } from './type_definition'; + +const typeToSection: { [typeName: string]: string } = { + ExchangeWrapper: 'exchange', + TokenWrapper: 'token', + TokenRegistryWrapper: 'tokenRegistry', + EtherTokenWrapper: 'etherToken', + ProxyWrapper: 'proxy', + TokenTransferProxyWrapper: 'proxy', + OrderStateWatcher: 'orderWatcher', +}; + +export interface TypeProps { + type: TypeDef; + docsInfo: DocsInfo; + sectionName: string; + typeDefinitionByName?: TypeDefinitionByName; +} + +// The return type needs to be `any` here so that we can recursively define components within +// components (e.g when rendering the union type). +export function Type(props: TypeProps): any { + const type = props.type; + const isReference = type.typeDocType === TypeDocTypes.Reference; + const isArray = type.typeDocType === TypeDocTypes.Array; + let typeNameColor = 'inherit'; + let typeName: string | React.ReactNode; + let typeArgs: React.ReactNode[] = []; + switch (type.typeDocType) { + case TypeDocTypes.Intrinsic: + case TypeDocTypes.Unknown: + typeName = type.name; + typeNameColor = colors.orange; + break; + + case TypeDocTypes.Reference: + typeName = type.name; + typeArgs = _.map(type.typeArguments, (arg: TypeDef) => { + if (arg.typeDocType === TypeDocTypes.Array) { + const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`; + return ( + + [] + + ); + } else { + const subType = ( + + ); + return subType; + } + }); + break; + + case TypeDocTypes.StringLiteral: + typeName = `'${type.value}'`; + typeNameColor = colors.green; + break; + + case TypeDocTypes.Array: + typeName = type.elementType.name; + break; + + case TypeDocTypes.Union: + const unionTypes = _.map(type.types, t => { + return ( + + ); + }); + typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, '|', curr]; + }); + break; + + case TypeDocTypes.TypeParameter: + typeName = type.name; + break; + + case TypeDocTypes.Intersection: + const intersectionsTypes = _.map(type.types, t => { + return ( + + ); + }); + typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, '&', curr]; + }); + break; + + default: + throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType); + } + // HACK: Normalize BigNumber to simply BigNumber. For some reason the type + // name is unpredictably one or the other. + if (typeName === 'BigNumber') { + typeName = 'BigNumber'; + } + const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, ', ', curr]; + }); + + let typeNameUrlIfExists; + let typePrefixIfExists; + let sectionNameIfExists; + if (!_.isUndefined(props.docsInfo.typeConfigs)) { + typeNameUrlIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToExternalLink) + ? props.docsInfo.typeConfigs.typeNameToExternalLink[typeName as string] + : undefined; + typePrefixIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToPrefix) + ? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string] + : undefined; + sectionNameIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToDocSection) + ? props.docsInfo.typeConfigs.typeNameToDocSection[typeName as string] + : undefined; + } + if (!_.isUndefined(typeNameUrlIfExists)) { + typeName = ( + + {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''} + {typeName} + + ); + } else if ( + (isReference || isArray) && + (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists)) + ) { + const id = Math.random().toString(); + const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) + ? `${props.sectionName}-${typeName}` + : sectionNameIfExists; + let typeDefinition; + if (props.typeDefinitionByName) { + typeDefinition = props.typeDefinitionByName[typeName as string]; + } + typeName = ( + + {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? ( + + {typeName} + + ) : ( + + {typeName} + + + + + )} + + ); + } + return ( + + {typeName} + {isArray && '[]'} + {!_.isEmpty(typeArgs) && ( + + {'<'} + {commaSeparatedTypeArgs} + {'>'} + + )} + + ); +} diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx new file mode 100644 index 000000000..68ef4c465 --- /dev/null +++ b/packages/react-docs/src/components/type_definition.tsx @@ -0,0 +1,131 @@ +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from '../types'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +import { Comment } from './comment'; +import { CustomEnum } from './custom_enum'; +import { Enum } from './enum'; +import { Interface } from './interface'; +import { MethodSignature } from './method_signature'; +import { Type } from './type'; + +export interface TypeDefinitionProps { + sectionName: string; + customType: CustomType; + shouldAddId?: boolean; + docsInfo: DocsInfo; +} + +export interface TypeDefinitionState { + shouldShowAnchor: boolean; +} + +export class TypeDefinition extends React.Component { + public static defaultProps: Partial = { + shouldAddId: true, + }; + constructor(props: TypeDefinitionProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const customType = this.props.customType; + if (!this.props.docsInfo.isPublicType(customType.name)) { + return null; // no-op + } + + let typePrefix: string; + let codeSnippet: React.ReactNode; + switch (customType.kindString) { + case KindString.Interface: + typePrefix = 'Interface'; + codeSnippet = ( + + ); + break; + + case KindString.Variable: + typePrefix = 'Enum'; + codeSnippet = ; + break; + + case KindString.Enumeration: + typePrefix = 'Enum'; + const enumValues = _.map(customType.children, (c: CustomTypeChild) => { + return { + name: c.name, + defaultValue: c.defaultValue, + }; + }); + codeSnippet = ; + break; + + case KindString.TypeAlias: + typePrefix = 'Type Alias'; + codeSnippet = ( + + type {customType.name} ={' '} + {customType.type.typeDocType !== TypeDocTypes.Reflection ? ( + + ) : ( + + )} + + ); + break; + + default: + throw utils.spawnSwitchErr('type.kindString', customType.kindString); + } + + const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`; + return ( +
+ +
+ 
+                        
+                            {codeSnippet}
+                        
+
+
+
+ {customType.comment && } +
+
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} -- cgit