npm - antd-crud-table - Versions diffs - 0.0.0 → 0.0.3 - Mend

antd-crud-table 0.0.0 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/.github/workflows/toghpage.yml +33 -0
package/.github/workflows/tonpm.yml +31 -0
package/helper/post-build.js +22 -0
package/index.html +9 -0
package/lib/CrudTable/CrudTable.css +3 -0
package/lib/CrudTable/CrudTable.tsx +314 -0
package/lib/CrudTable/CrudTableLazy.tsx +27 -0
package/lib/main.ts +5 -0
package/package.json +23 -18
package/src/App.tsx +103 -31
package/src/index.css +1 -1
package/tsconfig.app.json +14 -6
package/tsconfig.build.json +27 -0
package/tsconfig.node.json +7 -5
package/vite.config.lib.ts +26 -0
package/vite.config.ts +2 -1
package/public/vite.svg +0 -1
package/src/CrudTable.tsx +0 -166

package/.github/workflows/toghpage.yml ADDED Viewed

@@ -0,0 +1,33 @@
+name: Build and Publish to GH Pages
+on:
+  push:
+    branches: [ main ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: 'Installing build deps'
+      run: npm i -g pnpm
+    - name: 'Installing deps'
+      run: pnpm i
+    - name: 'Build'
+      run: pnpm build:static
+    - name: 'Deploy'
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+        publish_dir: ./dist
+        allow_empty_commit: true

package/.github/workflows/tonpm.yml ADDED Viewed

@@ -0,0 +1,31 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+        registry-url: ['https://registry.npmjs.org']
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: ${{ matrix.registry-url }}
+      - name: 'Installing build deps'
+        run: npm i -g pnpm
+      - name: 'Installing deps'
+        run: pnpm i
+      - name: 'Build'
+        run: pnpm build:lib
+      - name: 'Publish'
+        run: pnpm publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/helper/post-build.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import packageJson from '../package.json' assert { type: 'json' };
+import { exit } from 'process';
+const distPath = path.resolve('dist/lib');
+const packageJsonPath = path.join(distPath, 'package.json');
+(async () => {
+    try {
+        // Ensure the dist/lib directory exists
+        await fs.mkdir(distPath, { recursive: true });
+        // Write the package.json file to the `dist/lib` directory
+        await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8');
+        console.log(`package.json has been copied to ${packageJsonPath}`);
+    } catch (error) {
+        console.error('Error copying package.json:', error);
+        exit(1);
+    }
+})();

package/index.html CHANGED Viewed

@@ -5,6 +5,15 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3G1RNC5YLT"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-3G1RNC5YLT');
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/lib/CrudTable/CrudTable.css ADDED Viewed

@@ -0,0 +1,3 @@
+.row-differentiator {
+    background-color: #0000007f;
+}

package/lib/CrudTable/CrudTable.tsx ADDED Viewed

@@ -0,0 +1,314 @@
+import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { ProTable, ProConfigProvider } from '@ant-design/pro-components';
+import { Button, Dropdown, Tag, message, Modal, Form, Input, InputNumber, Select, Switch, DatePicker } from 'antd';
+import { useRef, useState } from 'react';
+import type { SortOrder } from 'antd/es/table/interface';
+import { format, parseISO, formatISO } from 'date-fns';
+import dayjs from 'dayjs';
+import './CrudTable.css';
+type DataType = Record<string, any>;
+type FieldType = 'string' | 'number' | 'date' | 'boolean' | 'enum' | 'custom';
+interface CrudColumn<T extends DataType> extends ProColumns<T> {
+  fieldType?: FieldType;
+  enumOptions?: Record<string, { text: string;[key: string]: any }>;
+  customRender?: (value: any, record: T) => React.ReactNode;
+  formConfig?: {
+    required?: boolean;
+    component?: React.ReactNode;
+    transform?: (value: any) => any;
+  };
+  fieldEditable?: boolean;
+}
+interface CrudTableConfig<T extends DataType> {
+  columns: CrudColumn<T>[];
+  service: {
+    getList: (params: any) => Promise<{ data: T[]; total: number }>;
+    create: (data: Partial<T>) => Promise<T>;
+    update: (id: any, data: Partial<T>) => Promise<T>;
+    delete: (id: any) => Promise<void>;
+  };
+  rowKey: keyof T;
+  title: string;
+  defaultPageSize?: number;
+}
+const CrudTable = <T extends DataType>(config: CrudTableConfig<T>) => {
+  const actionRef = useRef<ActionType>(null);
+  const { columns, service, rowKey, title, defaultPageSize = 5 } = config;
+  const [modalVisible, setModalVisible] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<Partial<T> | null>(null);
+  const [form] = Form.useForm();
+  let enhancedColumns: ProColumns<T>[] = (columns || []).map((col) => {
+    const baseColumn: ProColumns<T> = {
+      ...col,
+      dataIndex: col.dataIndex as string,
+      title: col.title,
+    };
+    switch (col.fieldType) {
+      case 'date':
+        return {
+          ...baseColumn,
+          valueType: 'dateTime',
+          render: (_, record) => (
+            <span>
+              {format(parseISO(record[col.dataIndex as string]), 'yyyy-MM-dd HH:mm')}
+            </span>
+          ),
+        };
+      case 'enum':
+        return {
+          ...baseColumn,
+          valueType: 'select',
+          valueEnum: col.enumOptions,
+        };
+      case 'number':
+        return {
+          ...baseColumn,
+          valueType: 'digit',
+        };
+      case 'boolean':
+        return {
+          ...baseColumn,
+          valueType: 'switch',
+          render: (_, record) => (
+            <Tag color={record[col.dataIndex as string] ? 'green' : 'red'}>
+              {record[col.dataIndex as string] ? 'Yes' : 'No'}
+            </Tag>
+          ),
+        };
+      case 'custom':
+        return {
+          ...baseColumn,
+          render: (_, record) => col.customRender?.(record[col.dataIndex as string], record),
+        };
+      default:
+        return baseColumn;
+    }
+  });
+  enhancedColumns.push({
+    title: 'Actions',
+    valueType: 'option',
+    render: (_, record: T) => [
+      <Button key="edit" type="primary" onClick={() => openModal(record)}>
+        Edit
+      </Button>,
+      <Button key="delete" type="primary" danger onClick={async () => {
+        await service.delete(record[rowKey]);
+        actionRef.current?.reload();
+      }}>
+        Delete
+      </Button>,
+    ],
+  });
+  const handleRequest = async (
+    params: Record<string, any>,
+    sort: Record<string, SortOrder>,
+    filter: Record<string, any>,
+  ) => {
+    try {
+      const query = {
+        ...params,
+        sortBy: Object.keys(sort)[0],
+        sortOrder: Object.values(sort)[0],
+        ...filter,
+      };
+      const { data, total } = await service.getList(query);
+      return { data, success: true, total };
+    } catch (error) {
+      message.error('Failed to fetch data');
+      return { data: [], success: false, total: 0 };
+    }
+  };
+  const openModal = (record?: Partial<T>) => {
+    setCurrentRecord(record || null);
+    if (record) {
+      const values = { ...record };
+      columns.forEach((col) => {
+        const field = col.dataIndex as string;
+        if (col.fieldType === 'date' && values[field]) {
+          // @ts-ignore
+          values[field] = dayjs(values[field]);
+        }
+      });
+    form.setFieldsValue(values);
+    } else {
+        form.resetFields();
+      }
+      setModalVisible(true);
+    };
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      const transformedValues = { ...values };
+      // Handle any transformations like date formatting
+      columns.forEach((col) => {
+        const field = col.dataIndex as string;
+        if (col.fieldType === 'date' && values[field]) {
+          transformedValues[field] = formatISO(values[field]);
+        }
+        if (col.formConfig?.transform) {
+          transformedValues[field] = col.formConfig.transform(values[field]);
+        }
+      });
+      if (currentRecord && currentRecord[rowKey]) {
+        await service.update(currentRecord[rowKey], transformedValues);
+        message.success('Updated successfully');
+      } else {
+        await service.create(transformedValues);
+        message.success('Created successfully');
+      }
+      setModalVisible(false);
+      actionRef.current?.reload();
+    } catch (error) {
+      console.error(error);
+      message.error('Submit failed');
+    }
+  };
+  const handleCancel = () => {
+    setModalVisible(false);
+  };
+  return (
+    <ProConfigProvider needDeps>
+      <ProTable<T>
+        headerTitle={title}
+        rowKey={rowKey as string}
+        // row classname to gray and white
+        rowClassName={(_, index) => (index % 2 === 0 && 'row-differentiator' || '')}
+        actionRef={actionRef}
+        columns={enhancedColumns}
+        request={handleRequest}
+        search={{ labelWidth: 'auto' }}
+        pagination={{ pageSize: defaultPageSize }}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => openModal()}
+          >
+            New
+          </Button>,
+          <Dropdown
+            key="menu"
+            menu={{
+              items: [
+                { key: 'export', label: 'Export' },
+                { key: 'refresh', label: 'Refresh', onClick: () => actionRef.current?.reload() },
+              ],
+            }}
+          >
+            <Button>
+              <EllipsisOutlined />
+            </Button>
+          </Dropdown>,
+        ]}
+        options={{
+          setting: { listsHeight: 400 },
+          reload: () => actionRef.current?.reload(),
+        }}
+        dateFormatter="string"
+      />
+      <Modal
+        forceRender
+        title={currentRecord ? 'Edit Item' : 'Create Item'}
+        open={modalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical">
+          {columns.map((col) => {
+            if (!col.dataIndex) return null;
+            const name = col.dataIndex as string;
+            const label = col.title as string;
+            const fieldDisabled = !(col.fieldEditable ?? true);
+            switch (col.fieldType) {
+              case 'string':
+                return (
+                  <Form.Item
+                    key={name}
+                    name={name}
+                    label={label}
+                    rules={[{ required: col.formConfig?.required, message: `${label} is required` }]}
+                  >
+                    <Input disabled={fieldDisabled} />
+                  </Form.Item>
+                );
+              case 'number':
+                return (
+                  <Form.Item
+                    key={name}
+                    name={name}
+                    label={label}
+                    rules={[{ required: col.formConfig?.required, message: `${label} is required` }]}
+                  >
+                    <InputNumber style={{ width: '100%' }} disabled={fieldDisabled} />
+                  </Form.Item>
+                );
+              case 'date':
+                return (
+                  <Form.Item
+                    key={name}
+                    name={name}
+                    label={label}
+                    rules={[{ required: col.formConfig?.required, message: `${label} is required` }]}
+                  >
+                    <DatePicker style={{ width: '100%' }} showTime disabled={fieldDisabled} />
+                  </Form.Item>
+                );
+              case 'boolean':
+                return (
+                  <Form.Item
+                    key={name}
+                    name={name}
+                    label={label}
+                    valuePropName="checked"
+                  >
+                    <Switch disabled={fieldDisabled}  />
+                  </Form.Item>
+                );
+              case 'enum':
+                return (
+                  <Form.Item
+                    key={name}
+                    name={name}
+                    label={label}
+                    rules={[{ required: col.formConfig?.required, message: `${label} is required` }]}
+                  >
+                    <Select
+                      disabled={fieldDisabled}
+                      options={Object.entries(col.enumOptions || {}).map(([value, option]) => ({
+                        label: option.text,
+                        value,
+                    }))} />
+                  </Form.Item>
+                );
+              default:
+                return null;
+            }
+          })}
+        </Form>
+      </Modal>
+    </ProConfigProvider>
+  );
+};
+export default CrudTable;
+export type { CrudTableConfig, CrudColumn, DataType };

