create-warlock 5.2.3 → 5.3.0

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

@@ -0,0 +1,108 @@
+import { Form } from "@mongez/react-form";
+import { useTrans } from "@warlock.js/web";
+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) {
+  const { status: contactStatus, submitContact } = useContactForm();
+  const { error: localeError, isSwitching, switchLocale } = useLocaleSwitcher();
+  const translate = useTrans();
+  return (
+    <section
+      className="warlock-section warlock-contact"
+      id="contact"
+      dir={locale === "ar" ? "rtl" : "ltr"}
+    >
+      <div className="warlock-contact-copy">
+        <p className="warlock-overline">{translate("contact.overline")}</p>
+        <h2>{translate("contact.title")}</h2>
+        <p>{translate("contact.description")}</p>
+        <ol className="warlock-contact-flow">
+          <li>
+            <span>01</span>
+            <div>
+              <strong>React submits</strong>
+              <small>JSON over the same origin</small>
+            </div>
+          </li>
+          <li>
+            <span>02</span>
+            <div>
+              <strong>Seal validates</strong>
+              <small>Name, email, and message</small>
+            </div>
+          </li>
+          <li>
+            <span>03</span>
+            <div>
+              <strong>Warlock responds</strong>
+              <small>Typed controller, structured JSON</small>
+            </div>
+          </li>
+        </ol>
+      </div>
+      <Form
+        id="contact-demo"
+        className="warlock-contact-form"
+        schema={contactSchema}
+        validateOn="blur"
+        focusFirstError
+        onSubmit={submitContact}
+      >
+        <div className="warlock-form-heading">
+          <div>
+            <small>POST</small>
+            <code>/api/contact</code>
+          </div>
+          <button
+            className="warlock-locale-toggle"
+            type="button"
+            disabled={isSwitching}
+            onClick={() => switchLocale(locale === "en" ? "ar" : "en")}
+          >
+            {translate("contact.toggle")}
+          </button>
+        </div>
+        <ContactField
+          name="name"
+          type="text"
+          label={translate("contact.name")}
+          placeholder={translate("contact.namePlaceholder")}
+          required
+        />
+        <ContactField
+          name="email"
+          type="email"
+          label={translate("contact.email")}
+          placeholder={translate("contact.emailPlaceholder")}
+          required
+        />
+        <ContactField
+          name="message"
+          label={translate("contact.message")}
+          placeholder={translate("contact.messagePlaceholder")}
+          multiline
+          rows={5}
+          required
+        />
+        <ContactSubmitButton
+          idleLabel={translate("contact.submit")}
+          submittingLabel={translate("contact.submitting")}
+        />
+        <p className={`warlock-form-status is-${contactStatus.state}`} aria-live="polite">
+          {contactStatus.message || translate("contact.idle")}
+        </p>
+        {localeError ? (
+          <p className="warlock-form-status is-error" aria-live="polite">
+            {localeError}
+          </p>
+        ) : null}
+      </Form>
+    </section>
+  );
+}

package/templates/warlock/src/web/home/components/content-sections.tsx

