diff options
57 files changed, 1378 insertions, 1475 deletions
diff --git a/packages/ethereum-types/CHANGELOG.json b/packages/ethereum-types/CHANGELOG.json index 60fb8c806..ffc4742b1 100644 --- a/packages/ethereum-types/CHANGELOG.json +++ b/packages/ethereum-types/CHANGELOG.json @@ -1,6 +1,6 @@ [ { - "version": "1.1.0", + "version": "1.1.1", "changes": [ { "note": "Add `JSONRPCResponseError` and error field on `JSONRPCResponsePayload`.", @@ -9,6 +9,14 @@ ] }, { + "version": "1.1.0", + "changes": [ + { + "note": "Unpublished package." + } + ] + }, + { "timestamp": 1538693146, "version": "1.0.11", "changes": [ diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index b1e80d1b6..6830a2101 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -27,6 +27,7 @@ "@0xproject/dev-utils": "^1.0.12", "@0xproject/tslint-config": "^1.0.8", "@types/compare-versions": "^3.0.0", + "@types/styled-components": "^4.0.0", "make-promises-safe": "^1.1.0", "shx": "^0.2.2", "tslint": "^5.9.1", @@ -49,9 +50,10 @@ "react": "^16.4.2", "react-dom": "^16.4.2", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", "react-tooltip": "^3.2.7", - "semver": "5.5.0" + "semver": "5.5.0", + "styled-components": "^3.3.0" }, "publishConfig": { "access": "public" diff --git a/packages/react-docs/src/components/comment.tsx b/packages/react-docs/src/components/comment.tsx index c3687c510..9c866e62c 100644 --- a/packages/react-docs/src/components/comment.tsx +++ b/packages/react-docs/src/components/comment.tsx @@ -1,4 +1,4 @@ -import { MarkdownCodeBlock } from '@0xproject/react-shared'; +import { colors, MarkdownCodeBlock } from '@0xproject/react-shared'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; @@ -13,7 +13,7 @@ const defaultProps = { export const Comment: React.SFC<CommentProps> = (props: CommentProps) => { return ( - <div className={`${props.className} comment`}> + <div className={`${props.className} comment`} style={{ color: colors.greyTheme }}> <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} /> </div> ); diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/doc_reference.tsx index 6a08d50e0..5fdcdd2d9 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -2,12 +2,11 @@ import { colors, constants as sharedConstants, EtherscanLinkSuffixes, + HeaderSizes, Link, MarkdownSection, - NestedSidebarMenu, Networks, SectionHeader, - Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import { @@ -21,7 +20,6 @@ import { TypescriptMethod, } from '@0xproject/types'; import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import * as semver from 'semver'; @@ -43,143 +41,42 @@ const networkNameToColor: { [network: string]: string } = { [Networks.Rinkeby]: colors.darkYellow, }; -export interface DocumentationProps { +export interface DocReferenceProps { selectedVersion: string; availableVersions: string[]; docsInfo: DocsInfo; sourceUrl: string; - onVersionSelected: (semver: string) => void; docAgnosticFormat?: DocAgnosticFormat; - sidebarHeader?: React.ReactNode; - topBarHeight?: number; } -export interface DocumentationState { - isHoveringSidebar: boolean; -} +export interface DocReferenceState {} -export class Documentation extends React.Component<DocumentationProps, DocumentationState> { - public static defaultProps: Partial<DocumentationProps> = { - topBarHeight: 0, - }; - constructor(props: DocumentationProps) { - super(props); - this.state = { - isHoveringSidebar: false, - }; - } +export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> { public componentDidMount(): void { window.addEventListener('hashchange', this._onHashChanged.bind(this), false); } public componentWillUnmount(): void { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } - public componentDidUpdate(prevProps: DocumentationProps, _prevState: DocumentationState): void { + public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void { if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } } public render(): React.ReactNode { - const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflowX: 'hidden', - overflowY: 'scroll', - minHeight: `calc(100vh - ${this.props.topBarHeight}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - marginLeft: 20, - }, - }; - const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks(); - const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat); - return ( - <div> - {_.isUndefined(this.props.docAgnosticFormat) ? ( - this._renderLoading(styles.mainContainers) - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }} - > - <div - className="relative sm-hide xs-hide" - style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }} - > - <div - className="border-right absolute" - style={{ - ...styles.menuContainer, - ...styles.mainContainers, - height: `calc(100vh - ${this.props.topBarHeight}px)`, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - selectedVersion={this.props.selectedVersion} - versions={this.props.availableVersions} - sidebarHeader={this.props.sidebarHeader} - sectionNameToLinks={sectionNameToLinks} - subsectionNameToLinks={subsectionNameToLinks} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - </div> - <div - className="relative col lg-col-9 md-col-9 sm-col-12 col-12" - style={{ backgroundColor: colors.white }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={styles.mainContainers} - className="absolute px1" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - {this._renderDocumentation()} - </div> - </div> - </div> - </div> - )} - </div> - ); - } - private _renderLoading(mainContainersStyles: React.CSSProperties): React.ReactNode { - return ( - <div className="col col-12" style={mainContainersStyles}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading documentation... - </div> - </div> - </div> - ); - } - private _renderDocumentation(): React.ReactNode { - const subMenus = _.values(this.props.docsInfo.menu); + const subMenus = _.values(this.props.docsInfo.markdownMenu); const orderedSectionNames = _.flatten(subMenus); const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName)); - return renderedSections; + return ( + <div> + <div id={sharedConstants.SCROLL_TOP_ID} /> + {renderedSections} + </div> + ); } private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion); @@ -197,11 +94,16 @@ export class Documentation extends React.Component<DocumentationProps, Documenta const closestVersion = sortedEligibleVersions[0]; const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName]; if (!_.isUndefined(markdownFileIfExists)) { + // Special-case replace the `introduction` sectionName with the package name + const isIntroductionSection = sectionName === 'introduction'; + const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3; return ( <MarkdownSection key={`markdown-section-${sectionName}`} sectionName={sectionName} + headerSize={headerSize} markdownContent={markdownFileIfExists} + alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined} /> ); } @@ -292,7 +194,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta )} {!_.isEmpty(docSection.functions) && ( <div> - {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>} + {!isExportedFunctionSection && ( + <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div> + )} <div>{functionDefs}</div> </div> )} @@ -311,6 +215,15 @@ export class Documentation extends React.Component<DocumentationProps, Documenta <div>{typeDefs}</div> </div> )} + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + marginTop: 32, + marginBottom: 12, + }} + /> </div> ); } @@ -410,16 +323,6 @@ export class Documentation extends React.Component<DocumentationProps, Documenta /> ); } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } private _onHashChanged(_event: any): void { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 5ec82983a..819311953 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -55,7 +55,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu <div id={`${this.props.sectionName}-${method.name}`} style={{ overflow: 'hidden', width: '100%' }} - className="pb4" + className="pb4 pt2" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 1ae1324c6..d579449f4 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -204,7 +204,9 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { const isExportedClassReference = !!props.type.isExportedClassReference; const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined; if (!_.isUndefined(typeNameUrlIfExists)) { - typeName = ( + typeName = props.isInPopover ? ( + <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> + ) : ( <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}> {typeName} </Link> @@ -218,39 +220,41 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => { ? props.type.name : `${props.docsInfo.typeSectionName}-${typeName}`; typeName = ( - <ScrollLink - to={typeDefinitionAnchorId} - offset={0} - hashSpy={true} - duration={sharedConstants.DOCS_SCROLL_DURATION_MS} - containerId={sharedConstants.SCROLL_CONTAINER_ID} - > + <span> {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span> ) : ( - <span - data-tip={true} - data-for={id} - style={{ - color: colors.lightBlueA700, - cursor: 'pointer', - display: 'inline-block', - }} + <ScrollLink + to={typeDefinitionAnchorId} + offset={0} + hashSpy={true} + duration={sharedConstants.DOCS_SCROLL_DURATION_MS} + containerId={sharedConstants.SCROLL_CONTAINER_ID} > - {typeName} - <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> - <TypeDefinition - sectionName={props.sectionName} - customType={props.typeDefinitionByName[typeName as string]} - shouldAddId={false} - docsInfo={props.docsInfo} - typeDefinitionByName={props.typeDefinitionByName} - isInPopover={true} - /> - </ReactTooltip> - </span> + <span + data-tip={true} + data-for={id} + style={{ + color: colors.lightBlueA700, + cursor: 'pointer', + display: 'inline-block', + }} + > + {typeName} + <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip"> + <TypeDefinition + sectionName={props.sectionName} + customType={props.typeDefinitionByName[typeName as string]} + shouldAddId={false} + docsInfo={props.docsInfo} + typeDefinitionByName={props.typeDefinitionByName} + isInPopover={true} + /> + </ReactTooltip> + </span> + </ScrollLink> )} - </ScrollLink> + </span> ); } return ( diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 9a3e50a1b..3b64247f2 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -124,6 +124,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef title={`${typePrefix} ${customType.name}`} id={this.props.shouldAddId ? typeDefinitionAnchorId : ''} shouldShowAnchor={this.state.shouldShowAnchor} + isDisabled={this.props.isInPopover} /> <div style={{ fontSize: 16 }}> <pre> diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 549106c77..08e7703df 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -17,7 +17,7 @@ export class DocsInfo { public displayName: string; public packageName: string; public packageUrl: string; - public menu: DocsMenu; + public markdownMenu: DocsMenu; public typeSectionName: string; public sections: SectionsMap; public sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion; @@ -25,7 +25,7 @@ export class DocsInfo { constructor(config: DocsInfoConfig) { this.id = config.id; this.type = config.type; - this.menu = config.markdownMenu; + this.markdownMenu = config.markdownMenu; this.displayName = config.displayName; this.packageName = config.packageName; this.packageUrl = config.packageUrl; @@ -34,10 +34,31 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> { - const subsectionNameToLinks: ObjectMap<ALink[]> = {}; + public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): ObjectMap<TypeDefinitionByName> { + if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) { + return {}; + } + + const section = docAgnosticFormat[this.typeSectionName]; + const typeDefinitionByName = _.keyBy(section.types, 'name') as any; + return typeDefinitionByName; + } + public getSectionNameToLinks(docAgnosticFormat: DocAgnosticFormat): ObjectMap<ALink[]> { + const sectionNameToLinks: ObjectMap<ALink[]> = {}; + _.each(this.markdownMenu, (linkTitles, sectionName) => { + sectionNameToLinks[sectionName] = []; + _.each(linkTitles, linkTitle => { + const to = sharedUtils.getIdFromName(linkTitle); + const links = sectionNameToLinks[sectionName]; + links.push({ + title: linkTitle, + to, + }); + }); + }); + if (_.isUndefined(docAgnosticFormat)) { - return subsectionNameToLinks; + return sectionNameToLinks; } const docSections = _.keys(this.sections); @@ -64,7 +85,7 @@ export class DocsInfo { title: typeName, }; }); - subsectionNameToLinks[sectionName] = typeLinks; + sectionNameToLinks[sectionName] = typeLinks; } else if (isExportedFunctionSection) { // Noop so that we don't have the method listed underneath itself. } else { @@ -88,33 +109,9 @@ export class DocsInfo { }; }); - subsectionNameToLinks[sectionName] = links; + sectionNameToLinks[sectionName] = links; } }); - return subsectionNameToLinks; - } - public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { - if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) { - return {}; - } - - const section = docAgnosticFormat[this.typeSectionName]; - const typeDefinitionByName = _.keyBy(section.types, 'name') as any; - return typeDefinitionByName; - } - public getSectionNameToLinks(): ObjectMap<ALink[]> { - const sectionNameToLinks: ObjectMap<ALink[]> = {}; - _.each(this.menu, (linkTitles, sectionName) => { - sectionNameToLinks[sectionName] = []; - _.each(linkTitles, linkTitle => { - const to = sharedUtils.getIdFromName(linkTitle); - const links = sectionNameToLinks[sectionName]; - links.push({ - title: linkTitle, - to, - }); - }); - }); return sectionNameToLinks; } } diff --git a/packages/react-docs/src/index.ts b/packages/react-docs/src/index.ts index f9382940c..504091b34 100644 --- a/packages/react-docs/src/index.ts +++ b/packages/react-docs/src/index.ts @@ -5,7 +5,7 @@ export { DocAgnosticFormat, GeneratedDocJson } from '@0xproject/types'; export { Badge } from './components/badge'; export { Comment } from './components/comment'; export { CustomEnum } from './components/custom_enum'; -export { Documentation } from './components/documentation'; +export { DocReference } from './components/doc_reference'; export { Enum } from './components/enum'; export { EventDefinition } from './components/event_definition'; export { Interface } from './components/interface'; diff --git a/packages/react-docs/src/utils/typedoc_utils.ts b/packages/react-docs/src/utils/typedoc_utils.ts index 19605d497..05c9dae55 100644 --- a/packages/react-docs/src/utils/typedoc_utils.ts +++ b/packages/react-docs/src/utils/typedoc_utils.ts @@ -95,7 +95,9 @@ export class TypeDocUtils { if (!_.isEmpty(this._externalExportToLink)) { this._docsInfo.sections[constants.EXTERNAL_EXPORTS_SECTION_NAME] = constants.EXTERNAL_EXPORTS_SECTION_NAME; - this._docsInfo.menu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [constants.EXTERNAL_EXPORTS_SECTION_NAME]; + this._docsInfo.markdownMenu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [ + constants.EXTERNAL_EXPORTS_SECTION_NAME, + ]; const docSection: DocSection = { comment: 'This package also re-exports some third-party libraries for your convenience.', constructors: [], @@ -119,7 +121,7 @@ export class TypeDocUtils { case KindString.ObjectLiteral: { sectionName = child.name; this._docsInfo.sections[sectionName] = sectionName; - this._docsInfo.menu[sectionName] = [sectionName]; + this._docsInfo.markdownMenu[sectionName] = [sectionName]; const entities = child.children; const commentObj = child.comment; const sectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; @@ -136,7 +138,7 @@ export class TypeDocUtils { case KindString.Function: { sectionName = child.name; this._docsInfo.sections[sectionName] = sectionName; - this._docsInfo.menu[sectionName] = [sectionName]; + this._docsInfo.markdownMenu[sectionName] = [sectionName]; const entities = [child]; const commentObj = child.comment; const SectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; @@ -158,7 +160,7 @@ export class TypeDocUtils { }); if (!_.isEmpty(typeEntities)) { this._docsInfo.sections[constants.TYPES_SECTION_NAME] = constants.TYPES_SECTION_NAME; - this._docsInfo.menu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME]; + this._docsInfo.markdownMenu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME]; const docSection = this._convertEntitiesToDocSection(typeEntities, constants.TYPES_SECTION_NAME); docAgnosticFormat[constants.TYPES_SECTION_NAME] = docSection; } diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json index d1907e785..ee0352561 100644 --- a/packages/react-shared/CHANGELOG.json +++ b/packages/react-shared/CHANGELOG.json @@ -1,7 +1,6 @@ [ { - "timestamp": 1538693146, - "version": "1.0.15", + "version": "1.0.17", "changes": [ { "note": "Dependencies updated" @@ -9,6 +8,15 @@ ] }, { + "timestamp": 1538693146, + "version": "1.0.16", + "changes": [ + { + "note": "Unpublished package" + } + ] + }, + { "timestamp": 1538475601, "version": "1.0.14", "changes": [ diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 178b6d76e..1c23c4c8a 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -53,7 +53,7 @@ "react-dom": "^16.4.2", "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", "react-router-dom": "^4.1.1", "valid-url": "^1.0.9" }, diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index a83881b67..bd99edcab 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; +import styled from 'styled-components'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -14,20 +16,14 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; + isDisabled: boolean; } -export interface AnchorTitleState { - isHovering: boolean; -} +export interface AnchorTitleState {} const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, h1: { - fontSize: '1.8em', + fontSize: '1.875em', }, h2: { fontSize: '1.5em', @@ -38,18 +34,28 @@ const styles: Styles = { }, }; +interface AnchorIconProps { + shouldShowAnchor: boolean; +} + +const AnchorIcon = + styled.i < + AnchorIconProps > + ` + opacity: ${props => (props.shouldShowAnchor ? 1 : 0)}; + &:hover { + opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)}; + } + font-size: 20px; + transform: rotate(45deg); + cursor: pointer; + `; + export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> { - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } + public static defaultProps: Partial<AnchorTitleProps> = { + isDisabled: false, + }; public render(): React.ReactNode { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } return ( <div className="relative flex" @@ -63,29 +69,21 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt } as any } > - <div className="inline-block" style={{ paddingRight: 4 }}> + <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}> {this.props.title} </div> - <ScrollLink - to={this.props.id} - hashSpy={true} - offset={headerSizeToScrollOffset[this.props.headerSize]} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.SCROLL_CONTAINER_ID} - > - <i - className="zmdi zmdi-link" - style={{ ...styles.anchor, opacity }} - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - /> - </ScrollLink> + {!this.props.isDisabled && ( + <ScrollLink + to={this.props.id} + hashSpy={true} + offset={headerSizeToScrollOffset[this.props.headerSize]} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.SCROLL_CONTAINER_ID} + > + <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} /> + </ScrollLink> + )} </div> ); } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } } diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx new file mode 100644 index 000000000..eeaef8571 --- /dev/null +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -0,0 +1,10 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { colors } from '../utils/colors'; + +export interface MarkdownParagraphBlockProps {} + +export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => { + return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{children}</span>; +}; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index e84d2b078..e6a7d80d5 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -11,12 +11,14 @@ import { AnchorTitle } from './anchor_title'; import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; +import { MarkdownParagraphBlock } from './markdown_paragraph_block'; export interface MarkdownSectionProps { sectionName: string; markdownContent: string; headerSize?: HeaderSizes; githubLink?: string; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -43,20 +45,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); - const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); + const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName); + const title = !_.isUndefined(this.props.alternativeSectionTitle) + ? this.props.alternativeSectionTitle + : formattedSectionName; return ( <div className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - <ScrollElement name={id}> - <div className="clearfix pt3"> + <ScrollElement name={id} style={{ paddingBottom: 20 }}> + <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> + <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={finalSectionName} + title={_.capitalize(title)} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -72,13 +77,21 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd )} </div> </div> - <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> <ReactMarkdown source={markdownContent} escapeHtml={false} renderers={{ code: MarkdownCodeBlock, link: MarkdownLinkBlock, + paragraph: MarkdownParagraphBlock, + }} + /> + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + marginTop: 32, }} /> </ScrollElement> diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 5b6076df6..f734dc654 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,97 +8,100 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { Link } from './link'; -import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap<ALink[]>; - subsectionNameToLinks?: ObjectMap<ALink[]>; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; shouldReformatMenuItemNames?: boolean; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId?: string; +} const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }; export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { - shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop.bind(_), shouldReformatMenuItemNames: true, - subsectionNameToLinks: {}, }; + private _urlIntervalCheckId: number | undefined = undefined; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = {}; + } + public componentDidMount(): void { + this._urlIntervalCheckId = window.setInterval(() => { + const scrollId = location.hash.slice(1); + if (scrollId !== this.state.scrolledToId) { + this.setState({ + scrolledToId: scrollId, + }); + } + }, 200); + } + public componentWillUnmount(): void { + window.clearInterval(this._urlIntervalCheckId); + } public render(): React.ReactNode { const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - return ( - <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}> - <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1"> - {finalSectionName.toUpperCase()} - </div> - {this._renderMenuItems(links)} + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> + {finalSectionName.toUpperCase()} </div> - ); - } else { - return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>; - } + {this._renderMenuItems(links)} + </div> + ); }); - const maxWidthWithScrollbar = 307; return ( <div> {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( - <div style={{ maxWidth: maxWidthWithScrollbar }}> - <VersionDropDown - selectedVersion={this.props.selectedVersion} - versions={this.props.versions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - )} - <div className="pl1">{navigation}</div> + <div>{navigation}</div> </div> ); } private _renderMenuItems(links: ALink[]): React.ReactNode[] { - const menuItemStyles = this.props.shouldDisplaySectionHeaders - ? styles.menuItemWithHeaders - : styles.menuItemWithoutHeaders; - const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; + const scrolledToId = this.state.scrolledToId; const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; + let menuItemStyle = styles.menuItem; + let menuItemInnerDivStyle = styles.menuItemInnerDiv; + const isScrolledTo = link.to === scrolledToId; + if (isScrolledTo) { + menuItemStyle = { + ...menuItemStyle, + backgroundColor: colors.lightLinkBlue, + }; + menuItemInnerDivStyle = { + ...menuItemInnerDivStyle, + color: colors.white, + fontWeight: 'bold', + }; + } return ( <div key={`menuItem-${finalMenuItemName}`}> <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> - <MenuItem - style={menuItemStyles} - innerDivStyle={menuItemInnerDivStyles} - onClick={this._onMenuItemClick.bind(this)} - > + <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}> <span style={{ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', @@ -108,50 +111,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </span> </MenuItem> </Link> - {this._renderMenuItemSubsections(link.title)} </div> ); }); return menuItems; } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if ( - _.isUndefined(this.props.subsectionNameToLinks) || - _.isUndefined(this.props.subsectionNameToLinks[menuItemName]) - ) { - return null; - } - return this._renderSubsectionLinks(menuItemName, this.props.subsectionNameToLinks[menuItemName]); - } - private _renderSubsectionLinks(menuItemName: string, links: ALink[]): React.ReactNode { - return ( - <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}> - {_.map(links, link => { - const name = `${menuItemName}-${link.title}`; - return ( - <li key={`menuSubsectionItem-${name}`}> - <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> - <MenuItem - style={{ minHeight: 35 }} - innerDivStyle={{ - paddingLeft: 16, - fontSize: 14, - lineHeight: '35px', - }} - onClick={this._onMenuItemClick.bind(this)} - > - {link.title} - </MenuItem> - </Link> - </li> - ); - })} - </ul> - ); - } - private _onMenuItemClick(): void { - if (!_.isUndefined(this.props.onMenuItemClick)) { - this.props.onMenuItemClick(); - } - } } diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx deleted file mode 100644 index 5ff4bed54..000000000 --- a/packages/react-shared/src/components/version_drop_down.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; - onVersionSelected: (semver: string) => void; -} - -export interface VersionDropDownState {} - -export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { - public render(): React.ReactNode { - return ( - <div className="mx-auto" style={{ width: 120 }}> - <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}> - {this._renderDropDownItems()} - </Select> - </div> - ); - } - private _renderDropDownItems(): React.ReactNode[] { - const items = _.map(this.props.versions, version => { - return ( - <MenuItem key={version} value={version}> - v{version} - </MenuItem> - ); - }); - return items; - } - private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void { - this.props.onVersionSelected(event.target.value); - } -} diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 596c17e83..a4dd7fefa 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -18,6 +18,7 @@ const baseColors = { darkGrey: '#818181', landingLinkGrey: '#919191', linkSectionGrey: '#999999', + greyTheme: '#666666', grey700: '#616161', grey750: '#515151', grey800: '#424242', diff --git a/packages/website/less/all.less b/packages/website/less/all.less index c62db0d20..3747e4860 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -34,17 +34,7 @@ a { } } -#documentation { - p { - line-height: 1.5; - } - - .comment { - p { - margin: 0px; - } - } - +#scroll_container { .typeTooltip { border: 1px solid lightgray; opacity: 1; @@ -83,6 +73,7 @@ a { code { border: 1px solid #e3eefe; + border-radius: 4px; font-family: 'Roboto Mono'; background-color: #f2f6ff !important; // lightBlue } diff --git a/packages/website/package.json b/packages/website/package.json index 22250f59a..4af556b5f 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -53,7 +53,7 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", diff --git a/packages/website/public/css/basscss_responsive_custom.css b/packages/website/public/css/basscss_responsive_custom.css index 5f8bd9117..92a681cb1 100644 --- a/packages/website/public/css/basscss_responsive_custom.css +++ b/packages/website/public/css/basscss_responsive_custom.css @@ -26,6 +26,10 @@ .sm-right { float: right; } + .sm-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } @media (min-width: 52em) { @@ -54,6 +58,10 @@ .md-right { float: right; } + .md-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } @media (min-width: 64em) { @@ -82,4 +90,8 @@ .lg-right { float: right; } + .lg-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } diff --git a/packages/website/public/images/developers/chat_icon.svg b/packages/website/public/images/developers/chat_icon.svg deleted file mode 100644 index c48881454..000000000 --- a/packages/website/public/images/developers/chat_icon.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<rect width="16.5161" height="16" fill="black" fill-opacity="0" transform="scale(2)"/> -<path d="M8.25781 32.0002L17.5481 24.7744H8.25781V32.0002Z" fill="#3289F1"/> -<path d="M0 6C0 2.68629 2.68629 0 6 0H27.0323C30.346 0 33.0323 2.68629 33.0323 6V18.7742C33.0323 22.0879 30.346 24.7742 27.0323 24.7742H6C2.68629 24.7742 0 22.0879 0 18.7742V6Z" fill="#3289F1"/> -</svg> diff --git a/packages/website/public/images/developers/forum_icon.svg b/packages/website/public/images/developers/forum_icon.svg deleted file mode 100644 index 8fb659475..000000000 --- a/packages/website/public/images/developers/forum_icon.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg width="36" height="30" viewBox="0 0 36 30" fill="none" xmlns="http://www.w3.org/2000/svg"> -<rect width="17.2308" height="14" fill="black" fill-opacity="0" transform="translate(0 29) scale(2 -2)"/> -<rect width="17.2308" height="14" fill="black" fill-opacity="0" transform="translate(0 29) scale(2 -2)"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9196 6.90474C18.7267 6.90474 25.5338 6.90474 32.3409 6.90474C35.1684 6.90474 35.1684 2.355 32.3409 2.355C25.5338 2.355 18.7267 2.355 11.9196 2.355C9.0921 2.355 9.0921 6.90474 11.9196 6.90474ZM3.41008 8.27457C5.29364 8.27457 6.82103 6.64616 6.82103 4.63682C6.82103 2.62841 5.29364 1 3.41008 1C1.5274 1 0 2.62841 0 4.63682C0 6.64616 1.5274 8.27457 3.41008 8.27457ZM11.9196 17.2684C18.7267 17.2684 25.5338 17.2684 32.3409 17.2684C35.1684 17.2684 35.1684 12.7177 32.3409 12.7177C25.5338 12.7177 18.7267 12.7177 11.9196 12.7177C9.0921 12.7177 9.0921 17.2684 11.9196 17.2684ZM3.41008 18.6373C5.29364 18.6373 6.82103 17.0089 6.82103 14.9995C6.82103 12.9911 5.29364 11.3627 3.41008 11.3627C1.5274 11.3627 0 12.9911 0 14.9995C0 17.0089 1.5274 18.6373 3.41008 18.6373ZM11.9196 27.6311C18.7267 27.6311 25.5338 27.6311 32.3409 27.6311C35.1684 27.6311 35.1684 23.0804 32.3409 23.0804C25.5338 23.0804 18.7267 23.0804 11.9196 23.0804C9.0921 23.0804 9.0921 27.6311 11.9196 27.6311ZM3.41008 29C5.29364 29 6.82103 27.3716 6.82103 25.3623C6.82103 23.3538 5.29364 21.7254 3.41008 21.7254C1.5274 21.7254 0 23.3538 0 25.3623C0 27.3716 1.5274 29 3.41008 29Z" fill="#999999"/> -</svg> diff --git a/packages/website/public/images/developers/github_icon.svg b/packages/website/public/images/developers/github_icon.svg deleted file mode 100644 index bf10cb221..000000000 --- a/packages/website/public/images/developers/github_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg"> -<rect width="18.3529" height="18" fill="black" fill-opacity="0" transform="scale(2)"/> -<path d="M18.3529 0C8.2176 0 0 8.26332 0 18.455C0 26.6102 5.25812 33.5264 12.5515 35.9661C13.469 36.1351 13.8039 35.5651 13.8039 35.0785C13.8039 34.6392 13.7871 33.1839 13.7781 31.643C8.67463 32.7581 7.5959 29.4668 7.5959 29.4668C6.76026 27.3356 5.55829 26.7679 5.55829 26.7679C3.89036 25.6235 5.68482 25.646 5.68482 25.646C7.5275 25.7744 8.49763 27.5474 8.49763 27.5474C10.1353 30.3679 12.7946 29.5524 13.8386 29.0793C14.0054 27.8898 14.4804 27.0743 15.0036 26.6147C10.9295 26.1484 6.64376 24.5647 6.64376 17.4931C6.64376 15.4768 7.35957 13.8323 8.53125 12.5403C8.34417 12.0717 7.71239 10.194 8.7127 7.65394C8.7127 7.65394 10.2518 7.15832 13.7602 9.5463C15.2231 9.13517 16.7925 8.93242 18.3529 8.92564C19.9122 8.93242 21.4827 9.13741 22.9479 9.54854C26.4496 7.15832 27.9909 7.65617 27.9909 7.65617C28.9946 10.1985 28.3628 12.0739 28.1746 12.5403C29.3508 13.8323 30.061 15.4768 30.061 17.4931C30.061 24.5827 25.7685 26.1439 21.6799 26.6012C22.3408 27.1734 22.9255 28.2953 22.9255 30.0165C22.9255 32.4833 22.9009 34.4725 22.9009 35.0808C22.9009 35.5719 23.2346 36.1464 24.1644 35.9661C31.4523 33.5218 36.7059 26.6057 36.7059 18.455C36.7059 8.26332 28.4883 0 18.3529 0Z" fill="#999999"/> -</svg> diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 9a2146f9c..9a9b9a616 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -1,33 +1,25 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +import { ALink, colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; export interface DocsTopBarProps { location: Location; + screenWidth: ScreenWidths; translate: Translate; - sectionNameToLinks?: ObjectMap<ALink[]>; + sidebar?: React.ReactNode; } interface DocsTopBarState { isDrawerOpen: boolean; } -interface MenuItemInfo { - title: string; - url: string; - iconUrl: string; - fontColor: string; - fontWeight?: string; -} - export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { constructor(props: DocsTopBarProps) { super(props); @@ -43,52 +35,19 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState } } public render(): React.ReactNode { - const menuItemInfos: MenuItemInfo[] = [ - { - title: this.props.translate.get(Key.Github, Deco.Cap), - url: constants.URL_GITHUB_ORG, - iconUrl: '/images/developers/github_icon.svg', - fontColor: colors.linkSectionGrey, - }, - { - title: this.props.translate.get(Key.Forum, Deco.Cap), - url: constants.URL_FORUM, - iconUrl: '/images/developers/forum_icon.svg', - fontColor: colors.linkSectionGrey, - }, - { - title: this.props.translate.get(Key.LiveChat, Deco.Cap), - url: constants.URL_ZEROEX_CHAT, - iconUrl: '/images/developers/chat_icon.svg', - fontColor: colors.lightLinkBlue, - fontWeight: 'bold', - }, - ]; return ( <Container height={80}> - <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> - <Container className="col col-2 sm-hide xs-hide"> - <Link - to={WebsitePaths.Home} - fontColor={colors.linkSectionGrey} - className="flex items-center text-decoration-none" - > - <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} /> - <Container paddingLeft="8px"> - <Text fontSize="16px" fontColor={colors.linkSectionGrey}> - 0xproject.com - </Text> - </Container> - </Link> - </Container> - <Container className="col col-4 md-hide sm-hide xs-hide" /> - <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <Container + className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start" + width="100%" + > + <Container className="sm-hide xs-hide"> <Container className="flex items-center justify-between right" width="300px"> - {this._renderMenuItems(menuItemInfos)} + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} </Container> </Container> <Container className="lg-hide md-hide"> - <Container paddingTop="6px" paddingLeft="18px"> + <Container paddingTop="6px"> <DocsLogo height={30} /> </Container> </Container> @@ -104,33 +63,25 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState /> </Container> </Container> - <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} /> - {this._renderDrawer()} + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} </Container> ); } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { return ( - <a + <Link key={`menu-item-${menuItemInfo.title}`} - href={menuItemInfo.url} - target="_blank" - className="text-decoration-none" + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} > - <Container className="flex"> - <img src={menuItemInfo.iconUrl} width="18" /> - <Container className="flex items-center" paddingLeft="4px"> - <Text - fontSize="16px" - fontWeight={menuItemInfo.fontWeight || 'normal'} - fontColor={menuItemInfo.fontColor} - > - {menuItemInfo.title} - </Text> - </Container> + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Text> </Container> - </a> + </Link> ); }); return menuItems; @@ -143,13 +94,8 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - <Container className="clearfix pl1"> - <NestedSidebarMenu - sectionNameToLinks={this.props.sectionNameToLinks} - shouldDisplaySectionHeaders={true} - shouldReformatMenuItemNames={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> + <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> + {this.props.sidebar} </Container> </Drawer> ); diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx new file mode 100644 index 000000000..6999e039a --- /dev/null +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -0,0 +1,134 @@ +import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, Package, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface OverviewContentProps { + translate: Translate; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; +} + +export interface OverviewContentState {} + +export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> { + public render(): React.ReactNode { + return ( + <Container> + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} + <Container paddingTop="12px"> + {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} + <Container marginTop="36px"> + {_.map(this.props.tutorials, tutorialInfo => ( + <ScrollElement + name={sharedUtils.getIdFromName( + this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + )} + key={`tutorial-${tutorialInfo.link.title}`} + > + <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} /> + </ScrollElement> + ))} + </Container> + </Container> + <Container marginTop="32px" paddingBottom="100px"> + {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + <Container paddingTop="12px"> + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + )} + <Container marginTop="36px"> + {_.map(this.props.categoryToPackages, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + </Container> + </Container> + </Container> + </Container> + ); + } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( + <Container key={`category-${category}`}> + <Text fontSize="18px">{category}</Text> + <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> + </Container> + ); + } + private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.link.title); + return ( + <ScrollElement name={id} key={`package-${pkg.link.title}`}> + <Container className="pb2"> + <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> + <Container className="clearfix mt2 pt1"> + <Container className="md-col lg-col md-col-4 lg-col-4"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {pkg.link.title} + </Text> + </Link> + </Container> + <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> + <Text fontColor={colors.grey700}> + <ReactMarkdown + source={pkg.description} + renderers={{ + link: MarkdownLinkBlock, + paragraph: 'span', + }} + /> + </Text> + </Container> + <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> + <Container position="absolute" right="0px"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Container className="flex"> + <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> + <Container paddingTop="1px" paddingLeft="6px"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 18, color: colors.lightLinkBlue }} + /> + </Container> + </Container> + </Link> + </Container> + </Container> + </Container> + </Container> + </ScrollElement> + ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + <Container paddingTop="30px"> + <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> + {text} + </Text> + </Container> + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> + {text} + </Text> + ); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..ec0ada8bd --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; + +export interface SidebarHeaderProps { + screenWidth: ScreenWidths; + title: string; + docsVersion?: string; + availableDocVersions?: string[]; + onVersionSelected?: () => void; +} + +export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + <Container> + <Container className="flex justify-bottom"> + <Container className="left pl1" width="150px"> + <Text + fontColor={colors.lightLinkBlue} + fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} + fontWeight="bold" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx new file mode 100644 index 000000000..ec1c99f7b --- /dev/null +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -0,0 +1,80 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { styled } from 'ts/style/theme'; + +interface ActiveNodeProps { + className?: string; + selectedVersion: string; +} + +const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => ( + <Container className={className}> + <Container className="flex justify-center"> + <Text fontColor={colors.grey700} fontSize="12px"> + v {selectedVersion} + </Text> + <Container paddingLeft="6px"> + <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} /> + </Container> + </Container> + </Container> +); + +const ActiveNode = styled(PlainActiveNode)` + cursor: pointer; + border: 2px solid ${colors.beigeWhite}; + border-radius: 4px; + padding: 4px 6px 4px 8px; +`; + +interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; + onVersionSelected: (semver: string) => void; +} + +interface VersionDropDownState {} + +export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { + public render(): React.ReactNode { + const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />; + return ( + <DropDown + activateEvent={DropdownMouseEvent.Click} + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} + popoverStyle={{ borderRadius: 4 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const items = _.map(this.props.versions, version => { + const isSelected = version === this.props.selectedVersion; + return ( + <Container key={`dropdown-items-${version}`}> + <Button + borderRadius="0px" + padding="0.8em 0em" + width="100%" + isDisabled={isSelected} + onClick={this._onClick.bind(this, version)} + > + v {version} + </Button> + </Container> + ); + }); + const dropdownMenu = <Container width="88px">{items}</Container>; + return dropdownMenu; + } + private _onClick(selectedVersion: string): void { + this.props.onVersionSelected(selectedVersion); + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index df5dc173d..1db1e89b8 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -44,6 +44,10 @@ const popularDocsToLinkInfos: ALink[] = [ ]; const usefulLinksToLinkInfo: ALink[] = [ { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { title: Key.Github, to: constants.URL_GITHUB_ORG, shouldOpenInNewTab: true, @@ -53,11 +57,6 @@ const usefulLinksToLinkInfo: ALink[] = [ to: WebsitePaths.Whitepaper, shouldOpenInNewTab: true, }, - { - title: Key.Sandbox, - to: constants.URL_SANDBOX, - shouldOpenInNewTab: true, - }, ]; interface DevelopersDropDownProps { @@ -85,7 +84,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} targetOrigin={{ horizontal: 'left', vertical: 'top' }} style={this.props.menuItemStyles} - popoverStyle={{ borderRadius: 4, width: 427, height: 373, marginTop: 10 }} + popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} /> ); } diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index f11ecae19..db4f57100 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -40,6 +40,10 @@ export class Footer extends React.Component<FooterProps, FooterState> { const sectionNameToLinks: ObjectMap<ALink[]> = { [Key.Documentation]: [ { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { title: '0x.js', to: WebsitePaths.ZeroExJs, }, @@ -60,10 +64,6 @@ export class Footer extends React.Component<FooterProps, FooterState> { title: this.props.translate.get(Key.Wiki, Deco.Cap), to: WebsitePaths.Wiki, }, - { - title: this.props.translate.get(Key.Faq, Deco.Cap), - to: WebsitePaths.FAQ, - }, ], [Key.Community]: [ { diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx deleted file mode 100644 index a14ab54f5..000000000 --- a/packages/website/ts/components/sidebar_header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as React from 'react'; - -interface SidebarHeaderProps { - title: string; - iconUrl: string; -} - -interface SidebarHeaderState {} - -export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { - public render(): React.ReactNode { - return ( - <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> - <div className="flex" style={{ fontSize: 25 }}> - <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div> - <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> - docs - </div> - </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> - | - </div> - <div className="flex"> - <div> - <img src={this.props.iconUrl} width="22" /> - </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> - {this.props.title} - </div> - </div> - </div> - ); - } -} diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index ae76c8cf2..7e7247c25 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,5 +1,5 @@ import { DocsInfo } from '@0xproject/react-docs'; -import { ALink, colors, constants as sharedConstants, Link, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; +import { ALink, colors, Link, Styles } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; @@ -35,7 +35,6 @@ export interface TopBarProps { docsVersion?: string; availableDocVersions?: string[]; sectionNameToLinks?: ObjectMap<ALink[]>; - subsectionNameToLinks?: ObjectMap<ALink[]>; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -73,21 +72,6 @@ const styles: Styles = { }, }; -const DOC_WEBSITE_PATHS_TO_KEY = { - [WebsitePaths.SolCov]: Key.SolCov, - [WebsitePaths.SmartContracts]: Key.SmartContracts, - [WebsitePaths.Web3Wrapper]: Key.Web3Wrapper, - [WebsitePaths.SolCompiler]: Key.SolCompiler, - [WebsitePaths.JSONSchemas]: Key.JsonSchemas, - [WebsitePaths.Subproviders]: Key.Subproviders, - [WebsitePaths.ContractWrappers]: Key.ContractWrappers, - [WebsitePaths.Connect]: Key.Connect, - [WebsitePaths.ZeroExJs]: Key.ZeroExJs, - [WebsitePaths.OrderUtils]: Key.OrderUtils, - [WebsitePaths.OrderWatcher]: Key.OrderWatcher, - [WebsitePaths.AssetBuyer]: Key.AssetBuyer, -}; - const DEFAULT_HEIGHT = 68; const EXPANDED_HEIGHT = 75; @@ -155,17 +139,11 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <div className="flex items-center justify-between"> <DevelopersDropDown location={this.props.location} - menuItemStyles={styles.menuItem} + menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }} translate={this.props.translate} menuIconStyle={menuIconStyle} /> <TopBarMenuItem - title={this.props.translate.get(Key.Wiki, Deco.Cap)} - path={WebsitePaths.Wiki} - style={styles.menuItem} - isNightVersion={isNightVersion} - /> - <TopBarMenuItem title={this.props.translate.get(Key.Blog, Deco.Cap)} path={constants.URL_BLOG} style={styles.menuItem} @@ -247,30 +225,15 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { onRequestChange={this._onMenuButtonClick.bind(this)} > <div className="clearfix"> - {this._renderDocsMenu()} - {this._renderWiki()} <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> {this.props.translate.get(Key.Website, Deco.Cap)} </div> <Link to={WebsitePaths.Home}> <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> - <Link to={WebsitePaths.Wiki}> - <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> + <Link to={WebsitePaths.Docs}> + <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> </Link> - {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => { - if (!this._doesUrlInclude(websitePath)) { - return ( - <Link key={`drawer-menu-item-${websitePath}`} to={websitePath}> - <MenuItem className="py2"> - {this.props.translate.get(key, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - ); - } - return null; - })} {!this._isViewingPortal() && ( <Link to={WebsitePaths.Portal}> <MenuItem className="py2"> @@ -299,49 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </Drawer> ); } - private _renderDocsMenu(): React.ReactNode { - const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => { - return this._doesUrlInclude(websitePath); - }); - // HACK: We need to make sure the SCROLL_CONTAINER is loaded before rendering the Sidebar - // because the sidebar renders `react-scroll` links which depend on the scroll container already - // being rendered. - const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID); - if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) { - return undefined; - } - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - sectionNameToLinks={this.props.sectionNameToLinks} - subsectionNameToLinks={this.props.subsectionNameToLinks} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - ); - } - private _renderWiki(): React.ReactNode { - if (!this._isViewingWiki()) { - return undefined; - } - - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - sectionNameToLinks={this.props.sectionNameToLinks} - subsectionNameToLinks={this.props.subsectionNameToLinks} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> - </div> - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -350,28 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private _isViewingDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Docs); - } private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private _doesUrlInclude(aPath: string): boolean { - return _.includes(this.props.location.pathname, aPath); - } - private _isViewingWiki(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Wiki); - } private _shouldDisplayBottomBar(): boolean { - const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => { - return this._doesUrlInclude(websitePath); - }); - return ( - isViewingDocsPage || - this._isViewingWiki() || - this._isViewingFAQ() || - this._isViewingDocs() || - this._isViewingPortal() - ); + return this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 75ba7bcff..2a6a1f477 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -10,11 +10,13 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -29,11 +31,12 @@ export const Button = styled(PlainButton)` color: ${props => props.fontColor}; transition: background-color, opacity 0.5s ease; padding: ${props => props.padding}; - border-radius: 6px; + border-radius: ${props => props.borderRadius}; font-weight: 500; outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -52,11 +55,13 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 1daaeb1c3..4138b3fe5 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import Popover from 'material-ui/Popover'; import * as React from 'react'; import { MaterialUIPosition } from 'ts/types'; @@ -75,7 +76,11 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { anchorEl={this.state.anchorEl} anchorOrigin={this.props.anchorOrigin} targetOrigin={this.props.targetOrigin} - onRequestClose={this._closePopover.bind(this)} + onRequestClose={ + this.props.closeEvent === DropdownMouseEvent.Click + ? this._closePopover.bind(this) + : _.noop.bind(_) + } useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} @@ -95,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ - isDropDownOpen: true, + isDropDownOpen: !this.state.isDropDownOpen, anchorEl: event.currentTarget, }); } diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index a728abe2c..7c86357c5 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -26,8 +26,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: '0x Connect', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -48,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -59,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index 1e1735846..f7e5f17eb 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -25,8 +25,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Contract Wrappers', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -43,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts index 9c7b70a6f..e0ca439a6 100644 --- a/packages/website/ts/containers/docs_home.ts +++ b/packages/website/ts/containers/docs_home.ts @@ -1,7 +1,8 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; -import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home'; +import { DocsHome as DocsHomeComponent, DocsHomeProps } from 'ts/pages/documentation/docs_home'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { ScreenWidths } from 'ts/types'; @@ -16,7 +17,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: DocsHomeProps): ConnectedState => ({ translate: state.translate, screenWidth: state.screenWidth, }); @@ -25,4 +26,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, mapDispatchToProps)(HomeComponent); +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( + DocsHomeComponent, +); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 2b6d6e64d..3cab885b4 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -26,9 +26,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Ethereum Types', packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/ethereum-types', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - types: [markdownSections.types], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -45,6 +43,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -56,6 +55,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index f32a50ea9..4b3200203 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -20,7 +20,6 @@ const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - schemaValidator: 'schemaValidator', schemas: 'schemas', }; @@ -31,10 +30,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'JSON Schemas', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], - schemaValidator: [markdownSections.schemaValidator], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], schemas: [markdownSections.schemas], }, sectionNameToMarkdownByVersion: { @@ -60,6 +56,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -71,6 +68,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index b54c30a1e..77204b480 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -25,8 +25,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Order utils', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -43,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 59a018847..1b0c1ec91 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -25,8 +25,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'OrderWatcher', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -43,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 05b2a50c3..0989a7d0e 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -6,7 +6,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; +import { DocPackages, ScreenWidths, SmartContractDocSections as Sections } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -97,6 +97,7 @@ interface ConnectedState { docsVersion: string; availableDocVersions: string[]; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -108,6 +109,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 20f26ed1d..b84974d69 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -27,9 +27,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Solidity Compiler', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -47,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index 27efd641e..f9c428f8e 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -27,9 +27,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Sol-cov', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -47,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 28b2e9508..1588c7d46 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -27,9 +27,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Subproviders', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [docSections.introduction], - install: [docSections.installation], - ['ledger-node-hid-issue']: [docSections.ledgerNodeHid], + 'getting-started': [docSections.introduction, docSections.installation, docSections.ledgerNodeHid], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -47,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index dc9d23304..0154c05b9 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -13,7 +13,7 @@ const IntroMarkdownV1 = require('md/docs/web3_wrapper/introduction'); const InstallationMarkdownV1 = require('md/docs/web3_wrapper/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', }; @@ -25,16 +25,15 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Web3Wrapper', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [docSections.introduction], - install: [docSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdownV1, + [markdownSections.installation]: InstallationMarkdownV1, }, }, - markdownSections: docSections, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -43,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 357f8bbf4..069b0ae54 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -4,10 +4,12 @@ import { Dispatch } from 'redux'; import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -16,6 +18,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 2a3afd86c..459d8390a 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -5,7 +5,7 @@ import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -39,9 +39,13 @@ const docsInfoConfig: DocsInfoConfig = { displayName: '0x.js', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - topics: [markdownSections.async, markdownSections.errors, markdownSections.versioning], + 'getting-started': [ + markdownSections.introduction, + markdownSections.installation, + markdownSections.async, + markdownSections.errors, + markdownSections.versioning, + ], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -68,6 +72,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -79,6 +84,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx new file mode 100644 index 000000000..e35218a70 --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,182 @@ +import { colors, constants as sharedConstants } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const SCROLLER_WIDTH = 4; + +export interface DevelopersPageProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; + mainContent: React.ReactNode; + sidebar: React.ReactNode; +} + +export interface DevelopersPageState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; + isSidebarScrolling: boolean; +} + +export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { + private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; + constructor(props: DevelopersPageProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); + this.state = { + isHoveringSidebar: false, + isHoveringMainContent: false, + isSidebarScrolling: false, + }; + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); + } + public render(): React.ReactNode { + const scrollableContainerStyles: React.CSSProperties = { + position: 'absolute', + top: 80, + left: 0, + bottom: 0, + right: 0, + overflowX: 'hidden', + overflowY: 'scroll', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + WebkitOverflowScrolling: 'touch', + }; + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 20 : 50; + const sidebarPadding = 22; + return ( + <Container + className="flex items-center overflow-hidden" + width="100%" + background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ + colors.white + } 50%, ${colors.white} 100%)`} + > + <DocumentTitle title="0x Docs DevelopersPage" /> + <Container className="flex mx-auto" height="100vh"> + <Container + className="sm-hide xs-hide relative" + width={234} + paddingLeft={22} + paddingRight={22} + paddingTop={0} + backgroundColor={colors.grey100} + > + <Container + borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} + > + <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> + <DocsLogo height={36} /> + </Container> + </Container> + <div + style={{ + ...scrollableContainerStyles, + paddingTop: 27, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + }} + onMouseEnter={this._onSidebarHover.bind(this, true)} + onMouseLeave={this._onSidebarHover.bind(this, false)} + onWheel={this._throttledSidebarScrolling} + > + <div + style={{ + paddingBottom: 100, + paddingLeft: sidebarPadding, + paddingRight: this.state.isHoveringSidebar + ? sidebarPadding - SCROLLER_WIDTH + : sidebarPadding, + }} + > + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + </div> + </div> + </Container> + <Container + className="relative" + width={isSmallScreen ? '100vw' : 786} + paddingBottom="100px" + backgroundColor={colors.white} + > + <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> + <DocsTopBar + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + sidebar={this.props.sidebar} + /> + </Container> + <div + id={sharedConstants.SCROLL_CONTAINER_ID} + className="absolute" + style={{ + ...scrollableContainerStyles, + paddingTop: 0, + paddingLeft: mainContentPadding, + paddingRight: this.state.isHoveringMainContent + ? mainContentPadding - SCROLLER_WIDTH + : mainContentPadding, + overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', + }} + onMouseEnter={this._onMainContentHover.bind(this, true)} + onMouseOver={this._onMainContentHover.bind(this, true)} + onMouseLeave={this._onMainContentHover.bind(this, false)} + > + {this.props.mainContent} + </div> + </Container> + </Container> + </Container> + ); + } + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } + } + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { + if (isHovering !== this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: isHovering, + }); + } + } + private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isSidebarScrolling: true, + }); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index ca73254c6..40c728c24 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,35 +1,30 @@ import { DocAgnosticFormat, + DocReference, DocsInfo, - Documentation, GeneratedDocJson, SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; +import { NestedSidebarMenu } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const isDevelopmentOrStaging = utils.isDevelopment() || utils.isStaging(); -const DEFAULT_ICON = 'docs.png'; const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; -const idToIcon: { [id: string]: string } = { - [DocPackages.ZeroExJs]: 'zeroExJs.png', - [DocPackages.Connect]: 'connect.png', - [DocPackages.SmartContracts]: 'contracts.png', -}; - const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ZeroExJs]: '0x.js', [DocPackages.Connect]: 'connect', @@ -53,6 +48,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -80,38 +76,58 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { this._isUnmounted = true; } public render(): React.ReactNode { - const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); - const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; - const iconUrl = `/images/doc_icons/${iconFileName}`; + const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <DocReference + selectedVersion={this.props.docsVersion} + availableVersions={this.props.availableDocVersions} + docsInfo={this.props.docsInfo} + docAgnosticFormat={this.state.docAgnosticFormat} + sourceUrl={sourceUrl} + /> + ); + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div /> + ) : ( + <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + return ( + <SidebarHeader + screenWidth={this.props.screenWidth} + title={this.props.docsInfo.displayName} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + onVersionSelected={this._onVersionSelected.bind(this)} + /> + ); + } + private _renderLoading(): React.ReactNode { return ( - <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - docsVersion={this.props.docsVersion} - availableDocVersions={this.props.availableDocVersions} - sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()} - subsectionNameToLinks={subsectionNameToLinks} - docsInfo={this.props.docsInfo} - translate={this.props.translate} - onVersionSelected={this._onVersionSelected.bind(this)} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - /> - <Documentation - selectedVersion={this.props.docsVersion} - availableVersions={this.props.availableDocVersions} - docsInfo={this.props.docsInfo} - docAgnosticFormat={this.state.docAgnosticFormat} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> - </div> + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading documentation... + </Container> + </Container> ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { @@ -146,10 +162,10 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { // documenting solidity. docAgnosticFormat = versionDocObj as DocAgnosticFormat; // HACK: need to modify docsInfo like convertToDocAgnosticFormat() would do - this.props.docsInfo.menu.Contracts = []; + this.props.docsInfo.markdownMenu.Contracts = []; _.each(docAgnosticFormat, (_docObj, sectionName) => { this.props.docsInfo.sections[sectionName] = sectionName; - this.props.docsInfo.menu.Contracts.push(sectionName); + this.props.docsInfo.markdownMenu.Contracts.push(sectionName); }); } diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx new file mode 100644 index 000000000..b02959610 --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,376 @@ +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { Button } from 'ts/components/ui/button'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const TUTORIALS: TutorialInfo[] = [ + { + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: Key.DevelopOnEthereumDescription, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + }, + { + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: Key.BuildARelayerDescription, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + }, + { + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: Key.OrderBasicsDescription, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + }, + { + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: Key.UseSharedLiquidityDescription, + link: { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, + }, +]; + +const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { + [Categories.ZeroExProtocol]: [ + { + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, + }, + { + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', + link: { + title: '@0xproject/connect', + to: WebsitePaths.Connect, + }, + }, + { + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', + link: { + title: '@0xproject/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, + }, + { + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + link: { + title: '@0xproject/json-schemas', + to: WebsitePaths.JSONSchemas, + }, + }, + { + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + link: { + title: '@0xproject/order-utils', + to: WebsitePaths.OrderUtils, + }, + }, + { + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + link: { + title: '@0xproject/order-watcher', + to: WebsitePaths.OrderWatcher, + }, + }, + { + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + link: { + title: '@0xproject/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + shouldOpenInNewTab: true, + }, + }, + ], + [Categories.Ethereum]: [ + { + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, + }, + { + description: + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + link: { + title: '@0xproject/sol-compiler', + to: WebsitePaths.SolCompiler, + }, + }, + { + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + link: { + title: '@0xproject/sol-cov', + to: WebsitePaths.SolCov, + }, + }, + { + description: + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + link: { + title: '@0xproject/subproviders', + to: WebsitePaths.Subproviders, + }, + }, + { + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + link: { + title: '@0xproject/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, + }, + ], + [Categories.CommunityMaintained]: [ + { + description: + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + }, + }, + { + description: + "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A node.js SDK for trading on the DDEX relayer', + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdex Widget', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdex Java SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdex Python SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An open-source API-only Relayer written in Go', + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + }, + }, + { + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap<ALink[]> = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.link, + ), + }; + const mainContent = ( + <OverviewContent + translate={this.props.translate} + tutorials={TUTORIALS} + categoryToPackages={CATEGORY_TO_PACKAGES} + /> + ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> + ); + return ( + <DevelopersPage + mainContent={mainContent} + sidebar={sidebar} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + return menuItems; + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx deleted file mode 100644 index f7c4839b4..000000000 --- a/packages/website/ts/pages/documentation/home.tsx +++ /dev/null @@ -1,623 +0,0 @@ -import { - ALink, - colors, - constants as sharedConstants, - Link, - MarkdownLinkBlock, - NestedSidebarMenu, - utils as sharedUtils, -} from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import * as ReactMarkdown from 'react-markdown'; -import { Element as ScrollElement } from 'react-scroll'; -import { DocsLogo } from 'ts/components/documentation/docs_logo'; -import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; -import { TutorialButton } from 'ts/components/documentation/tutorial_button'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const THROTTLE_TIMEOUT = 100; -const TOP_BAR_HEIGHT = 80; -const SCROLLER_WIDTH = 4; -const TUTORIALS: TutorialInfo[] = [ - { - iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', - description: Key.DevelopOnEthereumDescription, - link: { - title: Key.DevelopOnEthereum, - to: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/build_a_relayer.svg', - description: Key.BuildARelayerDescription, - link: { - title: Key.BuildARelayer, - to: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/0x_order_basics.svg', - description: Key.OrderBasicsDescription, - link: { - title: Key.OrderBasics, - to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: Key.UseSharedLiquidityDescription, - link: { - title: Key.UseSharedLiquidity, - to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenInNewTab: true, - }, - }, -]; -enum Categories { - ZeroExProtocol = '0x Protocol', - Ethereum = 'Ethereum', - CommunityMaintained = 'Community Maintained', -} -// TODO(fabio): Move this to it's own file -const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { - [Categories.ZeroExProtocol]: [ - { - description: - 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', - link: { - title: '0x.js', - to: WebsitePaths.ZeroExJs, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', - link: { - title: '0x starter project', - to: 'https://github.com/0xProject/0x-starter-project', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', - link: { - title: '@0xproject/connect', - to: WebsitePaths.Connect, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', - link: { - title: '@0xproject/contract-wrappers', - to: WebsitePaths.ContractWrappers, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', - link: { - title: '@0xproject/json-schemas', - to: WebsitePaths.JSONSchemas, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', - link: { - title: '@0xproject/order-utils', - to: WebsitePaths.OrderUtils, - shouldOpenInNewTab: true, - }, - }, - { - description: - "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", - link: { - title: '@0xproject/order-watcher', - to: WebsitePaths.OrderWatcher, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', - link: { - title: '@0xproject/sra-spec', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - shouldOpenInNewTab: true, - }, - }, - ], - [Categories.Ethereum]: [ - { - description: - "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", - link: { - title: 'abi-gen', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', - link: { - title: 'ethereum-types', - to: WebsitePaths.EthereumTypes, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', - link: { - title: '@0xproject/sol-compiler', - to: WebsitePaths.SolCompiler, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', - link: { - title: '@0xproject/sol-cov', - to: WebsitePaths.SolCov, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', - link: { - title: '@0xproject/subproviders', - to: WebsitePaths.Subproviders, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', - link: { - title: '@0xproject/web3-wrapper', - to: WebsitePaths.Web3Wrapper, - shouldOpenInNewTab: true, - }, - }, - ], - [Categories.CommunityMaintained]: [ - { - description: - 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', - link: { - title: '0x Event Extractor', - to: 'https://github.com/0xTracker/0x-event-extractor', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', - link: { - title: '0x Tracker Worker', - to: 'https://github.com/0xTracker/0x-tracker-worker', - shouldOpenInNewTab: true, - }, - }, - { - description: - "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - title: 'Aquaduct', - to: 'https://www.npmjs.com/package/aqueduct', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', - link: { - title: 'Aquaduct Server SDK', - to: 'https://github.com/ERCdEX/aqueduct-server-sdk', - shouldOpenInNewTab: true, - }, - }, - { - description: 'A node.js SDK for trading on the DDEX relayer', - link: { - to: 'https://www.npmjs.com/package/ddex-api', - title: 'DDEX Node.js SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", - link: { - to: 'https://github.com/ERCdEX/widget', - title: 'ERCdex Widget', - shouldOpenInNewTab: true, - }, - }, - { - description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - to: 'https://github.com/ERCdEX/java', - title: 'ERCdex Java SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - to: 'https://github.com/ERCdEX/python', - title: 'ERCdex Python SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', - link: { - title: 'Massive', - to: 'https://github.com/NoteGio/massive', - shouldOpenInNewTab: true, - }, - }, - { - description: 'An open-source API-only Relayer written in Go', - link: { - to: 'https://github.com/NoteGio/openrelay', - title: 'OpenRelay', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', - link: { - title: 'OpenRelay.js', - to: 'https://github.com/NoteGio/openrelay.js', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', - link: { - title: 'Radar SDK', - to: 'https://github.com/RadarRelay/sdk', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', - link: { - title: 'The Ocean Javascript SDK', - to: 'https://github.com/TheOceanTrade/theoceanx-javascript', - shouldOpenInNewTab: true, - }, - }, - { - description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", - link: { - to: 'https://www.npmjs.com/package/tokenlon-sdk', - title: 'Tokenlon Javascript SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: 'A small library that implements the 0x order assetData encoding/decoding in Java', - link: { - to: 'https://github.com/wildnothing/asset-data-decoder', - title: 'AssetData decoder library in Java', - shouldOpenInNewTab: true, - }, - }, - ], -}; - -interface Package { - description: string; - link: ALink; -} - -export interface HomeProps { - location: Location; - translate: Translate; - screenWidth: ScreenWidths; - dispatcher: Dispatcher; -} - -export interface HomeState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; - isSidebarScrolling: boolean; -} - -export class Home extends React.Component<HomeProps, HomeState> { - private readonly _throttledScreenWidthUpdate: () => void; - private readonly _throttledSidebarScrolling: () => void; - private _sidebarScrollClearingInterval: number; - constructor(props: HomeProps) { - super(props); - this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); - this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); - this.state = { - isHoveringSidebar: false, - isHoveringMainContent: false, - isSidebarScrolling: false, - }; - } - public componentDidMount(): void { - window.addEventListener('resize', this._throttledScreenWidthUpdate); - window.scrollTo(0, 0); - this._sidebarScrollClearingInterval = window.setInterval(() => { - this.setState({ - isSidebarScrolling: false, - }); - }, 1000); - } - public componentWillUnmount(): void { - window.removeEventListener('resize', this._throttledScreenWidthUpdate); - window.clearInterval(this._sidebarScrollClearingInterval); - } - public render(): React.ReactNode { - const scrollableContainerStyles: React.CSSProperties = { - position: 'absolute', - top: 80, - left: 0, - bottom: 0, - right: 0, - overflowX: 'hidden', - overflowY: 'scroll', - minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }; - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - const mainContentPadding = isSmallScreen ? 20 : 50; - const sectionNameToLinks: ObjectMap<ALink[]> = { - 'Starter guides': _.map(TUTORIALS, tutorialInfo => { - return { - ...tutorialInfo.link, - title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), - }; - }), - [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), - [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), - [Categories.CommunityMaintained]: _.map( - CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], - pkg => pkg.link, - ), - }; - return ( - <Container - className="flex items-center overflow-hidden" - width="100%" - background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ - colors.white - } 50%, ${colors.white} 100%)`} - > - <DocumentTitle title="0x Docs Home" /> - <Container className="flex mx-auto" height="100vh"> - <Container - className="sm-hide xs-hide relative" - width={234} - paddingLeft={22} - paddingRight={22} - paddingTop={0} - backgroundColor={colors.grey100} - > - <Container - borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} - > - <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> - <DocsLogo height={36} /> - </Container> - </Container> - <div - style={{ - ...scrollableContainerStyles, - paddingTop: 27, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }} - onMouseEnter={this._onSidebarHover.bind(this, true)} - onMouseLeave={this._onSidebarHover.bind(this, false)} - onWheel={this._throttledSidebarScrolling} - > - <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px"> - <NestedSidebarMenu - sectionNameToLinks={sectionNameToLinks} - shouldReformatMenuItemNames={false} - /> - </Container> - </div> - </Container> - <Container - className="relative" - width={isSmallScreen ? '100vw' : 716} - paddingBottom="100px" - backgroundColor={colors.white} - > - <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> - <DocsTopBar - location={this.props.location} - translate={this.props.translate} - sectionNameToLinks={sectionNameToLinks} - /> - </Container> - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - className="absolute" - style={{ - ...scrollableContainerStyles, - paddingTop: 30, - paddingLeft: mainContentPadding, - paddingRight: this.state.isHoveringMainContent - ? mainContentPadding - SCROLLER_WIDTH - : mainContentPadding, - overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', - }} - onMouseEnter={this._onMainContentHover.bind(this, true)} - onMouseOver={this._onMainContentHover.bind(this, true)} - onMouseLeave={this._onMainContentHover.bind(this, false)} - > - <Container> - {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} - <Container paddingTop="12px"> - {this._renderSectionDescription( - this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), - )} - <Container marginTop="36px"> - {_.map(TUTORIALS, tutorialInfo => ( - <ScrollElement - name={sharedUtils.getIdFromName( - this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), - )} - key={`tutorial-${tutorialInfo.link.title}`} - > - <TutorialButton - translate={this.props.translate} - tutorialInfo={tutorialInfo} - /> - </ScrollElement> - ))} - </Container> - </Container> - <Container marginTop="32px" paddingBottom="100px"> - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - <Container paddingTop="12px"> - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), - )} - <Container marginTop="36px"> - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), - )} - </Container> - </Container> - </Container> - </Container> - </div> - </Container> - </Container> - </Container> - ); - } - private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { - return ( - <Container key={`category-${category}`}> - <Text fontSize="18px">{category}</Text> - <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> - </Container> - ); - } - private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.link.title); - return ( - <ScrollElement name={id} key={`package-${pkg.link.title}`}> - <Container className="pb2"> - <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> - <Container className="clearfix mt2 pt1"> - <Container className="md-col lg-col md-col-4 lg-col-4"> - <Link - to={pkg.link.to} - fontColor={colors.lightLinkBlue} - shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} - > - <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {pkg.link.title} - </Text> - </Link> - </Container> - <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> - <Text fontColor={colors.grey700}> - <ReactMarkdown - source={pkg.description} - renderers={{ - link: MarkdownLinkBlock, - paragraph: 'span', - }} - /> - </Text> - </Container> - <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> - <Container position="absolute" right="0px"> - <Link - to={pkg.link.to} - fontColor={colors.lightLinkBlue} - shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} - > - <Container className="flex"> - <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> - <Container paddingTop="1px" paddingLeft="6px"> - <i - className="zmdi zmdi-chevron-right bold" - style={{ fontSize: 18, color: colors.lightLinkBlue }} - /> - </Container> - </Container> - </Link> - </Container> - </Container> - </Container> - </Container> - </ScrollElement> - ); - } - private _renderSectionTitle(text: string): React.ReactNode { - return ( - <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> - {text} - </Text> - ); - } - private _renderSectionDescription(text: string): React.ReactNode { - return ( - <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> - {text} - </Text> - ); - } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } - private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isSidebarScrolling: true, - }); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } -} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 395cdabf8..f7a6fe0ce 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -212,7 +212,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > <Container paddingRight="20px"> - <Link to={WebsitePaths.ZeroExJs}> + <Link to={WebsitePaths.Docs}> <CallToAction type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> @@ -598,7 +598,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)} </div> <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> - <Link to={WebsitePaths.ZeroExJs}> + <Link to={WebsitePaths.Docs}> <CallToAction fontSize="15px"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 70f54aceb..76d52c9bd 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -3,27 +3,26 @@ import { colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, NestedSidebarMenu, - Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -31,6 +30,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -38,24 +38,6 @@ interface WikiState { isHoveringSidebar: boolean; } -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - backgroundColor: colors.gray40, - }, -}; - export class Wiki extends React.Component<WikiProps, WikiState> { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -83,85 +65,70 @@ export class Wiki extends React.Component<WikiProps, WikiState> { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} : this._getSectionNameToLinks(this.state.articlesBySection); - const mainContainersStyle: React.CSSProperties = { - ...styles.mainContainers, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }; - const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />; - return ( - <div> - <DocumentTitle title="0x Protocol Wiki" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - sectionNameToLinks={sectionNameToLinks} - translate={this.props.translate} - sidebarHeader={sidebarHeader} - /> - {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={mainContainersStyle}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading wiki... - </div> - </div> - </div> - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} - > - <div - className="relative lg-pl0 md-pl1 sm-hide xs-hide" - style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} - > - <div - className="absolute" - style={{ - ...styles.menuContainer, - ...mainContainersStyle, - height: 'calc(100vh - 76px)', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - sectionNameToLinks={sectionNameToLinks} - sidebarHeader={sidebarHeader} - /> - </div> - </div> - <div - className="relative" - style={{ - width: '100%', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - backgroundColor: 'white', - }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={{ ...mainContainersStyle, overflow: 'auto' }} - className="absolute" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - <div id="wiki" style={{ paddingRight: 2 }}> - {this._renderWikiArticles()} - </div> - </div> - </div> - </div> - </div> - )} + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} </div> ); + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( + <div /> + ) : ( + <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ( + <Container> + <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} /> + {menuItems} + </Container> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading wiki... + </Container> + </Container> + ); } private _renderWikiArticles(): React.ReactNode { const sectionNames = _.keys(this.state.articlesBySection); @@ -180,22 +147,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> - <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> - See a way to improve this article? - </div> - <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> - <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> - </div> - </div> </div> ); }); - return ( - <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0"> - {renderedArticles} - </div> - ); + return <div key={`section-${sectionName}`}>{renderedArticles}</div>; } private async _fetchArticlesBySectionAsync(): Promise<void> { try { @@ -239,16 +194,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } return sectionNameToLinks; } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } private _onHashChanged(_event: any): void { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c04810080..84be4d3b0 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -627,4 +627,15 @@ export interface TutorialInfo { description: string; link: ALink; } + +export enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} + +export interface Package { + description: string; + link: ALink; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0809fb438..e76d40bd3 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,9 @@ +import { ALink } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Key, WebsitePaths } from 'ts/types'; + +const URL_FORUM = 'https://forum.0xproject.com'; +const URL_ZEROEX_CHAT = 'https://chat.0xproject.com'; export const constants = { DECIMAL_PLACES_ETH: 18, @@ -74,7 +79,7 @@ export const constants = { URL_TESTNET_FAUCET: 'https://faucet.0xproject.com', URL_GITHUB_ORG: 'https://github.com/0xProject', URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', - URL_FORUM: 'https://forum.0xproject.com', + URL_FORUM, URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8', @@ -89,7 +94,7 @@ export const constants = { URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', URL_WETH_IO: 'https://weth.io/', - URL_ZEROEX_CHAT: 'https://chat.0xproject.com', + URL_ZEROEX_CHAT, URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DECODED_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', @@ -97,4 +102,24 @@ export const constants = { URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', + DEVELOPER_TOPBAR_LINKS: [ + { + title: Key.Home, + to: WebsitePaths.Home, + }, + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Forum, + to: URL_FORUM, + shouldOpenInNewTab: true, + }, + { + title: Key.LiveChat, + to: URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + ] as ALink[], }; @@ -12168,7 +12168,7 @@ react-router@^4.2.0: prop-types "^15.5.4" warning "^3.0.0" -react-scroll@0xproject/react-scroll#similar-to-pr-330: +react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state: version "1.7.10" resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170" dependencies: |
