@object-ui/react 2.0.0 → 3.0.0

package/src/hooks/useViewSharing.ts

@@ -0,0 +1,140 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+
+/** View sharing visibility aligned with ViewSharingSchema */
+export type ViewVisibility = 'private' | 'team' | 'organization' | 'public';
+
+/** A saved view configuration */
+export interface SavedView {
+  id: string;
+  name: string;
+  /** The view configuration (filters, sort, columns, etc.) */
+  config: Record<string, unknown>;
+  /** Who can see this view */
+  visibility: ViewVisibility;
+  /** Who created this view */
+  createdBy?: string;
+  /** Whether this is the default view */
+  isDefault?: boolean;
+  /** When the view was last modified */
+  updatedAt: Date;
+}
+
+export interface ViewSharingResult {
+  /** All available views */
+  views: SavedView[];
+  /** Currently active view */
+  activeView: SavedView | null;
+  /** Save a new view or update existing */
+  saveView: (view: Omit<SavedView, 'id' | 'updatedAt'>) => string;
+  /** Set the active view */
+  setActiveView: (viewId: string) => void;
+  /** Delete a view */
+  deleteView: (viewId: string) => void;
+  /** Duplicate a view */
+  duplicateView: (viewId: string, newName: string) => string;
+  /** Update view visibility */
+  setVisibility: (viewId: string, visibility: ViewVisibility) => void;
+}
+
+let viewCounter = 0;
+
+/**
+ * Hook for managing shared/personal view configurations.
+ * Implements ViewSharingSchema from @objectstack/spec v2.0.7.
+ *
+ * @example
+ * ```tsx
+ * const viewSharing = useViewSharing(initialViews);
+ *
+ * // Save current filters/sort as a named view
+ * viewSharing.saveView({
+ *   name: 'My Open Tasks',
+ *   config: { filters: currentFilters, sort: currentSort },
+ *   visibility: 'private',
+ * });
+ * ```
+ */
+export function useViewSharing(initialViews: SavedView[] = []): ViewSharingResult {
+  const [views, setViews] = useState<SavedView[]>(initialViews);
+  const [activeViewId, setActiveViewId] = useState<string | null>(
+    initialViews.find((v) => v.isDefault)?.id ?? initialViews[0]?.id ?? null
+  );
+
+  const activeView = useMemo(
+    () => views.find((v) => v.id === activeViewId) ?? null,
+    [views, activeViewId]
+  );
+
+  const saveView = useCallback(
+    (input: Omit<SavedView, 'id' | 'updatedAt'>): string => {
+      const id = `view-${++viewCounter}`;
+      const view: SavedView = {
+        ...input,
+        id,
+        updatedAt: new Date(),
+      };
+      setViews((prev) => [...prev, view]);
+      return id;
+    },
+    []
+  );
+
+  const setActiveView = useCallback((viewId: string) => {
+    setActiveViewId(viewId);
+  }, []);
+
+  const deleteView = useCallback((viewId: string) => {
+    setViews((prev) => prev.filter((v) => v.id !== viewId));
+    setActiveViewId((current) => (current === viewId ? null : current));
+  }, []);
+
+  const duplicateView = useCallback(
+    (viewId: string, newName: string): string => {
+      const original = views.find((v) => v.id === viewId);
+      if (!original) return '';
+      const id = `view-${++viewCounter}`;
+      const duplicate: SavedView = {
+        ...original,
+        id,
+        name: newName,
+        isDefault: false,
+        updatedAt: new Date(),
+      };
+      setViews((prev) => [...prev, duplicate]);
+      return id;
+    },
+    [views]
+  );
+
+  const setVisibility = useCallback(
+    (viewId: string, visibility: ViewVisibility) => {
+      setViews((prev) =>
+        prev.map((v) =>
+          v.id === viewId ? { ...v, visibility, updatedAt: new Date() } : v
+        )
+      );
+    },
+    []
+  );
+
+  return useMemo(
+    () => ({
+      views,
+      activeView,
+      saveView,
+      setActiveView,
+      deleteView,
+      duplicateView,
+      setVisibility,
+    }),
+    [views, activeView, saveView, setActiveView, deleteView, duplicateView, setVisibility]
+  );
+}