@@ -0,0 +1,61 @@
+import type { HomePageData } from "app/home/services/home.service";
+
+type ContentSectionsProps = {
+  capabilities: HomePageData["capabilities"];
+  packages: HomePageData["packages"];
+};
+
+export function ContentSections({ capabilities, packages }: ContentSectionsProps) {
+  return (
+    <>
+      <section className="warlock-section warlock-features" id="features">
+        <div className="warlock-section-heading">
+          <p className="warlock-overline">Why Warlock</p>
+          <h2>A sharper way to build the whole product.</h2>
+          <p>
+            Fewer seams, fewer competing conventions, and more of your system expressed in code the
+            compiler can understand.
+          </p>
+        </div>
+        <div className="warlock-feature-grid">
+          {capabilities.map((capability) => (
+            <article className="warlock-feature-card" key={capability.index}>
+              <div className="warlock-feature-meta">
+                <span>{capability.index}</span>
+                <small>{capability.eyebrow}</small>
+              </div>
+              <h3>{capability.title}</h3>
+              <p>{capability.body}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+      <section className="warlock-section warlock-package-section" id="packages">
+        <div className="warlock-package-copy">
+          <p className="warlock-overline">The spellbook</p>
+          <h2>Take the framework. Keep the choice.</h2>
+          <p>
+            Every package owns one concern and composes with the rest. Build a focused HTTP service
+            today, then add persistence, jobs, access control, or agents without replacing the
+            foundation.
+          </p>
+          <a href="https://warlock.js.org/#packages" target="_blank" rel="noreferrer">
+            Browse every package <span aria-hidden="true">→</span>
+          </a>
+        </div>
+        <div className="warlock-package-grid" aria-label="Warlock.js packages">
+          {packages.map((frameworkPackage) => (
+            <article className="warlock-package" key={frameworkPackage.name}>
+              <small>{frameworkPackage.area}</small>
+              <h3>
+                <span>@warlock.js/</span>
+                {frameworkPackage.name}
+              </h3>
+              <p>{frameworkPackage.description}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { RuntimePreview } from "./runtime-preview";
+type HeroSectionProps = { statusMessage: string };
+export function HeroSection({ statusMessage }: HeroSectionProps) {
+  return (
+    <>
+      <section className="warlock-hero">
+        <div className="warlock-orbit warlock-orbit-one" aria-hidden="true" />
+        <div className="warlock-orbit warlock-orbit-two" aria-hidden="true" />
+        <div className="warlock-hero-copy">
+          <p className="warlock-kicker">
+            <span className="warlock-kicker-dot" />
+            AI-native TypeScript framework
+          </p>
+          <h1>
+            Build with<span> uncommon power.</span>
+          </h1>
+          <p className="warlock-hero-lede">
+            Production backends, server-rendered React, and intelligent agents—built on the same
+            typed primitives, running in one deliberate architecture.
+          </p>
+          <div className="warlock-hero-actions">
+            <a
+              className="warlock-button warlock-button-primary"
+              href="https://warlock.js.org/v/latest/core/getting-started/02-installation/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Start building <span aria-hidden="true">→</span>
+            </a>
+            <a
+              className="warlock-button warlock-button-ghost"
+              href="https://github.com/warlockjs"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Explore the source
+            </a>
+          </div>
+          <dl className="warlock-hero-stats">
+            <div>
+              <dt>28</dt>
+              <dd>focused packages</dd>
+            </div>
+            <div>
+              <dt>120+</dt>
+              <dd>AI-readable skills</dd>
+            </div>
+            <div>
+              <dt>MIT</dt>
+              <dd>open source</dd>
+            </div>
+          </dl>
+        </div>
+        <RuntimePreview statusMessage={statusMessage} />
+      </section>
+      <section className="warlock-trust" aria-label="Framework qualities">
+        <p>Built for teams who expect more from the foundation</p>
+        <div>
+          <span>Type-safe</span>
+          <span>Full-stack</span>
+          <span>AI-native</span>
+          <span>Composable</span>
+          <span>Production-ready</span>
+        </div>
+      </section>
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/home-footer.tsx

@@ -0,0 +1,35 @@
+import { HomeLogo } from "./logo";
+
+export function HomeFooter() {
+  return (
+    <>
+      <section className="warlock-cta">
+        <div className="warlock-cta-mark" aria-hidden="true">
+          W
+        </div>
+        <p className="warlock-overline">Your next system starts here</p>
+        <h2>Build something formidable.</h2>
+        <p>Scaffold a typed Warlock application and make the first request in minutes.</p>
+        <div className="warlock-command">
+          <code>npm create warlock@latest</code>
+          <span>Ready when you are</span>
+        </div>
+      </section>
+      <footer className="warlock-footer">
+        <div className="warlock-brand">
+          <HomeLogo />
+        </div>
+        <p>Backend, web, and AI on the same typed primitives.</p>
+        <div>
+          <a href="https://warlock.js.org" target="_blank" rel="noreferrer">
+            Documentation
+          </a>
+          <a href="https://github.com/warlockjs" target="_blank" rel="noreferrer">
+            GitHub
+          </a>
+          <span>MIT © {new Date().getFullYear()}</span>
+        </div>
+      </footer>
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/home-header.tsx

@@ -0,0 +1,26 @@
+import { HomeLogo } from "./logo";
+
+export function HomeHeader() {
+  return (
+    <header className="warlock-nav">
+      <a className="warlock-brand" href="/" aria-label="Warlock.js home">
+        <HomeLogo showVersion />
+      </a>
+      <nav className="warlock-nav-links" aria-label="Primary navigation">
+        <a href="#features">Features</a>
+        <a href="#packages">Packages</a>
+        <a href="https://warlock.js.org/v/latest/core/" target="_blank" rel="noreferrer">
+          Docs
+        </a>
+      </nav>
+      <a
+        className="warlock-nav-cta"
+        href="https://github.com/warlockjs"
+        target="_blank"
+        rel="noreferrer"
+      >
+        View on GitHub <span aria-hidden="true">↗</span>
+      </a>
+    </header>
+  );
+}

package/templates/warlock/src/web/home/components/logo.tsx

@@ -0,0 +1,19 @@
+type HomeLogoProps = {
+  showVersion?: boolean;
+};
+
+export function HomeLogo({ showVersion = false }: HomeLogoProps) {
+  return (
+    <>
+      <span className="warlock-logo-shell">
+        <img
+          className="warlock-logo"
+          src="https://warlock.js.org/_astro/logo.CdUW31XC.png"
+          alt=""
+        />
+      </span>
+      <span className="warlock-wordmark">Warlock.js</span>
+      {showVersion ? <span className="warlock-version">v5</span> : null}
+    </>
+  );
+}

package/templates/warlock/src/web/home/components/runtime-preview.tsx

@@ -0,0 +1,75 @@
+type RuntimePreviewProps = { statusMessage: string };
+
+export function RuntimePreview({ statusMessage }: RuntimePreviewProps) {
+  return (
+    <div className="warlock-hero-stage" aria-label="Warlock application preview">
+      <div className="warlock-glow" aria-hidden="true" />
+      <div className="warlock-terminal">
+        <div className="warlock-terminal-bar">
+          <div className="warlock-terminal-dots" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+          <span>src/web/index.page.tsx</span>
+          <span className="warlock-terminal-live">Live</span>
+        </div>
+        <div className="warlock-code" aria-label="Example Warlock page code">
+          <div>
+            <span className="code-purple">import type</span> {"{"} PageProps {"}"}{" "}
+            <span className="code-purple">from</span>{" "}
+            <span className="code-green">&quot;@warlock.js/web&quot;</span>;
+          </div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">export async function</span>{" "}
+            <span className="code-blue">loader</span>() {"{"}
+          </div>
+          <div className="warlock-code-indent">
+            <span className="code-purple">return</span> {"{"} statusMessage:{" "}
+            <span className="code-green">&quot;Application ready&quot;</span> {"}"};
+          </div>
+          <div>{"}"}</div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">type</span>{" "}
+            <span className="code-blue">HomePageProps</span> ={" "}
+            <span className="code-blue">PageProps</span>&lt;
+            <span className="code-purple">typeof</span> loader&gt;;
+          </div>
+          <div className="warlock-code-spacer" aria-hidden="true" />
+          <div>
+            <span className="code-purple">export default function</span>{" "}
+            <span className="code-blue">HomePage</span>({"{"} data {"}"}:{" "}
+            <span className="code-blue">HomePageProps</span>) {"{"}
+          </div>
+          <div className="warlock-code-indent">
+            <span className="code-purple">return</span> &lt;small&gt;{"{"}data.statusMessage{"}"}
+            &lt;/small&gt;;
+          </div>
+          <div>{"}"}</div>
+        </div>
+        <div className="warlock-runtime">
+          <div>
+            <span className="warlock-runtime-pulse" />
+            <div>
+              <strong>Application ready</strong>
+              <small>{statusMessage}</small>
+            </div>
+          </div>
+          <div className="warlock-runtime-marks" aria-label="Runtime capabilities">
+            <span>SSR</span>
+            <span>React</span>
+            <span>HMR</span>
+          </div>
+        </div>
+      </div>
+      <div className="warlock-stage-note warlock-stage-note-top">
+        <span>SSR</span>First response, fully rendered
+      </div>
+      <div className="warlock-stage-note warlock-stage-note-bottom">
+        <span>HMR</span>State survives the edit
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+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";
+import { setFormErrors } from "../../shared/utils/set-form-errors";
+
+type ContactValues = InferFormValues<typeof contactSchema>;
+
+type ContactResponse = {
+  message: string;
+  received: {
+    email: string;
+    characters: number;
+  };
+};
+
+type ContactStatus = {
+  state: "idle" | "submitting" | "success" | "error";
+  message: string;
+};
+
+export function useContactForm() {
+  const [status, setStatus] = useState<ContactStatus>({ state: "idle", message: "" });
+
+  async function submitContact({
+    values,
+    form,
+  }: FormSubmitOptions<typeof contactSchema>): Promise<void> {
+    setStatus({ state: "submitting", message: "Sending to the backend…" });
+
+    try {
+      const result = await http.post<ContactResponse>("/api/contact", values as ContactValues);
+
+      if (result.error) {
+        if (result.error.isValidationError) {
+          setFormErrors(result.error, form);
+        }
+
+        setStatus({
+          state: "error",
+          message: result.error.message || "The request was not accepted.",
+        });
+        return;
+      }
+
+      setStatus({ state: "success", message: result.data?.message });
+      form.reset();
+    } catch (error) {
+      setStatus({
+        state: "error",
+        message: error instanceof Error ? error.message : "Could not reach the backend.",
+      });
+    }
+  }
+
+  return { status, submitContact };
+}

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

@@ -0,0 +1,35 @@
+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 };
+}

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

@@ -0,0 +1,44 @@
+import type { PageLoader, PageProps } from "@warlock.js/web";
+import { getHomeService } from "app/home/services/home.service";
+import { isLocaleCode } from "../../shared/locales";
+import { ContactSection } from "./components/contact-section";
+import { ContentSections } from "./components/content-sections";
+import { HeroSection } from "./components/hero-section";
+import { HomeFooter } from "./components/home-footer";
+import { HomeHeader } from "./components/home-header";
+import "./styles/home.css";
+
+export { register } from "./register";
+
+export const route = { path: "/", name: "home" };
+export const metadata = {
+  title: "Warlock.js — Build with uncommon power",
+  description:
+    "A TypeScript framework for production backends, server-rendered React applications, and AI-native systems.",
+};
+type HomeLoaderOptions = Parameters<PageLoader>[0];
+
+export async function loader({ request, response }: HomeLoaderOptions) {
+  const locale = request.locale;
+  if (!isLocaleCode(locale)) {
+    return response.notFound();
+  }
+
+  const homeData = await getHomeService();
+
+  return { locale, ...homeData };
+}
+
+type HomePageProps = PageProps<typeof loader>;
+
+export default function HomePage({ data }: HomePageProps) {
+  return (
+    <main className="warlock-home">
+      <HomeHeader />
+      <HeroSection statusMessage={data.statusMessage} />
+      <ContentSections capabilities={data.capabilities} packages={data.packages} />
+      <ContactSection locale={data.locale} />
+      <HomeFooter />
+    </main>
+  );
+}

package/templates/warlock/src/web/home/register.ts

@@ -0,0 +1,30 @@
+import { groupedTranslations } from "@mongez/localization";
+
+export function register() {
+  groupedTranslations({
+    contact: {
+      overline: { en: "Live full-stack example", ar: "مثال حي لتطبيق متكامل" },
+      title: { en: "Send a typed request.", ar: "أرسل طلبًا مضبوط الأنواع." },
+      description: {
+        en: "One form. One validated request. One runtime shared by the browser and server.",
+        ar: "نموذج واحد. طلب واحد خاضع للتحقق. وبيئة تشغيل واحدة للمتصفح والخادم.",
+      },
+      toggle: { en: "العربية", ar: "English" },
+      name: { en: "Name", ar: "الاسم" },
+      namePlaceholder: { en: "Ada Lovelace", ar: "آدا لوفلايس" },
+      email: { en: "Email", ar: "البريد الإلكتروني" },
+      emailPlaceholder: { en: "ada@example.com", ar: "ada@example.com" },
+      message: { en: "Message", ar: "الرسالة" },
+      messagePlaceholder: {
+        en: "Tell us what you are building...",
+        ar: "أخبرنا بما تعمل على بنائه...",
+      },
+      submit: { en: "Send request", ar: "إرسال الطلب" },
+      submitting: { en: "Sending...", ar: "جارٍ الإرسال..." },
+      idle: {
+        en: "The response from Warlock will appear here.",
+        ar: "ستظهر استجابة Warlock هنا.",
+      },
+    },
+  });
+}