feat: init

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

@@ -0,0 +1,73 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import { SPACE_BASE_PATH } from "@plane/constants";
+// 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";
+// assets
+import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
+import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
+import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
+
+export const InstanceProvider = observer(({ children }: { children: 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,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+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: 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,19 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useTheme } from "next-themes";
+// plane imports
+import { Toast } from "@plane/propel/toast";
+import { resolveGeneralTheme } from "@plane/utils";
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+  // themes
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <Toast theme={resolveGeneralTheme(resolvedTheme)} />
+      {children}
+    </>
+  );
+};