package/lib/CrudTable/CrudTableLazy.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { Suspense, lazy } from 'react';
+import type { CrudTableConfig, DataType } from './CrudTable';
+const CrudTable = lazy(() => import('./CrudTable'));
+const CrudTableLazy = <T extends DataType>(props: CrudTableConfig<T>) => {
+  const { columns, service, rowKey, title, defaultPageSize = 5 } = props;
+  return (
+    <Suspense
+      fallback={
+        <div style={{ textAlign: 'center', padding: '2rem' }}>
+          Loading curd table w antd
+        </div>
+      }
+    >
+      <CrudTable
+        columns={columns as any}
+        service={service as any}
+        rowKey={rowKey as string}
+        title={title}
+        defaultPageSize={defaultPageSize}
+      />
+    </Suspense>
+  );
+};
+export default CrudTableLazy;

package/lib/main.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import CrudTable from "./CrudTable/CrudTable";
+import CrudTableLazy from "./CrudTable/CrudTableLazy";
+export { CrudTable, CrudTableLazy };
+export type { CrudTableConfig, CrudColumn, DataType } from "./CrudTable/CrudTable";

package/package.json CHANGED Viewed

@@ -1,39 +1,44 @@
 {
   "name": "antd-crud-table",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.3",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
+  "homepage": ".",
   "devDependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@ant-design/pro-components": "^2.8.7",
     "@eslint/js": "^9.22.0",
+    "@types/node": "^22.15.2",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
+    "antd": "^5.24.8",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1",
-    "@ant-design/icons": "^6.0.0",
-    "@ant-design/pro-components": "^2.8.7",
-    "antd": "^5.24.8",
-    "date-fns": "^4.1.0"
+    "vite": "^6.3.1"
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.0",
     "@ant-design/pro-components": "^2.8.7",
     "antd": "^5.24.8",
-    "date-fns": "^4.1.0"
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:static": "tsc -b && vite build",
+    "build:lib": "tsc --p ./tsconfig.build.json && vite build --config vite.config.lib.ts && node helper/post-build.js",
+    "lint": "eslint .",
+    "preview": "vite preview"
   }
