chore(mfe-sidebar): refact sidebar component.

packages/eslint-config/src/eslintrc.json

@@ -24,6 +24,7 @@
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
+    "react/display-name": "off",
     "@typescript-eslint/no-empty-function": "warn"
   }
 }

packages/mfe-sidebar/src/App.tsx

@@ -1,5 +1,42 @@
 import { Sidebar } from "./components/Sidebar";
+import { useState, useEffect, useCallback } from "react";
 
 export const App = () => {
-  return <Sidebar />;
+  const [sidebarRef, setSidebarRef] = useState<HTMLElement>();
+
+  const callbackRef = useCallback((el) => {
+    if (el) {
+      setSidebarRef(el);
+    }
+  }, []);
+
+  const [isOpen, setIsOpen] = useState(
+    JSON.parse(localStorage.getItem("typer:sidebar-open"))
+  );
+
+  const onToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      if (!entries[0]?.contentRect) {
+        return;
+      }
+      const event = new CustomEvent("typer:sidebar-resize", {
+        detail: {
+          width: entries[0].contentRect.width,
+        },
+      });
+      window.dispatchEvent(event);
+    });
+
+    observer.observe(sidebarRef);
+  }, [sidebarRef]);
+
+  useEffect(() => {
+    localStorage.setItem("typer:sidebar-open", isOpen);
+  }, [isOpen]);
+
+  return <Sidebar ref={callbackRef} isOpen={isOpen} onToggle={onToggle} />;
 };

packages/mfe-sidebar/src/components/Sidebar.tsx

@@ -1,43 +1,18 @@
-import { useEffect, useState, useRef } from "react";
+import { forwardRef } from "react";
 
 import clsx from "clsx";
 
 import { ChevronLeftIcon, PencilAltIcon, NewspaperIcon } from "@mfe/styleguide";
 
-export const Sidebar = () => {
-  const [isOpen, setIsOpen] = useState(
-    JSON.parse(localStorage.getItem("typer:sidebar-open"))
-  );
-
-  const onToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const wrapperRef = useRef();
-
-  useEffect(() => {
-    localStorage.setItem("typer:sidebar-open", isOpen);
-  }, [isOpen]);
-
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      if (!entries[0]?.contentRect) {
-        return;
-      }
-      const event = new CustomEvent("typer:sidebar-resize", {
-        detail: {
-          width: entries[0].contentRect.width,
-        },
-      });
-      window.dispatchEvent(event);
-    });
-
-    observer.observe(wrapperRef.current);
-  }, []);
+type Props = {
+  isOpen: boolean;
+  onToggle: () => void;
+};
 
+export const Sidebar = forwardRef(({ isOpen, onToggle }: Props, ref) => {
   return (
     <div
-      ref={wrapperRef}
+      ref={ref}
       className={clsx("transition-[width]", (isOpen && "w-64") || "w-12")}
     >
       <aside
@@ -80,4 +55,4 @@ export const Sidebar = () => {
       </aside>
     </div>
   );
-};
+});

packages/mfe-sidebar/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "esModuleInterop": true
   }
 }