@vertz/create-vertz-app 0.2.18 → 0.2.19

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyJnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CA0NlD;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CASnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAWtC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAkIzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyJnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CA0NlD;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CASnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAWtC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA0IzC"}

package/dist/templates/index.js

@@ -751,6 +751,7 @@ export function homePageTemplate() {
   ListTransition,
   css,
   fadeOut,
+  form,
   globalCss,
   query,
   queryMatch,
@@ -772,9 +773,10 @@ void globalCss({
 const pageStyles = css({
   container: ['py:2', 'w:full'],
   heading: ['font:xl', 'font:bold', 'text:foreground', 'mb:4'],
-  form: ['flex', 'gap:2', 'mb:6'],
+  form: ['flex', 'gap:2', 'items:start', 'mb:6'],
+  inputWrap: ['flex-1'],
   input: [
-    'flex-1',
+    'w:full',
     'px:3',
     'py:2',
     'rounded:md',
@@ -783,12 +785,13 @@ const pageStyles = css({
     'bg:background',
     'text:foreground',
   ],
+  fieldError: ['text:destructive', 'font:xs', 'mt:1'],
   button: [
     'px:4',
     'py:2',
     'rounded:md',
-    'bg:primary.600',
-    'text:white',
+    'bg:primary',
+    'text:primary-foreground',
     'font:medium',
     'cursor:pointer',
   ],
@@ -812,31 +815,36 @@ const pageStyles = css({
 export function HomePage() {
   const tasksQuery = query(api.tasks.list());
 
-  const handleSubmit = async (e: SubmitEvent) => {
-    e.preventDefault();
-    const form = e.target as HTMLFormElement;
-    const data = new FormData(form);
-    const title = data.get('title') as string;
-    if (!title.trim()) return;
-
-    await api.tasks.create({ title });
-    form.reset();
-    tasksQuery.refetch();
-  };
+  const taskForm = form(api.tasks.create, {
+    resetOnSuccess: true,
+  });
 
   return (
     <div class={pageStyles.container} data-testid="home-page">
       <h1 class={pageStyles.heading}>Tasks</h1>
 
-      <form class={pageStyles.form} onSubmit={handleSubmit}>
-        <input
-          name="title"
-          class={pageStyles.input}
-          placeholder="What needs to be done?"
-          required
-        />
-        <button type="submit" class={pageStyles.button}>
-          Add
+      <form
+        class={pageStyles.form}
+        action={taskForm.action}
+        method={taskForm.method}
+        onSubmit={taskForm.onSubmit}
+      >
+        <div class={pageStyles.inputWrap}>
+          <input
+            name={taskForm.fields.title}
+            class={pageStyles.input}
+            placeholder="What needs to be done?"
+          />
+          <span class={pageStyles.fieldError}>
+            {taskForm.title.error}
+          </span>
+        </div>
+        <button
+          type="submit"
+          class={pageStyles.button}
+          disabled={taskForm.submitting}
+        >
+          {taskForm.submitting.value ? 'Adding...' : 'Add'}
         </button>
       </form>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/create-vertz-app",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "type": "module",
   "license": "MIT",
   "description": "Create a new Vertz application",