-}
+}

package/src/App.tsx CHANGED Viewed

@@ -1,35 +1,107 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import CrudTableLazy from '../lib/CrudTable/CrudTableLazy';
+// import CrudTable from '../lib/CrudTable/CrudTable';
+import { ConfigProvider } from 'antd';
+import enUS from 'antd/locale/en_US';
-function App() {
-  const [count, setCount] = useState(0)
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+interface User {
+  id: number;
+  name: string;
+  age: number;
+  createdAt: string;
+  status: 'active' | 'inactive';
+  isAdmin: boolean;
 }
-export default App
+class UserService {
+  // @ts-ignore
+  async getList(params: any): Promise<{ data: User[]; total: number }> {
+    // todo
+    return {
+      data: [
+        { id: 1, name: 'Jane Smith 1', age: 30, createdAt: '2023-01-01', status: 'active', isAdmin: true },
+        { id: 2, name: 'Jane Smith 2', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 3, name: 'Jane Smith 3', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 4, name: 'Jane Smith 4', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 5, name: 'Jane Smith 5', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 6, name: 'Jane Smith 6', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 7, name: 'Jane Smith 7', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 8, name: 'Jane Smith 8', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 9, name: 'Jane Smith 9', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 10, name: 'Jane Smith 10', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 11, name: 'Jane Smith 11', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+        { id: 12, name: 'Jane Smith 12', age: 25, createdAt: '2023-02-01', status: 'inactive', isAdmin: false },
+      ],
+      total: 2,
+    }
+  }
+  async create(data: Partial<User>) {
+    // todo
+    return data as User;
+  }
+  async update(id: number, data: Partial<User>) {
+    // todo
+    return { id, ...data } as User;
+  }
+  // @ts-ignore
+  async delete(id: number) {
+    // todo
+  }
+}
+const UserTable = () => (
+  <CrudTableLazy<User>
+    title="User Management"
+    rowKey="id"
+    // defaultPageSize={10}
+    service={new UserService()}
+    columns={[
+      {
+        dataIndex: 'name',
+        title: 'Name',
+        fieldType: 'string',
+        formConfig: { required: true },
+      },
+      {
+        dataIndex: 'age',
+        title: 'Age',
+        fieldType: 'number',
+        fieldEditable: false,
+      },
+      {
+        dataIndex: 'age2',
+        title: 'Age2',
+        fieldType: 'number',
+      },
+      {
+        dataIndex: 'createdAt',
+        title: 'Created At',
+        fieldType: 'date',
+      },
+      {
+        dataIndex: 'status',
+        title: 'Status',
+        fieldType: 'enum',
+        enumOptions: {
+          active: { text: 'Active' },
+          inactive: { text: 'Inactive' },
+        },
+      },
+      {
+        dataIndex: 'isAdmin',
+        title: 'Administrator',
+        fieldType: 'boolean',
+      },
+    ]}
+  />
+);
+const App = () => <ConfigProvider locale={enUS}>
+  <UserTable />
+</ConfigProvider>
+// eslint-disable-next-line import/no-default-export
+export default App;

package/src/index.css CHANGED Viewed

@@ -65,4 +65,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}

package/tsconfig.app.json CHANGED Viewed

@@ -3,10 +3,13 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -14,13 +17,18 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "types": [
+      "node"
+    ]
   },
