@rebasepro/app 0.0.1-canary.4829d6e

package/src/components/LoginView/index.ts

@@ -0,0 +1,2 @@
+export { LoginView } from "./LoginView";
+export type { LoginViewProps } from "./LoginView";

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Button, Typography } from "@rebasepro/ui";
+import { useTranslation } from "../hooks";
+
+export function NotFoundPage() {
+    const { t } = useTranslation();
+
+    return (
+        <div className="flex w-full h-full">
+            <div className="m-auto flex items-center flex-col"
+            >
+                <Typography variant={"h4"} align={"center"}
+                    gutterBottom={true}>
+                    {t("page_not_found")}
+                </Typography>
+                <Typography align={"center"} gutterBottom={true}>
+                    {t("page_not_found_body")}
+                </Typography>
+                <Button
+                    variant={"text"}
+                    component={Link}
+                    to={"/"}>{t("back_to_home")}</Button>
+            </div>
+        </div>
+    );
+}

package/src/components/RebaseAuth.tsx

@@ -0,0 +1,27 @@
+import React, { useLayoutEffect, useRef } from "react";
+import { useRebaseRegistryDispatch } from "../hooks";
+import type { RebaseAuthConfig } from "@rebasepro/types";
+
+/**
+ * Declarative component to configure authentication in Rebase.
+ * Renders nothing — purely registers config into the RebaseRegistry.
+ *
+ * This is a framework-level component that lives in core since
+ * authentication is cross-cutting (CMS, Studio, any app area).
+ * @group Core
+ */
+export function RebaseAuth({ loginView }: RebaseAuthConfig) {
+    const dispatch = useRebaseRegistryDispatch();
+    const registeredRef = useRef(false);
+
+    useLayoutEffect(() => {
+        dispatch.registerAuth({ loginView });
+        registeredRef.current = true;
+        return () => {
+            registeredRef.current = false;
+            dispatch.unregisterAuth();
+        };
+    }, [dispatch, loginView]);
+
+    return null;
+}

package/src/components/RebaseLogo.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export function RebaseLogo({
+    width,
+    height,
+    className,
+    style
+}: {
+    width?: string,
+    height?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    return (
+        <svg
+            width={width ?? "100%"} height={height ?? "100%"}
+            version="1.1"
+            style={style}
+            className={className}
+            viewBox="0 0 583 583" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="291.5" cy="291.5" r="291.5" fill="#0070F4"/>
+            <ellipse cx="292" cy="291.5" rx="173" ry="173.5" fill="#FF3773"/>
+            <path
+                d="M465 291.5C465 268.847 460.525 246.416 451.831 225.487C443.137 204.558 430.394 185.542 414.329 169.524C398.265 153.506 379.194 140.8 358.204 132.131C337.215 123.462 314.719 119 292 119C269.281 119 246.785 123.462 225.796 132.131C204.806 140.8 185.735 153.506 169.671 169.524C153.606 185.542 140.863 204.558 132.169 225.487C123.475 246.416 119 268.847 119 291.5L292 291.5H465Z"
+                fill="#FFA400"/>
+        </svg>
+    );
+
+}

package/src/components/SchemaDriftBanner.tsx

@@ -0,0 +1,102 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Alert, Typography } from "@rebasepro/ui";
+
+// ── Schema Drift Context ────────────────────────────────────────────────
+
+interface SchemaDriftContextValue {
+    /** Report a schema drift error (call from any data-loading hook). */
+    reportSchemaDrift: (message: string) => void;
+    /** The most recent schema drift message, or null. */
+    schemaDriftMessage: string | null;
+    /** Dismiss the banner for this session. */
+    dismiss: () => void;
+}
+
+const SchemaDriftContext = createContext<SchemaDriftContextValue>({
+    reportSchemaDrift: () => {},
+    schemaDriftMessage: null,
+    dismiss: () => {}
+});
+
+export function useSchemaDriftContext(): SchemaDriftContextValue {
+    return useContext(SchemaDriftContext);
+}
+
+/**
+ * Detects schema drift from an error object.
+ * Checks both the error code (from `RebaseApiError`) and the message
+ * for schema drift indicators.
+ */
+export function isSchemaDriftError(error: unknown): boolean {
+    if (!error || typeof error !== "object") return false;
+    // RebaseApiError from the SDK has a `code` property
+    if ("code" in error && (error as { code?: string }).code === "SCHEMA_DRIFT") {
+        return true;
+    }
+    // Fallback: check the message for the telltale phrase
+    if (error instanceof Error && error.message.includes("Schema drift:")) {
+        return true;
+    }
+    return false;
+}
+
+// ── Provider ─────────────────────────────────────────────────────────────
+
+export function SchemaDriftProvider({ children }: { children: React.ReactNode }) {
+    const [schemaDriftMessage, setSchemaDriftMessage] = useState<string | null>(null);
+    const [dismissed, setDismissed] = useState(false);
+
+    const reportSchemaDrift = useCallback((message: string) => {
+        setSchemaDriftMessage(prev => prev ?? message);
+    }, []);
+
+    const dismiss = useCallback(() => {
+        setDismissed(true);
+    }, []);
+
+    const value = useMemo<SchemaDriftContextValue>(() => ({
+        reportSchemaDrift,
+        schemaDriftMessage: dismissed ? null : schemaDriftMessage,
+        dismiss
+    }), [reportSchemaDrift, schemaDriftMessage, dismissed, dismiss]);
+
+    return (
+        <SchemaDriftContext.Provider value={value}>
+            {children}
+        </SchemaDriftContext.Provider>
+    );
+}
+
+// ── Banner Component ─────────────────────────────────────────────────────
+
+export interface SchemaDriftBannerProps {
+    className?: string;
+}
+
+/**
+ * Persistent banner shown when a schema drift error is detected.
+ */
+export function SchemaDriftBanner({ className }: SchemaDriftBannerProps) {
+    const { schemaDriftMessage, dismiss } = useSchemaDriftContext();
+
+    if (!schemaDriftMessage) return null;
+
+    return (
+        <Alert
+            color="warning"
+            size="small"
+            onDismiss={dismiss}
+            className={className}
+        >
+            <div className="flex flex-col gap-1">
+                <Typography variant="label" className="text-amber-800 dark:text-amber-200">
+                    Schema drift detected
+                </Typography>
+                <Typography variant="body2" className="text-amber-700 dark:text-amber-300">
+                    {schemaDriftMessage}{" "}
+                    Run <code className="bg-amber-200 dark:bg-amber-800 px-1 rounded text-xs">pnpm db:push</code> in your backend terminal to sync.
+                </Typography>
+            </div>
+        </Alert>
+    );
+}

