@chiempt/xantd - Schema-based React Components

A powerful React component library built on Ant Design for schema-based form and table rendering with automatic API integration.

Features

• 🚀 Schema-based rendering: Define forms and tables using simple JSON schemas
• 🔄 Automatic API integration: Built-in hooks for API calls, pagination, and data fetching
• 🎨 Ant Design powered: Beautiful, consistent UI components
• 📱 Responsive: Mobile-first design with responsive layouts
• 🔍 Advanced search: Built-in search and filtering capabilities
• ✅ Form validation: Automatic validation using Yup schema validation
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• 🔧 Customizable: Highly customizable with extensive configuration options

Installation

npm install @chiempt/xantd
# or
yarn add @chiempt/xantd
# or
pnpm add @chiempt/xantd

Package Information

• Package Name: @chiempt/xantd
• Version: 1.0.1
• License: MIT
• Author: ChiemPT

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom antd @ant-design/pro-components

Quick Start

XForm Example

import React from "react";
import { XForm } from "@chiempt/xantd";
import { FormSchema } from "@chiempt/xantd";

const formSchema: FormSchema = {
  fields: [
    {
      name: "name",
      label: "Full Name",
      type: "input",
      required: true,
      placeholder: "Enter your full name",
    },
    {
      name: "email",
      label: "Email",
      type: "email",
      required: true,
      placeholder: "Enter your email",
    },
    {
      name: "age",
      label: "Age",
      type: "number",
      min: 18,
      max: 100,
    },
    {
      name: "country",
      label: "Country",
      type: "select",
      apiConfig: {
        url: "/api/countries",
        method: "GET",
      },
      required: true,
    },
    {
      name: "birthDate",
      label: "Birth Date",
      type: "date",
      required: true,
    },
    {
      name: "interests",
      label: "Interests",
      type: "multiselect",
      options: [
        { label: "Technology", value: "tech" },
        { label: "Sports", value: "sports" },
        { label: "Music", value: "music" },
        { label: "Travel", value: "travel" },
      ],
    },
    {
      name: "newsletter",
      label: "Subscribe to newsletter",
      type: "switch",
    },
  ],
  layout: "vertical",
};

const MyForm: React.FC = () => {
  const handleSubmit = (data: any) => {
    console.log("Form data:", data);
  };

  const handleSubmitSuccess = (data: any) => {
    console.log("Form submitted successfully:", data);
  };

  return (
    <XForm
      schema={formSchema}
      onSubmit={handleSubmit}
      onSubmitSuccess={handleSubmitSuccess}
      showSubmitButton={true}
      showResetButton={true}
    />
  );
};

XTable Example

import React from "react";
import { XTable } from "@chiempt/xantd";
import { TableSchema } from "@chiempt/xantd";

const tableSchema: TableSchema = {
  columns: [
    {
      key: "id",
      title: "ID",
      dataIndex: "id",
      width: 80,
      sorter: true,
    },
    {
      key: "name",
      title: "Name",
      dataIndex: "name",
      searchable: true,
      searchType: "input",
      sorter: true,
    },
    {
      key: "email",
      title: "Email",
      dataIndex: "email",
      searchable: true,
      searchType: "input",
    },
    {
      key: "status",
      title: "Status",
      dataIndex: "status",
      searchable: true,
      searchType: "select",
      searchOptions: [
        { label: "Active", value: "active" },
        { label: "Inactive", value: "inactive" },
        { label: "Pending", value: "pending" },
      ],
      filters: [
        { text: "Active", value: "active" },
        { text: "Inactive", value: "inactive" },
        { text: "Pending", value: "pending" },
      ],
    },
    {
      key: "createdAt",
      title: "Created At",
      dataIndex: "createdAt",
      searchable: true,
      searchType: "daterange",
      sorter: true,
      render: (value) => new Date(value).toLocaleDateString(),
    },
    {
      key: "actions",
      title: "Actions",
      render: (_, record) => (
        <Space>
          <Button size="small" type="primary">
            Edit
          </Button>
          <Button size="small" danger>
            Delete
          </Button>
        </Space>
      ),
    },
  ],
  apiConfig: {
    url: "/api/users",
    method: "GET",
  },
  rowKey: "id",
  pagination: true,
};

