@rebasepro/app 0.17.3 → 0.18.0

package/src/hooks/useStorageSource.tsx

@@ -1,11 +0,0 @@
-import { StorageSource } from "@rebasepro/types";
-import { StorageSourceContext } from "../contexts/StorageSourceContext";
-import { useContext } from "react";
-
-/**
- * Use this hook to get the storage source being used
- * @group Hooks and utilities
- */
-export const useStorageSource = (): StorageSource => {
-    return useContext(StorageSourceContext);
-};

package/src/hooks/useStudioBridge.tsx

@@ -1,258 +0,0 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import type {
-    CollectionRegistryController
-} from "@rebasepro/types";
-import type {
-    SidePanelController,
-    UrlController,
-    NavigationStateController,
-    BreadcrumbEntry,
-    BreadcrumbsController
-} from "@rebasepro/cms-types";
-
-export type { BreadcrumbEntry, BreadcrumbsController };
-
-// ─── Breadcrumbs ──────────────────────────────────────────────────
-
-
-// ─── Bridge interface ───────────────────────────────────────────────
-
-/**
- * StudioBridge provides optional admin capabilities to Studio components.
- * When the admin is present, a bridge provider injects real implementations.
- * When the admin is absent, noop defaults ensure Studio works standalone.
- */
-export interface StudioBridge {
-    collectionRegistry: CollectionRegistryController;
-    sidePanelController: SidePanelController;
-    urlController: UrlController;
-    navigationState: NavigationStateController;
-    breadcrumbs: BreadcrumbsController;
-    capabilities: StudioCapabilities;
-}
-
-/**
- * What the *host* of these tools can do, as opposed to what the backend can.
- *
- * Studio is mounted in two very different places. In a project's own admin
- * panel it runs next to the collection source files and can edit them through
- * the schema-editor routes. In the hosted console it runs against somebody
- * else's deployed container: there is no source to edit — the container is
- * rebuilt from the customer's repository on every deploy — and the routes that
- * would edit it are not mounted at all, because the framework switches the
- * schema editor off under `NODE_ENV=production`.
- *
- * Tools that would otherwise offer a write into the codebase read this to
- * decide whether that write is even meaningful.
- */
-export interface StudioCapabilities {
-    /**
-     * Whether the host has the project's collection source at hand and can
-     * write to it.
-     *
-     * Defaults to `true`, which is what an admin panel running beside its own
-     * `collectionsDir` has always assumed.
-     */
-    codebase: boolean;
-}
-
-// ─── Noop defaults ──────────────────────────────────────────────────
-
-const NOOP_COLLECTION_REGISTRY: CollectionRegistryController = {
-    getCollection: () => undefined,
-    getRawCollection: () => undefined,
-    getParentReferencesFromPath: () => [],
-    getParentCollectionSlugs: () => [],
-    getParentEntityIds: () => [],
-    convertIdsToPaths: () => [],
-    initialised: false
-};
-
-const NOOP_SIDE_PANEL: SidePanelController = {
-    open: () => {},
-    replace: () => {},
-    close: () => {}
-};
-
-const NOOP_URL_CONTROLLER: UrlController = {
-    basePath: "/",
-    baseCollectionPath: "/c",
-    urlPathToDataPath: () => "",
-    homeUrl: "/",
-    isUrlCollectionPath: () => false,
-    buildUrlCollectionPath: () => "",
-    buildAppUrlPath: () => "",
-    resolveDatabasePathsFrom: () => "",
-    navigate: () => {}
-};
-
-const NOOP_NAVIGATION_STATE: NavigationStateController = {
-    loading: false,
-    refreshNavigation: () => {}
-};
-
-const NOOP_BREADCRUMBS: BreadcrumbsController = {
-    breadcrumbs: [],
-    set: () => {}
-};
-
-const DEFAULT_CAPABILITIES: StudioCapabilities = {
-    codebase: true
-};
-
-const NOOP_BRIDGE: StudioBridge = {
-    collectionRegistry: NOOP_COLLECTION_REGISTRY,
-    sidePanelController: NOOP_SIDE_PANEL,
-    urlController: NOOP_URL_CONTROLLER,
-    navigationState: NOOP_NAVIGATION_STATE,
-    breadcrumbs: NOOP_BREADCRUMBS,
-    capabilities: DEFAULT_CAPABILITIES
-};
-
-// ─── Context & Provider ─────────────────────────────────────────────
-
-export const StudioBridgeContext = createContext<StudioBridge>(NOOP_BRIDGE);
-
-/**
- * Provider that injects admin capabilities into Studio.
- * Accepts partial overrides — any field not provided falls back to noop.
- *
- * Usage (in app wiring, when the admin is present):
- * ```tsx
- * <StudioBridgeProvider value={{
- *     collectionRegistry: useCollectionRegistryController(),
- *     sidePanelController: useSidePanel(),
- *     urlController: useUrlController(),
- *     navigationState: useNavigationStateController(),
- *     breadcrumbs: useBreadcrumbsController(),
- * }}>
- *     <RebaseStudio ... />
- * </StudioBridgeProvider>
- * ```
- */
-export function StudioBridgeProvider({
-    value,
-    children
-}: {
-    value: Partial<StudioBridge>;
-    children: React.ReactNode;
-}) {
-    // Keyed on the slices rather than on `value`: callers write the object
-    // inline (`value={{ collectionRegistry }}`), so a `[value]` dependency
-    // rebuilt the context on every render of the host and re-rendered every
-    // Studio consumer with it.
-    const merged = React.useMemo(
-        () => ({ ...NOOP_BRIDGE,
-...value }),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-            value.collectionRegistry,
-            value.sidePanelController,
-            value.urlController,
-            value.navigationState,
-            value.breadcrumbs,
-            value.capabilities
-        ]
-    );
-    return (
-        <StudioBridgeContext.Provider value={merged}>
-            {children}
-        </StudioBridgeContext.Provider>
-    );
-}
-
-// ─── Convenience hooks ──────────────────────────────────────────────
-
-/** Collection registry — returns noop if the admin is not present. */
-export function useStudioCollectionRegistry(): CollectionRegistryController {
-    return useContext(StudioBridgeContext).collectionRegistry;
-}
-
-/** Side panel controller — returns noop if the admin is not present. */
-export function useStudioSidePanelController(): SidePanelController {
-    return useContext(StudioBridgeContext).sidePanelController;
-}
-
-/** URL controller — returns noop if the admin is not present. */
-export function useStudioUrlController(): UrlController {
-    return useContext(StudioBridgeContext).urlController;
-}
-
-/** Navigation state — returns noop if the admin is not present. */
-export function useStudioNavigationState(): NavigationStateController {
-    return useContext(StudioBridgeContext).navigationState;
-}
-
-/** Breadcrumbs controller — returns noop if the admin is not present. */
-export function useStudioBreadcrumbs(): BreadcrumbsController {
-    return useContext(StudioBridgeContext).breadcrumbs;
-}
-
-/** What the host can do — see {@link StudioCapabilities}. */
-export function useStudioCapabilities(): StudioCapabilities {
-    return useContext(StudioBridgeContext).capabilities;
-}
-
-// ─── Self-Assembling Bridge Registry ────────────────────────────────
-
-/**
- * Registry that controllers use to self-register their implementations
- * into the Studio bridge. Each controller calls `register(key, value)`
- * on mount and `unregister(key)` on unmount.
- */
-export interface StudioBridgeRegistry {
-    register: <K extends keyof StudioBridge>(key: K, value: StudioBridge[K]) => void;
-    unregister: (key: keyof StudioBridge) => void;
-}
-
-export const StudioBridgeRegistryContext = createContext<StudioBridgeRegistry | null>(null);
-
-/**
- * Provider that creates a self-assembling bridge.
- *
- * Mount this above the controller providers. Each controller calls
- * `useBridgeRegistration(key, value)` to inject its implementation.
- * The bridge context value is automatically kept in sync.
- *
- * ```tsx
- * <StudioBridgeRegistryProvider>
- *     <CollectionRegistryProvider>   // auto-registers
- *     <SidePanelProvider>           // auto-registers
- *     <UrlProvider>                  // auto-registers
- *         <RebaseStudio />           // consumes bridge
- *     </UrlProvider>
- *     </SidePanelProvider>
- *     </CollectionRegistryProvider>
- * </StudioBridgeRegistryProvider>
- * ```
- */
-export function StudioBridgeRegistryProvider({ children }: { children: React.ReactNode }) {
-    const [version, setVersion] = useState(0);
-    const slicesRef = useRef<Partial<StudioBridge>>({});
-
-    const register = useCallback(<K extends keyof StudioBridge>(key: K, value: StudioBridge[K]) => {
-        slicesRef.current[key] = value;
-        setVersion(v => v + 1);
-    }, []);
-
-    const unregister = useCallback((key: keyof StudioBridge) => {
-        delete slicesRef.current[key];
-        setVersion(v => v + 1);
-    }, []);
-
-    const registry = useMemo<StudioBridgeRegistry>(() => ({ register,
-unregister }), [register, unregister]);
-
-    const bridgeValue = useMemo<StudioBridge>(() => ({
-        ...NOOP_BRIDGE,
-        ...slicesRef.current
-    }), [version]);
-
-    return (
-        <StudioBridgeRegistryContext.Provider value={registry}>
-            <StudioBridgeContext.Provider value={bridgeValue}>
-                {children}
-            </StudioBridgeContext.Provider>
-        </StudioBridgeRegistryContext.Provider>
-    );
-}

