auto-thing-zod

A powerful, customizable React component library for quickly creating CRUD interfaces with automatic Zod schema integration.

Features

• 🚀 Zero Config CRUD: Auto-generate full CRUD interfaces from your Zod schemas
• 🔍 Search and Filtering: Built-in search functionality with custom filters
• 📱 Responsive: Mobile-friendly interfaces out of the box
• 🎨 Customizable: Override any component with your own implementation
• 🛠️ tRPC Integration: Seamless integration with tRPC for type-safe API routes
• 📊 Data Tables: Advanced tables with sorting, pagination, and more

Installation

npm install auto-thing-zod zod-auto-form raw-auto-table-zod zod-helper
# or
yarn add auto-thing-zod zod-auto-form raw-auto-table-zod zod-helper
# or
pnpm add auto-thing-zod zod-auto-form raw-auto-table-zod zod-helper

Default Components

You can quickly get started with the default shadcn/ui components:

Auto Thing Components

# Using npm
npx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-thing-component.json

# Using pnpm
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-thing-component.json

# Using Bun
bunx --bun shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-thing-component.json

Auto Form Components

# Using npm
npx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

# Using pnpm
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

# Using Bun
bunx --bun shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

Auto Table Components

# Using npm
npx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-table-component.json

# Using pnpm
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-table-component.json

# Using Bun
bunx --bun shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-table-component.json

Quick Start

import { AutoCrud } from "auto-thing-zod";
import { z } from "zod";
import { api } from "@/trpc/react"; // Your tRPC setup
import { toast } from "sonner"; // Or your preferred toast library

// Define your schema with Zod
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  // Add more fields as needed
});

function MyComponent() {
  return (
    <AutoCrud
      schema={userSchema}
      trpcApiRoutes={api.user}
      ToastFunction={(message, type) => {
        toast(message, { description: type });
      }}
    />
  );
}

Core Components

AutoCrud

The main component for generating complete CRUD interfaces:

<AutoCrud
  // Required props
  schema={zodSchema}
  trpcApiRoutes={api.post}
  ToastFunction={(message, type) => {
    toast(message, { description: type });
  }}
  
  // Optional configurations
  loadingType="row-based"
  sizeOfLoadingRows={10}
  hideSubmitButtonOfEditModal={false}
  hideCreateModalSubmitButton={false}
  disableCreateRow={false}
  disableEditRow={false}
  disableDeleteRow={false}
  disableViewRow={false}
  
  // Optional callbacks
  onDeleteSubmit={async (data) => {/* ... */}}
  onEditSubmit={async (data) => {/* ... */}}
  onCreateSubmit={async (data) => {/* ... */}}
  onRowClick={async (data) => {/* ... */}}
  
  // Optional custom schemas
  createSchema={customCreateSchema}
  
  // Optional UI customizations
  title="Users Table"
  description="Manage system users"
/>

AutoThingTable

Lower-level table component with more granular control:

<AutoThingTable
  data={users}
  schema={userSchema}
  isLoading={isLoading}
  currentPage={page}
  totalPage={totalPages}
  onPageChange={(newPage) => setPage(newPage)}
  canGoToNextPage={hasNextPage}
  canGoToPreviousPage={hasPrevPage}
  isActionColumnComponentEnabled={true}
  actionColumnComponent={({ row }) => (
    // Your custom action buttons
  )}
/>

Provider Setup

To use custom components, wrap your application with the necessary providers:

import { AutoFormComponentsProvider } from "zod-auto-form";
import { AutoTableComponentsProvider } from "raw-auto-table-zod";
import { AutoThingComponentsProvider } from "auto-thing-zod";
import componentRegistry from "@/components/ui/auto-form";
import AutoTableRegistryComponents from "@/components/ui/auto-table";

function App() {
  return (
    <AutoFormComponentsProvider components={componentRegistry}>
      <AutoTableComponentsProvider components={AutoTableRegistryComponents}>
        <AutoThingComponentsProvider
          components={{
            DeleteModal: CustomDeleteModal,
            EditModal: CustomEditModal,
            ViewModal: CustomViewModal,
            // ... other component overrides
          }}
        >
          {/* Your application */}
        </AutoThingComponentsProvider>
      </AutoTableComponentsProvider>
    </AutoFormComponentsProvider>
  );
}

tRPC Integration

Set up your tRPC router with the ZodPrismaClassed helper:

import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
import { db } from "@/server/db";
import { ZodPrismaClassed } from "zod-helper";

// Define your schema
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  // ...other fields
});

// Create ZodPrisma instance
const zodPrisma = new ZodPrismaClassed(userSchema);

// Generate CRUD routes
export const userRouter = zodPrisma.getCrudRoutesTRPC({
  createTRPCRouter,
  procedure: publicProcedure,
  delegate: db.user,
});

Customization

Custom Components

You can override any component by providing it through the AutoThingComponentsProvider:

<AutoThingComponentsProvider
  components={{
    DeleteModal: CustomDeleteModal,
    EditModal: CustomEditModal,
    ViewModal: CustomViewModal,
    ActionButtonWrapper: CustomActionButtonWrapper,
    ViewButtonDetails: CustomViewButtonDetails,
    EditButtonDetails: CustomEditButtonDetails,
    DeleteButtonDetails: CustomDeleteButtonDetails,
    TableWrapperCard: CustomTableWrapperCard,
    CreateModal: CustomCreateModal,
    SearchFilterWrapper: CustomSearchFilterWrapper,
  }}
>
  {/* ... */}
</AutoThingComponentsProvider>

Custom Route Handlers

You can replace the default API routes with your own implementations:

<AutoCrud
  // ...other props
  replaceRoutes={{
    create: api.customEntity.create,
    update: api.customEntity.update,
    delete: api.customEntity.delete,
    search: api.customEntity.search,
  }}
/>

Field Ordering

Change the order of fields in your forms and tables:

<AutoCrud
  // ...other props
  changePositionOfFields={{
    nested: {
      age: {
        position: 0,
      },
      name: {
        position: 1,
      },
    },
  }}
/>

Advanced Usage

Custom Search Parameters

Set default search parameters:

<AutoCrud
  // ...other props
  defaultSearchValues={{
    limit: 10,
    page: 1,
    searchBy: "name",
    sortBy: "createdAt",
    sortOrder: "desc",
  }}
/>

Custom Columns

Add additional columns or replace existing ones:

<AutoCrud
  // ...other props
  extraCustomColumns={[
    {
      id: "actions",
      header: "Custom Actions",
      cell: ({ row }) => (
        // Your custom cell content
      ),
    },
  ]}
  isExtraCustomColumnsEnabled={true}
  replaceColumns={[
    // Replace default columns with custom implementations
  ]}
/>

License

MIT