From ca25b816fabe15ce1ebc539c0316beba813683b8 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 13 Mar 2018 15:29:12 +0100 Subject: move scripts to monorepro-scripts --- packages/react-shared/package.json | 99 ++++++------- packages/react-shared/scripts/postpublish.js | 5 - .../react-shared/src/components/anchor_title.tsx | 87 ++++++++++++ .../src/components/markdown_code_block.tsx | 25 ++++ .../src/components/markdown_link_block.tsx | 47 ++++++ .../src/components/markdown_section.tsx | 94 ++++++++++++ .../src/components/nested_sidebar_menu.tsx | 158 +++++++++++++++++++++ .../react-shared/src/components/section_header.tsx | 73 ++++++++++ .../src/components/version_drop_down.tsx | 39 +++++ packages/react-shared/src/globals.d.ts | 14 ++ packages/react-shared/src/index.ts | 12 ++ .../src/monorepo_scripts/postpublish.ts | 6 + .../src/ts/components/anchor_title.tsx | 87 ------------ .../src/ts/components/markdown_code_block.tsx | 25 ---- .../src/ts/components/markdown_link_block.tsx | 47 ------ .../src/ts/components/markdown_section.tsx | 94 ------------ .../src/ts/components/nested_sidebar_menu.tsx | 158 --------------------- .../src/ts/components/section_header.tsx | 73 ---------- .../src/ts/components/version_drop_down.tsx | 39 ----- packages/react-shared/src/ts/globals.d.ts | 7 - packages/react-shared/src/ts/index.ts | 12 -- packages/react-shared/src/ts/types.ts | 25 ---- packages/react-shared/src/ts/utils/colors.ts | 48 ------- packages/react-shared/src/ts/utils/constants.ts | 20 --- packages/react-shared/src/ts/utils/utils.ts | 45 ------ packages/react-shared/src/types.ts | 25 ++++ packages/react-shared/src/utils/colors.ts | 48 +++++++ packages/react-shared/src/utils/constants.ts | 20 +++ packages/react-shared/src/utils/utils.ts | 45 ++++++ 29 files changed, 744 insertions(+), 733 deletions(-) delete mode 100644 packages/react-shared/scripts/postpublish.js create mode 100644 packages/react-shared/src/components/anchor_title.tsx create mode 100644 packages/react-shared/src/components/markdown_code_block.tsx create mode 100644 packages/react-shared/src/components/markdown_link_block.tsx create mode 100644 packages/react-shared/src/components/markdown_section.tsx create mode 100644 packages/react-shared/src/components/nested_sidebar_menu.tsx create mode 100644 packages/react-shared/src/components/section_header.tsx create mode 100644 packages/react-shared/src/components/version_drop_down.tsx create mode 100644 packages/react-shared/src/globals.d.ts create mode 100644 packages/react-shared/src/index.ts create mode 100644 packages/react-shared/src/monorepo_scripts/postpublish.ts delete mode 100644 packages/react-shared/src/ts/components/anchor_title.tsx delete mode 100644 packages/react-shared/src/ts/components/markdown_code_block.tsx delete mode 100644 packages/react-shared/src/ts/components/markdown_link_block.tsx delete mode 100644 packages/react-shared/src/ts/components/markdown_section.tsx delete mode 100644 packages/react-shared/src/ts/components/nested_sidebar_menu.tsx delete mode 100644 packages/react-shared/src/ts/components/section_header.tsx delete mode 100644 packages/react-shared/src/ts/components/version_drop_down.tsx delete mode 100644 packages/react-shared/src/ts/globals.d.ts delete mode 100644 packages/react-shared/src/ts/index.ts delete mode 100644 packages/react-shared/src/ts/types.ts delete mode 100644 packages/react-shared/src/ts/utils/colors.ts delete mode 100644 packages/react-shared/src/ts/utils/constants.ts delete mode 100644 packages/react-shared/src/ts/utils/utils.ts create mode 100644 packages/react-shared/src/types.ts create mode 100644 packages/react-shared/src/utils/colors.ts create mode 100644 packages/react-shared/src/utils/constants.ts create mode 100644 packages/react-shared/src/utils/utils.ts (limited to 'packages/react-shared') diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index adfbce52c..ac1d05f38 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -1,50 +1,53 @@ { - "name": "@0xproject/react-shared", - "version": "0.0.1", - "description": "0x shared react components", - "main": "lib/index.js", - "types": "lib/index.d.ts", - "scripts": { - "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'", - "build": "tsc", - "build:watch": "tsc -w", - "clean": "shx rm -rf lib" - }, - "author": "Fabio Berger", - "license": "Apache-2.0", - "bugs": { - "url": "https://github.com/0xProject/0x-monorepo/issues" - }, - "homepage": "https://github.com/0xProject/0x-monorepo/packages/react-shared/README.md", - "repository": { - "type": "git", - "url": "https://github.com/0xProject/0x-monorepo.git" - }, - "devDependencies": { - "@0xproject/tslint-config": "^0.4.9", - "@types/lodash": "^4.14.86", - "@types/material-ui": "0.18.0", - "@types/node": "^8.0.53", - "@types/react": "^15.0.15", - "@types/react-dom": "^0.14.23", - "@types/react-scroll": "0.0.31", - "shx": "^0.2.2", - "tslint": "^5.9.1", - "typescript": "2.7.1" - }, - "dependencies": { - "basscss": "^8.0.3", - "is-mobile": "^0.2.2", - "lodash": "^4.17.4", - "material-ui": "^0.17.1", - "react": "15.6.1", - "react-dom": "15.6.1", - "react-highlight": "0xproject/react-highlight", - "react-markdown": "^3.2.2", - "react-scroll": "^1.5.2", - "react-tap-event-plugin": "^2.0.1" - }, - "publishConfig": { - "access": "public" - } + "name": "@0xproject/react-shared", + "version": "0.0.1", + "description": "0x shared react components", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "scripts": { + "lint": "tslint --project . 'src/**/*.ts' 'src/**/*.tsx'", + "build": "tsc && copyfiles -u 2 './lib/monorepo_scripts/**/*' ./scripts", + "build:watch": "tsc -w", + "clean": "shx rm -rf lib scripts" + }, + "author": "Fabio Berger", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/0xProject/0x-monorepo/issues" + }, + "homepage": "https://github.com/0xProject/0x-monorepo/packages/react-shared/README.md", + "repository": { + "type": "git", + "url": "https://github.com/0xProject/0x-monorepo.git" + }, + "devDependencies": { + "@0xproject/dev-utils": "^0.2.1", + "@0xproject/monorepo-scripts": "^0.1.12", + "@0xproject/tslint-config": "^0.4.9", + "@types/lodash": "^4.14.86", + "@types/material-ui": "0.18.0", + "@types/node": "^8.0.53", + "@types/react": "^15.0.15", + "@types/react-dom": "^0.14.23", + "@types/react-scroll": "0.0.31", + "copyfiles": "^1.2.0", + "shx": "^0.2.2", + "tslint": "^5.9.1", + "typescript": "2.7.1" + }, + "dependencies": { + "basscss": "^8.0.3", + "is-mobile": "^0.2.2", + "lodash": "^4.17.4", + "material-ui": "^0.17.1", + "react": "15.6.1", + "react-dom": "15.6.1", + "react-highlight": "0xproject/react-highlight", + "react-markdown": "^3.2.2", + "react-scroll": "^1.5.2", + "react-tap-event-plugin": "^2.0.1" + }, + "publishConfig": { + "access": "public" + } } diff --git a/packages/react-shared/scripts/postpublish.js b/packages/react-shared/scripts/postpublish.js deleted file mode 100644 index 639656c7e..000000000 --- a/packages/react-shared/scripts/postpublish.js +++ /dev/null @@ -1,5 +0,0 @@ -const postpublish_utils = require('../../../scripts/postpublish_utils'); -const packageJSON = require('../package.json'); - -const subPackageName = packageJSON.name; -postpublish_utils.standardPostPublishAsync(subPackageName); diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx new file mode 100644 index 000000000..f44354097 --- /dev/null +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { Link as ScrollLink } from 'react-scroll'; + +import { HeaderSizes, Styles } from '../types'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +const headerSizeToScrollOffset: { [headerSize: string]: number } = { + h2: -20, + h3: 0, +}; + +export interface AnchorTitleProps { + title: string | React.ReactNode; + id: string; + headerSize: HeaderSizes; + shouldShowAnchor: boolean; +} + +export interface AnchorTitleState { + isHovering: boolean; +} + +const styles: Styles = { + anchor: { + fontSize: 20, + transform: 'rotate(45deg)', + cursor: 'pointer', + }, + headers: { + WebkitMarginStart: 0, + WebkitMarginEnd: 0, + fontWeight: 'bold', + display: 'block', + }, + h1: { + fontSize: '1.8em', + }, + h2: { + fontSize: '1.5em', + fontWeight: 400, + }, + h3: { + fontSize: '1.17em', + }, +}; + +export class AnchorTitle extends React.Component { + constructor(props: AnchorTitleProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render() { + let opacity = 0; + if (this.props.shouldShowAnchor) { + opacity = this.state.isHovering ? 0.6 : 1; + } + return ( +
+
+ {this.props.title} +
+ + + +
+ ); + } + private _setHoverState(isHovering: boolean) { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/react-shared/src/components/markdown_code_block.tsx b/packages/react-shared/src/components/markdown_code_block.tsx new file mode 100644 index 000000000..2070bb8e1 --- /dev/null +++ b/packages/react-shared/src/components/markdown_code_block.tsx @@ -0,0 +1,25 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import * as HighLight from 'react-highlight'; + +export interface MarkdownCodeBlockProps { + value: string; + language: string; +} + +export interface MarkdownCodeBlockState {} + +export class MarkdownCodeBlock extends React.Component { + // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying + // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { + return nextProps.value !== this.props.value || nextProps.language !== this.props.language; + } + public render() { + return ( + + {this.props.value} + + ); + } +} diff --git a/packages/react-shared/src/components/markdown_link_block.tsx b/packages/react-shared/src/components/markdown_link_block.tsx new file mode 100644 index 000000000..8f5862249 --- /dev/null +++ b/packages/react-shared/src/components/markdown_link_block.tsx @@ -0,0 +1,47 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +export interface MarkdownLinkBlockProps { + href: string; +} + +export interface MarkdownLinkBlockState {} + +export class MarkdownLinkBlock extends React.Component { + // Re-rendering a linkBlock causes it to remain unclickable. + // We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { + return nextProps.href !== this.props.href; + } + public render() { + const href = this.props.href; + const isLinkToSection = _.startsWith(href, '#'); + // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons + if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { + return ( + + {this.props.children} + + ); + } else if (isLinkToSection) { + return ( + + {this.props.children} + + ); + } else { + return {this.props.children}; + } + } + private _onHashUrlClick(href: string) { + const hash = href.split('#')[1]; + utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID); + utils.setUrlHash(hash); + } +} diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx new file mode 100644 index 000000000..d24a43dcb --- /dev/null +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -0,0 +1,94 @@ +import * as _ from 'lodash'; +import RaisedButton from 'material-ui/RaisedButton'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; + +import { HeaderSizes } from '../types'; +import { colors } from '../utils/colors'; +import { utils } from '../utils/utils'; + +import { AnchorTitle } from './anchor_title'; +import { MarkdownCodeBlock } from './markdown_code_block'; +import { MarkdownLinkBlock } from './markdown_link_block'; + +export interface MarkdownSectionProps { + sectionName: string; + markdownContent: string; + headerSize?: HeaderSizes; + githubLink?: string; +} + +interface DefaultMarkdownSectionProps { + headerSize: HeaderSizes; +} + +type PropsWithDefaults = MarkdownSectionProps & DefaultMarkdownSectionProps; + +export interface MarkdownSectionState { + shouldShowAnchor: boolean; +} + +export class MarkdownSection extends React.Component { + public static defaultProps: Partial = { + headerSize: HeaderSizes.H3, + }; + constructor(props: MarkdownSectionProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; + + const id = utils.getIdFromName(sectionName); + return ( +
+ +
+
+ + + +
+
+ {!_.isUndefined(githubLink) && ( + + Edit on Github + + )} +
+
+
+ + +
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..2225bd197 --- /dev/null +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -0,0 +1,158 @@ +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 { colors } from '../utils/colors'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +import { VersionDropDown } from './version_drop_down'; + +export interface NestedSidebarMenuProps { + topLevelMenu: { [topLevel: string]: string[] }; + menuSubsectionsBySection: MenuSubsectionsBySection; + sidebarHeader?: React.ReactNode; + shouldDisplaySectionHeaders?: boolean; + onMenuItemClick?: () => void; + selectedVersion?: string; + versions?: string[]; + onVersionSelected?: (semver: string) => void; +} + +export interface NestedSidebarMenuState {} + +const styles: Styles = { + menuItemWithHeaders: { + minHeight: 0, + }, + menuItemWithoutHeaders: { + minHeight: 48, + }, + menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, + lineHeight: 2, + padding: 0, + }, +}; + +export class NestedSidebarMenu extends React.Component { + public static defaultProps: Partial = { + shouldDisplaySectionHeaders: true, + onMenuItemClick: _.noop, + }; + public render() { + const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { + const finalSectionName = sectionName.replace(/-/g, ' '); + if (this.props.shouldDisplaySectionHeaders) { + const id = utils.getIdFromName(sectionName); + return ( +
+
+ {finalSectionName.toUpperCase()} +
+ {this._renderMenuItems(menuItems)} +
+ ); + } else { + return
{this._renderMenuItems(menuItems)}
; + } + }); + const maxWidthWithScrollbar = 307; + return ( +
+ {this.props.sidebarHeader} + {!_.isUndefined(this.props.versions) && + !_.isUndefined(this.props.selectedVersion) && + !_.isUndefined(this.props.onVersionSelected) && ( +
+ +
+ )} +
{navigation}
+
+ ); + } + private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + const menuItemStyles = this.props.shouldDisplaySectionHeaders + ? styles.menuItemWithHeaders + : styles.menuItemWithoutHeaders; + const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; + const menuItems = _.map(menuItemNames, menuItemName => { + const id = utils.getIdFromName(menuItemName); + return ( +
+ + + {menuItemName} + + + {this._renderMenuItemSubsections(menuItemName)} +
+ ); + }); + return menuItems; + } + private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { + if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { + return null; + } + return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); + } + private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { + return ( +
    + {_.map(entityNames, entityName => { + const name = `${menuItemName}-${entityName}`; + const id = utils.getIdFromName(name); + return ( +
  • + + + {entityName} + + +
    • + ); + })} +
+ ); + } + private _onMenuItemClick(name: string): void { + const id = utils.getIdFromName(name); + utils.setUrlHash(id); + if (!_.isUndefined(this.props.onMenuItemClick)) { + this.props.onMenuItemClick(); + } + } +} diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx new file mode 100644 index 000000000..ee34a6c09 --- /dev/null +++ b/packages/react-shared/src/components/section_header.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import { Element as ScrollElement } from 'react-scroll'; + +import { HeaderSizes } from '../types'; +import { colors } from '../utils/colors'; +import { utils } from '../utils/utils'; + +import { AnchorTitle } from './anchor_title'; + +export interface SectionHeaderProps { + sectionName: string; + headerSize?: HeaderSizes; +} + +interface DefaultSectionHeaderProps { + headerSize: HeaderSizes; +} + +type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps; + +export interface SectionHeaderState { + shouldShowAnchor: boolean; +} + +export class SectionHeader extends React.Component { + public static defaultProps: Partial = { + headerSize: HeaderSizes.H2, + }; + constructor(props: SectionHeaderProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const { sectionName, headerSize } = this.props as PropsWithDefaults; + + const finalSectionName = this.props.sectionName.replace(/-/g, ' '); + const id = utils.getIdFromName(finalSectionName); + return ( +
+ + + {finalSectionName} + + } + id={id} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + +
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx new file mode 100644 index 000000000..d9e49b205 --- /dev/null +++ b/packages/react-shared/src/components/version_drop_down.tsx @@ -0,0 +1,39 @@ +import * as _ from 'lodash'; +import DropDownMenu from 'material-ui/DropDownMenu'; +import MenuItem from 'material-ui/MenuItem'; +import * as React from 'react'; + +import { utils } from '../utils/utils'; + +export interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; + onVersionSelected: (semver: string) => void; +} + +export interface VersionDropDownState {} + +export class VersionDropDown extends React.Component { + public render() { + return ( +
+ + {this._renderDropDownItems()} + +
+ ); + } + private _renderDropDownItems() { + const items = _.map(this.props.versions, version => { + return ; + }); + return items; + } + private _updateSelectedVersion(e: any, index: number, semver: string) { + this.props.onVersionSelected(semver); + } +} diff --git a/packages/react-shared/src/globals.d.ts b/packages/react-shared/src/globals.d.ts new file mode 100644 index 000000000..525563e23 --- /dev/null +++ b/packages/react-shared/src/globals.d.ts @@ -0,0 +1,14 @@ +declare module 'react-highlight'; + +// is-mobile declarations +declare function isMobile(): boolean; +declare module 'is-mobile' { + export = isMobile; +} + +declare module '*.json' { + const json: any; + /* tslint:disable */ + export default json; + /* tslint:enable */ +} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts new file mode 100644 index 000000000..3b50c0117 --- /dev/null +++ b/packages/react-shared/src/index.ts @@ -0,0 +1,12 @@ +export { AnchorTitle } from './components/anchor_title'; +export { MarkdownLinkBlock } from './components/markdown_link_block'; +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 { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; + +export { utils } from './utils/utils'; +export { constants } from './utils/constants'; +export { colors } from './utils/colors'; diff --git a/packages/react-shared/src/monorepo_scripts/postpublish.ts b/packages/react-shared/src/monorepo_scripts/postpublish.ts new file mode 100644 index 000000000..d5fcff9d0 --- /dev/null +++ b/packages/react-shared/src/monorepo_scripts/postpublish.ts @@ -0,0 +1,6 @@ +import { postpublishUtils } from '@0xproject/monorepo-scripts'; + +import * as packageJSON from '../package.json'; + +const subPackageName = (packageJSON as any).name; +postpublishUtils.standardPostPublishAsync(subPackageName); diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx deleted file mode 100644 index f44354097..000000000 --- a/packages/react-shared/src/ts/components/anchor_title.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; - -import { HeaderSizes, Styles } from '../types'; -import { constants } from '../utils/constants'; -import { utils } from '../utils/utils'; - -const headerSizeToScrollOffset: { [headerSize: string]: number } = { - h2: -20, - h3: 0, -}; - -export interface AnchorTitleProps { - title: string | React.ReactNode; - id: string; - headerSize: HeaderSizes; - shouldShowAnchor: boolean; -} - -export interface AnchorTitleState { - isHovering: boolean; -} - -const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, - headers: { - WebkitMarginStart: 0, - WebkitMarginEnd: 0, - fontWeight: 'bold', - display: 'block', - }, - h1: { - fontSize: '1.8em', - }, - h2: { - fontSize: '1.5em', - fontWeight: 400, - }, - h3: { - fontSize: '1.17em', - }, -}; - -export class AnchorTitle extends React.Component { - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render() { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } - return ( -
-
- {this.props.title} -
- - - -
- ); - } - private _setHoverState(isHovering: boolean) { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/react-shared/src/ts/components/markdown_code_block.tsx b/packages/react-shared/src/ts/components/markdown_code_block.tsx deleted file mode 100644 index 2070bb8e1..000000000 --- a/packages/react-shared/src/ts/components/markdown_code_block.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import * as HighLight from 'react-highlight'; - -export interface MarkdownCodeBlockProps { - value: string; - language: string; -} - -export interface MarkdownCodeBlockState {} - -export class MarkdownCodeBlock extends React.Component { - // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying - // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. - public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { - return nextProps.value !== this.props.value || nextProps.language !== this.props.language; - } - public render() { - return ( - - {this.props.value} - - ); - } -} diff --git a/packages/react-shared/src/ts/components/markdown_link_block.tsx b/packages/react-shared/src/ts/components/markdown_link_block.tsx deleted file mode 100644 index 8f5862249..000000000 --- a/packages/react-shared/src/ts/components/markdown_link_block.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { constants } from '../utils/constants'; -import { utils } from '../utils/utils'; - -export interface MarkdownLinkBlockProps { - href: string; -} - -export interface MarkdownLinkBlockState {} - -export class MarkdownLinkBlock extends React.Component { - // Re-rendering a linkBlock causes it to remain unclickable. - // We therefore noop re-renders on this component if it's props haven't changed. - public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { - return nextProps.href !== this.props.href; - } - public render() { - const href = this.props.href; - const isLinkToSection = _.startsWith(href, '#'); - // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons - if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { - return ( - - {this.props.children} - - ); - } else if (isLinkToSection) { - return ( - - {this.props.children} - - ); - } else { - return {this.props.children}; - } - } - private _onHashUrlClick(href: string) { - const hash = href.split('#')[1]; - utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID); - utils.setUrlHash(hash); - } -} diff --git a/packages/react-shared/src/ts/components/markdown_section.tsx b/packages/react-shared/src/ts/components/markdown_section.tsx deleted file mode 100644 index d24a43dcb..000000000 --- a/packages/react-shared/src/ts/components/markdown_section.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as _ from 'lodash'; -import RaisedButton from 'material-ui/RaisedButton'; -import * as React from 'react'; -import * as ReactMarkdown from 'react-markdown'; -import { Element as ScrollElement } from 'react-scroll'; - -import { HeaderSizes } from '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../utils/utils'; - -import { AnchorTitle } from './anchor_title'; -import { MarkdownCodeBlock } from './markdown_code_block'; -import { MarkdownLinkBlock } from './markdown_link_block'; - -export interface MarkdownSectionProps { - sectionName: string; - markdownContent: string; - headerSize?: HeaderSizes; - githubLink?: string; -} - -interface DefaultMarkdownSectionProps { - headerSize: HeaderSizes; -} - -type PropsWithDefaults = MarkdownSectionProps & DefaultMarkdownSectionProps; - -export interface MarkdownSectionState { - shouldShowAnchor: boolean; -} - -export class MarkdownSection extends React.Component { - public static defaultProps: Partial = { - headerSize: HeaderSizes.H3, - }; - constructor(props: MarkdownSectionProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render() { - const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; - - const id = utils.getIdFromName(sectionName); - return ( -
- -
-
- - - -
-
- {!_.isUndefined(githubLink) && ( - - Edit on Github - - )} -
-
-
- - -
- ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx deleted file mode 100644 index 2225bd197..000000000 --- a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx +++ /dev/null @@ -1,158 +0,0 @@ -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 { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; -import { utils } from '../utils/utils'; - -import { VersionDropDown } from './version_drop_down'; - -export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; - sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; -} - -export interface NestedSidebarMenuState {} - -const styles: Styles = { - menuItemWithHeaders: { - minHeight: 0, - }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { - color: colors.grey800, - fontSize: 14, - lineHeight: 2, - padding: 0, - }, -}; - -export class NestedSidebarMenu extends React.Component { - public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop, - }; - public render() { - const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { - const finalSectionName = sectionName.replace(/-/g, ' '); - if (this.props.shouldDisplaySectionHeaders) { - const id = utils.getIdFromName(sectionName); - return ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(menuItems)} -
- ); - } else { - return
{this._renderMenuItems(menuItems)}
; - } - }); - const maxWidthWithScrollbar = 307; - return ( -
- {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( -
- -
- )} -
{navigation}
-
- ); - } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { - const menuItemStyles = this.props.shouldDisplaySectionHeaders - ? styles.menuItemWithHeaders - : styles.menuItemWithoutHeaders; - const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { - const id = utils.getIdFromName(menuItemName); - return ( -
- - - {menuItemName} - - - {this._renderMenuItemSubsections(menuItemName)} -
- ); - }); - return menuItems; - } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { - return null; - } - return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); - } - private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { - return ( -
    - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); - return ( -
  • - - - {entityName} - - -
    • - ); - })} -
