updated packages, upgraded storybook@4 -> storybook@5

Author: natterstefan

.npmrc

@@ -1,3 +1,2 @@
-save-exact=true
 @natterstefan:registry=http://localhost:4873/
 //localhost:4873/:_authToken="kG7FOb1Nem5Q1+mnSw88pg=="

.storybook/addons.js

@@ -4,5 +4,3 @@ import '@storybook/addon-knobs/register'
 import '@storybook/addon-viewport/register'
 import 'storybook-addon-jsx/register'
 import '@storybook/addon-storysource/register'
-// import '@storybook/addon-backgrounds/register'
-import '@storybook/addon-options/register'

.storybook/config.js

@@ -1,5 +1,4 @@
-import { addDecorator, configure, setAddon } from '@storybook/react'
-import { withOptions } from '@storybook/addon-options'
+import { addParameters, configure, setAddon } from '@storybook/react'
 import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { withBackgrounds } from '@storybook/addon-backgrounds'
 import JSXAddon from 'storybook-addon-jsx'
@@ -17,33 +16,25 @@ function loadStories() {
   })
 }
 
-addDecorator(
-  withOptions({
-    name: '@natterstefan',
-    url: 'https://twitter.com/natterstefan',
-    addonPanelInRight: true,
-    goFullScreen: false,
-    showAddonPanel: true,
+addParameters({
+  options: {
+    brandTitle: '@natterstefan',
+    brandUrl: 'https://twitter.com/natterstefan',
+    isFullscreen: false,
+    panelPosition: 'right',
+    showNav: true,
+    showPanel: true,
     showSearchBox: false,
     sortStoriesByKind: true,
-    showStoriesPanel: true,
-  }),
-)
+  },
+})
 
-configureViewport({
+addParameters({
   viewports: {
     ...INITIAL_VIEWPORTS,
   },
 })
 
-// NOTE: does not work when using <GlobalStyles /> in a story
-// addDecorator(
-//   withBackgrounds([
-//     { name: 'gray', value: '#efefef' },
-//     { name: 'white', value: '#fff', default: true },
-//   ]),
-// )
-
 setAddon(JSXAddon)
 
 configure(loadStories, module)

.storybook/webpack.config.js

@@ -2,13 +2,13 @@
  * Docs
  * - https://github.com/storybooks/storybook/tree/master/addons/storysource#getting-started
  */
-module.exports = function(baseConfig, env, defaultConfig) {
-  defaultConfig.module.rules.push({
+module.exports = ({ config }) => {
+  config.module.rules.push({
     test: /\.stories\.jsx?$/,
     exclude: /node_modules/,
     loaders: [require.resolve('@storybook/addon-storysource/loader')],
     enforce: 'pre',
   })
 
-  return defaultConfig
+  return config
 }

README.md

@@ -9,6 +9,12 @@
 Build your own React component library managed with lerna and presented with
 storybook.
 
+## Features
+
+- [react-hooks](https://reactjs.org/docs/hooks-overview.html) support ⚛
+- integrated [storybook@5](https://storybook.js.org) :books:
+- example components built with styled-components 💅
+
 ## Getting started
 
 Use `yarn` instead of `npm`, because we rely on [`yarn`'s `workspaces` feature](https://yarnpkg.com/lang/en/docs/workspaces/).
@@ -72,6 +78,21 @@ the root folder (uses lerna).
 In order to publish your packages to npm, simply change the `registry` property
 in each `package.json`'s `publishConfig`.
 
+## Contribution
+
+PRs are welcome and I am happy if you want to contribute! Just let me know,
+please.
+
+### Forks
+
+If this repository is forked and I see further progress on the forked repo, I am
+very happy to list your work here. It's awesome to see, when people start using
+and moving this repository even further.
+
+- [https://github.com/sebastianescribano/react-component-library-lerna](https://github.com/sebastianescribano/react-component-library-lerna):
+  they are really pushing it. They integrated a CLI to create packages from a
+  template, for instance.
+
 ## Licence
 
 [MIT](LICENCE)

package.json

@@ -50,13 +50,9 @@
     "url": "git+https://github.com/natterstefan/react-component-library-lerna.git"
   },
   "workspaces": {
-    "packages": [
-      "packages/*"
-    ]
+    "packages": ["packages/*"]
   },
-  "keywords": [
-    "lerna"
-  ],
+  "keywords": ["lerna"],
   "author": "Stefan Natter",
   "license": "MIT",
   "bugs": {
@@ -65,58 +61,56 @@
   "homepage": "https://github.com/natterstefan/react-component-library-lerna#readme",
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/core": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^4.1.11",
-    "@storybook/addon-backgrounds": "^4.1.11",
+    "@storybook/addon-actions": "^5.0.1",
     "@storybook/addon-console": "^1.1.0",
-    "@storybook/addon-knobs": "^4.1.11",
-    "@storybook/addon-options": "^4.1.11",
-    "@storybook/addon-storysource": "^4.1.11",
-    "@storybook/addon-viewport": "^4.1.11",
-    "@storybook/react": "^4.1.11",
+    "@storybook/addon-knobs": "^5.0.1",
+    "@storybook/addon-storysource": "^5.0.1",
+    "@storybook/addon-viewport": "^5.0.1",
+    "@storybook/react": "^5.0.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "24.1.0",
+    "babel-jest": "^24.3.1",
     "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",
-    "eslint": "^5.13.0",
+    "babel-plugin-styled-components": "^1.10.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.15.1",
     "eslint-config-ns": "^0.3.0",
-    "eslint-import-resolver-lerna": "^1.0.0",
+    "eslint-import-resolver-lerna": "^1.1.0",
     "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.2.2",
-    "eslint-plugin-jsx-a11y": "^6.2.0",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
-    "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",
+    "jest": "^24.3.1",
+    "jest-environment-jsdom": "^24.3.1",
+    "jest-environment-jsdom-global": "^1.1.1",
+    "jest-styled-components": "^6.3.1",
+    "lerna": "^3.13.1",
+    "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
-    "react-scripts": "^2.1.3",
-    "remark-cli": "6.0.1",
-    "remark-lint": "6.0.4",
-    "remark-preset-lint-recommended": "3.0.2",
+    "react-scripts": "^2.1.8",
+    "remark-cli": "^6.0.1",
+    "remark-lint": "^6.0.4",
+    "remark-preset-lint-recommended": "^3.0.2",
     "rimraf": "^2.6.3",
     "storybook-addon-jsx": "^6.0.0",
     "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",
-    "webpack": "4.29.3",
-    "webpack-cli": "3.2.3"
+    "stylelint": "^9.10.1",
+    "stylelint-config-recommended": "^2.1.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.5.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3"
   },
   "dependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
     "styled-components": "4.1.3"
   }
 }