Add infinite board (#3)

.eslintrc.js

@@ -1,14 +1,14 @@
 const path = require("path");
 
 const projectRootDir = path.resolve(__dirname);
-
 module.exports = {
   parser: "babel-eslint",
   extends: [
     "airbnb-base",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "prettier",
+    "plugin:storybook/recommended",
   ],
   root: true,
   env: {
@@ -33,6 +33,12 @@ module.exports = {
     ],
     "import/no-unresolved": "error",
     "prettier/prettier": ["error"],
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        additionalHooks: "(useRecoilCallback|useRecoilTransaction_UNSTABLE)",
+      },
+    ],
   },
   settings: {
     "import/resolver": {

.gitignore

@@ -21,3 +21,5 @@ build
 /coverage/
 /lib/
 /dist/
+storybook-static/
+

.nvmrc

@@ -1 +1 @@
-14
+16

package.json

@@ -37,10 +37,10 @@
     "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@scripters/use-socket.io": "git+https://github.com/jrmi/use-socket.io.git#updated",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/react": "^6.3.4",
+    "@storybook/addon-actions": "^6.4.17",
+    "@storybook/addon-essentials": "^6.4.17",
+    "@storybook/addon-links": "^6.4.17",
+    "@storybook/react": "^6.4.17",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
@@ -53,6 +53,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.6",
     "final-form": "^4.20.2",
     "jest": "^27.0.5",
     "postcss-preset-env": "^6.7.0",
@@ -78,12 +79,11 @@
   "dependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@react-hookz/web": "^12.3.0",
     "color2k": "^1.2.4",
     "dayjs": "^1.10.5",
     "fast-deep-equal": "^3.1.3",
-    "lodash.debounce": "^4.0.8",
     "lodash.findlast": "^4.6.0",
-    "lodash.throttle": "^4.1.1",
     "nanoid": "^3.1.23",
     "randomcolor": "^0.6.2"
   },

rollup.config.js

@@ -7,7 +7,7 @@ import alias from "@rollup/plugin-alias";
 import path from "path";
 import css from "rollup-plugin-css-only";
 import pkg from "./package.json";
-// import analyze from "rollup-plugin-analyzer";
+import analyze from "rollup-plugin-analyzer";
 
 const projectRootDir = path.resolve(__dirname);
 
@@ -62,7 +62,7 @@ export default [
       }),
       css({ output: "bundle.css" }),
       image(),
-      // analyze({ summaryOnly: true }),
+      analyze({ summaryOnly: true }),
     ],
     output: [
       {

src/BoardWrapper.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import { RecoilRoot, useSetRecoilState, useRecoilState } from "recoil";
 import { nanoid } from "nanoid";
+import { useResizeObserver } from "@react-hookz/web/esm";
 
 import useWire, { WireProvider } from "@/hooks/useWire";
 
@@ -16,18 +17,16 @@ import { insideClass } from "./utils";
 const StyledBoardView = styled.div`
   overflow: hidden;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
+  inset: 0;
 `;
 
 const SyncBoard = ({ children, style }) => {
+  const boardWrapperRef = React.useRef(null);
   const setCurrentUserState = useSetRecoilState(userAtom);
 
   const { room: session } = useWire("board");
 
-  const [{ uid }, setSettings] = useRecoilState(ConfigurationAtom);
+  const [{ uid }, setConfiguration] = useRecoilState(ConfigurationAtom);
 
   React.useEffect(() => {
     // Chrome-related issue.
@@ -60,14 +59,35 @@ const SyncBoard = ({ children, style }) => {
   }, [session, setCurrentUserState]);
 
   React.useEffect(() => {
-    setSettings((prev) => ({
+    if (!uid) {
+      setConfiguration((prev) => ({
+        ...prev,
+        uid: nanoid(),
+      }));
+    }
+  }, [setConfiguration, uid]);
+
+  React.useEffect(() => {
+    setConfiguration((prev) => ({
       ...prev,
-      uid: nanoid(),
+      boardWrapper: boardWrapperRef.current,
     }));
-  }, [setSettings]);
+  }, [setConfiguration, uid]);
+
+  useResizeObserver(boardWrapperRef, () =>
+    setConfiguration((prev) => ({
+      ...prev,
+      boardWrapperRect: boardWrapperRef.current.getBoundingClientRect(),
+    }))
+  );
 
   return (
-    <StyledBoardView id={uid} className="sync-board" style={style}>
+    <StyledBoardView
+      ref={boardWrapperRef}
+      id={uid}
+      className="sync-board"
+      style={style}
+    >
       {children}
     </StyledBoardView>
   );