Merge branch 'development' into dev-tools-pages

6 files changed, 458 insertions, 0 deletions

diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..2840d5960
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,20 @@
+import { Link } from '@0x/react-shared';
+import * as React from 'react';
+import { WebsitePaths } from 'ts/types';
+
+export interface DocsLogoProps {
+    height: number;
+    containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
+    return (
+        <Link to={WebsitePaths.Docs}>
+            <img src="/images/docs_logo.svg" height={props.height} />
+        </Link>
+    );
+};
+
+DocsLogo.defaultProps = {
+    containerStyle: {},
+};
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
new file mode 100644
index 000000000..2054d0860
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -0,0 +1,108 @@
+import { ALink, colors, Link } from '@0x/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, 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;
+    sidebar?: React.ReactNode;
+}
+
+interface DocsTopBarState {
+    isDrawerOpen: boolean;
+}
+
+export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> {
+    constructor(props: DocsTopBarProps) {
+        super(props);
+        this.state = {
+            isDrawerOpen: false,
+        };
+    }
+    public componentWillReceiveProps(nextProps: DocsTopBarProps): void {
+        if (nextProps.location.pathname !== this.props.location.pathname) {
+            this.setState({
+                isDrawerOpen: false,
+            });
+        }
+    }
+    public render(): React.ReactNode {
+        return (
+            <Container height={80}>
+                <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(constants.DEVELOPER_TOPBAR_LINKS)}
+                        </Container>
+                    </Container>
+                    <Container className="lg-hide md-hide">
+                        <Container paddingTop="6px">
+                            <DocsLogo height={30} />
+                        </Container>
+                    </Container>
+                    <Container className="md-hide lg-hide absolute" right="18px" top="12px">
+                        <i
+                            className="zmdi zmdi-menu"
+                            style={{
+                                color: colors.grey700,
+                                fontSize: 30,
+                                cursor: 'pointer',
+                            }}
+                            onClick={this._onMenuButtonClick.bind(this)}
+                        />
+                    </Container>
+                </Container>
+                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} />
+                {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
+            </Container>
+        );
+    }
+    private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode {
+        const menuItems = _.map(menuItemLinks, menuItemInfo => {
+            return (
+                <Link
+                    key={`menu-item-${menuItemInfo.title}`}
+                    to={menuItemInfo.to}
+                    shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
+                >
+                    <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>
+                </Link>
+            );
+        });
+        return menuItems;
+    }
+    private _renderDrawer(): React.ReactNode {
+        return (
+            <Drawer
+                open={this.state.isDrawerOpen}
+                docked={false}
+                openSecondary={true}
+                onRequestChange={this._onMenuButtonClick.bind(this)}
+            >
+                <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}>
+                    {this.props.sidebar}
+                </Container>
+            </Drawer>
+        );
+    }
+    private _onMenuButtonClick(): void {
+        this.setState({
+            isDrawerOpen: !this.state.isDrawerOpen,
+        });
+    }
+}
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..caabaf874
--- /dev/null
+++ b/packages/website/ts/components/documentation/overview_content.tsx
@@ -0,0 +1,134 @@
+import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/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..fece2704b
--- /dev/null
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -0,0 +1,57 @@
+import { colors } from '@0x/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/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..b747ef598
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,59 @@
+import { colors, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+import { styled } from 'ts/style/theme';
+
+export interface TutorialButtonProps {
+    className?: string;
+    translate: Translate;
+    tutorialInfo: TutorialInfo;
+}
+
+const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => (
+    <Container className={className}>
+        <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}>
+            <div className="flex relative">
+                <div className="col col-1 flex items-center sm-pr3">
+                    <img src={tutorialInfo.iconUrl} height={40} />
+                </div>
+                <div className="lg-pl2 md-pl2 sm-pl3 col col-10">
+                    <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                        {translate.get(tutorialInfo.link.title as Key, Deco.Cap)}
+                    </Text>
+                    <Text Tag="div" fontColor={colors.grey750} fontSize="16">
+                        {translate.get(tutorialInfo.description as Key, Deco.Cap)}
+                    </Text>
+                </div>
+                <div className="col col-1 flex items-center justify-end">
+                    <div className="right">
+                        <i
+                            className="zmdi zmdi-chevron-right bold"
+                            style={{ fontSize: 26, color: colors.lightLinkBlue }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Link>
+    </Container>
+);
+
+export const TutorialButton = styled(PlainTutorialButton)`
+    border-radius: 4px;
+    border: 1px solid ${colors.grey325};
+    background-color: ${colors.white};
+    &:hover {
+        border: 1px solid ${colors.lightLinkBlue};
+        background-color: ${colors.lightestBlue};
+    }
+    padding: 20px;
+    margin-bottom: 15px;
+`;
+
+TutorialButton.defaultProps = {};
+
+TutorialButton.displayName = 'TutorialButton';
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..a1c8b0547
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,80 @@
+import { colors } from '@0x/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);
+    }
+}