@madojs/mado 0.10.1 → 0.11.1

package/starters/default/src/shared/http/http-client.ts

@@ -0,0 +1,86 @@
+// One http client for the whole app. Modules' *.connector.ts files build on
+// top of this and never call fetch() directly. This is what lets you swap
+// auth, retries or base URLs in one place.
+
+import { HttpError } from "./http-error";
+import { applyRequestInterceptors, applyResponseInterceptors } from "./interceptors";
+
+export interface HttpRequest {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  query?: Record<string, string | number | boolean | undefined>;
+  body?: unknown;
+  headers?: Record<string, string>;
+  signal?: AbortSignal;
+}
+
+const baseUrl = (() => {
+  if (typeof window === "undefined") return "";
+  const meta = document.querySelector('meta[name="api-base"]');
+  return meta?.getAttribute("content") ?? "";
+})();
+
+function buildUrl(path: string, query?: HttpRequest["query"]): string {
+  const url = new URL(path, baseUrl || window.location.origin);
+  if (query) {
+    for (const [k, v] of Object.entries(query)) {
+      if (v !== undefined) url.searchParams.set(k, String(v));
+    }
+  }
+  return url.toString().replace(window.location.origin, "");
+}
+
+async function request<T>(path: string, init: HttpRequest = {}): Promise<T> {
+  const url = buildUrl(path, init.query);
+
+  let req: RequestInit = {
+    method: init.method ?? "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      ...(init.headers ?? {}),
+    },
+  };
+  if (init.body !== undefined) req.body = JSON.stringify(init.body);
+  if (init.signal) req.signal = init.signal;
+
+  req = await applyRequestInterceptors(url, req);
+
+  let res: Response;
+  try {
+    res = await fetch(url, req);
+  } catch (cause) {
+    throw new HttpError(0, "NETWORK_ERROR", "Network request failed", { cause });
+  }
+
+  res = await applyResponseInterceptors(res);
+
+  if (!res.ok) {
+    let payload: unknown;
+    try {
+      payload = await res.json();
+    } catch {
+      payload = await res.text().catch(() => "");
+    }
+    const message =
+      (payload && typeof payload === "object" && "message" in payload
+        ? String((payload as { message: unknown }).message)
+        : res.statusText) || "Request failed";
+    throw new HttpError(res.status, `HTTP_${res.status}`, message, { payload });
+  }
+
+  if (res.status === 204) return undefined as T;
+  return (await res.json()) as T;
+}
+
+export const httpClient = {
+  get: <T>(path: string, init?: Omit<HttpRequest, "method" | "body">) =>
+    request<T>(path, { ...init, method: "GET" }),
+  post: <T>(path: string, body?: unknown, init?: Omit<HttpRequest, "method" | "body">) =>
+    request<T>(path, { ...init, method: "POST", body }),
+  put: <T>(path: string, body?: unknown, init?: Omit<HttpRequest, "method" | "body">) =>
+    request<T>(path, { ...init, method: "PUT", body }),
+  patch: <T>(path: string, body?: unknown, init?: Omit<HttpRequest, "method" | "body">) =>
+    request<T>(path, { ...init, method: "PATCH", body }),
+  delete: <T>(path: string, init?: Omit<HttpRequest, "method" | "body">) =>
+    request<T>(path, { ...init, method: "DELETE" }),
+};

package/starters/default/src/shared/http/http-error.ts

@@ -0,0 +1,37 @@
+// One error shape for the entire app. Connectors may subclass HttpError for
+// their own provider-specific codes.
+
+export class HttpError extends Error {
+  readonly status: number;
+  readonly code: string;
+  readonly payload?: unknown;
+
+  constructor(
+    status: number,
+    code: string,
+    message: string,
+    options?: { payload?: unknown; cause?: unknown },
+  ) {
+    super(message, options?.cause !== undefined ? { cause: options.cause } : undefined);
+    this.name = "HttpError";
+    this.status = status;
+    this.code = code;
+    this.payload = options?.payload;
+  }
+
+  get isNetwork(): boolean {
+    return this.status === 0;
+  }
+  get isUnauthorized(): boolean {
+    return this.status === 401;
+  }
+  get isForbidden(): boolean {
+    return this.status === 403;
+  }
+  get isNotFound(): boolean {
+    return this.status === 404;
+  }
+  get isServer(): boolean {
+    return this.status >= 500;
+  }
+}

