added styled-components, fixed jest setup (unresolved imports)

natterstefan · natterstefan · commit 4aa933fc1671 · 2019-02-10T18:55:50.000+01:00
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -12,13 +12,14 @@ function loadStories() {
 
 addDecorator(
   withOptions({
-    name: 'Storybook',
+    name: '@natterstefan',
+    url: 'https://twitter.com/natterstefan',
+    addonPanelInRight: true,
     goFullScreen: false,
-    showStoriesPanel: true,
     showAddonPanel: true,
     showSearchBox: false,
-    addonPanelInRight: true,
     sortStoriesByKind: true,
+    showStoriesPanel: true,
   }),
 )
 
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -0,0 +1,3 @@
+<script>
+  document.title = '@natterstefan/react-component-library-lerna';
+</script>
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,9 @@
+{
+  "processors": [
+    "stylelint-processor-styled-components"
+  ],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ]
+}
diff --git a/CHANGES.md b/CHANGES.md
@@ -13,4 +13,5 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
   - local verdaccio setup (with docker)
   - jest test suite setup
   - ESLint and prettier setup
-  - babel setup
+  - babel setup
+  - styled-components setup
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,13 @@
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [
+    [
+      'babel-plugin-styled-components',
+      {
+        ssr: true,
+        displayName: true,
+        fileName: false,
+      },
+    ],
+  ],
 }
diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,13 @@
-// partially inspired by https://github.com/facebook/jest/issues/3112
+/**
+ * Notes
+ *
+ * - I had issues running tests in packages depending on other packages (symlinked
+ *   with lerna bootstrap) at first. Errors during tests was the result. After
+ *   reading this discussion, adding a `pretest` script resolved the issue.
+ *   See: https://github.com/lerna/lerna/issues/1367#issuecomment-380187436
+ *
+ * - Parts of this configuration are inspired by: https://github.com/facebook/jest/issues/3112#issuecomment-398581705
+ */
 module.exports = {
   collectCoverageFrom: [
     'packages/**/*.js',
@@ -7,12 +16,17 @@ module.exports = {
     '!packages/**/prop-types.js',
     '!packages/**/*.stories.js',
     '!packages/**/*.test.js',
+    '!packages/**/jest.*.js',
     '!packages/__tests__/**/*.js',
     '!packages/__mocks__/**/*.js',
   ],
   collectCoverage: true,
+  modulePaths: ['<rootDir>'],
   notify: true,
   notifyMode: 'failure-change',
+  projects: ['<rootDir>/packages/*'],
+  resetMocks: true,
+  resetModules: true,
   roots: ['<rootDir>/packages/'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
@@ -24,5 +38,5 @@ module.exports = {
     '.+\\.js$': 'babel-jest',
   },
   testEnvironment: 'jest-environment-jsdom-global',
-  verbose: true,
+  verbose: false, // if you want to see all tests for each suite, change to true
 }
diff --git a/package.json b/package.json
@@ -14,13 +14,17 @@
     "build-storybook": "build-storybook -c .storybook -o dist/storybook",
     "clean": "lerna clean",
     "clean-dist": "lerna run prebuild --stream --parallel",
-    "lint": "lerna run lint --stream --parallel",
+    "lint": "yarn lint-css && yarn lint-js",
+    "lint-css": "stylelint 'packages/**/*.js'",
+    "lint-js": "eslint ./packages",
+    "lint-lerna": "lerna run lint --stream --parallel",
     "prepublishOnly": "yarn clean && yarn && yarn build",
     "publish": "lerna publish",
-    "setup": "yarn clean && yarn && yarn bootstrap",
-    "start": "start-storybook -p 9001 -c .storybook --ci",
-    "test": "jest",
-    "watch-test": "jest --watch"
+    "setup": "yarn && yarn clean && yarn bootstrap",
+    "start": "yarn clean-dist && start-storybook -p 9001 -c .storybook --ci",
+    "pretest": "yarn build",
+    "test": "jest --detectOpenHandles",
+    "posttest": "yarn clean-dist"
   },
   "publishConfig": {
     "access": "public",
@@ -36,7 +40,7 @@
       "prettier --write",
       "yarn lint",
       "git update-index --again",
-      "jest --findRelatedTests"
+      "yarn test --findRelatedTests"
     ]
   },
   "repository": {
@@ -70,6 +74,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "24.1.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-styled-components": "1.10.0",
     "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "1.9.1",
     "enzyme-to-json": "3.3.5",
@@ -85,13 +90,18 @@
     "jest": "24.1.0",
     "jest-environment-jsdom": "24.0.0",
     "jest-environment-jsdom-global": "1.1.0",
+    "jest-styled-components": "6.3.1",
     "lerna": "^3.11.0",
     "lint-staged": "^8.1.3",
     "prettier": "^1.16.4",
     "react-scripts": "^2.1.3",
     "rimraf": "^2.6.3",
     "storybook-addon-jsx": "^6.0.0",
-    "storybook-readme": "^4.0.5"
+    "storybook-readme": "^4.0.5",
+    "stylelint": "9.10.1",
+    "stylelint-config-recommended": "2.1.0",
+    "stylelint-config-styled-components": "0.1.1",
+    "stylelint-processor-styled-components": "1.5.2"
   },
   "dependencies": {
     "react": "^16.8.1",
diff --git a/packages/button/.stylelintrc b/packages/button/.stylelintrc
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../.stylelintrc"
+  ]
+}
diff --git a/packages/button/jest.config.js b/packages/button/jest.config.js
@@ -0,0 +1,13 @@
+const baseConfig = require('../../jest.config.js')
+
+const pack = require('./package')
+
+module.exports = {
+  ...baseConfig,
+  displayName: pack.name,
+  modulePaths: ['<rootDir>'],
+  name: pack.name,
+  rootDir: '../..',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testMatch: ['/**/*.test.js'],
+}
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -12,6 +12,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir dist",
+    "pretest": "yarn build",
     "lint": "eslint src",
     "test": "jest"
   },
