diff options
31 files changed, 182 insertions, 42 deletions
diff --git a/packages/react-shared/.npmignore b/packages/react-shared/.npmignore new file mode 100644 index 000000000..87bc30436 --- /dev/null +++ b/packages/react-shared/.npmignore @@ -0,0 +1,5 @@ +.* +yarn-error.log +/src/ +/scripts/ +tsconfig.json diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md new file mode 100644 index 000000000..7c3ac2adf --- /dev/null +++ b/packages/react-shared/CHANGELOG.md @@ -0,0 +1,3 @@ +# CHANGELOG + +## vX.X.X - _TBD, 2018_ diff --git a/packages/react-shared/README.md b/packages/react-shared/README.md new file mode 100644 index 000000000..da7ff83af --- /dev/null +++ b/packages/react-shared/README.md @@ -0,0 +1,47 @@ +## @0xproject/react-shared + +Contains React components & frontend types/utils shared between 0x projects. + +## Installation + +```bash +yarn add @0xproject/react-shared +``` + +## Contributing + +We strongly encourage that the community help us make improvements and determine the future direction of the protocol. 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 + +```bash +yarn build +``` + +### Lint + +```bash +yarn lint +``` + +### Run Tests + +```bash +yarn test +``` diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json new file mode 100644 index 000000000..835915842 --- /dev/null +++ b/packages/react-shared/package.json @@ -0,0 +1,33 @@ +{ + "name": "@0xproject/react-shared", + "version": "0.0.1", + "description": "0x shared react components", + "main": "lib/index.js", + "scripts": { + "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'", + "build": "tsc", + "clean": "shx rm -rf lib" + }, + "author": "Fabio Berger", + "license": "MIT", + "devDependencies": { + "@0xproject/tslint-config": "^0.4.9", + "@types/lodash": "^4.14.86", + "@types/node": "^8.0.53", + "@types/material-ui": "0.18.0", + "@types/react": "^15.0.15", + "@types/react-dom": "^0.14.23", + "shx": "^0.2.2", + "tslint": "^5.9.1", + "typescript": "2.7.1" + }, + "dependencies": { + "basscss": "^8.0.3", + "material-ui": "^0.17.1", + "react": "15.6.1", + "react-dom": "15.6.1", + "lodash": "^4.17.4", + "react-scroll": "^1.5.2", + "react-tap-event-plugin": "^2.0.1" + } +} diff --git a/packages/react-shared/scripts/postpublish.js b/packages/react-shared/scripts/postpublish.js new file mode 100644 index 000000000..639656c7e --- /dev/null +++ b/packages/react-shared/scripts/postpublish.js @@ -0,0 +1,5 @@ +const postpublish_utils = require('../../../scripts/postpublish_utils'); +const packageJSON = require('../package.json'); + +const subPackageName = packageJSON.name; +postpublish_utils.standardPostPublishAsync(subPackageName); diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx index 0270618a0..9b8e6854f 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/react-shared/src/ts/components/anchor_title.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; -import { HeaderSizes, Styles } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; + +import { constants } from '../constants'; +import { HeaderSizes, Styles } from '../types'; +import { utils } from '../utils'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { h2: -20, diff --git a/packages/react-shared/src/ts/constants.ts b/packages/react-shared/src/ts/constants.ts new file mode 100644 index 000000000..20d0c6e92 --- /dev/null +++ b/packages/react-shared/src/ts/constants.ts @@ -0,0 +1,4 @@ +export const constants = { + DOCS_SCROLL_DURATION_MS: 0, + DOCS_CONTAINER_ID: 'documentation', +}; diff --git a/packages/react-shared/src/ts/globals.d.ts b/packages/react-shared/src/ts/globals.d.ts new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/packages/react-shared/src/ts/globals.d.ts diff --git a/packages/react-shared/src/ts/index.ts b/packages/react-shared/src/ts/index.ts new file mode 100644 index 000000000..d33638e62 --- /dev/null +++ b/packages/react-shared/src/ts/index.ts @@ -0,0 +1,6 @@ +export { AnchorTitle } from './components/anchor_title'; + +export { HeaderSizes, Styles } from './types'; + +export { utils } from './utils'; +export { constants } from './constants'; diff --git a/packages/react-shared/src/ts/types.ts b/packages/react-shared/src/ts/types.ts new file mode 100644 index 000000000..e4fe7bff9 --- /dev/null +++ b/packages/react-shared/src/ts/types.ts @@ -0,0 +1,9 @@ +export interface Styles { + [name: string]: React.CSSProperties; +} + +export enum HeaderSizes { + H1 = 'h1', + H2 = 'h2', + H3 = 'h3', +} diff --git a/packages/react-shared/src/ts/utils.ts b/packages/react-shared/src/ts/utils.ts new file mode 100644 index 000000000..822b67496 --- /dev/null +++ b/packages/react-shared/src/ts/utils.ts @@ -0,0 +1,5 @@ +export const utils = { + setUrlHash(anchorId: string) { + window.location.hash = anchorId; + }, +}; diff --git a/packages/react-shared/tsconfig.json b/packages/react-shared/tsconfig.json new file mode 100644 index 000000000..69e8cdc20 --- /dev/null +++ b/packages/react-shared/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es5", + "lib": ["es2017", "dom"], + "sourceMap": true, + "noImplicitReturns": true, + "allowSyntheticDefaultImports": true, + "outDir": "./lib/", + "jsx": "react", + "baseUrl": "./", + "allowJs": true, + "strictNullChecks": false, + "noImplicitThis": false, + "declaration": false, + "paths": { + "*": ["node_modules/@types/*", "*"] + }, + "pretty": true, + "strict": true + }, + "include": ["./src/ts/**/*"] +} diff --git a/packages/react-shared/tslint.json b/packages/react-shared/tslint.json new file mode 100644 index 000000000..d6a5f5031 --- /dev/null +++ b/packages/react-shared/tslint.json @@ -0,0 +1,9 @@ +{ + "extends": ["@0xproject/tslint-config"], + "rules": { + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "completed-docs": false, + "prefer-function-over-method": false + } +} diff --git a/packages/website/package.json b/packages/website/package.json index 07122cc7c..da08ea032 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -20,6 +20,7 @@ "dependencies": { "0x.js": "^0.32.4", "@0xproject/subproviders": "^0.5.0", + "@0xproject/react-shared": "^0.0.1", "@0xproject/utils": "^0.3.4", "accounting": "^0.4.1", "basscss": "^8.0.3", diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 5a3d34fe6..28305637d 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,10 +1,11 @@ import { Order, ZeroEx } from '0x.js'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { FakeTextField } from 'ts/components/ui/fake_text_field'; -import { HashData, Styles } from 'ts/types'; +import { HashData } from 'ts/types'; import { constants } from 'ts/utils/constants'; const styles: Styles = { diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 894edf0a8..b569a9165 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,4 +1,5 @@ import { ZeroEx } from '0x.js'; +import { styles } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import DharmaLoanFrame from 'dharma-loan-frame'; import * as _ from 'lodash'; @@ -29,7 +30,6 @@ import { EtherscanLinkSuffixes, Networks, ScreenWidths, - Styles, Token, TokenByAddress, TokenVisibility, diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index b2b2d2ebd..829225440 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,3 +1,4 @@ +import { styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import Menu from 'material-ui/Menu'; @@ -14,7 +15,7 @@ import { Identicon } from 'ts/components/ui/identicon'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types'; +import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 699bef7a8..ce5f7eb6c 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -1,3 +1,4 @@ +import { styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; @@ -23,7 +24,6 @@ import { Networks, Property, SolidityMethod, - Styles, SupportedDocJson, TypeDefinitionByName, TypescriptMethod, diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index e62c9ecbd..7ac17e608 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,9 +1,9 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title'; import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Type } from 'ts/pages/documentation/type'; -import { AnchorTitle } from 'ts/pages/shared/anchor_title'; -import { Event, EventArg, HeaderSizes } from 'ts/types'; +import { Event, EventArg } from 'ts/types'; import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index d2c96bf8c..e1f09346b 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,11 +1,11 @@ +import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared/anchor_title'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { MethodSignature } from 'ts/pages/documentation/method_signature'; import { SourceLink } from 'ts/pages/documentation/source_link'; -import { AnchorTitle } from 'ts/pages/shared/anchor_title'; -import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { typeDocUtils } from 'ts/utils/typedoc_utils'; diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index b306fa053..2fec4c95f 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,3 +1,4 @@ +import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; @@ -178,12 +179,12 @@ export function Type(props: TypeProps): any { <ScrollLink to={typeDefinitionAnchorId} offset={0} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} + duration={sharedConstants.DOCS_SCROLL_DURATION_MS} + containerId={sharedConstants.DOCS_CONTAINER_ID} > {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? ( <span - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)} style={{ color: colors.lightBlueA700, cursor: 'pointer' }} > {typeName} @@ -192,7 +193,7 @@ export function Type(props: TypeProps): any { <span data-tip={true} data-for={id} - onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)} + onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)} style={{ color: colors.lightBlueA700, cursor: 'pointer', diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index 02bf63258..32c388ace 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -1,3 +1,4 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; @@ -7,8 +8,7 @@ import { Enum } from 'ts/pages/documentation/enum'; import { Interface } from 'ts/pages/documentation/interface'; import { MethodSignature } from 'ts/pages/documentation/method_signature'; import { Type } from 'ts/pages/documentation/type'; -import { AnchorTitle } from 'ts/pages/shared/anchor_title'; -import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types'; +import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 34175abdc..bcbc628f1 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,3 +1,4 @@ +import { styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -5,7 +6,7 @@ import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Question } from 'ts/pages/faq/question'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types'; +import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx index e4553c87f..b1f68c915 100644 --- a/packages/website/ts/pages/shared/markdown_link_block.tsx +++ b/packages/website/ts/pages/shared/markdown_link_block.tsx @@ -1,3 +1,4 @@ +import { utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { configs } from 'ts/utils/configs'; @@ -41,6 +42,6 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M private _onHashUrlClick(href: string) { const hash = href.split('#')[1]; utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); - utils.setUrlHash(hash); + sharedUtils.setUrlHash(hash); } } diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 7253072d9..18cbf70c0 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -1,12 +1,11 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title'; 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 { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block'; -import { HeaderSizes } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 82a40eb7e..abbd34c98 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -1,11 +1,11 @@ +import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { VersionDropDown } from 'ts/pages/shared/version_drop_down'; -import { MenuSubsectionsBySection, Styles } from 'ts/types'; +import { MenuSubsectionsBySection } from 'ts/types'; import { colors } from 'ts/utils/colors'; -import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { @@ -171,7 +171,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N } private _onMenuItemClick(name: string): void { const id = utils.getIdFromName(name); - utils.setUrlHash(id); + sharedUtils.setUrlHash(id); this.props.onMenuItemClick(); } } diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx index 52a1f30d9..758aec574 100644 --- a/packages/website/ts/pages/shared/section_header.tsx +++ b/packages/website/ts/pages/shared/section_header.tsx @@ -1,7 +1,6 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title'; import * as React from 'react'; import { Element as ScrollElement } from 'react-scroll'; -import { AnchorTitle } from 'ts/pages/shared/anchor_title'; -import { HeaderSizes } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 4bb6052a2..d65834a9a 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,3 +1,4 @@ +import { HeaderSizes, styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; @@ -9,7 +10,7 @@ import { MarkdownSection } from 'ts/pages/shared/markdown_section'; import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; import { SectionHeader } from 'ts/pages/shared/section_header'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types'; +import { Article, ArticlesBySection, WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 28663270e..c1b23ce1e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -156,10 +156,6 @@ export interface TrackedTokensByUserAddress { [userAddress: string]: TrackedTokensByNetworkId; } -export interface Styles { - [name: string]: React.CSSProperties; -} - export interface ProfileInfo { name: string; title?: string; @@ -535,12 +531,6 @@ export enum TokenVisibility { TRACKED = 'TRACKED', } -export enum HeaderSizes { - H1 = 'h1', - H2 = 'h2', - H3 = 'h3', -} - export interface DoxityDocObj { [contractName: string]: DoxityContractObj; } diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 3476b7375..1f87fe189 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -4,8 +4,6 @@ import { Networks } from 'ts/types'; export const constants = { DECIMAL_PLACES_ETH: 18, DECIMAL_PLACES_ZRX: 18, - DOCS_SCROLL_DURATION_MS: 0, - DOCS_CONTAINER_ID: 'documentation', GENESIS_ORDER_BLOCK_BY_NETWORK_ID: { 1: 4145578, 42: 3117574, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index a1e045af7..a1e11c85a 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -152,9 +152,6 @@ export const utils = { const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`; return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`; }, - setUrlHash(anchorId: string) { - window.location.hash = anchorId; - }, async isU2FSupportedAsync(): Promise<boolean> { const w = window as any; return new Promise((resolve: (isSupported: boolean) => void) => { |