@synetics/ui 0.7.0-alpha

package/src/showcase/forms/pages/wizard-page.syn

@@ -0,0 +1,253 @@
+/**
+ * Forms Demo — Multi-step Wizard
+ * Demonstrates: step-scoped validation before advancing
+ *
+ * Single form, three steps shown/hidden via reactive signal.
+ * "Next" validates only the current step's fields — uses form.validateForm()
+ * then inspects getField(name).isValid per step field.
+ * Step 3 shows a data preview + terms checkbox + final submit.
+ *
+ * Steps:
+ *   1. Personal  → firstName, lastName
+ *   2. Account   → email, password (min 8)
+ *   3. Confirm   → terms (boolean) + preview + submit
+ */
+
+import { createSignal, onCleanup } from '@synetics/synetics.dev';
+import { createForm, f } from '@synetics/formular.dev';
+import type { IExtendedInput, IFormular } from '@synetics/formular.dev';
+import { PageHeader } from '../../common/components/page-header.syn';
+import { FormProvider, TextField, CheckboxField } from '@/components/formular';
+
+type WizardData = {
+  firstName: string;
+  lastName:  string;
+  email:     string;
+  password:  string;
+  terms:     boolean;
+};
+
+const STEP_FIELDS: Record<number, Array<keyof WizardData>> = {
+  1: ['firstName', 'lastName'],
+  2: ['email', 'password'],
+  3: ['terms'],
+};
+
+const STEP_LABELS: Record<number, string> = {
+  1: 'Personal',
+  2: 'Account',
+  3: 'Confirm',
+};
+
+const TOTAL_STEPS = 3;
+
+type SubmitStatus = 'idle' | 'submitting' | 'success' | 'error';
+
+type WizardSnapshot = Record<string, unknown>;
+
+export component WizardPage() {
+  const [form, setForm] = createSignal<IFormular<WizardData> | null>(null);
+  const [step, setStep]                 = createSignal<number>(1);
+  const [stepError, setStepError]       = createSignal<string | null>(null);
+  const [submitStatus, setSubmitStatus] = createSignal<SubmitStatus>('idle');
+  const [result, setResult]             = createSignal<WizardSnapshot | null>(null);
+
+  createForm<WizardData>({
+    schema: f.object({
+      firstName: f.string().min(1).nonempty().debounce(200),
+      lastName:  f.string().min(1).nonempty().debounce(200),
+      email:     f.string().email().nonempty().debounce(200),
+      password:  f.string().min(8).nonempty().debounce(200),
+      terms:     f.boolean(),
+    }),
+    defaultValues: { firstName: '', lastName: '', email: '', password: '', terms: false },
+    onSubmit: async (data: WizardData) => {
+      if (!data.terms) throw new Error('You must accept the terms to continue.');
+      setSubmitStatus('submitting');
+      await new Promise<void>((resolve) => setTimeout(resolve, 600));
+    },
+  }).then(setForm);
+
+  onCleanup(() => form()?.clear());
+
+  /**
+   * Validates current step's fields before advancing.
+   * Calls validateForm() to run all validators, then inspects
+   * isValid on each step field individually.
+   */
+  const validateCurrentStep = async (): Promise<boolean> => {
+    const f = form();
+    if (!f) return false;
+    await f.validateForm();
+    const fieldNames = STEP_FIELDS[step()] ?? [];
+    return fieldNames.every((name: keyof WizardData) => {
+      const field: IExtendedInput | undefined = f.getField(String(name));
+      return field?.isValid ?? true;
+    });
+  };
+
+  const goNext = async () => {
+    setStepError(null);
+    const valid = await validateCurrentStep();
+    if (!valid) {
+      setStepError('Please fix the errors above before continuing.');
+      return;
+    }
+    setStep((s) => Math.min(s + 1, TOTAL_STEPS));
+  };
+
+  const goBack = () => {
+    setStepError(null);
+    setStep((s) => Math.max(s - 1, 1));
+  };
+
+  const handleSubmit = async () => {
+    const f = form();
+    if (!f) return;
+    setStepError(null);
+    setSubmitStatus('idle');
+    try {
+      const valid = await validateCurrentStep();
+      if (!valid) {
+        setStepError('Please fix the errors above before submitting.');
+        return;
+      }
+      const submitted = await f.submit();
+      if (submitted !== null) {
+        setResult(f.getData() as Record<string, unknown>);
+        setSubmitStatus('success');
+      } else {
+        setStepError('Validation failed — fix errors above.');
+        setSubmitStatus('error');
+      }
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setStepError(msg);
+      setSubmitStatus('error');
+    }
+  };
+
+  const getDataSnapshot = (): WizardSnapshot | null => {
+    const f = form();
+    if (!f) return null;
+    return f.getData() as Record<string, unknown>;
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title="Multi-step Wizard"
+        emoji="🧙"
+        color="#8b5cf6"
+        description="Single form across 3 steps. Each 'Next' validates only the current step's fields before advancing."
+      />
+
+      {!form() ? (
+        <p class="status-loading">⏳ Initialising form…</p>
+      ) : (
+        <FormProvider form={form()!} onSaveCallback={() => {}} onQuitCallback={() => {}}>
+          <div class="demo-card">
+
+            {/* Step indicator */}
+            <div style="display:flex;gap:.5rem;margin-bottom:1.25rem;align-items:center">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={String(n)}
+                  class={() => `demo-step${step() === n ? ' demo-step--active' : step() > n ? ' demo-step--done' : ''}`}
+                >
+                  {() => step() > n ? '✓' : String(n)}
+                </div>
+              ))}
+              <span style="margin-left:.5rem;font-size:.9rem;font-weight:600;color:var(--color-text)">
+                {() => STEP_LABELS[step()]}
+              </span>
+            </div>
+
+            {/* Step 1 — Personal */}
+            {() => step() === 1 ? (
+              <div>
+                <p class="demo-desc">Enter your name to continue.</p>
+                <div style="display:flex;gap:.75rem;flex-wrap:wrap">
+                  <div style="flex:1;min-width:160px">
+                    <TextField name="firstName" label="First Name" showErrors showGuides />
+                  </div>
+                  <div style="flex:1;min-width:160px">
+                    <TextField name="lastName" label="Last Name" showErrors showGuides />
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {/* Step 2 — Account */}
+            {() => step() === 2 ? (
+              <div>
+                <p class="demo-desc">Set up your account credentials.</p>
+                <div style="display:flex;flex-direction:column;gap:.75rem">
+                  <TextField name="email" label="Email" showErrors showGuides />
+                  <TextField name="password" label="Password (min 8 chars)" showErrors showGuides />
+                </div>
+              </div>
+            ) : null}
+
+            {/* Step 3 — Confirm */}
+            {() => step() === 3 ? (
+              <div>
+                <p class="demo-desc">Review your details and accept the terms.</p>
+
+                <div class="demo-data-preview">
+                  <span class="demo-data-preview__label">Data preview</span>
+                  <pre style="font-size:.75rem;overflow:auto">{JSON.stringify(getDataSnapshot(), null, 2)}</pre>
+                </div>
+
+                <CheckboxField name="terms" />
+              </div>
+            ) : null}
+
+            {/* Step error */}
+            {() => stepError() ? (
+              <p class="demo-banner demo-banner--error" style="padding:.5rem">{() => stepError()}</p>
+            ) : null}
+
+            {/* Submit success */}
+            {() => submitStatus() === 'success' && result() ? (
+              <div class="demo-banner demo-banner--success">
+                <strong>✓ Form submitted</strong>
+                <pre style="font-size:.75rem;margin-top:.25rem;overflow:auto">{JSON.stringify(result(), null, 2)}</pre>
+              </div>
+            ) : null}
+
+            {/* Navigation */}
+            {() => submitStatus() !== 'success' ? (
+              <div style="display:flex;justify-content:space-between;margin-top:1rem">
+                <button
+                  type="button"
+                  class="btn-demo btn-demo--neutral"
+                  onclick={goBack}
+                  disabled={() => step() === 1}
+                >
+                  ← Back
+                </button>
+
+                {() => step() < TOTAL_STEPS ? (
+                  <button type="button" class="btn-demo btn-demo--purple" onclick={goNext}>
+                    Next →
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    class="btn-demo btn-demo--purple"
+                    onclick={handleSubmit}
+                    disabled={() => submitStatus() === 'submitting'}
+                  >
+                    {() => submitStatus() === 'submitting' ? '⏳ Submitting…' : '✓ Submit'}
+                  </button>
+                )}
+              </div>
+            ) : null}
+
+          </div>
+        </FormProvider>
+      )}
+    </div>
+  );
+}