@@ -22,6 +23,7 @@
   "author": "Stefan Natter",
   "license": "MIT",
   "dependencies": {
-    "react": "^16.8.1"
+    "react": "^16.8.1",
+    "styled-components": "^4.1.3"
   }
 }
diff --git a/packages/button/src/index.js b/packages/button/src/index.js
@@ -1,9 +1,27 @@
 import React from 'react'
+import styled from 'styled-components'
 
-const Button = ({ onClick, children }) => (
-  <button type="button" onClick={onClick}>
+export const StyledButton = styled.button`
+  border: 1px solid #000;
+  padding: 10px;
+
+  :hover {
+    border: 2px solid blue;
+    cursor: pointer;
+    font-weight: 700;
+  }
+
+  :active,
+  :focus,
+  :visited {
+    outline: none;
+  }
+`
+
+export const Button = ({ onClick, children }) => (
+  <StyledButton type="button" onClick={onClick}>
     {children}
-  </button>
+  </StyledButton>
 )
 
 export default Button
diff --git a/packages/button/src/index.test.js b/packages/button/src/index.test.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 
 import Button from '.'
 
@@ -11,7 +11,7 @@ describe('Button', () => {
 
   it('invokes onClick when clicked', () => {
     const onClick = jest.fn()
-    const wrapper = shallow(<Button onClick={onClick}>Hello Button</Button>)
+    const wrapper = mount(<Button onClick={onClick}>Hello Button</Button>)
     wrapper.find('button').simulate('click')
     expect(onClick).toHaveBeenCalledTimes(1)
   })
diff --git a/packages/card/.stylelintrc b/packages/card/.stylelintrc
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../.stylelintrc"
+  ]
+}
diff --git a/packages/card/jest.config.js b/packages/card/jest.config.js
@@ -0,0 +1,12 @@
+const baseConfig = require('../../jest.config.js')
+
+const pack = require('./package')
+
+module.exports = {
+  ...baseConfig,
+  displayName: pack.name,
+  name: pack.name,
+  rootDir: '../..',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testMatch: ['/**/*.test.js'],
+}
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -4,7 +4,9 @@
   "description": "Example card component",
   "main": "./dist/index.js",
   "module": "./src/index.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "directories": {
     "lib": "src"
   },
@@ -23,6 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "@natterstefan/ns-button-js": "^0.1.0",
-    "react": "^16.8.1"
+    "react": "^16.8.1",
+    "styled-components": "^4.1.3"
   }
 }
diff --git a/packages/card/src/index.js b/packages/card/src/index.js
@@ -1,17 +1,18 @@
 import React from 'react'
+import styled from 'styled-components'
 import Button from '@natterstefan/ns-button-js'
 
-const Card = ({ onClick, buttonText, title }) => (
-  <div
-    style={{
-      border: '1px solid black',
-      padding: '5px 20px 20px',
-      textAlign: 'center',
-    }}
-  >
+export const StyledCard = styled.div`
+  border: 1px solid black;
+  padding: 0 10px 15px;
+  text-align: center;
+`
+
+export const Card = ({ onClick, buttonText, title }) => (
+  <StyledCard>
     <h1>{title}</h1>
     <Button onClick={onClick}>{buttonText}</Button>
-  </div>
+  </StyledCard>
 )
 
 export default Card
diff --git a/packages/card/src/index.test.js b/packages/card/src/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { mount, shallow } from 'enzyme'
-
-import Button from '../../button'
+import Button from '@natterstefan/ns-button-js'
 
 import Card from '.'
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<script>`
	`2`	`+ document.title = '@natterstefan/react-component-library-lerna';`
	`3`	`+</script>`