package/src/hooks/useTranslation.ts

@@ -1,38 +0,0 @@
-import { useTranslation as useI18nTranslation } from "react-i18next";
-import { useCallback, useMemo } from "react";
-
-const REBASE_NS = "rebase_core";
-
-/**
- * Internal hook for translating Rebase UI strings.
- *
- * Uses the `rebase_core` i18next namespace that is initialised by
- * `RebaseI18nProvider`. Do NOT use `react-i18next` directly in internal
- * components — always go through this hook so the namespace is consistent.
- *
- * @example
- * const { t } = useTranslation();
- * <Button>{t("save")}</Button>
- *
- * @internal
- */
-export function useTranslation() {
-    const { t, i18n } = useI18nTranslation(REBASE_NS);
-
-    /**
-     * Typed translation function scoped to RebaseTranslations keys.
-     * Also supports i18next interpolation variables, e.g.
-     *   t("add_to_field", { fieldName: "Tags" })
-     *   t("error_deleting", { message: err.message })
-     *   t("sort_key_position", { position: 2 })
-     *
-     * Numbers are accepted as well as strings: i18next interpolates them
-     * either way, and a signature that took only strings pushed a `String()`
-     * onto every call site with a count in it — `{{count}}`, `{{position}}`.
-     */
-    const typedT = useCallback((key: string, vars?: Record<string, string | number>): string =>
-        t(key, vars) as string, [t]);
-
-    return useMemo(() => ({ t: typedT,
-i18n }), [typedT, i18n]);
-}

