@groveback/ui 0.4.0 → 0.5.0

package/dist/SignIn.d.ts

@@ -10,6 +10,7 @@
  * through the same endpoints, and the same rate limits, as a hand-written form would.
  */
 import type { ReactNode } from 'react';
+import type { UiMessages } from './messages';
 import type { Doc } from './types';
 /**
  * The slice of the SDK's `client.auth` the gate uses. `login` may resolve with
@@ -32,6 +33,20 @@ export interface SignInProps {
     allowRegister?: boolean | undefined;
     /** Called with the user after a successful sign-in or registration. */
     onSignedIn?: ((user: Doc) => void) | undefined;
+    /**
+     * Language for the form's own words. Optional, and normally unnecessary: under
+     * `<GroveRoutes>` the gate reads the shell's locale like every other primitive.
+     *
+     * It exists for the mount that wraps the WHOLE router — `<SignIn><GroveRoutes /></SignIn>`,
+     * the way an app puts every page behind a session. That places the form above the provider
+     * carrying the locale, so a Spanish app came up with an English sign-in screen in front of
+     * translated pages. Absent, the gate falls back to the provider when there is one and then
+     * to the viewer's own languages, so that mount is now translated with no prop at all; pass
+     * one to drive it from the app's own switcher.
+     */
+    locale?: string | undefined;
+    /** Overrides for the form's words, merged over the shipped catalogue (see `messages.ts`). */
+    messages?: Partial<UiMessages> | undefined;
     /** What a signed-in viewer sees — normally the app's routes. */
     children: ReactNode;
 }

package/dist/index.d.ts

@@ -16,8 +16,8 @@ import { RelationSelect } from './RelationSelect';
 import { GroveRoutes, RouteIndex, matchRoute, resolveRoute } from './routes';
 import { SignIn } from './SignIn';
 import { uiMessagesFor } from './messages';
-import { GroveUiProvider, detectLocale, formatValue, resolveHref, useAction, useGroveUi, useMessages, usePageTitle, useUiMessages, useUiText } from './runtime';
-export { Button, DataTable, Detail, Divider, Form, Grid, GroveRoutes, GroveUiProvider, Header, Heading, MarkdownField, renderMarkdown, RelationSelect, RouteIndex, SignIn, Stack, Text, detectLocale, formatValue, matchRoute, resolveHref, resolveRoute, useAction, useGroveUi, useMessages, usePageTitle, uiMessagesFor, useUiMessages, useUiText, };
+import { GroveUiProvider, detectLocale, formatValue, resolveHref, useAction, useGroveUi, useMessages, usePageTitle, useStandaloneUiText, useUiMessages, useUiText } from './runtime';
+export { Button, DataTable, Detail, Divider, Form, Grid, GroveRoutes, GroveUiProvider, Header, Heading, MarkdownField, renderMarkdown, RelationSelect, RouteIndex, SignIn, Stack, Text, detectLocale, formatValue, matchRoute, resolveHref, resolveRoute, useAction, useGroveUi, useMessages, usePageTitle, useStandaloneUiText, uiMessagesFor, useUiMessages, useUiText, };
 export type { RelationSelectProps } from './RelationSelect';
 export type { GroveUiContext } from './runtime';
 export type { UiMessageKey, UiMessages } from './messages';

package/dist/index.js

@@ -138,6 +138,12 @@ function useUiMessages() {
   const ctx = useGroveUi();
   return useMemo(() => ({ ...uiMessagesFor(ctx.locale), ...ctx.messages }), [ctx]);
 }
+function useStandaloneUiText(locale, overrides) {
+  const ctx = useGroveUi();
+  const active = locale ?? ctx.locale ?? detectLocale(Object.keys(UI_LOCALES));
+  const messages = { ...ctx.messages, ...overrides };
+  return useCallback((key) => messages[key] ?? uiMessagesFor(active)[key], [active, ctx.messages, overrides]);
+}
 function resolveHref(href, doc) {
   if (!doc)
     return href;
@@ -1191,8 +1197,16 @@ function RouteIndex({ routes }) {
 import { useCallback as useCallback4, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
 function SignIn(props) {
-  const { auth, title, allowRegister = typeof auth.register === "function", onSignedIn, children } = props;
-  const t = useUiText();
+  const {
+    auth,
+    title,
+    allowRegister = typeof auth.register === "function",
+    onSignedIn,
+    locale,
+    messages,
+    children
+  } = props;
+  const t = useStandaloneUiText(locale, messages);
   const [signedIn, setSignedIn] = useState5(() => auth.getTokens() !== null);
   const [mode, setMode] = useState5("login");
   const [email, setEmail] = useState5("");
@@ -1382,6 +1396,7 @@ export {
   useGroveUi,
   useMessages,
   usePageTitle,
+  useStandaloneUiText,
   useUiMessages,
   useUiText
 };

package/dist/runtime.d.ts

@@ -51,6 +51,20 @@ export declare function uiText(ctx: GroveUiContext, key: UiMessageKey): string;
 export declare function useUiText(): (key: UiMessageKey) => string;
 /** The chrome catalogue in force — for the few places that need several keys at once. */
 export declare function useUiMessages(): UiMessages;
+/**
+ * The chrome translator for a component that may render OUTSIDE the provider.
+ *
+ * `SignIn` is the case this exists for: the generated app can mount it around the whole
+ * router (`<SignIn><GroveRoutes /></SignIn>`), which puts the form ABOVE the provider that
+ * carries the locale — so the sign-in screen of a Spanish app came up in English while every
+ * page behind it was translated. Rather than make the app thread a locale through by hand,
+ * such a component resolves one itself: an explicit prop, else the provider when there is
+ * one, else the viewer's own languages.
+ *
+ * `available` is the set to match the viewer against — the locales the catalogue ships, since
+ * a component outside the provider has no document to ask.
+ */
+export declare function useStandaloneUiText(locale: string | undefined, overrides: Partial<UiMessages> | undefined): (key: UiMessageKey) => string;
 /** Substitute `:param` segments in an href with a document's values. */
 export declare function resolveHref(href: string, doc?: Doc): string;
 export interface DispatchOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groveback/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React primitives for Groveback Studio screens — tables, forms, detail views and relation pickers that read through the Groveback SDK, so every query passes the policy engine.",
   "type": "module",
   "main": "./dist/index.js",