package/src/hooks/useViewTransition.ts

@@ -0,0 +1,144 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { useReducedMotion } from './useReducedMotion';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ViewTransitionConfig {
+  /** Enable view transitions (default: true) */
+  enabled?: boolean;
+  /** Fallback animation class when View Transitions API is unsupported */
+  fallbackClass?: string;
+  /** Transition duration in ms (default: 300) */
+  duration?: number;
+  /** Called before transition starts */
+  onTransitionStart?: () => void;
+  /** Called after transition completes */
+  onTransitionEnd?: () => void;
+}
+
+export interface ViewTransitionResult {
+  /** Whether the View Transitions API is supported */
+  isSupported: boolean;
+  /** Whether a transition is currently in progress */
+  isTransitioning: boolean;
+  /** Execute a callback with a view transition */
+  startTransition: (callback: () => void | Promise<void>) => Promise<void>;
+  /** CSS class to apply during transitions */
+  transitionClass: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const DEFAULT_DURATION = 300;
+const DEFAULT_FALLBACK_CLASS = 'oui-view-transition-fallback';
+
+/** Minimal type for the native ViewTransition object returned by the API. */
+interface ViewTransition {
+  finished: Promise<void>;
+  ready: Promise<void>;
+  updateCallbackDone: Promise<void>;
+}
+
+function supportsViewTransitions(): boolean {
+  return (
+    typeof document !== 'undefined' &&
+    'startViewTransition' in document
+  );
+}
+
+// ---------------------------------------------------------------------------
+// useViewTransition hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Hook for integrating with the browser View Transitions API.
+ *
+ * Uses the native `document.startViewTransition()` when available and
+ * falls back to a temporary CSS class for animation when unsupported.
+ * Respects `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * function ViewSwitcher({ onViewChange }: { onViewChange: (v: string) => void }) {
+ *   const { startTransition, transitionClass, isTransitioning } = useViewTransition();
+ *
+ *   const handleChange = (view: string) => {
+ *     startTransition(() => onViewChange(view));
+ *   };
+ *
+ *   return (
+ *     <div className={transitionClass}>
+ *       ...
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useViewTransition(
+  config: ViewTransitionConfig = {},
+): ViewTransitionResult {
+  const {
+    enabled = true,
+    fallbackClass = DEFAULT_FALLBACK_CLASS,
+    duration = DEFAULT_DURATION,
+    onTransitionStart,
+    onTransitionEnd,
+  } = config;
+
+  const reducedMotion = useReducedMotion();
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const isSupported = useMemo(() => supportsViewTransitions(), []);
+
+  const startTransition = useCallback(
+    async (callback: () => void | Promise<void>): Promise<void> => {
+      // Skip transition when disabled or user prefers reduced motion
+      if (!enabled || reducedMotion) {
+        await callback();
+        return;
+      }
+
+      onTransitionStart?.();
+      setIsTransitioning(true);
+
+      try {
+        if (isSupported) {
+          // Use native View Transitions API
+          const transition = (document as Document & {
+            startViewTransition: (cb: () => void | Promise<void>) => ViewTransition;
+          }).startViewTransition(callback);
+          await transition.finished;
+        } else {
+          // Fallback: apply class, run callback, remove class after duration
+          await callback();
+          await new Promise<void>((resolve) => setTimeout(resolve, duration));
+        }
+      } finally {
+        setIsTransitioning(false);
+        onTransitionEnd?.();
+      }
+    },
+    [enabled, reducedMotion, isSupported, duration, onTransitionStart, onTransitionEnd],
+  );
+
+  const transitionClass = isTransitioning && !isSupported ? fallbackClass : '';
+
+  return {
+    isSupported,
+    isTransitioning,
+    startTransition,
+    transitionClass,
+  };
+}