diff options
Diffstat (limited to 'packages/react-shared')
20 files changed, 0 insertions, 1355 deletions
diff --git a/packages/react-shared/.npmignore b/packages/react-shared/.npmignore deleted file mode 100644 index d645458f6..000000000 --- a/packages/react-shared/.npmignore +++ /dev/null @@ -1,6 +0,0 @@ -.* -yarn-error.log -/src/ -/scripts/ -tsconfig.json -/lib/monorepo_scripts/ diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json deleted file mode 100644 index 99a8779ac..000000000 --- a/packages/react-shared/CHANGELOG.json +++ /dev/null @@ -1,370 +0,0 @@ -[ - { - "version": "2.0.0", - "changes": [ - { - "note": "Upgrade the bignumber.js to v8.0.2", - "pr": 1517 - } - ] - }, - { - "timestamp": 1547561734, - "version": "1.1.2", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1547225310, - "version": "1.1.1", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "version": "1.1.0", - "changes": [ - { - "note": "Change implementation to use react-router-dom NavLink instead of Link. Expose `activeStyle` prop.", - "pr": 1448 - } - ], - "timestamp": 1547040760 - }, - { - "version": "1.0.25", - "changes": [ - { - "note": "Dependencies updated" - } - ], - "timestamp": 1544739608 - }, - { - "version": "1.0.24", - "changes": [ - { - "note": "Dependencies updated" - } - ], - "timestamp": 1544570656 - }, - { - "timestamp": 1543401373, - "version": "1.0.23", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1542821676, - "version": "1.0.22", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1542208198, - "version": "1.0.21", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1542134075, - "version": "1.0.20", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1542028948, - "version": "1.0.19", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "version": "1.0.18", - "changes": [ - { - "note": "Dependencies updated" - } - ], - "timestamp": 1541740904 - }, - { - "version": "1.0.17", - "changes": [ - { - "note": "Dependencies updated" - } - ], - "timestamp": 1539871071 - }, - { - "timestamp": 1538693146, - "version": "1.0.16", - "changes": [ - { - "note": "Unpublished package" - } - ] - }, - { - "timestamp": 1538475601, - "version": "1.0.14", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1538157789, - "version": "1.0.13", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1537907159, - "version": "1.0.12", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1537875740, - "version": "1.0.11", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1537541580, - "version": "1.0.10", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1536142250, - "version": "1.0.9", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1535377027, - "version": "1.0.8", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1535133899, - "version": "1.0.7", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1534210131, - "version": "1.0.6", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532619515, - "version": "1.0.5", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532614997, - "version": "1.0.4", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532605697, - "version": "1.0.3", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532551340, - "version": "1.0.2", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532357734, - "version": "1.0.1", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1532043000, - "version": "1.0.0", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1531919263, - "version": "0.2.3", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1531149657, - "version": "0.2.2", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1529397769, - "version": "0.2.1", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1525477860, - "version": "0.2.0", - "changes": [ - { - "note": "Removed portal specific colors" - } - ] - }, - { - "timestamp": 1525477860, - "version": "0.1.6", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1525466747, - "version": "0.1.5", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1525428773, - "version": "0.1.4", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1524044013, - "version": "0.1.3", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1523462196, - "version": "0.1.2", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "timestamp": 1522673609, - "version": "0.1.1", - "changes": [ - { - "note": "Dependencies updated" - } - ] - }, - { - "version": "0.1.0", - "changes": [ - { - "note": "Added new colors", - "pr": 468 - }, - { - "note": "Fix section and menuItem text display to replace dashes with spaces." - }, - { - "note": "Reorganized colors and added new ones" - } - ], - "timestamp": 1522658513 - } -] diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md deleted file mode 100644 index e1a5df403..000000000 --- a/packages/react-shared/CHANGELOG.md +++ /dev/null @@ -1,164 +0,0 @@ -<!-- -changelogUtils.file is auto-generated using the monorepo-scripts package. Don't edit directly. -Edit the package's CHANGELOG.json file only. ---> - -CHANGELOG - -## v1.1.2 - _January 15, 2019_ - - * Dependencies updated - -## v1.1.1 - _January 11, 2019_ - - * Dependencies updated - -## v1.1.0 - _January 9, 2019_ - - * Change implementation to use react-router-dom NavLink instead of Link. Expose `activeStyle` prop. (#1448) - -## v1.0.25 - _December 13, 2018_ - - * Dependencies updated - -## v1.0.24 - _December 11, 2018_ - - * Dependencies updated - -## v1.0.23 - _November 28, 2018_ - - * Dependencies updated - -## v1.0.22 - _November 21, 2018_ - - * Dependencies updated - -## v1.0.21 - _November 14, 2018_ - - * Dependencies updated - -## v1.0.20 - _November 13, 2018_ - - * Dependencies updated - -## v1.0.19 - _November 12, 2018_ - - * Dependencies updated - -## v1.0.18 - _November 9, 2018_ - - * Dependencies updated - -## v1.0.17 - _October 18, 2018_ - - * Dependencies updated - -## v1.0.16 - _October 4, 2018_ - - * Unpublished package - -## v1.0.14 - _October 2, 2018_ - - * Dependencies updated - -## v1.0.13 - _September 28, 2018_ - - * Dependencies updated - -## v1.0.12 - _September 25, 2018_ - - * Dependencies updated - -## v1.0.11 - _September 25, 2018_ - - * Dependencies updated - -## v1.0.10 - _September 21, 2018_ - - * Dependencies updated - -## v1.0.9 - _September 5, 2018_ - - * Dependencies updated - -## v1.0.8 - _August 27, 2018_ - - * Dependencies updated - -## v1.0.7 - _August 24, 2018_ - - * Dependencies updated - -## v1.0.6 - _August 14, 2018_ - - * Dependencies updated - -## v1.0.5 - _July 26, 2018_ - - * Dependencies updated - -## v1.0.4 - _July 26, 2018_ - - * Dependencies updated - -## v1.0.3 - _July 26, 2018_ - - * Dependencies updated - -## v1.0.2 - _July 25, 2018_ - - * Dependencies updated - -## v1.0.1 - _July 23, 2018_ - - * Dependencies updated - -## v1.0.0 - _July 19, 2018_ - - * Dependencies updated - -## v0.2.3 - _July 18, 2018_ - - * Dependencies updated - -## v0.2.2 - _July 9, 2018_ - - * Dependencies updated - -## v0.2.1 - _June 19, 2018_ - - * Dependencies updated - -## v0.2.0 - _May 4, 2018_ - - * Removed portal specific colors - -## v0.1.6 - _May 4, 2018_ - - * Dependencies updated - -## v0.1.5 - _May 4, 2018_ - - * Dependencies updated - -## v0.1.4 - _May 4, 2018_ - - * Dependencies updated - -## v0.1.3 - _April 18, 2018_ - - * Dependencies updated - -## v0.1.2 - _April 11, 2018_ - - * Dependencies updated - -## v0.1.1 - _April 2, 2018_ - - * Dependencies updated - -## v0.1.0 - _April 2, 2018_ - - * Added new colors (#468) - * Fix section and menuItem text display to replace dashes with spaces. - * Reorganized colors and added new ones diff --git a/packages/react-shared/README.md b/packages/react-shared/README.md deleted file mode 100644 index 7ff9a94d9..000000000 --- a/packages/react-shared/README.md +++ /dev/null @@ -1,63 +0,0 @@ -## @0x/react-shared - -Contains React components & frontend types/utils shared between 0x projects. - -## Installation - -```bash -yarn add @0x/react-shared -``` - -If your project is in [TypeScript](https://www.typescriptlang.org/), add the following to your `tsconfig.json`: - -```json -"compilerOptions": { - "typeRoots": ["node_modules/@0x/typescript-typings/types", "node_modules/@types"], -} -``` - -## Contributing - -We welcome improvements and fixes from the wider community! To report bugs within this package, please create an issue in this repository. - -Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started. - -### Install dependencies - -If you don't have yarn workspaces enabled (Yarn < v1.0) - enable them: - -```bash -yarn config set workspaces-experimental true -``` - -Then install dependencies - -```bash -yarn install -``` - -### Build - -To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: - -```bash -PKG=@0x/react-shared yarn build -``` - -Or continuously rebuild on change: - -```bash -PKG=@0x/react-shared yarn watch -``` - -### Clean - -```bash -yarn clean -``` - -### Lint - -```bash -yarn lint -``` diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json deleted file mode 100644 index 4be4742b0..000000000 --- a/packages/react-shared/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@0x/react-shared", - "version": "1.1.2", - "engines": { - "node": ">=6.12" - }, - "description": "0x shared react components", - "main": "lib/index.js", - "types": "lib/index.d.ts", - "scripts": { - "lint": "tslint --format stylish --project .", - "build": "tsc", - "build:ci": "yarn build", - "watch_without_deps": "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": { - "@0x/dev-utils": "^1.0.24", - "@0x/tslint-config": "^2.0.2", - "make-promises-safe": "^1.1.0", - "shx": "^0.2.2", - "tslint": "^5.9.1", - "typescript": "3.0.1" - }, - "dependencies": { - "@0x/types": "^1.5.2", - "@material-ui/core": "^3.0.1", - "@types/is-mobile": "0.3.0", - "@types/lodash": "4.14.104", - "@types/material-ui": "0.18.0", - "@types/node": "*", - "@types/react": "*", - "@types/react-dom": "*", - "@types/react-router-dom": "^4.0.4", - "@types/react-scroll": "1.5.3", - "@types/styled-components": "4.0.0", - "@types/valid-url": "^1.0.2", - "basscss": "^8.0.3", - "change-case": "^3.0.2", - "is-mobile": "^0.2.2", - "lodash": "^4.17.5", - "material-ui": "^0.20.0", - "react": "^16.5.2", - "react-dom": "^16.5.2", - "react-highlight": "0xproject/react-highlight#fix/react-version", - "react-markdown": "^3.2.2", - "react-router-dom": "^4.1.1", - "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", - "styled-components": "^4.0.1", - "valid-url": "^1.0.9" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx deleted file mode 100644 index fccd56de7..000000000 --- a/packages/react-shared/src/components/anchor_title.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { Link } from '../components/link'; -import { HeaderSizes, Styles } from '../types'; -import { colors } from '../utils/colors'; - -export interface AnchorTitleProps { - title: string | React.ReactNode; - id: string; - headerSize: HeaderSizes; - shouldShowAnchor: boolean; - isDisabled: boolean; -} - -export interface AnchorTitleState {} - -const styles: Styles = { - h1: { - fontSize: '1.875em', - }, - h2: { - fontSize: '1.5em', - fontWeight: 400, - }, - h3: { - fontSize: '1.17em', - }, -}; - -interface AnchorIconProps { - shouldShowAnchor: boolean; -} - -const AnchorIcon = styled.i<AnchorIconProps>` - opacity: ${props => (props.shouldShowAnchor ? 1 : 0)}; - &:hover { - opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)}; - } - font-size: 20px; - transform: rotate(45deg); - cursor: pointer; -`; - -export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> { - public static defaultProps: Partial<AnchorTitleProps> = { - isDisabled: false, - }; - public render(): React.ReactNode { - return ( - <div - className="relative flex" - style={ - { - ...styles[this.props.headerSize], - fontWeight: 'bold', - display: 'block', - WebkitMarginStart: 0, - WebkitMarginEnd: 0, - } as any - } - > - <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}> - {this.props.title} - </div> - {!this.props.isDisabled && ( - <Link to={this.props.id}> - <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} /> - </Link> - )} - </div> - ); - } -} diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx deleted file mode 100644 index 2fb19ac11..000000000 --- a/packages/react-shared/src/components/link.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { NavLink 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'; - -export interface BaseLinkProps { - to: string; - shouldOpenInNewTab?: boolean; - className?: string; - onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void; - onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void; - onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void; - textDecoration?: string; - fontColor?: string; -} - -export interface ScrollLinkProps extends BaseLinkProps { - onActivityChanged?: (isActive: boolean) => void; -} - -export interface ReactLinkProps extends BaseLinkProps { - activeStyle?: React.CSSProperties; -} - -export type LinkProps = ReactLinkProps & ScrollLinkProps; - -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 class Link extends React.Component<LinkProps, LinkState> { - public static defaultProps: Partial<LinkProps> = { - shouldOpenInNewTab: false, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), - textDecoration: 'none', - fontColor: 'inherit', - }; - private _outerReactScrollSpan: HTMLSpanElement | null; - constructor(props: LinkProps) { - super(props); - this._outerReactScrollSpan = null; - } - public render(): React.ReactNode { - 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}`); - } - - const styleWithDefault = { - textDecoration: this.props.textDecoration, - cursor: 'pointer', - color: this.props.fontColor, - }; - - switch (type) { - case LinkType.External: - return ( - <a - target={this.props.shouldOpenInNewTab ? '_blank' : ''} - className={this.props.className} - style={styleWithDefault} - href={this.props.to} - onMouseOver={this.props.onMouseOver} - onMouseEnter={this.props.onMouseEnter} - onMouseLeave={this.props.onMouseLeave} - > - {this.props.children} - </a> - ); - case LinkType.ReactRoute: - return ( - <ReactRounterLink - to={this.props.to} - className={this.props.className} - style={styleWithDefault} - target={this.props.shouldOpenInNewTab ? '_blank' : ''} - onMouseOver={this.props.onMouseOver} - onMouseEnter={this.props.onMouseEnter} - onMouseLeave={this.props.onMouseLeave} - activeStyle={this.props.activeStyle} - > - {this.props.children} - </ReactRounterLink> - ); - case LinkType.ReactScroll: - return ( - <span - ref={input => (this._outerReactScrollSpan = input)} - onMouseOver={this.props.onMouseOver} - onMouseEnter={this.props.onMouseEnter} - onMouseLeave={this.props.onMouseLeave} - > - <ScrollLink - to={this.props.to} - offset={0} - spy={true} - hashSpy={true} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.SCROLL_CONTAINER_ID} - className={this.props.className} - style={styleWithDefault} - onSetActive={this._onActivityChanged.bind(this, true)} - onSetInactive={this._onActivityChanged.bind(this, false)} - > - <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}> - {this.props.children} - </span> - </ScrollLink> - </span> - ); - default: - throw new Error(`Unrecognized LinkType: ${type}`); - } - } - private _onActivityChanged(isActive: boolean): void { - if (this.props.onActivityChanged) { - this.props.onActivityChanged(isActive); - } - } - // 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 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)) { - this._outerReactScrollSpan.click(); - } - } -} diff --git a/packages/react-shared/src/components/markdown_code_block.tsx b/packages/react-shared/src/components/markdown_code_block.tsx deleted file mode 100644 index 3b28424cd..000000000 --- a/packages/react-shared/src/components/markdown_code_block.tsx +++ /dev/null @@ -1,24 +0,0 @@ -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<MarkdownCodeBlockProps, MarkdownCodeBlockState> { - // 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): boolean { - return nextProps.value !== this.props.value || nextProps.language !== this.props.language; - } - public render(): React.ReactNode { - return ( - <span style={{ fontSize: 14 }}> - <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight> - </span> - ); - } -} diff --git a/packages/react-shared/src/components/markdown_link_block.tsx b/packages/react-shared/src/components/markdown_link_block.tsx deleted file mode 100644 index f083a91cf..000000000 --- a/packages/react-shared/src/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<MarkdownLinkBlockProps, MarkdownLinkBlockState> { - // 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): boolean { - return nextProps.href !== this.props.href; - } - public render(): React.ReactNode { - 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 ( - <a href={href} target="_blank" rel="nofollow noreferrer noopener"> - {this.props.children} - </a> - ); - } else if (isLinkToSection) { - return ( - <a - style={{ cursor: 'pointer', textDecoration: 'underline' }} - onClick={this._onHashUrlClick.bind(this, href)} - > - {this.props.children} - </a> - ); - } else { - return <a href={href}>{this.props.children}</a>; - } - } - private _onHashUrlClick(href: string): void { - const hash = href.split('#')[1]; - utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID); - utils.setUrlHash(hash); - } -} diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx deleted file mode 100644 index eeaef8571..000000000 --- a/packages/react-shared/src/components/markdown_paragraph_block.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { colors } from '../utils/colors'; - -export interface MarkdownParagraphBlockProps {} - -export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => { - return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{children}</span>; -}; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx deleted file mode 100644 index 42c910c11..000000000 --- a/packages/react-shared/src/components/markdown_section.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as _ from 'lodash'; -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 { Link } from './link'; -import { MarkdownCodeBlock } from './markdown_code_block'; -import { MarkdownLinkBlock } from './markdown_link_block'; -import { MarkdownParagraphBlock } from './markdown_paragraph_block'; - -export interface MarkdownSectionProps { - sectionName: string; - markdownContent: string; - headerSize?: HeaderSizes; - githubLink?: string; - alternativeSectionTitle?: string; -} - -interface DefaultMarkdownSectionProps { - headerSize: HeaderSizes; -} - -type PropsWithDefaults = MarkdownSectionProps & DefaultMarkdownSectionProps; - -export interface MarkdownSectionState { - shouldShowAnchor: boolean; -} - -export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> { - public static defaultProps: Partial<MarkdownSectionProps> = { - headerSize: HeaderSizes.H3, - }; - constructor(props: MarkdownSectionProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render(): React.ReactNode { - const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; - - const id = utils.getIdFromName(sectionName); - const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName); - const title = !_.isUndefined(this.props.alternativeSectionTitle) - ? this.props.alternativeSectionTitle - : _.capitalize(formattedSectionName); - return ( - <div - className="md-px1 sm-px2 overflow-hidden" - onMouseOver={this._setAnchorVisibility.bind(this, true)} - onMouseOut={this._setAnchorVisibility.bind(this, false)} - > - <ScrollElement name={id} style={{ paddingBottom: 20 }}> - <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}> - <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ color: colors.grey700 }}> - <AnchorTitle - headerSize={headerSize} - title={title} - id={id} - shouldShowAnchor={this.state.shouldShowAnchor} - /> - </span> - </div> - <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}> - {!_.isUndefined(githubLink) && ( - <div style={{ lineHeight: 2.1 }}> - <Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}> - Edit on Github - </Link> - </div> - )} - </div> - </div> - <ReactMarkdown - source={markdownContent} - escapeHtml={false} - renderers={{ - code: MarkdownCodeBlock, - link: MarkdownLinkBlock, - paragraph: MarkdownParagraphBlock, - }} - /> - <div - style={{ - width: '100%', - height: 1, - backgroundColor: colors.grey300, - marginTop: 32, - }} - /> - </ScrollElement> - </div> - ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean): void { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx deleted file mode 100644 index 137b63765..000000000 --- a/packages/react-shared/src/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<SectionHeaderProps, SectionHeaderState> { - public static defaultProps: Partial<SectionHeaderProps> = { - headerSize: HeaderSizes.H2, - }; - constructor(props: SectionHeaderProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render(): React.ReactNode { - const { headerSize } = this.props as PropsWithDefaults; - - const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName); - const id = utils.getIdFromName(finalSectionName); - return ( - <div - onMouseOver={this._setAnchorVisibility.bind(this, true)} - onMouseOut={this._setAnchorVisibility.bind(this, false)} - > - <ScrollElement name={id}> - <AnchorTitle - headerSize={headerSize} - title={ - <span - style={{ - textTransform: 'capitalize', - color: colors.grey, - fontFamily: 'Roboto Mono', - fontWeight: 300, - fontSize: 27, - }} - > - {finalSectionName} - </span> - } - id={id} - shouldShowAnchor={this.state.shouldShowAnchor} - /> - </ScrollElement> - </div> - ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean): void { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/globals.d.ts b/packages/react-shared/src/globals.d.ts deleted file mode 100644 index 94e63a32d..000000000 --- a/packages/react-shared/src/globals.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -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 deleted file mode 100644 index 285e1c6b4..000000000 --- a/packages/react-shared/src/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 { SectionHeader } from './components/section_header'; -export { Link, LinkProps } from './components/link'; - -export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; - -export { utils } from './utils/utils'; -export { constants } from './utils/constants'; -export { colors } from './utils/colors'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts deleted file mode 100644 index 9e8dcb6b6..000000000 --- a/packages/react-shared/src/types.ts +++ /dev/null @@ -1,33 +0,0 @@ -export interface Styles { - [name: string]: React.CSSProperties; -} - -export enum HeaderSizes { - H1 = 'h1', - H2 = 'h2', - H3 = 'h3', -} - -export enum EtherscanLinkSuffixes { - Address = 'address', - Tx = 'tx', -} - -export enum Networks { - Mainnet = 'Mainnet', - Kovan = 'Kovan', - Ropsten = 'Ropsten', - Rinkeby = 'Rinkeby', -} - -export enum LinkType { - External = 'EXTERNAL', - ReactScroll = 'REACT_SCROLL', - ReactRoute = 'REACT_ROUTE', -} - -export interface ALink { - title: string; - to: string; - shouldOpenInNewTab?: boolean; -} diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts deleted file mode 100644 index a4dd7fefa..000000000 --- a/packages/react-shared/src/utils/colors.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { colors as materialUiColors } from 'material-ui/styles'; - -const baseColors = { - gray40: '#F8F8F8', - grey50: '#FAFAFA', - grey100: '#F5F5F5', - lightestGrey: '#F0F0F0', - greyishPink: '#E6E5E5', - grey300: '#E0E0E0', - beigeWhite: '#E4E4E4', - lightBgGrey: '#EDEDED', - grey325: '#dfdfdf', - grey350: '#CACACA', - grey400: '#BDBDBD', - lightGrey: '#BBBBBB', - grey500: '#9E9E9E', - grey: '#A5A5A5', - darkGrey: '#818181', - landingLinkGrey: '#919191', - linkSectionGrey: '#999999', - greyTheme: '#666666', - grey700: '#616161', - grey750: '#515151', - grey800: '#424242', - darkerGrey: '#393939', - heroGrey: '#404040', - projectsGrey: '#343333', - darkestGrey: '#272727', - lightestBlue: '#E7F1FD', - lightBlue: '#60A4F4', - lightBlueA700: '#0091EA', - lightLinkBlue: '#3289F1', - mediumBlue: '#488AEA', - linkBlue: '#1D5CDE', - darkBlue: '#4D5481', - lightTurquois: '#aefcdc', - 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', -}; - -export const colors = { - ...materialUiColors, - ...baseColors, -}; diff --git a/packages/react-shared/src/utils/constants.ts b/packages/react-shared/src/utils/constants.ts deleted file mode 100644 index 2dca1a078..000000000 --- a/packages/react-shared/src/utils/constants.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Networks } from '../types'; - -export const constants = { - DOCS_SCROLL_DURATION_MS: 0, - SCROLL_CONTAINER_ID: 'scroll_container', - 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 deleted file mode 100644 index 142aea85d..000000000 --- a/packages/react-shared/src/utils/utils.ts +++ /dev/null @@ -1,52 +0,0 @@ -import changeCase = require('change-case'); -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): void { - 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): string { - const id = name.replace(/ /g, '-'); - return id; - }, - convertDashesToSpaces(text: string): string { - return text.replace(/-/g, ' '); - }, - convertCamelCaseToSpaces(text: string): string { - return changeCase.snake(text).replace(/_/g, ' '); - }, - 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/tsconfig.json b/packages/react-shared/tsconfig.json deleted file mode 100644 index 5abe0ab4e..000000000 --- a/packages/react-shared/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../../tsconfig", - "compilerOptions": { - "outDir": "lib", - "rootDir": "src", - "jsx": "react", - "baseUrl": ".", - "paths": { - "*": ["node_modules/@types/*", "*"] - } - }, - "include": ["./src/**/*"] -} diff --git a/packages/react-shared/tslint.json b/packages/react-shared/tslint.json deleted file mode 100644 index c3f6d9cae..000000000 --- a/packages/react-shared/tslint.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": ["@0x/tslint-config"], - "rules": { - "no-object-literal-type-assertion": false, - "completed-docs": false, - "prefer-function-over-method": false, - "custom-no-magic-numbers": false - } -} |