- ); - } - private _onMenuItemClick(name: string): void { - const id = utils.getIdFromName(name); - utils.setUrlHash(id); - if (!_.isUndefined(this.props.onMenuItemClick)) { - this.props.onMenuItemClick(); - } - } -} diff --git a/packages/react-shared/src/ts/components/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx deleted file mode 100644 index ee34a6c09..000000000 --- a/packages/react-shared/src/ts/components/section_header.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import { Element as ScrollElement } from 'react-scroll'; - -import { HeaderSizes } from '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../utils/utils'; - -import { AnchorTitle } from './anchor_title'; - -export interface SectionHeaderProps { - sectionName: string; - headerSize?: HeaderSizes; -} - -interface DefaultSectionHeaderProps { - headerSize: HeaderSizes; -} - -type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps; - -export interface SectionHeaderState { - shouldShowAnchor: boolean; -} - -export class SectionHeader extends React.Component { - public static defaultProps: Partial = { - headerSize: HeaderSizes.H2, - }; - constructor(props: SectionHeaderProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render() { - const { sectionName, headerSize } = this.props as PropsWithDefaults; - - const finalSectionName = this.props.sectionName.replace(/-/g, ' '); - const id = utils.getIdFromName(finalSectionName); - return ( -
- - - {finalSectionName} - - } - id={id} - shouldShowAnchor={this.state.shouldShowAnchor} - /> - -
- ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/ts/components/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx deleted file mode 100644 index d9e49b205..000000000 --- a/packages/react-shared/src/ts/components/version_drop_down.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as _ from 'lodash'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; - -import { utils } from '../utils/utils'; - -export interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; - onVersionSelected: (semver: string) => void; -} - -export interface VersionDropDownState {} - -export class VersionDropDown extends React.Component { - public render() { - return ( -
- - {this._renderDropDownItems()} - -
- ); - } - private _renderDropDownItems() { - const items = _.map(this.props.versions, version => { - return ; - }); - return items; - } - private _updateSelectedVersion(e: any, index: number, semver: string) { - this.props.onVersionSelected(semver); - } -} diff --git a/packages/react-shared/src/ts/globals.d.ts b/packages/react-shared/src/ts/globals.d.ts deleted file mode 100644 index 9b0bcf845..000000000 --- a/packages/react-shared/src/ts/globals.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -declare module 'react-highlight'; - -// is-mobile declarations -declare function isMobile(): boolean; -declare module 'is-mobile' { - export = isMobile; -} diff --git a/packages/react-shared/src/ts/index.ts b/packages/react-shared/src/ts/index.ts deleted file mode 100644 index 3b50c0117..000000000 --- a/packages/react-shared/src/ts/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { AnchorTitle } from './components/anchor_title'; -export { MarkdownLinkBlock } from './components/markdown_link_block'; -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 { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; - -export { utils } from './utils/utils'; -export { constants } from './utils/constants'; -export { colors } from './utils/colors'; diff --git a/packages/react-shared/src/ts/types.ts b/packages/react-shared/src/ts/types.ts deleted file mode 100644 index 88fadcc09..000000000 --- a/packages/react-shared/src/ts/types.ts +++ /dev/null @@ -1,25 +0,0 @@ -export interface Styles { - [name: string]: React.CSSProperties; -} - -export enum HeaderSizes { - H1 = 'h1', - H2 = 'h2', - H3 = 'h3', -} - -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - -export enum EtherscanLinkSuffixes { - Address = 'address', - Tx = 'tx', -} - -export enum Networks { - Mainnet = 'Mainnet', - Kovan = 'Kovan', - Ropsten = 'Ropsten', - Rinkeby = 'Rinkeby', -} diff --git a/packages/react-shared/src/ts/utils/colors.ts b/packages/react-shared/src/ts/utils/colors.ts deleted file mode 100644 index 2eead95c7..000000000 --- a/packages/react-shared/src/ts/utils/colors.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { colors as materialUiColors } from 'material-ui/styles'; - -export const colors = { - ...materialUiColors, - gray40: '#F8F8F8', - grey50: '#FAFAFA', - grey100: '#F5F5F5', - lightestGrey: '#F0F0F0', - greyishPink: '#E6E5E5', - grey300: '#E0E0E0', - beigeWhite: '#E4E4E4', - grey350: '#cacaca', - grey400: '#BDBDBD', - lightGrey: '#BBBBBB', - grey500: '#9E9E9E', - grey: '#A5A5A5', - darkGrey: '#818181', - landingLinkGrey: '#919191', - grey700: '#616161', - grey750: '#515151', - grey800: '#424242', - darkerGrey: '#393939', - heroGrey: '#404040', - projectsGrey: '#343333', - darkestGrey: '#272727', - dharmaDarkGrey: '#252525', - lightBlue: '#60A4F4', - lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', - darkBlue: '#4D5481', - turquois: '#058789', - lightPurple: '#A81CA6', - purple: '#690596', - red200: '#EF9A9A', - red: '#E91751', - red500: '#F44336', - red600: '#E53935', - limeGreen: '#66DE75', - lightGreen: '#4DC55C', - lightestGreen: '#89C774', - brightGreen: '#00C33E', - green400: '#66BB6A', - green: '#4DA24B', - amber600: '#FFB300', - orange: '#E69D00', - amber800: '#FF8F00', - darkYellow: '#caca03', -}; diff --git a/packages/react-shared/src/ts/utils/constants.ts b/packages/react-shared/src/ts/utils/constants.ts deleted file mode 100644 index 562ab776b..000000000 --- a/packages/react-shared/src/ts/utils/constants.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Networks } from '../types'; - -export const constants = { - DOCS_SCROLL_DURATION_MS: 0, - DOCS_CONTAINER_ID: 'documentation', - SCROLL_CONTAINER_ID: 'documentation', - SCROLL_TOP_ID: 'pageScrollTop', - NETWORK_NAME_BY_ID: { - 1: Networks.Mainnet, - 3: Networks.Ropsten, - 4: Networks.Rinkeby, - 42: Networks.Kovan, - } as { [symbol: number]: string }, - NETWORK_ID_BY_NAME: { - [Networks.Mainnet]: 1, - [Networks.Ropsten]: 3, - [Networks.Rinkeby]: 4, - [Networks.Kovan]: 42, - } as { [networkName: string]: number }, -}; diff --git a/packages/react-shared/src/ts/utils/utils.ts b/packages/react-shared/src/ts/utils/utils.ts deleted file mode 100644 index b3acb081e..000000000 --- a/packages/react-shared/src/ts/utils/utils.ts +++ /dev/null @@ -1,45 +0,0 @@ -import isMobile = require('is-mobile'); -import * as _ from 'lodash'; -import { scroller } from 'react-scroll'; - -import { EtherscanLinkSuffixes, Networks } from '../types'; - -import { constants } from './constants'; - -export const utils = { - setUrlHash(anchorId: string) { - window.location.hash = anchorId; - }, - scrollToHash(hash: string, containerId: string): void { - let finalHash = hash; - if (_.isEmpty(hash)) { - finalHash = constants.SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(finalHash, { - duration: 0, - offset: 0, - containerId, - }); - }, - isUserOnMobile(): boolean { - const isUserOnMobile = isMobile(); - return isUserOnMobile; - }, - getIdFromName(name: string) { - const id = name.replace(/ /g, '-'); - return id; - }, - getEtherScanLinkIfExists( - addressOrTxHash: string, - networkId: number, - suffix: EtherscanLinkSuffixes, - ): string | undefined { - const networkName = constants.NETWORK_NAME_BY_ID[networkId]; - if (_.isUndefined(networkName)) { - return undefined; - } - const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`; - return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`; - }, -}; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts new file mode 100644 index 000000000..88fadcc09 --- /dev/null +++ b/packages/react-shared/src/types.ts @@ -0,0 +1,25 @@ +export interface Styles { + [name: string]: React.CSSProperties; +} + +export enum HeaderSizes { + H1 = 'h1', + H2 = 'h2', + H3 = 'h3', +} + +export interface MenuSubsectionsBySection { + [section: string]: string[]; +} + +export enum EtherscanLinkSuffixes { + Address = 'address', + Tx = 'tx', +} + +export enum Networks { + Mainnet = 'Mainnet', + Kovan = 'Kovan', + Ropsten = 'Ropsten', + Rinkeby = 'Rinkeby', +} diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts new file mode 100644 index 000000000..2eead95c7 --- /dev/null +++ b/packages/react-shared/src/utils/colors.ts @@ -0,0 +1,48 @@ +import { colors as materialUiColors } from 'material-ui/styles'; + +export const colors = { + ...materialUiColors, + gray40: '#F8F8F8', + grey50: '#FAFAFA', + grey100: '#F5F5F5', + lightestGrey: '#F0F0F0', + greyishPink: '#E6E5E5', + grey300: '#E0E0E0', + beigeWhite: '#E4E4E4', + grey350: '#cacaca', + grey400: '#BDBDBD', + lightGrey: '#BBBBBB', + grey500: '#9E9E9E', + grey: '#A5A5A5', + darkGrey: '#818181', + landingLinkGrey: '#919191', + grey700: '#616161', + grey750: '#515151', + grey800: '#424242', + darkerGrey: '#393939', + heroGrey: '#404040', + projectsGrey: '#343333', + darkestGrey: '#272727', + dharmaDarkGrey: '#252525', + lightBlue: '#60A4F4', + lightBlueA700: '#0091EA', + linkBlue: '#1D5CDE', + darkBlue: '#4D5481', + turquois: '#058789', + lightPurple: '#A81CA6', + purple: '#690596', + red200: '#EF9A9A', + red: '#E91751', + red500: '#F44336', + red600: '#E53935', + limeGreen: '#66DE75', + lightGreen: '#4DC55C', + lightestGreen: '#89C774', + brightGreen: '#00C33E', + green400: '#66BB6A', + green: '#4DA24B', + amber600: '#FFB300', + orange: '#E69D00', + amber800: '#FF8F00', + darkYellow: '#caca03', +}; diff --git a/packages/react-shared/src/utils/constants.ts b/packages/react-shared/src/utils/constants.ts new file mode 100644 index 000000000..562ab776b --- /dev/null +++ b/packages/react-shared/src/utils/constants.ts @@ -0,0 +1,20 @@ +import { Networks } from '../types'; + +export const constants = { + DOCS_SCROLL_DURATION_MS: 0, + DOCS_CONTAINER_ID: 'documentation', + SCROLL_CONTAINER_ID: 'documentation', + SCROLL_TOP_ID: 'pageScrollTop', + NETWORK_NAME_BY_ID: { + 1: Networks.Mainnet, + 3: Networks.Ropsten, + 4: Networks.Rinkeby, + 42: Networks.Kovan, + } as { [symbol: number]: string }, + NETWORK_ID_BY_NAME: { + [Networks.Mainnet]: 1, + [Networks.Ropsten]: 3, + [Networks.Rinkeby]: 4, + [Networks.Kovan]: 42, + } as { [networkName: string]: number }, +}; diff --git a/packages/react-shared/src/utils/utils.ts b/packages/react-shared/src/utils/utils.ts new file mode 100644 index 000000000..b3acb081e --- /dev/null +++ b/packages/react-shared/src/utils/utils.ts @@ -0,0 +1,45 @@ +import isMobile = require('is-mobile'); +import * as _ from 'lodash'; +import { scroller } from 'react-scroll'; + +import { EtherscanLinkSuffixes, Networks } from '../types'; + +import { constants } from './constants'; + +export const utils = { + setUrlHash(anchorId: string) { + window.location.hash = anchorId; + }, + scrollToHash(hash: string, containerId: string): void { + let finalHash = hash; + if (_.isEmpty(hash)) { + finalHash = constants.SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(finalHash, { + duration: 0, + offset: 0, + containerId, + }); + }, + isUserOnMobile(): boolean { + const isUserOnMobile = isMobile(); + return isUserOnMobile; + }, + getIdFromName(name: string) { + const id = name.replace(/ /g, '-'); + return id; + }, + getEtherScanLinkIfExists( + addressOrTxHash: string, + networkId: number, + suffix: EtherscanLinkSuffixes, + ): string | undefined { + const networkName = constants.NETWORK_NAME_BY_ID[networkId]; + if (_.isUndefined(networkName)) { + return undefined; + } + const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`; + return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`; + }, +}; -- cgit