Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/space/core/lib/b-progress/AppProgressBar.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { BProgress } from "@bprogress/core";
+import { useNavigation } from "react-router";
+import "@bprogress/core/css";
+
+/**
+ * Progress bar configuration options
+ */
+interface ProgressConfig {
+  /** Whether to show the loading spinner */
+  showSpinner: boolean;
+  /** Minimum progress percentage (0-1) */
+  minimum: number;
+  /** Animation speed in milliseconds */
+  speed: number;
+  /** Auto-increment speed in milliseconds */
+  trickleSpeed: number;
+  /** CSS easing function */
+  easing: string;
+  /** Enable auto-increment */
+  trickle: boolean;
+  /** Delay before showing progress bar in milliseconds */
+  delay: number;
+  /** Whether to disable the progress bar */
+  isDisabled?: boolean;
+}
+
+/**
+ * Configuration for the progress bar
+ */
+const PROGRESS_CONFIG: Readonly<ProgressConfig> = {
+  showSpinner: false,
+  minimum: 0.1,
+  speed: 400,
+  trickleSpeed: 800,
+  easing: "ease",
+  trickle: true,
+  delay: 0,
+  isDisabled: import.meta.env.PROD, // Disable progress bar in production builds
+} as const;
+
+/**
+ * Navigation Progress Bar Component
+ *
+ * Automatically displays a progress bar at the top of the page during React Router navigation.
+ * Integrates with React Router's useNavigation hook to monitor route changes.
+ *
+ * Note: Progress bar is disabled in production builds.
+ *
+ * @returns null - This component doesn't render any visible elements
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <AppProgressBar />
+ *       <Outlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function AppProgressBar(): null {
+  const navigation = useNavigation();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startedRef = useRef<boolean>(false);
+
+  // Initialize BProgress once on mount
+  useEffect(() => {
+    // Skip initialization in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    // Configure BProgress with our settings
+    BProgress.configure({
+      showSpinner: PROGRESS_CONFIG.showSpinner,
+      minimum: PROGRESS_CONFIG.minimum,
+      speed: PROGRESS_CONFIG.speed,
+      trickleSpeed: PROGRESS_CONFIG.trickleSpeed,
+      easing: PROGRESS_CONFIG.easing,
+      trickle: PROGRESS_CONFIG.trickle,
+    });
+
+    // Render the progress bar element in the DOM
+    BProgress.render(true);
+
+    // Cleanup on unmount
+    return () => {
+      if (BProgress.isStarted()) {
+        BProgress.done();
+      }
+    };
+  }, []);
+
+  // Handle navigation state changes
+  useEffect(() => {
+    // Skip navigation tracking in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    if (navigation.state === "idle") {
+      // Navigation complete - clear any pending timer
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Complete progress if it was started
+      if (startedRef.current) {
+        BProgress.done();
+        startedRef.current = false;
+      }
+    } else {
+      // Navigation in progress (loading or submitting)
+      // Only start if not already started and no timer pending
+      if (timerRef.current === null && !startedRef.current) {
+        timerRef.current = setTimeout((): void => {
+          if (!BProgress.isStarted()) {
+            BProgress.start();
+            startedRef.current = true;
+          }
+          timerRef.current = null;
+        }, PROGRESS_CONFIG.delay);
+      }
+    }
+
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [navigation.state]);
+
+  return null;
+}

apps/space/core/lib/b-progress/index.tsx

@@ -0,0 +1 @@
+export * from "./AppProgressBar";

apps/space/core/lib/instance-provider.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane imports
+import { SPACE_BASE_PATH } from "@plane/constants";
+// assets
+import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
+import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
+import BlackHorizontalLogo from "@/app/assets/plane-logos/black-horizontal-with-blue-logo.png?url";
+import WhiteHorizontalLogo from "@/app/assets/plane-logos/white-horizontal-with-blue-logo.png?url";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { InstanceFailureView } from "@/components/instance/instance-failure-view";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUser } from "@/hooks/store/use-user";
+
+export const InstanceProvider = observer(({ children }: { children: React.ReactNode }) => {
+  const { fetchInstanceInfo, instance, error } = useInstance();
+  const { fetchCurrentUser } = useUser();
+  const { resolvedTheme } = useTheme();
+
+  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
+
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+    revalidateOnFocus: true,
+    revalidateIfStale: true,
+  });
+
+  if (!instance && !error)
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+
+  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
+  if (error) {
+    return (
+      <div className="relative">
+        <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
+          <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+            <div className="flex items-center gap-x-2 py-10">
+              <Link href={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
+                <Image src={logo} alt="Plane logo" />
+              </Link>
+            </div>
+          </div>
+          <div className="absolute inset-0 z-0">
+            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+          </div>
+          <div className="relative z-10 flex-grow">
+            <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+              <InstanceFailureView />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return children;
+});

apps/space/core/lib/store-provider.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { createContext } from "react";
+// plane web store
+import { RootStore } from "@/plane-web/store/root.store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext(rootStore);
+
+function initializeStore() {
+  const singletonRootStore = rootStore ?? new RootStore();
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return singletonRootStore;
+  // Create the store once in the client
+  if (!rootStore) rootStore = singletonRootStore;
+  return singletonRootStore;
+}
+
+export type StoreProviderProps = {
+  children: React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialState?: any;
+};
+
+export const StoreProvider = ({ children, initialState = undefined }: StoreProviderProps) => {
+  const store = initializeStore();
+  // If your page has Next.js data fetching methods that use a Mobx store, it will
+  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+  if (initialState) {
+    store.hydrate(initialState);
+  }
+
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+};

apps/space/core/lib/toast-provider.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useTheme } from "next-themes";
+// plane imports
+import { Toast } from "@plane/propel/toast";
+import { resolveGeneralTheme } from "@plane/utils";
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  // themes
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <Toast theme={resolveGeneralTheme(resolvedTheme)} />
+      {children}
+    </>
+  );
+};