package/src/showcase/home/home.syn

@@ -0,0 +1,22 @@
+/**
+ * Pulsar UI Showcase - Home Page
+ * Refactored version
+ */
+
+import { Counter } from '../../lab/counter.syn';
+import { PageHeader } from '../common/components/page-header.syn';
+
+export component HomePage() {
+  return (
+    <div>
+      <PageHeader 
+        title="Welcome to Synetics framework"
+        emoji="🏠"
+        color="#10b981"
+        description="A reactive UI framework with signal-based state management. Below is a live demo of basic reactivity features."
+      />
+      
+      <Counter id="home-counter" />
+    </div>
+  );
+}

package/src/showcase/http/components/abort-demo.syn

@@ -0,0 +1,87 @@
+/**
+ * Abort Demo
+ * Request cancelled when component unmounts mid-flight → AbortError in console
+ * Uses a slow endpoint (artificial 2s delay via query param) and toggleMount to force unmount
+ */
+
+import { createSignal, createHttpClient, useHttpGet, onCleanup, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+const slowClient = createHttpClient({
+  baseURL: 'https://jsonplaceholder.typicode.com',
+  timeout: 10_000,
+});
+
+export const AbortInner = () => {
+  // /posts?_delay=2000 is not a real JSONPlaceholder param but the request itself
+  // will be aborted before it completes when the parent unmounts.
+  const result = useHttpGet<unknown[]>(slowClient, '/posts');
+  result.execute();
+
+  onCleanup(() => {
+    console.log('[AbortDemo] component unmounted — request should be aborted');
+  });
+
+  return (
+    <div>
+      <Show when={result.loading()}>
+        <p class="status-loading">⏳ Request in-flight… unmount now to abort</p>
+      </Show>
+      <Show when={result.error()}>
+        <p class="status-fail">
+          {(result.error() as any)?.name === 'AbortError'
+            ? '✅ AbortError — request was correctly cancelled on unmount'
+            : `❌ ${result.error()?.message}`}
+        </p>
+      </Show>
+      <Show when={result.data()}>
+        <p class="status-ok">✅ Completed (unmount was too slow) — {(result.data() as unknown[])?.length} items</p>
+      </Show>
+    </div>
+  );
+};
+
+export component AbortDemo() {
+  const [mounted, setMounted] = createSignal(false);
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">4️⃣ Abort on Unmount</h3>
+      <p class="demo-desc">
+        Mount the inner component to start a request. Unmount before it resolves.
+        <code>AbortError</code> in the console confirms the request was cancelled — no
+        state-update-after-unmount warning.
+      </p>
+
+      <div style="display: flex; gap: 10px; margin-bottom: 12px;">
+        <button
+          class="submit-btn"
+          onClick={() => setMounted(true)}
+          disabled={mounted()}
+        >
+          🟢 Mount + Start Request
+        </button>
+        <button
+          class="submit-btn"
+          onClick={() => setMounted(false)}
+          disabled={!mounted()}
+          style="background: #7f1d1d;"
+        >
+          🔴 Unmount (Abort)
+        </button>
+      </div>
+
+      <div class="state-panel" style="min-height: 60px;">
+        <Show when={!mounted()}>
+          <p style="color: #4b5563; font-size: 13px;">Component is unmounted.</p>
+        </Show>
+        <Show when={mounted()}>
+          <AbortInner />
+        </Show>
+      </div>
+
+      <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+        Check DevTools console for the <code>AbortError</code> log.
+      </p>
+    </div>
+  );
+}