package/src/components/UnsavedChangesDialog.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
+import { useTranslation } from "../hooks";
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+    open,
+    handleOk,
+    handleCancel,
+    body,
+    title
+}: UnsavedChangesDialogProps) {
+
+    const { t } = useTranslation();
+
+    return (
+        <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
+            open={open}
+        >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
+            <DialogContent>
+
+                <Typography>
+                    {body ?? t("unsaved_changes")}
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text"
+                    onClick={handleCancel} autoFocus> {t("cancel")} </Button>
+                <Button
+                    onClick={handleOk}> {t("ok")} </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/UserDisplay.tsx

@@ -0,0 +1,54 @@
+import { CircleUserIcon, cls, defaultBorderMixin } from "@rebasepro/ui";
+import { User } from "@rebasepro/types";
+
+/**
+ * Component to render a single user with name and email
+ */
+export function UserDisplay({
+    user
+}: { user: User | null }) {
+    if (!user) {
+        return <span className={cls("italic", "text-text-disabled dark:text-text-disabled-dark", "text-sm")}>Not set</span>;
+    }
+
+    const avatarSizeClass = "w-6 h-6";
+
+    return (
+        <div className={cls(
+            "inline-flex items-center gap-4 px-2 py-1 rounded-xl text-left max-w-full overflow-hidden",
+            "bg-surface-accent-100 dark:bg-surface-accent-800",
+            "border",
+            defaultBorderMixin
+        )}>
+            {user.photoURL ? (
+                <img
+                    src={user.photoURL}
+                    alt={user.displayName || user.email || "User"}
+                    className={cls(
+                        "rounded-full object-cover",
+                        avatarSizeClass
+                    )}
+                />
+            ) : (
+                <CircleUserIcon
+                    className={cls(
+                        "text-text-secondary dark:text-text-secondary-dark",
+                        avatarSizeClass
+                    )}
+                />
+            )}
+            <div className="flex flex-col min-w-0">
+                <span className={cls("font-regular truncate", "text-sm")}>
+                    {user.displayName || user.email || "-"}
+                </span>
+                {user.displayName && user.email && (
+                    <span className={cls("text-text-secondary dark:text-text-secondary-dark truncate",
+                        "text-xs"
+                    )}>
+                        {user.email}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}