@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/workbench/shell/useWorkbenchStandaloneShellStateSync.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+
+import type { WorkbenchStandaloneShellContext } from './WorkbenchStandaloneShell';
+import {
+  createWorkbenchStandaloneShellStateSnapshot,
+  type WorkbenchStandaloneShellStateChange,
+  type WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+
+function resolveChangeKind(
+  change: Omit<WorkbenchStandaloneShellStateChange<string, string>, 'kind' | 'previous' | 'next'>,
+): WorkbenchStandaloneShellStateChange<string, string>['kind'] {
+  if (change.activityChanged) {
+    return 'activity';
+  }
+
+  if (change.primarySidebarVisibilityChanged) {
+    return 'sidebar-visibility';
+  }
+
+  if (change.primarySidebarSizeChanged) {
+    return 'sidebar-size';
+  }
+
+  if (change.settingsOpenChanged) {
+    return 'settings';
+  }
+
+  if (change.themeChanged) {
+    return 'theme';
+  }
+
+  return 'initial';
+}
+
+function createStateChange<TActivityId extends string, TTheme extends string>(
+  previous: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme> | null,
+  next: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme>,
+  isInitial: boolean,
+): WorkbenchStandaloneShellStateChange<TActivityId, TTheme> {
+  const activityChanged = previous?.activityId !== next.activityId;
+  const primarySidebarVisibilityChanged =
+    previous?.isPrimarySidebarVisible !== next.isPrimarySidebarVisible;
+  const primarySidebarSizeChanged = previous?.primarySidebarSizePx !== next.primarySidebarSizePx;
+  const settingsOpenChanged = previous?.isSettingsOpen !== next.isSettingsOpen;
+  const themeChanged = previous?.theme !== next.theme;
+
+  const flags = {
+    activityChanged,
+    primarySidebarVisibilityChanged,
+    primarySidebarSizeChanged,
+    settingsOpenChanged,
+    themeChanged,
+  };
+
+  return {
+    ...flags,
+    kind: isInitial ? 'initial' : resolveChangeKind(flags),
+    previous,
+    next,
+  };
+}
+
+export function useWorkbenchStandaloneShellStateSync<
+  TActivityId extends string,
+  TTheme extends string,
+>(
+  context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
+  onShellStateChange?: (change: WorkbenchStandaloneShellStateChange<TActivityId, TTheme>) => void,
+): void {
+  const previousSnapshotRef = useRef<WorkbenchStandaloneShellStateSnapshot<
+    TActivityId,
+    TTheme
+  > | null>(null);
+  const onShellStateChangeRef = useRef(onShellStateChange);
+
+  useEffect(() => {
+    onShellStateChangeRef.current = onShellStateChange;
+  }, [onShellStateChange]);
+
+  useEffect(() => {
+    const callback = onShellStateChangeRef.current;
+    if (!callback) {
+      return;
+    }
+
+    const nextSnapshot = createWorkbenchStandaloneShellStateSnapshot(context);
+    const previousSnapshot = previousSnapshotRef.current;
+    const isInitial = previousSnapshot === null;
+    const change = createStateChange(previousSnapshot, nextSnapshot, isInitial);
+
+    if (
+      isInitial ||
+      change.activityChanged ||
+      change.primarySidebarVisibilityChanged ||
+      change.primarySidebarSizeChanged ||
+      change.settingsOpenChanged ||
+      change.themeChanged
+    ) {
+      callback(change);
+    }
+
+    previousSnapshotRef.current = nextSnapshot;
+  }, [
+    context,
+    context.activityId,
+    context.isPrimarySidebarVisible,
+    context.isSettingsOpen,
+    context.primarySidebarSizePx,
+    context.theme,
+  ]);
+}

package/src/workbench/shell/workbenchSidebarLayoutContext.ts

@@ -0,0 +1,46 @@
+import { createContext, useContext } from 'react';
+
+import type { WorkbenchSidebarSlotId } from '@workbench-kit/platform';
+
+export interface WorkbenchSidebarLayoutContextValue<TViewId extends string = string> {
+  readonly dropViewOnSlot: (viewId: TViewId, targetSlot: WorkbenchSidebarSlotId) => void;
+  readonly placements: Readonly<Record<TViewId, WorkbenchSidebarSlotId>>;
+  readonly primaryViewId: TViewId;
+  readonly resolveSlotViewIds: (
+    slot: WorkbenchSidebarSlotId,
+    baseViewIds: readonly TViewId[],
+  ) => readonly TViewId[];
+  readonly secondaryViewId: TViewId;
+  readonly selectPrimaryView: (viewId: TViewId) => void;
+  readonly selectSecondaryView: (viewId: TViewId) => void;
+  readonly setSlotViewOrder: (
+    slot: WorkbenchSidebarSlotId,
+    orderedViewIds: readonly TViewId[],
+    availableViewIds: readonly TViewId[],
+  ) => void;
+}
+
+type WorkbenchSidebarLayoutContextStore = WorkbenchSidebarLayoutContextValue<string>;
+
+export const WorkbenchSidebarLayoutContext =
+  createContext<WorkbenchSidebarLayoutContextStore | null>(null);
+
+export function useWorkbenchSidebarLayoutContextValue<
+  TViewId extends string,
+>(): WorkbenchSidebarLayoutContextValue<TViewId> | null {
+  return useContext(
+    WorkbenchSidebarLayoutContext,
+  ) as WorkbenchSidebarLayoutContextValue<TViewId> | null;
+}
+
+export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
+  value: WorkbenchSidebarLayoutContextValue<TViewId>,
+): WorkbenchSidebarLayoutContextStore {
+  return value as unknown as WorkbenchSidebarLayoutContextStore;
+}
+
+export function fromWorkbenchSidebarLayoutContextValue<TViewId extends string>(
+  value: WorkbenchSidebarLayoutContextStore,
+): WorkbenchSidebarLayoutContextValue<TViewId> {
+  return value as unknown as WorkbenchSidebarLayoutContextValue<TViewId>;
+}