package/src/showcase/http/components/basic-requests-demo.syn

@@ -0,0 +1,88 @@
+/**
+ * Basic Requests Demo
+ * useHttpGet / useHttpPost against JSONPlaceholder — real network, no mocking
+ * B-02 resolved: createHttpClient at module scope, passed as first arg to hooks
+ */
+
+import { createSignal, createHttpClient, useHttpGet, useHttpPost, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+const client = createHttpClient({ baseURL: 'https://jsonplaceholder.typicode.com' });
+
+interface IPost { id: number; title: string; body: string; userId: number }
+interface IUser { id: number; name: string; email: string; username: string }
+
+export component BasicRequestsDemo() {
+  // GET /posts/1
+  const post = useHttpGet<IPost>(client, '/posts/1');
+  post.execute();
+
+  // GET /users/1
+  const user = useHttpGet<IUser>(client, '/users/1');
+  user.execute();
+
+  // POST /posts (JSONPlaceholder echoes back the body with a fake id)
+  const [postTriggered, setPostTriggered] = createSignal(false);
+  const newPost = useHttpPost<IPost>(client, '/posts', {
+    body: { title: 'Harness Test', body: 'P1-02 coverage', userId: 1 },
+  });
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">1️⃣ GET + POST — JSONPlaceholder</h3>
+      <p class="demo-desc">
+        <code>createHttpClient({'{ baseURL }'})</code> at module scope.
+        <code>useHttpGet(client, path)</code> / <code>useHttpPost(client, path, config)</code>.<br />
+        Real network — no mocking.
+      </p>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
+        <div class="state-panel">
+          <strong style="color: #60a5fa;">GET /posts/1</strong>
+          <Show when={post.loading()}>
+            <p class="status-loading">⏳ loading…</p>
+          </Show>
+          <Show when={post.error()}>
+            <p class="status-fail">❌ {String(post.error()?.message)}</p>
+          </Show>
+          <Show when={post.data()}>
+            <pre class="result-pre">{JSON.stringify(post.data(), null, 2)}</pre>
+          </Show>
+        </div>
+
+        <div class="state-panel">
+          <strong style="color: #34d399;">GET /users/1</strong>
+          <Show when={user.loading()}>
+            <p class="status-loading">⏳ loading…</p>
+          </Show>
+          <Show when={user.error()}>
+            <p class="status-fail">❌ {String(user.error()?.message)}</p>
+          </Show>
+          <Show when={user.data()}>
+            <pre class="result-pre">{JSON.stringify({ name: user.data()?.name, email: user.data()?.email }, null, 2)}</pre>
+          </Show>
+        </div>
+      </div>
+
+      <div class="state-panel">
+        <strong style="color: #f59e0b;">POST /posts</strong>
+        <button
+          class="submit-btn"
+          onClick={() => { if (!postTriggered()) { setPostTriggered(true); newPost.execute(); } }}
+          disabled={postTriggered()}
+          style="margin-bottom: 8px;"
+        >
+          {postTriggered() ? '📤 Sent' : '📤 Send POST'}
+        </button>
+        <Show when={newPost.loading()}>
+          <p class="status-loading">⏳ posting…</p>
+        </Show>
+        <Show when={newPost.error()}>
+          <p class="status-fail">❌ {String(newPost.error()?.message)}</p>
+        </Show>
+        <Show when={newPost.data()}>
+          <pre class="result-pre">{JSON.stringify(newPost.data(), null, 2)}</pre>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/showcase/http/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * HTTP Components Index
+ */
+
+export { AbortDemo } from './abort-demo.syn';
+export { BasicRequestsDemo } from './basic-requests-demo.syn';
+export { InterceptorsDemo } from './interceptors-demo.syn';
+export { RetryDemo } from './retry-demo.syn';

package/src/showcase/http/components/interceptors-demo.syn

@@ -0,0 +1,90 @@
+/**
+ * Interceptors Demo
+ * RequestInterceptor → inject auth header
+ * ResponseInterceptor → log latency
+ * ErrorInterceptor → catch 4xx / 5xx globally
+ */
+
+import { createSignal, createHttpClient, useHttpGet, ShowRegistry as Show } from '@synetics/synetics.dev';
+import type { RequestInterceptor, ResponseInterceptor, ErrorInterceptor } from '@synetics/synetics.dev';
+
+interface IRequestLog { type: 'req' | 'res' | 'err'; message: string; ts: string }
+
+const buildInterceptedClient = (addLog: (l: IRequestLog) => void) => {
+  const onRequest: RequestInterceptor = (config) => {
+    addLog({ type: 'req', message: `→ ${config.method ?? 'GET'} ${config.url}  [Authorization: Bearer demo-token]`, ts: ts() });
+    return { ...config, headers: { ...(config.headers ?? {}), Authorization: 'Bearer demo-token' } };
+  };
+
+  const onResponse: ResponseInterceptor = (response) => {
+    addLog({ type: 'res', message: `← ${response.status} ${response.config?.url}`, ts: ts() });
+    return response;
+  };
+
+  const onError: ErrorInterceptor = (error) => {
+    addLog({ type: 'err', message: `💥 ${error.message}`, ts: ts() });
+    return Promise.reject(error);
+  };
+
+  return createHttpClient({
+    baseURL: 'https://jsonplaceholder.typicode.com',
+    interceptors: { request: [onRequest], response: [onResponse], error: [onError] },
+  });
+};
+
+const ts = () => new Date().toLocaleTimeString('en-US', { hour12: false });
+
+export component InterceptorsDemo() {
+  const [logs, setLogs] = createSignal<IRequestLog[]>([]);
+  const addLog = (l: IRequestLog) => setLogs((prev) => [l, ...prev].slice(0, 12));
+
+  const client = buildInterceptedClient(addLog);
+  const todos = useHttpGet<{ id: number; title: string; completed: boolean }[]>(client, '/todos?_limit=3');
+
+  todos.execute();
+
+  const logColor = (type: IRequestLog['type']) => {
+    if (type === 'req') return '#60a5fa';
+    if (type === 'res') return '#34d399';
+    return '#f87171';
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">2️⃣ Request / Response / Error Interceptors</h3>
+      <p class="demo-desc">
+        Interceptor chain: <code>RequestInterceptor</code> injects <code>Authorization</code> header,
+        <code>ResponseInterceptor</code> logs latency, <code>ErrorInterceptor</code> catches failures.
+      </p>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+        <div>
+          <strong style="color: #94a3b8; font-size: 13px;">Response</strong>
+          <Show when={todos.loading()}>
+            <p class="status-loading">⏳ loading…</p>
+          </Show>
+          <Show when={todos.error()}>
+            <p class="status-fail">❌ {String(todos.error()?.message)}</p>
+          </Show>
+          <Show when={todos.data()}>
+            <pre class="result-pre">{JSON.stringify(todos.data()?.slice(0, 3), null, 2)}</pre>
+          </Show>
+        </div>
+
+        <div>
+          <strong style="color: #94a3b8; font-size: 13px;">Interceptor Log</strong>
+          <div style="background: #0f0f0f; border-radius: 4px; padding: 8px; max-height: 180px; overflow-y: auto; font-size: 11px; font-family: monospace;">
+            <Show when={logs().length === 0}>
+              <p style="color: #4b5563;">No events yet…</p>
+            </Show>
+            {logs().map((l) => (
+              <div style={`color: ${logColor(l.type)}; margin-bottom: 4px;`}>
+                <span style="color: #4b5563;">{l.ts} </span>{l.message}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/showcase/http/components/retry-demo.syn

@@ -0,0 +1,84 @@
+/**
+ * Retry Demo
+ * IRetryConfig — maxAttempts, backoff strategy
+ * Uses an intentionally failing endpoint to trigger retries
+ */
+
+import { createSignal, createHttpClient, useHttpGet, ShowRegistry as Show } from '@synetics/synetics.dev';
+import type { IRetryConfig } from '@synetics/synetics.dev';
+
+const retryConfig: IRetryConfig = {
+  maxAttempts: 3,
+  delay: 600,
+  backoff: 'exponential',
+  retryOn: [500, 503],
+};
+
+const goodClient = createHttpClient({ baseURL: 'https://jsonplaceholder.typicode.com' });
+
+export component RetryDemo() {
+  const [trigger, setTrigger] = createSignal(false);
+  const [attempt, setAttempt] = createSignal(0);
+
+  // Track attempt count via a request interceptor (added at component scope for demo log)
+  const retryClientWithLog = createHttpClient({
+    baseURL: 'https://jsonplaceholder.typicode.com',
+    retry: { ...retryConfig, retryOn: [404] },
+    interceptors: {
+      request: [(cfg) => { setAttempt((n) => n + 1); return cfg; }],
+    },
+  });
+
+  const failingResult = useHttpGet<unknown>(retryClientWithLog, '/does-not-exist');
+  const goodResult = useHttpGet<{ id: number; title: string }>(goodClient, '/posts/1');
+
+  goodResult.execute().catch(() => {});
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">3️⃣ Retry with Backoff</h3>
+      <p class="demo-desc">
+        <code>IRetryConfig {'{ maxAttempts: 3, delay: 600, backoff: "exponential", retryOn: [404] }'}</code>.
+        Each attempt logged. Good request shown alongside for contrast.
+      </p>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
+        <div class="state-panel">
+          <strong style="color: #f87171;">Failing request (404 → retry)</strong>
+          <p style="font-size: 12px; color: #697690; margin-bottom: 8px;">Attempt counter: {attempt()}</p>
+          <button
+            class="submit-btn"
+            onClick={() => { setAttempt(0); setTrigger(true); failingResult.execute().catch(() => {}); }}
+            style="margin-bottom: 8px;"
+          >
+            🔁 Trigger Retry
+          </button>
+          <Show when={failingResult.loading()}>
+            <p class="status-loading">⏳ attempt {attempt()} / 3…</p>
+          </Show>
+          <Show when={failingResult.error()}>
+            <p class="status-fail">❌ Exhausted after {attempt()} attempts: {failingResult.error()?.message}</p>
+          </Show>
+        </div>
+
+        <div class="state-panel">
+          <strong style="color: #34d399;">Successful request (no retry)</strong>
+          <Show when={goodResult.loading()}>
+            <p class="status-loading">⏳ loading…</p>
+          </Show>
+          <Show when={goodResult.error()}>
+            <p class="status-fail">❌ {String(goodResult.error()?.message)}</p>
+          </Show>
+          <Show when={goodResult.data()}>
+            <pre class="result-pre">{JSON.stringify(goodResult.data(), null, 2)}</pre>
+          </Show>
+        </div>
+      </div>
+
+      <div class="state-panel">
+        <strong style="color: #94a3b8; font-size: 12px;">Config</strong>
+        <pre class="result-pre" style="font-size: 11px;">{JSON.stringify(retryConfig, null, 2)}</pre>
+      </div>
+    </div>
+  );
+}