Make application shell components package-native

packages/ui-react/src/ApplicationWorkspace.ts

@@ -0,0 +1,67 @@
+import { useCallback, useState } from "react";
+
+export interface ApplicationWorkspaceState<ViewId extends string> {
+  navigationOpen: boolean;
+  activeView: ViewId | null;
+  contentOpen: boolean;
+  contentExpanded: boolean;
+}
+
+export interface ApplicationWorkspaceController<ViewId extends string> extends ApplicationWorkspaceState<ViewId> {
+  openNavigation: () => void;
+  toggleNavigation: () => void;
+  closeNavigation: () => void;
+  openView: (view: ViewId) => void;
+  closeView: () => void;
+  setContentExpanded: (expanded: boolean) => void;
+}
+
+export interface ApplicationWorkspaceInitialState<ViewId extends string> {
+  navigationOpen?: boolean;
+  activeView?: ViewId | null;
+  contentExpanded?: boolean;
+}
+
+/** Owns the Launcher-derived navigation/content-window state machine. */
+export function useApplicationWorkspace<ViewId extends string>({
+  navigationOpen: initialNavigationOpen = false,
+  activeView: initialActiveView = null,
+  contentExpanded: initialContentExpanded = true,
+}: ApplicationWorkspaceInitialState<ViewId> = {}): ApplicationWorkspaceController<ViewId> {
+  const [navigationOpen, setNavigationOpen] = useState(initialNavigationOpen || initialActiveView !== null);
+  const [activeView, setActiveView] = useState<ViewId | null>(initialActiveView);
+  const [contentExpanded, setContentExpanded] = useState(initialContentExpanded);
+
+  const openNavigation = useCallback(() => setNavigationOpen(true), []);
+  const closeView = useCallback(() => setActiveView(null), []);
+  const closeNavigation = useCallback(() => {
+    setNavigationOpen(false);
+    setActiveView(null);
+  }, []);
+  const toggleNavigation = useCallback(() => {
+    if (navigationOpen) {
+      setNavigationOpen(false);
+      setActiveView(null);
+    } else {
+      setNavigationOpen(true);
+    }
+  }, [navigationOpen]);
+  const openView = useCallback((view: ViewId) => {
+    setNavigationOpen(true);
+    setActiveView(view);
+    setContentExpanded(true);
+  }, []);
+
+  return {
+    navigationOpen,
+    activeView,
+    contentOpen: activeView !== null,
+    contentExpanded,
+    openNavigation,
+    toggleNavigation,
+    closeNavigation,
+    openView,
+    closeView,
+    setContentExpanded,
+  };
+}