package/src/workbench/shell/workbenchStandaloneShellReactContext.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, type ReactElement, type ReactNode } from 'react';
+
+import type { WorkbenchStandaloneShellContext } from './WorkbenchStandaloneShell';
+
+const WorkbenchStandaloneShellReactContext = createContext<unknown>(null);
+
+export interface WorkbenchStandaloneShellStateSnapshot<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+> {
+  activityId: TActivityId;
+  isPrimarySidebarVisible: boolean;
+  isSettingsOpen: boolean;
+  primarySidebarSizePx: number;
+  theme: TTheme;
+}
+
+export type WorkbenchStandaloneShellStateChangeKind =
+  'initial' | 'activity' | 'sidebar-visibility' | 'sidebar-size' | 'settings' | 'theme';
+
+export interface WorkbenchStandaloneShellStateChange<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+> {
+  kind: WorkbenchStandaloneShellStateChangeKind;
+  previous: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme> | null;
+  next: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme>;
+  activityChanged: boolean;
+  primarySidebarVisibilityChanged: boolean;
+  primarySidebarSizeChanged: boolean;
+  settingsOpenChanged: boolean;
+  themeChanged: boolean;
+}
+
+export function createWorkbenchStandaloneShellStateSnapshot<
+  TActivityId extends string,
+  TTheme extends string,
+>(
+  context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
+): WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme> {
+  return {
+    activityId: context.activityId,
+    isPrimarySidebarVisible: context.isPrimarySidebarVisible,
+    isSettingsOpen: context.isSettingsOpen,
+    primarySidebarSizePx: context.primarySidebarSizePx,
+    theme: context.theme,
+  };
+}
+
+export function WorkbenchStandaloneShellReactContextProvider<
+  TActivityId extends string,
+  TTheme extends string,
+>({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: WorkbenchStandaloneShellContext<TActivityId, TTheme>;
+}): ReactElement {
+  return (
+    <WorkbenchStandaloneShellReactContext.Provider value={value}>
+      {children}
+    </WorkbenchStandaloneShellReactContext.Provider>
+  );
+}
+
+export function useWorkbenchStandaloneShellContext<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+>(): WorkbenchStandaloneShellContext<TActivityId, TTheme> {
+  const context = useContext(WorkbenchStandaloneShellReactContext);
+
+  if (!context) {
+    throw new Error(
+      'useWorkbenchStandaloneShellContext must be used within WorkbenchStandaloneShell.',
+    );
+  }
+
+  return context as WorkbenchStandaloneShellContext<TActivityId, TTheme>;
+}