package/src/hooks/useUnsavedChangesDialog.tsx

@@ -1,67 +0,0 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-import { UnsavedChangesDialogProps } from "../components/UnsavedChangesDialog";
-import { useNavigationBlocker } from "./useNavigationBlocker";
-
-/**
- * A single, unified hook to prevent navigation when there are unsaved changes.
- *
- * It automatically handles:
- * 1. Internal React Router navigation using `useBlocker`.
- * 2. External browser navigation (page refresh, tab close) using `beforeunload`.
- */
-export function useUnsavedChangesDialog(
-    when: boolean,
-    onOk: () => void
-): {
-    dialogProps: UnsavedChangesDialogProps;
-    triggerDialog: () => void;
-} {
-    const [manualDialogOpen, setManualDialogOpen] = useState(false);
-
-    const blocker = useNavigationBlocker(
-        useCallback(
-            ({ currentLocation, nextLocation }) =>
-                when && currentLocation.pathname !== nextLocation.pathname,
-            [when]
-        )
-    );
-
-    useEffect(() => {
-        if (!when) return;
-
-        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-            e.preventDefault();
-            e.returnValue = "";
-        };
-
-        window.addEventListener("beforeunload", handleBeforeUnload);
-        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-    }, [when]);
-
-    const handleOk = useCallback(() => {
-        onOk();
-        if (blocker.state === "blocked") {
-            blocker.proceed();
-        }
-        setManualDialogOpen(false);
-    }, [blocker, onOk]);
-
-    const handleCancel = useCallback(() => {
-        if (blocker.state === "blocked") {
-            blocker.reset();
-        }
-        setManualDialogOpen(false);
-    }, [blocker]);
-
-    const triggerDialog = useCallback(() => setManualDialogOpen(true), []);
-
-    return useMemo(() => ({
-        dialogProps: {
-            open: manualDialogOpen || blocker.state === "blocked",
-            handleOk,
-            handleCancel,
-            body: "There are unsaved changes in this collection"
-        },
-        triggerDialog
-    }), [manualDialogOpen, blocker.state, handleOk, handleCancel, triggerDialog]);
-}

