create-warlock 5.11.0 → 5.13.0

package/templates/warlock/src/typings.d.ts

@@ -53,20 +53,26 @@ declare module "@warlock.js/core" {
    * ```
    */
   interface RequestLocals {}
+}
 
+declare module "@warlock.js/auth" {
   /**
-   * The authenticated user — `request.user`.
+   * The authenticated user — `request.locals.user`.
    *
-   * The auth middleware assigns the resolved user model here. Declaring its
-   * shape gives unguarded handlers (ones that may or may not have a user) a
-   * real type instead of `{}`.
+   * `@warlock.js/auth` already augments core's `RequestLocals` with an
+   * optional `user?: RequestUser` key; this augments `RequestUser` itself
+   * (owned by `@warlock.js/auth`, not core — core removed its own `request.user`
+   * and the `RequestUser` it used to declare). The auth middleware assigns the
+   * resolved user model here. Declaring its shape gives unguarded handlers
+   * (ones that may or may not have a user) a real type instead of `{}`.
    *
-   * This does NOT make `request.user` non-optional: the framework declares it
-   * as `user?: RequestUser`, and augmentation can add members but cannot remove
+   * This does NOT make `request.locals.user` non-optional: it stays
+   * `user?: RequestUser`, and augmentation can add members but cannot remove
    * the `?`. For routes that are actually behind the auth guard, type the
    * handler as `GuardedRequestHandler` (see
-   * `src/app/auth/requests/guarded.request.ts`) — that narrows `request.user`
-   * to the app's `User` model AND drops the `| undefined`.
+   * `src/app/auth/requests/guarded.request.ts`) — that narrows
+   * `request.locals.user` to the app's `User` model AND drops the
+   * `| undefined`.
    *
    * @example
    * ```ts

package/templates/warlock/src/web/home/components/contact-section.tsx

@@ -1,23 +1,40 @@
 import { Form } from "@mongez/react-form";
-import { useTrans } from "@warlock.js/web";
+import { changeLocaleCode, useLocale, useTextDirection, useTrans } from "@warlock.js/web";
+import { useState } from "react";
 import { contactSchema } from "../../../shared/contact.schema";
-import type { LocaleCode } from "../../../shared/locales";
 import { useContactForm } from "../hooks/use-contact-form";
-import { useLocaleSwitcher } from "../hooks/use-locale-switcher";
 import { ContactField, ContactSubmitButton } from "./contact-form-controls";
 
-type ContactSectionProps = { locale: LocaleCode };
-
-export function ContactSection({ locale }: ContactSectionProps) {
+export function ContactSection() {
   const { status: contactStatus, submitContact } = useContactForm();
-  const { error: localeError, isSwitching, switchLocale } = useLocaleSwitcher();
+  const locale = useLocale();
+  const direction = useTextDirection();
   const translate = useTrans();
+  const [isSwitchingLocale, setIsSwitchingLocale] = useState(false);
+  const [localeError, setLocaleError] = useState("");
+
+  /**
+   * Switch locale via the framework's `changeLocaleCode` — no reload, no
+   * manual cookie write. The control is disabled while the request is in
+   * flight, and a rejection leaves the current locale in place while
+   * surfacing an error instead of throwing.
+   */
+  async function toggleLocale() {
+    const nextLocale = locale === "en" ? "ar" : "en";
+
+    setIsSwitchingLocale(true);
+    setLocaleError("");
+
+    try {
+      await changeLocaleCode(nextLocale);
+    } catch (error) {
+      setLocaleError(error instanceof Error ? error.message : "Could not update the locale.");
+    } finally {
+      setIsSwitchingLocale(false);
+    }
+  }
   return (
-    <section
-      className="warlock-section warlock-contact"
-      id="contact"
-      dir={locale === "ar" ? "rtl" : "ltr"}
-    >
+    <section className="warlock-section warlock-contact" id="contact" dir={direction}>
       <div className="warlock-contact-copy">
         <p className="warlock-overline">{translate("contact.overline")}</p>
         <h2>{translate("contact.title")}</h2>
@@ -62,8 +79,8 @@ export function ContactSection({ locale }: ContactSectionProps) {
           <button
             className="warlock-locale-toggle"
             type="button"
-            disabled={isSwitching}
-            onClick={() => switchLocale(locale === "en" ? "ar" : "en")}
+            disabled={isSwitchingLocale}
+            onClick={toggleLocale}
           >
             {translate("contact.toggle")}
           </button>

package/templates/warlock/src/web/home/hooks/use-contact-form.ts

@@ -1,4 +1,3 @@
-import { http } from "@mongez/http";
 import { type FormSubmitOptions, type InferFormValues } from "@mongez/react-form";
 import { useState } from "react";
 import type { contactSchema } from "../../../shared/contact.schema";
@@ -14,6 +13,11 @@ type ContactResponse = {
   };
 };
 
+type ContactErrorBody = {
+  message?: string;
+  errors?: unknown;
+};
+
 type ContactStatus = {
   state: "idle" | "submitting" | "success" | "error";
   message: string;
@@ -29,21 +33,28 @@ export function useContactForm() {
     setStatus({ state: "submitting", message: "Sending to the backend…" });
 
     try {
-      const result = await http.post<ContactResponse>("/api/contact", values as ContactValues);
+      const response = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values as ContactValues),
+      });
+
+      const body = (await response.json().catch(() => ({}))) as ContactErrorBody &
+        Partial<ContactResponse>;
 
-      if (result.error) {
-        if (result.error.isValidationError) {
-          setFormErrors(result.error, form);
+      if (!response.ok) {
+        if (response.status === 422) {
+          setFormErrors({ body }, form);
         }
 
         setStatus({
           state: "error",
-          message: result.error.message || "The request was not accepted.",
+          message: body.message || "The request was not accepted.",
         });
         return;
       }
 
-      setStatus({ state: "success", message: result.data?.message });
+      setStatus({ state: "success", message: body.message ?? "" });
       form.reset();
     } catch (error) {
       setStatus({

package/templates/warlock/src/web/home/index.page.tsx

@@ -37,7 +37,7 @@ export default function HomePage({ data }: HomePageProps) {
       <HomeHeader />
       <HeroSection statusMessage={data.statusMessage} />
       <ContentSections capabilities={data.capabilities} packages={data.packages} />
-      <ContactSection locale={data.locale} />
+      <ContactSection />
       <HomeFooter />
     </main>
   );

package/templates/warlock/src/web/root.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from "@warlock.js/web";
-import { Head, Scripts } from "@warlock.js/web";
+import { Head, Scripts, useLocale, useTextDirection } from "@warlock.js/web";
 import "./app.css";
 
 /**
@@ -9,8 +9,11 @@ import "./app.css";
  * again in the browser during hydration, where neither exists.
  */
 export default function App({ children }: AppProps) {
+  const locale = useLocale();
+  const direction = useTextDirection();
+
   return (
-    <html lang="en">
+    <html lang={locale} dir={direction}>
       <head>
         {/*
           Placement only. The framework injects the page's `metadata`, the

package/templates/warlock/src/web/home/hooks/use-locale-switcher.ts

@@ -1,35 +0,0 @@
-import { http } from "@mongez/http";
-import { useState } from "react";
-import { type LocaleCode } from "../../../shared/locales";
-
-type LocalePreferenceResponse = {
-  locale: LocaleCode;
-};
-
-export function useLocaleSwitcher() {
-  const [isSwitching, setIsSwitching] = useState(false);
-  const [error, setError] = useState("");
-
-  async function switchLocale(locale: LocaleCode): Promise<void> {
-    setIsSwitching(true);
-    setError("");
-
-    try {
-      const result = await http.post<LocalePreferenceResponse>("/api/locale", { locale });
-
-      if (result.error) {
-        setError(result.error.message || "Could not update the locale.");
-        setIsSwitching(false);
-        return;
-      }
-
-      window.location.hash = "contact";
-      window.location.reload();
-    } catch (caughtError) {
-      setError(caughtError instanceof Error ? caughtError.message : "Could not update the locale.");
-      setIsSwitching(false);
-    }
-  }
-
-  return { error, isSwitching, switchLocale };
-}