1.0.0 • Published 9 months ago

antd-ui-config-pluck v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

antd-ui-config-pluck

This package provides a flexible and dynamic configuration for UI components using Ant Design and Puck. It allows for easy integration of Ant Design UI components with the Puck interface to create drag-and-drop UI components.

Features

  • Ready-to-use Ant Design components for Puck-based UI building.
  • Supports dynamic configuration of components using a central config system.
  • Easily customizable with mergeConfigs utility to override default configurations.
  • Seamless integration with React applications and TypeScript support.

Installation

To install the package, run the following command:

npm install antd-ui-config-pluck



Với hai file `package.json` mà bạn cung cấp, bạn đã thiết lập dự án chính và package **`antd-ui-config-pluck`** một cách đúng đắn. Tuy nhiên, để đảm bảo quá trình phát triển và chạy cùng lúc với dự án chính, bạn cần thực hiện thêm một số bước bổ sung:

### 1. **Sử dụng `npm link`**

Trước tiên, bạn cần sử dụng **`npm link`** để liên kết package **`antd-ui-config-pluck`** với dự án chính. Điều này giúp đảm bảo rằng bất kỳ thay đổi nào trong package sẽ được phản ánh ngay lập tức trong dự án chính.

#### **Bước 1: Link package vào hệ thống cục bộ**

Truy cập thư mục của **`antd-ui-config-pluck`** và chạy lệnh **`npm link`** để liên kết package này với hệ thống cục bộ:

