Add documentation and fix TypeScript issues

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@tailwindcss/postcss": "^4.1.11",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^20.19.9",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",

pnpm-lock.yaml

@@ -0,0 +1,221 @@
+# RestTable Component
+
+A MobX-powered table component with full CRUD operations support, migrated to use shadcn UI components.
+
+## Features
+
+- **React Class Component**: Maintains the original React class component architecture
+- **MobX Integration**: Full reactive data management with MobX
+- **CRUD Operations**: Built-in support for Create, Read, Update, Delete operations
+- **Pagination**: Integrated pagination controls
+- **Row Selection**: Checkbox-based row selection
+- **Custom Rendering**: Flexible column rendering with custom components
+- **Type Safety**: Full TypeScript support
+- **shadcn UI**: Built on top of shadcn UI components
+
+## Installation
+
+```bash
+npx shadcn@latest add rest-table
+```
+
+This will install:
+- The RestTable component and all its supporting components
+- Required UI components (table, checkbox, spinner, badge, button, card, input, label)
+- Required dependencies (mobx, mobx-react, mobx-restful, etc.)
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { RestTable } from "@/components/rest-table"
+import { RestStore } from "mobx-restful"
+import { TranslationModel } from "mobx-i18n"
+
+// Define your data type
+interface User {
+  id: string
+  name: string
+  email: string
+  role: string
+}
+
+// Create a MobX store
+const userStore = new RestStore<User>({
+  baseURI: "https://api.example.com/users",
+  indexKey: "id"
+})
+
+// Create translator
+const translator = new TranslationModel({
+  en: {
+    create: "Create",
+    edit: "Edit",
+    delete: "Delete",
+    view: "View",
+    total_x_rows: "Total {totalCount} rows",
+    sure_to_delete_x: "Are you sure to delete {keys}?"
+  }
+})
+
+// Use the RestTable component
+function UsersTable() {
+  return (
+    <RestTable
+      store={userStore}
+      translator={translator}
+      editable
+      deletable
+      columns={[
+        {
+          key: "name",
+          renderHead: () => "Name",
+        },
+        {
+          key: "email",
+          type: "email",
+          renderHead: () => "Email",
+        },
+        {
+          key: "role",
+          renderHead: () => "Role",
+        }
+      ]}
+    />
+  )
+}
+```
+
+### Advanced Column Rendering
+
+```tsx
+<RestTable
+  store={userStore}
+  translator={translator}
+  columns={[
+    {
+      key: "avatar",
+      type: "file",
+      accept: "image/*",
+      renderHead: () => "Avatar",
+    },
+    {
+      key: "name",
+      renderHead: () => "Name",
+      renderBody: (user) => (
+        <div className="font-semibold">{user.name}</div>
+      )
+    },
+    {
+      key: "tags",
+      multiple: true,
+      renderHead: () => "Tags",
+    },
+    {
+      key: "website",
+      type: "url",
+      renderHead: () => "Website",
+    }
+  ]}
+/>
+```
+
+### With Row Selection
+
+```tsx
+function UsersTable() {
+  const handleCheck = (keys: string[]) => {
+    console.log("Selected keys:", keys)
+  }
+
+  return (
+    <RestTable
+      store={userStore}
+      translator={translator}
+      onCheck={handleCheck}
+      columns={[...]}
+    />
+  )
+}
+```
+
+### Custom Submit Handler
+
+```tsx
+<RestTable
+  store={userStore}
+  translator={translator}
+  editable
+  onSubmit={async (data) => {
+    // Custom submit logic
+    await customAPI.save(data)
+  }}
+  columns={[...]}
+/>
+```
+
+## API Reference
+
+### RestTable Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `store` | `RestStore<D>` | MobX RESTful store instance |
+| `translator` | `Translator<D>` | Translation model with required keys |
+| `columns` | `Column<D>[]` | Array of column definitions |
+| `filter` | `Filter<D>` | Optional filter for data fetching |
+| `editable` | `boolean` | Enable edit/create operations |
+| `deletable` | `boolean` | Enable delete operations |
+| `onCheck` | `(keys: IDType[]) => void` | Callback for row selection |
+| `onSubmit` | `(data: D) => Promise<void>` | Custom submit handler |
+| `responsive` | `boolean` | Enable responsive table layout (default: true) |
+
+### Column Definition
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `key` | `keyof T` | Data field key |
+| `type` | `string` | Field type: 'text', 'email', 'url', 'tel', 'file' |
+| `renderHead` | `React.ReactNode \| Function` | Custom header renderer |
+| `renderBody` | `(data: T) => React.ReactNode` | Custom cell renderer |
+| `renderFoot` | `React.ReactNode \| Function` | Custom footer renderer |
+| `readOnly` | `boolean` | Make field read-only |
+| `disabled` | `boolean` | Disable field |
+| `multiple` | `boolean` | Enable multiple values (renders as badges) |
+| `options` | `any[]` | Field options |
+| `accept` | `string` | File accept types |
+| `rows` | `number` | Textarea rows |
+
+## Translation Keys
+
+The translator must provide the following translation keys:
+
+- `create`: Create button text
+- `edit`: Edit button text
+- `view`: View button text
+- `delete`: Delete button text
+- `total_x_rows`: Total rows text (with `{totalCount}` placeholder)
+- `sure_to_delete_x`: Delete confirmation text (with `{keys}` placeholder)
+
+## Architecture
+
+The RestTable maintains the **React class component** architecture from the original MobX-RESTful-table implementation:
+
+- Uses `@observer` decorator for MobX reactivity
+- Extends `ObservedComponent` for enhanced observable props handling
+- Uses class properties with `@observable` and `@computed` decorators
+- All methods are class methods, not hooks
+
+This ensures compatibility with existing MobX-based applications and maintains the proven architecture pattern.
+
+## Components Structure
+
+The RestTable includes several supporting components:
+
+- **BadgeBar**: Displays multiple values as badges
+- **FilePreview**: Previews file URLs (images or links)
+- **Pager**: Pagination controls
+- **RestFormModal**: Modal form for create/edit operations
+
+All components follow the same class component pattern for consistency.

public/r/rest-table.json

@@ -14,7 +14,7 @@ import { Input } from "@/registry/new-york/ui/input"
 import { Label } from "@/registry/new-york/ui/label"
 
 export interface Field<T extends DataObject> {
-  key: keyof T
+  key?: keyof T
   type?: string
   renderLabel?: ((key: keyof T) => React.ReactNode) | React.ReactNode
   readOnly?: boolean

registry/new-york/blocks/rest-table/README.md

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { RestTable, Column } from "./rest-table"
+import { makeObservable, observable } from "mobx"
+import { DataObject } from "mobx-restful"
+
+// Mock store for demonstration
+class MockStore<T extends DataObject> {
+  @observable accessor currentPage: T[] = []
+  @observable accessor currentOne: Partial<T> = {}
+  @observable accessor downloading = 0
+  @observable accessor pageSize = 10
+  @observable accessor pageIndex = 1
+  @observable accessor pageCount = 1
+  @observable accessor totalCount = 0
+
+  indexKey: keyof T = "id" as keyof T
+
+  constructor() {
+    makeObservable(this)
+  }
+
+  clear() {
+    this.currentPage = []
+  }
+
+  async getList() {
+    // Mock data
+    this.downloading = 1
+    setTimeout(() => {
+      this.currentPage = [] as T[]
+      this.totalCount = 0
+      this.pageCount = 1
+      this.downloading = 0
+    }, 500)
+  }
+
+  async deleteOne(id: any) {
+    this.currentPage = this.currentPage.filter(
+      (item) => item[this.indexKey] !== id
+    )
+  }
+
+  async createOne(data: Partial<T>) {
+    // Mock create
+    console.log("Creating:", data)
+  }
+
+  async updateOne(data: Partial<T>, id: any) {
+    // Mock update
+    console.log("Updating:", data, id)
+  }
+}
+
+// Mock translator
+const mockTranslator = {
+  t: (key: string, params?: any) => {
+    const translations: Record<string, string> = {
+      create: "Create",
+      edit: "Edit",
+      view: "View",
+      delete: "Delete",
+      total_x_rows: `Total ${params?.totalCount || 0} rows`,
+      sure_to_delete_x: `Are you sure to delete ${params?.keys || ""}?`,
+    }
+    return translations[key] || key
+  },
+}
+
+interface ExampleData extends DataObject {
+  id: string
+  name: string
+  email: string
+  status: string
+}
+
+export function RestTableExample() {
+  const [store] = React.useState(() => new MockStore<ExampleData>())
+
+  const columns: Column<ExampleData>[] = [
+    {
+      key: "name",
+      renderHead: () => "Name",
+    },
+    {
+      key: "email",
+      type: "email",
+      renderHead: () => "Email",
+    },
+    {
+      key: "status",
+      renderHead: () => "Status",
+    },
+  ]
+
+  return (
+    <div className="container mx-auto py-10">
+      <RestTable
+        store={store}
+        translator={mockTranslator}
+        columns={columns}
+        editable
+        deletable
+      />
+    </div>
+  )
+}