From 43ab2c5a480cd1eada7619ffe70bf53d1f6e4e75 Mon Sep 17 00:00:00 2001
From: Samuel Galson <samgalson@gmail.com>
Date: Tue, 30 Jan 2018 17:00:03 +0000
Subject: [PATCH] feat(client): add styled components
---
packages/client/package.json | 3 +-
packages/client/src/components/Root.js | 2 +-
packages/client/test/components/Root.test.jsx | 36 ++++++-------
yarn.lock | 50 ++++++++++++++++---
4 files changed, 60 insertions(+), 31 deletions(-)
diff --git a/packages/client/package.json b/packages/client/package.json
index 4ad07f00b..9c3ec7586 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -32,7 +32,8 @@
"redux-form": "^7.0.3",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0",
- "reselect": "^3.0.1"
+ "reselect": "^3.0.1",
+ "styled-components": "^3.1.4"
},
"devDependencies": {
"babel-cli": "^6.26.0",
diff --git a/packages/client/src/components/Root.js b/packages/client/src/components/Root.js
index f40aafc77..ddef90e2a 100644
--- a/packages/client/src/components/Root.js
+++ b/packages/client/src/components/Root.js
@@ -2,7 +2,7 @@ import React from 'react'
import { ConnectedRouter } from 'react-router-redux'
import { Provider } from 'react-redux'
import PropTypes from 'prop-types'
-import { ThemeProvider } from 'react-css-themr'
+import { ThemeProvider } from 'styled-components'
const Root = ({ store, history, routes, theme }) => (
<Provider store={store}>
diff --git a/packages/client/test/components/Root.test.jsx b/packages/client/test/components/Root.test.jsx
index 61b8c4abe..4bf901d04 100644
--- a/packages/client/test/components/Root.test.jsx
+++ b/packages/client/test/components/Root.test.jsx
@@ -1,7 +1,7 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { themr } from 'react-css-themr'
import createHistory from 'history/createBrowserHistory'
+import styled from 'styled-components'
global.PUBSWEET_COMPONENTS = []
@@ -10,28 +10,22 @@ const configureStore = require('../../src/store/configureStore')
const history = createHistory()
const store = configureStore(history, {})
-
-const themeObj = { ThemedComponent: { testClass: 'mappedClassName' } }
-
-const ThemedComponent = themr('ThemedComponent')(({ theme }) => (
- <div className={theme.testClass} />
-))
-
-function makeWrapper(props = {}) {
- return shallow(
- <Root
- history={history}
- routes={<ThemedComponent />}
- store={store}
- theme={themeObj}
- {...props}
- />,
- )
-}
+const themeObj = { color: 'blue' }
describe('<Root/>', () => {
it('Adds a theme to context', async () => {
- const wrapper = makeWrapper()
- expect(wrapper.html()).toBe('<div class="mappedClassName"></div>')
+ const Box = styled.div`
+ test: ${props => expect(props.theme.color).toBe('blue')};
+ `
+
+ shallow(
+ <Root
+ history={history}
+ routes={<Box />}
+ store={store}
+ theme={themeObj}
+ />,
+ )
+ expect.assertions(1)
})
})
diff --git a/yarn.lock b/yarn.lock
index fbf26e9f1..aa68f82da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1836,6 +1836,13 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
+buffer@^5.0.3:
+ version "5.0.8"
+ resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+ dependencies:
+ base64-js "^1.0.2"
+ ieee754 "^1.1.4"
+
buffers@~0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
@@ -2799,6 +2806,10 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
+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"
@@ -2839,6 +2850,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.0.4"
+ resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
+ 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"
@@ -4255,7 +4274,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
-fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.1, fbjs@^0.8.15, 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:
@@ -9397,13 +9416,6 @@ react-codemirror2@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-2.0.2.tgz#68b2ae8923174a2b3d8b6fe905d0fd3c91d97d97"
-react-css-themr@^2.1.2:
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-2.1.2.tgz#e017514e471c232f43a754a55b49d81faf5dafb8"
- dependencies:
- hoist-non-react-statics "^1.2.0"
- invariant "^2.2.1"
-
react-dev-utils@^3.0.2:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.1.1.tgz#09ae7209a81384248db56547e718e65bd3b20eb5"
@@ -11056,6 +11068,20 @@ style-search@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+styled-components@^3.1.4:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
+ 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"
+ prop-types "^15.5.4"
+ stylis "^3.4.0"
+ stylis-rule-sheet "^0.0.7"
+ supports-color "^3.2.3"
+
stylelint-config-prettier@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-2.0.0.tgz#0f671435294ebe4a215971855e1e576f5f227a21"
@@ -11129,6 +11155,14 @@ stylelint@^8.2.0:
svg-tags "^1.0.0"
table "^4.0.1"
+stylis-rule-sheet@^0.0.7:
+ version "0.0.7"
+ resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
+
+stylis@^3.4.0:
+ version "3.4.8"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"
+
subcommand@^2.0.3:
version "2.1.0"
resolved "https://registry.yarnpkg.com/subcommand/-/subcommand-2.1.0.tgz#5e4ceca5a3779e3365b1511e05f866877302f760"
--
GitLab