expose sidebars sizing, v0.1.4

src/contexts/RightSidebarContext.tsx

@@ -14,6 +14,12 @@ const RIGHT_SIDEBAR_DEFAULT_WIDTH = 320;
 const RIGHT_SIDEBAR_MIN_WIDTH = 260;
 const RIGHT_SIDEBAR_MAX_WIDTH = 480;
 
+export type RightSidebarSizing = {
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+};
+
 export type RightSidebarContent = {
     title: string;
     content: ReactNode;
@@ -39,15 +45,44 @@ type RightSidebarProviderProps = {
     children: ReactNode;
     closeOnPathname?: string;
     onMobileOpenRequest?: () => void;
+    sizing?: RightSidebarSizing;
 };
 
 const RightSidebarContext = createContext<RightSidebarContextValue | undefined>(undefined);
 
+function readSizingValue(value: number | undefined, fallback: number): number {
+    if (!Number.isFinite(value) || value == null || value <= 0) {
+        return fallback;
+    }
+
+    return value;
+}
+
+function resolveRightSidebarSizing(sizing: RightSidebarSizing | undefined) {
+    const requestedMinWidth = readSizingValue(sizing?.minWidth, RIGHT_SIDEBAR_MIN_WIDTH);
+    const requestedMaxWidth = readSizingValue(sizing?.maxWidth, RIGHT_SIDEBAR_MAX_WIDTH);
+    const minWidth = Math.min(requestedMinWidth, requestedMaxWidth);
+    const maxWidth = Math.max(requestedMinWidth, requestedMaxWidth);
+    const requestedDefaultWidth = readSizingValue(
+        sizing?.defaultWidth,
+        RIGHT_SIDEBAR_DEFAULT_WIDTH,
+    );
+    const defaultWidth = Math.min(maxWidth, Math.max(minWidth, requestedDefaultWidth));
+
+    return {
+        defaultWidth,
+        minWidth,
+        maxWidth,
+    };
+}
+
 export function RightSidebarProvider({
     children,
     closeOnPathname,
     onMobileOpenRequest,
+    sizing,
 }: Readonly<RightSidebarProviderProps>) {
+    const { defaultWidth, minWidth, maxWidth } = resolveRightSidebarSizing(sizing);
     const [isOpen, setIsOpen] = useState(false);
     const [content, setContent] = useState<RightSidebarContent | null>(null);
 
@@ -92,9 +127,9 @@ export function RightSidebarProvider({
 
     const { width, startResize } = useSidePanelMachine({
         storageKey: RIGHT_SIDEBAR_WIDTH_KEY,
-        defaultWidth: RIGHT_SIDEBAR_DEFAULT_WIDTH,
-        minWidth: RIGHT_SIDEBAR_MIN_WIDTH,
-        maxWidth: RIGHT_SIDEBAR_MAX_WIDTH,
+        defaultWidth,
+        minWidth,
+        maxWidth,
         resizeAxis: 'from-right',
         resizingBodyClass: 'auth-right-sidebar-resizing',
         isOpen,