diff --git a/.storybook/config.tsx b/.storybook/config.tsx index de6076c..4e2edfa 100644 --- a/.storybook/config.tsx +++ b/.storybook/config.tsx @@ -1,7 +1,7 @@ import React from "react"; import { configure, addDecorator } from "@storybook/react"; import { withInfo } from "@storybook/addon-info"; -import { ThemeProvider } from "../src/styled-components"; +import { ThemeProvider } from "styled-components"; import { createTheme } from "../src/theme/createTheme"; import { createPalette } from "../src/theme/createPalette"; diff --git a/package-lock.json b/package-lock.json index 2d17bba..8b25652 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2582,6 +2582,16 @@ "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==" }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -2653,6 +2663,15 @@ "@types/react": "*" } }, + "@types/react-native": { + "version": "0.61.15", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.61.15.tgz", + "integrity": "sha512-+lOUYk3yOfpyMy2HcVbR5bZnbExiVahMr3AqWNPh/01N0quH7nBzlou+/rpbvmDXSGwCh3QjWWfEkLNRfvbiiA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz", @@ -2688,6 +2707,18 @@ "@types/webpack-env": "*" } }, + "@types/styled-components": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-4.4.3.tgz", + "integrity": "sha512-U0udeNOZBfUkJycmGJwmzun0FBt11rZy08weVQmE2xfUNAbX8AGOEWxWna2d+qAUKxKgMlcG+TZT0+K2FfDcnQ==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "@types/react-native": "*", + "csstype": "^2.2.0" + } + }, "@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", @@ -3876,6 +3907,18 @@ "recast": "^0.14.7" } }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "dev": true, + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -4671,16 +4714,6 @@ "node-int64": "^0.4.0" } }, - "buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz", - "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==", - "dev": true, - "requires": { - "base64-js": "^1.0.2", - "ieee754": "^1.1.4" - } - }, "buffer-from": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", @@ -4833,6 +4866,12 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true + }, "can-use-dom": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz", @@ -5748,14 +5787,22 @@ "dev": true }, "css-to-react-native": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.2.tgz", - "integrity": "sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", "dev": true, "requires": { + "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", - "fbjs": "^0.8.5", - "postcss-value-parser": "^3.3.0" + "postcss-value-parser": "^4.0.2" + }, + "dependencies": { + "postcss-value-parser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz", + "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==", + "dev": true + } } }, "css-tree": { @@ -8819,9 +8866,9 @@ } }, "has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, "has-symbols": { @@ -16161,26 +16208,36 @@ } }, "styled-components": { - "version": "3.4.10", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.4.10.tgz", - "integrity": "sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q==", - "dev": true, - "requires": { - "buffer": "^5.0.3", - "css-to-react-native": "^2.0.3", - "fbjs": "^0.8.16", - "hoist-non-react-statics": "^2.5.0", - "prop-types": "^15.5.4", - "react-is": "^16.3.1", - "stylis": "^3.5.0", - "stylis-rule-sheet": "^0.0.10", - "supports-color": "^3.2.3" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.0.1.tgz", + "integrity": "sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.3", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" }, "dependencies": { - "hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==", + "@emotion/is-prop-valid": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", + "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==", + "dev": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "dev": true } } @@ -16209,25 +16266,13 @@ } } }, - "stylis": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", - "dev": true - }, - "stylis-rule-sheet": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "dev": true - }, "supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { - "has-flag": "^1.0.0" + "has-flag": "^3.0.0" } }, "svgo": { diff --git a/package.json b/package.json index 8ae19f4..3f9946b 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@types/react-transition-group": "^2.0.11", "@types/storybook__addon-info": "^4.1.2", "@types/storybook__react": "^4.0.2", + "@types/styled-components": "^4.4.3", "babel-loader": "^8.0.6", "bignumber.js": "^8.0.1", "husky": "^1.0.0-rc.9", @@ -47,7 +48,7 @@ "react-dom": "^16.8.6", "react-scripts": "^3.0.1", "rimraf": "^2.6.2", - "styled-components": "^3.4.2", + "styled-components": "^5.0.1", "ts-loader": "^6.0.4", "tslib": "^1.9.3", "tslint": "^5.18.0", @@ -74,6 +75,6 @@ "mobx-react": ">=5.1.2", "react": "^16.8.6", "react-dom": "^16.8.6", - "styled-components": "^3.4.2" + "styled-components": "^5.0.1" } } diff --git a/src/ErrorBox.stories.tsx b/src/ErrorBox.stories.tsx index 56bb43e..e8b6862 100644 --- a/src/ErrorBox.stories.tsx +++ b/src/ErrorBox.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { ErrorBox } from "./ErrorBox"; -import styled from "./styled-components"; +import styled from "styled-components"; const PrimaryWrapper = styled.div` position: relative; diff --git a/src/LoadingBox.stories.tsx b/src/LoadingBox.stories.tsx index f32aeef..d95cf1c 100644 --- a/src/LoadingBox.stories.tsx +++ b/src/LoadingBox.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { LoadingBox } from "./LoadingBox"; -import styled from "./styled-components"; +import styled from "styled-components"; const PrimaryWrapper = styled.div` position: relative; diff --git a/src/MessageBox.stories.tsx b/src/MessageBox.stories.tsx index c60f066..5e71819 100644 --- a/src/MessageBox.stories.tsx +++ b/src/MessageBox.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { MessageBox } from "./MessageBox"; import { InfoIcon } from "./icon/InfoIcon"; -import styled from "./styled-components"; +import styled from "styled-components"; const PrimaryWrapper = styled.div` position: relative; diff --git a/src/MessageBox.tsx b/src/MessageBox.tsx index 887001a..0c925f3 100644 --- a/src/MessageBox.tsx +++ b/src/MessageBox.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "./styled-components"; +import styled from "styled-components"; import { ISvgIconProps } from "./util/react/SvgIcon"; import { IBoxColorsThunk } from "./layout/content/box/IBoxColorsThunk"; import { ITheme } from "./theme/ITheme"; @@ -17,7 +17,7 @@ const colorSets: Record> = { }) }; -const MessageBoxRoot = styled("div")` +const MessageBoxRoot = styled.div` position: absolute; top: 50%; left: 50%; diff --git a/src/control/Button.stories.tsx b/src/control/Button.stories.tsx index 0457de8..64d2a91 100644 --- a/src/control/Button.stories.tsx +++ b/src/control/Button.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Button } from "./Button"; import { ArrowForwardIcon } from "../icon/ArrowForwardIcon"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SpinnerLite } from "../fx/SpinnerLite"; const ButtonContainer = styled.div` diff --git a/src/control/Button.tsx b/src/control/Button.tsx index d5f76b2..d33d0ce 100644 --- a/src/control/Button.tsx +++ b/src/control/Button.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; import { Box, IBoxProps } from "../layout/content/box/Box"; import { IBoxColorsThunk } from "../layout/content/box/IBoxColorsThunk"; import { HoverState } from "../util/react/HoverState"; @@ -14,7 +14,7 @@ interface IButtonRootProps { shadowColor(theme: ITheme): string | undefined; } -const ButtonRoot = styled("button")` +const ButtonRoot = styled.button` ${props => !props.disabled ? css` cursor: pointer; ` : ``} diff --git a/src/control/Checkbox.stories.tsx b/src/control/Checkbox.stories.tsx index 7c7062c..ce2d74d 100644 --- a/src/control/Checkbox.stories.tsx +++ b/src/control/Checkbox.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Checkbox } from "./Checkbox"; -import styled from "../styled-components"; +import styled from "styled-components"; const CheckboxContainer = styled.div` display: flex; diff --git a/src/control/ExternalLink.tsx b/src/control/ExternalLink.tsx index 8c5adc6..e24f34e 100644 --- a/src/control/ExternalLink.tsx +++ b/src/control/ExternalLink.tsx @@ -1,5 +1,5 @@ import React, { AnchorHTMLAttributes } from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; const ExternalLinkRoot = styled.a` text-decoration: none; diff --git a/src/control/IconButton.tsx b/src/control/IconButton.tsx index 74a1722..2fcd0cf 100644 --- a/src/control/IconButton.tsx +++ b/src/control/IconButton.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { withTheme } from "../styled-components"; +import styled, { withTheme } from "styled-components"; import { ITheme } from "../theme/ITheme"; interface IIconProps { @@ -26,7 +26,7 @@ interface IIconButtonRootProps { onClick?(): void; } -const IconButtonRoot = styled("button")` +const IconButtonRoot = styled.button` display: block; background-color: transparent; border: none; /* Remove borders */ diff --git a/src/control/Input.stories.tsx b/src/control/Input.stories.tsx index 2a81465..1875f34 100644 --- a/src/control/Input.stories.tsx +++ b/src/control/Input.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Input } from "./Input"; -import styled from "../styled-components"; +import styled from "styled-components"; const InputContainer = styled.div` display: flex; diff --git a/src/control/Input.tsx b/src/control/Input.tsx index 8692f11..0f29dd8 100644 --- a/src/control/Input.tsx +++ b/src/control/Input.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; import Color from "color"; const HEIGHT = 36; diff --git a/src/control/Radio.stories.tsx b/src/control/Radio.stories.tsx index 3b55acc..0fa4453 100644 --- a/src/control/Radio.stories.tsx +++ b/src/control/Radio.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Radio } from "./Radio"; import { Button } from "./Button"; -import styled from "../styled-components"; +import styled from "styled-components"; const RadioContainer = styled.div` display: flex; diff --git a/src/control/Select.stories.tsx b/src/control/Select.stories.tsx index 39b3457..9058b62 100644 --- a/src/control/Select.stories.tsx +++ b/src/control/Select.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { Select } from "./Select"; import { GithubIcon } from "../icon/GithubIcon"; import { Option } from "./Option"; diff --git a/src/control/Textarea.stories.tsx b/src/control/Textarea.stories.tsx index a6f59c4..202e837 100644 --- a/src/control/Textarea.stories.tsx +++ b/src/control/Textarea.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { Textarea } from "./Textarea"; const TextareaContainer = styled.div` diff --git a/src/control/Textarea.tsx b/src/control/Textarea.tsx index 0902f00..d314bde 100644 --- a/src/control/Textarea.tsx +++ b/src/control/Textarea.tsx @@ -1,5 +1,5 @@ import { Input } from "./Input"; -import styled from "../styled-components"; +import styled from "styled-components"; const $Textarea = Input.withComponent("textarea"); diff --git a/src/control/accordion/AccordionContentFrame.tsx b/src/control/accordion/AccordionContentFrame.tsx index 1cc1ee2..42d9dcf 100644 --- a/src/control/accordion/AccordionContentFrame.tsx +++ b/src/control/accordion/AccordionContentFrame.tsx @@ -1,10 +1,10 @@ import * as React from "react"; -import styled, { css, withTheme } from "../../styled-components"; +import styled, { css, withTheme } from "styled-components"; import { ITheme } from "../../theme/ITheme"; const ARROW_OFFSET_TOP = 7; -const AccordionContentFrameRoot = styled("div")` +const AccordionContentFrameRoot = styled.div` ${ props => !props.noBorder ? css` border-top: ${props.borderColor} 1px solid; ` : `` } @@ -44,6 +44,7 @@ interface IAccordionContentFrameProps { /** Doesn't affect the arrow border. Set borderColor to transparent to disable the arrow border */ noBorder?: boolean; theme?: ITheme; + children?: React.ReactNode; } class $AccordionContentFrame extends React.PureComponent { diff --git a/src/control/accordion/AccordionHorizontal.stories.tsx b/src/control/accordion/AccordionHorizontal.stories.tsx index 4b65b05..6140fc1 100644 --- a/src/control/accordion/AccordionHorizontal.stories.tsx +++ b/src/control/accordion/AccordionHorizontal.stories.tsx @@ -10,7 +10,7 @@ import { LayoutRow } from "../../layout/content/LayoutRow"; import { LayoutRowItem } from "../../layout/content/LayoutRowItem"; import { Label } from "../../data/Label"; import { AccordionContentFrame } from "./AccordionContentFrame"; -import styled from "../../styled-components"; +import styled from "styled-components"; interface IItemConfig extends IAccordionItemConfig { label: string; diff --git a/src/control/accordion/AccordionVertical.stories.tsx b/src/control/accordion/AccordionVertical.stories.tsx index e0dd7b4..f4ae947 100644 --- a/src/control/accordion/AccordionVertical.stories.tsx +++ b/src/control/accordion/AccordionVertical.stories.tsx @@ -10,7 +10,7 @@ import { LayoutRow } from "../../layout/content/LayoutRow"; import { LayoutRowItem } from "../../layout/content/LayoutRowItem"; import { Label } from "../../data/Label"; import { AccordionContentFrame } from "./AccordionContentFrame"; -import styled from "../../styled-components"; +import styled from "styled-components"; interface IItemConfig extends IAccordionItemConfig { label: string; diff --git a/src/control/dropdown/Dropdown.stories.tsx b/src/control/dropdown/Dropdown.stories.tsx index c2b6c27..3a3e28c 100644 --- a/src/control/dropdown/Dropdown.stories.tsx +++ b/src/control/dropdown/Dropdown.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Menu } from "../menu/Menu"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { MenuItem } from "../menu/MenuItem"; import { Dropdown } from "./Dropdown"; import { ExpanderSelect } from "../expander/ExpanderSelect"; diff --git a/src/control/expander/ExpanderAccordion.stories.tsx b/src/control/expander/ExpanderAccordion.stories.tsx index 2db75c0..9fc7d46 100644 --- a/src/control/expander/ExpanderAccordion.stories.tsx +++ b/src/control/expander/ExpanderAccordion.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { ExpanderAccordion } from "./ExpanderAccordion"; const ContentArea = styled.div` diff --git a/src/control/expander/ExpanderBase.tsx b/src/control/expander/ExpanderBase.tsx index 028e9a9..3931fff 100644 --- a/src/control/expander/ExpanderBase.tsx +++ b/src/control/expander/ExpanderBase.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { css } from "../../styled-components"; +import styled, { css } from "styled-components"; import { Number } from "../../data/Number"; import { IBoxColors } from "../../layout/content/box/IBoxColors"; import { ITheme } from "../../theme/ITheme"; @@ -19,7 +19,7 @@ const getColors = (colors: IBoxColors | IBoxColorsThunk, theme: ITheme) return colors; }; -const ExpanderRoot = styled("div")` +const ExpanderRoot = styled.div` display: flex; cursor: ${props => props.disabled ? "default" : "pointer"}; user-select: none; @@ -46,7 +46,7 @@ const ExpanderRoot = styled("div")` & > * { margin-left: 16px;} `; -const ExpanderLabel = styled("div")` +const ExpanderLabel = styled.div` ${props => props.fullWidth ? css` width: 100%; ` : ``} @@ -57,7 +57,7 @@ interface IExpanderValueProps { open: boolean; disabled?: boolean; } -const ExpanderValue = styled("span")` +const ExpanderValue = styled.span` color: ${props => props.disabled ? props.theme.colors.expanderDisabled : props.open ? props.theme.colors.expanderOpenValue : props.theme.colors.expanderValue}; @@ -69,7 +69,7 @@ interface IExpanderContentProps { fullWidth?: boolean; } -const ExpanderContent = styled("div")` +const ExpanderContent = styled.div` display: flex; align-items: center; ${props => props.fullWidth ? css` diff --git a/src/control/expander/ExpanderBaseIcon.tsx b/src/control/expander/ExpanderBaseIcon.tsx index 11436f8..c1d1ad8 100644 --- a/src/control/expander/ExpanderBaseIcon.tsx +++ b/src/control/expander/ExpanderBaseIcon.tsx @@ -1,9 +1,9 @@ import * as React from "react"; -import styled, { css } from "../../styled-components"; +import styled, { css } from "styled-components"; import { ArrowDownIcon } from "../../icon/ArrowDownIcon"; import { ITheme } from "../../theme/ITheme"; -const ExpanderIconRoot = styled("div")` +const ExpanderIconRoot = styled.div` display: inline-block; color: ${props => props.expanded ? props.theme.colors.expanderOpenIcon : props.theme.colors.expanderIcon}; padding: 2px 8px 2px 8px; @@ -14,7 +14,7 @@ const ExpanderIconRoot = styled("div")` ` : ``} `; -const Icon = styled("div")` +const Icon = styled.div` display: flex; align-items: center; justify-content: center; diff --git a/src/control/expander/ExpanderSelect.stories.tsx b/src/control/expander/ExpanderSelect.stories.tsx index 0902371..6af9846 100644 --- a/src/control/expander/ExpanderSelect.stories.tsx +++ b/src/control/expander/ExpanderSelect.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { ExpanderSelect } from "./ExpanderSelect"; const ContentArea = styled.div` diff --git a/src/control/grid/Grid.tsx b/src/control/grid/Grid.tsx index a43e694..a32ac81 100644 --- a/src/control/grid/Grid.tsx +++ b/src/control/grid/Grid.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { observer } from "mobx-react"; import { observable } from "mobx"; import { GridLayout } from "./internal/GridLayout"; diff --git a/src/control/grid/internal/GridData.ts b/src/control/grid/internal/GridData.ts index 0066195..6ab7206 100644 --- a/src/control/grid/internal/GridData.ts +++ b/src/control/grid/internal/GridData.ts @@ -1,4 +1,4 @@ -import styled from "../../../styled-components"; +import styled from "styled-components"; interface IGridDataProps { dataType: string; @@ -6,7 +6,7 @@ interface IGridDataProps { } /** @internal */ -export const GridData = styled("div")` +export const GridData = styled.div` height: 100%; display: flex; align-items: center; diff --git a/src/control/grid/internal/GridLayout.tsx b/src/control/grid/internal/GridLayout.tsx index f938e16..801b183 100644 --- a/src/control/grid/internal/GridLayout.tsx +++ b/src/control/grid/internal/GridLayout.tsx @@ -1,4 +1,4 @@ -import styled from "../../../styled-components"; +import styled from "styled-components"; interface IGridLayoutProps { numberOfFields: number; @@ -6,7 +6,7 @@ interface IGridLayoutProps { } /** @internal */ -export const GridLayout = styled("div")` +export const GridLayout = styled.div` overflow-x: auto; display: grid; grid-template-columns: auto ${({ numberOfFields }) => { diff --git a/src/control/grid/internal/GridRow.tsx b/src/control/grid/internal/GridRow.tsx index 5388bab..fa4c384 100644 --- a/src/control/grid/internal/GridRow.tsx +++ b/src/control/grid/internal/GridRow.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../../styled-components"; +import styled from "styled-components"; const GRID_CELL_PADDING_X = 32; const GRID_CELL_PADDING_Y = 8; @@ -8,7 +8,7 @@ interface ISpacerProps { odd?: boolean; className?: string; } -const Spacer = styled("div")` +const Spacer = styled.div` background-color: ${({ odd, theme }) => odd ? theme.colors.gridOddRowBg : theme.colors.gridEvenRowBg}; `; @@ -16,7 +16,7 @@ interface IItemProps { odd?: boolean; className?: string; } -const Item = styled("div")` +const Item = styled.div` padding: ${GRID_CELL_PADDING_Y}px ${GRID_CELL_PADDING_X}px; background-color: ${({ odd, theme }) => odd ? theme.colors.gridOddRowBg : theme.colors.gridEvenRowBg}; `; diff --git a/src/control/grid/internal/GridWrapper.tsx b/src/control/grid/internal/GridWrapper.tsx index d22c79e..047e1f9 100644 --- a/src/control/grid/internal/GridWrapper.tsx +++ b/src/control/grid/internal/GridWrapper.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../../styled-components"; +import styled from "styled-components"; const Wrapper = styled.div` border-top: 1px solid ${props => props.theme.colors.gridBorder}; diff --git a/src/control/grid/internal/header/GridHeader.tsx b/src/control/grid/internal/header/GridHeader.tsx index 6384906..9f0a264 100644 --- a/src/control/grid/internal/header/GridHeader.tsx +++ b/src/control/grid/internal/header/GridHeader.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../../../styled-components"; +import styled from "styled-components"; import { GridColumnSelector } from "./GridColumnSelector"; import { IGridFieldBase } from "../../state/IGridFieldBase"; diff --git a/src/control/grid/internal/header/GridHeaderItem.tsx b/src/control/grid/internal/header/GridHeaderItem.tsx index 897c6b4..ba13fe8 100644 --- a/src/control/grid/internal/header/GridHeaderItem.tsx +++ b/src/control/grid/internal/header/GridHeaderItem.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { css } from "../../../../styled-components"; +import styled, { css } from "styled-components"; import { Label } from "../../../../data/Label"; import { IGridSortingOptions } from "../../state/IGridSortingOptions"; import { GridSortingOrder } from "../../state/GridSortingOrder"; @@ -13,7 +13,7 @@ interface IHeaderItemProps { isSortable: boolean; onClick(): void; } -const HeaderItem = styled("div")` +const HeaderItem = styled.div` background: ${props => props.theme.colors.gridEvenRowBg}; padding: 10px 8px 10px 32px; border-bottom: 1px solid ${props => props.theme.colors.gridBorder}; diff --git a/src/control/internal/ToggleInput.tsx b/src/control/internal/ToggleInput.tsx index 7dad46f..af6729a 100644 --- a/src/control/internal/ToggleInput.tsx +++ b/src/control/internal/ToggleInput.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; interface IStyledInnerProps { disabled?: boolean; diff --git a/src/control/menu/Menu.stories.tsx b/src/control/menu/Menu.stories.tsx index 97d5771..c78ec82 100644 --- a/src/control/menu/Menu.stories.tsx +++ b/src/control/menu/Menu.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Menu } from "./Menu"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { MenuItem } from "./MenuItem"; import { CheckboxOnIcon } from "../../icon/CheckboxOnIcon"; import { CheckboxOffIcon } from "../../icon/CheckboxOffIcon"; diff --git a/src/control/menu/Menu.tsx b/src/control/menu/Menu.tsx index 6d208ac..5343735 100644 --- a/src/control/menu/Menu.tsx +++ b/src/control/menu/Menu.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; const $Menu = styled.div` box-shadow: 0 8px 16px 0 rgba(167, 181, 209, 0.6); diff --git a/src/control/menu/MenuItem.tsx b/src/control/menu/MenuItem.tsx index 10afe87..ea9bf93 100644 --- a/src/control/menu/MenuItem.tsx +++ b/src/control/menu/MenuItem.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Box, IBoxProps } from "../../layout/content/box/Box"; import { IBoxColorsThunk } from "../../layout/content/box/IBoxColorsThunk"; import { ITheme } from "../../theme/ITheme"; diff --git a/src/control/pagination/internal/Cursor.tsx b/src/control/pagination/internal/Cursor.tsx index ae2ed3e..7b74cdb 100644 --- a/src/control/pagination/internal/Cursor.tsx +++ b/src/control/pagination/internal/Cursor.tsx @@ -1,4 +1,4 @@ -import styled from "../../../styled-components"; +import styled from "styled-components"; const BORDER_SIZE = 1; diff --git a/src/control/pagination/internal/CursorPaginationRoot.ts b/src/control/pagination/internal/CursorPaginationRoot.ts index 2ccaf7f..bbf2de7 100644 --- a/src/control/pagination/internal/CursorPaginationRoot.ts +++ b/src/control/pagination/internal/CursorPaginationRoot.ts @@ -1,4 +1,4 @@ -import styled from "../../../styled-components"; +import styled from "styled-components"; /** @internal */ export const CursorPaginationRoot = styled.div` diff --git a/src/control/pagination/internal/NavButton.tsx b/src/control/pagination/internal/NavButton.tsx index e38d475..1f73f9a 100644 --- a/src/control/pagination/internal/NavButton.tsx +++ b/src/control/pagination/internal/NavButton.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import styled, { css } from "../../../styled-components"; +import styled, { css } from "styled-components"; const BUTTON_SIZE = 36; const ICON_SIZE = 24; const BORDER_WIDTH = 1; -const NavButtonRoot = styled("div")` +const NavButtonRoot = styled.div` cursor: ${props => !props.disabled ? "pointer" : "default"}; padding: ${(BUTTON_SIZE - ICON_SIZE - 2 * BORDER_WIDTH) / 2}px; border-radius: ${props => props.theme.spacing.borderRadius.thin}px; diff --git a/src/control/pagination/internal/Spinner.ts b/src/control/pagination/internal/Spinner.ts index 4c4e7a2..c83139c 100644 --- a/src/control/pagination/internal/Spinner.ts +++ b/src/control/pagination/internal/Spinner.ts @@ -1,4 +1,4 @@ -import styled from "../../../styled-components"; +import styled from "styled-components"; import { SpinnerRegular } from "../../../fx/SpinnerRegular"; /** @internal */ diff --git a/src/data/CopyValueTooltip.tsx b/src/data/CopyValueTooltip.tsx index 3564573..f6c4b52 100644 --- a/src/data/CopyValueTooltip.tsx +++ b/src/data/CopyValueTooltip.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Tooltip } from "../overlay/tooltip/Tooltip"; -import styled from "../styled-components"; +import styled from "styled-components"; import { CopyValueButton } from "../control/button/CopyValueButton"; import { IClipboard } from "./IClipboard"; diff --git a/src/data/Hash.tsx b/src/data/Hash.tsx index d7e75ae..f303329 100644 --- a/src/data/Hash.tsx +++ b/src/data/Hash.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { splitLongHash } from "../util/internal/hash"; const HiddenHashPartWrapper = styled.span` diff --git a/src/data/Label.tsx b/src/data/Label.tsx index cfc9d6c..74fce22 100644 --- a/src/data/Label.tsx +++ b/src/data/Label.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; import * as React from "react"; export interface ILabelProps { diff --git a/src/data/StringData.tsx b/src/data/StringData.tsx index 1dc76ed..55982dc 100644 --- a/src/data/StringData.tsx +++ b/src/data/StringData.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; const StringDataRoot = styled.div` padding: 14px 0; diff --git a/src/data/box/TimeElapsedBox.tsx b/src/data/box/TimeElapsedBox.tsx index 5af4710..a23a152 100644 --- a/src/data/box/TimeElapsedBox.tsx +++ b/src/data/box/TimeElapsedBox.tsx @@ -5,7 +5,7 @@ import { ValueBox, IValueBoxProps } from "../../layout/content/box/ValueBox"; import { RelativeTimeFormatter, IRelativeTimeTranslations } from "../../util/time/RelativeTimeFormatter"; import { Tooltip } from "../../overlay/tooltip/Tooltip"; import { ClickThreshold } from "../../util/react/ClickThreshold"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { CopyValueButton } from "../../control/button/CopyValueButton"; import { IClipboard } from "../IClipboard"; import { DateTime } from "../DateTime"; diff --git a/src/data/hex/DecodedHexData.tsx b/src/data/hex/DecodedHexData.tsx index 4925c7e..10efb0e 100644 --- a/src/data/hex/DecodedHexData.tsx +++ b/src/data/hex/DecodedHexData.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Tooltip } from "../../overlay/tooltip/Tooltip"; import { IClipboard } from "../IClipboard"; import { hexToString } from "../../util/internal/hex"; diff --git a/src/data/hex/HexData.tsx b/src/data/hex/HexData.tsx index 6949d18..86bce4d 100644 --- a/src/data/hex/HexData.tsx +++ b/src/data/hex/HexData.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { observable } from "mobx"; import { observer } from "mobx-react"; import { IClipboard } from "../IClipboard"; diff --git a/src/data/hex/internal/HexDataContent.tsx b/src/data/hex/internal/HexDataContent.tsx index 825d794..542c264 100644 --- a/src/data/hex/internal/HexDataContent.tsx +++ b/src/data/hex/internal/HexDataContent.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../../styled-components"; +import styled from "styled-components"; import { HexDataItem } from "./HexDataItem"; const HexDataContentRoot = styled.div` diff --git a/src/data/hex/internal/HexDataItem.tsx b/src/data/hex/internal/HexDataItem.tsx index b6df477..6a21069 100644 --- a/src/data/hex/internal/HexDataItem.tsx +++ b/src/data/hex/internal/HexDataItem.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import styled from "../../../styled-components"; +import styled from "styled-components"; interface IHexDataItemProps { value: string; } -const HexDataItemRoot = styled("div")` +const HexDataItemRoot = styled.div` width: 32px; height: 32px; text-align: center; diff --git a/src/data/vis/stackBar/StackBar.tsx b/src/data/vis/stackBar/StackBar.tsx index 322e42c..14c0b2c 100644 --- a/src/data/vis/stackBar/StackBar.tsx +++ b/src/data/vis/stackBar/StackBar.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "../../../styled-components"; +import styled, { css } from "styled-components"; import * as React from "react"; import { observer } from "mobx-react"; import { observable } from "mobx"; @@ -30,13 +30,13 @@ interface IStackBarItemProps { selected: boolean; } -const StackBarItemFill = styled("div")` +const StackBarItemFill = styled.div` background-color: ${({color}) => color}; width: 100%; height: 100%; `; -const StackBarItem = styled("div")` +const StackBarItem = styled.div` width: ${({percent}) => percent}%; height: ${props => props.height}px; transition: height .2s ease-out; diff --git a/src/data/vis/stackBar/StackBarTooltipText.tsx b/src/data/vis/stackBar/StackBarTooltipText.tsx index 8869e1f..910e6cb 100644 --- a/src/data/vis/stackBar/StackBarTooltipText.tsx +++ b/src/data/vis/stackBar/StackBarTooltipText.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { StackBarBubble } from "./internal/StackBarBubble"; -import styled from "../../../styled-components"; +import styled from "styled-components"; export interface IStackBarTooltipTextProps { bubbleColor: string; diff --git a/src/data/vis/stackBar/internal/StackBarBubble.tsx b/src/data/vis/stackBar/internal/StackBarBubble.tsx index b31fbfa..d982971 100644 --- a/src/data/vis/stackBar/internal/StackBarBubble.tsx +++ b/src/data/vis/stackBar/internal/StackBarBubble.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../../../styled-components"; +import styled from "styled-components"; export interface IStackBarBubbleProps { color: string; diff --git a/src/form/FieldError.tsx b/src/form/FieldError.tsx index 449f10d..b7536b2 100644 --- a/src/form/FieldError.tsx +++ b/src/form/FieldError.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { ErrorMessage } from "formik"; -import styled from "../styled-components"; +import styled from "styled-components"; /** @internal */ export const $StatusError = styled.p` diff --git a/src/form/Form.stories.tsx b/src/form/Form.stories.tsx index c5dd479..0bc77e9 100644 --- a/src/form/Form.stories.tsx +++ b/src/form/Form.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { Form, IFormProps } from "./Form"; import { FormItem } from "./FormItem"; import { InputField } from "./field/InputField"; diff --git a/src/form/FormItem.tsx b/src/form/FormItem.tsx index e809ea5..c7a8fcc 100644 --- a/src/form/FormItem.tsx +++ b/src/form/FormItem.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; import { Label } from "./Label"; import { $StatusError } from "./FieldError"; diff --git a/src/form/FormStatus.tsx b/src/form/FormStatus.tsx index 9513556..a02b4b8 100644 --- a/src/form/FormStatus.tsx +++ b/src/form/FormStatus.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; import React from "react"; import { WithFormState } from "./WithFormState"; diff --git a/src/form/Label.tsx b/src/form/Label.tsx index 31758f8..b12590e 100644 --- a/src/form/Label.tsx +++ b/src/form/Label.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; export const Label = styled.label` font-size: 12px; diff --git a/src/form/field/InputField.tsx b/src/form/field/InputField.tsx index 9f0349a..b65756a 100644 --- a/src/form/field/InputField.tsx +++ b/src/form/field/InputField.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Field, GenericFieldHTMLAttributes, FieldProps } from "formik"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Input } from "../../control/Input"; import { ErrorIcon } from "../../icon/ErrorIcon"; import { StatusOkIcon } from "../../icon/StatusOkIcon"; diff --git a/src/fx/Fade.tsx b/src/fx/Fade.tsx index 8c92ad0..c551f11 100644 --- a/src/fx/Fade.tsx +++ b/src/fx/Fade.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { CSSTransition } from "react-transition-group"; -import styled from "../styled-components"; +import styled from "styled-components"; import { observable } from "mobx"; import { observer } from "mobx-react"; const CLASS_NAME = "fade"; -const FadeRoot = styled, "div">("div")` +const FadeRoot = styled.div>` & .${CLASS_NAME}-enter, & .${CLASS_NAME}-exit { transition: opacity ${props => props.duration}s ease-in-out; @@ -86,7 +86,7 @@ export class Fade extends React.Component { render() { return ( - + ("div")` +const HeightRoot = styled.div` & .${CLASS_NAME}-enter, & .${CLASS_NAME}-exit { transition: height ${props => props.duration}s ease-in-out; diff --git a/src/fx/Spinner.tsx b/src/fx/Spinner.tsx index 43576f4..781e52d 100644 --- a/src/fx/Spinner.tsx +++ b/src/fx/Spinner.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { UIDConsumer } from "../uid/UIDConsumer"; const SpinnerRoot = styled.div` diff --git a/src/fx/SpinnerRegular.tsx b/src/fx/SpinnerRegular.tsx index 46d439c..b8b9b64 100644 --- a/src/fx/SpinnerRegular.tsx +++ b/src/fx/SpinnerRegular.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Spinner } from "./Spinner"; -import styled, { withTheme } from "../styled-components"; +import styled, { withTheme } from "styled-components"; import { ITheme } from "../theme/ITheme"; const StyledSpinner = styled(Spinner)` diff --git a/src/icon/ErrorIcon.tsx b/src/icon/ErrorIcon.tsx index 8344cab..0c1fe37 100644 --- a/src/icon/ErrorIcon.tsx +++ b/src/icon/ErrorIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { ISvgIconProps } from "../util/react/SvgIcon"; import { InfoIcon } from "./InfoIcon"; diff --git a/src/icon/ErrorSmallIcon.tsx b/src/icon/ErrorSmallIcon.tsx index b818f3d..41cda77 100644 --- a/src/icon/ErrorSmallIcon.tsx +++ b/src/icon/ErrorSmallIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IErrorSmallIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountInIcon.tsx b/src/icon/MsgCountInIcon.tsx index c8f1102..e59a82e 100644 --- a/src/icon/MsgCountInIcon.tsx +++ b/src/icon/MsgCountInIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountInIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountInSmallIcon.tsx b/src/icon/MsgCountInSmallIcon.tsx index 4215634..65acba4 100644 --- a/src/icon/MsgCountInSmallIcon.tsx +++ b/src/icon/MsgCountInSmallIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountInSmallIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountOutIcon.tsx b/src/icon/MsgCountOutIcon.tsx index 5550092..1ddf1b3 100644 --- a/src/icon/MsgCountOutIcon.tsx +++ b/src/icon/MsgCountOutIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountOutIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountOutSmallIcon.tsx b/src/icon/MsgCountOutSmallIcon.tsx index 1ef0f9f..c56320c 100644 --- a/src/icon/MsgCountOutSmallIcon.tsx +++ b/src/icon/MsgCountOutSmallIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountOutSmallIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountPendingIcon.tsx b/src/icon/MsgCountPendingIcon.tsx index a43a979..4288a34 100644 --- a/src/icon/MsgCountPendingIcon.tsx +++ b/src/icon/MsgCountPendingIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountPendingIconProps extends ISvgIconProps { diff --git a/src/icon/MsgCountPendingSmallIcon.tsx b/src/icon/MsgCountPendingSmallIcon.tsx index 476a448..f85323e 100644 --- a/src/icon/MsgCountPendingSmallIcon.tsx +++ b/src/icon/MsgCountPendingSmallIcon.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { SvgIcon, ISvgIconProps } from "../util/react/SvgIcon"; export interface IMsgCountPendingSmallIconProps extends ISvgIconProps { diff --git a/src/layout/Bar.tsx b/src/layout/Bar.tsx index a14f7c5..7326ed1 100644 --- a/src/layout/Bar.tsx +++ b/src/layout/Bar.tsx @@ -1,11 +1,11 @@ -import styled from "../styled-components"; +import styled from "styled-components"; export interface IBarProps { sticky?: boolean; zIndex?: number; } -export const Bar = styled("div")` +export const Bar = styled.div` box-sizing: border-box; display: flex; background-color: ${props => props.theme.colors.base.bg.alt}; diff --git a/src/layout/Filler.tsx b/src/layout/Filler.tsx index eedadc0..5ab4631 100644 --- a/src/layout/Filler.tsx +++ b/src/layout/Filler.tsx @@ -1,10 +1,10 @@ -import styled from "../styled-components"; +import styled from "styled-components"; interface IFillerProps { className?: string; } /** Flex filler element */ -export const Filler = styled("div")` +export const Filler = styled.div` flex: 1 0 auto; `; diff --git a/src/layout/HorizontalBar.tsx b/src/layout/HorizontalBar.tsx index a2e39b5..6e6138a 100644 --- a/src/layout/HorizontalBar.tsx +++ b/src/layout/HorizontalBar.tsx @@ -1,12 +1,12 @@ import * as React from "react"; -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; import { Bar, IBarProps } from "./Bar"; interface IPlaceholderProps { height: number; } -const Placeholder = styled("div")` +const Placeholder = styled.div` height: ${props => props.height}px; width: 100%; `; @@ -37,7 +37,7 @@ export class HorizontalBar extends React.Component { return ( <> { this.props.sticky ? : null } - + ); } diff --git a/src/layout/LineSeparator.ts b/src/layout/LineSeparator.ts index b00aecf..f71aa3e 100644 --- a/src/layout/LineSeparator.ts +++ b/src/layout/LineSeparator.ts @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; export const LineSeparator = styled.hr` border: none; diff --git a/src/layout/Spacer.tsx b/src/layout/Spacer.tsx index 07fac80..ae68c2b 100644 --- a/src/layout/Spacer.tsx +++ b/src/layout/Spacer.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; import * as React from "react"; interface ISpacerProps { diff --git a/src/layout/VerticalBar.tsx b/src/layout/VerticalBar.tsx index d807a19..b288af9 100644 --- a/src/layout/VerticalBar.tsx +++ b/src/layout/VerticalBar.tsx @@ -1,12 +1,12 @@ import * as React from "react"; -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; import { Bar } from "./Bar"; interface IPlaceholderProps { width: number; } -const Placeholder = styled("div")` +const Placeholder = styled.div` width: ${props => props.width}px; @media ${props => props.theme.media.sAndBelow} { display: none; @@ -60,7 +60,7 @@ export class VerticalBar extends React.Component { return ( <> { this.props.sticky ? : null } - + ); } diff --git a/src/layout/content/LayoutBoxItem.tsx b/src/layout/content/LayoutBoxItem.tsx index e431606..5ac9ac9 100644 --- a/src/layout/content/LayoutBoxItem.tsx +++ b/src/layout/content/LayoutBoxItem.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { ILayoutRowItemProps } from "./LayoutRowItem"; interface ILayoutBoxItemProps extends ILayoutRowItemProps { diff --git a/src/layout/content/LayoutRow.stories.tsx b/src/layout/content/LayoutRow.stories.tsx index b5557e8..941f244 100644 --- a/src/layout/content/LayoutRow.stories.tsx +++ b/src/layout/content/LayoutRow.stories.tsx @@ -6,7 +6,7 @@ import { LayoutSection } from "./LayoutSection"; import { Label } from "../../data/Label"; import { ValueBox } from "./box/ValueBox"; import { Box } from "./box/Box"; -import styled from "../../styled-components"; +import styled from "styled-components"; const ContentWrapper = styled.div` padding: 8px; diff --git a/src/layout/content/LayoutRowItem.tsx b/src/layout/content/LayoutRowItem.tsx index 238686b..cb2742a 100644 --- a/src/layout/content/LayoutRowItem.tsx +++ b/src/layout/content/LayoutRowItem.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { LayoutBoxItem } from "./LayoutBoxItem"; import * as ReactIs from "react-is"; diff --git a/src/layout/content/LayoutSection.tsx b/src/layout/content/LayoutSection.tsx index c48999b..46d10fa 100644 --- a/src/layout/content/LayoutSection.tsx +++ b/src/layout/content/LayoutSection.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Spacer } from "../Spacer"; export interface ILayoutSectionProps { diff --git a/src/layout/content/box/Box.tsx b/src/layout/content/box/Box.tsx index edb03f2..609d398 100644 --- a/src/layout/content/box/Box.tsx +++ b/src/layout/content/box/Box.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "../../../styled-components"; +import styled, { css } from "styled-components"; import * as React from "react"; import { ITheme } from "../../../theme/ITheme"; import { IBoxColors } from "./IBoxColors"; @@ -31,7 +31,7 @@ interface IContentRootProps { paddingTop?: number; } -const ContentRoot = styled("div")` +const ContentRoot = styled.div` padding-top: ${props => props.paddingTop}px; white-space: nowrap; diff --git a/src/layout/content/box/TypedValueBox.tsx b/src/layout/content/box/TypedValueBox.tsx index 842f995..a88329a 100644 --- a/src/layout/content/box/TypedValueBox.tsx +++ b/src/layout/content/box/TypedValueBox.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Box } from "./Box"; -import styled, { css } from "../../../styled-components"; +import styled, { css } from "styled-components"; interface ITypedValueBox { value?: string; @@ -22,7 +22,7 @@ const TypeSpan = styled.span` interface ISizingWrapperProps { withinForm?: boolean; } -const SizingWrapper = styled("div")` +const SizingWrapper = styled.div` ${props => props.withinForm ? css` min-width: 484px; ` : ``} diff --git a/src/layout/content/box/ValueBox.tsx b/src/layout/content/box/ValueBox.tsx index c0caac9..f3e75f2 100644 --- a/src/layout/content/box/ValueBox.tsx +++ b/src/layout/content/box/ValueBox.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { ITheme } from "../../../theme/ITheme"; import { IBoxProps, Box } from "./Box"; -import { withTheme } from "../../../styled-components"; +import { withTheme } from "styled-components"; export interface IValueBoxProps { variant?: keyof ITheme["spacing"]["valueBoxMetrics"]; diff --git a/src/layout/content/internal/LayoutRowWrapper.tsx b/src/layout/content/internal/LayoutRowWrapper.tsx index 236fe83..b189016 100644 --- a/src/layout/content/internal/LayoutRowWrapper.tsx +++ b/src/layout/content/internal/LayoutRowWrapper.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "../../../styled-components"; +import styled, { css } from "styled-components"; import * as React from "react"; interface ILayoutRowWrapperProps { diff --git a/src/layout/layout.stories.tsx b/src/layout/layout.stories.tsx index 5421a9a..08736c1 100644 --- a/src/layout/layout.stories.tsx +++ b/src/layout/layout.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "../styled-components"; +import styled from "styled-components"; import { storiesOf } from "@storybook/react"; import { Toolbar } from "./toolbar/Toolbar"; import { ToolbarItem } from "./toolbar/ToolbarItem"; diff --git a/src/layout/responsive/ResponsiveContainer.tsx b/src/layout/responsive/ResponsiveContainer.tsx index 162412e..8282f87 100644 --- a/src/layout/responsive/ResponsiveContainer.tsx +++ b/src/layout/responsive/ResponsiveContainer.tsx @@ -1,4 +1,4 @@ -import styled from "../../styled-components"; +import styled from "styled-components"; import { ITheme } from "../../theme/ITheme"; export type MediaQueryThunk = string | ((theme: ITheme) => string); @@ -20,7 +20,7 @@ export interface IResponsiveContainerProps { * * ``` */ -export const ResponsiveContainer = styled("div")` +export const ResponsiveContainer = styled.div` display: ${props => props.behavior === "hide" ? "block" : "none" }; @media ${({ mediaQuery: q, theme }) => typeof q === "function" ? q(theme) : q } { diff --git a/src/layout/toolbar/Toolbar.stories.tsx b/src/layout/toolbar/Toolbar.stories.tsx index 9026436..b2e28fb 100644 --- a/src/layout/toolbar/Toolbar.stories.tsx +++ b/src/layout/toolbar/Toolbar.stories.tsx @@ -9,7 +9,7 @@ import { LogoutIcon } from "../../icon/LogoutIcon"; import { HelpIcon } from "../../icon/HelpIcon"; import { observable } from "mobx"; import { Observer } from "mobx-react"; -import styled from "../../styled-components"; +import styled from "styled-components"; let active = observable.box(false); diff --git a/src/layout/toolbar/Toolbar.tsx b/src/layout/toolbar/Toolbar.tsx index 4248627..216d0e0 100644 --- a/src/layout/toolbar/Toolbar.tsx +++ b/src/layout/toolbar/Toolbar.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { withTheme } from "../../styled-components"; +import styled, { withTheme } from "styled-components"; import { VerticalBar } from "../VerticalBar"; import { ITheme } from "../../theme/ITheme"; @@ -12,6 +12,7 @@ const StyledVerticalBar = styled(VerticalBar)` interface IToolbarProps { zIndex?: number; theme: ITheme; + children?: React.ReactNode; } export class $Toolbar extends React.Component { diff --git a/src/layout/toolbar/ToolbarItem.tsx b/src/layout/toolbar/ToolbarItem.tsx index 45044b4..2fe806d 100644 --- a/src/layout/toolbar/ToolbarItem.tsx +++ b/src/layout/toolbar/ToolbarItem.tsx @@ -1,12 +1,12 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Tooltip } from "../../overlay/tooltip/Tooltip"; interface IToolbarItemRootProps { backgroundColor?: string; } -const ToolbarItemRoot = styled("div")` +const ToolbarItemRoot = styled.div` display: flex; align-items: center; justify-content: center; @@ -34,7 +34,7 @@ export class ToolbarItem extends React.Component { this.rootEl = ref!} + ref={ref => this.rootEl = ref!} > { this.props.title ? ("div")` +const Placeholder = styled.div` height: ${props => props.height}px; width: 100%; @@ -55,7 +55,7 @@ export class HorizontalBar extends React.Component { return ( <> { this.props.sticky ? : null } - + ); } diff --git a/src/layout/topbar/MobileMenuItem.tsx b/src/layout/topbar/MobileMenuItem.tsx index 548a6b3..ce7ba5d 100644 --- a/src/layout/topbar/MobileMenuItem.tsx +++ b/src/layout/topbar/MobileMenuItem.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { ValueBox } from "../content/box/ValueBox"; import * as PropTypes from "prop-types"; diff --git a/src/layout/topbar/MobileMenuLayer.tsx b/src/layout/topbar/MobileMenuLayer.tsx index 401239e..8fa19f8 100644 --- a/src/layout/topbar/MobileMenuLayer.tsx +++ b/src/layout/topbar/MobileMenuLayer.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import ReactDOM from "react-dom"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { observer } from "mobx-react"; import { Fade } from "../../fx/Fade"; import { Mask } from "../../overlay/Mask"; diff --git a/src/layout/topbar/TopBar.stories.tsx b/src/layout/topbar/TopBar.stories.tsx index a57b853..7acc904 100644 --- a/src/layout/topbar/TopBar.stories.tsx +++ b/src/layout/topbar/TopBar.stories.tsx @@ -6,7 +6,7 @@ import { ToolbarIconButton } from "../toolbar/ToolbarIconButton"; import { Filler } from "../Filler"; import { LogoutIcon } from "../../icon/LogoutIcon"; import { HamburgerIcon } from "../../icon/HamburgerIcon"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { Dropdown } from "../../control/dropdown/Dropdown"; import { MobileMenuLayer } from "./MobileMenuLayer"; import { MobileMenuItem } from "./MobileMenuItem"; diff --git a/src/layout/topbar/TopBar.tsx b/src/layout/topbar/TopBar.tsx index 8a2c611..1995342 100644 --- a/src/layout/topbar/TopBar.tsx +++ b/src/layout/topbar/TopBar.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import styled, { withTheme } from "../../styled-components"; +import styled, { withTheme } from "styled-components"; import { HorizontalBar } from "./HorizontalBar"; import { ITheme } from "../../theme/ITheme"; @@ -10,6 +10,7 @@ const StyledHorizontalBar = styled(HorizontalBar)` interface ITopbarProps { zIndex?: number; theme: ITheme; + children?: React.ReactNode; } export class $TopBar extends React.Component { diff --git a/src/layout/topbar/TopbarItem.tsx b/src/layout/topbar/TopbarItem.tsx index b4ec790..22445f1 100644 --- a/src/layout/topbar/TopbarItem.tsx +++ b/src/layout/topbar/TopbarItem.tsx @@ -1,4 +1,4 @@ -import styled from "../../styled-components"; +import styled from "styled-components"; export const TopbarItem = styled.div` display: flex; diff --git a/src/overlay/FloatingActionBar.tsx b/src/overlay/FloatingActionBar.tsx index 16c4945..f9bd519 100644 --- a/src/overlay/FloatingActionBar.tsx +++ b/src/overlay/FloatingActionBar.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import styled, { css } from "../styled-components"; +import styled, { css } from "styled-components"; -const FloatingActionBarRoot = styled("div")` +const FloatingActionBarRoot = styled.div` position: absolute; ${props => /^(.*)(top)(.*)$/.test(props.position || "bottom-right") ? css` top: 40px; diff --git a/src/overlay/Layer.tsx b/src/overlay/Layer.tsx index 6713f9a..4958c09 100644 --- a/src/overlay/Layer.tsx +++ b/src/overlay/Layer.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; /** * A simple overlay component that renders a centered, elevated Layer diff --git a/src/overlay/Mask.tsx b/src/overlay/Mask.tsx index 5dc6831..d9624fa 100644 --- a/src/overlay/Mask.tsx +++ b/src/overlay/Mask.tsx @@ -1,4 +1,4 @@ -import styled from "../styled-components"; +import styled from "styled-components"; /** * An element that blocks the viewport, useful for modals diff --git a/src/overlay/Popover.stories.tsx b/src/overlay/Popover.stories.tsx index 3d19de1..f673809 100644 --- a/src/overlay/Popover.stories.tsx +++ b/src/overlay/Popover.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { Popover } from "./Popover"; -import styled from "../styled-components"; +import styled from "styled-components"; import { Menu } from "../control/menu/Menu"; import { MenuItem } from "../control/menu/MenuItem"; diff --git a/src/overlay/tooltip/Tooltip.tsx b/src/overlay/tooltip/Tooltip.tsx index fb70561..3d332b4 100644 --- a/src/overlay/tooltip/Tooltip.tsx +++ b/src/overlay/tooltip/Tooltip.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { TooltipBase, ITooltipProps } from "./TooltipBase"; -import styled from "../../styled-components"; +import styled from "styled-components"; import { TooltipText } from "./TooltipText"; const TooltipContent = styled.div` diff --git a/src/overlay/tooltip/TooltipText.tsx b/src/overlay/tooltip/TooltipText.tsx index 41f7f34..3bc9149 100644 --- a/src/overlay/tooltip/TooltipText.tsx +++ b/src/overlay/tooltip/TooltipText.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import styled from "../../styled-components"; +import styled from "styled-components"; interface ITooltipTextProps { textColor?: string; } -const TooltipTextRoot = styled("div")` +const TooltipTextRoot = styled.div` font-size: 16px; line-height: 32px; font-weight: 500; diff --git a/src/styled-components.ts b/src/styled-components.ts deleted file mode 100644 index b1c5f49..0000000 --- a/src/styled-components.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Wrapper for styled-components library - * - * This serves two purpuses: - * 1. reduce the footprint of the library so we can replace/upgrade it easier - * 2. ensure Theme type safety (see https://www.styled-components.com/docs/api#define-a-theme-interface) - */ -// tslint:disable-next-line:import-blacklist -import * as styledComponents from "styled-components"; - -import { ITheme } from "./theme/ITheme"; - -type WithOptionalTheme

= Omit & { - theme?: T -}; - -const { - default: styled, - css, - injectGlobal, - keyframes, - ThemeProvider, - withTheme -} = styledComponents as { - default: styledComponents.ThemedBaseStyledInterface; - css: styledComponents.ThemedCssFunction; - ThemeProvider: import("react").ComponentClass, any>; - injectGlobal(strings: TemplateStringsArray, ...interpolations: styledComponents.SimpleInterpolation[]): void; - keyframes(strings: TemplateStringsArray, ...interpolations: styledComponents.SimpleInterpolation[]): string; - withTheme

(component: import("react").ComponentType

): - import("react").ComponentClass, any>; -}; - -export { css, injectGlobal, keyframes, ThemeProvider, withTheme }; -// tslint:disable-next-line:no-default-export -export default styled; diff --git a/src/theme/theme.stories.tsx b/src/theme/theme.stories.tsx index fbbacd2..cfd1011 100644 --- a/src/theme/theme.stories.tsx +++ b/src/theme/theme.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { createPalette } from "./createPalette"; -import styled from "../styled-components"; +import styled from "styled-components"; import { IThemeColors } from "./ITheme"; const palette = createPalette(); @@ -11,14 +11,14 @@ const Container = styled.div` flex-wrap: wrap; `; -const PaletteColor = styled<{ color: string; }, "div">("div")` +const PaletteColor = styled.div<{ color: string; }>` border: 1px grey solid; width: 200px; height: 100px; background-color: ${props => props.color}; `; -const ThemeColor = styled<{ small?: boolean; colorThunk(themeColors: IThemeColors): string; }, "div">("div")` +const ThemeColor = styled.div<{ small?: boolean; colorThunk(themeColors: IThemeColors): string; }>` border: 1px grey solid; width: ${props => props.small ? "100px" : "200px"}; height: 100px; diff --git a/src/typings/styled.d.ts b/src/typings/styled.d.ts new file mode 100644 index 0000000..dc3402d --- /dev/null +++ b/src/typings/styled.d.ts @@ -0,0 +1,9 @@ +// import original module declarations +import 'styled-components' +import { ITheme } from "../theme/ITheme"; + +// and extend them! +declare module 'styled-components' { + export interface DefaultTheme extends ITheme { + } +} diff --git a/src/util/react/DomNodeProxy.tsx b/src/util/react/DomNodeProxy.tsx index c422034..5b5f261 100644 --- a/src/util/react/DomNodeProxy.tsx +++ b/src/util/react/DomNodeProxy.tsx @@ -14,7 +14,7 @@ export interface IEventProxyProps { * child of its parent) */ export class DomNodeProxy extends React.Component> { - private innerRef: T; + private ref: T; render() { let child = React.Children.only(this.props.children); @@ -22,19 +22,19 @@ export class DomNodeProxy extends React.Compone return ( React.cloneElement(child as any, { ref: (r: T) => { - this.innerRef = r instanceof Element ? r : ReactDOM.findDOMNode(r) as any; + this.ref = r instanceof Element ? r : ReactDOM.findDOMNode(r) as any; } }) ); } componentDidMount() { - this.props.onMount(this.innerRef); + this.props.onMount(this.ref); } componentWillUnmount() { if (this.props.onUnmount) { - this.props.onUnmount(this.innerRef); + this.props.onUnmount(this.ref); } } } diff --git a/tslint.json b/tslint.json index 123e895..e9418f7 100644 --- a/tslint.json +++ b/tslint.json @@ -60,7 +60,7 @@ } ], "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"], - "import-blacklist": [true, "bignumber.js", "styled-components", "react-uid"], + "import-blacklist": [true, "bignumber.js", "react-uid"], "whitespace": [true, "check-branch", "check-decl",