package/src/workbench/shell/workbenchViewRouteState.ts

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  areWorkbenchViewRouteSnapshotsEqual,
+  buildWorkbenchViewRouteSearch,
+  closeWorkbenchViewRoute,
+  openWorkbenchViewRoute,
+  resolveWorkbenchViewRouteSnapshot,
+  switchWorkbenchViewRoute,
+  type WorkbenchViewRouteSnapshot,
+} from '@workbench-kit/platform';
+
+export type WorkbenchViewRouteCommitMode = 'push' | 'replace';
+
+export interface WorkbenchViewRouteBrowserWindow {
+  readonly history: Pick<Window['history'], 'pushState' | 'replaceState'>;
+  readonly location: Pick<Window['location'], 'hash' | 'pathname' | 'search'>;
+  addEventListener(type: 'popstate', listener: (event: PopStateEvent) => void): void;
+  removeEventListener(type: 'popstate', listener: (event: PopStateEvent) => void): void;
+}
+
+export interface UseWorkbenchViewRouteStateOptions<TViewId extends string> {
+  readonly defaultViewId: TViewId;
+  readonly discardedParams?: ReadonlyArray<string>;
+  readonly isViewId: (value: string | null) => value is TViewId;
+  readonly routeWindow?: WorkbenchViewRouteBrowserWindow;
+  readonly tabsParam?: string;
+  readonly viewParam?: string;
+}
+
+export interface WorkbenchViewRouteState<
+  TViewId extends string,
+> extends WorkbenchViewRouteSnapshot<TViewId> {
+  readonly closeView: (viewId: TViewId) => void;
+  readonly openView: (viewId: TViewId) => void;
+  readonly switchView: (viewId: TViewId) => void;
+}
+
+export function useWorkbenchViewRouteState<TViewId extends string>({
+  defaultViewId,
+  discardedParams,
+  isViewId,
+  routeWindow,
+  tabsParam,
+  viewParam,
+}: UseWorkbenchViewRouteStateOptions<TViewId>): WorkbenchViewRouteState<TViewId> {
+  const resolvedWindow = routeWindow ?? resolveWorkbenchViewRouteBrowserWindow();
+  const resolveRouteSnapshot = useCallback(
+    () =>
+      resolveWorkbenchViewRouteSnapshot({
+        defaultViewId,
+        isViewId,
+        search: resolvedWindow.location.search,
+        tabsParam,
+        viewParam,
+      }),
+    [defaultViewId, isViewId, resolvedWindow, tabsParam, viewParam],
+  );
+  const [snapshot, setSnapshot] = useState(resolveRouteSnapshot);
+
+  useEffect(() => {
+    const handlePopState = (): void => {
+      setSnapshot(resolveRouteSnapshot());
+    };
+
+    resolvedWindow.addEventListener('popstate', handlePopState);
+    return () => {
+      resolvedWindow.removeEventListener('popstate', handlePopState);
+    };
+  }, [resolveRouteSnapshot, resolvedWindow]);
+
+  const commitSnapshot = useCallback(
+    (nextSnapshot: WorkbenchViewRouteSnapshot<TViewId>, mode: WorkbenchViewRouteCommitMode) => {
+      if (areWorkbenchViewRouteSnapshotsEqual(snapshot, nextSnapshot)) {
+        return;
+      }
+
+      const nextSearch = buildWorkbenchViewRouteSearch(
+        resolvedWindow.location.search,
+        nextSnapshot,
+        {
+          discardedParams,
+          tabsParam,
+          viewParam,
+        },
+      );
+
+      if (nextSearch !== resolvedWindow.location.search) {
+        const nextUrl = `${resolvedWindow.location.pathname}${nextSearch}${resolvedWindow.location.hash}`;
+
+        if (mode === 'replace') {
+          resolvedWindow.history.replaceState(null, '', nextUrl);
+        } else {
+          resolvedWindow.history.pushState(null, '', nextUrl);
+        }
+      }
+
+      setSnapshot(nextSnapshot);
+    },
+    [discardedParams, resolvedWindow, snapshot, tabsParam, viewParam],
+  );
+
+  const openView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(
+        {
+          activeViewId: viewId,
+          openViewIds: openWorkbenchViewRoute(snapshot.openViewIds, viewId),
+        },
+        'push',
+      );
+    },
+    [commitSnapshot, snapshot.openViewIds],
+  );
+
+  const closeView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(
+        closeWorkbenchViewRoute({
+          defaultViewId,
+          snapshot,
+          viewId,
+        }),
+        'replace',
+      );
+    },
+    [commitSnapshot, defaultViewId, snapshot],
+  );
+
+  const switchView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(switchWorkbenchViewRoute(snapshot, viewId), 'replace');
+    },
+    [commitSnapshot, snapshot],
+  );
+
+  return {
+    activeViewId: snapshot.activeViewId,
+    closeView,
+    openView,
+    openViewIds: snapshot.openViewIds,
+    switchView,
+  };
+}
+
+function resolveWorkbenchViewRouteBrowserWindow(): WorkbenchViewRouteBrowserWindow {
+  if (typeof window === 'undefined') {
+    throw new Error('useWorkbenchViewRouteState requires a browser window.');
+  }
+
+  return window;
+}

