Merge pull request #12 from bvaughn/website

Add routing support to website

packages/react-resizable-panels-website/index.tsx

@@ -1,12 +1,25 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import App from "./src/App";
+import DemoRoute from "./src/routes/Demo";
+import MobileRoute from "./src/routes/Mobile";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <DemoRoute />,
+  },
+  {
+    path: "/mobile",
+    element: <MobileRoute />,
+  },
+]);
 
 const rootElement = document.getElementById("root");
 const root = createRoot(rootElement);
 root.render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
 );

packages/react-resizable-panels-website/package.json

@@ -7,8 +7,12 @@
     "watch": "parcel 'index.html'"
   },
   "dependencies": {
+    "localforage": "latest",
+    "match-sorter": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-virtualized-auto-sizer": "latest"
+    "react-router-dom": "latest",
+    "react-virtualized-auto-sizer": "latest",
+    "sort-by": "latest"
   }
 }

packages/react-resizable-panels-website/root.css

@@ -1,14 +1,30 @@
+:root {
+  --color-background-code: rgba(0, 0, 0, 0.35);
+  --color-background-default: #081120;
+  --color-button-background: #2a3343;
+  --color-button-background-hover: #454950;
+  --color-button-border: #18181a;
+  --color-code: #c67bff;
+  --color-default: #ffffff;
+  --color-horizontal-rule: #454950;
+  --color-link: #dcadff;
+  --color-panel-background: #192230;
+  --color-panel-background-alternate: #202124;
+  --color-solid-resize-bar: #454950;
+  --color-solid-resize-bar-handle: rgba(255, 255, 255, 0.2);
+}
+
 :root,
 html,
-body {
+body,
+#root {
   width: 100vw;
   height: 100vh;
   padding: 0;
   margin: 0;
-  overflow: hidden;
 
-  background-color: #081120;
-  color: #ffffff;
+  background-color: var(--color-background-default);
+  color: var(--color-default);
 
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
@@ -19,18 +35,13 @@ body {
   line-height: 1.5em;
 }
 
-#root {
-  width: calc(100vw - 1rem);
-  height: calc(100vh - 1rem);
-}
-
 p {
   margin: 0.5rem 0;
 }
 
 code {
-  color: #c67bff;
-  background-color: rgba(0, 0, 0, 0.35);
+  color: var(--color-code);
+  background-color: var(--color-background-code);
   padding: 0 0.25em;
   border-radius: 0.25em;
 }
@@ -41,5 +52,5 @@ h2 {
 }
 
 a {
-  color: #dcadff;
+  color: var(--color-link);
 }

packages/react-resizable-panels-website/src/AutoSizedPanelGroup.tsx → packages/react-resizable-panels-website/src/components/AutoSizedPanelGroup.tsx

@@ -1,6 +1,6 @@
 import { PanelGroup } from "react-resizable-panels";
 
-import withAutoSizer from "./withAutoSizer";
+import withAutoSizer from "../utils/withAutoSizer";
 
 const AutoSizedPanelGroup = withAutoSizer(PanelGroup);
 

packages/react-resizable-panels-website/src/components/ResizeHandle.module.css

@@ -0,0 +1,21 @@
+.ResizeHandle {
+  flex: 0 0 0.5rem;
+  position: relative;
+}
+
+.ResizeHandleActive,
+.ResizeHandleInactive {
+  position: absolute;
+  top: 0.125rem;
+  bottom: 0.125rem;
+  left: 0.125rem;
+  right: 0.125rem;
+  border-radius: 0.125rem;
+  background-color: transparent;
+  transition: background-color 0.2s linear;
+}
+
+.ResizeHandleActive,
+.ResizeHandle:hover .ResizeHandleInactive {
+  background-color: var(--color-solid-resize-bar-handle);
+}

