# Lowcoder Gencode

Hệ thống tạo mã tự động cho lowcoder dựa trên mô hình của Plasmic.

## Tích hợp với Editor

Gencode đã được tích hợp trực tiếp vào giao diện editor của Lowcoder thông qua nút "Tạo mã" trên thanh công cụ. Khi nhấn vào nút này, hệ thống sẽ lấy DSL của ứng dụng hiện tại và tạo mã tương ứng.

### Tích hợp thư viện từ npm

Thư viện acp-gencode có thể được cài đặt và sử dụng trong Lowcoder như một dependency bình thường:

1. Cài đặt thư viện:

```bash
cd client
yarn add acp-gencode
```

2. Import các hàm từ thư viện trong component GenCodeButton:

```typescript
import { generateCodeFromDSL } from "acp-gencode/dist/integrations/editorIntegration";
```

3. Sử dụng hàm trực tiếp để tạo mã:

```typescript
const code = await generateCodeFromDSL(dsl, { template, designSystem });
```

Cách tiếp cận này đơn giản hóa quá trình tích hợp và loại bỏ nhu cầu phải chạy một service API riêng biệt.

## Cài đặt

### Cài đặt từ npm

```bash
npm install acp-gencode
# hoặc
yarn add acp-gencode
```

### Cài đặt từ source

```bash
git clone https://github.com/vnpt/acp-gencode.git
cd acp-gencode
npm install
npm run build
```

## Sử dụng

### Tạo một component schema

```typescript
import { createComponentBuilder, createPropSchema } from 'acp-gencode';

// Tạo một component builder
const buttonBuilder = createComponentBuilder('button', 'Button')
  .addProp('text', createPropSchema('string', {
    defaultValue: 'Button',
    description: 'Nội dung của button'
  }))
  .addProp('type', createPropSchema('string', {
    defaultValue: 'primary',
    description: 'Kiểu của button'
  }))
  .addProp('disabled', createPropSchema('boolean', {
    defaultValue: false,
    description: 'Trạng thái disabled của button'
  }))
  .exposeState('disabled')
  .exposeMethod({
    name: 'click',
    description: 'Kích hoạt sự kiện click của button'
  });

// Xây dựng schema
const buttonSchema = buttonBuilder.build();
```

### Tạo mã từ schema

```typescript
import { generateComponentCode } from 'acp-gencode';

// Tạo mã từ schema
const code = await generateComponentCode(buttonSchema, {
  template: 'default',
  designSystem: 'lowcoder'
});

console.log(code.imports);
console.log(code.props);
console.log(code.body);
console.log(code.exposing);
```

## API

### SchemaGenerator

- `createComponentSchema(type, name, props)`: Tạo một component schema mới
- `addChildToSchema(parent, child)`: Thêm một component con vào component cha
- `addPropToSchema(schema, propName, propSchema)`: Thêm một thuộc tính vào component schema
- `addStylesToSchema(schema, styles)`: Thêm style vào component schema
- `addEventToSchema(schema, event)`: Thêm một event vào component schema
- `addExposedState(schema, stateName)`: Thêm một state được expose vào component schema
- `addExposedMethod(schema, method)`: Thêm một method được expose vào component schema
- `validateSchema(schema)`: Kiểm tra tính hợp lệ của component schema
- `schemaToJson(schema)`: Chuyển đổi component schema thành JSON
- `jsonToSchema(json)`: Chuyển đổi JSON thành component schema

### CodeGenerator

- `generateComponentCode(schema, options)`: Tạo mã cho component từ schema
- `generateImports(schema, designSystem)`: Tạo imports cho component
- `generateProps(schema)`: Tạo props interface cho component
- `generateComponentBody(schema, template)`: Tạo body cho component
- `generateExposing(schema)`: Tạo mã cho exposed state và methods
- `assembleComponentFile(code)`: Tạo file component hoàn chỉnh

### ComponentBuilder

- `new GenComponentBuilder(type, name, options)`: Khởi tạo một component builder mới
- `addProp(name, propSchema)`: Thêm một prop vào component
- `addProps(props)`: Thêm nhiều props vào component
- `addChild(childSchema)`: Thêm một component con vào component
- `addChildren(childrenSchemas)`: Thêm nhiều component con vào component
- `addStyle(styleKey, styleValue)`: Thêm một style vào component
- `addStyles(styles)`: Thêm nhiều styles vào component
- `addEvent(event)`: Thêm một event vào component
- `addEvents(events)`: Thêm nhiều events vào component
- `exposeState(stateName)`: Expose một state của component
- `exposeStates(stateNames)`: Expose nhiều states của component
- `exposeMethod(method)`: Expose một method của component
- `exposeMethods(methods)`: Expose nhiều methods của component
- `setOptions(options)`: Cập nhật tùy chọn cho builder
- `build()`: Xây dựng và trả về component schema
- `generateCode()`: Tạo mã từ component schema
- `GenComponentBuilder.fromSchema(schema, options)`: Tạo một component builder từ schema có sẵn

## Tích hợp với Lowcoder

### Cách thêm GenCodeButton vào editor

1. Thêm component GenCodeButton vào thư mục `client/packages/lowcoder/src/components/`
2. Cập nhật file `editorView.tsx` để thêm nút GenCodeButton vào header
3. Cập nhật file `header.tsx` để hỗ trợ rightContent
4. Thêm các chuỗi dịch vào file i18n

### Cách sử dụng

1. Cài đặt dependencies:
   ```bash
   cd gencode
   npm install
   cd ../client
   yarn install
   ```

2. Khởi động Lowcoder: 
   ```bash
   cd client
   yarn start
   ```

3. Truy cập vào editor và nhấn vào nút "Tạo mã" trên thanh công cụ

## Đóng góp

Vui lòng đọc [CONTRIBUTING.md](CONTRIBUTING.md) để biết chi tiết về quy trình đóng góp.

## Giấy phép

Dự án này được cấp phép theo giấy phép MIT - xem file [LICENSE](LICENSE) để biết thêm chi tiết.