build: upgrade storybook and dependencies (#474)

* build: upgrade storybook and dependencies

* build: enable jit mode

* ci: add babel-helper

* ci: upgrade more deps

.babelrc

@@ -4,6 +4,12 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
-
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ]
 }

.storybook/main.js

@@ -1,3 +1,6 @@
+const path = require('path');
+const postcssConfig = require('../postcss.config');
+
 module.exports = {
   stories: [
     '../src/stories/**/*.@(story|stories).mdx',
@@ -10,8 +13,28 @@ module.exports = {
     '@storybook/addon-viewport',
     'storybook-dark-mode/register',
   ],
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
+  core: {
+    builder: 'webpack5',
+  },
+  babel: async (options) => ({
+    ...options,
+  }),
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              ...postcssConfig,
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    return config;
   },
 };

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  .sbdocs .sbdocs-hidden {
+    display: none;
+  }
+</style>

.storybook/preview.js

@@ -1,6 +1,5 @@
 import 'intersection-observer';
 import 'tailwindcss/tailwind.css';
-import './styles.css';
 import { themes } from '@storybook/theming';
 import { themeOptions } from './theme';
 

package.json

@@ -126,66 +126,66 @@
       "jest-setup.js"
     ]
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-controls": "^6.1.14",
-    "@storybook/addon-docs": "^6.1.14",
-    "@storybook/addon-viewport": "^6.1.14",
-    "@storybook/react": "^6.1.14",
-    "@storybook/theming": "^6.1.14",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
-    "@typescript-eslint/parser": "^4.13.0",
-    "autoprefixer": "^9",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/helper-builder-react-jsx": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-controls": "^6.3.7",
+    "@storybook/addon-docs": "^6.3.7",
+    "@storybook/addon-viewport": "^6.3.7",
+    "@storybook/builder-webpack5": "^6.3.7",
+    "@storybook/manager-webpack5": "^6.3.7",
+    "@storybook/react": "^6.3.7",
+    "@storybook/theming": "^6.3.7",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.17",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "autoprefixer": "^10.3.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-dev-expression": "^0.2.2",
-    "concurrently": "^5.1.0",
-    "coveralls": "^3.0.11",
-    "eslint": "^7.18.0",
+    "concurrently": "^6.2.1",
+    "coveralls": "^3.1.1",
+    "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-flowtype": "^5.9.0",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "framer-motion": "^3.2.1",
+    "framer-motion": "^4.1.17",
     "husky": "^4.3.8",
     "intersection-observer": "^0.12.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.2",
-    "microbundle": "^0.13.0",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.1.2",
+    "microbundle": "^0.13.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.35",
-    "prettier": "^2.2.0",
-    "prettier-plugin-pkg": "^0.8.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
-    "storybook-dark-mode": "^1.0.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "typescript": "^4.1.3"
-  },
-  "resolutions": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.3.2",
+    "prettier-plugin-pkg": "^0.10.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "storybook-dark-mode": "^1.0.8",
+    "tailwindcss": "^2.2.7",
+    "typescript": "^4.3.5",
+    "webpack": "^5.50.0"
   }
 }

src/observe.ts

@@ -9,15 +9,14 @@ const ObserverMap = new Map<
   }
 >();
 
-const RootIds: WeakMap<Element, string> = new WeakMap();
-
+const RootIds: WeakMap<Element | Document, string> = new WeakMap();
 let rootId = 0;
 
 /**
  * Generate a unique ID for the root element
  * @param root
  */
-function getRootId(root?: Element | null) {
+function getRootId(root: IntersectionObserverInit['root']) {
   if (!root) return '0';
   if (RootIds.has(root)) return RootIds.get(root);
   rootId += 1;

src/test-utils.ts

@@ -88,7 +88,10 @@ function triggerIntersection(
             toJSON(): any {},
           },
       isIntersecting,
-      rootBounds: observer.root ? observer.root.getBoundingClientRect() : null,
+      rootBounds:
+        observer.root instanceof Element
+          ? observer.root?.getBoundingClientRect()
+          : null,
       target: element,
       time: Date.now() - item.created,
     });

tailwind.config.js

@@ -1,20 +1,7 @@
+/** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
 module.exports = {
+  // This "hack" ensures your IDE detects all normal Tailwind classes, while JIT is used when compiling the project.
+  // All the normal Tailwind classes should show up in code completion. It can't show all the new classes generated by JIT.
+  mode: process.env.NODE_ENV ? 'jit' : undefined,
   purge: ['src/**/*.tsx'],
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-    backgroundColor: [
-      'responsive',
-      'hover',
-      'focus',
-      'group-hover',
-      'odd',
-      'even',
-    ],
-    opacity: ['responsive', 'hover', 'focus', 'group-hover'],
-    display: ['responsive', 'hover', 'focus', 'group-hover'],
-  },
-  plugins: [],
 };