Upgrade project (#333)

* chore: upgrade dependencies

* docs: refactor storybook to latest version

Add emotion for styling, and framer-motion for animations

* docs: rewrite hooks to csf

* docs: rewrite inView component to csf

Author: thebuilder

.github/workflows/test.yml

@@ -26,4 +26,3 @@ jobs:
           CI: true
       - name: Build
         run: yarn build
-

.storybook/.babelrc

@@ -1,29 +1,35 @@
 import React from 'react'
-import { addParameters, configure } from '@storybook/react'
+import { addDecorator, addParameters } from '@storybook/react'
 import { create } from '@storybook/theming'
 import 'intersection-observer'
-import './base.css'
-import pck from '../package'
+import { Global } from '@emotion/react'
 
 addParameters({
   options: {
     theme: create({
       base: 'dark',
-      brandTitle: pck.name,
-      brandUrl: pck.repository.url,
+      brandTitle: 'react-intersection-observer',
+      brandUrl: 'https://github.com/thebuilder/react-intersection-observer',
     }),
     isFullscreen: false,
     panelPosition: 'bottom',
   },
 })
 
-/**
- * Use require.context to load dynamically: https://webpack.github.io/docs/context.html
- */
-const req = require.context('../stories', true, /story\.tsx$/)
-
-function loadStories() {
-  req.keys().forEach(req)
-}
-
-configure(loadStories, module)
+addDecorator((storyFn) => (
+  <>
+    <Global
+      styles={{
+        'html, body': {
+          fontFamily:
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+          padding: 0,
+          margin: 0,
+          color: '#0c0c0c',
+          fontSize: '16px',
+        },
+      }}
+    />
+    {storyFn()}
+  </>
+))

.storybook/addons.js

@@ -0,0 +1,23 @@
+const path = require('path')
+
+module.exports = {
+  stories: ['../src/stories/**/*.(story|stories).(ts|tsx|js|jsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    {
+      name: '@storybook/preset-create-react-app',
+      options: {
+        tsDocgenLoaderOptions: {
+          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+        },
+      },
+    },
+    // {
+    //   name: '@storybook/addon-docs',
+    //   options: {
+    //     configureJSX: true,
+    //   },
+    // },
+  ],
+}

.storybook/config.js

@@ -203,7 +203,7 @@ function Component(props) {
 
   // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
   const setRefs = useCallback(
-    node => {
+    (node) => {
       // Ref's from useRef needs to have the node assigned to `current`
       ref.current = node
       // Callback refs, like the one from `useInView`, is a function that takes the node as an argument

.storybook/main.js

@@ -132,54 +132,58 @@
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.1.0",
-    "@storybook/addon-actions": "^5.0.0",
-    "@storybook/addon-knobs": "^5.0.6",
-    "@storybook/components": "^5.0.0",
-    "@storybook/react": "^5.0.0",
-    "@storybook/theming": "^5.0.11",
-    "@testing-library/jest-dom": "^5.0.0",
-    "@testing-library/react": "^9.4.0",
-    "@types/jest": "^25.1.2",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.19.2",
-    "@typescript-eslint/parser": "^2.19.2",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.5",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@emotion/react": "^11.0.0-next.12",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.18",
+    "@storybook/components": "^5.3.18",
+    "@storybook/preset-create-react-app": "^2.1.1",
+    "@storybook/react": "^5.3.18",
+    "@storybook/theming": "^5.3.18",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.2",
+    "@types/jest": "^25.2.1",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.3.0",
+    "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
     "concurrently": "^5.1.0",
-    "coveralls": "^3.0.5",
+    "coveralls": "^3.0.11",
     "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
-    "husky": "^4.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "framer-motion": "^1.10.3",
+    "husky": "^4.2.5",
     "intersection-observer": "^0.7.0",
-    "jest": "^25.1.0",
-    "lint-staged": "^10.0.7",
+    "jest": "^25.3.0",
+    "lint-staged": "^10.1.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.16.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-test-renderer": "^16.9.0",
-    "rollup": "^1.31.1",
-    "rollup-plugin-babel": "^4.2.0",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "react-test-renderer": "^16.13.1",
+    "rollup": "^2.6.0",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.0.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-terser": "^5.2.0",
-    "typescript": "^3.7.5"
+    "rollup-plugin-terser": "^5.3.0",
+    "typescript": "^3.8.3"
   }
 }

.storybook/webpack.config.js

@@ -8,7 +8,7 @@ import { terser } from 'rollup-plugin-terser'
 import pkg from './package.json'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
-const external = id => !id.startsWith('.') && !id.startsWith(root)
+const external = (id) => !id.startsWith('.') && !id.startsWith(root)
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 const globals = {
   react: 'React',

README.md

@@ -5,7 +5,7 @@ const rootDir = path.resolve(__dirname, '../')
 const distDir = path.resolve(__dirname, '../dist')
 
 const filesToCopy = ['package.json', 'README.md', 'LICENSE']
-filesToCopy.forEach(file => {
+filesToCopy.forEach((file) => {
   fs.copyFileSync(path.resolve(rootDir, file), path.resolve(distDir, file))
 })
 
@@ -23,7 +23,7 @@ const packageFieldsToRemove = [
   'np',
 ]
 
-packageFieldsToRemove.forEach(field => {
+packageFieldsToRemove.forEach((field) => {
   delete pck[field]
 })