@rebasepro/app 0.14.1-canary.g7e666eb → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.14.1-canary.g7e666eb",
+  "version": "0.14.1",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,12 +52,12 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.11",
-    "@rebasepro/admin-types": "0.14.1-canary.g7e666eb",
-    "@rebasepro/forms": "0.14.1-canary.g7e666eb",
-    "@rebasepro/common": "0.14.1-canary.g7e666eb",
-    "@rebasepro/ui": "0.14.1-canary.g7e666eb",
-    "@rebasepro/types": "0.14.1-canary.g7e666eb",
-    "@rebasepro/utils": "0.14.1-canary.g7e666eb"
+    "@rebasepro/admin-types": "0.14.1",
+    "@rebasepro/types": "0.14.1",
+    "@rebasepro/forms": "0.14.1",
+    "@rebasepro/common": "0.14.1",
+    "@rebasepro/utils": "0.14.1",
+    "@rebasepro/ui": "0.14.1"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

package/src/components/LoginView/LoginView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useId, useRef, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
 
 /** Google Identity Services SDK — injected by the GIS <script> tag. */
 declare global {
@@ -145,11 +145,18 @@ export interface LoginViewProps {
     defaultPassword?: string;
 
     /**
-     * When set, the email/password forms render a "Join the newsletter"
-     * opt-in checkbox. Called with the address that just authenticated —
-     * sign-in or registration — if the box was ticked. Wire it to whatever
-     * stores the subscription; failures are the callback's problem, the
-     * login flow never waits on it.
+     * When set, a "Join the newsletter" opt-in checkbox is offered. Called with
+     * the address that just authenticated — by any method — if the box was
+     * ticked. Wire it to whatever stores the subscription; failures are the
+     * callback's problem, the login flow never waits on it.
+     *
+     * The checkbox sits on the **provider screen**, beside the buttons that
+     * choose how to sign in, rather than on the credentials form. It is a
+     * decision about the visitor, not about the password: asking on the
+     * credentials form put it in front of only the people who got that far by
+     * typing an address, so anyone signing in with Google was never offered it
+     * at all. Bootstrap mode is the exception — there is no provider screen
+     * there, so the form keeps it.
      */
     onNewsletterOptIn?: (email: string) => void;
 }
@@ -225,10 +232,32 @@ export function LoginView({
     const [mode, setMode] = useState<AuthMode>("buttons");
     const [fadeIn, setFadeIn] = useState(false);
     const [viewVisible, setViewVisible] = useState(true);
-    // Lives here, not in LoginForm: the form unmounts on every login↔register
-    // switch, and losing the tick on a mode change would silently drop opt-ins.
+    // Lives here, not in LoginForm: the box is ticked on the provider screen
+    // and read after a sign-in that happens one or two screens later, so it has
+    // to outlive both. The form also unmounts on every login↔register switch.
     const [newsletterOptIn, setNewsletterOptIn] = useState(false);
 
+    // The controller as of the latest render. A provider callback resolves long
+    // after the click that started it, and the `authController` captured in that
+    // closure is the one from the render that mounted the button — which, for a
+    // controller replaced on each render, has no `user` on it yet.
+    const authControllerRef = useRef(authController);
+    authControllerRef.current = authController;
+
+    /**
+     * Subscribe the address that just authenticated, if the visitor asked for
+     * it. Every sign-in path calls this, which is the point: the checkbox sits
+     * beside the provider buttons, so it has to mean the same thing whichever
+     * one is pressed.
+     *
+     * Only ever from a resolution path — a ticked box on a *failed* attempt
+     * must not subscribe an address nobody proved they control.
+     */
+    const subscribeIfOptedIn = useCallback((email?: string | null) => {
+        if (!newsletterOptIn || !onNewsletterOptIn || !email) return;
+        onNewsletterOptIn(email);
+    }, [newsletterOptIn, onNewsletterOptIn]);
+
     const switchMode = (newMode: AuthMode) => {
         setViewVisible(false);
         setTimeout(() => {
@@ -388,9 +417,10 @@ export function LoginView({
                             bootstrapMode={true}
                             defaultEmail={defaultEmail}
                             defaultPassword={defaultPassword}
-                            onNewsletterOptIn={onNewsletterOptIn}
+                            onSignedIn={subscribeIfOptedIn}
                             newsletterOptIn={newsletterOptIn}
                             setNewsletterOptIn={setNewsletterOptIn}
+                            showNewsletterOptIn={Boolean(onNewsletterOptIn)}
                         />
                     )}
 
@@ -419,6 +449,42 @@ export function LoginView({
                                             {topComponent}
                                         </div>
                                     )}
+                                    {/* Above the buttons, not below them: it is a
+                                        condition on the sign-in you are about to
+                                        make, and it reads as one more line of the
+                                        consent block a host puts in
+                                        `topComponent` — the demo's privacy tick
+                                        sits directly above it.
+
+                                        Which is why it pulls back most of the
+                                        column's `gap-3`: at the full gap the two
+                                        ticks sat 24px apart and read as two
+                                        unrelated questions rather than one
+                                        consent block. The offset is against this
+                                        column's own gap, not against whatever
+                                        margins the host's `topComponent` happens
+                                        to carry, so it lands the same way under
+                                        any of them — but only when there is
+                                        something above to hug. With no header
+                                        and no `topComponent` this row is the
+                                        column's first child, and pulling back a
+                                        gap that is not there would crowd it into
+                                        the logo. */}
+                                    {onNewsletterOptIn && (
+                                        <label className={cls(
+                                            "flex items-center gap-2 cursor-pointer",
+                                            (topComponent || title || subtitle) && "-mt-3"
+                                        )}>
+                                            <Checkbox
+                                                checked={newsletterOptIn}
+                                                onCheckedChange={(checked) => setNewsletterOptIn(checked === true)}
+                                                size="small"
+                                            />
+                                            <Typography variant="caption" color="secondary" className="select-none">
+                                                {t("join_newsletter")}
+                                            </Typography>
+                                        </label>
+                                    )}
                                     <LoginButton
                                         disabled={disabled}
                                         text={"Sign in with email"}
@@ -430,6 +496,7 @@ export function LoginView({
                                             disabled={disabled}
                                             googleClientId={googleClientId}
                                             authController={authController}
+                                            onSignedIn={() => subscribeIfOptedIn(authControllerRef.current.user?.email)}
                                         />
                                     )}
                                     {hasGitHubLogin && githubClientId && (
@@ -473,9 +540,7 @@ export function LoginView({
                                     switchToRegister={showRegistration ? () => switchMode("register") : undefined}
                                     defaultEmail={defaultEmail}
                                     defaultPassword={defaultPassword}
-                                    onNewsletterOptIn={onNewsletterOptIn}
-                                    newsletterOptIn={newsletterOptIn}
-                                    setNewsletterOptIn={setNewsletterOptIn}
+                                    onSignedIn={subscribeIfOptedIn}
                                 />
                             )}
 
@@ -491,9 +556,7 @@ export function LoginView({
                                     switchToLogin={() => switchMode("login")}
                                     defaultEmail={defaultEmail}
                                     defaultPassword={defaultPassword}
-                                    onNewsletterOptIn={onNewsletterOptIn}
-                                    newsletterOptIn={newsletterOptIn}
-                                    setNewsletterOptIn={setNewsletterOptIn}
+                                    onSignedIn={subscribeIfOptedIn}
                                 />
                             )}
 
@@ -557,13 +620,21 @@ const GoogleIcon = () => (
 function GoogleLoginButton({
     disabled,
     googleClientId,
-    authController
+    authController,
+    onSignedIn
 }: {
     disabled?: boolean,
     googleClientId: string,
-    authController: AuthControllerExtended
+    authController: AuthControllerExtended,
+    /** Called once the controller has accepted the provider's code. */
+    onSignedIn?: () => void
 }) {
     const codeClientRef = useRef<{ requestCode(): void } | null>(null);
+    // The code client is built once and its callback closes over this render's
+    // props forever. A ref keeps the callback reaching the *current* handler
+    // rather than the one that existed when Google's script happened to load.
+    const onSignedInRef = useRef(onSignedIn);
+    onSignedInRef.current = onSignedIn;
 
     useEffect(() => {
         if (!authController.googleLogin) return;
@@ -587,6 +658,10 @@ function GoogleLoginButton({
                         code: response.code,
                         redirectUri: "postmessage"
                     });
+                    // After the await, and only on the resolution path: a
+                    // newsletter tick must not subscribe an address whose
+                    // sign-in the controller rejected.
+                    onSignedInRef.current?.();
                 } catch (err: unknown) {
                     console.error("Google login error:", err);
                 }
@@ -692,9 +767,10 @@ function LoginForm({
     switchToLogin,
     defaultEmail,
     defaultPassword,
-    onNewsletterOptIn,
+    onSignedIn,
     newsletterOptIn = false,
-    setNewsletterOptIn
+    setNewsletterOptIn,
+    showNewsletterOptIn = false
 }: {
     onClose: () => void,
     onForgotPassword?: () => void,
@@ -707,9 +783,15 @@ function LoginForm({
     switchToLogin?: () => void,
     defaultEmail?: string,
     defaultPassword?: string,
-    onNewsletterOptIn?: (email: string) => void,
+    /** The address the controller just accepted, reported after every success. */
+    onSignedIn?: (email: string) => void,
     newsletterOptIn?: boolean,
-    setNewsletterOptIn?: (checked: boolean) => void
+    setNewsletterOptIn?: (checked: boolean) => void,
+    /**
+     * Render the newsletter opt-in here. Only bootstrap mode does: everywhere
+     * else it lives on the provider screen, which bootstrap mode never shows.
+     */
+    showNewsletterOptIn?: boolean
 }) {
     const passwordRef = useRef<HTMLInputElement | null>(null);
     const { t } = useTranslation();
@@ -749,16 +831,14 @@ function LoginForm({
     // Fires only on the resolution path, i.e. after the controller accepted
     // the credentials — a ticked box on a failed attempt must not subscribe
     // an address its owner never proved they control.
-    function subscribeIfOptedIn(email: string) {
-        if (newsletterOptIn && onNewsletterOptIn) {
-            onNewsletterOptIn(email);
-        }
+    function reportSignedIn(email: string) {
+        onSignedIn?.(email);
     }
 
     function handleEnterPassword() {
         if (email && password && authController.emailPasswordLogin) {
             void Promise.resolve(authController.emailPasswordLogin(email, password))
-                .then(() => subscribeIfOptedIn(email))
+                .then(() => reportSignedIn(email))
                 .catch(() => undefined);
         }
     }
@@ -766,7 +846,7 @@ function LoginForm({
     function handleRegistration() {
         if (email && password && authController.register) {
             void Promise.resolve(authController.register(email, password, displayName))
-                .then(() => subscribeIfOptedIn(email))
+                .then(() => reportSignedIn(email))
                 .catch(() => undefined);
         }
     }
@@ -891,7 +971,10 @@ function LoginForm({
                 </div>
             )}
 
-            {onNewsletterOptIn && (
+            {/* Bootstrap mode only — see `showNewsletterOptIn`. Every other
+                route to this form came through the provider screen, which is
+                where the box now is. */}
+            {showNewsletterOptIn && (
                 <label className="flex items-center gap-2 cursor-pointer mt-1 mb-1">
                     <Checkbox
                         checked={newsletterOptIn}

package/src/hooks/useTranslation.ts

@@ -24,8 +24,13 @@ export function useTranslation() {
      * 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>): string =>
+    const typedT = useCallback((key: string, vars?: Record<string, string | number>): string =>
         t(key, vars) as string, [t]);
 
     return useMemo(() => ({ t: typedT,

package/src/locales/de.ts

@@ -43,6 +43,16 @@ export const de: RebaseTranslations = {
     clear_sort: "Sortierung löschen",
     sort: "Sortieren",
     sort_by: "Sortieren nach",
+    sort_then_by: "Dann nach",
+    sort_ascending: "Aufsteigend sortieren",
+    sort_descending: "Absteigend sortieren",
+    sort_remove: "Sortierung entfernen",
+    sort_move_up: "Diesen Schlüssel wichtiger machen",
+    sort_move_down: "Diesen Schlüssel weniger wichtig machen",
+    sort_remove_key: "Diesen Sortierschlüssel entfernen",
+    sort_key_position: "Sortierschlüssel {{position}}",
+    sort_shift_click_hint: "Umschalt+Klick, um eine Spalte unter der aktuellen Sortierung hinzuzufügen",
+    save_entity_before_subcollections: "Du musst den Eintrag speichern, bevor du weitere Sammlungen hinzufügst",
     clear_all: "Alle löschen",
     no_items: "Keine Elemente",
     no_entries_found: "Keine Einträge gefunden",

package/src/locales/en.ts

@@ -53,6 +53,16 @@ export const en: RebaseTranslations = {
     clear_sort: "Clear sort",
     sort: "Sort",
     sort_by: "Sort by",
+    sort_then_by: "Then by",
+    sort_ascending: "Sort ascending",
+    sort_descending: "Sort descending",
+    sort_remove: "Remove sort",
+    sort_move_up: "Make this key more important",
+    sort_move_down: "Make this key less important",
+    sort_remove_key: "Remove this sort key",
+    sort_key_position: "Sort key {{position}}",
+    sort_shift_click_hint: "Shift-click to add a column under the current sort",
+    save_entity_before_subcollections: "You need to save your entity before adding additional collections",
     clear_all: "Clear all",
     no_items: "No items",
     no_entries_found: "No entries found",

package/src/locales/es.ts

@@ -51,6 +51,16 @@ export const es: RebaseTranslations = {
     clear_sort: "Borrar orden",
     sort: "Ordenar",
     sort_by: "Ordenar por",
+    sort_then_by: "Luego por",
+    sort_ascending: "Ordenar ascendente",
+    sort_descending: "Ordenar descendente",
+    sort_remove: "Quitar orden",
+    sort_move_up: "Dar más importancia a esta clave",
+    sort_move_down: "Dar menos importancia a esta clave",
+    sort_remove_key: "Quitar esta clave de orden",
+    sort_key_position: "Clave de orden {{position}}",
+    sort_shift_click_hint: "Mayús+clic para añadir una columna bajo el orden actual",
+    save_entity_before_subcollections: "Debes guardar la entidad antes de añadir colecciones adicionales",
     clear_all: "Borrar todo",
     no_items: "Sin elementos",
     no_entries_found: "No se encontraron entradas",

package/src/locales/fr.ts

@@ -43,6 +43,16 @@ export const fr: RebaseTranslations = {
     clear_sort: "Effacer le tri",
     sort: "Trier",
     sort_by: "Trier par",
+    sort_then_by: "Puis par",
+    sort_ascending: "Trier par ordre croissant",
+    sort_descending: "Trier par ordre décroissant",
+    sort_remove: "Supprimer le tri",
+    sort_move_up: "Rendre cette clé plus importante",
+    sort_move_down: "Rendre cette clé moins importante",
+    sort_remove_key: "Supprimer cette clé de tri",
+    sort_key_position: "Clé de tri {{position}}",
+    sort_shift_click_hint: "Maj+clic pour ajouter une colonne sous le tri actuel",
+    save_entity_before_subcollections: "Vous devez enregistrer l'entité avant d'ajouter des collections supplémentaires",
     clear_all: "Tout effacer",
     no_items: "Aucun élément",
     no_entries_found: "Aucune entrée trouvée",

package/src/locales/hi.ts

@@ -43,6 +43,16 @@ export const hi: RebaseTranslations = {
     clear_sort: "सॉर्ट साफ़ करें",
     sort: "क्रमबद्ध करें",
     sort_by: "इसके अनुसार क्रमबद्ध करें",
+    sort_then_by: "फिर इसके अनुसार",
+    sort_ascending: "आरोही क्रम में लगाएँ",
+    sort_descending: "अवरोही क्रम में लगाएँ",
+    sort_remove: "क्रम हटाएँ",
+    sort_move_up: "इस कुंजी को अधिक महत्व दें",
+    sort_move_down: "इस कुंजी को कम महत्व दें",
+    sort_remove_key: "यह क्रम कुंजी हटाएँ",
+    sort_key_position: "क्रम कुंजी {{position}}",
+    sort_shift_click_hint: "वर्तमान क्रम के नीचे कॉलम जोड़ने के लिए Shift+क्लिक करें",
+    save_entity_before_subcollections: "अतिरिक्त संग्रह जोड़ने से पहले आपको एंटिटी सहेजनी होगी",
     clear_all: "सभी साफ़ करें",
     no_items: "कोई आइटम नहीं",
     no_entries_found: "कोई प्रविष्टि नहीं मिली",

package/src/locales/it.ts

@@ -43,6 +43,16 @@ export const it: RebaseTranslations = {
     clear_sort: "Cancella ordinamento",
     sort: "Ordina",
     sort_by: "Ordina per",
+    sort_then_by: "Poi per",
+    sort_ascending: "Ordina in modo crescente",
+    sort_descending: "Ordina in modo decrescente",
+    sort_remove: "Rimuovi ordinamento",
+    sort_move_up: "Rendi questa chiave più importante",
+    sort_move_down: "Rendi questa chiave meno importante",
+    sort_remove_key: "Rimuovi questa chiave di ordinamento",
+    sort_key_position: "Chiave di ordinamento {{position}}",
+    sort_shift_click_hint: "Maiusc+clic per aggiungere una colonna sotto l'ordinamento attuale",
+    save_entity_before_subcollections: "Devi salvare l'entità prima di aggiungere altre raccolte",
     clear_all: "Cancella tutto",
     no_items: "Nessun elemento",
     no_entries_found: "Nessuna voce trovata",

package/src/locales/pt.ts

@@ -48,6 +48,16 @@ export const pt: RebaseTranslations = {
     clear_sort: "Limpar ordenação",
     sort: "Ordenar",
     sort_by: "Ordenar por",
+    sort_then_by: "Depois por",
+    sort_ascending: "Ordenar ascendente",
+    sort_descending: "Ordenar descendente",
+    sort_remove: "Remover ordenação",
+    sort_move_up: "Tornar esta chave mais importante",
+    sort_move_down: "Tornar esta chave menos importante",
+    sort_remove_key: "Remover esta chave de ordenação",
+    sort_key_position: "Chave de ordenação {{position}}",
+    sort_shift_click_hint: "Shift+clique para adicionar uma coluna sob a ordenação atual",
+    save_entity_before_subcollections: "Precisas de guardar a entidade antes de adicionar coleções adicionais",
     clear_all: "Limpar tudo",
     no_items: "Sem itens",
     no_entries_found: "Nenhum registo encontrado",