```bash
cd /path/to/antd-ui-config-pluck
npm link

Bước 2: Liên kết package với dự án chính

Tiếp theo, quay trở lại thư mục của dự án chính và liên kết package này vào dự án chính:

cd /path/to/ElementFlow
npm link antd-ui-config-pluck

Bây giờ, antd-ui-config-pluck sẽ được liên kết với dự án chính. Khi bạn phát triển và thực hiện thay đổi trong package, các thay đổi sẽ tự động phản ánh trong dự án chính.

2. Chạy cả hai dự án cùng lúc

Như đã đề cập trong các bước trước, bạn có thể sử dụng concurrently để chạy cả antd-ui-config-pluck và dự án chính cùng lúc.

Trong dự án chính, cập nhật package.json như sau để chạy đồng thời cả hai dự án:

{
  "scripts": {
    "dev": "concurrently \"npm run dev:main\" \"npm run dev:plugin\"",
    "dev:main": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev",
    "dev:plugin": "cd packages/antd-ui-config-pluck && npm run dev"
  }
}
  • dev:main: Chạy chế độ phát triển cho dự án chính.
  • dev:plugin: Chạy watch mode cho package antd-ui-config-pluck.

Bây giờ bạn có thể chạy cả hai dự án bằng cách sử dụng lệnh:

npm run dev

3. Sử dụng cấu hình từ package antd-ui-config-pluck trong dự án chính

Trong dự án chính, bạn có thể import và sử dụng các thành phần từ package antd-ui-config-pluck. Ví dụ:

Trong file index.tsx của dự án chính:

import { Puck } from "@measured/puck";
import { config as antdUIConfig } from "antd-ui-config-pluck";  // Import từ package

const App = () => {
  return (
    <Puck
      config={antdUIConfig}  // Sử dụng config từ package
      // ...
    />
  );
};

export default App;

Nếu bạn có thêm các cấu hình nội tại riêng trong dự án chính, bạn có thể hợp nhất (merge) cấu hình từ package antd-ui-config-pluck và cấu hình nội tại trước khi truyền vào Puck.

Ví dụ:

import { merge } from "lodash";
import { config as antdUIConfig } from "antd-ui-config-pluck";  // Import từ package
import { customConfig } from "./config";  // Import từ dự án chính

const mergedConfig = merge({}, antdUIConfig, customConfig);

const App = () => {
  return (
    <Puck
      config={mergedConfig}  // Sử dụng config đã hợp nhất
      // ...
    />
  );
};

export default App;

4. Đảm bảo TypeScript hoạt động đúng

Để đảm bảo TypeScript hoạt động đúng với antd-ui-config-pluck, hãy chắc chắn rằng bạn đã khai báo đúng các type trong package antd-ui-config-pluck. Các file .d.ts của package sẽ được tự động nhận diện trong dự án chính nếu chúng được khai báo trong package.json của package.

Ví dụ, trong antd-ui-config-pluck/package.json, bạn đã khai báo đúng:

{
  "types": "dist/index.d.ts"
}

Điều này đảm bảo rằng khi dự án chính sử dụng package này, các type sẽ được kiểm tra và đảm bảo tính toàn vẹn.

5. Kết luận

  • npm link cho phép bạn phát triển package antd-ui-config-pluck cùng lúc với dự án chính.
  • concurrently giúp bạn chạy cả hai quá trình phát triển song song.
  • Bạn có thể import các config từ antd-ui-config-pluck vào dự án chính và sử dụng, đồng thời có thể merge với các cấu hình nội tại nếu cần.

Bằng cách này, bạn có thể phát triển plugin antd-ui-config-pluck một cách linh hoạt và dễ dàng trong khi vẫn giữ cho dự án chính hoạt động một cách liền mạch.

Trong RunCSS, các biến `defaultsTemplate`, `ruleTemplate`, `shortcuts`, và `states` cung cấp cấu trúc linh hoạt để tạo CSS động dựa trên các tiện ích và cú pháp tương tự như TailwindCSS. Đây là cách mỗi biến hoạt động và có thể được sử dụng:

### 1. `defaultsTemplate`
- **Ý nghĩa**: Đây là template mặc định của RunCSS, định nghĩa các thuộc tính cơ bản và các tiện ích mặc định.
- **Sử dụng**: `defaultsTemplate` chứa các cấu hình và thuộc tính mặc định của RunCSS và bạn có thể mở rộng hoặc sửa đổi nó khi dùng `extendRunCSS`. Ví dụ, có thể thêm các tùy chỉnh cho màu sắc mặc định, khoảng cách, hoặc các lớp tiện ích khác.

### 2. `ruleTemplate`
- **Ý nghĩa**: `ruleTemplate` cho phép định nghĩa cú pháp cho các tiện ích CSS khi xử lý các lớp CSS theo cú pháp của Tailwind.
- **Sử dụng**: Ví dụ, nếu muốn tạo các quy tắc tiện ích riêng (như `.btn-primary { ... }`) mà không có trong cấu hình mặc định của RunCSS, bạn có thể dùng `ruleTemplate` để định nghĩa cú pháp và logic áp dụng của chúng.

### 3. `shortcuts`
- **Ý nghĩa**: `shortcuts` là một đối tượng chứa các lệnh rút gọn. Thay vì viết nhiều lớp CSS riêng lẻ, bạn có thể định nghĩa một lớp rút gọn chứa các thuộc tính hoặc nhóm tiện ích.
- **Sử dụng**: Ví dụ, có thể tạo một shortcut cho nút (`btn`) với cấu trúc:
    ```javascript
    shortcuts: {
        'btn': 'bg-blue-500 text-white font-bold py-2 px-4 rounded'
    }
    ```
  Khi dùng `btn`, RunCSS sẽ tự động thêm các lớp CSS được xác định trong shortcut.

### 4. `states`
- **Ý nghĩa**: `states` giúp bạn định nghĩa các biến trạng thái và kiểu trạng thái như `hover`, `active`, `visited`, `group-hover`, cũng như các breakpoint (`sm`, `md`, `lg`, `xl`, ...) theo cách tương tự như Tailwind.
- **Sử dụng**: Bạn có thể thêm hoặc mở rộng các biến trạng thái để RunCSS hiểu và xử lý những trạng thái đó.
  ```javascript
  states: {
    modifiers: {
      'hover': ':hover',
      'focus': ':focus',
      'sm': '@media (min-width: 640px)'
      // Thêm trạng thái tùy chỉnh
    }
  }

Với cấu trúc này, bạn có thể mở rộng thêm các trạng thái hoặc breakpoint nếu cần cho các ứng dụng đặc biệt.

Cách mở rộng bằng extendRunCSS

Bạn có thể mở rộng các thuộc tính trên thông qua extendRunCSS, một hàm mà bạn có thể gọi trước khi khởi tạo RunCSS. Đây là một ví dụ mở rộng với extendRunCSS:

import { extendRunCSS } from "runcss";

extendRunCSS(({ defaultsTemplate, ruleTemplate, shortcuts, states }) => {
    shortcuts['custom-btn'] = 'bg-green-500 text-white py-2 px-4 rounded';
    states.modifiers['my-focus'] = ':focus-within';

    return { defaultsTemplate, ruleTemplate, shortcuts, states };
});

Kết luận

Các biến này cho phép bạn tùy chỉnh và mở rộng RunCSS một cách linh hoạt, giúp nó phù hợp với nhu cầu cụ thể của ứng dụng mà không cần các cấu hình phức tạp như TailwindCSS, đặc biệt hữu ích khi cần tạo CSS động theo thời gian thực.

antdimmerreactruncsstailwind-mergetypescriptuuid
1.0.0

9 months ago