const MyTable: React.FC = () => {
  return (
    <XTable
      schema={tableSchema}
      showSearch={true}
      showRefresh={true}
      showFilters={true}
      searchPlaceholder="Search users..."
    />
  );
};

API Reference

XForm Props

| Prop | Type | Default | Description | | ---------------- | -------------------- | -------- | ------------------------------------- | | schema | FormSchema | - | Form schema configuration | | onSubmit | (data: T) => void | - | Form submission handler | | onSubmitSuccess | (data: T) => void | - | Success callback | | onSubmitError | (error: any) => void | - | Error callback | | apiConfig | ApiConfig | - | API configuration for form submission | | initialValues | Partial | {} | Initial form values | | loading | boolean | false | Loading state | | disabled | boolean | false | Disable form | | showSubmitButton | boolean | true | Show submit button | | submitButtonText | string | 'Submit' | Submit button text | | showResetButton | boolean | false | Show reset button | | resetButtonText | string | 'Reset' | Reset button text |

XTable Props

| Prop | Type | Default | Description | | ----------------- | ------------------------- | ----------- | -------------------------- | | schema | TableSchema | - | Table schema configuration | | showSearch | boolean | true | Show search bar | | showRefresh | boolean | true | Show refresh button | | showFilters | boolean | true | Show filter panel | | searchPlaceholder | string | 'Search...' | Search placeholder | | onRow | (record, index) => object | - | Row properties | | onRowClick | (record, index) => void | - | Row click handler |

Field Types

• input - Text input
• textarea - Textarea
• password - Password input
• email - Email input
• url - URL input
• number - Number input
• select - Single select dropdown
• multiselect - Multiple select dropdown
• date - Date picker
• daterange - Date range picker
• datetime - Date time picker
• checkbox - Checkbox
• radio - Radio buttons
• switch - Switch toggle
• upload - File upload
• custom - Custom component

API Configuration

interface ApiConfig {
  url: string;
  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
  headers?: Record<string, string>;
  params?: Record<string, any>;
  data?: Record<string, any>;
  transform?: (data: any) => any;
  onError?: (error: any) => void;
  onSuccess?: (data: any) => void;
}

Hooks

useApi

import { useApi } from "@chiempt/xantd";

const { data, loading, error, execute, refresh } = useApi({
  url: "/api/data",
  method: "GET",
});

usePaginatedApi

import { usePaginatedApi } from "@chiempt/xantd";

const { dataSource, loading, error, pagination, refresh, handleTableChange } =
  usePaginatedApi({
    url: "/api/users",
    method: "GET",
  });

useSelectOptions

import { useSelectOptions } from "@chiempt/xantd";

const { options, loading, error, fetchOptions } = useSelectOptions({
  url: "/api/countries",
  method: "GET",
});

Advanced Usage

Custom Field Component

import { CustomFieldSchema } from "xantd";

const customField: CustomFieldSchema = {
  name: "customField",
  label: "Custom Field",
  type: "custom",
  component: MyCustomComponent,
  props: {
    customProp: "value",
  },
};

Form with Dependencies

const formSchema: FormSchema = {
  fields: [
    {
      name: "country",
      label: "Country",
      type: "select",
      apiConfig: { url: "/api/countries" },
    },
    {
      name: "city",
      label: "City",
      type: "select",
      apiConfig: { url: "/api/cities" },
      dependencies: ["country"], // Only show when country is selected
    },
  ],
};

Table with Custom Actions

const tableSchema: TableSchema = {
  columns: [
    // ... other columns
    {
      key: "actions",
      title: "Actions",
      render: (_, record) => (
        <Space>
          <Button size="small" type="primary" onClick={() => editUser(record)}>
            Edit
          </Button>
          <Button size="small" danger onClick={() => deleteUser(record.id)}>
            Delete
          </Button>
        </Space>
      ),
    },
  ],
  // ... rest of schema
};

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Your Name

Support

If you have any questions or need help, please open an issue on GitHub.