package/src/hooks/useUserConfigurationPersistence.tsx

@@ -1,11 +0,0 @@
-import { UserConfigurationPersistence } from "@rebasepro/cms-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

@@ -1,159 +0,0 @@
-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/cms-types";
-import { readStoredString, writeStoredString } from "../util/local_storage";
-
-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;
-        const stored = readStoredString(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") {
-                writeStoredString(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 = Boolean(readStoredString(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

@@ -1,32 +0,0 @@
-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/cms 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, FORM_CONTAINER_WIDTH, SIDE_PANEL_DEFAULT_WIDTH } from "./internal/common";
-export { useRestoreScroll } from "./internal/useRestoreScroll";
-export { useUnsavedChangesDialog } from "./hooks/useUnsavedChangesDialog";
-export { NavigationBlockerProvider, useNavigationBlocker } from "./hooks/useNavigationBlocker";
-export type { UnsavedChangesDialogProps } from "./components/UnsavedChangesDialog";
-// The element type of the `storageSources` prop on `<Rebase>`. Anyone registering a
-// direct-transport backend writes this shape by hand, and the docs have always told
-// them to import it from here — it was simply never exported. Type-only, so it adds
-// nothing to the bundle.
-export type { RebaseStorageSource } from "./core/RebaseProps";
-export { UnsavedChangesDialog } from "./components/UnsavedChangesDialog";
-export * from "./i18n/RebaseI18nProvider";
-export * from "./locales/en";
-export * from "./locales/es";
-
-// Studio Bridge — shared context for optional admin↔Studio integration
-export * from "./hooks/useStudioBridge";
-
-// Self-assembling bridge registration hook
-export { useBridgeRegistration } from "./hooks/useBridgeRegistration";
-export * from "./collections";

package/src/internal/common.tsx

@@ -1,28 +0,0 @@
-/**
- * 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/cms` 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 FORM_CONTAINER_WIDTH = "768px";
-
-/**
- * How wide the side panel opens when neither the caller nor the collection
- * says otherwise.
- *
- * Sized from what it has to hold rather than from a round number: the form's
- * content column plus its metadata rail plus gutters, which is also the width
- * at which the form stops being a single stack and picks up the same
- * two-column layout it has in full screen. Capped against the viewport so a
- * panel never becomes the whole window on a laptop — at that point you want
- * full screen, and there is a button for it.
- *
- * @internal See {@link CONTAINER_FULL_WIDTH}.
- */
-export const SIDE_PANEL_DEFAULT_WIDTH = "min(1160px, 88vw)";

package/src/internal/useRestoreScroll.tsx

@@ -1,69 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import { useLocation } from "react-router";
-
-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/cms` 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
-    };
-}