Add persistent-layouts doc

Author: bvaughn

lib/TODO.md

@@ -0,0 +1,3 @@
+{
+  "html": "<div style=\"min-height: 1rem;\"><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"\"> </span><span class=\"tok-propertyName\">autoSave</span><span class=\"\"> </span><span class=\"tok-propertyName\">id</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"auto-save-example\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem;\"><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">minSize</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">50</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">left</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem;\"><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">minSize</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">50</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">middle</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem;\"><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">minSize</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">50</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">right</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

public/generated/code-snippets/PersistentLayouts.json

@@ -20,7 +20,7 @@ export function NavLink({
           className={cn(
             "px-4 cursor-pointer",
             {
-              "font-bold text-emerald-200 hover:text-white": isActive,
+              "font-bold text-fuchsia-400 hover:text-fuchsia-200": isActive,
               "opacity-50 pointer-events-none": isPending
             },
             className

src/nav/NavLink.tsx

@@ -1,12 +1,45 @@
+import { Group, Panel } from "react-resizable-panels";
+import { html as ExampleHTML } from "../../public/generated/code-snippets/PersistentLayouts.json";
 import { Box } from "../components/Box";
 import { Callout } from "../components/Callout";
+import { Code } from "../components/code/Code";
 import { Header } from "../components/Header";
+import { Text } from "../components/Text";
 
 export default function PersistentLayoutsRoute() {
   return (
     <Box direction="column" gap={4}>
       <Header section="Examples" title="Persistent layouts" />
-      <Callout intent="warning">Coming soon</Callout>
+      <div>
+        Panel groups can be configured to automatically save and restore layouts
+        between page visits using the <code>autoSave</code> prop. Resize the
+        panels below and then reload the page to see an example.
+      </div>
+      <Code html={ExampleHTML} />
+      <Group className="h-15 gap-1">
+        <Panel
+          className="border border-2 border-slate-700 rounded"
+          minSize={50}
+        >
+          <Text>left</Text>
+        </Panel>
+        <Panel
+          className="border border-2 border-slate-700 rounded"
+          minSize={50}
+        >
+          <Text>center</Text>
+        </Panel>
+        <Panel
+          className="border border-2 border-slate-700 rounded"
+          minSize={50}
+        >
+          <Text>right</Text>
+        </Panel>
+      </Group>
+      <Callout intent="warning">
+        In order to re-associate saved layouts with the appropriate group,
+        auto-save groups require a unique <code>id</code> prop.
+      </Callout>
     </Box>
   );
 }

src/routes/PersistentLayoutsRoute.tsx

@@ -33,8 +33,14 @@ const VERSIONS = {
     "3.0.6":
       "https://react-resizable-panels-au2wmqbbr-brian-vaughns-projects.vercel.app/"
   },
-  "2": {},
-  "1": {}
+  "2": {
+    "2.1.7":
+      "https://react-resizable-panels-ca7gk2gh5-brian-vaughns-projects.vercel.app/",
+    "2.0.23": ""
+  },
+  "1": {
+    "1.0.10": ""
+  }
 };
 
 function VersionLink({ url, version }: { url: string; version: string }) {

src/routes/VersionsRoute.tsx

@@ -0,0 +1,10 @@
+import { Group, Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Group autoSave id="auto-save-example">
+  <Panel minSize={50}>left</Panel>
+  <Panel minSize={50}>middle</Panel>
+  <Panel minSize={50}>right</Panel>
+</Group>