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

``bash
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

`bash

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

`bash

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

`bash

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

`tsx
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 (
schema={userSchema}
trpcApiRoutes={api.user}
ToastFunction={(message, type) => {
toast(message, { description: type });
}}
/>
);
}
`

Core Components

$3

The main component for generating complete CRUD interfaces:

`tsx
// 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"
/>
`

$3

Lower-level table component with more granular control:

`tsx
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:

`tsx
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 (


components={{
DeleteModal: CustomDeleteModal,
EditModal: CustomEditModal,
ViewModal: CustomViewModal,
// ... other component overrides
}}
>
{/ Your application /}



);
}
`

tRPC Integration

Set up your tRPC router with the ZodPrismaClassed helper:

`ts
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

$3

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

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

`

$3

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

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

$3

Change the order of fields in your forms and tables:

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

Advanced Usage

$3

Set default search parameters:

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

$3

Add additional columns or replace existing ones:

`tsx
// ...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