splitter with cookies

apps/web-tss/src/components/ui/layouts/AppSplitter/AppSplitter.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import cookies from 'js-cookie';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Button } from '@/components/ui/buttons/Button';
 import { Text } from '@/components/ui/typography/Text';
 import { Title } from '@/components/ui/typography/Title';
 import { AppSplitter } from './AppSplitter';
 import type { AppSplitterRef, LayoutSize } from './AppSplitter.types';
 import { useAppSplitterContext } from './AppSplitterProvider';
-import { createAutoSaveId } from './helpers';
+import { createAutoSaveId } from './create-auto-save-id';
 
 const meta: Meta<typeof AppSplitter> = {
   title: 'UI/layouts/AppSplitter',

apps/web-tss/src/components/ui/layouts/AppSplitter/AppSplitter.tsx

@@ -387,7 +387,8 @@ const AppSplitterBase = forwardRef<
       async (
         width: string | number,
         side: 'left' | 'right',
-        duration: number = 250
+        duration: number = 250,
+        honorConstraints: boolean = false
       ): Promise<void> => {
         return new Promise((resolve) => {
           if (!state.containerSize) {
@@ -401,23 +402,19 @@ const AppSplitterBase = forwardRef<
             cancelAnimationFrame(animationRef.current);
           }
 
-          // Convert target to pixels and clamp to constraints
           const targetPixelsRaw = sizeToPixels(width, state.containerSize);
           const constrainedTargetPixels = applyConstraints(
             preserveSide === 'left' ? targetPixelsRaw : state.containerSize - targetPixelsRaw
           );
+          const targetPixels = honorConstraints ? constrainedTargetPixels : targetPixelsRaw;
           let targetSize: number;
 
           if (side === 'left') {
             targetSize =
-              preserveSide === 'left'
-                ? constrainedTargetPixels
-                : state.containerSize - constrainedTargetPixels;
+              preserveSide === 'left' ? targetPixels : state.containerSize - targetPixels;
           } else {
             targetSize =
-              preserveSide === 'right'
-                ? constrainedTargetPixels
-                : state.containerSize - constrainedTargetPixels;
+              preserveSide === 'right' ? targetPixels : state.containerSize - targetPixels;
           }
 
           const startSize = savedLayout ?? 0;

apps/web-tss/src/routes/app.home.tsx

@@ -1,13 +1,14 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { AppSplitter } from '@/components/ui/layouts/AppSplitter/AppSplitter';
 import { createAutoSaveId } from '../components/ui/layouts/AppLayout';
+import { useAppSplitterContext } from '../components/ui/layouts/AppSplitter';
 import { getAppLayout } from '../serverFns/getAppLayout';
 
 export const Route = createFileRoute('/app/home')({
   component: RouteComponent,
   loader: async () => {
     const id = 'test0';
-    const initialLayout = await getAppLayout({ data: { id } });
+    const initialLayout = await getAppLayout({ data: { id, preservedSide: 'right' } });
     return {
       initialLayout,
     };
@@ -16,16 +17,35 @@ export const Route = createFileRoute('/app/home')({
 
 function RouteComponent() {
   const { initialLayout } = Route.useLoaderData();
+  console.log('initialLayout', initialLayout);
   return (
     <div className=" h-full">
       <AppSplitter
-        preserveSide="left"
-        defaultLayout={['230px', 'auto']}
+        preserveSide="right"
+        defaultLayout={['50%', 'auto']}
         autoSaveId="test0"
         leftChildren={<div>Left</div>}
-        rightChildren={<div>Right!!!!</div>}
+        rightChildren={<RightPanel />}
         initialLayout={initialLayout}
+        rightPanelMinSize={100}
       />
     </div>
   );
 }
+
+const RightPanel = () => {
+  const animateWidth = useAppSplitterContext((x) => x.animateWidth);
+
+  return (
+    <div className="flex flex-col">
+      Right!!!!
+      <button
+        className="bg-blue-500 text-white p-2 rounded-md"
+        type="button"
+        onClick={() => animateWidth('100%', 'right', 1000)}
+      >
+        Animate
+      </button>
+    </div>
+  );
+};