@uidu/skills 0.2.0

package/skills/uidu-workspace/iteration-2/eval-6-forms-contact/with_skill/outputs/ContactForm.tsx

@@ -0,0 +1,277 @@
+// src/components/ContactForm.tsx
+'use client';
+
+import { useState } from 'react';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { createFormResponse, type Form } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+
+type FormQuestion = NonNullable<
+  NonNullable<Form['inputs']['edges']>[number]
+>['node'];
+
+type FieldOption = NonNullable<
+  NonNullable<NonNullable<FormQuestion>['field']>['options']
+>[number];
+
+interface ContactFormProps {
+  form: Form;
+}
+
+interface ContactFormValues {
+  __firstName: string;
+  __lastName: string;
+  __email: string;
+  // Per-question answers, keyed by question id.
+  [questionId: string]: string;
+}
+
+function inputTypeFor(question: NonNullable<FormQuestion>): string {
+  const kind = (question.fieldKind ?? '').toLowerCase();
+  switch (kind) {
+    case 'email':
+      return 'email';
+    case 'number':
+    case 'integer':
+      return 'number';
+    case 'date':
+      return 'date';
+    case 'datetime':
+    case 'datetime-local':
+      return 'datetime-local';
+    case 'tel':
+    case 'phone':
+      return 'tel';
+    case 'url':
+      return 'url';
+    default:
+      return 'text';
+  }
+}
+
+function isTextarea(question: NonNullable<FormQuestion>): boolean {
+  const kind = (question.fieldKind ?? '').toLowerCase();
+  return kind === 'textarea' || kind === 'longtext' || kind === 'multiline';
+}
+
+export function ContactForm({ form }: ContactFormProps) {
+  const [submitted, setSubmitted] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<ContactFormValues>();
+
+  // Visible, user-editable questions, ordered by `position`.
+  const questions = (form.inputs.edges ?? [])
+    .map((edge) => edge?.node)
+    .filter((q): q is NonNullable<FormQuestion> => Boolean(q))
+    .filter((q) => q.field.type !== 'system' && !q.hidden)
+    .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+
+  const onSubmit: SubmitHandler<ContactFormValues> = async (values) => {
+    setServerError(null);
+
+    const fieldValues = questions.map((q) => ({
+      fieldId: q.field.id,
+      questionId: q.id,
+      value: String(values[q.id] ?? ''),
+    }));
+
+    try {
+      const result = await createFormResponse(uidu, {
+        input: {
+          formId: form.id,
+          contact: {
+            firstName: values.__firstName,
+            lastName: values.__lastName,
+            email: values.__email,
+          },
+          fieldValues,
+        },
+      });
+
+      if (result && result.errors && result.errors.length > 0) {
+        setServerError(
+          result.errors
+            .map((e) => `${e.key ?? ''} ${e.name ?? ''}`.trim())
+            .filter(Boolean)
+            .join(', ') || 'Submission failed.',
+        );
+        return;
+      }
+
+      setSubmitted(true);
+      reset();
+    } catch (err) {
+      setServerError(
+        err instanceof Error ? err.message : 'Something went wrong.',
+      );
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="rounded-lg bg-green-50 p-6 text-green-900">
+        <p className="font-semibold">Thanks!</p>
+        <p className="mt-1 text-sm">
+          Your message has been received. We&apos;ll be in touch soon.
+        </p>
+      </div>
+    );
+  }
+
+  const labelCls = 'mb-1 block text-sm font-medium';
+  const inputCls =
+    'w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-xs outline-none transition focus:border-slate-400 focus:ring-1 focus:ring-slate-200';
+  const errorCls = 'mt-1 text-xs text-red-600';
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div>
+          <label htmlFor="__firstName" className={labelCls}>
+            First name <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="__firstName"
+            type="text"
+            className={inputCls}
+            {...register('__firstName', { required: 'First name is required' })}
+          />
+          {errors.__firstName && (
+            <p className={errorCls}>{errors.__firstName.message}</p>
+          )}
+        </div>
+        <div>
+          <label htmlFor="__lastName" className={labelCls}>
+            Last name
+          </label>
+          <input
+            id="__lastName"
+            type="text"
+            className={inputCls}
+            {...register('__lastName')}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="__email" className={labelCls}>
+          Email <span className="text-red-500">*</span>
+        </label>
+        <input
+          id="__email"
+          type="email"
+          className={inputCls}
+          {...register('__email', {
+            required: 'Email is required',
+            pattern: {
+              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+              message: 'Enter a valid email address',
+            },
+          })}
+        />
+        {errors.__email && (
+          <p className={errorCls}>{errors.__email.message}</p>
+        )}
+      </div>
+
+      {questions.map((q) => {
+        const label = String(q.label ?? '');
+        const required = q.required ?? false;
+        const options = q.field.options ?? [];
+        const validation = required ? { required: `${label} is required` } : {};
+        const fieldError = errors[q.id];
+
+        if (options.length > 0) {
+          return (
+            <div key={q.id}>
+              <label htmlFor={q.id} className={labelCls}>
+                {label}
+                {required && <span className="ml-1 text-red-500">*</span>}
+              </label>
+              <select
+                id={q.id}
+                className={inputCls}
+                defaultValue=""
+                {...register(q.id, validation)}
+              >
+                <option value="" disabled>
+                  {q.placeholder || 'Choose an option…'}
+                </option>
+                {options.map((opt: FieldOption) => (
+                  <option key={opt.id} value={opt.id}>
+                    {opt.name}
+                  </option>
+                ))}
+              </select>
+              {q.hint && <p className="mt-1 text-xs text-slate-500">{q.hint}</p>}
+              {fieldError && (
+                <p className={errorCls}>{String(fieldError.message)}</p>
+              )}
+            </div>
+          );
+        }
+
+        if (isTextarea(q)) {
+          return (
+            <div key={q.id}>
+              <label htmlFor={q.id} className={labelCls}>
+                {label}
+                {required && <span className="ml-1 text-red-500">*</span>}
+              </label>
+              <textarea
+                id={q.id}
+                placeholder={q.placeholder ?? ''}
+                className={`${inputCls} min-h-[120px]`}
+                {...register(q.id, validation)}
+              />
+              {q.hint && <p className="mt-1 text-xs text-slate-500">{q.hint}</p>}
+              {fieldError && (
+                <p className={errorCls}>{String(fieldError.message)}</p>
+              )}
+            </div>
+          );
+        }
+
+        return (
+          <div key={q.id}>
+            <label htmlFor={q.id} className={labelCls}>
+              {label}
+              {required && <span className="ml-1 text-red-500">*</span>}
+            </label>
+            <input
+              id={q.id}
+              type={inputTypeFor(q)}
+              placeholder={q.placeholder ?? ''}
+              className={inputCls}
+              {...register(q.id, validation)}
+            />
+            {q.hint && <p className="mt-1 text-xs text-slate-500">{q.hint}</p>}
+            {fieldError && (
+              <p className={errorCls}>{String(fieldError.message)}</p>
+            )}
+          </div>
+        );
+      })}
+
+      {serverError && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">
+          {serverError}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="inline-flex w-full items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-xs transition hover:bg-slate-800 disabled:opacity-50"
+      >
+        {isSubmitting ? 'Sending…' : 'Send message'}
+      </button>
+    </form>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-6-forms-contact/with_skill/outputs/page.tsx

@@ -0,0 +1,48 @@
+// src/app/contact/page.tsx
+import { getForm } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+import { ContactForm } from '@/components/ContactForm';
+
+export default async function ContactPage() {
+  const formId = process.env.UIDU_CONTACT_FORM_ID;
+
+  if (!formId) {
+    return (
+      <main className="mx-auto max-w-2xl px-6 py-16">
+        <h1 className="text-3xl font-semibold tracking-tight">Contact</h1>
+        <p className="mt-4 text-sm text-slate-600">
+          Set <code className="rounded bg-slate-100 px-1.5 py-0.5">UIDU_CONTACT_FORM_ID</code>{' '}
+          in your environment to enable the contact form.
+        </p>
+      </main>
+    );
+  }
+
+  const form = await getForm(uidu, { id: formId });
+
+  if (!form) {
+    return (
+      <main className="mx-auto max-w-2xl px-6 py-16">
+        <h1 className="text-3xl font-semibold tracking-tight">Contact</h1>
+        <p className="mt-4 text-sm text-slate-600">
+          Form not found. Check that <code>UIDU_CONTACT_FORM_ID</code> is correct.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-16">
+      <header className="mb-8">
+        <h1 className="text-3xl font-semibold tracking-tight">
+          {form.name ?? 'Get in touch'}
+        </h1>
+        {form.description && (
+          <p className="mt-2 text-sm text-slate-600">{form.description}</p>
+        )}
+      </header>
+
+      <ContactForm form={form} />
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-6-forms-contact/without_skill/outputs/ContactForm.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useForm as useUiduForm } from '@uidu/react/apps/forms';
+import { useForm } from 'react-hook-form';
+import { useState } from 'react';
+import type { Form } from '@uidu/client/forms';
+
+type ContactFormProps = {
+  form: Form;
+};
+
+type FormValues = Record<string, string>;
+
+export function ContactForm({ form }: ContactFormProps) {
+  const { handleSubmit: submitToUidu } = useUiduForm({ form });
+  const [submitState, setSubmitState] = useState<
+    { status: 'idle' } | { status: 'success' } | { status: 'error'; message: string }
+  >({ status: 'idle' });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<FormValues>();
+
+  const questions =
+    form.formQuestions?.edges?.map((edge) => edge.node).filter(Boolean) ?? [];
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      await submitToUidu(values);
+      setSubmitState({ status: 'success' });
+      reset();
+    } catch (err) {
+      setSubmitState({
+        status: 'error',
+        message: err instanceof Error ? err.message : 'Submission failed',
+      });
+    }
+  };
+
+  if (submitState.status === 'success') {
+    return (
+      <div
+        role="status"
+        className="rounded-lg border border-green-200 bg-green-50 p-6 text-green-900"
+      >
+        <h2 className="text-lg font-semibold">Thanks for reaching out!</h2>
+        <p className="mt-1 text-sm">
+          We&rsquo;ve received your message and will be in touch soon.
+        </p>
+        <button
+          type="button"
+          onClick={() => setSubmitState({ status: 'idle' })}
+          className="mt-4 text-sm font-medium underline"
+        >
+          Send another message
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6" noValidate>
+      {questions.map((question) => {
+        const field = question.field;
+        const shortname = field?.shortname ?? question.id;
+        const label = field?.name ?? question.name ?? shortname;
+        const required = question.required ?? false;
+        const kind = field?.kind ?? 'string';
+
+        const registration = register(shortname, {
+          required: required ? `${label} is required` : false,
+        });
+
+        const baseProps = {
+          id: shortname,
+          'aria-invalid': errors[shortname] ? true : undefined,
+          className:
+            'w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring',
+        };
+
+        return (
+          <div key={question.id} className="space-y-2">
+            <label
+              htmlFor={shortname}
+              className="block text-sm font-medium text-foreground"
+            >
+              {label}
+              {required ? <span className="ml-1 text-red-500">*</span> : null}
+            </label>
+
+            {kind === 'text' ? (
+              <textarea
+                {...baseProps}
+                {...registration}
+                rows={5}
+                placeholder={question.placeholder ?? ''}
+              />
+            ) : kind === 'email' ? (
+              <input
+                {...baseProps}
+                {...registration}
+                type="email"
+                placeholder={question.placeholder ?? ''}
+              />
+            ) : (
+              <input
+                {...baseProps}
+                {...registration}
+                type="text"
+                placeholder={question.placeholder ?? ''}
+              />
+            )}
+
+            {errors[shortname] ? (
+              <p className="text-sm text-red-600" role="alert">
+                {errors[shortname]?.message as string}
+              </p>
+            ) : null}
+          </div>
+        );
+      })}
+
+      {submitState.status === 'error' ? (
+        <div
+          role="alert"
+          className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-900"
+        >
+          {submitState.message}
+        </div>
+      ) : null}
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:opacity-50"
+      >
+        {isSubmitting ? 'Sending…' : 'Send message'}
+      </button>
+    </form>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-6-forms-contact/without_skill/outputs/page.tsx

@@ -0,0 +1,45 @@
+import { getForm } from '@uidu/client/forms';
+import { ContactForm } from '@/components/ContactForm';
+
+export default async function ContactPage() {
+  const formId = process.env.UIDU_CONTACT_FORM_ID;
+
+  if (!formId) {
+    throw new Error('UIDU_CONTACT_FORM_ID environment variable is not set');
+  }
+
+  const endpoint = process.env.UIDU_GRAPHQL_ENDPOINT ?? 'https://uidu.org/graphql';
+  const projectId = process.env.UIDU_PROJECT_ID;
+
+  const form = await getForm({
+    endpoint,
+    projectId,
+    id: formId,
+  });
+
+  if (!form) {
+    return (
+      <main className="container mx-auto py-12">
+        <h1 className="text-3xl font-bold">Contact</h1>
+        <p className="text-muted-foreground mt-4">
+          The contact form is currently unavailable. Please try again later.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="container mx-auto py-12 max-w-2xl">
+      <header className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">
+          {form.name ?? 'Contact us'}
+        </h1>
+        {form.description ? (
+          <p className="text-muted-foreground mt-2">{form.description}</p>
+        ) : null}
+      </header>
+
+      <ContactForm form={form} />
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-7-routing-gotcha/with_skill/outputs/answer.md

@@ -0,0 +1,63 @@
+# Diagnosis: Root-level `/[id]` is catching static asset requests
+
+## What's actually going on
+
+Your detail page lives at `src/app/[id]/page.tsx`, which makes `[id]` a **root-level dynamic segment**. In the Next.js App Router, that segment matches *any* single-segment path at the root — including paths the browser asks for that have nothing to do with your stories.
+
+When a browser loads any page, it automatically requests static assets at well-known root paths:
+
+- `/favicon.ico`
+- `/robots.txt`
+- `/sitemap.xml`
+- `/apple-touch-icon.png`
+- `/manifest.json`
+- assorted Chrome/Apple/Android icon probes
+
+If you don't have a real file for one of these (e.g. no `app/favicon.ico`, no `app/robots.txt`), Next.js falls through to your dynamic route. Your page component then runs with `params.id = 'favicon.ico'` and calls `getStory(uidu, { id: 'favicon.ico' })`. The uidu API has no story with that id, so it logs a GraphQL error. Same story for `/robots.txt`, `/sitemap.xml`, etc.
+
+This is purely a **routing collision**, not a bug in `@uidu/client` or in your fetch logic. The fetch is behaving correctly — it's being asked for ids that don't exist because the URL was never meant to hit your route in the first place.
+
+## The fix: nest detail routes under a scope path
+
+Move the dynamic segment one level deeper so it can never collide with root-level asset requests. The convention used by every `create-uidu-app` template is `/<scope>/[id]`:
+
+```
+src/app/
+├── layout.tsx
+├── page.tsx              # listing at /
+└── story/
+    └── [id]/
+        └── page.tsx      # detail at /story/<id>
+```
+
+After the move:
+
+- `/` → your listing page
+- `/story/abc123` → your detail page
+- `/favicon.ico`, `/robots.txt`, `/sitemap.xml` → no longer match any route, Next.js returns a normal 404 for the asset, and **your `getStory` is never called with garbage ids**
+
+Update any links accordingly:
+
+```tsx
+<Link href={`/story/${story.id}`}>{story.name}</Link>
+```
+
+## Optional hardening
+
+Even after the move, it's worth:
+
+1. **Providing real assets** — drop a `favicon.ico` into `src/app/` and a `robots.txt` / `sitemap.ts` so browsers and crawlers get a real response instead of a 404.
+2. **Guarding the detail page** — `getStory` returns `null` for unknown ids, so call `notFound()` from `next/navigation` when the result is null. That way any future routing surprise produces a clean 404 instead of a noisy error.
+
+```tsx
+import { notFound } from 'next/navigation';
+import { getStory } from '@uidu/client';
+
+export default async function StoryPage({ params }: { params: { id: string } }) {
+  const story = await getStory(uidu, { id: params.id });
+  if (!story) notFound();
+  // ...
+}
+```
+
+The structural change (nesting under `/story/[id]`) is the actual fix; the guard is defense in depth.