packages/react-resizable-panels-website/src/components/ResizeHandle.tsx

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { PanelContext, PanelResizeHandle } from "react-resizable-panels";
+
+import styles from "./ResizeHandle.module.css";
+
+export default function ResizeHandle({
+  className = "",
+  id,
+}: {
+  className?: string;
+  id: string;
+}) {
+  const { activeHandleId } = useContext(PanelContext);
+  const isDragging = activeHandleId === id;
+
+  return (
+    <PanelResizeHandle
+      className={[styles.ResizeHandle, className].join(" ")}
+      id={id}
+    >
+      <div
+        className={
+          isDragging ? styles.ResizeHandleActive : styles.ResizeHandleInactive
+        }
+      />
+    </PanelResizeHandle>
+  );
+}

packages/react-resizable-panels-website/src/HorizontalGroup.tsx → packages/react-resizable-panels-website/src/routes/Demo/HorizontalGroup.tsx

@@ -1,7 +1,7 @@
-import { useContext } from "react";
-import { Panel, PanelContext, PanelResizeHandle } from "react-resizable-panels";
+import { Panel } from "react-resizable-panels";
 
-import PanelGroup from "./AutoSizedPanelGroup";
+import PanelGroup from "../../components/AutoSizedPanelGroup";
+import ResizeHandle from "../../components/ResizeHandle";
 import styles from "./styles.module.css";
 import { GROUP_ID as GROUP_ID_VERTICAL, VerticalGroup } from "./VerticalGroup";
 
@@ -17,7 +17,7 @@ export default function HorizontalGroup({
       <Panel className={styles.PanelRow} defaultSize={0.2} id="left">
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <p className={styles.ParagraphOfText}>
             This is a "<em>horizontal</em>" <code>PanelGroup</code>
@@ -45,10 +45,10 @@ export default function HorizontalGroup({
         id="middle"
         minSize={0.25}
       >
-        <DragHandle id="left-handle" />
+        <ResizeHandle id="left-handle" />
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <h2>Auto Save</h2>
           <p className={styles.ParagraphOfText}>
@@ -87,18 +87,18 @@ export default function HorizontalGroup({
             It won't shrink beyond 25% of the total width.
           </p>
         </div>
-        <DragHandle id="middle-handle" />
+        <ResizeHandle id="middle-handle" />
       </Panel>
       <Panel className={styles.PanelRow} defaultSize={0.3} id="stacked">
         <div className={styles.Grower}>
           <VerticalGroup />
         </div>
       </Panel>
       <Panel className={styles.PanelRow} defaultSize={0.2} id="right">
-        <DragHandle id="right-handle" />
+        <ResizeHandle id="right-handle" />
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <p className={styles.ParagraphOfText}>
             Read more on{" "}
@@ -116,16 +116,3 @@ export default function HorizontalGroup({
     </PanelGroup>
   );
 }
-
-function DragHandle({ id }: { id: string }) {
-  const { activeHandleId } = useContext(PanelContext);
-  const isDragging = activeHandleId === id;
-
-  return (
-    <PanelResizeHandle className={styles.HorizontalResizeHandle} id={id}>
-      <div
-        className={isDragging ? styles.ActiveResizeHandle : styles.ResizeHandle}
-      />
-    </PanelResizeHandle>
-  );
-}

packages/react-resizable-panels-website/src/VerticalGroup.tsx → packages/react-resizable-panels-website/src/routes/Demo/VerticalGroup.tsx

@@ -1,7 +1,7 @@
 import { Panel, PanelResizeHandle } from "react-resizable-panels";
 import { useState } from "react";
 
-import PanelGroup from "./AutoSizedPanelGroup";
+import PanelGroup from "../../components/AutoSizedPanelGroup";
 import styles from "./styles.module.css";
 
 export const GROUP_ID = "vertical";
@@ -13,7 +13,7 @@ export function VerticalGroup() {
   return (
     <div
       className={styles.VerticalFiller}
-      style={{ backgroundColor: "var(--color-vertical)" }}
+      style={{ backgroundColor: "var(--color-panel-background-alternate)" }}
     >
       <PanelGroup autoSaveId={GROUP_ID} direction="vertical">
         {showTopPanel && (