package/src/workbench/theme/WorkbenchThemeProvider.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useMemo, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import '../chrome/workbench-host.css';
+import '../chrome/workbench-platform-chrome.css';
+
+import { WorkbenchPlatformProvider } from '../chrome/WorkbenchPlatformContext';
+import {
+  applyWorkbenchThemeProviderAttributes,
+  type WorkbenchThemeProviderAttributes,
+} from './themePresets';
+import type { ResolvedWorkbenchTheme } from './theme';
+import {
+  resolveWorkbenchHostPlatform,
+  type WorkbenchHostPlatform,
+} from '../chrome/workbenchPlatformChrome';
+
+export interface WorkbenchThemeProviderProps extends Omit<
+  ComponentPropsWithoutRef<'div'>,
+  'children'
+> {
+  children: ReactNode;
+  platform?: WorkbenchHostPlatform | undefined;
+  shellPreset?: string | undefined;
+  syncDocumentElement?: boolean | undefined;
+  theme?: string | undefined;
+  themePreset?: string | undefined;
+  themePreference?: string | undefined;
+}
+
+function toProviderAttributes({
+  platform,
+  shellPreset,
+  theme,
+  themePreset,
+  themePreference,
+}: Pick<
+  WorkbenchThemeProviderProps,
+  'platform' | 'shellPreset' | 'theme' | 'themePreset' | 'themePreference'
+>): WorkbenchThemeProviderAttributes & { platform: WorkbenchHostPlatform } {
+  const resolvedPlatform = resolveWorkbenchHostPlatform(platform ?? null);
+
+  return {
+    platform: resolvedPlatform,
+    shellPreset,
+    theme: (theme ?? 'dark') as ResolvedWorkbenchTheme,
+    themePreference,
+    themePreset: themePreset ?? undefined,
+  };
+}
+
+export function WorkbenchThemeProvider({
+  children,
+  platform,
+  shellPreset,
+  syncDocumentElement = false,
+  theme,
+  themePreset,
+  themePreference,
+  ...props
+}: WorkbenchThemeProviderProps) {
+  const attributes = useMemo(
+    () =>
+      toProviderAttributes({
+        platform,
+        shellPreset,
+        theme,
+        themePreset,
+        themePreference,
+      }),
+    [platform, shellPreset, theme, themePreset, themePreference],
+  );
+
+  useEffect(() => {
+    if (!syncDocumentElement || theme === undefined || typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const rootElement = document.documentElement;
+    const previousTheme = rootElement.dataset.theme;
+    const previousThemePreset = rootElement.dataset.themePreset;
+    const previousShellPreset = rootElement.dataset.shellPreset;
+    const previousThemePreference = rootElement.dataset.themePreference;
+    const previousPlatform = rootElement.dataset.workbenchPlatform;
+
+    applyWorkbenchThemeProviderAttributes(rootElement, attributes);
+    rootElement.dataset.workbenchPlatform = attributes.platform;
+
+    return () => {
+      if (previousTheme === undefined) {
+        delete rootElement.dataset.theme;
+      } else {
+        rootElement.dataset.theme = previousTheme;
+      }
+
+      if (previousThemePreset === undefined) {
+        delete rootElement.dataset.themePreset;
+      } else {
+        rootElement.dataset.themePreset = previousThemePreset;
+      }
+
+      if (previousShellPreset === undefined) {
+        delete rootElement.dataset.shellPreset;
+      } else {
+        rootElement.dataset.shellPreset = previousShellPreset;
+      }
+
+      if (previousThemePreference === undefined) {
+        delete rootElement.dataset.themePreference;
+      } else {
+        rootElement.dataset.themePreference = previousThemePreference;
+      }
+
+      if (previousPlatform === undefined) {
+        delete rootElement.dataset.workbenchPlatform;
+      } else {
+        rootElement.dataset.workbenchPlatform = previousPlatform;
+      }
+    };
+  }, [
+    attributes.platform,
+    attributes.shellPreset,
+    attributes.theme,
+    attributes.themePreference,
+    attributes.themePreset,
+    syncDocumentElement,
+    theme,
+  ]);
+
+  return (
+    <WorkbenchPlatformProvider platform={attributes.platform}>
+      <div
+        {...props}
+        data-theme={theme}
+        data-theme-preset={themePreset}
+        data-shell-preset={shellPreset}
+        data-theme-preference={themePreference}
+        data-workbench-platform={attributes.platform}
+      >
+        {children}
+      </div>
+    </WorkbenchPlatformProvider>
+  );
+}

package/src/workbench/{theme.ts → theme/theme.ts}

@@ -1,17 +1,23 @@
 import { useSyncExternalStore } from 'react';
-import type { WorkbenchTheme } from './standalone';
+import type { WorkbenchTheme } from '../shell/standalone';
 
 export type ResolvedWorkbenchTheme = 'dark' | 'light';
 
 const LIGHT_QUERY = '(prefers-color-scheme: light)';
 
 function getSystemTheme(): ResolvedWorkbenchTheme {
-  if (typeof window === 'undefined') return 'dark';
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'dark';
+  }
+
   return window.matchMedia(LIGHT_QUERY).matches ? 'light' : 'dark';
 }
 
 function subscribeToSystemTheme(onChange: () => void): () => void {
-  if (typeof window === 'undefined') return () => undefined;
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return () => undefined;
+  }
+
   const mediaQuery = window.matchMedia(LIGHT_QUERY);
   mediaQuery.addEventListener('change', onChange);
   return () => mediaQuery.removeEventListener('change', onChange);