brizzle 0.2.8 → 0.2.9

package/README.md

@@ -181,6 +181,24 @@ Next steps:
 - Next.js project with App Router
 - Drizzle ORM configured
 
+## Roadmap
+
+- [ ] **Drizzle init** - `brizzle init` to set up Drizzle ORM, database config, and db connection
+- [ ] **Authentication** - `brizzle auth` to generate [better-auth](https://www.better-auth.com/) setup with user model and sign-in/sign-up pages
+- [ ] **Zod schemas** - Generate validation schemas for forms and API routes
+- [ ] **Indexes** - Support for `name:string:index` field modifier
+- [ ] **Default values** - Support for `status:string:default:active`
+- [ ] **Soft deletes** - Add `--soft-delete` flag for `deletedAt` timestamp
+- [ ] **Pagination** - Add pagination to list pages and API routes
+- [ ] **Search & filtering** - Generate search/filter UI for list pages
+- [ ] **Seed generator** - `brizzle seed <model>` to generate seed data files
+- [ ] **Relations helper** - Better syntax for has-many/belongs-to relationships
+- [ ] **Custom templates** - Allow overriding templates via `.brizzle/` directory
+- [ ] **Interactive mode** - `brizzle new` wizard for step-by-step model creation
+- [ ] **Import cleanup** - Remove unused imports when destroying models
+
+Have a feature request? [Open an issue](https://github.com/mantaskaveckas/brizzle/issues)
+
 ## License
 
 MIT

package/dist/index.js

@@ -945,31 +945,31 @@ export default async function ${pascalPlural}Page() {
   return (
     <div className="mx-auto max-w-3xl px-6 py-12">
       <div className="mb-10 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-gray-900">${pascalPlural}</h1>
+        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">${pascalPlural}</h1>
         <Link
           href="/${kebabPlural}/new"
-          className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800"
+          className="flex h-10 items-center rounded-full bg-zinc-900 px-4 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
         >
           New ${pascalName}
         </Link>
       </div>
 
       {${camelName}s.length === 0 ? (
-        <p className="text-gray-500">No ${camelName}s yet.</p>
+        <p className="text-zinc-500 dark:text-zinc-400">No ${camelName}s yet.</p>
       ) : (
-        <div className="divide-y divide-gray-100">
+        <div className="divide-y divide-zinc-100 dark:divide-zinc-800">
           {${camelName}s.map((${camelName}) => (
             <div
               key={${camelName}.id}
               className="flex items-center justify-between py-4"
             >
-              <Link href={\`/${kebabPlural}/\${${camelName}.id}\`} className="font-medium text-gray-900 hover:text-gray-600">
+              <Link href={\`/${kebabPlural}/\${${camelName}.id}\`} className="font-medium text-zinc-900 hover:text-zinc-600 dark:text-zinc-50 dark:hover:text-zinc-300">
                 {${camelName}.${displayField}}
               </Link>
               <div className="flex gap-4 text-sm">
                 <Link
                   href={\`/${kebabPlural}/\${${camelName}.id}/edit\`}
-                  className="text-gray-500 hover:text-gray-900"
+                  className="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
                 >
                   Edit
                 </Link>
@@ -979,7 +979,7 @@ export default async function ${pascalPlural}Page() {
                     await delete${pascalName}(${camelName}.id);
                   }}
                 >
-                  <button type="submit" className="text-gray-500 hover:text-red-600">
+                  <button type="submit" className="text-zinc-500 hover:text-red-600 dark:text-zinc-400 dark:hover:text-red-400">
                     Delete
                   </button>
                 </form>
@@ -1011,7 +1011,7 @@ ${fields.map((f) => `      ${f.name}: ${formDataValue(f)},`).join("\n")}
 
   return (
     <div className="mx-auto max-w-xl px-6 py-12">
-      <h1 className="mb-8 text-2xl font-semibold text-gray-900">New ${pascalName}</h1>
+      <h1 className="mb-8 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">New ${pascalName}</h1>
 
       <form action={handleCreate} className="space-y-5">
 ${fields.map((f) => generateFormField(f, camelName)).join("\n\n")}
@@ -1019,13 +1019,13 @@ ${fields.map((f) => generateFormField(f, camelName)).join("\n\n")}
         <div className="flex gap-3 pt-4">
           <button
             type="submit"
-            className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800"
+            className="flex h-10 items-center rounded-full bg-zinc-900 px-4 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
           >
             Create ${pascalName}
           </button>
           <Link
             href="/${kebabPlural}"
-            className="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50"
+            className="flex h-10 items-center rounded-full border border-zinc-200 px-4 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
           >
             Cancel
           </Link>
@@ -1063,33 +1063,33 @@ export default async function ${pascalName}Page({
   return (
     <div className="mx-auto max-w-xl px-6 py-12">
       <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-gray-900">${pascalName}</h1>
+        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">${pascalName}</h1>
         <div className="flex gap-3">
           <Link
             href={\`/${kebabPlural}/\${${camelName}.id}/edit\`}
-            className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800"
+            className="flex h-10 items-center rounded-full bg-zinc-900 px-4 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
           >
             Edit
           </Link>
           <Link
             href="/${kebabPlural}"
-            className="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50"
+            className="flex h-10 items-center rounded-full border border-zinc-200 px-4 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
           >
             Back
           </Link>
         </div>
       </div>
 
-      <dl className="divide-y divide-gray-100">
+      <dl className="divide-y divide-zinc-100 dark:divide-zinc-800">
 ${fields.map(
     (f) => `        <div className="py-3">
-          <dt className="text-sm text-gray-500">${toPascalCase(f.name)}</dt>
-          <dd className="mt-1 text-gray-900">{${camelName}.${f.name}}</dd>
+          <dt className="text-sm text-zinc-500 dark:text-zinc-400">${toPascalCase(f.name)}</dt>
+          <dd className="mt-1 text-zinc-900 dark:text-zinc-50">{${camelName}.${f.name}}</dd>
         </div>`
   ).join("\n")}${options.noTimestamps ? "" : `
         <div className="py-3">
-          <dt className="text-sm text-gray-500">Created At</dt>
-          <dd className="mt-1 text-gray-900">{${camelName}.createdAt.toLocaleString()}</dd>
+          <dt className="text-sm text-zinc-500 dark:text-zinc-400">Created At</dt>
+          <dd className="mt-1 text-zinc-900 dark:text-zinc-50">{${camelName}.createdAt.toLocaleString()}</dd>
         </div>`}
       </dl>
     </div>
@@ -1134,7 +1134,7 @@ ${fields.map((f) => `      ${f.name}: ${formDataValue(f)},`).join("\n")}
 
   return (
     <div className="mx-auto max-w-xl px-6 py-12">
-      <h1 className="mb-8 text-2xl font-semibold text-gray-900">Edit ${pascalName}</h1>
+      <h1 className="mb-8 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">Edit ${pascalName}</h1>
 
       <form action={handleUpdate} className="space-y-5">
 ${fields.map((f) => generateFormField(f, camelName, true)).join("\n\n")}
@@ -1142,13 +1142,13 @@ ${fields.map((f) => generateFormField(f, camelName, true)).join("\n\n")}
         <div className="flex gap-3 pt-4">
           <button
             type="submit"
-            className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800"
+            className="flex h-10 items-center rounded-full bg-zinc-900 px-4 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
           >
             Update ${pascalName}
           </button>
           <Link
             href="/${kebabPlural}"
-            className="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50"
+            className="flex h-10 items-center rounded-full border border-zinc-200 px-4 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
           >
             Cancel
           </Link>
@@ -1163,7 +1163,7 @@ function createFieldContext(field, camelName, withDefault) {
   return {
     field,
     label: toPascalCase(field.name),
-    optionalLabel: field.nullable ? ` <span className="text-gray-400">(optional)</span>` : "",
+    optionalLabel: field.nullable ? ` <span className="text-zinc-400 dark:text-zinc-500">(optional)</span>` : "",
     required: field.nullable ? "" : " required",
     defaultValue: withDefault ? ` defaultValue={${camelName}.${field.name}}` : ""
   };
@@ -1173,14 +1173,14 @@ function generateTextareaField(ctx) {
   const rows = field.type === "json" ? 6 : 4;
   const placeholder = field.type === "json" ? ` placeholder="{}"` : "";
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <textarea
             id="${field.name}"
             name="${field.name}"
             rows={${rows}}
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 placeholder:text-gray-400 focus:border-gray-400 focus:outline-none focus:ring-0 resize-none"${defaultValue}${placeholder}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500 resize-none"${defaultValue}${placeholder}${required}
           />
         </div>`;
 }
@@ -1192,9 +1192,9 @@ function generateCheckboxField(ctx, camelName, withDefault) {
             type="checkbox"
             id="${field.name}"
             name="${field.name}"
-            className="h-4 w-4 rounded border-gray-300 text-gray-900 focus:ring-0 focus:ring-offset-0"${defaultChecked}
+            className="h-4 w-4 rounded border-zinc-300 text-zinc-900 focus:ring-0 focus:ring-offset-0 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-50"${defaultChecked}
           />
-          <label htmlFor="${field.name}" className="text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}
           </label>
         </div>`;
@@ -1204,14 +1204,14 @@ function generateNumberField(ctx, step) {
   const stepAttr = step ? `
             step="${step}"` : "";
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <input
             type="number"${stepAttr}
             id="${field.name}"
             name="${field.name}"
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 placeholder:text-gray-400 focus:border-gray-400 focus:outline-none focus:ring-0"${defaultValue}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500"${defaultValue}${required}
           />
         </div>`;
 }
@@ -1219,14 +1219,14 @@ function generateDateField(ctx, camelName, withDefault) {
   const { field, label, optionalLabel, required } = ctx;
   const dateDefault = withDefault ? ` defaultValue={${camelName}.${field.name}?.toISOString().split("T")[0]}` : "";
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <input
             type="date"
             id="${field.name}"
             name="${field.name}"
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 placeholder:text-gray-400 focus:border-gray-400 focus:outline-none focus:ring-0"${dateDefault}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500"${dateDefault}${required}
           />
         </div>`;
 }
@@ -1234,14 +1234,14 @@ function generateDatetimeField(ctx, camelName, withDefault) {
   const { field, label, optionalLabel, required } = ctx;
   const dateDefault = withDefault ? ` defaultValue={${camelName}.${field.name}?.toISOString().slice(0, 16)}` : "";
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <input
             type="datetime-local"
             id="${field.name}"
             name="${field.name}"
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 placeholder:text-gray-400 focus:border-gray-400 focus:outline-none focus:ring-0"${dateDefault}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500"${dateDefault}${required}
           />
         </div>`;
 }
@@ -1249,13 +1249,13 @@ function generateSelectField(ctx) {
   const { field, label, optionalLabel, required, defaultValue } = ctx;
   const options = field.enumValues.map((v) => `            <option value="${escapeString(v)}">${toPascalCase(v)}</option>`).join("\n");
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <select
             id="${field.name}"
             name="${field.name}"
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 focus:border-gray-400 focus:outline-none focus:ring-0"${defaultValue}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:focus:border-zinc-500"${defaultValue}${required}
           >
 ${options}
           </select>
@@ -1264,14 +1264,14 @@ ${options}
 function generateTextField(ctx) {
   const { field, label, optionalLabel, required, defaultValue } = ctx;
   return `        <div>
-          <label htmlFor="${field.name}" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="${field.name}" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
             ${label}${optionalLabel}
           </label>
           <input
             type="text"
             id="${field.name}"
             name="${field.name}"
-            className="mt-1.5 block w-full rounded-lg border border-gray-200 px-3 py-2 text-gray-900 placeholder:text-gray-400 focus:border-gray-400 focus:outline-none focus:ring-0"${defaultValue}${required}
+            className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500"${defaultValue}${required}
           />
         </div>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brizzle",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Rails-like generators for Next.js + Drizzle ORM projects",
   "type": "module",
   "bin": {