package/starters/default/src/shared/http/interceptors.ts

@@ -0,0 +1,59 @@
+// HTTP interceptors. Register here once, every connector benefits.
+//
+// Auth interceptor is wired by modules/auth at boot time via registerAuthToken.
+
+type RequestInterceptor = (url: string, init: RequestInit) => RequestInit | Promise<RequestInit>;
+type ResponseInterceptor = (res: Response) => Response | Promise<Response>;
+
+const requestInterceptors: RequestInterceptor[] = [];
+const responseInterceptors: ResponseInterceptor[] = [];
+
+export function addRequestInterceptor(fn: RequestInterceptor): () => void {
+  requestInterceptors.push(fn);
+  return () => {
+    const i = requestInterceptors.indexOf(fn);
+    if (i >= 0) requestInterceptors.splice(i, 1);
+  };
+}
+
+export function addResponseInterceptor(fn: ResponseInterceptor): () => void {
+  responseInterceptors.push(fn);
+  return () => {
+    const i = responseInterceptors.indexOf(fn);
+    if (i >= 0) responseInterceptors.splice(i, 1);
+  };
+}
+
+export async function applyRequestInterceptors(
+  url: string,
+  init: RequestInit,
+): Promise<RequestInit> {
+  let current = init;
+  for (const fn of requestInterceptors) {
+    current = await fn(url, current);
+  }
+  return current;
+}
+
+export async function applyResponseInterceptors(res: Response): Promise<Response> {
+  let current = res;
+  for (const fn of responseInterceptors) {
+    current = await fn(current);
+  }
+  return current;
+}
+
+// Convenience: a token provider the auth module plugs into.
+let getToken: (() => string | null) | null = null;
+
+export function registerAuthTokenProvider(provider: () => string | null): void {
+  getToken = provider;
+  addRequestInterceptor((_url, init) => {
+    const token = getToken?.();
+    if (!token) return init;
+    return {
+      ...init,
+      headers: { ...(init.headers as Record<string, string>), Authorization: `Bearer ${token}` },
+    };
+  });
+}

package/starters/default/src/shared/lib/format-date.ts

@@ -0,0 +1,19 @@
+// Pure utilities only. No DOM, no signals, no Mado runtime.
+
+const fmt = new Intl.DateTimeFormat(undefined, {
+  year: "numeric",
+  month: "short",
+  day: "2-digit",
+});
+
+export function formatDate(input: string | number | Date): string {
+  const date = input instanceof Date ? input : new Date(input);
+  return fmt.format(date);
+}
+
+export function formatMoney(amount: number, currency: string): string {
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency,
+  }).format(amount);
+}

package/starters/default/src/shared/styles/content.css

