From e718123478fef5d7959936d0667b68ee7507755d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 27 Aug 2018 12:13:20 +0100 Subject: Add missing translations needed for dev dropdown --- packages/website/translations/chinese.json | 9 ++++++++- packages/website/translations/english.json | 9 ++++++++- packages/website/translations/korean.json | 9 ++++++++- packages/website/translations/russian.json | 9 ++++++++- packages/website/translations/spanish.json | 9 ++++++++- packages/website/ts/types.ts | 7 +++++++ 6 files changed, 47 insertions(+), 5 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index ed1a6044a..93e740a14 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -78,5 +78,12 @@ "WEBSITE": "网站", "DEVELOPERS": "首页", "HOME": "Rocket.chat", - "ROCKETCHAT": "开发人员" + "ROCKETCHAT": "开发人员", + "BUILD_A_RELAYER": "build a relayer", + "ETHEREUM_DEVELOPMENT": "ethereum development", + "INTRO_TUTORIAL": "intro tutorial", + "TRADING_TUTORIAL": "trading tutorial", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 541c29997..a75b73501 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -80,5 +80,12 @@ "DEVELOPERS": "developers", "HOME": "home", "ROCKETCHAT": "rocket.chat", - "TRADE_CALL_TO_ACTION": "trade on 0x" + "TRADE_CALL_TO_ACTION": "trade on 0x", + "BUILD_A_RELAYER": "build a relayer", + "ETHEREUM_DEVELOPMENT": "ethereum development", + "INTRO_TUTORIAL": "intro tutorial", + "TRADING_TUTORIAL": "trading tutorial", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github" } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 8892f2dee..e6fbcb4cc 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -78,5 +78,12 @@ "WEBSITE": "Website", "HOME": "홈", "ROCKETCHAT": "Rocket.chat", - "DEVELOPERS": "개발자" + "DEVELOPERS": "개발자", + "BUILD_A_RELAYER": "build a relayer", + "ETHEREUM_DEVELOPMENT": "ethereum development", + "INTRO_TUTORIAL": "intro tutorial", + "TRADING_TUTORIAL": "trading tutorial", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 41a7a990d..779bc8173 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -78,5 +78,12 @@ "WEBSITE": "Веб-сайт", "DEVELOPERS": "Домашняя страница", "HOME": "Rocket.chat", - "ROCKETCHAT": "Для разработчиков" + "ROCKETCHAT": "Для разработчиков", + "BUILD_A_RELAYER": "build a relayer", + "ETHEREUM_DEVELOPMENT": "ethereum development", + "INTRO_TUTORIAL": "intro tutorial", + "TRADING_TUTORIAL": "trading tutorial", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 7780190ac..54a463f98 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -79,5 +79,12 @@ "WEBSITE": "website", "DEVELOPERS": "inicio", "HOME": "rocket.chat", - "ROCKETCHAT": "desarrolladores" + "ROCKETCHAT": "desarrolladores", + "BUILD_A_RELAYER": "build a relayer", + "ETHEREUM_DEVELOPMENT": "ethereum development", + "INTRO_TUTORIAL": "intro tutorial", + "TRADING_TUTORIAL": "trading tutorial", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github" } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c637171dd..2c94fe910 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -468,6 +468,13 @@ export enum Key { Home = 'HOME', RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', + BuildARelayer = 'BUILD_A_RELAYER', + EthereumDevelopment = 'ETHEREUM_DEVELOPMENT', + IntroTutorial = 'INTRO_TUTORIAL', + TradingTutorial = 'TRADING_TUTORIAL', + ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', + Sandbox = 'SANDBOX', + Github = 'GITHUB', } export enum SmartContractDocSections { -- cgit v1.2.3 From e10561b4a5b06983ac8a3a2f0f923f7eeeaa9bb6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 27 Aug 2018 12:16:29 +0100 Subject: Fix translation capitalizations to not capitalize single letters with sentences (i.e 'a' in 'Build a Relayer') --- packages/website/ts/utils/translate.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 1ee1a59c5..5595e6e0f 100644 --- a/packages/website/ts/utils/translate.ts +++ b/packages/website/ts/utils/translate.ts @@ -80,7 +80,12 @@ export class Translate { case Deco.CapWords: const words = text.split(' '); - const capitalizedWords = _.map(words, w => this._capitalize(w)); + const capitalizedWords = _.map(words, (w: string, i: number) => { + if (w.length === 1) { + return w; + } + return this._capitalize(w); + }); text = capitalizedWords.join(' '); break; -- cgit v1.2.3 From 791eae24c0c38368eecf3be4b9c1f162a29ca065 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 27 Aug 2018 12:16:58 +0100 Subject: Add ability to specify styling to popover container --- packages/website/ts/components/ui/drop_down.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..1daaeb1c3 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -21,6 +21,7 @@ export interface DropDownProps { zDepth?: number; activateEvent?: DropdownMouseEvent; closeEvent?: DropdownMouseEvent; + popoverStyle?: React.CSSProperties; } interface DropDownState { @@ -34,6 +35,7 @@ export class DropDown extends React.Component { zDepth: 1, activateEvent: DropdownMouseEvent.Hover, closeEvent: DropdownMouseEvent.Hover, + popoverStyle: {}, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -77,6 +79,7 @@ export class DropDown extends React.Component { useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} + style={this.props.popoverStyle} >
Date: Mon, 27 Aug 2018 12:17:23 +0100 Subject: Implement Developers dropdown --- .../components/dropdowns/developers_drop_down.tsx | 180 +++++++++++++++++++++ packages/website/ts/utils/constants.ts | 1 + 2 files changed, 181 insertions(+) create mode 100644 packages/website/ts/components/dropdowns/developers_drop_down.tsx diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..3ab8af2b3 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,180 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +interface KeyToLinkInfo { + [key: string]: LinkInfo; +} + +interface LinkInfo { + link: string; + shouldOpenNewTab: boolean; +} + +const gettingStartedKeyToLinkInfo1: KeyToLinkInfo = { + [Key.BuildARelayer]: { + link: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenNewTab: false, + }, + [Key.IntroTutorial]: { + link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenNewTab: false, + }, +}; +const gettingStartedKeyToLinkInfo2: KeyToLinkInfo = { + [Key.TradingTutorial]: { + link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenNewTab: false, + }, + [Key.EthereumDevelopment]: { + link: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenNewTab: false, + }, +}; +const popularDocsToLinkInfos: KeyToLinkInfo = { + [Key.ZeroExJs]: { + link: WebsitePaths.ZeroExJs, + shouldOpenNewTab: false, + }, + [Key.Connect]: { + link: WebsitePaths.Connect, + shouldOpenNewTab: false, + }, + [Key.SmartContract]: { + link: WebsitePaths.SmartContracts, + shouldOpenNewTab: false, + }, +}; +const usefulLinksToLinkInfo: KeyToLinkInfo = { + [Key.Github]: { + link: constants.URL_GITHUB_ORG, + shouldOpenNewTab: true, + }, + [Key.Whitepaper]: { + link: WebsitePaths.Whitepaper, + shouldOpenNewTab: true, + }, + [Key.Sandbox]: { + link: constants.URL_SANDBOX, + shouldOpenNewTab: true, + }, +}; + +interface DevelopersDropDownProps { + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component { + public render(): React.ReactNode { + const activeNode = ( +
+
{this.props.translate.get(Key.Developers, Deco.Cap)}
+
+ ); + return ( + + ); + } + private _renderDropdownMenu(): React.ReactNode { + const dropdownMenu = ( +
+
+ {this._renderTitle('Getting started')} +
+
{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
+
{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}
+
+
+
+
+
+
{this._renderTitle('Popular docs')}
+
{this._renderLinkSection(popularDocsToLinkInfos)}
+
+
+
{this._renderTitle('Useful links')}
+
{this._renderLinkSection(usefulLinksToLinkInfo)}
+
+
+
+ + VIEW ALL DOCUMENTATION + +
+
+ ); + return dropdownMenu; + } + private _renderTitle(title: string): React.ReactNode { + return ( +
+ {title.toUpperCase()} +
+ ); + } + private _renderLinkSection(keyToLinkInfo: KeyToLinkInfo): React.ReactNode { + const linkStyle: React.CSSProperties = { + color: colors.lightBlueA700, + fontFamily: 'Roboto, Roboto Mono', + }; + const numLinks = _.size(keyToLinkInfo); + let i = 0; + const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => { + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(key as Key, Deco.CapWords); + return ( +
+ {linkInfo.shouldOpenNewTab ? ( + + {linkText} + + ) : ( + + {linkText} + + )} +
+ ); + }); + return
{links}
; + } +} diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 005d17823..2b4aa5209 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -83,6 +83,7 @@ export const constants = { URL_PARITY_CHROME_STORE: 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig', URL_REDDIT: 'https://reddit.com/r/0xproject', + URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', 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/', -- cgit v1.2.3 From 925d5aa09b8855bfc5c0293feda14a77b1357299 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 27 Aug 2018 12:17:33 +0100 Subject: Add developers dropdown to topBar --- packages/website/ts/components/top_bar/top_bar.tsx | 129 +-------------------- 1 file changed, 6 insertions(+), 123 deletions(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 9ef8211a9..8f1137b44 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -8,18 +8,17 @@ import { } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; -import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; +import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -129,111 +128,6 @@ export class TopBar extends React.Component { ? 'flex mx-auto items-center max-width-4' : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const developerSectionMenuItems = [ - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; @@ -245,15 +139,6 @@ export class TopBar extends React.Component { color: isNightVersion ? 'white' : 'black', cursor: 'pointer', }; - const activeNode = ( -
-
{this.props.translate.get(Key.Developers, Deco.Cap)}
-
- -
-
- ); - const popoverContent = {developerSectionMenuItems}; return (
{ {!this._isViewingPortal() && (
- Date: Mon, 27 Aug 2018 12:30:30 +0100 Subject: Move colors to colors module --- packages/react-shared/src/utils/colors.ts | 2 ++ .../ts/components/dropdowns/developers_drop_down.tsx | 14 +++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7d047a50e..5a20eeaa1 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -8,6 +8,7 @@ const baseColors = { greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', + lightBgGrey: '#EDEDED', grey350: '#cacaca', grey400: '#BDBDBD', lightGrey: '#BBBBBB', @@ -15,6 +16,7 @@ const baseColors = { grey: '#A5A5A5', darkGrey: '#818181', landingLinkGrey: '#919191', + linkSectionGrey: '#999999', grey700: '#616161', grey750: '#515151', grey800: '#424242', diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 3ab8af2b3..68f9a2f67 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -87,7 +87,7 @@ export class DevelopersDropDown extends React.Component ); } @@ -122,7 +122,7 @@ export class DevelopersDropDown extends React.Component +
{title.toUpperCase()}
); -- cgit v1.2.3 From cc2000e776b1abf0f545f361c0d0b28b76b6c310 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 11:19:01 +0100 Subject: Use generatic ObjectMap type --- .../ts/components/dropdowns/developers_drop_down.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 68f9a2f67..c4eae0c31 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -3,20 +3,16 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { DropDown } from 'ts/components/ui/drop_down'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface KeyToLinkInfo { - [key: string]: LinkInfo; -} - interface LinkInfo { link: string; shouldOpenNewTab: boolean; } -const gettingStartedKeyToLinkInfo1: KeyToLinkInfo = { +const gettingStartedKeyToLinkInfo1: ObjectMap = { [Key.BuildARelayer]: { link: `${WebsitePaths.Wiki}#Build-A-Relayer`, shouldOpenNewTab: false, @@ -26,7 +22,7 @@ const gettingStartedKeyToLinkInfo1: KeyToLinkInfo = { shouldOpenNewTab: false, }, }; -const gettingStartedKeyToLinkInfo2: KeyToLinkInfo = { +const gettingStartedKeyToLinkInfo2: ObjectMap = { [Key.TradingTutorial]: { link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, shouldOpenNewTab: false, @@ -36,7 +32,7 @@ const gettingStartedKeyToLinkInfo2: KeyToLinkInfo = { shouldOpenNewTab: false, }, }; -const popularDocsToLinkInfos: KeyToLinkInfo = { +const popularDocsToLinkInfos: ObjectMap = { [Key.ZeroExJs]: { link: WebsitePaths.ZeroExJs, shouldOpenNewTab: false, @@ -50,7 +46,7 @@ const popularDocsToLinkInfos: KeyToLinkInfo = { shouldOpenNewTab: false, }, }; -const usefulLinksToLinkInfo: KeyToLinkInfo = { +const usefulLinksToLinkInfo: ObjectMap = { [Key.Github]: { link: constants.URL_GITHUB_ORG, shouldOpenNewTab: true, @@ -76,6 +72,9 @@ interface DevelopersDropDownState {} export class DevelopersDropDown extends React.Component { public render(): React.ReactNode { const activeNode = ( +
{this.props.translate.get(Key.Developers, Deco.Cap)}
@@ -158,7 +157,7 @@ export class DevelopersDropDown extends React.Component ); } - private _renderLinkSection(keyToLinkInfo: KeyToLinkInfo): React.ReactNode { + private _renderLinkSection(keyToLinkInfo: ObjectMap): React.ReactNode { const linkStyle: React.CSSProperties = { color: colors.lightBlueA700, fontFamily: 'Roboto, Roboto Mono', -- cgit v1.2.3 From 2997ba208fbbbcc70785b0a759753851de3e2ca5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 11:19:12 +0100 Subject: Use translation helper --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index c4eae0c31..c2daec475 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -135,7 +135,7 @@ export class DevelopersDropDown extends React.Component - VIEW ALL DOCUMENTATION + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
-- cgit v1.2.3 From 9fd46c790097a64c29df816abf83a05cb6acccee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 15:52:41 +0100 Subject: Update to latest react-shared --- packages/website/package.json | 2 +- .../components/dropdowns/developers_drop_down.tsx | 3 - yarn.lock | 106 +-------------------- 3 files changed, 5 insertions(+), 106 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index 9b6a0ba36..0a223bcb2 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -21,7 +21,7 @@ "@0xproject/contract-wrappers": "^0.0.5", "@0xproject/order-utils": "^0.0.9", "@0xproject/react-docs": "^1.0.7", - "@0xproject/react-shared": "^0.2.3", + "@0xproject/react-shared": "^1.0.8", "@0xproject/subproviders": "^2.0.1", "@0xproject/types": "^0.8.1", "@0xproject/typescript-typings": "^0.4.3", diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index c2daec475..97e9d1989 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -72,9 +72,6 @@ interface DevelopersDropDownState {} export class DevelopersDropDown extends React.Component { public render(): React.ReactNode { const activeNode = ( -
{this.props.translate.get(Key.Developers, Deco.Cap)}
diff --git a/yarn.lock b/yarn.lock index bc67345ca..ef39aebf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -704,27 +704,6 @@ ethers "3.0.22" lodash "4.17.10" -"@0xproject/react-shared@^0.2.3": - version "0.2.3" - resolved "https://registry.yarnpkg.com/@0xproject/react-shared/-/react-shared-0.2.3.tgz#f0403b9b7f1cfbe2853b53cc983ebb13ee8753a5" - dependencies: - "@types/lodash" "4.14.104" - "@types/material-ui" "0.18.0" - "@types/node" "9.6.0" - "@types/react" "16.3.13" - "@types/react-dom" "16.0.4" - "@types/react-scroll" "0.0.31" - basscss "8.0.4" - is-mobile "0.2.2" - lodash "4.17.10" - material-ui "0.17.4" - react "15.6.1" - react-dom "15.6.1" - react-highlight "0xproject/react-highlight" - react-markdown "3.2.2" - react-scroll "1.7.7" - react-tap-event-plugin "2.0.1" - "@0xproject/sol-compiler@^0.5.3", "@0xproject/sol-compiler@^0.5.4": version "0.5.4" resolved "https://registry.yarnpkg.com/@0xproject/sol-compiler/-/sol-compiler-0.5.4.tgz#3e0b04b0c02c5ec046ebb962b5ed20978c6b4cdd" @@ -1158,13 +1137,6 @@ "@types/node" "*" "@types/react" "*" -"@types/react-dom@16.0.4": - version "16.0.4" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.4.tgz#2e8fd45f5443780ed49bf2cdd9809e6091177a7d" - dependencies: - "@types/node" "*" - "@types/react" "*" - "@types/react-dom@^16.0.3": version "16.0.5" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.5.tgz#a757457662e3819409229e8f86795ff37b371f96" @@ -1200,12 +1172,6 @@ "@types/history" "*" "@types/react" "*" -"@types/react-scroll@0.0.31": - version "0.0.31" - resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-0.0.31.tgz#1bb26bfd9f595da6403c2f13c2f9a3ed4d2929fa" - dependencies: - "@types/react" "*" - "@types/react-scroll@1.5.3": version "1.5.3" resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.5.3.tgz#cc4e94db3d7d5b1cd244bfee24091c335d3e2598" @@ -2539,7 +2505,7 @@ basscss-typography@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/basscss-typography/-/basscss-typography-3.0.4.tgz#ec946a2bad8dd1af97be9ea108ad4bb7be932464" -basscss@8.0.4, basscss@^8.0.3: +basscss@^8.0.3: version "8.0.4" resolved "https://registry.yarnpkg.com/basscss/-/basscss-8.0.4.tgz#b371a2ce25aeb9b322302f37f4e425753dd29ae1" dependencies: @@ -7438,7 +7404,7 @@ is-lower-case@^1.1.0: dependencies: lower-case "^1.1.0" -is-mobile@0.2.2, is-mobile@^0.2.2: +is-mobile@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-0.2.2.tgz#0e2e006d99ed2c2155b761df80f2a3619ae2ad9f" @@ -8759,7 +8725,7 @@ marked@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/marked/-/marked-0.4.0.tgz#9ad2c2a7a1791f10a852e0112f77b571dce10c66" -material-ui@0.17.4, material-ui@^0.17.1: +material-ui@^0.17.1: version "0.17.4" resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-0.17.4.tgz#193999ecb49c3ec15ae0abb4e90fdf9a7bd343e0" dependencies: @@ -10110,17 +10076,6 @@ parse-asn1@^5.0.0: evp_bytestokey "^1.0.0" pbkdf2 "^3.0.3" -parse-entities@^1.0.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.2.tgz#9eaf719b29dc3bd62246b4332009072e01527777" - dependencies: - character-entities "^1.0.0" - character-entities-legacy "^1.0.0" - character-reference-invalid "^1.0.0" - is-alphanumerical "^1.0.0" - is-decimal "^1.0.0" - is-hexadecimal "^1.0.0" - parse-entities@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.1.tgz#8112d88471319f27abae4d64964b122fe4e1b890" @@ -11280,16 +11235,6 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" -react-markdown@3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.2.2.tgz#439774c14f25eb25d1b96c126f28ca1486fb0a24" - dependencies: - prop-types "^15.6.0" - remark-parse "^4.0.0" - unified "^6.1.5" - unist-util-visit "^1.1.3" - xtend "^4.0.1" - react-markdown@^3.2.2: version "3.3.0" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.3.0.tgz#a87cdd822aa9302d6add9687961dd1a82a45d02e" @@ -11352,13 +11297,6 @@ react-scroll@0xproject/react-scroll#similar-to-pr-330: lodash.throttle "^4.1.1" prop-types "^15.5.8" -react-scroll@1.7.7: - version "1.7.7" - resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.7.7.tgz#948c40c9a189b62bf4a53ee0fd50e5d89d37260a" - dependencies: - lodash.throttle "^4.1.1" - prop-types "^15.5.8" - react-side-effect@^1.0.2, react-side-effect@^1.1.0: version "1.1.5" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" @@ -11373,7 +11311,7 @@ react-tabs@^2.0.0: classnames "^2.2.0" prop-types "^15.5.0" -react-tap-event-plugin@2.0.1, react-tap-event-plugin@^2.0.1: +react-tap-event-plugin@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/react-tap-event-plugin/-/react-tap-event-plugin-2.0.1.tgz#316beb3bc6556e29ec869a7293e89c826a9074d2" dependencies: @@ -11761,26 +11699,6 @@ regjsparser@^0.1.4: dependencies: jsesc "~0.5.0" -remark-parse@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-4.0.0.tgz#99f1f049afac80382366e2e0d0bd55429dd45d8b" - dependencies: - collapse-white-space "^1.0.2" - is-alphabetical "^1.0.0" - is-decimal "^1.0.0" - is-whitespace-character "^1.0.0" - is-word-character "^1.0.0" - markdown-escapes "^1.0.0" - parse-entities "^1.0.2" - repeat-string "^1.5.4" - state-toggle "^1.0.0" - trim "0.0.1" - trim-trailing-lines "^1.0.0" - unherit "^1.0.4" - unist-util-remove-position "^1.0.0" - vfile-location "^2.0.0" - xtend "^4.0.1" - remark-parse@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95" @@ -14128,10 +14046,6 @@ unist-util-is@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b" -unist-util-is@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db" - unist-util-remove-position@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.1.tgz#5a85c1555fc1ba0c101b86707d15e50fa4c871bb" @@ -14142,24 +14056,12 @@ unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.1.tgz#3ccbdc53679eed6ecf3777dd7f5e3229c1b6aa3c" -unist-util-visit-parents@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz#63fffc8929027bee04bfef7d2cce474f71cb6217" - dependencies: - unist-util-is "^2.1.2" - unist-util-visit@^1.1.0, unist-util-visit@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.0.tgz#41ca7c82981fd1ce6c762aac397fc24e35711444" dependencies: unist-util-is "^2.1.1" -unist-util-visit@^1.1.3: - version "1.4.0" - resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.0.tgz#1cb763647186dc26f5e1df5db6bd1e48b3cc2fb1" - dependencies: - unist-util-visit-parents "^2.0.0" - universalify@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7" -- cgit v1.2.3 From ca0567ad0911657b0241844cd2f34d78b697de8c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 16:03:18 +0100 Subject: Begin implementing doc home page --- packages/website/public/images/docs_logo.svg | 24 +++++ packages/website/translations/chinese.json | 3 +- packages/website/translations/english.json | 3 +- packages/website/translations/korean.json | 3 +- packages/website/translations/russian.json | 3 +- packages/website/translations/spanish.json | 3 +- .../documentation/docs_content_top_bar.tsx | 110 +++++++++++++++++++++ .../ts/components/documentation/docs_logo.tsx | 13 +++ packages/website/ts/containers/docs_home.ts | 15 +++ packages/website/ts/index.tsx | 2 + packages/website/ts/pages/documentation/home.tsx | 55 +++++++++++ packages/website/ts/types.ts | 1 + packages/website/ts/utils/constants.ts | 1 + 13 files changed, 231 insertions(+), 5 deletions(-) create mode 100644 packages/website/public/images/docs_logo.svg create mode 100644 packages/website/ts/components/documentation/docs_content_top_bar.tsx create mode 100644 packages/website/ts/components/documentation/docs_logo.tsx create mode 100644 packages/website/ts/containers/docs_home.ts create mode 100644 packages/website/ts/pages/documentation/home.tsx diff --git a/packages/website/public/images/docs_logo.svg b/packages/website/public/images/docs_logo.svg new file mode 100644 index 000000000..e3c4b628b --- /dev/null +++ b/packages/website/public/images/docs_logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 93e740a14..7c3872cee 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index a75b73501..52e4eeb50 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -87,5 +87,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index e6fbcb4cc..81fbea6e3 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 779bc8173..4cc7aab91 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 54a463f98..f906de984 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -86,5 +86,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx new file mode 100644 index 000000000..c9bdca61b --- /dev/null +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -0,0 +1,110 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; +import { Container } from 'ts/components/ui/container'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsContentTopBarProps { + location: Location; + translate: Translate; +} + +interface DocsContentTopBarState { + isDrawerOpen: boolean; +} + +const styles: Styles = { + menuItem: { + fontSize: 14, + color: colors.darkestGrey, + paddingTop: 6, + paddingBottom: 6, + cursor: 'pointer', + fontWeight: 400, + }, +}; + +export class DocsContentTopBar extends React.Component { + constructor(props: DocsContentTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + const menuIconStyle = { + fontSize: 25, + color: 'black', + cursor: 'pointer', + }; + return ( +
+ +
+ 0xproject.com +
+
+
+ + + +
+
+
+
+ +
+
+ + {this._renderDrawer()} +
+ ); + } + private _renderDrawer(): React.ReactNode { + return ( + +
TODO
+ + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} 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..b65a27fd9 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { WebsitePaths } from 'ts/types'; + +export const DocsLogo = () => { + return ( +
+ + + +
+ ); +}; diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts new file mode 100644 index 000000000..79bf68618 --- /dev/null +++ b/packages/website/ts/containers/docs_home.ts @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({ + translate: state.translate, +}); + +export const DocsHome: React.ComponentClass = connect(mapStateToProps, undefined)(HomeComponent); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 981c6f2cb..8ed40e69a 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -6,6 +6,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d import * as injectTapEventPlugin from 'react-tap-event-plugin'; import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; +import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; @@ -91,6 +92,7 @@ render( + { + public render(): React.ReactNode { + return ( +
+ +
+
+ +
+
+ +
+
+
+ ); + } +} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2c94fe910..c208ce90f 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -475,6 +475,7 @@ export enum Key { ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', + LiveChat = 'LIVE_CHAT', } export enum SmartContractDocSections { diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 2b4aa5209..24d4101f4 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -73,6 +73,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_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_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8', -- cgit v1.2.3 From ee1e50a7225882bb0c97408100c85a199611fadb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 16:03:27 +0100 Subject: Swap out link --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 68f9a2f67..bf89775f7 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -128,7 +128,7 @@ export class DevelopersDropDown extends React.Component Date: Tue, 28 Aug 2018 17:13:29 +0100 Subject: Fix prettier --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 97e9d1989..7debd26a7 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -124,7 +124,7 @@ export class DevelopersDropDown extends React.Component Date: Tue, 28 Aug 2018 17:18:40 +0100 Subject: Implement dev topbar --- .../website/public/images/developers/chat_icon.svg | 5 ++ .../public/images/developers/forum_icon.svg | 5 ++ .../public/images/developers/github_icon.svg | 4 + .../documentation/docs_content_top_bar.tsx | 98 ++++++++++++++++------ .../ts/components/documentation/docs_logo.tsx | 2 +- 5 files changed, 87 insertions(+), 27 deletions(-) create mode 100644 packages/website/public/images/developers/chat_icon.svg create mode 100644 packages/website/public/images/developers/forum_icon.svg create mode 100644 packages/website/public/images/developers/github_icon.svg diff --git a/packages/website/public/images/developers/chat_icon.svg b/packages/website/public/images/developers/chat_icon.svg new file mode 100644 index 000000000..c48881454 --- /dev/null +++ b/packages/website/public/images/developers/chat_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/public/images/developers/forum_icon.svg b/packages/website/public/images/developers/forum_icon.svg new file mode 100644 index 000000000..8fb659475 --- /dev/null +++ b/packages/website/public/images/developers/forum_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/public/images/developers/github_icon.svg b/packages/website/public/images/developers/github_icon.svg new file mode 100644 index 000000000..bf10cb221 --- /dev/null +++ b/packages/website/public/images/developers/github_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index c9bdca61b..c2bbfc417 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -3,9 +3,8 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -29,6 +28,13 @@ const styles: Styles = { }, }; +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + export class DocsContentTopBar extends React.Component { constructor(props: DocsContentTopBarProps) { super(props); @@ -49,35 +55,44 @@ export class DocsContentTopBar extends React.Component - +
+
- 0xproject.com + + +
+ 0xproject.com +
+
- - - + {this._renderMenuItems(menuItemInfos)}
@@ -86,10 +101,41 @@ export class DocsContentTopBar extends React.Component
+
{this._renderDrawer()}
); } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + +
+ +
+ {menuItemInfo.title} +
+
+ + ); + }); + return menuItems; + } private _renderDrawer(): React.ReactNode { return ( { return (
- +
); -- cgit v1.2.3 From 60ef45722cd20fe243f58f5eaf8717081cbc39f1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 17:18:48 +0100 Subject: Remove temporary borders --- packages/website/ts/pages/documentation/home.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index eabad4def..003212279 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -31,7 +31,6 @@ export class Home extends React.Component { paddingRight: 22, backgroundColor: '#f5f5f5', height: '100vh', - border: '1px black dotted', }} > @@ -43,7 +42,6 @@ export class Home extends React.Component { paddingRight: 50, backgroundColor: '#ffffff', height: '100vh', - border: '1px black dotted', }} > -- cgit v1.2.3 From e6511c9c053e1c0e1aeefc64861b5c2918c176cc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 29 Aug 2018 17:45:51 +0100 Subject: Fix linter --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 7debd26a7..42a81ee88 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -124,7 +124,7 @@ export class DevelopersDropDown extends React.Component Date: Mon, 17 Sep 2018 15:09:31 +0100 Subject: Use Container instead of div --- .../ts/components/dropdowns/developers_drop_down.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 42a81ee88..d66e75722 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -2,7 +2,9 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -72,9 +74,11 @@ interface DevelopersDropDownState {} export class DevelopersDropDown extends React.Component { public render(): React.ReactNode { const activeNode = ( -
-
{this.props.translate.get(Key.Developers, Deco.Cap)}
-
+ + + {this.props.translate.get(Key.Developers, Deco.Cap)} + + ); return ( -
+ {this._renderTitle('Getting started')}
{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}
-
+
Date: Mon, 17 Sep 2018 16:55:22 +0100 Subject: Implement new responsive, dev section header and home scaffolding --- .../documentation/docs_content_top_bar.tsx | 47 +++++++------ .../ts/components/documentation/docs_logo.tsx | 15 ++++- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/containers/docs_home.ts | 15 ++++- packages/website/ts/pages/documentation/home.tsx | 78 +++++++++++++++------- 5 files changed, 103 insertions(+), 53 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index c2bbfc417..148f2f7cb 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -3,6 +3,7 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -17,17 +18,6 @@ interface DocsContentTopBarState { isDrawerOpen: boolean; } -const styles: Styles = { - menuItem: { - fontSize: 14, - color: colors.darkestGrey, - paddingTop: 6, - paddingBottom: 6, - cursor: 'pointer', - fontWeight: 400, - }, -}; - interface MenuItemInfo { title: string; url: string; @@ -50,11 +40,6 @@ export class DocsContentTopBar extends React.Component - -
+ + +
-
+
+
{this._renderMenuItems(menuItemInfos)}
-
-
- +
+ +
+
+
+
@@ -110,7 +109,7 @@ export class DocsContentTopBar extends React.Component {this._renderDrawer()} -
+ ); } private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 2a539c84b..9daf84ad0 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -2,12 +2,21 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; import { WebsitePaths } from 'ts/types'; -export const DocsLogo = () => { +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent = props => { return ( -
+
- +
); }; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..1e0bfd959 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts index 79bf68618..9c7b70a6f 100644 --- a/packages/website/ts/containers/docs_home.ts +++ b/packages/website/ts/containers/docs_home.ts @@ -1,15 +1,28 @@ 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 { 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 { + dispatcher: Dispatcher; } const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass = connect(mapStateToProps, undefined)(HomeComponent); +export const DocsHome: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(HomeComponent); diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 003212279..a065efc80 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,53 +1,81 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +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; export interface HomeProps { location: Location; translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; } export interface HomeState {} export class Home extends React.Component { + private readonly _throttledScreenWidthUpdate: () => void; + constructor(props: HomeProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + } public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 0 : 50; return ( -
-
- -
-
+ + -
+
+

Start building on 0x

+
+
-
+ ); } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } } -- cgit v1.2.3 From 3504e875ccd201f623fa8f54f359b67b29b13d6f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:35:41 +0100 Subject: Move /docs endpoint before longer ones so doesn't overtake other doc endpoints --- packages/website/ts/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 8ed40e69a..e81b1bf07 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -92,7 +92,6 @@ render( - + {/* Legacy endpoints */} Date: Wed, 26 Sep 2018 13:37:25 +0100 Subject: Create a link ui component that abstracts away interval vs. internal links --- packages/website/ts/components/ui/link.tsx | 42 ++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 packages/website/ts/components/ui/link.tsx diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx new file mode 100644 index 000000000..252199457 --- /dev/null +++ b/packages/website/ts/components/ui/link.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; + +export interface LinkProps { + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; +} + +export const Link: React.StatelessComponent = ({ + style, + className, + isExternal, + to, + shouldOpenInNewTab, + children, +}) => { + if (isExternal) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } +}; + +Link.defaultProps = { + isExternal: false, + shouldOpenInNewTab: false, + style: {}, + className: '', +}; + +Link.displayName = 'Link'; -- cgit v1.2.3 From ac1005b5a81136fa61834fc4b117ad64e3757238 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:37:46 +0100 Subject: Use new link component in Developer dropdown --- .../components/dropdowns/developers_drop_down.tsx | 35 +++++++++------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 7a0aea182..bfd7287de 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,63 +1,56 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { DropDown } from 'ts/components/ui/drop_down'; +import { Link } from 'ts/components/ui/link'; import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; interface LinkInfo { link: string; - shouldOpenNewTab: boolean; + shouldOpenInNewTab?: boolean; } const gettingStartedKeyToLinkInfo1: ObjectMap = { [Key.BuildARelayer]: { link: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenNewTab: false, }, [Key.IntroTutorial]: { link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenNewTab: false, }, }; const gettingStartedKeyToLinkInfo2: ObjectMap = { [Key.TradingTutorial]: { link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenNewTab: false, }, [Key.EthereumDevelopment]: { link: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenNewTab: false, }, }; const popularDocsToLinkInfos: ObjectMap = { [Key.ZeroExJs]: { link: WebsitePaths.ZeroExJs, - shouldOpenNewTab: false, }, [Key.Connect]: { link: WebsitePaths.Connect, - shouldOpenNewTab: false, }, [Key.SmartContract]: { link: WebsitePaths.SmartContracts, - shouldOpenNewTab: false, }, }; const usefulLinksToLinkInfo: ObjectMap = { [Key.Github]: { link: constants.URL_GITHUB_ORG, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, [Key.Whitepaper]: { link: WebsitePaths.Whitepaper, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, [Key.Sandbox]: { link: constants.URL_SANDBOX, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, }; @@ -167,15 +160,15 @@ export class DevelopersDropDown extends React.Component - {linkInfo.shouldOpenNewTab ? ( - - {linkText} - - ) : ( - - {linkText} - - )} + + {linkText} +
); }); -- cgit v1.2.3 From a8d8f90d23660d8b214554b442f81f5ff55aef59 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:37:58 +0100 Subject: Fix logo to link to docs home --- packages/website/ts/components/documentation/docs_logo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 9daf84ad0..570a81bca 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -10,7 +10,7 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return (
- +
-- cgit v1.2.3 From d8c68b000b977ce940eb95c234f0ecb435c697d6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:38:22 +0100 Subject: Implement dev home --- packages/react-shared/src/utils/colors.ts | 3 +- .../developers/tutorials/0x_order_basics.svg | 1 + .../developers/tutorials/build_a_relayer.svg | 3 + .../developers/tutorials/build_a_trading_bot.svg | 6 + .../developers/tutorials/develop_on_ethereum.svg | 4 + .../developers/tutorials/use_shared_liquidity.svg | 3 + packages/website/translations/chinese.json | 4 +- packages/website/translations/english.json | 4 +- packages/website/translations/korean.json | 4 +- packages/website/translations/russian.json | 4 +- packages/website/translations/spanish.json | 4 +- .../documentation/docs_content_top_bar.tsx | 10 +- .../components/documentation/tutorial_button.tsx | 73 +++++ packages/website/ts/pages/documentation/home.tsx | 356 ++++++++++++++++++++- packages/website/ts/types.ts | 9 + 15 files changed, 473 insertions(+), 15 deletions(-) create mode 100644 packages/website/public/images/developers/tutorials/0x_order_basics.svg create mode 100644 packages/website/public/images/developers/tutorials/build_a_relayer.svg create mode 100644 packages/website/public/images/developers/tutorials/build_a_trading_bot.svg create mode 100644 packages/website/public/images/developers/tutorials/develop_on_ethereum.svg create mode 100644 packages/website/public/images/developers/tutorials/use_shared_liquidity.svg create mode 100644 packages/website/ts/components/documentation/tutorial_button.tsx diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 5a20eeaa1..778a5bc20 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -26,8 +26,9 @@ const baseColors = { darkestGrey: '#272727', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', + lightLinkBlue: '#3289F1', mediumBlue: '#488AEA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', lightTurquois: '#aefcdc', turquois: '#058789', diff --git a/packages/website/public/images/developers/tutorials/0x_order_basics.svg b/packages/website/public/images/developers/tutorials/0x_order_basics.svg new file mode 100644 index 000000000..57b04dfa5 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/0x_order_basics.svg @@ -0,0 +1 @@ +Artboard 1 \ No newline at end of file diff --git a/packages/website/public/images/developers/tutorials/build_a_relayer.svg b/packages/website/public/images/developers/tutorials/build_a_relayer.svg new file mode 100644 index 000000000..afda40d88 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_relayer.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg new file mode 100644 index 000000000..960616bfe --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg new file mode 100644 index 000000000..e2c492ecd --- /dev/null +++ b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg new file mode 100644 index 000000000..c402964aa --- /dev/null +++ b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 7c3872cee..11b31b20b 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 52e4eeb50..e9bc53aa7 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -88,5 +88,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 81fbea6e3..934f28eb6 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 4cc7aab91..6ee1eb1d7 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index f906de984..036cd3500 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -87,5 +87,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 148f2f7cb..dede6f636 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,11 +1,11 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Link } from 'ts/components/ui/link'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -57,11 +57,11 @@ export class DocsContentTopBar extends React.Component +
{ + constructor(props: TutorialButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + return ( + +
+
+ +
+
+ + {this.props.tutorialInfo.title} + + + {this.props.tutorialInfo.description} + +
+
+ +
+
+ + ); + } + private _onHover(_event: React.FormEvent): void { + this.setState({ + isHovering: true, + }); + } + private _onHoverOff(): void { + this.setState({ + isHovering: false, + }); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a065efc80..ab29b7f07 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -4,13 +4,261 @@ import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; +import { Link } from 'ts/components/ui/link'; +import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + const THROTTLE_TIMEOUT = 100; +const TUTORIALS: TutorialInfo[] = [ + { + title: 'Develop on Ethereum', + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: 'Learn more about building applications ontop of the Ethereum blockchain', + location: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: 'Build a relayer', + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: 'Learn how to build your own 0x relayer from scratch', + location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: 'Learn the 0x order basics', + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: 'Tutorial on how to create, validate and fill an order over 0x protocol', + location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + { + title: 'Tap into shared liquidity', + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: 'Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API', + location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { + '0x Protocol': [ + { + name: '0x.js', + 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` and `contract-wrappers`.', + to: WebsitePaths.ZeroExJs, + }, + { + name: '0x starter project', + 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', + to: 'https://github.com/0xProject/0x-starter-project', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: '@0xproject/connect', + description: + 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + to: WebsitePaths.Connect, + }, + { + name: '@0xproject/contract-wrappers', + 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 the contracts.', + to: WebsitePaths.ContractWrappers, + }, + { + name: '@0xproject/json-schemas', + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + to: WebsitePaths.JSONSchemas, + }, + { + name: '@0xproject/order-utils', + 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.', + to: WebsitePaths.OrderUtils, + }, + { + name: '@0xproject/order-watcher', + 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.", + to: WebsitePaths.OrderWatcher, + }, + { + name: '@0xproject/sra-spec', + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + isExternal: true, + shouldOpenInNewTab: true, + }, + ], + Ethereum: [ + { + name: 'abi-gen', + 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.", + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: 'ethereum-types', + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + to: WebsitePaths.EthereumTypes, + }, + { + name: '@0xproject/sol-compiler', + description: + 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + to: WebsitePaths.SolCompiler, + }, + { + name: '@0xproject/sol-cov', + 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.', + to: WebsitePaths.SolCov, + }, + { + name: '@0xproject/subproviders', + description: + 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + to: WebsitePaths.Subproviders, + }, + { + name: '@0xproject/web3-wrapper', + 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...', + to: WebsitePaths.Web3Wrapper, + }, + ], + 'Community Maintained': [ + { + name: '0x Event Extractor', + description: + 'NodeJS 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.', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: '0x Tracker Worker', + description: + 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct', + description: + "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct Server SDK', + 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.', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'DDEX Node.js SDK', + description: 'A node.js SDK for trading on the DDEX relayer', + to: 'https://www.npmjs.com/package/ddex-api', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Widget', + description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + to: 'https://github.com/ERCdEX/widget', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Java SDK', + description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/java', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Python SDK', + description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/python', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Massive', + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay', + description: 'An open-source API-only Relayer written in Go', + to: 'https://github.com/NoteGio/openrelay', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay.js', + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Radar SDK', + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'The Ocean Javascript SDK', + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Tokenlon Javascript SDK', + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + to: 'https://www.npmjs.com/package/tokenlon-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'AssetData decoder library in Java', + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + to: 'https://github.com/wildnothing/asset-data-decoder', + shouldOpenInNewTab: true, + isExternal: true, + }, + ], +}; export interface HomeProps { location: Location; @@ -54,26 +302,126 @@ export class Home extends React.Component { paddingRight={22} paddingTop={2} backgroundColor={colors.grey100} - height="100vh" >
-

Start building on 0x

+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + ))} + + +
+
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + +
); } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( +
+ {category} +
{_.map(pkgs, pkg => this._renderPackage(pkg))}
+
+ ); + } + private _renderPackage(pkg: Package): React.ReactNode { + return ( +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} + +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
+
+
+ ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + + {text} + + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + + {text} + + ); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c208ce90f..106287178 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -476,6 +476,8 @@ export enum Key { Sandbox = 'SANDBOX', Github = 'GITHUB', LiveChat = 'LIVE_CHAT', + LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + More = 'MORE', } export enum SmartContractDocSections { @@ -622,4 +624,11 @@ export interface InjectedWeb3 { getNetwork(cd: (err: Error, networkId: string) => void): void; }; } + +export interface TutorialInfo { + title: string; + iconUrl: string; + description: string; + location: string; +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From f3ad64aa1c2930affbfd074316b5f407580b7523 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 14:52:58 +0100 Subject: Move more text over to translation files --- packages/website/translations/chinese.json | 11 ++++++++--- packages/website/translations/english.json | 11 ++++++++--- packages/website/translations/korean.json | 11 ++++++++--- packages/website/translations/russian.json | 11 ++++++++--- packages/website/translations/spanish.json | 11 ++++++++--- .../ts/components/documentation/tutorial_button.tsx | 9 +++++---- .../ts/components/dropdowns/developers_drop_down.tsx | 12 ++++++------ packages/website/ts/pages/documentation/home.tsx | 19 ++++++++++--------- packages/website/ts/types.ts | 10 +++++++--- 9 files changed, 68 insertions(+), 37 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 11b31b20b..0da27e2c4 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,9 +80,14 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index e9bc53aa7..6cb3dc103 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -82,9 +82,14 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 934f28eb6..19b3fbe81 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,9 +80,14 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 6ee1eb1d7..038eb72f8 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,9 +80,14 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 036cd3500..42a1dc7d1 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,9 +81,14 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index b83fd82c2..0cb7d9de5 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -2,11 +2,12 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; -import { TutorialInfo } from 'ts/types'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; export interface TutorialButtonProps { + translate: Translate; tutorialInfo: TutorialInfo; } @@ -44,10 +45,10 @@ export class TutorialButton extends React.Component
- {this.props.tutorialInfo.title} + {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} - {this.props.tutorialInfo.description} + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index bfd7287de..0af211bc1 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -16,17 +16,17 @@ const gettingStartedKeyToLinkInfo1: ObjectMap = { [Key.BuildARelayer]: { link: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, - [Key.IntroTutorial]: { + [Key.OrderBasics]: { link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, }; const gettingStartedKeyToLinkInfo2: ObjectMap = { - [Key.TradingTutorial]: { - link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - }, - [Key.EthereumDevelopment]: { + [Key.DevelopOnEthereum]: { link: `${WebsitePaths.Wiki}#Ethereum-Development`, }, + [Key.UseSharedLiquidity]: { + link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, }; const popularDocsToLinkInfos: ObjectMap = { [Key.ZeroExJs]: { @@ -157,7 +157,7 @@ export class DevelopersDropDown extends React.Component { i++; const isLast = i === numLinks; - const linkText = this.props.translate.get(key as Key, Deco.CapWords); + const linkText = this.props.translate.get(key as Key, Deco.Cap); return (
{ {_.map(TUTORIALS, tutorialInfo => ( diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 106287178..a1325d9bc 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -469,9 +469,13 @@ export enum Key { RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', BuildARelayer = 'BUILD_A_RELAYER', - EthereumDevelopment = 'ETHEREUM_DEVELOPMENT', - IntroTutorial = 'INTRO_TUTORIAL', - TradingTutorial = 'TRADING_TUTORIAL', + BuildARelayerDescription = 'BUILD_A_RELAYER_DESCRIPTION', + DevelopOnEthereum = 'DEVELOP_ON_ETHEREUM', + DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', + OrderBasics = 'ORDER_BASICS', + OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', + UseSharedLiquidity = 'USE_SHARED_LIQUIDITY', + UseSharedLiquidityDescription = 'USE_SHARED_LIQUIDITY_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', -- cgit v1.2.3 From e66476889000d78b1d22b07294361d0edc342a40 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 13:32:04 +0100 Subject: Import ObjectMap from types now that it's moved --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 0af211bc1..f03bc6623 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,9 +1,10 @@ import { colors } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -- cgit v1.2.3 From 10bd255e9d05d8fec5787535953ba656f8263015 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:27:12 +0100 Subject: Shorten tutorial descriptions --- packages/website/translations/chinese.json | 5 ++--- packages/website/translations/english.json | 5 ++--- packages/website/translations/korean.json | 5 ++--- packages/website/translations/russian.json | 5 ++--- packages/website/translations/spanish.json | 5 ++--- 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 0da27e2c4..5390b5484 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,14 +80,13 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index a8b63d6ea..5d999e2d7 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -83,14 +83,13 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 19b3fbe81..87bad68af 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,14 +80,13 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 038eb72f8..8e352c234 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,14 +80,13 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 42a1dc7d1..10123b88c 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,14 +81,13 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", -- cgit v1.2.3 From 12cfa6b45063b40e39a2f2e6c169fc2102843a16 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:06 +0100 Subject: Make sidebar menu item formatting optional so package names (with hyphens) render properly --- .../src/components/nested_sidebar_menu.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c8bddb59a..3c61fb0b1 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -19,6 +19,7 @@ export interface NestedSidebarMenuProps { selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; + shouldReformatMenuItemNames?: boolean; } export interface NestedSidebarMenuState {} @@ -42,16 +43,16 @@ export class NestedSidebarMenu extends React.Component = { shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop.bind(_), + shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable - const id = utils.getIdFromName(sectionName); return ( -
-
+
+
{finalSectionName.toUpperCase()}
{this._renderMenuItems(menuItems)} @@ -86,7 +87,9 @@ export class NestedSidebarMenu extends React.Component { - const finalMenuItemName = utils.convertDashesToSpaces(menuItemName); + const finalMenuItemName = this.props.shouldReformatMenuItemNames + ? utils.convertDashesToSpaces(menuItemName) + : menuItemName; const id = utils.getIdFromName(menuItemName); return (
@@ -99,7 +102,13 @@ export class NestedSidebarMenu extends React.Component - {finalMenuItemName} + + {finalMenuItemName} + {this._renderMenuItemSubsections(menuItemName)} -- cgit v1.2.3 From 155a4a8f067e36912c3eb6bc279ca58ce90a53c0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:39 +0100 Subject: Add sidebar menu, proper scrolling and mobile-optimize --- .../documentation/docs_content_top_bar.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 16 +- packages/website/ts/pages/documentation/home.tsx | 276 ++++++++++++++------- 3 files changed, 203 insertions(+), 91 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index dede6f636..1db9e794a 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -61,7 +61,7 @@ export class DocsContentTopBar extends React.Component +
-
+
-
+
{this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} @@ -51,11 +51,13 @@ export class TutorialButton extends React.Component
-
- +
+
+ +
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index cf2ba0eec..338230358 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,7 +1,14 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { + colors, + constants, + constants as sharedConstants, + NestedSidebarMenu, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); +import { Element as ScrollElement } from 'react-scroll'; import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; @@ -22,6 +29,8 @@ interface Package { } const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { title: Key.DevelopOnEthereum, @@ -48,8 +57,13 @@ const TUTORIALS: TutorialInfo[] = [ location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; +enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { - '0x Protocol': [ + [Categories.ZeroExProtocol]: [ { name: '0x.js', description: @@ -103,7 +117,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { shouldOpenInNewTab: true, }, ], - Ethereum: [ + [Categories.Ethereum]: [ { name: 'abi-gen', description: @@ -143,7 +157,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: WebsitePaths.Web3Wrapper, }, ], - 'Community Maintained': [ + [Categories.CommunityMaintained]: [ { name: '0x Event Extractor', description: @@ -267,13 +281,20 @@ export interface HomeProps { dispatcher: Dispatcher; } -export interface HomeState {} +export interface HomeState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; +} export class Home extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this.state = { + isHoveringSidebar: false, + isHoveringMainContent: false, + }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); @@ -283,8 +304,33 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { + const mainContainerStyle: 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 ? 0 : 50; + const mainContentPadding = isSmallScreen ? 20 : 50; + const topLevelMenu = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => + this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), + ), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.name, + ), + }; + _.each(TUTORIALS, tutorialInfo => { + const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); + }); return ( { } 50%, ${colors.white} 100%)`} > -
+
- + +
+ +
- -
- {this._renderSectionTitle('Start building on 0x')} - - {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', - )} - - {_.map(TUTORIALS, tutorialInfo => ( - - ))} + + + +
+
+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + + + ))} + - -
-
- {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} - - {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', +
+
+ {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + - +
@@ -357,56 +444,59 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.name); return ( -
-
-
-
- - - {pkg.name} + +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} - -
-
- - {pkg.description} - -
-
- -
-
{this.props.translate.get(Key.More, Deco.Cap)}
- - - -
- +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
-
+ ); } private _renderSectionTitle(text: string): React.ReactNode { @@ -427,4 +517,24 @@ export class Home extends React.Component { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _onSidebarHover(_event: React.FormEvent): void { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff(): void { + this.setState({ + isHoveringSidebar: false, + }); + } + private _onMainContentHover(_event: React.FormEvent): void { + this.setState({ + isHoveringMainContent: true, + }); + } + private _onMainContentHoverOff(): void { + this.setState({ + isHoveringMainContent: false, + }); + } } -- cgit v1.2.3 From 54f535b37547fe02e5c832fff9c9e82458d76649 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:16:17 +0100 Subject: Add back ability to listen for menu click events from the sidebar --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 3c61fb0b1..14b233cd6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -101,7 +101,11 @@ export class NestedSidebarMenu extends React.Component - + {entityName} @@ -155,4 +160,9 @@ export class NestedSidebarMenu extends React.Component ); } + private _onMenuItemClick(): void { + if (!_.isUndefined(this.props.onMenuItemClick)) { + this.props.onMenuItemClick(); + } + } } -- cgit v1.2.3 From 4d23cf85b9834422c1c59d8952cd95fdda888a9f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:17:28 +0100 Subject: Add mobile menu to overview page --- .../documentation/docs_content_top_bar.tsx | 20 ++++++++++++++++++-- packages/website/ts/pages/documentation/home.tsx | 6 +++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 1db9e794a..9b86c7296 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,4 +1,11 @@ -import { colors } from '@0xproject/react-shared'; +import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; +import { + colors, + constants as sharedConstants, + MenuSubsectionsBySection, + NestedSidebarMenu, + Styles, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; @@ -12,6 +19,7 @@ import { Translate } from 'ts/utils/translate'; export interface DocsContentTopBarProps { location: Location; translate: Translate; + menu?: DocsMenu; } interface DocsContentTopBarState { @@ -143,7 +151,15 @@ export class DocsContentTopBar extends React.Component -
TODO
+
+ +
); } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 338230358..009048838 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -374,7 +374,11 @@ export class Home extends React.Component { backgroundColor={colors.white} > - +
Date: Fri, 28 Sep 2018 15:28:29 +0100 Subject: Fix minor scrolling issue --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 009048838..5c537aaa7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -333,7 +333,7 @@ export class Home extends React.Component { }); return ( Date: Fri, 28 Sep 2018 15:48:16 +0100 Subject: Convert package descriptions to markdown and linkify them --- packages/website/ts/pages/documentation/home.tsx | 27 ++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 5c537aaa7..d257534f9 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -2,12 +2,14 @@ import { colors, constants, constants as sharedConstants, + MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, } from '@0xproject/react-shared'; 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 { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; @@ -67,7 +69,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x.js', 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` and `contract-wrappers`.', + '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).', to: WebsitePaths.ZeroExJs, }, { @@ -81,13 +83,13 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/connect', description: - 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', to: WebsitePaths.Connect, }, { name: '@0xproject/contract-wrappers', 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 the contracts.', + '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.', to: WebsitePaths.ContractWrappers, }, { @@ -135,7 +137,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/sol-compiler', description: - 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + '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.', to: WebsitePaths.SolCompiler, }, { @@ -147,7 +149,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/subproviders', description: - 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + '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...)', to: WebsitePaths.Subproviders, }, { @@ -161,7 +163,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Event Extractor', description: - 'NodeJS 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.', + '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.', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, isExternal: true, @@ -169,7 +171,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Tracker Worker', description: - 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + '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.', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, isExternal: true, @@ -474,10 +476,13 @@ export class Home extends React.Component {
-
- - {pkg.description} - +
+
Date: Fri, 28 Sep 2018 18:44:34 +0100 Subject: Rename website `yarn watch_without_deps` to `yarn dev` --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/package.json b/packages/website/package.json index 6adbbede0..12dc701e4 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "watch_without_deps": "webpack-dev-server --content-base public --https", + "dev": "webpack-dev-server --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" -- cgit v1.2.3 From d4089a179404d20745991e5ab9fea0ae1cb6c1c6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 12:53:31 +0100 Subject: Update react-scroll to include fix of using `history.replaceState` instead of `history.pushState` --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 8ba879315..9b9a04519 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11414,7 +11414,7 @@ react-router@^4.2.0: react-scroll@0xproject/react-scroll#similar-to-pr-330: version "1.7.10" - resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/f28a6c51800152fde11e7362383992aa60a15703" + resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170" dependencies: lodash.throttle "^4.1.1" prop-types "^15.5.8" -- cgit v1.2.3 From 7fdde15a5d6a0a1a8b6cd7c5e702de7ddb1426f2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 13:28:33 +0100 Subject: Revert command name --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/package.json b/packages/website/package.json index d139d7d4a..ab8835248 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "dev": "webpack-dev-server --content-base public --https", + "watch_without_deps": "webpack-dev-server --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" -- cgit v1.2.3 From c7371cc0489f1db98c704ddeab216fd6d1c63dc1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 13:31:07 +0100 Subject: Hide .svg file contents from PR review diff --- .gitattributes | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitattributes b/.gitattributes index 52031de51..bc1ff2453 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,2 @@ *.sol linguist-language=Solidity +*.svg linguist-generated \ No newline at end of file -- cgit v1.2.3 From 3d1c2cb29619bd503131204beca8e7a59d3130a6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 13:49:43 +0100 Subject: Fix incorrect merge errors --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- packages/website/ts/types.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 7d310df72..88522b665 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -6,7 +6,7 @@ import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 31a33bb76..ece036858 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -472,7 +472,6 @@ export enum Key { LiveChat = 'LIVE_CHAT', LibrariesAndTools = 'LIBRARIES_AND_TOOLS', More = 'MORE', - OurMissionAndValues = 'OUR_MISSION_AND_VALUES', } export enum SmartContractDocSections { -- cgit v1.2.3 From 733bb28c1c7349dca535169b8113c4984ed41117 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 14:45:28 +0100 Subject: Fix bug where main content scrollbar wasn't showing up after navigating back in browser history via keyboard shortcut --- packages/website/ts/pages/documentation/home.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index d257534f9..568564873 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,6 +395,7 @@ export class Home extends React.Component { overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} onMouseEnter={this._onMainContentHover.bind(this)} + onMouseOver={this._onMainContentHover.bind(this)} onMouseLeave={this._onMainContentHoverOff.bind(this)} >
@@ -537,9 +538,11 @@ export class Home extends React.Component { }); } private _onMainContentHover(_event: React.FormEvent): void { - this.setState({ - isHoveringMainContent: true, - }); + if (!this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: true, + }); + } } private _onMainContentHoverOff(): void { this.setState({ -- cgit v1.2.3 From 011cadc1ff2f7989fc866c149171ed2c592ace3c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 16:21:51 +0100 Subject: Disable max file size tslint rule for types file --- packages/ethereum-types/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ethereum-types/src/index.ts b/packages/ethereum-types/src/index.ts index 916661638..2f3140a58 100644 --- a/packages/ethereum-types/src/index.ts +++ b/packages/ethereum-types/src/index.ts @@ -497,4 +497,4 @@ export interface CompilerOptions { compilerSettings?: CompilerSettings; contracts?: string[] | '*'; solcVersion?: string; -} +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From 0febb085c5dbac3d125aab917ee2ba454869ff58 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 16:29:29 +0100 Subject: Fix linter --- .../ts/components/documentation/docs_content_top_bar.tsx | 10 ++-------- packages/website/ts/pages/documentation/home.tsx | 6 +----- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 9b86c7296..74c9022fe 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,11 +1,5 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; -import { - colors, - constants as sharedConstants, - MenuSubsectionsBySection, - NestedSidebarMenu, - Styles, -} from '@0xproject/react-shared'; +import { DocsMenu } from '@0xproject/react-docs'; +import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 568564873..b7fa8462b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,6 +1,5 @@ import { colors, - constants, constants as sharedConstants, MarkdownLinkBlock, NestedSidebarMenu, @@ -330,9 +329,6 @@ export class Home extends React.Component { pkg => pkg.name, ), }; - _.each(TUTORIALS, tutorialInfo => { - const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); - }); return ( { isHoveringMainContent: false, }); } -} +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From 6a33c4685ea64e2e96d7d91429f7e0d687b576bd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:02:57 +0100 Subject: Further shorten description --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 2 +- packages/website/translations/korean.json | 2 +- packages/website/translations/russian.json | 2 +- packages/website/translations/spanish.json | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 5390b5484..3ca98cee1 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -84,9 +84,9 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 5d999e2d7..eee79356e 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -87,7 +87,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 87bad68af..fabb2f80d 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -84,7 +84,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 8e352c234..b703cdafb 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -84,7 +84,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 10123b88c..c80f69622 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -85,7 +85,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", -- cgit v1.2.3 From 8daf2df6e6739239b3f00032f784a7136819dd82 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:03:23 +0100 Subject: Prefer basscss over style --- packages/website/ts/components/documentation/tutorial_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 22480888e..e0839bbf2 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -26,7 +26,7 @@ export class TutorialButton extends React.Component -- cgit v1.2.3 From 42f68428446dfaa5c336c94f94e6c92325e470da Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:04:06 +0100 Subject: Fix bug where button wouldn't be highlighted after hitting browser back button despite the cursor resting above it --- packages/website/ts/components/documentation/tutorial_button.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index e0839bbf2..aee094b86 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -28,6 +28,7 @@ export class TutorialButton extends React.Component
): void { + if (this.state.isHovering) { + return; + } this.setState({ isHovering: true, }); -- cgit v1.2.3 From 136ef3827700005b50df0e99b2ee67923d80c206 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:04:21 +0100 Subject: Move colors to colors.ts file --- packages/react-shared/src/utils/colors.ts | 4 +++- packages/website/ts/components/documentation/tutorial_button.tsx | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 778a5bc20..596c17e83 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -9,7 +9,8 @@ const baseColors = { grey300: '#E0E0E0', beigeWhite: '#E4E4E4', lightBgGrey: '#EDEDED', - grey350: '#cacaca', + grey325: '#dfdfdf', + grey350: '#CACACA', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', @@ -24,6 +25,7 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', + lightestBlue: '#E7F1FD', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', lightLinkBlue: '#3289F1', diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index aee094b86..b4056753c 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -35,10 +35,10 @@ export class TutorialButton extends React.Component
@@ -48,7 +48,7 @@ export class TutorialButton extends React.Component {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} - + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
-- cgit v1.2.3 From 67a2359014d933561425258ae774f7005ef52b15 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:07:03 +0100 Subject: Add comment about link component --- packages/website/ts/components/ui/link.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index 252199457..f7bca370b 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -9,6 +9,11 @@ export interface LinkProps { className?: string; } +/** + * A generic link component which let's the developer render internal & external links, and their associated + * behaviors with a single link component. Many times we want a menu including both internal & external links + * and this abstracts away the differences of rendering both types of links. + */ export const Link: React.StatelessComponent = ({ style, className, -- cgit v1.2.3 From 457ed57d70c1b34b243a151f16fd3d41bfa12bb3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:08:59 +0100 Subject: Move constants before configs and add TODO comment --- packages/website/ts/pages/documentation/home.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b7fa8462b..e202ff1bc 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -21,14 +21,6 @@ import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -interface Package { - name: string; - description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; -} - const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; @@ -63,6 +55,7 @@ enum Categories { Ethereum = 'Ethereum', CommunityMaintained = 'Community Maintained', } +// TODO(fabio): Move this to it's own file const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { @@ -275,6 +268,14 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { ], }; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + export interface HomeProps { location: Location; translate: Translate; -- cgit v1.2.3 From 0d57ed6c933a8332253cf673a521dddcae601872 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:25:45 +0100 Subject: Rename for clarity --- packages/website/ts/pages/documentation/home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index e202ff1bc..ee118ab1e 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -306,7 +306,7 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { - const mainContainerStyle: React.CSSProperties = { + const scrollableContainerStyles: React.CSSProperties = { position: 'absolute', top: 80, left: 0, @@ -351,7 +351,7 @@ export class Home extends React.Component {
{ id={sharedConstants.SCROLL_CONTAINER_ID} className="absolute" style={{ - ...mainContainerStyle, + ...scrollableContainerStyles, paddingTop: 30, paddingLeft: mainContentPadding, paddingRight: this.state.isHoveringMainContent -- cgit v1.2.3 From 3a9791e7943c5572d24b257217bfe1558beff5fc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:26:06 +0100 Subject: Make menuSubsectionsBySection optional --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 8 ++++++-- .../website/ts/components/documentation/docs_content_top_bar.tsx | 1 - packages/website/ts/pages/documentation/home.tsx | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 14b233cd6..9933f3b38 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,7 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; + menuSubsectionsBySection?: MenuSubsectionsBySection; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,6 +44,7 @@ export class NestedSidebarMenu extends React.Component { @@ -122,7 +123,10 @@ export class NestedSidebarMenu extends React.Component { > -- cgit v1.2.3 From c42b340042b8ff5ca9537e5e162776e513e63f2a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:07:53 +0100 Subject: Move more copy to translation files --- packages/website/translations/chinese.json | 7 ++++++- packages/website/translations/english.json | 7 ++++++- packages/website/translations/korean.json | 7 ++++++- packages/website/translations/russian.json | 7 ++++++- packages/website/translations/spanish.json | 7 ++++++- packages/website/ts/pages/documentation/home.tsx | 6 +++--- packages/website/ts/types.ts | 3 +++ 7 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 3ca98cee1..2d3ad6974 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index eee79356e..6ee780c78 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -95,6 +95,8 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", "OUR_MISSION_AND_VALUES": "our mission & values", "GAMING_AND_COLLECTABLES": "gaming & collectables", @@ -102,5 +104,8 @@ "artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality to give access and the ability to build marketplaces for NFT trading.", "ORDER_BOOKS": "order books", "ORDER_BOOKS_DESCRIPTION": - "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets." + "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets.", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index fabb2f80d..8470bf9a0 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index b703cdafb..b2bc151ab 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index c80f69622..fefb92447 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -93,5 +93,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 9356c504b..7f833cc1f 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,10 +395,10 @@ export class Home extends React.Component { onMouseLeave={this._onMainContentHoverOff.bind(this)} >
- {this._renderSectionTitle('Start building on 0x')} + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), )} {_.map(TUTORIALS, tutorialInfo => ( @@ -423,7 +423,7 @@ export class Home extends React.Component { )} {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index ece036858..f93d998b6 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -471,7 +471,10 @@ export enum Key { Github = 'GITHUB', LiveChat = 'LIVE_CHAT', LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + LibrariesAndToolsDescription = 'LIBRARIES_AND_TOOLS_DESCRIPTION', More = 'MORE', + StartBuildOn0x = 'START_BUILDING_ON_0X', + StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', } export enum SmartContractDocSections { -- cgit v1.2.3 From d435341f9b2577008fd6746c198305374a1b7994 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:11:50 +0100 Subject: Use container instead of div --- packages/website/ts/pages/documentation/home.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7f833cc1f..a2405a9d2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -451,14 +451,7 @@ export class Home extends React.Component { return (
-
+
Date: Tue, 2 Oct 2018 09:15:33 +0100 Subject: Use colors module --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a2405a9d2..311470d2c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -500,14 +500,14 @@ export class Home extends React.Component { } private _renderSectionTitle(text: string): React.ReactNode { return ( - + {text} ); } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit v1.2.3 From b79e3eaec62e073d86fdd5b83e7516da81046951 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:15:41 +0100 Subject: Simplify helper methods --- packages/website/ts/pages/documentation/home.tsx | 36 +++++++++--------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 311470d2c..57de52de2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -355,8 +355,8 @@ export class Home extends React.Component { paddingTop: 35, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} + onMouseEnter={this._onSidebarHover.bind(this, true)} + onMouseLeave={this._onSidebarHover.bind(this, false)} > { : mainContentPadding, overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} - onMouseEnter={this._onMainContentHover.bind(this)} - onMouseOver={this._onMainContentHover.bind(this)} - onMouseLeave={this._onMainContentHoverOff.bind(this)} + onMouseEnter={this._onMainContentHover.bind(this, true)} + onMouseOver={this._onMainContentHover.bind(this, true)} + onMouseLeave={this._onMainContentHover.bind(this, false)} >
{this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} @@ -512,30 +512,20 @@ export class Home extends React.Component { ); } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } - private _onSidebarHover(_event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { + private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { this.setState({ - isHoveringSidebar: false, + isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent): void { - if (!this.state.isHoveringMainContent) { + private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + if (isHovering !== this.state.isHoveringMainContent) { this.setState({ - isHoveringMainContent: true, + isHoveringMainContent: isHovering, }); } } - private _onMainContentHoverOff(): void { - this.setState({ - isHoveringMainContent: false, - }); + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); } } // tslint:disable:max-file-line-count -- cgit v1.2.3 From 91afc37d2a9fd15dc34d3c0911fb19ec7dd3493b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 10:30:44 +0100 Subject: Fix hovering --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 57de52de2..6bb30b368 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -512,12 +512,12 @@ export class Home extends React.Component { ); } - private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { this.setState({ isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { this.setState({ isHoveringMainContent: isHovering, -- cgit v1.2.3 From 0c996803969e7ff3f62c023651f64468b3f76bd3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 10:51:41 +0100 Subject: Improve mobile padding --- packages/website/ts/components/documentation/tutorial_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index b4056753c..094bc3d92 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -44,7 +44,7 @@ export class TutorialButton extends React.Component
-
+
{this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} -- cgit v1.2.3 From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 20:10:59 +0100 Subject: Use new Link UI component everywhere, and add complementary ALink type --- .../documentation/docs_content_top_bar.tsx | 11 +- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 5 +- .../components/dropdowns/developers_drop_down.tsx | 98 +++--- packages/website/ts/components/fill_order.tsx | 2 +- packages/website/ts/components/footer.tsx | 95 +++--- .../ts/components/inputs/token_amount_input.tsx | 4 +- .../website/ts/components/portal/back_button.tsx | 4 +- .../website/ts/components/portal/drawer_menu.tsx | 2 +- packages/website/ts/components/portal/menu.tsx | 6 +- packages/website/ts/components/portal/portal.tsx | 9 +- packages/website/ts/components/top_bar/top_bar.tsx | 46 ++- .../ts/components/top_bar/top_bar_menu_item.tsx | 22 +- .../website/ts/components/ui/custom_menu_item.tsx | 51 +++ packages/website/ts/components/ui/link.tsx | 43 ++- packages/website/ts/components/ui/menu_item.tsx | 51 --- packages/website/ts/components/ui/simple_menu.tsx | 4 +- packages/website/ts/pages/about/about.tsx | 4 +- packages/website/ts/pages/documentation/home.tsx | 373 +++++++++++++-------- packages/website/ts/pages/landing/landing.tsx | 11 +- packages/website/ts/types.ts | 16 +- 21 files changed, 468 insertions(+), 391 deletions(-) create mode 100644 packages/website/ts/components/ui/custom_menu_item.tsx delete mode 100644 packages/website/ts/components/ui/menu_item.tsx diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index b5f51e1aa..7edb51587 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,19 +1,19 @@ -import { DocsMenu } from '@0xproject/react-docs'; import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; 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 { Link } from 'ts/components/ui/link'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; export interface DocsContentTopBarProps { location: Location; translate: Translate; - menu?: DocsMenu; + sectionNameToLinks?: ObjectMap; } interface DocsContentTopBarState { @@ -146,12 +146,13 @@ export class DocsContentTopBar extends React.Component
- + /> */}
); diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 570a81bca..9bd742749 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -10,7 +10,7 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return (
- +
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 094bc3d92..7ed9c6e4e 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -25,8 +25,7 @@ export class TutorialButton extends React.Component
- {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} + {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 88522b665..675357f41 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,61 +1,68 @@ import { colors } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface LinkInfo { - link: string; - shouldOpenInNewTab?: boolean; -} - -const gettingStartedKeyToLinkInfo1: ObjectMap = { - [Key.BuildARelayer]: { - link: `${WebsitePaths.Wiki}#Build-A-Relayer`, +const gettingStartedKeyToLinkInfo1: ALink[] = [ + { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, - [Key.OrderBasics]: { - link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, -}; -const gettingStartedKeyToLinkInfo2: ObjectMap = { - [Key.DevelopOnEthereum]: { - link: `${WebsitePaths.Wiki}#Ethereum-Development`, +]; +const gettingStartedKeyToLinkInfo2: ALink[] = [ + { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, - [Key.UseSharedLiquidity]: { - link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, -}; -const popularDocsToLinkInfos: ObjectMap = { - [Key.ZeroExJs]: { - link: WebsitePaths.ZeroExJs, +]; +const popularDocsToLinkInfos: ALink[] = [ + { + title: Key.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, - [Key.Connect]: { - link: WebsitePaths.Connect, + { + title: Key.Connect, + to: WebsitePaths.Connect, }, - [Key.SmartContract]: { - link: WebsitePaths.SmartContracts, + { + title: Key.SmartContract, + to: WebsitePaths.SmartContracts, }, -}; -const usefulLinksToLinkInfo: ObjectMap = { - [Key.Github]: { - link: constants.URL_GITHUB_ORG, +]; +const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Github, + to: constants.URL_GITHUB_ORG, + type: LinkType.External, shouldOpenInNewTab: true, }, - [Key.Whitepaper]: { - link: WebsitePaths.Whitepaper, + { + title: Key.Whitepaper, + to: WebsitePaths.Whitepaper, + type: LinkType.External, shouldOpenInNewTab: true, }, - [Key.Sandbox]: { - link: constants.URL_SANDBOX, + { + title: Key.Sandbox, + to: constants.URL_SANDBOX, + type: LinkType.External, shouldOpenInNewTab: true, }, -}; +]; interface DevelopersDropDownProps { translate: Translate; @@ -123,7 +130,6 @@ export class DevelopersDropDown extends React.Component ); } - private _renderLinkSection(keyToLinkInfo: ObjectMap): React.ReactNode { + private _renderLinkSection(links: ALink[]): React.ReactNode { const linkStyle: React.CSSProperties = { color: colors.lightBlueA700, fontFamily: 'Roboto, Roboto Mono', }; - const numLinks = _.size(keyToLinkInfo); + const numLinks = links.length; let i = 0; - const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => { + const renderLinks = _.map(links, (link: ALink) => { i++; const isLast = i === numLinks; - const linkText = this.props.translate.get(key as Key, Deco.Cap); + const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return ( -
- +
+ {linkText}
); }); - return
{links}
; + return
{renderLinks}
; } } diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 3c3155349..ec1d698f3 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -8,7 +8,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; import { FillOrderJSON } from 'ts/components/fill_order_json'; @@ -17,6 +16,7 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Alert } from 'ts/components/ui/alert'; import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; +import { Link } from 'ts/components/ui/link'; import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6dcb5a0e9..bec3c17f7 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,24 +1,16 @@ import { colors } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; + import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, Language, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface MenuItemsBySection { - [sectionName: string]: FooterMenuItem[]; -} - -interface FooterMenuItem { - title: string; - path?: string; - isExternal?: boolean; -} - const ICON_DIMENSION = 16; const linkStyle = { @@ -51,76 +43,74 @@ export class Footer extends React.Component { }; } public render(): React.ReactNode { - const menuItemsBySection: MenuItemsBySection = { + const sectionNameToLinks: ObjectMap = { [Key.Documentation]: [ { title: '0x.js', - path: WebsitePaths.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), - path: WebsitePaths.SmartContracts, + to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), - path: WebsitePaths.Connect, + to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), - path: WebsitePaths.Whitepaper, - isExternal: true, + to: WebsitePaths.Whitepaper, + type: LinkType.External, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), - path: WebsitePaths.Wiki, + to: WebsitePaths.Wiki, }, { title: this.props.translate.get(Key.Faq, Deco.Cap), - path: WebsitePaths.FAQ, + to: WebsitePaths.FAQ, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - isExternal: true, - path: constants.URL_ZEROEX_CHAT, + type: LinkType.External, + to: constants.URL_ZEROEX_CHAT, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - isExternal: true, - path: constants.URL_BLOG, + type: LinkType.External, + to: constants.URL_BLOG, }, { title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, + type: LinkType.External, + to: constants.URL_TWITTER, }, { title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, + type: LinkType.External, + to: constants.URL_REDDIT, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, + type: LinkType.External, + to: constants.URL_DISCOURSE_FORUM, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), - isExternal: false, - path: WebsitePaths.About, + to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), - isExternal: false, - path: WebsitePaths.Careers, + to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - isExternal: true, - path: 'mailto:team@0xproject.com', + type: LinkType.External, + to: 'mailto:team@0xproject.com', }, ], }; @@ -160,19 +150,19 @@ export class Footer extends React.Component {
{this._renderHeader(Key.Documentation)} - {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Community)} - {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Organization)} - {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
@@ -187,7 +177,7 @@ export class Footer extends React.Component {
); } - private _renderMenuItem(item: FooterMenuItem): React.ReactNode { + private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -195,30 +185,21 @@ export class Footer extends React.Component { Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; - const iconIfExists = titleToIcon[item.title]; + const iconIfExists = titleToIcon[link.title]; return ( -
- {item.isExternal ? ( - +
+ +
{!_.isUndefined(iconIfExists) ? (
{this._renderIcon(iconIfExists)}
-
{item.title}
+
{link.title}
) : ( - item.title + link.title )} - - ) : ( - -
- {!_.isUndefined(iconIfExists) && ( -
{this._renderIcon(iconIfExists)}
- )} - {item.title} -
- - )} +
+
); } diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index db093fb68..adf96f9ee 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -3,9 +3,9 @@ import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; +import { Link } from 'ts/components/ui/link'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; interface TokenAmountInputProps { @@ -112,7 +112,7 @@ export class TokenAmountInput extends React.Component Set allowance diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index ca35abc2b..bdbcef343 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,6 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; @@ -27,7 +27,7 @@ const styles: Styles = { export const BackButton = (props: BackButtonProps) => { return (
- +
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index a6707e86c..3a8c69a70 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -39,7 +39,7 @@ export interface DrawerMenuProps { } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { - to: `${WebsitePaths.Portal}`, + to: WebsitePaths.Portal, labelText: 'Relayer ecosystem', iconName: 'zmdi-portable-wifi', }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 39dab77f5..a3352529c 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,7 +1,7 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { MenuItem } from 'ts/components/ui/menu_item'; +import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; @@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent = (props: MenuProps) => { {_.map(props.menuItemEntries, entry => { const isSelected = entry.to === props.selectedPath; return ( - + - + ); })}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b42954f60..a9ccf9e11 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -317,7 +318,7 @@ export class Portal extends React.Component { }; return (
} + header={} body={} /> ); @@ -389,9 +390,7 @@ export class Portal extends React.Component { ); return !shouldStartOnboarding ? ( - - {startOnboarding} - + {startOnboarding} ) : ( startOnboarding ); diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index c2d753e31..3da2307e0 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -10,15 +10,15 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; +import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; +import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -151,7 +151,7 @@ export class TopBar extends React.Component { paddingLeft={this.props.paddingLeft} paddingRight={this.props.paddingRight} > - +
@@ -165,40 +165,36 @@ export class TopBar extends React.Component { />
@@ -260,20 +256,16 @@ export class TopBar extends React.Component {
{this.props.translate.get(Key.Website, Deco.Cap)}
- + {this.props.translate.get(Key.Home, Deco.Cap)} - + {this.props.translate.get(Key.Wiki, Deco.Cap)} {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => { if (!this._doesUrlInclude(websitePath)) { return ( - + {this.props.translate.get(key, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} @@ -284,25 +276,25 @@ export class TopBar extends React.Component { return null; })} {!this._isViewingPortal() && ( - + {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} )} - + {this.props.translate.get(Key.Whitepaper, Deco.Cap)} - - + + {this.props.translate.get(Key.About, Deco.Cap)} - + {this.props.translate.get(Key.Careers, Deco.Cap)} - + {this.props.translate.get(Key.Blog, Deco.Cap)} - - + + {this.props.translate.get(Key.Faq, Deco.Cap)} diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 25fab2868..89fd9e8a8 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,7 +1,8 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; +import { LinkType } from 'ts/types'; import { CallToAction } from 'ts/components/ui/button'; @@ -13,7 +14,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - isExternal: boolean; + linkType: LinkType; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -38,20 +39,9 @@ export class TopBarMenuItem extends React.Component - {this.props.isExternal ? ( - - {itemContent} - - ) : ( - - {itemContent} - - )} + + {itemContent} +
); } diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx new file mode 100644 index 000000000..c51095709 --- /dev/null +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -0,0 +1,51 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'ts/components/ui/link'; + +interface CustomMenuItemProps { + to: string; + style?: React.CSSProperties; + onClick?: () => void; + className?: string; +} + +interface CustomMenuItemState { + isHovering: boolean; +} + +export class CustomMenuItem extends React.Component { + public static defaultProps: Partial = { + onClick: _.noop.bind(_), + className: '', + }; + public constructor(props: CustomMenuItemProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const menuItemStyles = { + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }; + return ( + +
+ {this.props.children} +
+ + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index f7bca370b..ae62aad0c 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; +import { LinkType } from 'ts/types'; export interface LinkProps { to: string; - isExternal?: boolean; + type?: LinkType; shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; @@ -17,29 +18,39 @@ export interface LinkProps { export const Link: React.StatelessComponent = ({ style, className, - isExternal, + type, to, shouldOpenInNewTab, children, }) => { - if (isExternal) { - return ( - - {children} - - ); - } else { - return ( - - {children} - - ); + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return
TODO
; + default: + throw new Error(`Unrecognized LinkType: ${type}`); } }; Link.defaultProps = { - isExternal: false, - shouldOpenInNewTab: false, + type: LinkType.ReactRoute, + shouldOpenInNewTab: true, style: {}, className: '', }; diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx deleted file mode 100644 index 0cb4b387c..000000000 --- a/packages/website/ts/components/ui/menu_item.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { Link } from 'react-router-dom'; - -interface MenuItemProps { - to: string; - style?: React.CSSProperties; - onClick?: () => void; - className?: string; -} - -interface MenuItemState { - isHovering: boolean; -} - -export class MenuItem extends React.Component { - public static defaultProps: Partial = { - onClick: _.noop.bind(_), - className: '', - }; - public constructor(props: MenuItemProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const menuItemStyles = { - cursor: 'pointer', - opacity: this.state.isHovering ? 0.5 : 1, - }; - return ( - -
- {this.props.children} -
- - ); - } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 8a9349c6d..767da3675 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< GoToAccountManagementSimpleMenuItemProps > = ({ onClick }) => { return ( - + ); diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index e097578bc..ba1b423b9 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -2,9 +2,9 @@ import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; @@ -370,7 +370,7 @@ export class About extends React.Component { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 6bb30b368..42ed1db8c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,11 +1,7 @@ -import { - colors, - constants as sharedConstants, - MarkdownLinkBlock, - NestedSidebarMenu, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; +import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import * as ReactMarkdown from 'react-markdown'; @@ -17,7 +13,7 @@ import { Container } from 'ts/components/ui/container'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -26,28 +22,36 @@ const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { - title: Key.DevelopOnEthereum, iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', description: Key.DevelopOnEthereumDescription, - location: `${WebsitePaths.Wiki}#Ethereum-Development`, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, }, { - title: Key.BuildARelayer, iconUrl: '/images/developers/tutorials/build_a_relayer.svg', description: Key.BuildARelayerDescription, - location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, }, { - title: Key.OrderBasics, iconUrl: '/images/developers/tutorials/0x_order_basics.svg', description: Key.OrderBasicsDescription, - location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, }, { - title: Key.UseSharedLiquidity, iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', description: Key.UseSharedLiquidityDescription, - location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + link: { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, }, ]; enum Categories { @@ -59,221 +63,276 @@ enum Categories { const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { - name: '0x.js', 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).', - to: WebsitePaths.ZeroExJs, + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, }, { - name: '0x starter project', 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', - to: 'https://github.com/0xProject/0x-starter-project', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: '@0xproject/connect', description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', - to: WebsitePaths.Connect, + link: { + title: '@0xproject/connect', + to: WebsitePaths.Connect, + }, }, { - name: '@0xproject/contract-wrappers', 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.', - to: WebsitePaths.ContractWrappers, + link: { + title: '@0xproject/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, }, { - name: '@0xproject/json-schemas', description: 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', - to: WebsitePaths.JSONSchemas, + link: { + title: '@0xproject/json-schemas', + to: WebsitePaths.JSONSchemas, + }, }, { - name: '@0xproject/order-utils', 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.', - to: WebsitePaths.OrderUtils, + link: { + title: '@0xproject/order-utils', + to: WebsitePaths.OrderUtils, + }, }, { - name: '@0xproject/order-watcher', 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.", - to: WebsitePaths.OrderWatcher, + link: { + title: '@0xproject/order-watcher', + to: WebsitePaths.OrderWatcher, + }, }, { - name: '@0xproject/sra-spec', description: 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '@0xproject/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, ], [Categories.Ethereum]: [ { - name: 'abi-gen', 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.", - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: 'ethereum-types', description: 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', - to: WebsitePaths.EthereumTypes, + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, }, { - name: '@0xproject/sol-compiler', 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.', - to: WebsitePaths.SolCompiler, + link: { + title: '@0xproject/sol-compiler', + to: WebsitePaths.SolCompiler, + }, }, { - name: '@0xproject/sol-cov', 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.', - to: WebsitePaths.SolCov, + link: { + title: '@0xproject/sol-cov', + to: WebsitePaths.SolCov, + }, }, { - name: '@0xproject/subproviders', 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...)', - to: WebsitePaths.Subproviders, + link: { + title: '@0xproject/subproviders', + to: WebsitePaths.Subproviders, + }, }, { - name: '@0xproject/web3-wrapper', 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...', - to: WebsitePaths.Web3Wrapper, + link: { + title: '@0xproject/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, }, ], [Categories.CommunityMaintained]: [ { - name: '0x Event Extractor', 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.', - to: 'https://github.com/0xTracker/0x-event-extractor', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: '0x Tracker Worker', 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.', - to: 'https://github.com/0xTracker/0x-tracker-worker', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct', description: "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://www.npmjs.com/package/aqueduct', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct Server SDK', 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.', - to: 'https://github.com/ERCdEX/aqueduct-server-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'DDEX Node.js SDK', description: 'A node.js SDK for trading on the DDEX relayer', - to: 'https://www.npmjs.com/package/ddex-api', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Widget', description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", - to: 'https://github.com/ERCdEX/widget', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdex Widget', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Java SDK', description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/java', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdex Java SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Python SDK', description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/python', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdex Python SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Massive', description: 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', - to: 'https://github.com/NoteGio/massive', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay', description: 'An open-source API-only Relayer written in Go', - to: 'https://github.com/NoteGio/openrelay', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay.js', description: 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', - to: 'https://github.com/NoteGio/openrelay.js', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Radar SDK', description: 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', - to: 'https://github.com/RadarRelay/sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'The Ocean Javascript SDK', description: 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', - to: 'https://github.com/TheOceanTrade/theoceanx-javascript', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Tokenlon Javascript SDK', description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", - to: 'https://www.npmjs.com/package/tokenlon-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'AssetData decoder library in Java', description: 'A small library that implements the 0x order assetData encoding/decoding in Java', - to: 'https://github.com/wildnothing/asset-data-decoder', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, ], }; interface Package { - name: string; description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; + link: ALink; } export interface HomeProps { @@ -319,15 +378,18 @@ export class Home extends React.Component { }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const mainContentPadding = isSmallScreen ? 20 : 50; - const topLevelMenu = { - 'Starter guides': _.map(TUTORIALS, tutorialInfo => - this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), - ), - [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), - [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + const sectionNameToLinks: ObjectMap = { + '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.name, + pkg => pkg.link, ), }; return ( @@ -358,11 +420,7 @@ export class Home extends React.Component { onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} > - + {this._renderMenu(sectionNameToLinks)}
{
{ {_.map(TUTORIALS, tutorialInfo => ( { ); } + private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { + const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {sectionName.toUpperCase()} +
+ {this._renderMenuItems(links)} +
+ ); + }); + return
{navigation}
; + } + private _renderMenuItems(links: ALink[]): React.ReactNode { + const menuItems = _.map(links, link => { + return ( +
+ + + {link.title} + + +
+ ); + }); + return menuItems; + } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
@@ -447,22 +541,21 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.name); + const id = sharedUtils.getIdFromName(pkg.link.title); return ( - +
- {pkg.name} + {pkg.link.title}
@@ -476,11 +569,11 @@ export class Home extends React.Component {
{this.props.translate.get(Key.More, Deco.Cap)}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 388e83d51..b4462407f 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,13 +2,13 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -213,14 +213,14 @@ export class Landing extends React.Component { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} @@ -320,8 +320,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FullListPrompt)}{' '} {this.props.translate.get(Key.FullListLink)} @@ -603,7 +602,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f93d998b6..7c79b271f 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -618,10 +618,22 @@ export interface InjectedWeb3 { }; } -export interface TutorialInfo { +export interface ALink { title: string; + to: string; + shouldOpenInNewTab?: boolean; + type?: LinkType; +} + +export interface TutorialInfo { iconUrl: string; description: string; - location: string; + link: ALink; +} + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', } // tslint:disable:max-file-line-count -- cgit v1.2.3 From 4fb7b3515389439e1ffafebf520d0cfd84efb5d1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 10:52:37 +0100 Subject: Convert remaining Links to new UI component --- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 3 ++- packages/website/ts/components/ui/link.tsx | 30 ++++++++++++++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 9bd742749..c16499158 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { WebsitePaths } from 'ts/types'; export interface DocsLogoProps { diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 7ed9c6e4e..42aa37bc7 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,7 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; @@ -26,6 +26,7 @@ export class TutorialButton extends React.Component) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; } /** @@ -22,6 +26,9 @@ export const Link: React.StatelessComponent = ({ to, shouldOpenInNewTab, children, + onMouseOver, + onMouseLeave, + onMouseEnter, }) => { const styleWithDefault = { textDecoration: 'none', @@ -31,13 +38,29 @@ export const Link: React.StatelessComponent = ({ switch (type) { case LinkType.External: return ( - + {children} ); case LinkType.ReactRoute: return ( - + {children} ); @@ -53,6 +76,9 @@ Link.defaultProps = { shouldOpenInNewTab: true, style: {}, className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), }; Link.displayName = 'Link'; -- cgit v1.2.3 From 0c80fea8216ede2b77c448e3e1b4d013c1c76669 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 10:52:48 +0100 Subject: Make tutorial buttons also open in a new tab --- packages/website/ts/pages/documentation/home.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 42ed1db8c..86999b8fe 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -27,6 +27,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenInNewTab: true, }, }, { @@ -35,6 +36,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenInNewTab: true, }, }, { @@ -43,6 +45,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenInNewTab: true, }, }, { @@ -51,6 +54,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.UseSharedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenInNewTab: true, }, }, ]; @@ -68,6 +72,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x.js', to: WebsitePaths.ZeroExJs, + shouldOpenInNewTab: true, }, }, { @@ -76,8 +81,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -86,6 +91,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/connect', to: WebsitePaths.Connect, + shouldOpenInNewTab: true, }, }, { @@ -94,6 +100,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/contract-wrappers', to: WebsitePaths.ContractWrappers, + shouldOpenInNewTab: true, }, }, { @@ -102,6 +109,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/json-schemas', to: WebsitePaths.JSONSchemas, + shouldOpenInNewTab: true, }, }, { @@ -110,6 +118,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-utils', to: WebsitePaths.OrderUtils, + shouldOpenInNewTab: true, }, }, { @@ -118,6 +127,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-watcher', to: WebsitePaths.OrderWatcher, + shouldOpenInNewTab: true, }, }, { @@ -126,8 +136,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, ], @@ -138,8 +148,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -148,6 +158,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'ethereum-types', to: WebsitePaths.EthereumTypes, + shouldOpenInNewTab: true, }, }, { @@ -156,6 +167,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-compiler', to: WebsitePaths.SolCompiler, + shouldOpenInNewTab: true, }, }, { @@ -164,6 +176,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-cov', to: WebsitePaths.SolCov, + shouldOpenInNewTab: true, }, }, { @@ -172,6 +185,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/subproviders', to: WebsitePaths.Subproviders, + shouldOpenInNewTab: true, }, }, { @@ -180,6 +194,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/web3-wrapper', to: WebsitePaths.Web3Wrapper, + shouldOpenInNewTab: true, }, }, ], -- cgit v1.2.3 From 773220f84037680b17a8eccfbaa04cd265197390 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:27:28 +0100 Subject: Fix link --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 675357f41..a314f0f54 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -171,7 +171,12 @@ export class DevelopersDropDown extends React.Component - + {linkText}
-- cgit v1.2.3 From 188564a343e2d0842bf4ac435c438df81c29ca2d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:28:56 +0100 Subject: Add padding to bottom of scroll area --- packages/website/ts/pages/documentation/home.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 86999b8fe..320fc6af2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -489,8 +489,7 @@ export class Home extends React.Component { ))} -
-
+ {this._renderSectionTitle( this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} @@ -504,6 +503,7 @@ export class Home extends React.Component { )} +
@@ -523,7 +523,11 @@ export class Home extends React.Component {
); }); - return
{navigation}
; + return ( + + {navigation} + + ); } private _renderMenuItems(links: ALink[]): React.ReactNode { const menuItems = _.map(links, link => { -- cgit v1.2.3 From f13c48216160e0e1e58354ff09d0c583dfe30d10 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:43:17 +0100 Subject: Align logo and menu --- packages/website/ts/pages/documentation/home.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 320fc6af2..0aefc4662 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -490,20 +490,20 @@ export class Home extends React.Component { - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + -
@@ -524,7 +524,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); -- cgit v1.2.3 From 55d61b0dc759255ce15b7c6be1a4dab2d9df792d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 12:14:22 +0100 Subject: Add border underneath logo while user is scrolling --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/pages/documentation/home.tsx | 35 ++++++++++++++++++++---- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 1e0bfd959..782ab3b6f 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,7 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 0aefc4662..19a3f9eaf 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -360,24 +360,35 @@ export interface HomeProps { export interface HomeState { isHoveringSidebar: boolean; isHoveringMainContent: boolean; + isSidebarScrolling: boolean; } export class Home extends React.Component { 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 = { @@ -422,10 +433,14 @@ export class Home extends React.Component { width={234} paddingLeft={22} paddingRight={22} - paddingTop={2} + paddingTop={0} backgroundColor={colors.grey100} > - + + +
{ }} onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} + onWheel={this._throttledSidebarScrolling} > {this._renderMenu(sectionNameToLinks)}
@@ -524,7 +540,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); @@ -625,9 +641,11 @@ export class Home extends React.Component { ); } private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: isHovering, - }); + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } } private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { @@ -636,6 +654,11 @@ export class Home extends React.Component { }); } } + private _onSidebarScroll(_event: React.FormEvent): void { + this.setState({ + isSidebarScrolling: true, + }); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); -- cgit v1.2.3 From 80a6e6fe8dce9daeb69f0fd7529062780a58d5be Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:26:16 +0100 Subject: Decrease size of section descriptions --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 19a3f9eaf..52a486c2d 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -635,7 +635,7 @@ export class Home extends React.Component { } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit v1.2.3 From 6d8427a024d0175c4e0305503321b4169ff9ce05 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:26:30 +0100 Subject: Don't make opening links in new tab a default --- packages/website/ts/components/ui/link.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index 30c76e3c9..f8522ca2b 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -39,7 +39,7 @@ export const Link: React.StatelessComponent = ({ case LinkType.External: return ( = ({ ); case LinkType.ReactRoute: + if (to === '/') { + console.log('got here!'); + } return ( = ({ Link.defaultProps = { type: LinkType.ReactRoute, - shouldOpenInNewTab: true, + shouldOpenInNewTab: false, style: {}, className: '', onMouseOver: _.noop.bind(_), -- cgit v1.2.3 From 688325491fd9549c81ea65a4ad95fa42c2589927 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:37:49 +0100 Subject: Make whole bottom bar clickable not just the text --- .../components/dropdowns/developers_drop_down.tsx | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index a314f0f54..af0ae825c 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -119,26 +119,26 @@ export class DevelopersDropDown extends React.Component{this._renderLinkSection(usefulLinksToLinkInfo)}
-
- {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} - -
+
+
); return dropdownMenu; -- cgit v1.2.3 From ab855cdd1cfa2e4fcc45499508dca9c9e8733b61 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:43:25 +0100 Subject: remove stray console --- packages/website/ts/components/ui/link.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index f8522ca2b..ad98efa6c 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -51,9 +51,6 @@ export const Link: React.StatelessComponent = ({ ); case LinkType.ReactRoute: - if (to === '/') { - console.log('got here!'); - } return ( Date: Wed, 3 Oct 2018 16:37:59 +0100 Subject: Use same Link UI component for react-scroll links --- .../react-docs/src/components/documentation.tsx | 9 +- packages/react-docs/src/docs_info.ts | 54 ++++++++--- packages/react-shared/package.json | 5 +- packages/react-shared/src/components/link.tsx | 100 +++++++++++++++++++++ .../src/components/nested_sidebar_menu.tsx | 66 ++++++-------- packages/react-shared/src/index.ts | 11 ++- packages/react-shared/src/types.ts | 13 +++ packages/website/package.json | 2 - .../documentation/docs_content_top_bar.tsx | 11 ++- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 3 +- .../components/dropdowns/developers_drop_down.tsx | 5 +- packages/website/ts/components/fill_order.tsx | 3 +- packages/website/ts/components/footer.tsx | 5 +- .../ts/components/inputs/token_amount_input.tsx | 3 +- .../website/ts/components/portal/back_button.tsx | 4 +- packages/website/ts/components/portal/portal.tsx | 3 +- packages/website/ts/components/top_bar/top_bar.tsx | 24 ++--- .../ts/components/top_bar/top_bar_menu_item.tsx | 4 +- .../website/ts/components/ui/custom_menu_item.tsx | 2 +- packages/website/ts/components/ui/link.tsx | 84 ----------------- packages/website/ts/components/ui/simple_menu.tsx | 2 +- packages/website/ts/pages/about/about.tsx | 3 +- .../website/ts/pages/documentation/doc_page.tsx | 8 +- packages/website/ts/pages/documentation/home.tsx | 13 ++- packages/website/ts/pages/landing/landing.tsx | 3 +- packages/website/ts/pages/wiki/wiki.tsx | 29 +++--- packages/website/ts/types.ts | 14 +-- yarn.lock | 27 ++++++ 29 files changed, 294 insertions(+), 218 deletions(-) create mode 100644 packages/react-shared/src/components/link.tsx delete mode 100644 packages/website/ts/components/ui/link.tsx diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 3cd14923c..1ed829b01 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -98,7 +98,10 @@ export class Documentation extends React.Component {_.isUndefined(this.props.docAgnosticFormat) ? ( @@ -128,8 +131,8 @@ export class Documentation extends React.Component
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 6355a2f88..1c11e07de 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,5 +1,5 @@ -import { MenuSubsectionsBySection } from '@0xproject/react-shared'; -import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types'; +import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared'; +import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; import { @@ -32,10 +32,10 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { - const menuSubsectionsBySection = {} as MenuSubsectionsBySection; + public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap { + const subsectionNameToLinks: ObjectMap = {}; if (_.isUndefined(docAgnosticFormat)) { - return menuSubsectionsBySection; + return subsectionNameToLinks; } const docSections = _.keys(this.sections); @@ -56,7 +56,14 @@ export class DocsInfo { if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) { const sortedTypesNames = _.sortBy(docSection.types, 'name'); const typeNames = _.map(sortedTypesNames, t => t.name); - menuSubsectionsBySection[sectionName] = typeNames; + const typeLinks = _.map(typeNames, typeName => { + return { + to: `${sectionName}-${typeName}`, + title: typeName, + type: LinkType.ReactScroll, + }; + }); + subsectionNameToLinks[sectionName] = typeLinks; } else if (isExportedFunctionSection) { // Noop so that we don't have the method listed underneath itself. } else { @@ -71,15 +78,20 @@ export class DocsInfo { const methodNames = _.map(methodsSortedByName, m => m.name); const sortedFunctionNames = _.sortBy(docSection.functions, 'name'); const functionNames = _.map(sortedFunctionNames, m => m.name); - menuSubsectionsBySection[sectionName] = [ - ...eventNames, - ...propertyNames, - ...functionNames, - ...methodNames, - ]; + const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames]; + + const links = _.map(names, name => { + return { + to: `${sectionName}-${name}`, + title: name, + type: LinkType.ReactScroll, + }; + }); + + subsectionNameToLinks[sectionName] = links; } }); - return menuSubsectionsBySection; + return subsectionNameToLinks; } public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { if (_.isUndefined(this.sections.types)) { @@ -90,4 +102,20 @@ export class DocsInfo { const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any; return typeDefinitionByName; } + public getSectionNameToLinks(): ObjectMap { + const sectionNameToLinks: ObjectMap = {}; + _.each(this.menu, (linkTitles, sectionName) => { + sectionNameToLinks[sectionName] = []; + _.each(linkTitles, linkTitle => { + const to = sharedUtils.getIdFromName(linkTitle); + const links = sectionNameToLinks[sectionName]; + links.push({ + title: linkTitle, + to, + type: LinkType.ReactScroll, + }); + }); + }); + return sectionNameToLinks; + } } diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 67c644bf3..eaaa57ea2 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -33,6 +33,7 @@ "typescript": "3.0.1" }, "dependencies": { + "@0xproject/types": "^1.1.2", "@material-ui/core": "^3.0.1", "@types/is-mobile": "0.3.0", "@types/lodash": "4.14.104", @@ -40,6 +41,7 @@ "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", + "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "basscss": "^8.0.3", "change-case": "^3.0.2", @@ -50,7 +52,8 @@ "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", + "react-router-dom": "^4.1.1" }, "publishConfig": { "access": "public" diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx new file mode 100644 index 000000000..7425b9365 --- /dev/null +++ b/packages/react-shared/src/components/link.tsx @@ -0,0 +1,100 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; +import { Link as ScrollLink } from 'react-scroll'; + +import { LinkType } from '../types'; +import { constants } from '../utils/constants'; + +export interface LinkProps { + to: string; + type?: LinkType; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; + onMouseOver?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; + containerId?: string; +} + +/** + * A generic link component which let's the developer render internal & external links, and their associated + * behaviors with a single link component. Many times we want a menu including both internal & external links + * and this abstracts away the differences of rendering both types of links. + */ +export const Link: React.StatelessComponent = ({ + style, + className, + type, + to, + shouldOpenInNewTab, + children, + onMouseOver, + onMouseLeave, + onMouseEnter, + containerId, +}) => { + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return ( + + {children} + + ); + default: + throw new Error(`Unrecognized LinkType: ${type}`); + } +}; + +Link.defaultProps = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, +}; + +Link.displayName = 'Link'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 9933f3b38..2242349df 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,18 +1,19 @@ +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; -import { MenuSubsectionsBySection, Styles } from '../types'; +import { ALink, LinkType, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; +import { Link } from './Link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap; + subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component { + 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 @@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component {finalSectionName.toUpperCase()}
- {this._renderMenuItems(menuItems)} + {this._renderMenuItems(links)}
); } else { - return
{this._renderMenuItems(menuItems)}
; + return
{this._renderMenuItems(links)}
; } }); const maxWidthWithScrollbar = 307; @@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + private _renderMenuItems(links: ALink[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { + const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(menuItemName) - : menuItemName; - const id = utils.getIdFromName(menuItemName); + ? utils.convertDashesToSpaces(link.title) + : link.title; return ( -
- +
+ - - {this._renderMenuItemSubsections(menuItemName)} + + {this._renderMenuItemSubsections(link.title)}
); }); @@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); + {_.map(links, link => { + const name = `${menuItemName}-${link.title}`; return (
  • - + - {entityName} + {link.title} - +
    • ); })} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 3b50c0117..793214a87 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -4,8 +4,17 @@ export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; +export { Link } from './components/link'; -export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; +export { + HeaderSizes, + Styles, + MenuSubsectionsBySection, + EtherscanLinkSuffixes, + Networks, + LinkType, + ALink, +} from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index 88fadcc09..b3dd4045b 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -23,3 +23,16 @@ export enum Networks { Ropsten = 'Ropsten', Rinkeby = 'Rinkeby', } + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', +} + +export interface ALink { + title: string; + to: string; + shouldOpenInNewTab?: boolean; + type?: LinkType; +} diff --git a/packages/website/package.json b/packages/website/package.json index ab8835248..37e75e84e 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,7 +52,6 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", @@ -81,7 +80,6 @@ "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", - "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 7edb51587..d3735f2be 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,12 +1,11 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; 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 { Link } from 'ts/components/ui/link'; -import { ALink, Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -147,12 +146,12 @@ export class DocsContentTopBar extends React.Component
    TODO - {/* */} + />
    ); diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index c16499158..6f3c3c6e8 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ +import { Link } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { WebsitePaths } from 'ts/types'; export interface DocsLogoProps { diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 42aa37bc7..a0d99e175 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index af0ae825c..4167b3d23 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index ec1d698f3..99939ce43 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,5 +1,5 @@ import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as accounting from 'accounting'; @@ -16,7 +16,6 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Alert } from 'ts/components/ui/alert'; import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; -import { Link } from 'ts/components/ui/link'; import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index bec3c17f7..02770c073 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,13 +1,12 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index adf96f9ee..562f670e2 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; -import { Link } from 'ts/components/ui/link'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; interface TokenAmountInputProps { diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index bdbcef343..64a332e07 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a9ccf9e11..b8cd45661 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,9 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; -import { Link } from 'ts/components/ui/link'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3da2307e0..e25c0a0f7 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,11 +1,14 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; +import { DocsInfo } from '@0xproject/react-docs'; import { + ALink, colors, constants as sharedConstants, - MenuSubsectionsBySection, + Link, + LinkType, NestedSidebarMenu, Styles, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; @@ -16,9 +19,8 @@ import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -40,8 +42,8 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap; + subsectionNameToLinks?: ObjectMap; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -311,14 +313,14 @@ export class TopBar extends React.Component { // 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.menu) || _.isNull(documentationContainer)) { + if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) { return undefined; } return (
    { return (
    ) => void; - onMouseLeave?: (event: React.MouseEvent) => void; - onMouseEnter?: (event: React.MouseEvent) => void; -} - -/** - * A generic link component which let's the developer render internal & external links, and their associated - * behaviors with a single link component. Many times we want a menu including both internal & external links - * and this abstracts away the differences of rendering both types of links. - */ -export const Link: React.StatelessComponent = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, - }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return
    TODO
    ; - default: - throw new Error(`Unrecognized LinkType: ${type}`); - } -}; - -Link.defaultProps = { - type: LinkType.ReactRoute, - shouldOpenInNewTab: false, - style: {}, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), -}; - -Link.displayName = 'Link'; diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 767da3675..bdaf0701e 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ +import { Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'ts/components/ui/link'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index ba1b423b9..efdf631b2 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,10 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 6f029b6a2..9092a5cde 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -79,9 +79,9 @@ export class DocPage extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(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}`; @@ -93,8 +93,8 @@ export class DocPage extends React.Component { location={this.props.location} docsVersion={this.props.docsVersion} availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} + sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()} + subsectionNameToLinks={subsectionNameToLinks} docsInfo={this.props.docsInfo} translate={this.props.translate} onVersionSelected={this._onVersionSelected.bind(this)} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 52a486c2d..72e507a7b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,4 +1,12 @@ -import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { + ALink, + colors, + constants as sharedConstants, + Link, + LinkType, + MarkdownLinkBlock, + utils as sharedUtils, +} from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; @@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b4462407f..c819cd8a1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..3d8b8ef52 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,12 +1,15 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + LinkType, 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'; @@ -78,9 +81,10 @@ export class Wiki extends React.Component { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + : this._getSectionNameToLinks(this.state.articlesBySection); + console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', @@ -92,7 +96,7 @@ export class Wiki extends React.Component { @@ -131,8 +135,7 @@ export class Wiki extends React.Component { onMouseLeave={this._onSidebarHoverOff.bind(this)} >
    @@ -223,15 +226,21 @@ export class Wiki extends React.Component { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + type: LinkType.ReactScroll, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; + return sectionNameToLinks; } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 7c79b271f..a3d248a9d 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,3 +1,4 @@ +import { ALink } from '@0xproject/react-shared'; import { ObjectMap, SignedOrder } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Provider } from 'ethereum-types'; @@ -618,22 +619,9 @@ export interface InjectedWeb3 { }; } -export interface ALink { - title: string; - to: string; - shouldOpenInNewTab?: boolean; - type?: LinkType; -} - export interface TutorialInfo { iconUrl: string; description: string; link: ALink; } - -export enum LinkType { - External = 'EXTERNAL', - ReactScroll = 'REACT_SCROLL', - ReactRoute = 'REACT_ROUTE', -} // tslint:disable:max-file-line-count diff --git a/yarn.lock b/yarn.lock index 9b9a04519..f2b7313ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -676,6 +676,16 @@ ethereum-types "^1.0.5" popper.js "1.14.3" +"@0xproject/typescript-typings@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@0xproject/typescript-typings/-/typescript-typings-2.0.2.tgz#1812f64e341f1d24c09b8b5a951cbde0e5fff9c2" + dependencies: + "@types/bn.js" "^4.11.0" + "@types/react" "*" + bignumber.js "~4.1.0" + ethereum-types "^1.0.8" + popper.js "1.14.3" + "@0xproject/utils@^0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-0.7.3.tgz#ffa7c6da9bf0dd3e13694f185dcfc48a8981ff05" @@ -690,6 +700,23 @@ lodash "4.17.10" web3 "0.20.6" +"@0xproject/utils@^1.0.4": + version "1.0.11" + resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-1.0.11.tgz#5b53e7d9d4dbe68e219049218c9db04e97c37429" + dependencies: + "@0xproject/types" "^1.1.1" + "@0xproject/typescript-typings" "^2.0.2" + "@types/node" "*" + abortcontroller-polyfill "^1.1.9" + bignumber.js "~4.1.0" + detect-node "2.0.3" + ethereum-types "^1.0.8" + ethereumjs-util "^5.1.1" + ethers "3.0.22" + isomorphic-fetch "^2.2.1" + js-sha3 "^0.7.0" + lodash "^4.17.5" + "@0xproject/web3-wrapper@^0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@0xproject/web3-wrapper/-/web3-wrapper-0.7.3.tgz#9bd50b034b92fd505b6766b6e225f014b6d08b08" -- cgit v1.2.3 From 751e8eafe483efb8b416b88c7edca6676ae9d607 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:41:44 +0100 Subject: Remove stray console.log --- packages/react-docs/src/components/documentation.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 1ed829b01..aa6d27402 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -99,9 +99,7 @@ export class Documentation extends React.Component {_.isUndefined(this.props.docAgnosticFormat) ? ( -- cgit v1.2.3 From 72b1c60f392c8c8fc445223f2149ca3a62a83fed Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:44:18 +0100 Subject: Fix nit --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 4167b3d23..6133c8b4d 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -128,7 +128,7 @@ export class DevelopersDropDown extends React.Component
    Date: Wed, 3 Oct 2018 17:03:05 +0100 Subject: Use nestedSidebarMenu component for Dev home --- .../src/components/nested_sidebar_menu.tsx | 14 ++++++- packages/website/ts/pages/documentation/home.tsx | 49 ++++------------------ 2 files changed, 20 insertions(+), 43 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 2242349df..c871e77d4 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,12 @@ export class NestedSidebarMenu extends React.Component - + - + { pkg => pkg.link, ), }; + console.log('sectionNameToLinks', sectionNameToLinks); return ( { onMouseLeave={this._onSidebarHover.bind(this, false)} onWheel={this._throttledSidebarScrolling} > - {this._renderMenu(sectionNameToLinks)} + + +
    { ); } - private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { - const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { - // tslint:disable-next-line:no-unused-variable - return ( -
    -
    - {sectionName.toUpperCase()} -
    - {this._renderMenuItems(links)} -
    - ); - }); - return ( - - {navigation} - - ); - } - private _renderMenuItems(links: ALink[]): React.ReactNode { - const menuItems = _.map(links, link => { - return ( -
    - - - {link.title} - - -
    - ); - }); - return menuItems; - } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
    -- cgit v1.2.3 From 1bef42cdcb45e4614ffdc8d8a1e455b4fe970a45 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:17:16 +0100 Subject: Improve comment --- packages/react-shared/src/components/link.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7425b9365..6200bfbd3 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -19,9 +19,10 @@ export interface LinkProps { } /** - * A generic link component which let's the developer render internal & external links, and their associated - * behaviors with a single link component. Many times we want a menu including both internal & external links - * and this abstracts away the differences of rendering both types of links. + * A generic link component which let's the developer render internal, external and scroll-to-hash links, and + * their associated behaviors with a single link component. Many times we want a menu including a combination of + * internal, external and scroll links and the abstraction of the differences of rendering each types of link + * makes it much easier to do so. */ export const Link: React.StatelessComponent = ({ style, -- cgit v1.2.3 From a7955c0964f3debaeaf77a58cdc5309535ad0ec0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:19:39 +0100 Subject: Remove todo --- packages/website/ts/components/documentation/docs_content_top_bar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index d3735f2be..04385cfdb 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -145,7 +145,6 @@ export class DocsContentTopBar extends React.Component
    - TODO Date: Wed, 3 Oct 2018 17:23:43 +0100 Subject: Fix linter --- packages/react-docs/src/docs_info.ts | 2 +- .../src/components/nested_sidebar_menu.tsx | 6 +- packages/react-shared/src/index.ts | 10 +- packages/react-shared/src/types.ts | 4 - .../documentation/docs_content_top_bar.tsx | 163 --------------------- .../ts/components/documentation/docs_top_bar.tsx | 163 +++++++++++++++++++++ packages/website/ts/pages/documentation/home.tsx | 5 +- 7 files changed, 170 insertions(+), 183 deletions(-) delete mode 100644 packages/website/ts/components/documentation/docs_content_top_bar.tsx create mode 100644 packages/website/ts/components/documentation/docs_top_bar.tsx diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 1c11e07de..12d571136 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,4 +1,4 @@ -import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared'; +import { ALink, LinkType, utils as sharedUtils } from '@0xproject/react-shared'; import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c871e77d4..ec42c8265 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { ALink, LinkType, Styles } from '../types'; +import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 793214a87..1842e8af3 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -6,15 +6,7 @@ export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; -export { - HeaderSizes, - Styles, - MenuSubsectionsBySection, - EtherscanLinkSuffixes, - Networks, - LinkType, - ALink, -} from './types'; +export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, LinkType, ALink } from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index b3dd4045b..daae7b115 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -8,10 +8,6 @@ export enum HeaderSizes { H3 = 'h3', } -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - export enum EtherscanLinkSuffixes { Address = 'address', Tx = 'tx', diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx deleted file mode 100644 index 04385cfdb..000000000 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; -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 { Deco, Key, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { Translate } from 'ts/utils/translate'; - -export interface DocsContentTopBarProps { - location: Location; - translate: Translate; - sectionNameToLinks?: ObjectMap; -} - -interface DocsContentTopBarState { - isDrawerOpen: boolean; -} - -interface MenuItemInfo { - title: string; - url: string; - iconUrl: string; - textStyle: React.CSSProperties; -} - -export class DocsContentTopBar extends React.Component { - constructor(props: DocsContentTopBarProps) { - super(props); - this.state = { - isDrawerOpen: false, - }; - } - public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void { - if (nextProps.location.pathname !== this.props.location.pathname) { - this.setState({ - isDrawerOpen: false, - }); - } - } - 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', - textStyle: { color: colors.linkSectionGrey }, - }, - { - title: this.props.translate.get(Key.Forum, Deco.Cap), - url: constants.URL_FORUM, - iconUrl: '/images/developers/forum_icon.svg', - textStyle: { color: colors.linkSectionGrey }, - }, - { - title: this.props.translate.get(Key.LiveChat, Deco.Cap), - url: constants.URL_ZEROEX_CHAT, - iconUrl: '/images/developers/chat_icon.svg', - textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, - }, - ]; - return ( - - -
    - - -
    - 0xproject.com -
    - -
    -
    -
    -
    - {this._renderMenuItems(menuItemInfos)} -
    -
    -
    - -
    -
    -
    - -
    -
    - -
    - {this._renderDrawer()} - - ); - } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { - return ( - -
    - -
    - {menuItemInfo.title} -
    -
    -     - ); - }); - return menuItems; - } - private _renderDrawer(): React.ReactNode { - return ( - -
    - -
    -     - ); - } - private _onMenuButtonClick(): void { - this.setState({ - isDrawerOpen: !this.state.isDrawerOpen, - }); - } -} 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..6a050d398 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,163 @@ +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +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 { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsTopBarProps { + location: Location; + translate: Translate; + sectionNameToLinks?: ObjectMap; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + +export class DocsTopBar extends React.Component { + 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 { + const menuItemInfos: MenuItemInfo[] = [ + { + title: this.props.translate.get(Key.Github, Deco.Cap), + url: constants.URL_GITHUB_ORG, + iconUrl: '/images/developers/github_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + url: constants.URL_FORUM, + iconUrl: '/images/developers/forum_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.LiveChat, Deco.Cap), + url: constants.URL_ZEROEX_CHAT, + iconUrl: '/images/developers/chat_icon.svg', + textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, + }, + ]; + return ( + + +
    + + +
    + 0xproject.com +
    + +
    +
    +
    +
    + {this._renderMenuItems(menuItemInfos)} +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    + {this._renderDrawer()} + + ); + } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + +
    + +
    + {menuItemInfo.title} +
    +
    +     + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + +
    + +
    +     + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7c0bf433e..c0b50fab7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -10,13 +10,12 @@ import { } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; 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 { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; 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'; @@ -475,7 +474,7 @@ export class Home extends React.Component { backgroundColor={colors.white} > - Date: Wed, 3 Oct 2018 17:25:23 +0100 Subject: rename for clarity --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index ec42c8265..0e6a06a3b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { -- cgit v1.2.3 From 4184c5db8597a7311f3efe82bce9a5e2668daf51 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:30:23 +0100 Subject: Use Container and Text where possible --- .../ts/components/documentation/docs_top_bar.tsx | 23 +++++++++++----------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 6a050d398..e5aa2ea29 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -5,6 +5,7 @@ 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 { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -71,9 +72,11 @@ export class DocsTopBar extends React.Component -
    - 0xproject.com -
    + + + 0xproject.com + +
    @@ -86,19 +89,15 @@ export class DocsTopBar extends React.Component
    -
    - -
    + onClick={this._onMenuButtonClick.bind(this)} + />
    Date: Wed, 3 Oct 2018 19:00:59 +0100 Subject: Convert more divs to Containers --- .../ts/components/documentation/docs_top_bar.tsx | 39 +++++++--------- packages/website/ts/pages/documentation/home.tsx | 54 +++++++++++----------- 2 files changed, 44 insertions(+), 49 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index e5aa2ea29..3fea1c714 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -65,7 +65,7 @@ export class DocsTopBar extends React.Component -
    + -
    -
    -
    -
    + + + + {this._renderMenuItems(menuItemInfos)} -
    -
    -
    + + + -
    -
    + + -
    + -
    + {this._renderDrawer()} ); @@ -124,12 +117,12 @@ export class DocsTopBar extends React.Component -
    +
    {menuItemInfo.title}
    -
    + ); }); @@ -143,14 +136,14 @@ export class DocsTopBar extends React.Component -
    + -
    + ); } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index c0b50fab7..b95aa17f8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -435,7 +435,7 @@ export class Home extends React.Component { } 50%, ${colors.white} 100%)`} > -
    + { onMouseOver={this._onMainContentHover.bind(this, true)} onMouseLeave={this._onMainContentHover.bind(this, false)} > -
    + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( @@ -533,29 +533,29 @@ export class Home extends React.Component { -
    +
    -
    + ); } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( -
    + {category} -
    {_.map(pkgs, pkg => this._renderPackage(pkg))}
    -
    + {_.map(pkgs, pkg => this._renderPackage(pkg))} + ); } private _renderPackage(pkg: Package): React.ReactNode { const id = sharedUtils.getIdFromName(pkg.link.title); return ( -
    + -
    -
    + + { {pkg.link.title} -
    -
    - -
    -
    + + + + + + + { type={pkg.link.type} shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} > -
    -
    {this.props.translate.get(Key.More, Deco.Cap)}
    + + {this.props.translate.get(Key.More, Deco.Cap)} -
    +     -
    -
    -
    + + +     ); } -- cgit v1.2.3 From 85045267fe0643ab7f2af324df6135141aa8edb1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 4 Oct 2018 19:26:50 +0100 Subject: remove stray logs --- packages/website/ts/pages/documentation/home.tsx | 1 - packages/website/ts/pages/wiki/wiki.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b95aa17f8..a8788aea7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -425,7 +425,6 @@ export class Home extends React.Component { pkg => pkg.link, ), }; - console.log('sectionNameToLinks', sectionNameToLinks); return ( { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} : this._getSectionNameToLinks(this.state.articlesBySection); - console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', -- cgit v1.2.3 From 60ba8d57d45aedde7a08e4638215453f899b8e0d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 10:13:19 +0100 Subject: Fix react warning --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0e6a06a3b..709d0ace9 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,7 +8,7 @@ import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; -import { Link } from './Link'; +import { Link } from './link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { -- cgit v1.2.3 From 055763cceb9951b038b07488ddc7ae35210f1efe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:13:33 +0100 Subject: Fix bug where wiki links in dev dropdown weren't working when on the wiki --- packages/react-shared/src/components/link.tsx | 154 +++++++++++---------- .../components/dropdowns/developers_drop_down.tsx | 16 ++- packages/website/ts/components/top_bar/top_bar.tsx | 1 + 3 files changed, 93 insertions(+), 78 deletions(-) diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 6200bfbd3..7b22dc4fa 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -18,84 +18,94 @@ export interface LinkProps { containerId?: string; } +export interface LinkState {} + /** * A generic link component which let's the developer render internal, external and scroll-to-hash links, and * their associated behaviors with a single link component. Many times we want a menu including a combination of * internal, external and scroll links and the abstraction of the differences of rendering each types of link * makes it much easier to do so. */ -export const Link: React.StatelessComponent = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, - containerId, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, +export class Link extends React.Component { + public static defaultProps: Partial = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return ( - - {children} - - ); - default: - throw new Error(`Unrecognized LinkType: ${type}`); + private _outerReactScrollSpan: HTMLSpanElement | null; + constructor(props: LinkProps) { + super(props); + this._outerReactScrollSpan = null; } -}; - -Link.defaultProps = { - type: LinkType.ReactRoute, - shouldOpenInNewTab: false, - style: {}, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, -}; + public render(): React.ReactNode { + const styleWithDefault = { + textDecoration: 'none', + cursor: 'pointer', + ...this.props.style, + }; -Link.displayName = 'Link'; + switch (this.props.type) { + case LinkType.External: + return ( + + {this.props.children} + + ); + case LinkType.ReactRoute: + return ( + + {this.props.children} + + ); + case LinkType.ReactScroll: + return ( + (this._outerReactScrollSpan = input)}> + + + {this.props.children} + + + + ); + default: + throw new Error(`Unrecognized LinkType: ${this.props.type}`); + } + } + // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. + // We do however rely on these events being propagated in certain scenarios (e.g when the link + // is within a dropdown we want to close upon being clicked). Because of this, we registry the + // click event of an inner span, and pass it around the react-scroll link to an outer span. + private _onClickPropagateClickEventAroundScrollLink(): void { + if (!_.isNull(this._outerReactScrollSpan)) { + this._outerReactScrollSpan.click(); + } + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 6133c8b4d..ac1d82c75 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -64,6 +64,7 @@ const usefulLinksToLinkInfo: ALink[] = [ ]; interface DevelopersDropDownProps { + location: Location; translate: Translate; menuItemStyles: React.CSSProperties; menuIconStyle: React.CSSProperties; @@ -165,17 +166,20 @@ export class DevelopersDropDown extends React.Component { + const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); + const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; + let to = link.to; + let type = link.type; + if (isWikiLink && isOnWiki) { + to = `${link.to.split('#')[1]}`; + type = LinkType.ReactScroll; + } i++; const isLast = i === numLinks; const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return (
    - + {linkText}
    diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index e25c0a0f7..d05b72d98 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -161,6 +161,7 @@ export class TopBar extends React.Component {
    Date: Fri, 5 Oct 2018 11:46:35 +0100 Subject: Render paragraphs with spans so we don't get margin added --- packages/website/ts/pages/documentation/home.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a8788aea7..7e34136a8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -572,6 +572,7 @@ export class Home extends React.Component { source={pkg.description} renderers={{ link: MarkdownLinkBlock, + paragraph: 'span', }} /> -- cgit v1.2.3 From e7de4b953fe8aaefee9c043679b021a485dc6dee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:51:52 +0100 Subject: Apply props to all link variants when possible --- packages/react-shared/src/components/link.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7b22dc4fa..ee55cc642 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -80,13 +80,19 @@ export class Link extends React.Component { ); case LinkType.ReactScroll: return ( - (this._outerReactScrollSpan = input)}> + (this._outerReactScrollSpan = input)} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > -- cgit v1.2.3 From f7aee9c7a9df36e20888c10616a249c2a79ed749 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:00:24 +0100 Subject: Remove containerId option and throw if passing in shouldOpenInNewTab with type ReactScroll --- packages/react-shared/src/components/link.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index ee55cc642..e8a13d506 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -6,7 +6,7 @@ import { Link as ScrollLink } from 'react-scroll'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -export interface LinkProps { +interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; @@ -15,7 +15,6 @@ export interface LinkProps { onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; - containerId?: string; } export interface LinkState {} @@ -35,7 +34,6 @@ export class Link extends React.Component { onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -43,6 +41,10 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { + if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`); + } + const styleWithDefault = { textDecoration: 'none', cursor: 'pointer', @@ -91,7 +93,7 @@ export class Link extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={this.props.containerId} + containerId={constants.DOCS_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > -- cgit v1.2.3 From e0355a2e395fc056fd1d5c5e1780784853546acd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:03:15 +0100 Subject: Rename scroll container --- packages/react-docs/src/components/type.tsx | 2 +- packages/react-shared/src/components/anchor_title.tsx | 2 +- packages/react-shared/src/components/link.tsx | 2 +- .../react-shared/src/components/nested_sidebar_menu.tsx | 14 ++------------ packages/react-shared/src/utils/constants.ts | 3 +-- 5 files changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 5c018f5dd..2e0003198 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -228,7 +228,7 @@ export const Type: React.SFC = (props: TypeProps): any => { offset={0} hashSpy={true} duration={sharedConstants.DOCS_SCROLL_DURATION_MS} - containerId={sharedConstants.DOCS_CONTAINER_ID} + containerId={sharedConstants.SCROLL_CONTAINER_ID} > {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( {typeName} diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 8f7e4af27..a83881b67 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -71,7 +71,7 @@ export class AnchorTitle extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} + containerId={constants.SCROLL_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 709d0ace9..0bc516223 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,12 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + Date: Fri, 5 Oct 2018 13:54:37 +0100 Subject: Remove style prop from Link --- packages/react-docs/src/components/source_link.tsx | 8 ++--- packages/react-shared/src/components/link.tsx | 12 ++++--- .../ts/components/documentation/docs_logo.tsx | 8 ++--- .../ts/components/documentation/docs_top_bar.tsx | 6 ++-- .../components/dropdowns/developers_drop_down.tsx | 21 ++++------- packages/website/ts/components/fill_order.tsx | 2 +- packages/website/ts/components/footer.tsx | 7 +--- .../ts/components/inputs/token_amount_input.tsx | 3 +- .../ts/components/top_bar/top_bar_menu_item.tsx | 2 +- .../website/ts/components/ui/custom_menu_item.tsx | 3 +- packages/website/ts/pages/about/about.tsx | 2 +- packages/website/ts/pages/documentation/home.tsx | 41 ++++++++++++---------- packages/website/ts/pages/landing/landing.tsx | 5 +-- 13 files changed, 56 insertions(+), 64 deletions(-) diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx index 3096ad8d5..c6dd09adb 100644 --- a/packages/react-docs/src/components/source_link.tsx +++ b/packages/react-docs/src/components/source_link.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { Source } from '@0xproject/types'; import * as React from 'react'; @@ -13,9 +13,9 @@ export const SourceLink = (props: SourceLinkProps) => { const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`; return (
    - - Source - + + {'Source'} +
    ); }; diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 51ffa1e1d..60891dd7a 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -10,11 +10,12 @@ interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; - style?: React.CSSProperties; className?: string; onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; + textDecoration?: string; + fontColor?: string; } export interface LinkState {} @@ -29,11 +30,12 @@ export class Link extends React.Component { public static defaultProps: Partial = { type: LinkType.ReactRoute, shouldOpenInNewTab: false, - style: {}, className: '', onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), + textDecoration: 'none', + fontColor: 'inherit', }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -46,11 +48,13 @@ export class Link extends React.Component { } const styleWithDefault = { - textDecoration: 'none', + textDecoration: this.props.textDecoration, cursor: 'pointer', - ...this.props.style, + color: this.props.fontColor, }; + console.log('styleWithDefault', styleWithDefault); + switch (this.props.type) { case LinkType.External: return ( diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 6f3c3c6e8..b727fea36 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -9,11 +9,9 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return ( -
    - - - -
    + + + ); }; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 3fea1c714..0b563a76b 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -68,7 +68,7 @@ export class DocsTopBar extends React.Component @@ -86,7 +86,9 @@ export class DocsTopBar extends React.Component - + + + {this._renderLinkSection(usefulLinksToLinkInfo)}
    - +
    {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} @@ -159,10 +154,6 @@ export class DevelopersDropDown extends React.Component { @@ -179,8 +170,10 @@ export class DevelopersDropDown extends React.Component - - {linkText} + + + {linkText} +
    ); diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 99939ce43..c1bbadfde 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -323,7 +323,7 @@ export class FillOrder extends React.Component { return (
    Order successfully filled. See the trade details in your{' '} - + trade history
    diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 02770c073..d90f2f708 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -12,11 +12,6 @@ import { Translate } from 'ts/utils/translate'; const ICON_DIMENSION = 16; -const linkStyle = { - color: colors.white, - cursor: 'pointer', -}; - const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', @@ -187,7 +182,7 @@ export class Footer extends React.Component { const iconIfExists = titleToIcon[link.title]; return (
    - +
    {!_.isUndefined(iconIfExists) ? (
    diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 562f670e2..134d1cc76 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -111,7 +111,8 @@ export class TokenAmountInput extends React.Component Set allowance diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index d5ee96850..c88db95fa 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -37,7 +37,7 @@ export class TopBarMenuItem extends React.Component - + {itemContent}
    diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx index 11f61b336..c25da6be6 100644 --- a/packages/website/ts/components/ui/custom_menu_item.tsx +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; interface CustomMenuItemProps { to: string; - style?: React.CSSProperties; onClick?: () => void; className?: string; } @@ -30,7 +29,7 @@ export class CustomMenuItem extends React.Component +
    { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7e34136a8..abe0ae6af 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -446,12 +446,14 @@ export class Home extends React.Component { - + + +
    { @@ -578,23 +580,24 @@ export class Home extends React.Component { - - - {this.props.translate.get(Key.More, Deco.Cap)} - - + + + + {this.props.translate.get(Key.More, Deco.Cap)} + + + - - + + diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index c819cd8a1..395cdabf8 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -317,10 +317,7 @@ export class Landing extends React.Component { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - + {this.props.translate.get(Key.FullListLink)}
    -- cgit v1.2.3 From fa6bd348992674192d07fef3d60950980212ecbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 14:55:28 +0100 Subject: Remove type prop and instead infer it from the value of to --- .../react-docs/src/components/documentation.tsx | 23 ++++++++++++---------- packages/react-docs/src/components/type.tsx | 11 +++-------- packages/react-docs/src/docs_info.ts | 5 +---- packages/react-shared/src/components/link.tsx | 22 ++++++++++++++------- .../src/components/markdown_section.tsx | 13 ++++++------ .../src/components/nested_sidebar_menu.tsx | 4 ++-- packages/react-shared/src/index.ts | 2 +- packages/react-shared/src/types.ts | 1 - packages/website/package.json | 2 ++ .../components/dialogs/blockchain_err_dialog.tsx | 2 +- .../components/dropdowns/developers_drop_down.tsx | 10 +++------- packages/website/ts/components/footer.tsx | 23 +++++++++++++--------- packages/website/ts/components/top_bar/top_bar.tsx | 16 ++++----------- .../ts/components/top_bar/top_bar_menu_item.tsx | 7 ++++--- packages/website/ts/pages/documentation/home.tsx | 21 -------------------- packages/website/ts/pages/wiki/wiki.tsx | 2 -- 16 files changed, 69 insertions(+), 95 deletions(-) diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index de2ccca8b..6a08d50e0 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, EtherscanLinkSuffixes, + Link, MarkdownSection, NestedSidebarMenu, Networks, @@ -319,9 +320,9 @@ export class Documentation extends React.Component {`import { `} - + {exportName} - + {` } from '${this.props.docsInfo.packageName}'`}
    @@ -350,14 +351,16 @@ export class Documentation extends React.Component - - +
    + + + +
    ); }, ); diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 2e0003198..1ae1324c6 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0xproject/react-shared'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; import { errorUtils } from '@0xproject/utils'; import * as _ from 'lodash'; @@ -205,14 +205,9 @@ export const Type: React.SFC = (props: TypeProps): any => { const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined; if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( - + {typeName} - + ); } else if ( (isReference || isArray) && diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index f3bdf4964..549106c77 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,4 +1,4 @@ -import { ALink, LinkType, utils as sharedUtils } from '@0xproject/react-shared'; +import { ALink, utils as sharedUtils } from '@0xproject/react-shared'; import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; @@ -62,7 +62,6 @@ export class DocsInfo { return { to: `${sectionName}-${typeName}`, title: typeName, - type: LinkType.ReactScroll, }; }); subsectionNameToLinks[sectionName] = typeLinks; @@ -86,7 +85,6 @@ export class DocsInfo { return { to: `${sectionName}-${name}`, title: name, - type: LinkType.ReactScroll, }; }); @@ -114,7 +112,6 @@ export class DocsInfo { links.push({ title: linkTitle, to, - type: LinkType.ReactScroll, }); }); }); diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 60891dd7a..05ca93cc5 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -2,13 +2,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; import { Link as ScrollLink } from 'react-scroll'; +import * as validUrl from 'valid-url'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; interface LinkProps { to: string; - type?: LinkType; shouldOpenInNewTab?: boolean; className?: string; onMouseOver?: (event: React.MouseEvent) => void; @@ -28,7 +28,6 @@ export interface LinkState {} */ export class Link extends React.Component { public static defaultProps: Partial = { - type: LinkType.ReactRoute, shouldOpenInNewTab: false, className: '', onMouseOver: _.noop.bind(_), @@ -43,7 +42,18 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { - if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + let type: LinkType; + const isReactRoute = _.startsWith(this.props.to, '/'); + const isExternal = validUrl.isWebUri(this.props.to) || _.startsWith(this.props.to, 'mailto:'); + if (isReactRoute) { + type = LinkType.ReactRoute; + } else if (isExternal) { + type = LinkType.External; + } else { + type = LinkType.ReactScroll; + } + + if (type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`); } @@ -53,9 +63,7 @@ export class Link extends React.Component { color: this.props.fontColor, }; - console.log('styleWithDefault', styleWithDefault); - - switch (this.props.type) { + switch (type) { case LinkType.External: return ( { ); default: - throw new Error(`Unrecognized LinkType: ${this.props.type}`); + throw new Error(`Unrecognized LinkType: ${type}`); } } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 09b214548..e84d2b078 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,6 +8,7 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; @@ -63,13 +64,11 @@ export class MarkdownSection extends React.Component
    diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0bc516223..7f5e16f01 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + - + {linkText} diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index d90f2f708..f11ecae19 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,4 +1,4 @@ -import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; +import { ALink, colors, Link } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; @@ -54,7 +54,7 @@ export class Footer extends React.Component { { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), to: WebsitePaths.Whitepaper, - type: LinkType.External, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), @@ -68,28 +68,28 @@ export class Footer extends React.Component { [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - type: LinkType.External, to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - type: LinkType.External, to: constants.URL_BLOG, + shouldOpenInNewTab: true, }, { title: 'Twitter', - type: LinkType.External, to: constants.URL_TWITTER, + shouldOpenInNewTab: true, }, { title: 'Reddit', - type: LinkType.External, to: constants.URL_REDDIT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - type: LinkType.External, to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, }, ], [Key.Organization]: [ @@ -103,8 +103,8 @@ export class Footer extends React.Component { }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - type: LinkType.External, to: 'mailto:team@0xproject.com', + shouldOpenInNewTab: true, }, ], }; @@ -182,7 +182,12 @@ export class Footer extends React.Component { const iconIfExists = titleToIcon[link.title]; return (
    - +
    {!_.isUndefined(iconIfExists) ? (
    diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index d05b72d98..3297befad 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,13 +1,5 @@ import { DocsInfo } from '@0xproject/react-docs'; -import { - ALink, - colors, - constants as sharedConstants, - Link, - LinkType, - NestedSidebarMenu, - Styles, -} from '@0xproject/react-shared'; +import { ALink, colors, constants as sharedConstants, Link, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; @@ -177,7 +169,7 @@ export class TopBar extends React.Component { path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} - linkType={LinkType.External} + shouldOpenInNewTab={true} /> { )} - + {this.props.translate.get(Key.Whitepaper, Deco.Cap)} @@ -294,7 +286,7 @@ export class TopBar extends React.Component { {this.props.translate.get(Key.Careers, Deco.Cap)} - + {this.props.translate.get(Key.Blog, Deco.Cap)} diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index c88db95fa..eff5ba66d 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,4 +1,4 @@ -import { colors, Link, LinkType } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -12,7 +12,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - linkType: LinkType; + shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -25,6 +25,7 @@ export class TopBarMenuItem extends React.Component - + {itemContent}
    diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index abe0ae6af..f7c4839b4 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, Link, - LinkType, MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, @@ -89,7 +88,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -144,7 +142,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -156,7 +153,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -213,7 +209,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Event Extractor', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -223,7 +218,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Tracker Worker', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -233,7 +227,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -243,7 +236,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct Server SDK', to: 'https://github.com/ERCdEX/aqueduct-server-sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -252,7 +244,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/ddex-api', title: 'DDEX Node.js SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -261,7 +252,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/widget', title: 'ERCdex Widget', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -270,7 +260,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/java', title: 'ERCdex Java SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -279,7 +268,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/python', title: 'ERCdex Python SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -289,7 +277,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Massive', to: 'https://github.com/NoteGio/massive', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -298,7 +285,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/NoteGio/openrelay', title: 'OpenRelay', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -308,7 +294,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'OpenRelay.js', to: 'https://github.com/NoteGio/openrelay.js', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -318,7 +303,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Radar SDK', to: 'https://github.com/RadarRelay/sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -328,7 +312,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'The Ocean Javascript SDK', to: 'https://github.com/TheOceanTrade/theoceanx-javascript', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -337,7 +320,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/tokenlon-sdk', title: 'Tokenlon Javascript SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -346,7 +328,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/wildnothing/asset-data-decoder', title: 'AssetData decoder library in Java', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -560,7 +541,6 @@ export class Home extends React.Component { @@ -584,7 +564,6 @@ export class Home extends React.Component { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 230fff410..70f54aceb 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, HeaderSizes, - LinkType, MarkdownSection, NestedSidebarMenu, Styles, @@ -234,7 +233,6 @@ export class Wiki extends React.Component { return { to: sharedUtils.getIdFromName(article.title), title: article.title, - type: LinkType.ReactScroll, }; }); sectionNameToLinks[sectionName] = articleLinks; -- cgit v1.2.3 From ded6742ddd70e295f15dab6363c935777a6a5588 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 15:06:59 +0100 Subject: remove inline style --- packages/website/ts/components/documentation/docs_top_bar.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 0b563a76b..f95dbb5e1 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -115,14 +115,11 @@ export class DocsTopBar extends React.Component
    - {menuItemInfo.title} + {menuItemInfo.title}
    -- cgit v1.2.3 From df7210163ad2835dcb6e461da173d1873d3195d4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 15:33:15 +0100 Subject: Convert more divs to containers and text components --- .../ts/components/documentation/docs_top_bar.tsx | 22 ++++-- .../components/dropdowns/developers_drop_down.tsx | 86 +++++++++------------- packages/website/ts/components/ui/container.tsx | 2 + packages/website/ts/components/ui/text.tsx | 4 + 4 files changed, 57 insertions(+), 57 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index f95dbb5e1..9a2146f9c 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -24,7 +24,8 @@ interface MenuItemInfo { title: string; url: string; iconUrl: string; - textStyle: React.CSSProperties; + fontColor: string; + fontWeight?: string; } export class DocsTopBar extends React.Component { @@ -47,19 +48,20 @@ export class DocsTopBar extends React.Component -
    - {menuItemInfo.title} -
    + + + {menuItemInfo.title} + +     ); diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 8a5ad53e2..df5dc173d 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -91,63 +91,50 @@ export class DevelopersDropDown extends React.Component + {this._renderTitle('Getting started')} -
    -
    {this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
    -
    {this._renderLinkSection(gettingStartedKeyToLinkInfo2)}
    -
    + + + {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} + + {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} + +     + + + + {this._renderTitle('Popular docs')} + {this._renderLinkSection(popularDocsToLinkInfos)} + + + {this._renderTitle('Useful links')} + {this._renderLinkSection(usefulLinksToLinkInfo)} + -
    -
    -
    -
    {this._renderTitle('Popular docs')}
    -
    {this._renderLinkSection(popularDocsToLinkInfos)}
    -
    -
    -
    {this._renderTitle('Useful links')}
    -
    {this._renderLinkSection(usefulLinksToLinkInfo)}
    -
    -
    -
    - {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} -
    + + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + + -
    +     ); return dropdownMenu; } private _renderTitle(title: string): React.ReactNode { return ( -
    - {title.toUpperCase()} -
    + + + {title.toUpperCase()} + + ); } private _renderLinkSection(links: ALink[]): React.ReactNode { @@ -157,7 +144,6 @@ export class DevelopersDropDown extends React.Component + {linkText} -
    + ); }); - return
    {renderLinks}
    ; + return {renderLinks}; } } diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 782ab3b6f..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,8 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index cd8f290e3..4415962b1 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -19,7 +19,9 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; display?: string; } @@ -34,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; -- cgit v1.2.3 From a5d0066d0016056ca0d01ad8bebef76b35848280 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:28:03 +0100 Subject: Convert TutorialButton to styled component --- .../components/documentation/tutorial_button.tsx | 109 +++++++++------------ 1 file changed, 45 insertions(+), 64 deletions(-) diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index a0d99e175..9c13ec732 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,79 +1,60 @@ import { colors, Link } from '@0xproject/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 { darken, saturate } from 'polished'; +import { styled } from 'ts/style/theme'; + export interface TutorialButtonProps { + className?: string; translate: Translate; tutorialInfo: TutorialInfo; } -export interface TutorialButtonState { - isHovering: boolean; -} - -export class TutorialButton extends React.Component { - constructor(props: TutorialButtonProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - return ( - -
    -
    - -
    -
    - - {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} - - - {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} - -
    -
    -
    - -
    +const PlainTutorialButton: React.StatelessComponent = ({ translate, tutorialInfo, className }) => ( + + +
    +
    + +
    +
    + + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + + + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + +
    +
    +
    +
    - - ); - } - private _onHover(_event: React.FormEvent): void { - if (this.state.isHovering) { - return; - } - this.setState({ - isHovering: true, - }); - } - private _onHoverOff(): void { - this.setState({ - isHovering: false, - }); +
    + +     +); + +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'; -- cgit v1.2.3 From 03bfc7dd404c1ec9e4a2587d28014d3117f0e66a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:34:46 +0100 Subject: Fix liinter --- packages/website/ts/components/dialogs/blockchain_err_dialog.tsx | 2 +- packages/website/ts/components/documentation/tutorial_button.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index d50fd6592..18c060991 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,4 +1,4 @@ -import { colors, Link, Networks } from '@0xproject/react-shared'; +import { colors, Networks } from '@0xproject/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 9c13ec732..dc00bf743 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -6,7 +6,6 @@ import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; -import { darken, saturate } from 'polished'; import { styled } from 'ts/style/theme'; export interface TutorialButtonProps { -- cgit v1.2.3 From 3ce665eeabb9fc75dd50847304242de096e54d46 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:22 +0100 Subject: Fix comment --- packages/react-shared/src/components/link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 05ca93cc5..5a456109b 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -121,7 +121,7 @@ export class Link extends React.Component { } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. // We do however rely on these events being propagated in certain scenarios (e.g when the link - // is within a dropdown we want to close upon being clicked). Because of this, we registry the + // is within a dropdown we want to close upon being clicked). Because of this, we register the // click event of an inner span, and pass it around the react-scroll link to an outer span. private _onClickPropagateClickEventAroundScrollLink(): void { if (!_.isNull(this._outerReactScrollSpan)) { -- cgit v1.2.3 From 2966ab12e009ed214978b1fd9209fc13cc7d3630 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:34 +0100 Subject: Move valid-url import to react-shared --- packages/react-shared/package.json | 4 +++- packages/website/package.json | 2 -- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 5629ec915..490933fb3 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -44,6 +44,7 @@ "@types/react-dom": "*", "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", + "@types/valid-url": "^1.0.2", "basscss": "^8.0.3", "change-case": "^3.0.2", "is-mobile": "^0.2.2", @@ -54,7 +55,8 @@ "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", - "react-router-dom": "^4.1.1" + "react-router-dom": "^4.1.1", + "valid-url": "^1.0.9" }, "publishConfig": { "access": "public" diff --git a/packages/website/package.json b/packages/website/package.json index 89135b4f9..3073eca72 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -62,7 +62,6 @@ "styled-components": "^3.3.0", "thenby": "^1.2.3", "truffle-contract": "2.0.1", - "valid-url": "^1.0.9", "web3-provider-engine": "14.0.6", "xml-js": "^1.6.4" }, @@ -85,7 +84,6 @@ "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", - "@types/valid-url": "^1.0.2", "@types/web3-provider-engine": "^14.0.0", "awesome-typescript-loader": "^5.2.1", "copyfiles": "^2.0.0", -- cgit v1.2.3 From 6cc9631ef6458d88249a5abd5c7c5ee7b3614e62 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:54 +0100 Subject: remove unused import --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 7f5e16f01..5b6076df6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; import { Link } from './link'; -- cgit v1.2.3 From 0fd158ac64f076859c296c641bdd2027971d8ac1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 16:06:32 +0200 Subject: Replace Rollbar UMD with regular import --- packages/website/package.json | 1 + packages/website/ts/utils/error_reporter.ts | 5 ++-- yarn.lock | 41 ++++++++++++++++++++++++++++- 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index aabb6b28e..3885e8066 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -58,6 +58,7 @@ "react-typist": "^2.0.4", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", + "rollbar": "^2.4.7", "semver-sort": "0.0.4", "styled-components": "^3.3.0", "thenby": "^1.2.3", diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index 6008fffed..bec92e829 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -1,4 +1,5 @@ import { logUtils } from '@0xproject/utils'; +import Rollbar = require('rollbar'); import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -36,8 +37,8 @@ const rollbarConfig = { 'SecurityError (DOM Exception 18)', ], }; -import Rollbar = require('../../public/js/rollbar.umd.min.js'); -const rollbar = Rollbar.init(rollbarConfig); + +const rollbar = new Rollbar(rollbarConfig); export const errorReporter = { report(err: Error): void { diff --git a/yarn.lock b/yarn.lock index ff8a87c7b..3d42c2b4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4110,6 +4110,10 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" +console-polyfill@0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/console-polyfill/-/console-polyfill-0.3.0.tgz#84900902a18c47a5eba932be75fa44d23e8af861" + constant-case@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46" @@ -5337,6 +5341,12 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" +error-stack-parser@1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.3.tgz#fada6e3a9cd2b0e080e6d6fc751418649734f35c" + dependencies: + stackframe "^0.3.1" + error@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02" @@ -8274,6 +8284,10 @@ is-wsl@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" +is_js@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/is_js/-/is_js-0.9.0.tgz#0ab94540502ba7afa24c856aa985561669e9c52d" + isarray@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" @@ -13179,6 +13193,12 @@ request-ip@~1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/request-ip/-/request-ip-1.2.3.tgz#66988f0e22406ec4af630d19b573fe4b447c3b49" +request-ip@~2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/request-ip/-/request-ip-2.0.2.tgz#deeae6d4af21768497db8cd05fa37143f8f1257e" + dependencies: + is_js "^0.9.0" + request-promise-core@1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6" @@ -13481,6 +13501,21 @@ rollbar@^0.6.5: optionalDependencies: decache "^3.0.5" +rollbar@^2.4.7: + version "2.4.7" + resolved "https://registry.yarnpkg.com/rollbar/-/rollbar-2.4.7.tgz#9b1de1a0fab6b6e63fcfcd322c26081a1d8242e8" + dependencies: + async "~1.2.1" + console-polyfill "0.3.0" + debug "2.6.9" + error-stack-parser "1.3.3" + json-stringify-safe "~5.0.0" + lru-cache "~2.2.1" + request-ip "~2.0.1" + uuid "3.0.x" + optionalDependencies: + decache "^3.0.5" + rst-selector-parser@^2.2.3: version "2.2.3" resolved "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91" @@ -14335,6 +14370,10 @@ stack-utils@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620" +stackframe@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4" + state-toggle@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.0.tgz#d20f9a616bb4f0c3b98b91922d25b640aa2bc425" @@ -15784,7 +15823,7 @@ uuid@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.1.tgz#c2a30dedb3e535d72ccf82e343941a50ba8533ac" -uuid@3.0.1, uuid@~3.0.0: +uuid@3.0.1, uuid@3.0.x, uuid@~3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1" -- cgit v1.2.3 From 636ce6331bf854d6b7b12a1e87929a5a55184062 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 11 Oct 2018 13:33:49 +0200 Subject: fix(website): Avoid hover activated dropdown from closing when activeNode is clicked --- packages/website/ts/components/ui/drop_down.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 1daaeb1c3..9044b218d 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 { 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} -- cgit v1.2.3 From 9b147f14955c5f6a0b38e03ae30ac13b1be183d1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 11 Oct 2018 13:49:56 +0200 Subject: fix(website): remove deadzone between "Developers" menu item and dropdown so it never closes when hovering between the two --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- packages/website/ts/components/top_bar/top_bar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index df5dc173d..2bdcb8a4c 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -85,7 +85,7 @@ export class DevelopersDropDown extends React.Component ); } diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3297befad..80271fa63 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -154,7 +154,7 @@ export class TopBar extends React.Component {
    -- cgit v1.2.3 From 7f217dcb3ced2cb5488badda690b51fc3be67618 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 11 Oct 2018 14:58:29 +0200 Subject: style: Make width of developer section same as rest of website (1064px) --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index f7c4839b4..f8ac6a9f4 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -451,7 +451,7 @@ export class Home extends React.Component { -- cgit v1.2.3 From dcdc411ab73c860d58a47a9b721d8047e68ce738 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 11 Oct 2018 14:58:39 +0200 Subject: chore: update yarn.lock --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index d5460c1b2..59ce478c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5072,13 +5072,6 @@ error-stack-parser@1.3.3: dependencies: stackframe "^0.3.1" -error@^7.0.2: - version "7.0.2" - resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02" - dependencies: - string-template "~0.2.1" - xtend "~4.0.0" - es-abstract@^1.10.0, es-abstract@^1.5.1, es-abstract@^1.6.1: version "1.12.0" resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165" -- cgit v1.2.3 From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:54:44 +0200 Subject: Refactor Home so that Dev section chrome is reusable across pages --- .../react-docs/src/components/doc_reference.tsx | 331 +++++++++++ .../react-docs/src/components/documentation.tsx | 427 -------------- packages/react-docs/src/docs_info.ts | 59 +- packages/react-docs/src/index.ts | 2 +- packages/react-docs/src/utils/typedoc_utils.ts | 10 +- .../src/components/nested_sidebar_menu.tsx | 38 -- .../components/documentation/overview_content.tsx | 132 +++++ packages/website/ts/components/sidebar_header.tsx | 2 +- packages/website/ts/components/top_bar/top_bar.tsx | 3 - packages/website/ts/containers/docs_home.ts | 9 +- .../ts/pages/documentation/developers_page.tsx | 176 ++++++ .../website/ts/pages/documentation/doc_page.tsx | 90 +-- .../website/ts/pages/documentation/docs_home.tsx | 359 ++++++++++++ packages/website/ts/pages/documentation/home.tsx | 623 --------------------- packages/website/ts/types.ts | 11 + 15 files changed, 1099 insertions(+), 1173 deletions(-) create mode 100644 packages/react-docs/src/components/doc_reference.tsx delete mode 100644 packages/react-docs/src/components/documentation.tsx create mode 100644 packages/website/ts/components/documentation/overview_content.tsx create mode 100644 packages/website/ts/pages/documentation/developers_page.tsx create mode 100644 packages/website/ts/pages/documentation/docs_home.tsx delete mode 100644 packages/website/ts/pages/documentation/home.tsx diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx new file mode 100644 index 000000000..38ec818db --- /dev/null +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -0,0 +1,331 @@ +import { + colors, + constants as sharedConstants, + EtherscanLinkSuffixes, + Link, + MarkdownSection, + Networks, + SectionHeader, + utils as sharedUtils, +} from '@0xproject/react-shared'; +import { + DocAgnosticFormat, + Event, + ExternalExportToLink, + Property, + SolidityMethod, + TypeDefinitionByName, + TypescriptFunction, + TypescriptMethod, +} from '@0xproject/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as semver from 'semver'; + +import { DocsInfo } from '../docs_info'; +import { AddressByContractName, SupportedDocJson } from '../types'; +import { constants } from '../utils/constants'; + +import { Badge } from './badge'; +import { Comment } from './comment'; +import { EventDefinition } from './event_definition'; +import { PropertyBlock } from './property_block'; +import { SignatureBlock } from './signature_block'; +import { TypeDefinition } from './type_definition'; + +const networkNameToColor: { [network: string]: string } = { + [Networks.Kovan]: colors.purple, + [Networks.Ropsten]: colors.red, + [Networks.Mainnet]: colors.turquois, + [Networks.Rinkeby]: colors.darkYellow, +}; + +export interface DocReferenceProps { + selectedVersion: string; + availableVersions: string[]; + docsInfo: DocsInfo; + sourceUrl: string; + docAgnosticFormat?: DocAgnosticFormat; +} + +export interface DocReferenceState { + isHoveringSidebar: boolean; +} + +export class DocReference extends React.Component { + constructor(props: DocReferenceProps) { + super(props); + this.state = { + isHoveringSidebar: false, + }; + } + public componentDidMount(): void { + window.addEventListener('hashchange', this._onHashChanged.bind(this), false); + } + public componentWillUnmount(): void { + window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); + } + public componentDidUpdate(prevProps: 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 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} +
    + ); + } + private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { + const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion); + const eligibleVersions = _.filter(markdownVersions, mdVersion => { + return semver.lte(mdVersion, this.props.selectedVersion); + }); + if (_.isEmpty(eligibleVersions)) { + throw new Error( + `No eligible markdown sections found for ${this.props.docsInfo.displayName} version ${ + this.props.selectedVersion + }.`, + ); + } + const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver)); + const closestVersion = sortedEligibleVersions[0]; + const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName]; + if (!_.isUndefined(markdownFileIfExists)) { + return ( + + ); + } + + const docSection = this.props.docAgnosticFormat[sectionName]; + if (_.isUndefined(docSection)) { + return null; + } + + const isExportedFunctionSection = + docSection.functions.length === 1 && + _.isEmpty(docSection.types) && + _.isEmpty(docSection.methods) && + _.isEmpty(docSection.constructors) && + _.isEmpty(docSection.properties) && + _.isEmpty(docSection.events); + + const sortedTypes = _.sortBy(docSection.types, 'name'); + const typeDefs = _.map(sortedTypes, (customType, i) => { + return ( + + ); + }); + + const sortedProperties = _.sortBy(docSection.properties, 'name'); + const propertyDefs = _.map( + sortedProperties, + this._renderProperty.bind(this, sectionName, typeDefinitionByName), + ); + + const sortedMethods = _.sortBy(docSection.methods, 'name'); + const methodDefs = _.map(sortedMethods, method => { + return this._renderSignatureBlocks(method, sectionName, typeDefinitionByName); + }); + + const sortedFunctions = _.sortBy(docSection.functions, 'name'); + const functionDefs = _.map(sortedFunctions, func => { + return this._renderSignatureBlocks(func, sectionName, typeDefinitionByName); + }); + + const sortedEvents = _.sortBy(docSection.events, 'name'); + const eventDefs = _.map(sortedEvents, (event: Event, i: number) => { + return ( + + ); + }); + const headerStyle: React.CSSProperties = { + fontWeight: 100, + }; + return ( +
    +
    +
    + +
    + {this._renderNetworkBadgesIfExists(sectionName)} +
    + {docSection.comment && } + {!_.isEmpty(docSection.constructors) && ( +
    +

    Constructor

    + {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} +
    + )} + {!_.isEmpty(docSection.properties) && ( +
    +

    Properties

    +
    {propertyDefs}
    +
    + )} + {!_.isEmpty(docSection.methods) && ( +
    +

    Methods

    +
    {methodDefs}
    +
    + )} + {!_.isEmpty(docSection.functions) && ( +
    + {!isExportedFunctionSection &&

    Functions

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

    Events

    +
    {eventDefs}
    +
    + )} + {!_.isUndefined(docSection.externalExportToLink) && + this._renderExternalExports(docSection.externalExportToLink)} + {!_.isUndefined(typeDefs) && + typeDefs.length > 0 && ( +
    +
    {typeDefs}
    +
    + )} +
    + ); + } + private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode { + const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => { + return ( +
    + + {`import { `} + + {exportName} + + {` } from '${this.props.docsInfo.packageName}'`} + +
    + ); + }); + return
    {externalExports}
    ; + } + private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode { + if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) { + return null; + } + + const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[ + this.props.selectedVersion + ]; + const badges = _.map( + networkToAddressByContractName, + (addressByContractName: AddressByContractName, networkName: string) => { + const contractAddress = addressByContractName[sectionName]; + if (_.isUndefined(contractAddress)) { + return null; + } + const linkIfExists = sharedUtils.getEtherScanLinkIfExists( + contractAddress, + sharedConstants.NETWORK_ID_BY_NAME[networkName], + EtherscanLinkSuffixes.Address, + ); + return ( +
    + + + +
    + ); + }, + ); + return badges; + } + private _renderConstructors( + constructors: SolidityMethod[] | TypescriptMethod[], + sectionName: string, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { + const constructorDefs = _.map(constructors, constructor => { + return this._renderSignatureBlocks(constructor, sectionName, typeDefinitionByName); + }); + return
    {constructorDefs}
    ; + } + private _renderProperty( + sectionName: string, + typeDefinitionByName: TypeDefinitionByName, + property: Property, + ): React.ReactNode { + return ( + + ); + } + private _renderSignatureBlocks( + method: SolidityMethod | TypescriptFunction | TypescriptMethod, + sectionName: string, + typeDefinitionByName: TypeDefinitionByName, + ): React.ReactNode { + return ( + + ); + } + private _onSidebarHover(_event: React.FormEvent): 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/documentation.tsx b/packages/react-docs/src/components/documentation.tsx deleted file mode 100644 index 6a08d50e0..000000000 --- a/packages/react-docs/src/components/documentation.tsx +++ /dev/null @@ -1,427 +0,0 @@ -import { - colors, - constants as sharedConstants, - EtherscanLinkSuffixes, - Link, - MarkdownSection, - NestedSidebarMenu, - Networks, - SectionHeader, - Styles, - utils as sharedUtils, -} from '@0xproject/react-shared'; -import { - DocAgnosticFormat, - Event, - ExternalExportToLink, - Property, - SolidityMethod, - TypeDefinitionByName, - TypescriptFunction, - TypescriptMethod, -} from '@0xproject/types'; -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; -import * as semver from 'semver'; - -import { DocsInfo } from '../docs_info'; -import { AddressByContractName, SupportedDocJson } from '../types'; -import { constants } from '../utils/constants'; - -import { Badge } from './badge'; -import { Comment } from './comment'; -import { EventDefinition } from './event_definition'; -import { PropertyBlock } from './property_block'; -import { SignatureBlock } from './signature_block'; -import { TypeDefinition } from './type_definition'; - -const networkNameToColor: { [network: string]: string } = { - [Networks.Kovan]: colors.purple, - [Networks.Ropsten]: colors.red, - [Networks.Mainnet]: colors.turquois, - [Networks.Rinkeby]: colors.darkYellow, -}; - -export interface DocumentationProps { - selectedVersion: string; - availableVersions: string[]; - docsInfo: DocsInfo; - sourceUrl: string; - onVersionSelected: (semver: string) => void; - docAgnosticFormat?: DocAgnosticFormat; - sidebarHeader?: React.ReactNode; - topBarHeight?: number; -} - -export interface DocumentationState { - isHoveringSidebar: boolean; -} - -export class Documentation extends React.Component { - public static defaultProps: Partial = { - topBarHeight: 0, - }; - constructor(props: DocumentationProps) { - super(props); - this.state = { - isHoveringSidebar: false, - }; - } - public componentDidMount(): 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 { - 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 ( -
    - {_.isUndefined(this.props.docAgnosticFormat) ? ( - this._renderLoading(styles.mainContainers) - ) : ( -
    -
    -
    -
    - -
    -
    -
    -
    -
    - {this._renderDocumentation()} -
    -
    -
    -
    - )} -
    - ); - } - private _renderLoading(mainContainersStyles: React.CSSProperties): React.ReactNode { - return ( -
    -
    -
    - -
    -
    - Loading documentation... -
    -
    -
    - ); - } - private _renderDocumentation(): React.ReactNode { - const subMenus = _.values(this.props.docsInfo.menu); - const orderedSectionNames = _.flatten(subMenus); - - const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); - const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName)); - - return renderedSections; - } - private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode { - const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion); - const eligibleVersions = _.filter(markdownVersions, mdVersion => { - return semver.lte(mdVersion, this.props.selectedVersion); - }); - if (_.isEmpty(eligibleVersions)) { - throw new Error( - `No eligible markdown sections found for ${this.props.docsInfo.displayName} version ${ - this.props.selectedVersion - }.`, - ); - } - const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver)); - const closestVersion = sortedEligibleVersions[0]; - const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName]; - if (!_.isUndefined(markdownFileIfExists)) { - return ( - - ); - } - - const docSection = this.props.docAgnosticFormat[sectionName]; - if (_.isUndefined(docSection)) { - return null; - } - - const isExportedFunctionSection = - docSection.functions.length === 1 && - _.isEmpty(docSection.types) && - _.isEmpty(docSection.methods) && - _.isEmpty(docSection.constructors) && - _.isEmpty(docSection.properties) && - _.isEmpty(docSection.events); - - const sortedTypes = _.sortBy(docSection.types, 'name'); - const typeDefs = _.map(sortedTypes, (customType, i) => { - return ( - - ); - }); - - const sortedProperties = _.sortBy(docSection.properties, 'name'); - const propertyDefs = _.map( - sortedProperties, - this._renderProperty.bind(this, sectionName, typeDefinitionByName), - ); - - const sortedMethods = _.sortBy(docSection.methods, 'name'); - const methodDefs = _.map(sortedMethods, method => { - return this._renderSignatureBlocks(method, sectionName, typeDefinitionByName); - }); - - const sortedFunctions = _.sortBy(docSection.functions, 'name'); - const functionDefs = _.map(sortedFunctions, func => { - return this._renderSignatureBlocks(func, sectionName, typeDefinitionByName); - }); - - const sortedEvents = _.sortBy(docSection.events, 'name'); - const eventDefs = _.map(sortedEvents, (event: Event, i: number) => { - return ( - - ); - }); - const headerStyle: React.CSSProperties = { - fontWeight: 100, - }; - return ( -
    -
    -
    - -
    - {this._renderNetworkBadgesIfExists(sectionName)} -
    - {docSection.comment && } - {!_.isEmpty(docSection.constructors) && ( -
    -

    Constructor

    - {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} -
    - )} - {!_.isEmpty(docSection.properties) && ( -
    -

    Properties

    -
    {propertyDefs}
    -
    - )} - {!_.isEmpty(docSection.methods) && ( -
    -

    Methods

    -
    {methodDefs}
    -
    - )} - {!_.isEmpty(docSection.functions) && ( -
    - {!isExportedFunctionSection &&

    Functions

    } -
    {functionDefs}
    -
    - )} - {!_.isUndefined(docSection.events) && - docSection.events.length > 0 && ( -
    -

    Events

    -
    {eventDefs}
    -
    - )} - {!_.isUndefined(docSection.externalExportToLink) && - this._renderExternalExports(docSection.externalExportToLink)} - {!_.isUndefined(typeDefs) && - typeDefs.length > 0 && ( -
    -
    {typeDefs}
    -
    - )} -
    - ); - } - private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode { - const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => { - return ( -
    - - {`import { `} - - {exportName} - - {` } from '${this.props.docsInfo.packageName}'`} - -
    - ); - }); - return
    {externalExports}
    ; - } - private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode { - if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) { - return null; - } - - const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[ - this.props.selectedVersion - ]; - const badges = _.map( - networkToAddressByContractName, - (addressByContractName: AddressByContractName, networkName: string) => { - const contractAddress = addressByContractName[sectionName]; - if (_.isUndefined(contractAddress)) { - return null; - } - const linkIfExists = sharedUtils.getEtherScanLinkIfExists( - contractAddress, - sharedConstants.NETWORK_ID_BY_NAME[networkName], - EtherscanLinkSuffixes.Address, - ); - return ( -
    - - - -
    - ); - }, - ); - return badges; - } - private _renderConstructors( - constructors: SolidityMethod[] | TypescriptMethod[], - sectionName: string, - typeDefinitionByName: TypeDefinitionByName, - ): React.ReactNode { - const constructorDefs = _.map(constructors, constructor => { - return this._renderSignatureBlocks(constructor, sectionName, typeDefinitionByName); - }); - return
    {constructorDefs}
    ; - } - private _renderProperty( - sectionName: string, - typeDefinitionByName: TypeDefinitionByName, - property: Property, - ): React.ReactNode { - return ( - - ); - } - private _renderSignatureBlocks( - method: SolidityMethod | TypescriptFunction | TypescriptMethod, - sectionName: string, - typeDefinitionByName: TypeDefinitionByName, - ): React.ReactNode { - return ( - - ); - } - private _onSidebarHover(_event: React.FormEvent): 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/docs_info.ts b/packages/react-docs/src/docs_info.ts index 549106c77..d75a1676c 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 { - const subsectionNameToLinks: ObjectMap = {}; + 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(docAgnosticFormat: DocAgnosticFormat): ObjectMap { + const sectionNameToLinks: ObjectMap = {}; + _.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 { - const sectionNameToLinks: ObjectMap = {}; - _.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/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 5b6076df6..f3ce5f5bf 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; - subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,7 +43,6 @@ export class NestedSidebarMenu extends React.Component { @@ -108,47 +106,11 @@ export class NestedSidebarMenu extends React.Component - {this._renderMenuItemSubsections(link.title)}
    ); }); 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 ( -
      - {_.map(links, link => { - const name = `${menuItemName}-${link.title}`; - return ( -
    • - - - {link.title} - - -
      • - ); - })} -
    - ); - } private _onMenuItemClick(): void { if (!_.isUndefined(this.props.onMenuItemClick)) { this.props.onMenuItemClick(); 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..aa132a80f --- /dev/null +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -0,0 +1,132 @@ +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; +} + +export interface OverviewContentState {} + +export class OverviewContent extends React.Component { + public render(): React.ReactNode { + return ( + + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} + + {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} + + {_.map(this.props.tutorials, tutorialInfo => ( + + + + ))} + + + + {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + )} + + {_.map(this.props.categoryToPackages, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + + + + + ); + } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( + + {category} + {_.map(pkgs, pkg => this._renderPackage(pkg))} + + ); + } + private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.link.title); + return ( + + + + + + + + {pkg.link.title} + + + + + + + + + + + + + {this.props.translate.get(Key.More, Deco.Cap)} + + + + + + + + + + + ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + + {text} + + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + + {text} + + ); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx index a14ab54f5..56657ab72 100644 --- a/packages/website/ts/components/sidebar_header.tsx +++ b/packages/website/ts/components/sidebar_header.tsx @@ -11,7 +11,7 @@ interface SidebarHeaderState {} export class SidebarHeader extends React.Component { public render(): React.ReactNode { return ( -
    +
    0x
    diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 80271fa63..fc13efec9 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -35,7 +35,6 @@ export interface TopBarProps { docsVersion?: string; availableDocVersions?: string[]; sectionNameToLinks?: ObjectMap; - subsectionNameToLinks?: ObjectMap; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -313,7 +312,6 @@ export class TopBar extends React.Component {
    {
    ({ +const mapStateToProps = (state: State, _ownProps: DocsHomeProps): ConnectedState => ({ translate: state.translate, screenWidth: state.screenWidth, }); @@ -25,4 +26,6 @@ const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(HomeComponent); +export const DocsHome: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)( + DocsHomeComponent, +); 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..7172a7c66 --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,176 @@ +import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } 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 { 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; + sectionNameToLinks: ObjectMap; +} + +export interface DevelopersPageState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; + isSidebarScrolling: boolean; +} + +export class DevelopersPage extends React.Component { + 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; + return ( + + + + + + + + + +
    + + + +
    +     + + + + +
    + {this.props.mainContent} +
    +     +     +     + ); + } + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } + } + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { + if (isHovering !== this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: isHovering, + }); + } + } + private _onSidebarScroll(_event: React.FormEvent): 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 c64751f65..f13866ee8 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,35 +1,27 @@ import { DocAgnosticFormat, + DocReference, DocsInfo, - Documentation, GeneratedDocJson, SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; 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 { 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', @@ -52,6 +44,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -79,37 +72,50 @@ export class DocPage extends React.Component { 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 = ( + + ); return (
    - - } - /> - } - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> + {_.isUndefined(this.state.docAgnosticFormat) ? ( + this._renderLoading() + ) : ( + + )} +
    + ); + } + private _renderLoading(): React.ReactNode { + return ( +
    +
    +
    + +
    +
    + Loading documentation... +
    +
    ); } @@ -145,10 +151,10 @@ export class DocPage extends React.Component { // 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..81cddf852 --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,359 @@ +import { ALink } 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 { 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 { 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`, + 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, + }, + }, +]; + +// TODO(fabio): Move this to it's own file +const CATEGORY_TO_PACKAGES: ObjectMap = { + [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, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap = { + '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 = ( + + ); + return ( + + ); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx deleted file mode 100644 index f8ac6a9f4..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 { - 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 = { - '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 ( - - - - - - - - - -
    - - - -
    -     - - - - -
    - - {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} - - {this._renderSectionDescription( - this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), - )} - - {_.map(TUTORIALS, tutorialInfo => ( - - - - ))} - - - - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), - )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), - )} - - - - -
    -     -     -     - ); - } - private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { - return ( - - {category} - {_.map(pkgs, pkg => this._renderPackage(pkg))} - - ); - } - private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.link.title); - return ( - - - - - - - - {pkg.link.title} - - - - - - - - - - - - - {this.props.translate.get(Key.More, Deco.Cap)} - - - - - - - - - - - ); - } - private _renderSectionTitle(text: string): React.ReactNode { - return ( - - {text} - - ); - } - private _renderSectionDescription(text: string): React.ReactNode { - return ( - - {text} - - ); - } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } - private _onSidebarScroll(_event: React.FormEvent): 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/types.ts b/packages/website/ts/types.ts index a3d248a9d..6c1eb67f0 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -624,4 +624,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 -- cgit v1.2.3 From 16386bc99e88d9e1915f073b101fb066d9fdaa66 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:55:00 +0200 Subject: Add Getting starter sidebar header --- packages/website/ts/containers/connect_documentation.ts | 3 +-- .../ts/containers/contract_wrappers_documentation.ts | 3 +-- .../website/ts/containers/ethereum_types_documentation.ts | 4 +--- .../website/ts/containers/json_schemas_documentation.ts | 6 +----- .../website/ts/containers/order_utils_documentation.ts | 3 +-- .../website/ts/containers/order_watcher_documentation.ts | 3 +-- .../website/ts/containers/sol_compiler_documentation.ts | 4 +--- packages/website/ts/containers/sol_cov_documentation.ts | 4 +--- .../website/ts/containers/subproviders_documentation.ts | 4 +--- .../website/ts/containers/web3_wrapper_documentation.ts | 11 +++++------ packages/website/ts/containers/zero_ex_js_documentation.ts | 14 ++++++++++---- 11 files changed, 24 insertions(+), 35 deletions(-) diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index a728abe2c..0eec9e39c 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index 1e1735846..003fd7f83 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 2b6d6e64d..4ccea65a8 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index f32a50ea9..c3f13d374 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -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: { diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index b54c30a1e..a3734dae0 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 59a018847..833380ac4 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 20f26ed1d..d01836c35 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index 27efd641e..c8dc5f473 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 28b2e9508..65e406991 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -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': { diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index dc9d23304..7ff11c3cc 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -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); 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): ConnectedDispatch => ({ -- cgit v1.2.3 From a86ca6257f71e0318741fbf7595363d50e74464c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:59:23 +0200 Subject: If sidebar menu item links to internal page, no longer open in new tab --- packages/website/ts/pages/documentation/docs_home.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 81cddf852..c5b4ed318 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -15,7 +15,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenInNewTab: true, }, }, { @@ -24,7 +23,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenInNewTab: true, }, }, { @@ -33,7 +31,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenInNewTab: true, }, }, { @@ -42,7 +39,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.UseSharedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenInNewTab: true, }, }, ]; @@ -56,7 +52,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '0x.js', to: WebsitePaths.ZeroExJs, - shouldOpenInNewTab: true, }, }, { @@ -74,7 +69,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/connect', to: WebsitePaths.Connect, - shouldOpenInNewTab: true, }, }, { @@ -83,7 +77,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/contract-wrappers', to: WebsitePaths.ContractWrappers, - shouldOpenInNewTab: true, }, }, { @@ -92,7 +85,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/json-schemas', to: WebsitePaths.JSONSchemas, - shouldOpenInNewTab: true, }, }, { @@ -101,7 +93,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/order-utils', to: WebsitePaths.OrderUtils, - shouldOpenInNewTab: true, }, }, { @@ -110,7 +101,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/order-watcher', to: WebsitePaths.OrderWatcher, - shouldOpenInNewTab: true, }, }, { @@ -139,7 +129,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: 'ethereum-types', to: WebsitePaths.EthereumTypes, - shouldOpenInNewTab: true, }, }, { @@ -148,7 +137,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/sol-compiler', to: WebsitePaths.SolCompiler, - shouldOpenInNewTab: true, }, }, { @@ -157,7 +145,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/sol-cov', to: WebsitePaths.SolCov, - shouldOpenInNewTab: true, }, }, { @@ -166,7 +153,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/subproviders', to: WebsitePaths.Subproviders, - shouldOpenInNewTab: true, }, }, { @@ -175,7 +161,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/web3-wrapper', to: WebsitePaths.Web3Wrapper, - shouldOpenInNewTab: true, }, }, ], -- cgit v1.2.3 From 36f202f7b439630e95fc28c6b928d605311676d2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 16:38:25 +0200 Subject: Improve loading --- .../website/ts/pages/documentation/doc_page.tsx | 43 +++++++++------------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index f13866ee8..58b6f076d 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -76,7 +76,9 @@ export class DocPage extends React.Component { const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); - const mainContent = ( + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( +
    {this._renderLoading()}
    + ) : ( { /> ); return ( -
    - {_.isUndefined(this.state.docAgnosticFormat) ? ( - this._renderLoading() - ) : ( - - )} -
    + ); } private _renderLoading(): React.ReactNode { return ( -
    -
    -
    - -
    -
    - Loading documentation... -
    +
    +
    + +
    +
    + Loading documentation...
    ); -- cgit v1.2.3 From 3ca943948184bf8d891dddb423e5b285d2463e7b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 17:42:41 +0200 Subject: Make all doc reference pages responsive --- packages/website/ts/containers/connect_documentation.ts | 4 +++- packages/website/ts/containers/contract_wrappers_documentation.ts | 4 +++- packages/website/ts/containers/ethereum_types_documentation.ts | 4 +++- packages/website/ts/containers/json_schemas_documentation.ts | 4 +++- packages/website/ts/containers/order_utils_documentation.ts | 4 +++- packages/website/ts/containers/order_watcher_documentation.ts | 4 +++- packages/website/ts/containers/smart_contracts_documentation.ts | 4 +++- packages/website/ts/containers/sol_compiler_documentation.ts | 4 +++- packages/website/ts/containers/sol_cov_documentation.ts | 4 +++- packages/website/ts/containers/subproviders_documentation.ts | 4 +++- packages/website/ts/containers/web3_wrapper_documentation.ts | 4 +++- 11 files changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 0eec9e39c..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 */ @@ -47,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index 003fd7f83..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 */ @@ -42,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -53,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 4ccea65a8..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 */ @@ -43,6 +43,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +55,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index c3f13d374..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 */ @@ -56,6 +56,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -67,6 +68,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index a3734dae0..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 */ @@ -42,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -53,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 833380ac4..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 */ @@ -42,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -53,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): 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): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index d01836c35..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 */ @@ -45,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -56,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index c8dc5f473..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 */ @@ -45,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -56,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 65e406991..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 */ @@ -45,6 +45,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -56,6 +57,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 7ff11c3cc..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 */ @@ -42,6 +42,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -53,6 +54,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ -- cgit v1.2.3 From a4604cb2f294f08318aa432b233571ae4e205fd5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 19:44:18 +0100 Subject: Pass down sidebar instead of sectionNameToLinks --- .../website/ts/components/documentation/docs_top_bar.tsx | 11 +++-------- packages/website/ts/pages/documentation/developers_page.tsx | 12 ++++-------- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++++- packages/website/ts/pages/documentation/docs_home.tsx | 7 +++++-- 4 files changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 9a2146f9c..41273eb30 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -13,7 +13,7 @@ import { Translate } from 'ts/utils/translate'; export interface DocsTopBarProps { location: Location; translate: Translate; - sectionNameToLinks?: ObjectMap; + sidebar?: React.ReactNode; } interface DocsTopBarState { @@ -143,13 +143,8 @@ export class DocsTopBar extends React.Component - - + + {this.props.sidebar} ); diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 7172a7c66..c924fb460 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,5 +1,4 @@ -import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -21,7 +20,7 @@ export interface DevelopersPageProps { screenWidth: ScreenWidths; dispatcher: Dispatcher; mainContent: React.ReactNode; - sectionNameToLinks: ObjectMap; + sidebar: React.ReactNode; } export interface DevelopersPageState { @@ -107,10 +106,7 @@ export class DevelopersPage extends React.Component - + {this.props.sidebar}
    @@ -124,7 +120,7 @@ export class DevelopersPage extends React.Component
    { sourceUrl={sourceUrl} /> ); + const sidebar = ( + + ); return ( { categoryToPackages={CATEGORY_TO_PACKAGES} /> ); + const sidebar = ( + + ); return ( Date: Fri, 12 Oct 2018 19:44:51 +0100 Subject: fix: Remove unnecessary onClick prop from NestedSidebar, since one can listen to container element onClick --- .../react-shared/src/components/nested_sidebar_menu.tsx | 13 +------------ packages/website/ts/components/top_bar/top_bar.tsx | 6 ++---- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index f3ce5f5bf..85206569c 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,7 +14,6 @@ export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; @@ -41,7 +40,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop.bind(_), shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { @@ -92,11 +90,7 @@ export class NestedSidebarMenu extends React.Component - + { return undefined; } return ( -
    +
    { } return ( -
    +
    ); -- cgit v1.2.3 From e0e011eb668a13c25cb5dc64256f89d07e9cbe15 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 15:10:25 +0100 Subject: Fix sidebar shifting onHover due to scrollbar width --- packages/website/ts/pages/documentation/developers_page.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index c924fb460..12c00b440 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -70,6 +70,7 @@ export class DevelopersPage extends React.Component - +
    {this.props.sidebar} - +
    Date: Sat, 13 Oct 2018 16:29:14 +0100 Subject: Implement new version dropdown and remove it from nestedTopBar --- .../src/components/nested_sidebar_menu.tsx | 16 ----- .../src/components/version_drop_down.tsx | 37 ---------- .../components/documentation/version_drop_down.tsx | 83 ++++++++++++++++++++++ packages/website/ts/components/ui/button.tsx | 4 +- .../website/ts/pages/documentation/doc_page.tsx | 46 +++++++++--- 5 files changed, 124 insertions(+), 62 deletions(-) delete mode 100644 packages/react-shared/src/components/version_drop_down.tsx create mode 100644 packages/website/ts/components/documentation/version_drop_down.tsx diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 85206569c..440db4b16 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,15 +8,11 @@ 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; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; shouldReformatMenuItemNames?: boolean; } @@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component{this._renderMenuItems(links)}
    ; } }); - const maxWidthWithScrollbar = 307; return (
    {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( -
    - -
    - )}
    {navigation}
    ); 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 { - public render(): React.ReactNode { - return ( -
    - -
    - ); - } - private _renderDropDownItems(): React.ReactNode[] { - const items = _.map(this.props.versions, version => { - return ( - - v{version} - - ); - }); - return items; - } - private _updateSelectedVersion(event: React.ChangeEvent): void { - this.props.onVersionSelected(event.target.value); - } -} 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..c7b8667d7 --- /dev/null +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -0,0 +1,83 @@ +import { ALink, colors, Link } 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'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +interface ActiveNodeProps { + className?: string; + selectedVersion: string; +} + +const PlainActiveNode: React.StatelessComponent = ({ className, selectedVersion }) => ( + + + + v {selectedVersion} + + + + + + +); + +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 { + public render(): React.ReactNode { + const activeNode = ; + return ( + + ); + } + private _renderDropdownMenu(): React.ReactNode { + const items = _.map(this.props.versions, version => { + const isSelected = version === this.props.selectedVersion; + return ( + + + + ); + }); + const dropdownMenu = {items}; + return dropdownMenu; + } + private _onClick(selectedVersion: string): void { + this.props.onVersionSelected(selectedVersion); + } +} diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 75ba7bcff..ccaadc800 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -10,6 +10,7 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; @@ -29,7 +30,7 @@ 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}; @@ -52,6 +53,7 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index bc0dc7b6a..ca2652c76 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,12 +6,15 @@ import { SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; -import { NestedSidebarMenu } from '@0xproject/react-shared'; +import { colors, 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 semverSort = require('semver-sort'); +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, ScreenWidths } from 'ts/types'; @@ -89,7 +92,7 @@ export class DocPage extends React.Component { /> ); const sidebar = ( - + ); return ( { /> ); } + private _renderSidebarHeader(): React.ReactNode { + return ( + + + + + 0x.js + + + + + + + + + ); + } private _renderLoading(): React.ReactNode { return ( -
    -
    + + -
    -
    + + Loading documentation... -
    -
    +     + ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { -- cgit v1.2.3 From 1d30a2f91dfc23242602ed0da011e6b4edd44f86 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 16:29:24 +0100 Subject: Remove doc menus from main topBar --- packages/website/ts/components/top_bar/top_bar.tsx | 69 ++-------------------- 1 file changed, 4 insertions(+), 65 deletions(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 55a2a3954..f7043dca2 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -72,20 +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, -}; - const DEFAULT_HEIGHT = 68; const EXPANDED_HEIGHT = 75; @@ -245,7 +231,6 @@ export class TopBar extends React.Component { onRequestChange={this._onMenuButtonClick.bind(this)} >
    - {this._renderDocsMenu()} {this._renderWiki()}
    {this.props.translate.get(Key.Website, Deco.Cap)} @@ -253,22 +238,12 @@ export class TopBar extends React.Component { {this.props.translate.get(Key.Home, Deco.Cap)} + + {this.props.translate.get(Key.Documentation, Deco.Cap)} + {this.props.translate.get(Key.Wiki, Deco.Cap)} - {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => { - if (!this._doesUrlInclude(websitePath)) { - return ( - - - {this.props.translate.get(key, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - - - ); - } - return null; - })} {!this._isViewingPortal() && ( @@ -297,30 +272,6 @@ export class TopBar extends React.Component { ); } - 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 ( -
    - -
    - ); - } private _renderWiki(): React.ReactNode { if (!this._isViewingWiki()) { return undefined; @@ -344,9 +295,6 @@ export class TopBar extends React.Component { 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); } @@ -357,15 +305,6 @@ export class TopBar extends React.Component { 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._isViewingWiki() || this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count -- cgit v1.2.3 From 2b2f5d6169b906e58691ad722099f8b677ff9080 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 16:32:26 +0100 Subject: Fix: Make width variable --- packages/website/ts/components/documentation/version_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx index c7b8667d7..8374e79e2 100644 --- a/packages/website/ts/components/documentation/version_drop_down.tsx +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -16,7 +16,7 @@ interface ActiveNodeProps { } const PlainActiveNode: React.StatelessComponent = ({ className, selectedVersion }) => ( - + v {selectedVersion} -- cgit v1.2.3 From 6f77b90836be13d5b7c425a1ac4e8c9f46bd8790 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 16:32:36 +0100 Subject: Chore: remove unused imports --- .../website/ts/components/documentation/version_drop_down.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx index 8374e79e2..092572330 100644 --- a/packages/website/ts/components/documentation/version_drop_down.tsx +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -1,4 +1,4 @@ -import { ALink, colors, Link } from '@0xproject/react-shared'; +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Button } from 'ts/components/ui/button'; @@ -6,9 +6,6 @@ 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'; -import { Deco, Key, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { Translate } from 'ts/utils/translate'; interface ActiveNodeProps { className?: string; @@ -51,8 +48,8 @@ export class VersionDropDown extends React.Component ); -- cgit v1.2.3 From 11941b08b686d13f02c0d2c1bf6d58692dd701db Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 17:09:04 +0100 Subject: Fix sidebar top so long titles display correctly --- packages/website/ts/pages/documentation/doc_page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index ca2652c76..101040c2c 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -108,19 +108,19 @@ export class DocPage extends React.Component { private _renderSidebarHeader(): React.ReactNode { return ( - - + + - 0x.js + {this.props.docsInfo.displayName} - +
    - +
    Date: Sat, 13 Oct 2018 17:09:46 +0100 Subject: fix: Dropdown component so that re-clicking the activeNode when dropdown is open, closes it --- packages/website/ts/components/ui/drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 9044b218d..4138b3fe5 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -100,7 +100,7 @@ export class DropDown extends React.Component { private _onActiveNodeClick(event: React.FormEvent): void { if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ - isDropDownOpen: true, + isDropDownOpen: !this.state.isDropDownOpen, anchorEl: event.currentTarget, }); } -- cgit v1.2.3 From 9b1f765ced7cabe21aa9fe8ef1cd3d08dcf96202 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 17:11:47 +0100 Subject: chore: only show sidebar once docs have loaded --- packages/website/ts/pages/documentation/doc_page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 101040c2c..19e76a51b 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -91,7 +91,9 @@ export class DocPage extends React.Component { sourceUrl={sourceUrl} /> ); - const sidebar = ( + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( +
    + ) : ( ); return ( -- cgit v1.2.3 From 3fbf9c4285c1caba2340298fadcaf03a5632fe7a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:22:00 +0100 Subject: chore: round border of code snippets --- packages/website/less/all.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/website/less/all.less b/packages/website/less/all.less index c62db0d20..c8dd16fd3 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -83,6 +83,7 @@ a { code { border: 1px solid #e3eefe; + border-radius: 4px; font-family: 'Roboto Mono'; background-color: #f2f6ff !important; // lightBlue } -- cgit v1.2.3 From bd763ebb3442f11b22f68f4c4c7804cbbd2b09a3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:22:22 +0100 Subject: chore: fix key issue --- packages/website/ts/components/documentation/version_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx index 092572330..ec1c99f7b 100644 --- a/packages/website/ts/components/documentation/version_drop_down.tsx +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -58,7 +58,7 @@ export class VersionDropDown extends React.Component { const isSelected = version === this.props.selectedVersion; return ( - +
    )} +
    ); } diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index a83881b67..dabdfff9b 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -27,7 +28,7 @@ const styles: Styles = { cursor: 'pointer', }, h1: { - fontSize: '1.8em', + fontSize: '30px', }, h2: { fontSize: '1.5em', @@ -63,7 +64,7 @@ export class AnchorTitle extends React.Component -
    +
    {this.props.title}
    ) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; +} + +export const Container: React.StatelessComponent = props => { + const { children, className, Tag, isHidden, id, onClick, ...style } = props; + const visibility = isHidden ? 'hidden' : undefined; + return ( + + {children} + + ); +}; + +Container.defaultProps = { + Tag: 'div', +}; + +Container.displayName = 'Container'; 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..519638446 --- /dev/null +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -0,0 +1,14 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { colors } from '../utils/colors'; + +export interface MarkdownParagraphBlockProps {} + +export interface MarkdownParagraphBlockState {} + +export class MarkdownParagraphBlock extends React.Component { + public render(): React.ReactNode { + return {this.props.children}; + } +} diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index e84d2b078..3dc3efe12 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,15 +8,18 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Container } from './container'; 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; + shouldReformatTitle?: boolean; } interface DefaultMarkdownSectionProps { @@ -32,6 +35,7 @@ export interface MarkdownSectionState { export class MarkdownSection extends React.Component { public static defaultProps: Partial = { headerSize: HeaderSizes.H3, + shouldReformatTitle: true, }; constructor(props: MarkdownSectionProps) { super(props); @@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component -
    +
    - + @@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component )}
    -
    -
    + +
    ); diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index e33b09f19..2ab9b393e 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -5,6 +5,7 @@ export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; +export { Container } from './components/container'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; 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/react-shared/tsconfig.json b/packages/react-shared/tsconfig.json index 5abe0ab4e..9fd1b04cf 100644 --- a/packages/react-shared/tsconfig.json +++ b/packages/react-shared/tsconfig.json @@ -4,6 +4,7 @@ "outDir": "lib", "rootDir": "src", "jsx": "react", + "strictNullChecks": false, "baseUrl": ".", "paths": { "*": ["node_modules/@types/*", "*"] -- cgit v1.2.3 From bf9af95654503df94b5b32af74a4cbc8bee7f2ec Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:57:16 +0100 Subject: chore: improve colors --- packages/react-docs/src/components/comment.tsx | 4 ++-- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 = (props: CommentProps) => { return ( -
    +
    ); diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 853b69976..71b9b4d32 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -44,7 +44,7 @@ export class NestedSidebarMenu extends React.Component +
    {finalSectionName.toUpperCase()}
    -- cgit v1.2.3 From b3a323efa1fc5d942c2f7052f585acc248394f44 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:20:30 +0100 Subject: fix: Nested a tag warning in console by not rendering a tags within type definition popovers --- packages/react-docs/src/components/type.tsx | 62 ++++++++++++---------- .../react-docs/src/components/type_definition.tsx | 1 + .../react-shared/src/components/anchor_title.tsx | 34 +++++++----- 3 files changed, 54 insertions(+), 43 deletions(-) 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 = (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 ? ( + {typeName} + ) : ( {typeName} @@ -218,39 +220,41 @@ export const Type: React.SFC = (props: TypeProps): any => { ? props.type.name : `${props.docsInfo.typeSectionName}-${typeName}`; typeName = ( - + {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( {typeName} ) : ( - - {typeName} - - - - + + {typeName} + + + + + )} - + ); } return ( diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 9a3e50a1b..e1c4f1f2b 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 
    diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index dabdfff9b..0bdf61d44 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -15,6 +15,7 @@ export interface AnchorTitleProps {
     id: string;
     headerSize: HeaderSizes;
     shouldShowAnchor: boolean;
+    isDisabled?: boolean;
 }
 
 export interface AnchorTitleState {
@@ -40,6 +41,9 @@ const styles: Styles = {
 };
 
 export class AnchorTitle extends React.Component {
+    public static defaultProps: Partial = {
+        isDisabled: false,
+    };
     constructor(props: AnchorTitleProps) {
         super(props);
         this.state = {
@@ -67,20 +71,22 @@ export class AnchorTitle extends React.Component
                     {this.props.title}
    - - - + {!this.props.isDisabled && ( + + + + )}
    ); } -- cgit v1.2.3 From 60208091a49fcd41514a60d5735bc736edf81275 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:35:38 +0100 Subject: chore: fix missed class rename --- packages/website/less/all.less | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/website/less/all.less b/packages/website/less/all.less index c8dd16fd3..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; -- cgit v1.2.3 From 6ada38248ec4d44605465f41cfe5e0801d26aa32 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:49:47 +0100 Subject: chore: improve rendering of sidebar top section on mobile --- packages/website/ts/components/documentation/docs_top_bar.tsx | 2 +- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 41273eb30..95adc417d 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -143,7 +143,7 @@ export class DocsTopBar extends React.Component - + {this.props.sidebar} diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 19e76a51b..65d9b68a9 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -112,7 +112,11 @@ export class DocPage extends React.Component { - + {this.props.docsInfo.displayName} -- cgit v1.2.3 From a5e435d8317c7532caa4eb0fcf5bb49cf42c87c7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:58:09 +0100 Subject: fix: menu item overflow issue --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 71b9b4d32..1ad61fcca 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -30,6 +30,9 @@ const styles: Styles = { fontSize: 14, lineHeight: 2, padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }; -- cgit v1.2.3 From c9a0c7872de22cf33f1cb82cf504d0df6923d0e8 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 16:48:39 +0100 Subject: Chore: Only render one sidebar at a time --- packages/website/ts/components/documentation/docs_top_bar.tsx | 5 +++-- packages/website/ts/pages/documentation/developers_page.tsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 95adc417d..28a205d7a 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -6,12 +6,13 @@ 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, WebsitePaths } 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; } @@ -105,7 +106,7 @@ export class DocsTopBar extends React.Component - {this._renderDrawer()} + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} ); } diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 12c00b440..042d80c61 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -115,7 +115,7 @@ export class DevelopersPage extends React.Component - {this.props.sidebar} + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
    @@ -128,6 +128,7 @@ export class DevelopersPage extends React.Component -- cgit v1.2.3 From 96d145f54ff559fe6a46626e73c67e716d6927cd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 16:49:46 +0100 Subject: chore: Remove unused state --- packages/react-docs/src/components/doc_reference.tsx | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx index c70b99b19..da05b04f8 100644 --- a/packages/react-docs/src/components/doc_reference.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -50,17 +50,9 @@ export interface DocReferenceProps { docAgnosticFormat?: DocAgnosticFormat; } -export interface DocReferenceState { - isHoveringSidebar: boolean; -} +export interface DocReferenceState {} export class DocReference extends React.Component { - constructor(props: DocReferenceProps) { - super(props); - this.state = { - isHoveringSidebar: false, - }; - } public componentDidMount(): void { window.addEventListener('hashchange', this._onHashChanged.bind(this), false); } @@ -329,16 +321,6 @@ export class DocReference extends React.Component ); } - private _onSidebarHover(_event: React.FormEvent): 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); -- cgit v1.2.3 From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 17:35:40 +0100 Subject: feat: highlighted sidebar as you scroll on doc reference pages --- .../react-docs/src/components/doc_reference.tsx | 8 ++-- .../react-docs/src/components/signature_block.tsx | 2 +- .../src/components/markdown_section.tsx | 20 +++++----- .../src/components/nested_sidebar_menu.tsx | 46 ++++++++++++++++++++-- .../ts/pages/documentation/developers_page.tsx | 2 +- 5 files changed, 58 insertions(+), 20 deletions(-) diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx index da05b04f8..3a909db7e 100644 --- a/packages/react-docs/src/components/doc_reference.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -97,15 +97,15 @@ export class DocReference extends React.Component ); } @@ -196,7 +196,9 @@ export class DocReference extends React.Component - {!isExportedFunctionSection &&

    Functions

    } + {!isExportedFunctionSection && ( +
    Functions
    + )}
    {functionDefs}
    )} 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 diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 3dc3efe12..9f5855d16 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -20,6 +20,7 @@ export interface MarkdownSectionProps { headerSize?: HeaderSizes; githubLink?: string; shouldReformatTitle?: boolean; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component - - + +
    @@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component - +
    ); diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 1ad61fcca..87622310a 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps { sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; + parentName?: string; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId: string; +} const styles: Styles = { menuItemWithHeaders: { @@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component = { shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, + parentName: 'default', }; + private _urlIntervalCheckId: number; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = { + scrolledToId: '', + }; + } + 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); @@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component -
    +
    {finalSectionName.toUpperCase()}
    {this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component {this.props.sidebarHeader} -
    {navigation}
    +
    {navigation}
    ); } private _renderMenuItems(links: ALink[]): React.ReactNode[] { + const scrolledToId = this.state.scrolledToId; const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(links, link => { + const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; return (
    - + Date: Mon, 15 Oct 2018 17:43:45 +0100 Subject: chore: replace Github with Wiki in topBar and refactor so can display internal & external links --- .../ts/components/documentation/docs_top_bar.tsx | 36 +++++++++++++--------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 28a205d7a..2c37f8387 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -22,11 +22,10 @@ interface DocsTopBarState { } interface MenuItemInfo { - title: string; - url: string; iconUrl: string; fontColor: string; fontWeight?: string; + link: ALink; } export class DocsTopBar extends React.Component { @@ -46,20 +45,28 @@ export class DocsTopBar extends React.Component { return ( - @@ -127,11 +133,11 @@ export class DocsTopBar extends React.Component - {menuItemInfo.title} + {menuItemInfo.link.title} - + ); }); return menuItems; -- cgit v1.2.3 From 8b8c9582035f4722d65d5ef207daf4e9b6af81cd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 17:46:42 +0100 Subject: chore: fix padding issue --- packages/website/ts/components/documentation/overview_content.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx index aa132a80f..6999e039a 100644 --- a/packages/website/ts/components/documentation/overview_content.tsx +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -117,9 +117,11 @@ export class OverviewContent extends React.Component - {text} - + + + {text} + + ); } private _renderSectionDescription(text: string): React.ReactNode { -- cgit v1.2.3 From fb0e0473de29bdffc6a1fce2587704146601dc66 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 22:18:44 +0100 Subject: chore: move wiki to Developers section --- packages/website/ts/components/sidebar_header.tsx | 35 ----- packages/website/ts/containers/wiki.ts | 3 + packages/website/ts/pages/wiki/wiki.tsx | 176 ++++++++-------------- 3 files changed, 65 insertions(+), 149 deletions(-) delete mode 100644 packages/website/ts/components/sidebar_header.tsx diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx deleted file mode 100644 index 56657ab72..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 { - public render(): React.ReactNode { - return ( -
    -
    -
    0x
    -
    - docs -
    -
    -
    - | -
    -
    -
    - -
    -
    - {this.props.title} -
    -
    -
    - ); - } -} 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): ConnectedDispatch => ({ diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 70f54aceb..01cbc4e4d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -5,25 +5,22 @@ import { HeaderSizes, 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 { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, 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 +28,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -38,24 +36,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 { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -83,84 +63,64 @@ export class Wiki extends React.Component { 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 = ; + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( +
    {this._renderLoading()}
    + ) : ( +
    + {this._renderWikiArticles()} +
    + ); + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( +
    + ) : ( + + ); return ( -
    - - - {_.isUndefined(this.state.articlesBySection) ? ( -
    -
    -
    - -
    -
    - Loading wiki... -
    -
    -
    - ) : ( -
    -
    + ); + } + private _renderSidebarHeader(): React.ReactNode { + return ( + + + + -
    -
    - -
    -
    -
    -
    -
    -
    - {this._renderWikiArticles()} -
    -
    -
    -
    -
    - )} -
    + Wiki + + + + + + ); + } + private _renderLoading(): React.ReactNode { + return ( + + + + + + Loading wiki... + + ); } private _renderWikiArticles(): React.ReactNode { @@ -180,22 +140,10 @@ export class Wiki extends React.Component { headerSize={HeaderSizes.H2} githubLink={githubLink} /> -
    -
    - See a way to improve this article? -
    -
    - -
    -
    ); }); - return ( -
    - {renderedArticles} -
    - ); + return
    {renderedArticles}
    ; } private async _fetchArticlesBySectionAsync(): Promise { try { -- cgit v1.2.3 From 6ff35172d6ad865e353ab593ec23b788d5640f6c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 14:35:10 +0100 Subject: Replace sandbox with wiki in developer popover --- .../website/ts/components/dropdowns/developers_drop_down.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 2bdcb8a4c..1db1e89b8 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -43,6 +43,10 @@ const popularDocsToLinkInfos: ALink[] = [ }, ]; const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, { title: Key.Github, to: constants.URL_GITHUB_ORG, @@ -53,11 +57,6 @@ const usefulLinksToLinkInfo: ALink[] = [ to: WebsitePaths.Whitepaper, shouldOpenInNewTab: true, }, - { - title: Key.Sandbox, - to: constants.URL_SANDBOX, - shouldOpenInNewTab: true, - }, ]; interface DevelopersDropDownProps { -- cgit v1.2.3 From ad235912d7c7fc618d7adf6c8568d723da812d66 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 14:35:33 +0100 Subject: chore: Replace FAQ with Developer home in footer --- packages/website/ts/components/footer.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 @@ -39,6 +39,10 @@ export class Footer extends React.Component { public render(): React.ReactNode { const sectionNameToLinks: ObjectMap = { [Key.Documentation]: [ + { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, { title: '0x.js', to: WebsitePaths.ZeroExJs, @@ -60,10 +64,6 @@ export class Footer extends React.Component { 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]: [ { -- cgit v1.2.3 From 13f8801e08bc88c584cbc8cd9aba1e78773d9a8c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 14:35:55 +0100 Subject: chore: remove wiki from main website topBar --- packages/website/ts/components/top_bar/top_bar.tsx | 33 +--------------------- 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index f7043dca2..eb1854f50 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -143,12 +143,6 @@ export class TopBar extends React.Component { translate={this.props.translate} menuIconStyle={menuIconStyle} /> - { onRequestChange={this._onMenuButtonClick.bind(this)} >
    - {this._renderWiki()}
    {this.props.translate.get(Key.Website, Deco.Cap)}
    @@ -241,9 +234,6 @@ export class TopBar extends React.Component { {this.props.translate.get(Key.Documentation, Deco.Cap)} - - {this.props.translate.get(Key.Wiki, Deco.Cap)} - {!this._isViewingPortal() && ( @@ -272,21 +262,6 @@ export class TopBar extends React.Component { ); } - private _renderWiki(): React.ReactNode { - if (!this._isViewingWiki()) { - return undefined; - } - - return ( -
    - -
    - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -298,13 +273,7 @@ export class TopBar extends React.Component { 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 { - return this._isViewingWiki() || this._isViewingFAQ() || this._isViewingPortal(); + return this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count -- cgit v1.2.3 From be45a3085196a652fc21856b43014bec9ba07f05 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 14:36:26 +0100 Subject: chore: change landing "build on 0x" to link to developer home, not 0x.js docs --- packages/website/ts/pages/landing/landing.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} @@ -598,7 +598,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
    - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} -- cgit v1.2.3 From f35156517d8fe63935f34cec880b144aae3f55aa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 15:35:56 +0100 Subject: chore: get menu onHover darken back --- .../src/components/nested_sidebar_menu.tsx | 64 +++++++++------------- 1 file changed, 27 insertions(+), 37 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 87622310a..70062182b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { Link } from './link'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; parentName?: string; } @@ -22,13 +21,12 @@ export interface NestedSidebarMenuState { } const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, @@ -41,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, parentName: 'default', }; @@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - return ( -
    -
    - {finalSectionName.toUpperCase()} -
    - {this._renderMenuItems(links)} + // tslint:disable-next-line:no-unused-variable + return ( +
    +
    + {finalSectionName.toUpperCase()}
    - ); - } else { - return
    {this._renderMenuItems(links)}
    ; - } + {this._renderMenuItems(links)} +
    + ); }); return (
    @@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component { - const isScrolledTo = link.to === scrolledToId; 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 (
    - + Date: Tue, 16 Oct 2018 15:41:58 +0100 Subject: chore: remove unused imports --- packages/website/ts/components/documentation/docs_top_bar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 2c37f8387..0806c8da2 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -1,5 +1,4 @@ -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'; -- cgit v1.2.3 From afe618175728fd1341fd7c18d9f68363019d64e1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 15:53:24 +0100 Subject: chore: Implement newest topBar --- .../website/public/images/developers/chat_icon.svg | 5 -- .../public/images/developers/forum_icon.svg | 5 -- .../public/images/developers/github_icon.svg | 4 - .../ts/components/documentation/docs_top_bar.tsx | 88 ++++++---------------- 4 files changed, 25 insertions(+), 77 deletions(-) delete mode 100644 packages/website/public/images/developers/chat_icon.svg delete mode 100644 packages/website/public/images/developers/forum_icon.svg delete mode 100644 packages/website/public/images/developers/github_icon.svg 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 @@ - - - - - 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 @@ - - - - - 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 @@ - - - - diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 0806c8da2..a4bc3967b 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -20,13 +20,6 @@ interface DocsTopBarState { isDrawerOpen: boolean; } -interface MenuItemInfo { - iconUrl: string; - fontColor: string; - fontWeight?: string; - link: ALink; -} - export class DocsTopBar extends React.Component { constructor(props: DocsTopBarProps) { super(props); @@ -42,56 +35,32 @@ export class DocsTopBar extends React.Component - - - - - - - 0xproject.com - - - - - - + + - {this._renderMenuItems(menuItemInfos)} + {this._renderMenuItems(menuItemLinks)} @@ -116,25 +85,18 @@ export class DocsTopBar extends React.Component ); } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { return ( - - - - - {menuItemInfo.link.title} - - + + + {menuItemInfo.title} + ); -- cgit v1.2.3 From 6ad98420a033a5737e962adf6863b0ed1a682b5b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 16:12:26 +0100 Subject: style: improve menu & logo alignment --- packages/website/ts/components/documentation/docs_top_bar.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index a4bc3967b..c0bd4fb19 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -57,7 +57,10 @@ export class DocsTopBar extends React.Component - + {this._renderMenuItems(menuItemLinks)} @@ -80,7 +83,7 @@ export class DocsTopBar extends React.Component - + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} ); -- cgit v1.2.3 From bf51728466956837bbe669dfa0883c4d6611a628 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 16:35:55 +0100 Subject: chore: simplify --- packages/react-docs/src/components/type_definition.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index e1c4f1f2b..3b64247f2 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -124,7 +124,7 @@ export class TypeDefinition extends React.Component 
    -- 
cgit v1.2.3


From 05f7b733076b566e17883695e85874db040f5a54 Mon Sep 17 00:00:00 2001
From: Fabio Berger 
Date: Tue, 16 Oct 2018 16:36:06 +0100
Subject: chore: convert to stateless component

---
 .../react-shared/src/components/markdown_paragraph_block.tsx   | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx
index 519638446..eeaef8571 100644
--- a/packages/react-shared/src/components/markdown_paragraph_block.tsx
+++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx
@@ -5,10 +5,6 @@ import { colors } from '../utils/colors';
 
 export interface MarkdownParagraphBlockProps {}
 
-export interface MarkdownParagraphBlockState {}
-
-export class MarkdownParagraphBlock extends React.Component {
-    public render(): React.ReactNode {
-        return {this.props.children};
-    }
-}
+export const MarkdownParagraphBlock: React.StatelessComponent = ({ children }) => {
+    return {children};
+};
-- 
cgit v1.2.3


From 17fb4d5b5703df2a86be0c2f1210c1327debc033 Mon Sep 17 00:00:00 2001
From: Fabio Berger 
Date: Tue, 16 Oct 2018 16:38:05 +0100
Subject: chore: Remove unused prop

---
 packages/react-docs/src/components/doc_reference.tsx      | 1 -
 packages/react-shared/src/components/markdown_section.tsx | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 3a909db7e..83cc00bab 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -104,7 +104,6 @@ export class DocReference extends React.Component
             );
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 9f5855d16..d5de324c3 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -19,7 +19,6 @@ export interface MarkdownSectionProps {
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
-    shouldReformatTitle?: boolean;
     alternativeSectionTitle?: string;
 }
 
@@ -36,7 +35,6 @@ export interface MarkdownSectionState {
 export class MarkdownSection extends React.Component {
     public static defaultProps: Partial = {
         headerSize: HeaderSizes.H3,
-        shouldReformatTitle: true,
     };
     constructor(props: MarkdownSectionProps) {
         super(props);
@@ -48,9 +46,7 @@ export class MarkdownSection extends React.Component
Date: Tue, 16 Oct 2018 16:38:59 +0100
Subject: chore: remove unused prop

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 70062182b..34f3eb276 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -13,7 +13,6 @@ export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap;
     sidebarHeader?: React.ReactNode;
     shouldReformatMenuItemNames?: boolean;
-    parentName?: string;
 }
 
 export interface NestedSidebarMenuState {
@@ -40,7 +39,6 @@ const styles: Styles = {
 export class NestedSidebarMenu extends React.Component {
     public static defaultProps: Partial = {
         shouldReformatMenuItemNames: true,
-        parentName: 'default',
     };
     private _urlIntervalCheckId: number;
     constructor(props: NestedSidebarMenuProps) {
-- 
cgit v1.2.3


From 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd Mon Sep 17 00:00:00 2001
From: Fabio Berger 
Date: Tue, 16 Oct 2018 16:43:43 +0100
Subject: chore: don't use Container in react-shared, react-docs yet

---
 .../react-docs/src/components/doc_reference.tsx    | 15 +++---
 packages/react-shared/src/components/container.tsx | 55 ----------------------
 .../src/components/markdown_section.tsx            | 14 ++++--
 packages/react-shared/src/index.ts                 |  1 -
 packages/react-shared/tsconfig.json                |  1 -
 5 files changed, 18 insertions(+), 68 deletions(-)
 delete mode 100644 packages/react-shared/src/components/container.tsx

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 83cc00bab..5fdcdd2d9 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -1,7 +1,6 @@
 import {
     colors,
     constants as sharedConstants,
-    Container,
     EtherscanLinkSuffixes,
     HeaderSizes,
     Link,
@@ -216,12 +215,14 @@ export class DocReference extends React.Component{typeDefs}
    )} -
    ); diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx deleted file mode 100644 index f2ae68b70..000000000 --- a/packages/react-shared/src/components/container.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -type StringOrNum = string | number; - -export type ContainerTag = 'div' | 'span'; - -export interface ContainerProps { - marginTop?: StringOrNum; - marginBottom?: StringOrNum; - marginRight?: StringOrNum; - marginLeft?: StringOrNum; - padding?: StringOrNum; - paddingTop?: StringOrNum; - paddingBottom?: StringOrNum; - paddingRight?: StringOrNum; - paddingLeft?: StringOrNum; - backgroundColor?: string; - borderRadius?: StringOrNum; - maxWidth?: StringOrNum; - maxHeight?: StringOrNum; - width?: StringOrNum; - height?: StringOrNum; - minWidth?: StringOrNum; - minHeight?: StringOrNum; - isHidden?: boolean; - className?: string; - position?: 'absolute' | 'fixed' | 'relative' | 'unset'; - display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; - top?: string; - left?: string; - right?: string; - bottom?: string; - zIndex?: number; - Tag?: ContainerTag; - cursor?: string; - id?: string; - onClick?: (event: React.MouseEvent) => void; - overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; -} - -export const Container: React.StatelessComponent = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; - const visibility = isHidden ? 'hidden' : undefined; - return ( - - {children} - - ); -}; - -Container.defaultProps = { - Tag: 'div', -}; - -Container.displayName = 'Container'; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index d5de324c3..e6a7d80d5 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,7 +8,6 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; -import { Container } from './container'; import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; @@ -57,7 +56,7 @@ export class MarkdownSection extends React.Component - +
    )}
    - +
    - +
    ); diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 2ab9b393e..e33b09f19 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -5,7 +5,6 @@ export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; -export { Container } from './components/container'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; diff --git a/packages/react-shared/tsconfig.json b/packages/react-shared/tsconfig.json index 9fd1b04cf..5abe0ab4e 100644 --- a/packages/react-shared/tsconfig.json +++ b/packages/react-shared/tsconfig.json @@ -4,7 +4,6 @@ "outDir": "lib", "rootDir": "src", "jsx": "react", - "strictNullChecks": false, "baseUrl": ".", "paths": { "*": ["node_modules/@types/*", "*"] -- cgit v1.2.3 From 9bae3e51d96ee3fc2c9652a373df155421228609 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 17:09:17 +0100 Subject: chore: initalize _urlIntervalCheckId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 34f3eb276..fc5ab95fa 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -40,7 +40,7 @@ export class NestedSidebarMenu extends React.Component = { shouldReformatMenuItemNames: true, }; - private _urlIntervalCheckId: number; + private _urlIntervalCheckId: number | undefined = undefined; constructor(props: NestedSidebarMenuProps) { super(props); this.state = { -- cgit v1.2.3 From 2305109170671b06c6d60ac04a16a9d57a8a9c11 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 17:42:58 +0100 Subject: chore: fix linter --- packages/website/ts/components/top_bar/top_bar.tsx | 2 +- packages/website/ts/pages/wiki/wiki.tsx | 10 ---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index eb1854f50..8b573335f 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'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 01cbc4e4d..4b101e45d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -187,16 +187,6 @@ export class Wiki extends React.Component { } return sectionNameToLinks; } - private _onSidebarHover(_event: React.FormEvent): 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); -- cgit v1.2.3 From fb7d0b9d0be47a191314a98b9bb23a86b1b77174 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 22:09:04 +0100 Subject: chore: Fix logo on mobile topBar --- packages/website/ts/components/documentation/docs_top_bar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index c0bd4fb19..d6e0c124d 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -58,7 +58,7 @@ export class DocsTopBar extends React.Component @@ -67,7 +67,7 @@ export class DocsTopBar extends React.Component - + -- cgit v1.2.3 From 7f2636fd05cdab3addd58f340bf25d93c3a59d00 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 22:34:00 +0100 Subject: chore: Add missing responsive classes --- packages/website/public/css/basscss_responsive_custom.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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; + } } -- cgit v1.2.3 From fdefa5952cb6cb6e1dce42e862dbc676690cdcbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 23:25:51 +0100 Subject: chore: componentize the sidebar header --- .../ts/components/documentation/sidebar_header.tsx | 57 ++++++++++++++++++++++ .../website/ts/pages/documentation/doc_page.tsx | 39 ++++----------- packages/website/ts/pages/wiki/wiki.tsx | 29 ++--------- 3 files changed, 70 insertions(+), 55 deletions(-) create mode 100644 packages/website/ts/components/documentation/sidebar_header.tsx 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 = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + + + + + {title} + + + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( +
    + +
    + )} +     + + + ); +}; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 65d9b68a9..a2babeda2 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,15 +6,14 @@ import { SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +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 semverSort = require('semver-sort'); -import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, ScreenWidths } from 'ts/types'; @@ -109,33 +108,13 @@ export class DocPage extends React.Component { } private _renderSidebarHeader(): React.ReactNode { return ( - - - - - {this.props.docsInfo.displayName} - - -
    - -
    -     - - + ); } private _renderLoading(): React.ReactNode { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 4b101e45d..e7754fd9d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,6 +1,5 @@ import { ALink, - colors, constants as sharedConstants, HeaderSizes, MarkdownSection, @@ -11,11 +10,11 @@ import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection, ScreenWidths } 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'; @@ -88,28 +87,8 @@ export class Wiki extends React.Component { ); } private _renderSidebarHeader(): React.ReactNode { - return ( - - - - - Wiki - - - - - - ); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ; } private _renderLoading(): React.ReactNode { return ( -- cgit v1.2.3 From 18c31a3bc045d9e3ccc1e17573f879c2d49cecfe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 00:37:56 +0100 Subject: chore: Add topBar menu items to mobile drawer --- .../ts/components/documentation/docs_top_bar.tsx | 26 ++--------------- packages/website/ts/components/ui/button.tsx | 3 ++ .../website/ts/pages/documentation/docs_home.tsx | 34 ++++++++++++++++++++-- packages/website/ts/utils/constants.ts | 29 ++++++++++++++++-- 4 files changed, 65 insertions(+), 27 deletions(-) diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index d6e0c124d..9a9b9a616 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -5,7 +5,7 @@ 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, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -35,26 +35,6 @@ export class DocsTopBar extends React.Component - {this._renderMenuItems(menuItemLinks)} + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} @@ -98,7 +78,7 @@ export class DocsTopBar extends React.Component - {menuItemInfo.title} + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index ccaadc800..2a6a1f477 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -16,6 +16,7 @@ export interface ButtonProps { type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( @@ -35,6 +36,7 @@ export const Button = styled(PlainButton)` 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 { @@ -59,6 +61,7 @@ Button.defaultProps = { fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 1059bb844..359f6b7e9 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,11 +1,13 @@ -import { ALink, NestedSidebarMenu } from '@0xproject/react-shared'; +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[] = [ @@ -330,8 +332,13 @@ export class DocsHome extends React.Component { categoryToPackages={CATEGORY_TO_PACKAGES} /> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = ( - + ); return ( { /> ); } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + + + + ); + }); + return menuItems; + } } 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[], }; -- cgit v1.2.3 From ce43724bd449153842aa17b5c58daa9625b6ed65 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 00:39:55 +0100 Subject: chore: Rename "Documentation" to "Docs" in mobile menu --- packages/website/ts/components/top_bar/top_bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 8b573335f..7e7247c25 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -232,7 +232,7 @@ export class TopBar extends React.Component { {this.props.translate.get(Key.Home, Deco.Cap)} - {this.props.translate.get(Key.Documentation, Deco.Cap)} + {this.props.translate.get(Key.Docs, Deco.Cap)} {!this._isViewingPortal() && ( -- cgit v1.2.3 From 62f4bb21178415a1f5c8f55066a768671e852317 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 00:55:47 +0100 Subject: chore: Add topBar menu in wiki mobile sidebar menu --- packages/website/ts/pages/wiki/wiki.tsx | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index e7754fd9d..76d52c9bd 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,7 +1,9 @@ import { ALink, + colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, NestedSidebarMenu, utils as sharedUtils, @@ -11,6 +13,7 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; 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'; @@ -87,8 +90,33 @@ export class Wiki extends React.Component { ); } private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + + + + ); + }); const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); - return ; + return ( + + + {menuItems} + + ); } private _renderLoading(): React.ReactNode { return ( -- cgit v1.2.3 From 4ca89fc9f1c72fc1b8db270838965512a6e95982 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:53:01 +0100 Subject: nit: use ObjectMap --- packages/react-docs/src/docs_info.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index d75a1676c..08e7703df 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -34,7 +34,7 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { + public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): ObjectMap { if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) { return {}; } -- cgit v1.2.3 From e18f66e5b7a099101c8d9273391744eacd705f59 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:53:28 +0100 Subject: nit: use styled-component instead of react-state for onHover --- packages/react-docs/package.json | 4 ++- .../react-shared/src/components/anchor_title.tsx | 37 +++++++--------------- 2 files changed, 14 insertions(+), 27 deletions(-) diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index b1e80d1b6..ff23c7fe3 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", @@ -51,7 +52,8 @@ "react-markdown": "^3.2.2", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "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-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 0bdf61d44..0164a8c4a 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,5 +1,6 @@ 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'; @@ -15,12 +16,10 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; - isDisabled?: boolean; + isDisabled: boolean; } -export interface AnchorTitleState { - isHovering: boolean; -} +export interface AnchorTitleState {} const styles: Styles = { anchor: { @@ -29,7 +28,7 @@ const styles: Styles = { cursor: 'pointer', }, h1: { - fontSize: '30px', + fontSize: '1.875em', }, h2: { fontSize: '1.5em', @@ -44,17 +43,13 @@ export class AnchorTitle extends React.Component = { isDisabled: false, }; - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } public render(): React.ReactNode { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } + const AnchorIcon = styled.i` + opacity: ${this.props.shouldShowAnchor ? 1 : 0}; + &:hover { + opacity: ${this.props.shouldShowAnchor ? 0.6 : 0}; + } + `; return (
    - + )}
    ); } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } } -- cgit v1.2.3 From 4d275cc5916c2802bd1d0b64766409daff5006db Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:55:05 +0100 Subject: nit: don't init scrolledToId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index fc5ab95fa..f734dc654 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -16,7 +16,7 @@ export interface NestedSidebarMenuProps { } export interface NestedSidebarMenuState { - scrolledToId: string; + scrolledToId?: string; } const styles: Styles = { @@ -43,9 +43,7 @@ export class NestedSidebarMenu extends React.Component { -- cgit v1.2.3 From 03b20eed29f18b39ee832ea7414e6234a88a0815 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:58:10 +0100 Subject: nit: remove todo --- packages/website/ts/pages/documentation/docs_home.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 359f6b7e9..b02959610 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -45,7 +45,6 @@ const TUTORIALS: TutorialInfo[] = [ }, ]; -// TODO(fabio): Move this to it's own file const CATEGORY_TO_PACKAGES: ObjectMap = { [Categories.ZeroExProtocol]: [ { -- cgit v1.2.3 From ac68f8db4459b09f7fd0a0191e068eee2da9f76f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 20:18:28 +0100 Subject: refactor: fix anchor so it doesn't keep re-rendering the anchor icon --- .../react-shared/src/components/anchor_title.tsx | 30 +++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 0164a8c4a..bd99edcab 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -22,11 +22,6 @@ export interface AnchorTitleProps { export interface AnchorTitleState {} const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, h1: { fontSize: '1.875em', }, @@ -39,17 +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 { public static defaultProps: Partial = { isDisabled: false, }; public render(): React.ReactNode { - const AnchorIcon = styled.i` - opacity: ${this.props.shouldShowAnchor ? 1 : 0}; - &:hover { - opacity: ${this.props.shouldShowAnchor ? 0.6 : 0}; - } - `; return (
    - + )}
    -- cgit v1.2.3 From 612e8db93005a3ee7594015c6128c63384ac343a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 10:39:37 +0100 Subject: Update changelogs for unpublished packages --- packages/ethereum-types/CHANGELOG.json | 10 +++++++++- packages/react-shared/CHANGELOG.json | 12 ++++++++++-- 2 files changed, 19 insertions(+), 3 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`.", @@ -8,6 +8,14 @@ } ] }, + { + "version": "1.1.0", + "changes": [ + { + "note": "Unpublished package." + } + ] + }, { "timestamp": 1538693146, "version": "1.0.11", 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,13 +1,21 @@ [ { - "timestamp": 1538693146, - "version": "1.0.15", + "version": "1.0.17", "changes": [ { "note": "Dependencies updated" } ] }, + { + "timestamp": 1538693146, + "version": "1.0.16", + "changes": [ + { + "note": "Unpublished package" + } + ] + }, { "timestamp": 1538475601, "version": "1.0.14", -- cgit v1.2.3 From 6ab6a9aa2b3511df60c078398168a84faf3e2385 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 11:28:48 +0100 Subject: Update react-scroll hash to avoid collision with older, unfixed branch --- packages/react-docs/package.json | 2 +- packages/react-shared/package.json | 2 +- packages/website/package.json | 2 +- yarn.lock | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index ff23c7fe3..6830a2101 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -50,7 +50,7 @@ "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", "styled-components": "^3.3.0" 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/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/yarn.lock b/yarn.lock index d210d7a8c..729be3a0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12164,7 +12164,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: -- cgit v1.2.3 From 56cb2470cce2fed776f3cabacd6d31fa0ccdbbd7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 12:01:01 +0100 Subject: chore: fix up asset-buyer doc and add to Dev Home --- packages/website/ts/containers/asset_buyer_documentation.ts | 4 +++- packages/website/ts/pages/documentation/docs_home.tsx | 8 ++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts index f794625de..13a597ea3 100644 --- a/packages/website/ts/containers/asset_buyer_documentation.ts +++ b/packages/website/ts/containers/asset_buyer_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 */ @@ -47,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index b02959610..f0af78fc1 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -113,6 +113,14 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { shouldOpenInNewTab: true, }, }, + { + description: + 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', + link: { + title: '@0xproject/asset-buyer', + to: WebsitePaths.AssetBuyer, + }, + }, ], [Categories.Ethereum]: [ { -- cgit v1.2.3 From e7c6f2a35795610645598deba2c14ceeda6acc89 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 12:04:19 +0100 Subject: Add styled-components dep --- packages/react-shared/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 1c23c4c8a..847946eb1 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -44,6 +44,7 @@ "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "@types/valid-url": "^1.0.2", + "@types/styled-components": "^4.0.0", "basscss": "^8.0.3", "change-case": "^3.0.2", "is-mobile": "^0.2.2", @@ -55,6 +56,7 @@ "react-markdown": "^3.2.2", "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", "react-router-dom": "^4.1.1", + "styled-components": "^3.3.0", "valid-url": "^1.0.9" }, "publishConfig": { -- cgit v1.2.3