diff --git a/frontend/.storybook/wrapper.js b/frontend/.storybook/wrapper.js index dd38165fe4..8bfa3d7142 100644 --- a/frontend/.storybook/wrapper.js +++ b/frontend/.storybook/wrapper.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider } from 'emotion-theming'; +import { ThemeProvider } from 'styled-components'; import { theme } from '../src/theme'; diff --git a/frontend/package.json b/frontend/package.json index f370b437b4..8ec93002d4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,14 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { - "emotion": "^9.0.2", - "emotion-theming": "^9.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", - "react-emotion": "^9.0.2", "react-scripts-ts": "2.13.0", "recompose": "^0.26.0", "reset-css": "^3.0.0", + "styled-components": "^3.2.3", "styled-system": "^2.1.1" }, "scripts": { diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx index a390ec960a..369d524495 100644 --- a/frontend/src/components/button/index.tsx +++ b/frontend/src/components/button/index.tsx @@ -1,6 +1,5 @@ import React, { AnchorHTMLAttributes } from 'react'; import { Box } from '../box'; -import styled from '../../styled'; import { ButtonVariant } from './types'; import { getBackgroundColor, @@ -15,22 +14,21 @@ type Props = { children: React.ReactNode; }; +const Base = Box.extend` + transition: background-color ${props => props.theme.timings[0]}s ease-out, + color ${props => props.theme.timings[0]}s ease-out; + cursor: pointer; + text-transform: uppercase; + text-decoration: none; + font-family: ${props => props.theme.fonts.button}; + display: inline-block; +`; + const button = ( { variant, children, ...additionalProps }: Props, tagName: 'a' | 'button' ) => { - // looks like emotion has some bug when using withComponent when using - // styled with additional styles - - const Component = styled(Box.withComponent(tagName))` - transition: background-color ${props => props.theme.timings[0]}s ease-out, - color ${props => props.theme.timings[0]}s ease-out; - cursor: pointer; - text-transform: uppercase; - text-decoration: none; - font-family: ${props => props.theme.fonts.button}; - display: inline-block; - `; + const Component = Base.withComponent(tagName); return ( { +export const Title = ({ level, children }: TitleProps) => { // ugly, but works :) const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements; const name = `title${level}`; @@ -59,13 +52,9 @@ const BaseTitle = ({ ); }; -export const Title = withTheme(BaseTitle); - -const BaseParagraph = withProps({ +export const Paragraph = withProps({ fontFamily: 'base', fontSize: 'body', lineHeight: 'body', mb: 3 })(BaseTypography.withComponent('p')); - -export const Paragraph = withTheme<{}, Theme>(BaseParagraph); diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index a3356af9a2..45adf81f9e 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,9 +1,8 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import App from './App'; - -import { ThemeProvider } from 'emotion-theming'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { ThemeProvider } from 'styled-components'; +import App from './App'; import { theme } from './theme'; import 'reset-css'; diff --git a/frontend/src/styled/index.ts b/frontend/src/styled/index.ts index 6bfa106c96..7b21d912d9 100644 --- a/frontend/src/styled/index.ts +++ b/frontend/src/styled/index.ts @@ -1,5 +1,14 @@ -import styled, { ThemedReactEmotionInterface } from 'react-emotion'; +import * as styledComponents from 'styled-components'; import { Theme } from '../theme'; -export default styled as ThemedReactEmotionInterface; +const { + default: styled, + css, + injectGlobal, + keyframes, + ThemeProvider +} = styledComponents as styledComponents.ThemedStyledComponentsModule; + +export default styled; +export { css, injectGlobal, keyframes, ThemeProvider }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index fec8a4cde3..bcea420110 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2,21 +2,6 @@ # yarn lockfile v1 -"@babel/helper-module-imports@7.0.0-beta.32": - version "7.0.0-beta.32" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz#8126fc024107c226879841b973677a4f4e510a03" - dependencies: - "@babel/types" "7.0.0-beta.32" - lodash "^4.2.0" - -"@babel/types@7.0.0-beta.32": - version "7.0.0-beta.32" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff" - dependencies: - esutils "^2.0.2" - lodash "^4.2.0" - to-fast-properties "^2.0.0" - "@storybook/addon-actions@^3.3.14": version "3.3.14" resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.14.tgz#b78e707b32130ad16ea8a0af62a66f23b5df502b" @@ -939,19 +924,6 @@ babel-plugin-dynamic-import-node@1.1.0: babel-template "^6.26.0" babel-types "^6.26.0" -babel-plugin-emotion@^9.0.1: - version "9.0.1" - resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.0.1.tgz#1c1ec14a5d6f40c64bd68e805f074fea60a580a7" - dependencies: - "@babel/helper-module-imports" "7.0.0-beta.32" - babel-plugin-macros "^2.0.0" - babel-plugin-syntax-jsx "^6.18.0" - convert-source-map "^1.5.0" - emotion-utils "^9.0.1" - find-root "^1.1.0" - source-map "^0.5.7" - touch "^1.0.0" - babel-plugin-eval@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-plugin-eval/-/babel-plugin-eval-1.0.1.tgz#a2faed25ce6be69ade4bfec263f70169195950da" @@ -976,12 +948,6 @@ babel-plugin-jscript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/babel-plugin-jscript/-/babel-plugin-jscript-1.0.4.tgz#8f342c38276e87a47d5fa0a8bd3d5eb6ccad8fcc" -babel-plugin-macros@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.1.0.tgz#e978fd4c5ee9cca73a809c176524c2e9f4dcccbf" - dependencies: - cosmiconfig "^4.0.0" - babel-plugin-member-expression-literals@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-plugin-member-expression-literals/-/babel-plugin-member-expression-literals-1.0.1.tgz#cc5edb0faa8dc927170e74d6d1c02440021624d3" @@ -1133,7 +1099,7 @@ babel-plugin-syntax-function-bind@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46" -babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -2014,6 +1980,13 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" +buffer@^5.0.3: + version "5.1.0" + resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe" + dependencies: + base64-js "^1.0.2" + ieee754 "^1.1.4" + builtin-modules@^1.0.0, builtin-modules@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" @@ -2494,15 +2467,6 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: parse-json "^2.2.0" require-from-string "^1.1.0" -cosmiconfig@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc" - dependencies: - is-directory "^0.3.1" - js-yaml "^3.9.0" - parse-json "^4.0.0" - require-from-string "^2.0.1" - create-ecdh@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d" @@ -2510,20 +2474,6 @@ create-ecdh@^4.0.0: bn.js "^4.1.0" elliptic "^6.0.0" -create-emotion-styled@^9.0.1: - version "9.0.1" - resolved "https://registry.yarnpkg.com/create-emotion-styled/-/create-emotion-styled-9.0.1.tgz#70be09fcd0735ec88459ffbfc8128eb3f5690341" - dependencies: - emotion-utils "^9.0.1" - -create-emotion@^9.0.2: - version "9.0.2" - resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.0.2.tgz#a8680b9f02f736112b68b9e9b47401dfbb4d9260" - dependencies: - emotion-utils "^9.0.1" - stylis "^3.3.2" - stylis-rule-sheet "^0.0.5" - create-error-class@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6" @@ -2605,6 +2555,10 @@ crypto-random-string@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -2670,6 +2624,14 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-to-react-native@^2.0.3: + version "2.1.2" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.1.2.tgz#c06d628467ef961c85ec358a90f3c87469fb0095" + dependencies: + css-color-keywords "^1.0.0" + fbjs "^0.8.5" + postcss-value-parser "^3.3.0" + css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" @@ -3087,23 +3049,6 @@ emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" -emotion-theming@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-9.0.0.tgz#3b7dd07ceae70aab98280e81df8bfd7f9254d5c3" - dependencies: - hoist-non-react-statics "^2.3.1" - -emotion-utils@^9.0.1: - version "9.0.1" - resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-9.0.1.tgz#db1034410d8ac4e399845d346471c3f2db5124d7" - -emotion@^9.0.2: - version "9.0.2" - resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.0.2.tgz#a40d28fd330562a42012a2cb17168b41b7caec94" - dependencies: - babel-plugin-emotion "^9.0.1" - create-emotion "^9.0.2" - encodeurl@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -3139,7 +3084,7 @@ errno@^0.1.3, errno@^0.1.4: dependencies: prr "~1.0.1" -error-ex@^1.2.0, error-ex@^1.3.1: +error-ex@^1.2.0: version "1.3.1" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc" dependencies: @@ -3521,7 +3466,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: @@ -3613,10 +3558,6 @@ find-cache-dir@^1.0.0: make-dir "^1.0.0" pkg-dir "^2.0.0" -find-root@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" - find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -5076,7 +5017,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0: +js-yaml@^3.4.3, js-yaml@^3.7.0: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" dependencies: @@ -5171,10 +5112,6 @@ json-loader@^0.5.4, json-loader@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d" -json-parse-better-errors@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a" - json-schema-traverse@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340" @@ -5451,7 +5388,7 @@ lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: +"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" @@ -5923,12 +5860,6 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" -nopt@~1.0.10: - version "1.0.10" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" - dependencies: - abbrev "1" - normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: version "2.4.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f" @@ -6255,13 +6186,6 @@ parse-json@^2.2.0: dependencies: error-ex "^1.2.0" -parse-json@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0" - dependencies: - error-ex "^1.3.1" - json-parse-better-errors "^1.0.1" - parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" @@ -6968,13 +6892,6 @@ react-dom@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" -react-emotion@^9.0.2: - version "9.0.2" - resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.0.2.tgz#99ec26cb9ad671fff393338354543ff7c2540ae1" - dependencies: - babel-plugin-emotion "^9.0.1" - create-emotion-styled "^9.0.1" - react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" @@ -7449,10 +7366,6 @@ require-from-string@^1.1.0: version "1.2.1" resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" -require-from-string@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff" - require-main-filename@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1" @@ -8173,19 +8086,34 @@ style-loader@^0.20.2: loader-utils "^1.1.0" schema-utils "^0.4.3" +styled-components@^3.2.3: + version "3.2.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.2.3.tgz#50f71207320eeb1ef539dec4637f21f5e3c936b4" + dependencies: + buffer "^5.0.3" + css-to-react-native "^2.0.3" + fbjs "^0.8.9" + hoist-non-react-statics "^1.2.0" + is-plain-object "^2.0.1" + opencollective "^1.0.3" + prop-types "^15.5.4" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^3.2.3" + styled-system@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.1.1.tgz#ec7cd9c25f8413662c90a3ff1b6660cf8d744163" dependencies: prop-types "^15.6.0" -stylis-rule-sheet@^0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f" +stylis-rule-sheet@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" -stylis@^3.3.2: - version "3.4.10" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee" +stylis@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" supports-color@^2.0.0: version "2.0.0" @@ -8366,10 +8294,6 @@ to-fast-properties@^1.0.0, to-fast-properties@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" -to-fast-properties@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" - to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" @@ -8396,12 +8320,6 @@ toposort@^1.0.0: version "1.0.6" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec" -touch@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" - dependencies: - nopt "~1.0.10" - tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"