@@ -0,0 +1,70 @@
+/* Light-DOM content styles for pages: forms, tables, prose and simple states.
+ * Shadow DOM leaf components own their styles in component css`` blocks. */
+
+section {
+  display: grid;
+  gap: var(--space-4);
+}
+
+h1,
+p {
+  margin-block-start: 0;
+}
+
+form {
+  display: grid;
+  gap: var(--space-3);
+}
+
+label {
+  display: grid;
+  gap: var(--space-1);
+  font-weight: 500;
+}
+
+input {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font: inherit;
+}
+
+table.data {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--color-bg);
+}
+
+table.data th,
+table.data td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+}
+
+table.data th {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+dl {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: var(--space-2) var(--space-4);
+}
+
+dt {
+  color: var(--color-text-muted);
+}
+
+dd {
+  margin: 0;
+}
+
+.error {
+  color: var(--color-danger);
+}

package/starters/default/src/shared/styles/reset.css

@@ -0,0 +1,32 @@
+/* Minimal reset for light DOM only. Does NOT pierce shadow roots. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+}

package/starters/default/src/shared/styles/shell.css

@@ -0,0 +1,57 @@
+/* App-zone shell styles. These classes are used by src/layouts/*.layout.ts.
+ * Page content and reusable components do not belong here. */
+
+.layout--app {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+}
+
+.app-header {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  padding: var(--space-3) var(--space-5);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.app-header .brand {
+  margin-right: auto;
+  font-weight: 600;
+}
+
+.app-header nav {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.app-header .who {
+  color: var(--color-text-muted);
+}
+
+.app-main {
+  padding: var(--space-5);
+}
+
+.layout--auth {
+  display: grid;
+  min-height: 100vh;
+  gap: var(--space-5);
+  place-items: center;
+  padding: var(--space-5);
+}
+
+.layout--auth .brand {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.auth-main {
+  width: min(360px, 100%);
+  padding: var(--space-5);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}

package/starters/default/src/shared/styles/tokens.css

@@ -0,0 +1,44 @@
+/* Design tokens. Imported once by src/main.ts.
+ * Every component reads these via var(--token-name) and can be retargeted
+ * here without touching component code. */
+
+:root {
+  /* Color */
+  --color-bg: #ffffff;
+  --color-surface: #f8fafc;
+  --color-border: #e2e8f0;
+  --color-text: #0f172a;
+  --color-text-muted: #64748b;
+  --color-primary: #2563eb;
+  --color-primary-contrast: #ffffff;
+  --color-danger: #dc2626;
+  --color-success: #16a34a;
+
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+
+  /* Radii */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  /* Typography */
+  --font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-size-base: 14px;
+  --line-height-base: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0b1220;
+    --color-surface: #111827;
+    --color-border: #1f2937;
+    --color-text: #e5e7eb;
+    --color-text-muted: #9ca3af;
+  }
+}

package/starters/default/src/shared/ui/x-button.component.ts

@@ -0,0 +1,49 @@
+// Reusable UI brick. Pure presentation: no business state, no signals
+// reaching out to services. Token-driven look, themable via tokens.css.
+//
+// Reactive attributes via ctx.attr(name, default?) — no MutationObserver
+// boilerplate.
+
+import { component, css, html } from "@madojs/mado";
+
+component(
+  "x-button",
+  ({ attr }) => {
+    const variant = attr("variant", "primary"); // "primary" | "ghost"
+    const disabled = attr("disabled", "false");
+    return () => html`
+      <button
+        class=${() => `btn btn--${variant()}`}
+        ?disabled=${() => disabled() !== "false"}
+      >
+        <slot></slot>
+      </button>
+    `;
+  },
+  {
+    styles: css`
+      :host {
+        display: inline-block;
+      }
+      .btn {
+        padding: var(--space-2) var(--space-4);
+        border-radius: var(--radius-md);
+        border: 1px solid transparent;
+        cursor: pointer;
+      }
+      .btn--primary {
+        background: var(--color-primary);
+        color: var(--color-primary-contrast);
+      }
+      .btn--ghost {
+        background: transparent;
+        border-color: var(--color-border);
+        color: var(--color-text);
+      }
+      .btn[disabled] {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+    `,
+  },
+);

package/starters/default/src/shared/ui/x-spinner.component.ts

@@ -0,0 +1,22 @@
+import { component, css, html } from "@madojs/mado";
+
+component("x-spinner", () => () => html`<div class="dot" aria-label="Loading"></div>`, {
+  styles: css`
+    :host {
+      display: inline-block;
+    }
+    .dot {
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      border: 2px solid var(--color-border);
+      border-top-color: var(--color-primary);
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `,
+});

package/starters/default/src/styles.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/starters/default/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/starters/default/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noImplicitOverride": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+    "experimentalDecorators": false,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts"],
+  "exclude": ["node_modules", "out"]
+}

package/starters/default/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import { mado } from "@madojs/mado/vite";
+
+export default defineConfig({
+  plugins: [mado()],
+  css: {
+    transformer: "lightningcss",
+  },
+});