create-warlock 5.40.0 → 5.41.0

package/templates/design-system-mantine/src/web/design-system/hooks/use-submit-control.ts

@@ -0,0 +1,13 @@
+import { useSubmitButton } from "@mongez/react-form";
+import { useControl } from "./use-control";
+import type { ControlProps } from "../types/control-props";
+
+export function useSubmitControl(props: ControlProps) {
+  const field = useControl(props, "submit");
+  const submit = useSubmitButton();
+  return {
+    ...field,
+    disabled: field.disabled || submit.disabled || submit.isSubmitting,
+    isSubmitting: submit.isSubmitting,
+  };
+}

package/templates/design-system-mantine/src/web/design-system/mantine-theme.ts

@@ -0,0 +1,32 @@
+import { createTheme, type MantineColorScheme } from "@mantine/core";
+
+/**
+ * The design tokens of this app. Edit this file; everything Mantine renders
+ * reads it through `DesignSystemProvider`.
+ *
+ * `primaryColor` takes any key of Mantine's palette (`blue`, `violet`, `teal`
+ * and so on) or a custom palette you add under `colors`.
+ */
+export const theme = createTheme({
+  primaryColor: "blue",
+  defaultRadius: "md",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontFamilyMonospace: 'ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  },
+  spacing: {
+    xs: "0.625rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "2rem",
+  },
+});
+
+/**
+ * `auto` follows the visitor's system preference. The same value feeds the
+ * `ColorSchemeScript` in the root and the provider, so the first paint and the
+ * hydrated page agree.
+ */
+export const defaultColorScheme: MantineColorScheme = "auto";

package/templates/design-system-mantine/src/web/design-system/notify.ts

@@ -0,0 +1,72 @@
+import { notifications } from "@mantine/notifications";
+import type { ReactNode } from "react";
+
+type Message = ReactNode;
+
+function show(color: string, message: Message, title?: ReactNode) {
+  return notifications.show({ color, message, title });
+}
+
+/** Toast helpers on top of `@mantine/notifications`. Call them from event handlers and callbacks. */
+export const notify = {
+  success: (message: Message, title?: ReactNode) => show("green", message, title),
+  error: (message: Message, title?: ReactNode) => show("red", message, title),
+  info: (message: Message, title?: ReactNode) => show("blue", message, title),
+  warning: (message: Message, title?: ReactNode) => show("yellow", message, title),
+};
+
+/** The first human-readable message in an HTTP result, a page-action payload or an Error. */
+export function messageFrom(value: unknown): string | undefined {
+  if (!value || typeof value !== "object") {
+    return typeof value === "string" ? value : undefined;
+  }
+  const source = value as {
+    message?: unknown;
+    formErrors?: unknown;
+    error?: { body?: unknown; message?: unknown };
+    data?: unknown;
+  };
+  if (Array.isArray(source.formErrors) && typeof source.formErrors[0] === "string") {
+    return source.formErrors[0];
+  }
+  const body = source.error?.body ?? source.data;
+  const nested =
+    body && typeof body === "object" ? (body as { message?: unknown }).message : undefined;
+  for (const candidate of [nested, source.error?.message, source.message]) {
+    if (typeof candidate === "string" && candidate !== "") {
+      return candidate;
+    }
+  }
+  return undefined;
+}
+
+type SubmitMessages = {
+  success: Message | ((result: unknown) => Message);
+  error?: Message | ((result: unknown) => Message);
+};
+
+/**
+ * Spread the result into `useSubmitForm` or `useSubmitAction` to show a toast
+ * when the submission succeeds or fails:
+ *
+ * `useSubmitForm({ route: "contact.send", ...notifyOnSubmit({ success: "Sent" }) })`
+ *
+ * Without an `error` message the server's own message is shown, falling back to
+ * a generic line.
+ */
+export function notifyOnSubmit(messages: SubmitMessages) {
+  const resolve = (message: Message | ((result: unknown) => Message), result: unknown) =>
+    typeof message === "function" ? (message as (result: unknown) => Message)(result) : message;
+  return {
+    onSuccess: (result: unknown) => {
+      notify.success(resolve(messages.success, result));
+    },
+    onError: (result: unknown) => {
+      notify.error(
+        messages.error !== undefined
+          ? resolve(messages.error, result)
+          : (messageFrom(result) ?? "Something went wrong. Please try again."),
+      );
+    },
+  };
+}

package/templates/design-system-mantine/src/web/design-system/provider.tsx

@@ -0,0 +1,28 @@
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import type { ReactNode } from "react";
+import { defaultColorScheme, theme } from "./mantine-theme";
+
+/**
+ * Mounts Mantine's theme, the modals manager and the notifications host around
+ * the page. Render it once in `src/web/root.tsx`, around `#vessel`.
+ */
+export default function DesignSystemProvider({ children }: { children: ReactNode }) {
+  return (
+    <MantineProvider theme={theme} defaultColorScheme={defaultColorScheme}>
+      <ModalsProvider>
+        <Notifications />
+        {children}
+      </ModalsProvider>
+    </MantineProvider>
+  );
+}
+
+/**
+ * Sets the stored or system colour scheme on `<html>` before first paint, so a
+ * dark-mode visitor never sees a light flash. Render it inside `<head>`.
+ */
+export function DesignSystemColorScheme({ nonce }: { nonce?: string }) {
+  return <ColorSchemeScript defaultColorScheme={defaultColorScheme} nonce={nonce} />;
+}

package/templates/design-system-mantine/src/web/design-system/types/control-props.ts

@@ -0,0 +1,46 @@
+import type { FormControlProps } from "@mongez/react-form";
+import type { ReactNode } from "react";
+
+export type ControlProps = Pick<
+  FormControlProps,
+  | "name"
+  | "rules"
+  | "schema"
+  | "validate"
+  | "validateOn"
+  | "onChange"
+  | "onError"
+  | "errors"
+  | "errorKeys"
+  | "disabled"
+  | "readOnly"
+  | "required"
+> & {
+  id: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  error?: ReactNode;
+  value?: unknown;
+  defaultValue?: unknown;
+  placeholder?: string;
+  className?: string;
+  dir?: "ltr" | "rtl";
+  autoComplete?: string;
+  rows?: number;
+  accept?: string;
+  multiple?: boolean;
+};
+export type Choice = { value: string; label: string; disabled?: boolean };
+export type SelectProps = ControlProps & {
+  options: readonly Choice[];
+  searchLabel?: string;
+  emptyLabel?: string;
+  clearLabel?: string;
+};
+export type RadioProps = ControlProps & { options: readonly Choice[] };
+export type CheckProps = ControlProps & { checked?: boolean; defaultChecked?: boolean };
+export type DateProps = ControlProps & {
+  clearLabel?: string;
+  closeLabel?: string;
+  timeLabel?: string;
+};