-  "include": ["src"]
-}
+  "include": [
+    "src",
+    "lib"
+  ]
+}

package/tsconfig.build.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ],
+        "moduleResolution": "Node",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "skipLibCheck": true,
+        "declaration": true,
+        "declarationDir": "./dist/lib/types",
+        "emitDeclarationOnly": false,
+        "outDir": "./dist/lib",
+        "jsx": "react-jsx",
+        "strict": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": [
+        "lib"
+    ]
+}

package/tsconfig.node.json CHANGED Viewed

@@ -2,17 +2,17 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -20,5 +20,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/vite.config.lib.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'lib/main.ts'),
+      name: 'AntdCrudTable',
+      fileName: (format) => `antd-crud-table.${format}.js`,
+      formats: ['es', 'cjs', 'umd'],
+    },
+    outDir: 'dist/lib',
+    rollupOptions: {
+      external: ['react', 'react-dom', 'antd', '@ant-design/icons', '@ant-design/pro-components', 'date-fns', 'dayjs'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          antd: 'antd',
+        },
+      },
+    },
+  },
+});

package/vite.config.ts CHANGED Viewed

@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react-swc'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  base: './',
+})

package/public/vite.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/CrudTable.tsx DELETED Viewed

@@ -1,166 +0,0 @@
-import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
-import type { ActionType, ProColumns } from '@ant-design/pro-components';
-import { ProTable, ProConfigProvider } from '@ant-design/pro-components';
-import { Button, Dropdown, Tag, message } from 'antd';
-import { useRef } from 'react';
-import type { SortOrder } from 'antd/es/table/interface';
-import { format, parseISO } from 'date-fns';
-type DataType = Record<string, any>;
-type FieldType = 'string' | 'number' | 'date' | 'boolean' | 'enum' | 'custom';
-interface CrudColumn<T extends DataType> extends ProColumns<T> {
-  fieldType?: FieldType;
-  enumOptions?: Record<string, { text: string;[key: string]: any }>;
-  customRender?: (value: any, record: T) => React.ReactNode;
-  formConfig?: {
-    required?: boolean;
-    component?: React.ReactNode;
-    transform?: (value: any) => any;
-  };
-}
-interface CrudTableConfig<T extends DataType> {
-  columns: CrudColumn<T>[];
-  service: {
-    getList: (params: any) => Promise<{ data: T[]; total: number }>;
-    create: (data: Partial<T>) => Promise<T>;
-    update: (id: any, data: Partial<T>) => Promise<T>;
-    delete: (id: any) => Promise<void>;
-  };
-  rowKey: keyof T;
-  title: string;
-  defaultPageSize?: number;
-}
-const CrudTable = <T extends DataType>(config: CrudTableConfig<T>) => {
-  const actionRef = useRef<ActionType>(null);
-  const { columns, service, rowKey, title, defaultPageSize = 5 } = config;
-  const enhancedColumns: ProColumns<T>[] = (columns || []).map((col) => {
-    const baseColumn: ProColumns<T> = {
-      ...col,
-      dataIndex: col.dataIndex as string,
-      title: col.title,
-    };
-    switch (col.fieldType) {
-      case 'date':
-        return {
-          ...baseColumn,
-          valueType: 'dateTime',
-          render: (_, record) => (
-            <span>
-              {format(parseISO(record[col.dataIndex as string]), 'yyyy-MM-dd HH:mm')}
-            </span>
-          ),
-        };
-      case 'enum':
-        return {
-          ...baseColumn,
-          valueType: 'select',
-          valueEnum: col.enumOptions,
-        };
-      case 'number':
-        return {
-          ...baseColumn,
-          valueType: 'digit',
-        };
-      case 'boolean':
-        return {
-          ...baseColumn,
-          valueType: 'switch',
-          render: (_, record) => (
-            <Tag color={record[col.dataIndex as string] ? 'green' : 'red'}>
-              {record[col.dataIndex as string] ? 'Yes' : 'No'}
-            </Tag>
-          ),
-        };
-      case 'custom':
-        return {
-          ...baseColumn,
-          render: (_, record) => col.customRender?.(record[col.dataIndex as string], record),
-        };
-      default:
-        return baseColumn;
-    }
-  });
-  const handleRequest = async (
-    params: Record<string, any>,
-    sort: Record<string, SortOrder>,
-    filter: Record<string, any>,
-  ) => {
-    try {
-      const query = {
-        ...params,
-        sortBy: Object.keys(sort)[0],
-        sortOrder: Object.values(sort)[0],
-        ...filter,
-      };
-      const { data, total } = await service.getList(query);
-      return { data, success: true, total };
-    } catch (error) {
-      message.error('Failed to fetch data');
-      return { data: [], success: false, total: 0 };
-    }
-  };
-  return (
-    <ProConfigProvider needDeps>
-      <ProTable<T>
-        headerTitle={title}
-        rowKey={rowKey as string}
-        actionRef={actionRef}
-        columns={enhancedColumns}
-        request={handleRequest}
-        editable={{
-          type: 'multiple',
-          onSave: async (key, row) => {
-            await service.update(key, row);
-            actionRef.current?.reload();
-          },
-          onDelete: async (key) => {
-            await service.delete(key);
-            actionRef.current?.reload();
-          },
-        }}
-        search={{ labelWidth: 'auto' }}
-        pagination={{ pageSize: defaultPageSize }}
-        toolBarRender={() => [
-          <Button
-            key="add"
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={() => {
-              // todo: create logic here
-              actionRef.current?.reload();
-            }}
-          >
-            New
-          </Button>,
-          <Dropdown
-            key="menu"
-            menu={{
-              items: [
-                { key: 'export', label: 'Export' },
-                { key: 'refresh', label: 'Refresh' },
-              ],
-            }}
-          >
-            <Button>
-              <EllipsisOutlined />
-            </Button>
-          </Dropdown>,
-        ]}
-        options={{
-          setting: { listsHeight: 400 },
-          reload: () => actionRef.current?.reload(),
-        }}
-        dateFormatter="string"
-      />
-    </ProConfigProvider>
-  );
-};
-export {CrudTable}