@rebasepro/app 0.0.1-canary.4829d6e

package/src/hooks/useUserConfigurationPersistence.tsx

@@ -0,0 +1,11 @@
+import { UserConfigurationPersistence } from "@rebasepro/types";
+import { useContext } from "react";
+import { UserConfigurationPersistenceContext } from "../contexts/UserConfigurationPersistenceContext";
+
+/**
+ * Use this controller to access the configuration that is stored externally,
+ * and not defined in code
+ *
+ * @group Hooks and utilities
+ */
+export const useUserConfigurationPersistence = (): UserConfigurationPersistence | undefined => useContext(UserConfigurationPersistenceContext);

package/src/i18n/RebaseI18nProvider.tsx

@@ -0,0 +1,160 @@
+import React, { PropsWithChildren, useEffect, useRef } from "react";
+import i18next, { i18n } from "i18next";
+import { I18nextProvider, initReactI18next } from "react-i18next";
+import { en } from "../locales/en";
+import { es } from "../locales/es";
+import { de } from "../locales/de";
+import { fr } from "../locales/fr";
+import { it } from "../locales/it";
+import { hi } from "../locales/hi";
+import { pt } from "../locales/pt";
+import { RebaseTranslations } from "@rebasepro/types";
+
+const REBASE_NS = "rebase_core";
+
+export const REBASE_LOCALE_STORAGE_KEY = "rebase_locale";
+
+/** DeepPartial helper — allows partial overrides at any nesting level */
+type DeepPartial<T> = T extends object
+    ? { [K in keyof T]?: DeepPartial<T[K]> }
+    : T;
+
+export interface RebaseI18nProviderProps {
+    /** BCP-47 locale tag, e.g. "en", "es", "fr". Defaults to "en". */
+    locale?: string;
+    /**
+     * Override or extend any Rebase UI string, keyed by locale.
+     *
+     * @example
+     * translations={{
+     *   en: { save: "Publish" },
+     *   es: { save: "Publicar", discard: "Descartar" }
+     * }}
+     */
+    translations?: {
+        [locale: string]: DeepPartial<RebaseTranslations>;
+    };
+}
+
+/**
+ * Initialises a dedicated i18next instance for Rebase's internal UI strings.
+ *
+ * This instance is isolated from any app-level i18next configuration the
+ * consumer may have. Mount this at the top of the Rebase component tree.
+ *
+ * @internal
+ */
+export function RebaseI18nProvider({
+    locale = "en",
+    translations,
+    children
+}: PropsWithChildren<RebaseI18nProviderProps>) {
+    const i18nRef = useRef<i18n | null>(null);
+    const [ready, setReady] = React.useState(false);
+
+    if (!i18nRef.current) {
+        const instance = i18next.createInstance();
+
+        // Build the initial resources: English baseline + any consumer overrides
+        const resources = buildResources(translations);
+
+        let initialLocale = locale;
+        if (typeof window !== "undefined") {
+            const stored = localStorage.getItem(REBASE_LOCALE_STORAGE_KEY);
+            if (stored) initialLocale = stored;
+        }
+
+        instance
+            .use(initReactI18next)
+            .init({
+                lng: initialLocale,
+                fallbackLng: "en",
+                ns: [REBASE_NS],
+                defaultNS: REBASE_NS,
+                resources,
+                interpolation: {
+                    // React already escapes — don't double-escape
+                    escapeValue: false
+                }
+            }, () => {
+                setReady(true);
+            });
+
+        instance.on("languageChanged", (lng) => {
+            if (typeof window !== "undefined") {
+                localStorage.setItem(REBASE_LOCALE_STORAGE_KEY, lng);
+            }
+        });
+
+        i18nRef.current = instance;
+    }
+
+    // When `locale` prop changes, switch language on the existing instance
+    // ONLY if the user hasn't explicitly set a preference
+    useEffect(() => {
+        if (i18nRef.current && i18nRef.current.language !== locale) {
+            const hasUserPreference = typeof window !== "undefined" && Boolean(localStorage.getItem(REBASE_LOCALE_STORAGE_KEY));
+            if (!hasUserPreference) {
+                i18nRef.current.changeLanguage(locale);
+            }
+        }
+    }, [locale]);
+
+    // When consumer translations prop changes, update the resource bundles
+    useEffect(() => {
+        if (!i18nRef.current) return;
+        const resources = buildResources(translations);
+        for (const [lang, bundle] of Object.entries(resources)) {
+            i18nRef.current.addResourceBundle(
+                lang,
+                REBASE_NS,
+                bundle[REBASE_NS],
+                true, // deep merge
+                true // overwrite existing keys
+            );
+        }
+    }, [translations]);
+
+    if (!ready || !i18nRef.current) return null;
+
+    return (
+        <I18nextProvider i18n={i18nRef.current}>
+            {children}
+        </I18nextProvider>
+    );
+}
+
+/**
+ * Build an i18next resources object from the English baseline plus any
+ * consumer-provided overrides.
+ */
+function buildResources(
+    translations?: { [locale: string]: DeepPartial<RebaseTranslations> }
+): Record<string, Record<string, object>> {
+    const resources: Record<string, Record<string, object>> = {
+        en: { [REBASE_NS]: { ...en } },
+        es: { [REBASE_NS]: { ...es } },
+        de: { [REBASE_NS]: { ...de } },
+        fr: { [REBASE_NS]: { ...fr } },
+        it: { [REBASE_NS]: { ...it } },
+        hi: { [REBASE_NS]: { ...hi } },
+        pt: { [REBASE_NS]: { ...pt } }
+    };
+
+    if (!translations) return resources;
+
+    for (const [lang, overrides] of Object.entries(translations)) {
+        if (!resources[lang]) {
+            // For non-English/Spanish locales, start from English as the fallback base
+            resources[lang] = { [REBASE_NS]: { ...en } };
+        }
+        // Merge consumer overrides (shallow merge is enough since translations
+        // is a flat record — deepMerge option in addResourceBundle handles deeper)
+        resources[lang][REBASE_NS] = {
+            ...resources[lang][REBASE_NS],
+            ...overrides
+        };
+    }
+
+    return resources;
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export * from "./core";
+export * from "./hooks";
+export * from "./auth";
+export * from "./components";
+export * from "./util";
+export * from "./contexts";
+
+// @internal — framework implementation details, exported only because
+// @rebasepro/admin and @rebasepro/studio consume them. Named explicitly
+// (not `export *`) so this file is the single place that grows or shrinks
+// the internal surface — see the JSDoc on each symbol for details.
+export { CONTAINER_FULL_WIDTH, ADDITIONAL_TAB_WIDTH, FORM_CONTAINER_WIDTH } from "./internal/common";
+export { useRestoreScroll } from "./internal/useRestoreScroll";
+export { useUnsavedChangesDialog } from "./hooks/useUnsavedChangesDialog";
+export type { UnsavedChangesDialogProps } from "./components/UnsavedChangesDialog";
+export { UnsavedChangesDialog } from "./components/UnsavedChangesDialog";
+export * from "./i18n/RebaseI18nProvider";
+export * from "./locales/en";
+export * from "./locales/es";
+
+// Studio Bridge — shared context for optional CMS↔Studio integration
+export * from "./hooks/useStudioBridge";
+
+// Self-assembling bridge registration hook
+export { useBridgeRegistration } from "./hooks/useBridgeRegistration";

package/src/internal/common.tsx

@@ -0,0 +1,16 @@
+/**
+ * Layout width primitives used by the framework's own side-panel and form
+ * dialog sizing logic.
+ *
+ * @internal Not part of the stable public API — exported only because
+ * `@rebasepro/admin` and `@rebasepro/studio` need them to compute the same
+ * dialog widths as the framework. Do not depend on these for app code; they
+ * may change shape or be removed without a major version bump.
+ */
+export const CONTAINER_FULL_WIDTH = "100vw";
+
+/** @internal See {@link CONTAINER_FULL_WIDTH}. */
+export const ADDITIONAL_TAB_WIDTH = "55vw";
+
+/** @internal See {@link CONTAINER_FULL_WIDTH}. */
+export const FORM_CONTAINER_WIDTH = "768px";

package/src/internal/useRestoreScroll.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+
+const scrollsMap: Record<string, number> = {};
+
+/**
+ * Restores per-route scroll position on a scrollable container, keyed by
+ * router location. Used by the framework's own home page implementations.
+ *
+ * @internal Not part of the stable public API — exported only because
+ * `@rebasepro/admin` and `@rebasepro/studio` reuse it in their home page
+ * components. Its behavior (module-level scroll cache, router coupling) is
+ * an implementation detail and may change without a major version bump.
+ */
+export function useRestoreScroll() {
+
+    const location = useLocation();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [direction, setDirection] = React.useState<"up" | "down">("down");
+
+    // Use ref to track previous scroll for direction calculation
+    // This avoids recreating handleScroll on every scroll
+    const prevScrollRef = useRef(0);
+
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current || !location.key) return;
+        const scrollTop = containerRef.current.scrollTop;
+        scrollsMap[location.key] = scrollTop;
+        setScroll(scrollTop);
+        setDirection(scrollTop > prevScrollRef.current ? "down" : "up");
+        prevScrollRef.current = scrollTop;
+    }, [location.key]);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        container.addEventListener("scroll", handleScroll, { passive: true });
+
+        return () => {
+            if (container)
+                container.removeEventListener("scroll", handleScroll);
+        };
+    }, [handleScroll]);
+
+    // Defer scroll restoration to next tick to allow async content to render
+    // This is necessary because DefaultHomePage content loads asynchronously
+    useEffect(() => {
+        const savedScroll = scrollsMap[location.key];
+        if (!containerRef.current || !savedScroll) return;
+
+        const timeoutId = setTimeout(() => {
+            if (!containerRef.current) return;
+            containerRef.current.scrollTo({
+                top: savedScroll,
+                behavior: "auto"
+            });
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
+    }, [location.key]);
+
+    return {
+        containerRef,
+        scroll,
+        direction
+    };
+}