### Start Frontend Development Environment

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Steps to set up and start the frontend development server. This involves configuring hosts, installing dependencies, starting a local Nginx proxy using Docker, and then launching the frontend development server.

```bash
# 1. Configure hosts (Windows/Mac/Linux)
#    Append to /etc/hosts:
#    127.0.0.1 dev.appsmith.com

# 2. Enter the frontend directory and install dependencies
cd app/client
cp .env.example .env
yarn install

# 3. Start local Nginx proxy (requires Docker)
yarn start-proxy   # Start Nginx Docker container

# 4. Start frontend development server
yarn start         # Linux/Mac
# or
yarn start-win     # Windows

# Access: https://dev.appsmith.com
# Expected output: Compiled successfully! webpack compilation success message
```

--------------------------------

### Start Mobile (WeChat Mini-Program) Development

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Guide to setting up and running the mobile development environment for WeChat mini-programs. This involves configuring the backend API address and default application ID, then installing dependencies and starting the development build.

```bash
cd app/taro

# 1. Edit config/dev.js, configure backend API address and default application ID
# API_BASE_URL: '"http://192.168.x.x:8080/api/"'
# DEFAULT_APP: '"your-application-id"'

# 2. Install dependencies and start
yarn install
yarn dev:weapp   # Compile to WeChat mini-program, open the dist/weapp directory with WeChat DevTools
```

--------------------------------

### Start PagePlug Frontend Development (Windows)

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/README.md

Commands to configure hosts, set environment variables, and start the local Nginx Docker proxy and frontend service for PagePlug. Ensure Docker is installed.

```bash
// 配置 host
127.0.0.1 dev.appsmith.com

// 环境变量
cp .env.example .env

// 启动本地 nginx docker
cd app/client
yarn start-proxy

// 启动前端服务
yarn
yarn start-win
```

--------------------------------

### Create Datasource API (MySQL Example)

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Create a datasource connection. This example demonstrates creating a MySQL datasource with read-write mode, SSL enabled, and username/password authentication. The `pluginId` can be queried via `GET /api/v1/plugins`.

```bash
# 创建 MySQL 数据源
curl -X POST http://localhost/api/v1/datasources \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "name": "生产数据库",
    "pluginId": "mysql-plugin-id",
    "workspaceId": "64f1a2b3c4d5e6f7a8b9c0d2",
    "datasourceStorages": {
      "unused_env": {
        "datasourceConfiguration": {
          "connection": {
            "mode": "READ_WRITE",
            "ssl": { "authType": "DEFAULT" }
          },
          "endpoints": [{ "host": "db.example.com", "port": 3306 }],
          "authentication": {
            "authenticationType": "USERNAME_PASSWORD",
            "username": "app_user",
            "password": "db_password",
            "databaseName": "orders_db"
          }
        }
      }
    }
  }'
```

--------------------------------

### Start Backend Development Environment

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Instructions for setting up and running the backend development server. This includes configuring environment variables, compiling the project, and starting the development server. The backend listens on port 8080 by default.

```bash
cd app/server

# 1. Configure environment variables
cp envs/dev.env.example .env
# Edit .env, fill in the following required items:
# APPSMITH_MONGODB_URI="mongodb://localhost:27017/appsmith"
# APPSMITH_REDIS_URL="redis://localhost:6379"
# Optional (mini-program preview):
# CLOUDOS_WECHAT_APPID="your-wechat-appid"
# CLOUDOS_WECHAT_SECRET="your-wechat-secret"

# 2. Compile and start
mvn clean compile
bash ./build.sh -DskipTests
bash ./scripts/start-dev-server.sh

# Backend defaults to listening on port 8080
# Health check: curl http://localhost:8080/api/v1/health
```

--------------------------------

### Start PagePlug Mobile Development (Taro)

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/README.md

Instructions to configure development parameters, including the backend API URL and default app ID, and then start the Taro project for WeChat mini-program development.

```bash
cd app/taro

打开 config/dev.js 配置开发参数

// PagePlug 后端接口地址，本地开发时需要填写本机IP地址
API_BASE_URL: '"http://192.168.xxx.xxx:8080/api/"'

// 小程序默认展示的应用ID
DEFAULT_APP: '"应用ID"'

// 启动 Taro 项目
yarn
yarn dev:weapp
```

--------------------------------

### Info Callout Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Callout/Callout.mdx

Demonstrates the 'info' kind of Callout, used for providing additional context or explanations.

```javascript
<Canvas of={CalloutStories.CalloutInfoStory} />
```

--------------------------------

### Callout with Link Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Callout/Callout.mdx

Demonstrates a Callout that includes a link, directing users to external resources or documentation.

```javascript
<Canvas of={CalloutStories.CalloutWithLink} />
```

--------------------------------

### Start PagePlug Backend Development (Windows)

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/README.md

Steps to set up the PagePlug backend, including creating environment files, configuring MongoDB and Redis URIs, and building/starting the Java service. Requires Jdk11, Maven3, Mongo, and Redis.

```bash
// 使用 IDEA 打开工程
app/server

// 创建环境变量文件
cp envs/dev.env.example .env

// 打开.env，配置环境变量
APPSMITH_MONGODB_URI="你的Mongo实例地址"
APPSMITH_REDIS_URL="你的Redis实例地址"

//【可选】如果需要小程序预览功能，需要配置你的小程序信息
CLOUDOS_WECHAT_APPID=""
CLOUDOS_WECHAT_SECRET=""

// 构建 java 服务
mvn clean compile
bash ./build.sh -DskipTests

// 启动 java 服务
bash ./scripts/start-dev-server.sh
```

--------------------------------

### Warning Callout Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Callout/Callout.mdx

Demonstrates the 'warning' kind of Callout, used to alert users about potential issues or prompt specific actions.

```javascript
<Canvas of={CalloutStories.CalloutWarningStory} />
```

--------------------------------

### GET /api/v1/applications/home — Get Workspace Applications List

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieves a list of all applications within the current workspace, ordered by recent use, for home page display.

```APIDOC
## GET /api/v1/applications/home

### Description
Retrieves a list of all applications within the current workspace, ordered by recent use, for home page display.

### Method
GET

### Endpoint
/api/v1/applications/home

### Parameters
#### Query Parameters
- **workspaceId** (string) - Required - The ID of the workspace.

### Request Example
```bash
curl -X GET "http://localhost/api/v1/applications/home?workspaceId=64f1a2b3c4d5e6f7a8b9c0d2" \
  -H "Cookie: SESSION=your-session-cookie"
```

### Response
#### Success Response (200)
- **data** (array) - A list of applications with their IDs, names, and last deployed timestamps.

#### Response Example
```json
{
  "responseMeta": { "status": 200, "success": true },
  "data": [
    { "id": "66a74833...", "name": "工程管理系统", "lastDeployedAt": "2024-07-31T..." },
    { "id": "6322a6d6...", "name": "企业CRM系统", ... }
  ]
}
```
```

--------------------------------

### Success Callout Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Callout/Callout.mdx

Demonstrates the 'success' kind of Callout, used to celebrate successful operations and provide positive feedback.

```javascript
<Canvas of={CalloutStories.CalloutSuccessStory} />
```

--------------------------------

### Create a SQL Query Action

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Create a query action on a page, such as a SQL query, API request, or JS function. The results of these actions can be directly bound to components. This example demonstrates creating a SQL query action with dynamic bindings.

```bash
curl -X POST http://localhost/api/v1/actions \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "name": "getOrderList",
    "pageId": "66a74833284da125b39b5c5e",
    "datasource": { "id": "64f1a2b3c4d5e6f7a8b9c0d5" },
    "pluginType": "DB",
    "actionConfiguration": {
      "body": "SELECT id, user_id, total_amount, status, created_at FROM orders WHERE status = {{statusSelect.selectedOptionValue}} LIMIT {{pageSize.text}} OFFSET {{(pageNo.text - 1) * pageSize.text}} প্রশিক্ষ",
      "timeoutInMillisecond": 10000
    },
    "executeOnLoad": true,
    "dynamicBindingPathList": [
      { "key": "body" }
    ]
  }'
```

--------------------------------

### Deploy PagePlug with Docker

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Use Docker to deploy PagePlug privately. Ensure you have at least 4GB of RAM and 2 CPU cores. This command pulls and starts the community edition image, including MongoDB, Redis, and Nginx.

```bash
# Pull and start the community edition image (includes MongoDB, Redis, Nginx)
docker run -d --name pageplug \
  -p 80:80 \
  -v "$PWD/stacks:/appsmith-stacks" \
  -e APPSMITH_ENCRYPTION_PASSWORD="your-strong-password" \
  -e APPSMITH_ENCRYPTION_SALT="your-salt-value" \
  cloudosmicro/pageplug:v1.9.39

# View startup logs
docker logs -f pageplug

# Access address
# http://localhost
# The first access will guide you to create a super administrator account
```

--------------------------------

### Get Application Themes

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieves a list of system-built and custom themes for an application, used for consistent visual styling.

```APIDOC
## GET /api/v1/themes/applications/{applicationId}

### Description
Get a list of system-built and custom themes for the application, used to unify the application's visual style.

### Method
GET

### Endpoint
/api/v1/themes/applications/{applicationId}

### Parameters
#### Path Parameters
- **applicationId** (string) - Required - The ID of the application.

### Response
#### Success Response (200)
- **data** (array) - A list of theme objects.
  - **id** (string) - The ID of the theme.
  - **name** (string) - The name of the theme.
  - **isSystemTheme** (boolean) - Indicates if it's a system theme.
  - **properties** (object) - Theme customization properties.
    - **colors** (object)
      - **primaryColor** (string) - The primary color.
      - **backgroundColor** (string) - The background color.
    - **fontFamily** (object)
      - **appFont** (string) - The application font family.
    - **borderRadius** (object)
      - **appBorderRadius** (string) - The application border radius.
```

--------------------------------

### Error Callout Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Callout/Callout.mdx

Demonstrates the 'error' kind of Callout, used to alert users about critical issues requiring immediate attention.

```javascript
<Canvas of={CalloutStories.CalloutErrorStory} />
```

--------------------------------

### Get Application Theme List API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieves a list of system-built and custom themes for an application. Used to standardize the application's visual style.

```bash
curl -X GET \
  "http://localhost/api/v1/themes/applications/66a74833284da125b39b5c4f" \
  -H "Cookie: SESSION=your-session-cookie"
```

--------------------------------

### POST /api/v1/datasources — Create Datasource

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Creates a datasource connection. Supports over 25 types including MySQL, PostgreSQL, MongoDB, Redis, and REST API. The `pluginId` can be queried via `GET /api/v1/plugins`.

```APIDOC
## POST /api/v1/datasources

### Description
Creates a datasource connection. Supports over 25 types including MySQL, PostgreSQL, MongoDB, Redis, and REST API. The `pluginId` can be queried via `GET /api/v1/plugins`.

### Method
POST

### Endpoint
/api/v1/datasources

### Parameters
#### Request Body
- **name** (string) - Required - The name of the datasource.
- **pluginId** (string) - Required - The ID of the plugin for the datasource type.
- **workspaceId** (string) - Required - The ID of the workspace.
- **datasourceStorages** (object) - Required - Configuration details for the datasource.
  - **unused_env** (object) - Environment-specific storage configuration.
    - **datasourceConfiguration** (object) - The main configuration for the datasource.
      - **connection** (object) - Connection details.
        - **mode** (string) - Connection mode (e.g., "READ_WRITE").
        - **ssl** (object) - SSL configuration.
          - **authType** (string) - SSL authentication type.
      - **endpoints** (array) - List of endpoints for the datasource.
        - **host** (string) - The host of the endpoint.
        - **port** (integer) - The port of the endpoint.
      - **authentication** (object) - Authentication details.
        - **authenticationType** (string) - Type of authentication.
        - **username** (string) - Username for authentication.
        - **password** (string) - Password for authentication.
        - **databaseName** (string) - The name of the database.

### Request Example
```bash
# Create MySQL Datasource
curl -X POST http://localhost/api/v1/datasources \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "name": "生产数据库",
    "pluginId": "mysql-plugin-id",
    "workspaceId": "64f1a2b3c4d5e6f7a8b9c0d2",
    "datasourceStorages": {
      "unused_env": {
        "datasourceConfiguration": {
          "connection": {
            "mode": "READ_WRITE",
            "ssl": { "authType": "DEFAULT" }
          },
          "endpoints": [{ "host": "db.example.com", "port": 3306 }],
          "authentication": {
            "authenticationType": "USERNAME_PASSWORD",
            "username": "app_user",
            "password": "db_password",
            "databaseName": "orders_db"
          }
        }
      }
    }
  }'
```
```

--------------------------------

### Get Application Template List API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Fetches community-shared application templates. Templates can be filtered by component type, data source type, and use case.

```bash
curl -X GET \
  "http://localhost/api/v1/app-templates?functions=CRM&datasources=PostgreSQL" \
  -H "Cookie: SESSION=your-session-cookie"
```

--------------------------------

### Get All Actions for an Application

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Query the complete list of all unpublished actions within a specified application (edit mode).

```APIDOC
## GET /api/v1/actions?applicationId={id} — 获取应用所有动作

查询指定应用下所有未发布动作的完整列表（编辑态）。

```bash
curl -X GET \
  "http://localhost/api/v1/actions?applicationId=66a74833284da125b39b5c4f" \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应：包含所有 API、SQL 查询、JS 函数的动作列表
# { "data": [ { "id": "...", "name": "getOrderList", "pluginType": "DB", ... } ] }
```
```

--------------------------------

### Get Workspace Applications API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieve a list of all applications within the current workspace, ordered by recent use, suitable for homepage display. Includes application ID, name, and last deployed timestamp.

```bash
curl -X GET "http://localhost/api/v1/applications/home?workspaceId=64f1a2b3c4d5e6f7a8b9c0d2" \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应
# {
#   "responseMeta": { "status": 200, "success": true },
#   "data": [
#     { "id": "66a74833...", "name": "工程管理系统", "lastDeployedAt": "2024-07-31T..." },
#     { "id": "6322a6d6...", "name": "企业CRM系统", ... }
#   ]
# }
```

--------------------------------

### Get All Actions in an Application

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieve a comprehensive list of all unpublished actions within a specified application. This is useful for viewing all defined queries (API, SQL, JS) in the edit state.

```bash
curl -X GET \
  "http://localhost/api/v1/actions?applicationId=66a74833284da125b39b5c4f" \
  -H "Cookie: SESSION=your-session-cookie"
```

--------------------------------

### Get Application Templates

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieves a list of community-shared application templates, filterable by component type, data source type, and use case.

```APIDOC
## GET /api/v1/app-templates

### Description
Get a list of community-shared application templates. You can filter by component type, data source type, and usage scenario.

### Method
GET

### Endpoint
/api/v1/app-templates

### Parameters
#### Query Parameters
- **functions** (string) - Optional - Filter by component type (e.g., 'CRM').
- **datasources** (string) - Optional - Filter by data source type (e.g., 'PostgreSQL').

### Response
#### Success Response (200)
- **data** (array) - A list of application template objects.
  - **id** (string) - The ID of the template.
  - **title** (string) - The title of the template.
  - **description** (string) - A description of the template.
  - **widgets** (array) - List of widgets included in the template.
  - **datasources** (array) - List of data sources supported by the template.
```

--------------------------------

### Get Page Details API (Edit Mode)

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieve the complete DSL (Design System Language) layout data for a page, including all component configurations and binding relationships. The response contains the full component tree DSL.

```bash
curl -X GET http://localhost/api/v1/pages/66a74833284da125b39b5c5e \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应：包含完整的组件树 DSL
# {
#   "data": {
#     "id": "66a74833284da125b39b5c5e",
#     "name": "订单管理",
#     "layouts":[{
#       "id": "layout-id",
#       "dsl": {
#         "type": "CANVAS_WIDGET",
#         "children": [
#           { "type": "TABLE_WIDGET_V2", "widgetName": "Table1", "tableData": "{{Api1.data}}" }
#         ]
#       }
#     }]
#   }
# }
```

--------------------------------

### GET /api/v1/pages/{pageId} — Get Page Details (Edit Mode)

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieves the complete DSL (Design System Language) layout data for a page, including all component configurations and bindings.

```APIDOC
## GET /api/v1/pages/{pageId}

### Description
Retrieves the complete DSL (Design System Language) layout data for a page, including all component configurations and bindings.

### Method
GET

### Endpoint
/api/v1/pages/{pageId}

### Parameters
#### Path Parameters
- **pageId** (string) - Required - The ID of the page.

### Request Example
```bash
curl -X GET http://localhost/api/v1/pages/66a74833284da125b39b5c5e \
  -H "Cookie: SESSION=your-session-cookie"
```

### Response
#### Success Response (200)
- **data** (object) - Contains the page details and its layout DSL.
  - **id** (string) - The ID of the page.
  - **name** (string) - The name of the page.
  - **layouts** (array) - An array of layout objects, each containing an ID and DSL.
    - **dsl** (object) - The Design System Language defining the page's components and structure.

#### Response Example
```json
{
  "data": {
    "id": "66a74833284da125b39b5c5e",
    "name": "订单管理",
    "layouts": [{
      "id": "layout-id",
      "dsl": {
        "type": "CANVAS_WIDGET",
        "children": [
          { "type": "TABLE_WIDGET_V2", "widgetName": "Table1", "tableData": "{{Api1.data}}" }
        ]
      }
    }]
  }
}
```
```

--------------------------------

### Import Application API (JSON File)

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Import a complete application from an exported JSON file. This endpoint supports importing demo projects, with JSON files in the `/demo` directory usable directly.

```bash
curl -X POST \
  "http://localhost/api/v1/applications/import/64f1a2b3c4d5e6f7a8b9c0d2" \
  -H "Cookie: SESSION=your-session-cookie" \
  -F "file=@./demo/入门案例/api使用相关/APIDemo.json"

# 预期响应
# {
#   "responseMeta": { "status": 200, "success": true },
#   "data": {
#     "application": { "id": "...", "name": "API示例应用" },
#     "isPartialImport": false,
#     "unConfiguredDatasourceList": []
#   }
# }
```

--------------------------------

### Disabled Tooltip Example

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/headless/src/components/Tooltip/Tooltip.stories.mdx

Illustrates that a tooltip will not appear if its trigger element is disabled. This is useful for conditionally hiding tooltips.

```javascript
# Disabled

If the trigger is disabled, the tooltip will not be displayed.

<Canvas>
  <Story name="Tooltip disabled">
    <Tooltip>
      <TooltipTrigger>
        <Button isDisabled>Disabled</Button>
      </TooltipTrigger>
      <TooltipContent disabled>My tooltip</TooltipContent>
    </Tooltip>
  </Story>
</Canvas>
```

--------------------------------

### Create New Maven Plugin Module

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/contributions/ServerCodeContributionsGuidelines/PluginCodeContributionsGuidelines.md

Use this Maven command to generate a new plugin module. Replace 'helloWorldPlugin' with your desired plugin name.

```bash
mvn archetype:generate \
-DgroupId=com.external.plugins \
-DartifactId=helloWorldPlugin \
-DarchetypeArtifactId=maven-archetype-quickstart \
-DinteractiveMode=false
```

--------------------------------

### Basic Tooltip Implementation

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/widgets/src/components/Tooltip/Tooltip.stories.mdx

This snippet shows the fundamental structure for implementing a tooltip with a trigger and content. It requires importing Tooltip, TooltipTrigger, and TooltipContent components.

```javascript
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import { Button } from "../Button";
import { ButtonGroup } from "../ButtonGroup";
import { Tooltip, TooltipTrigger, TooltipContent } from "./";

<Meta
  title="Design-system/widgets/Tooltip"
  component={Tooltip}
  args={{
    open: undefined,
    onOpenChange: undefined,
  }}
/>

export const Template = (args) => {
  return (
    <Tooltip {...args}>
      <TooltipTrigger>
        <Button>My trigger</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
  );
};

# Tooltip

A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.

<Canvas>
  <Story name="Tooltip">{Template.bind({})}</Story>
</Canvas>
```

--------------------------------

### Test Data Source Connectivity

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Use this endpoint to verify if a data source configuration can successfully connect before saving. It requires the datasource ID (or null for a new one) and its configuration details.

```bash
curl -X POST http://localhost/api/v1/datasources/test \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "datasourceId": "ds-id-or-null-for-new",
    "datasourceConfiguration": {
      "endpoints": [{ "host": "db.example.com", "port": 5432 }],
      "authentication": {
        "authenticationType": "USERNAME_PASSWORD",
        "username": "admin",
        "password": "secret",
        "databaseName": "mydb"
      }
    }
  }'
```

--------------------------------

### Connect Application to Git Repository

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Bind an application to a remote Git repository (GitHub, GitLab, Bitbucket, etc.) to enable application version management. This requires specifying the remote URL and optionally Git profile details.

```bash
curl -X POST \
  "http://localhost/api/v1/git/connect/app/66a74833284da125b39b5c4f" \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -H "Origin: http://localhost" \
  -d '{
    "remoteUrl": "git@github.com:yourorg/pageplug-app.git",
    "gitProfile": {
      "authorName": "张三",
      "authorEmail": "developer@example.com",
      "useDefaultProfile": false
    }'
```

--------------------------------

### Tooltip Placement Options

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/headless/src/components/Tooltip/Tooltip.stories.mdx

Demonstrates how to control the tooltip's position relative to its trigger using the `placement` prop. Available options include 'left', 'top', 'bottom', and 'right'.

```javascript
# Placement

The placement of the tooltip can be changed by passing the `placement` prop.

<Canvas>
  <Story name="Tooltip placement">
    <Tooltip placement="left">
      <TooltipTrigger>
        <button>Left</button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
    <Tooltip placement="top">
      <TooltipTrigger>
        <button>Top</button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
    <Tooltip placement="bottom">
      <TooltipTrigger>
        <button>Bottom</button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
    <Tooltip placement="right">
      <TooltipTrigger>
        <button>Right</button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
  </Story>
</Canvas>
```

--------------------------------

### Get Current User Info API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

API endpoint to retrieve the full profile of the currently logged-in user, including permissions and preferences.

```bash
curl -X GET http://localhost/api/v1/users/me \
  -H "Cookie: SESSION=your-session-cookie"

# Expected response
# {
#   "responseMeta": { "status": 200, "success": true },
#   "data": {
#     "email": "developer@example.com",
#     "name": "张三",
#     "isSuperUser": false,
#     "isAdmin": false,
#     "photoId": null,
#     "enableTelemetry": true
#   }
# }
```

--------------------------------

### Basic Tooltip Implementation

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/headless/src/components/Tooltip/Tooltip.stories.mdx

This snippet shows the fundamental structure for creating a tooltip. It includes a trigger element and the tooltip content. Ensure the Tooltip, TooltipTrigger, and TooltipContent components are imported.

```javascript
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import { Tooltip, TooltipTrigger, TooltipContent } from "./";
import { Button } from "../Button";

<Meta
  title="Design-system/headless/Tooltip"
  component={Tooltip}
  args={{
    open: undefined,
    onOpenChange: undefined,
  }}
/>

export const Template = (args) => {
  return (
    <Tooltip {...args}>
      <TooltipTrigger>
        <button>My trigger</button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
  );
};

# Tooltip

A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.

<Canvas>
  <Story name="Tooltip">{Template.bind({})}</Story>
</Canvas>
```

--------------------------------

### Create Application API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

API endpoint to create a new low-code application within a specified workspace. The system automatically creates a default homepage upon successful creation. Requires the session cookie.

```bash
curl -X POST http://localhost/api/v1/applications \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{ "name": "工程管理系统", "workspaceId": "64f1a2b3c4d5e6f7a8b9c0d2", "color": "#F6F0E8", "icon": "bag", "layoutSystemType": "FIXED" }'

# Expected response (HTTP 201)
# {

```

--------------------------------

### Create a Workspace using REST API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

This bash command demonstrates how to create a new workspace using the POST /api/v1/workspaces endpoint. It requires JSON content type and a session cookie for authentication. The expected response includes the new workspace ID and user permissions.

```bash
curl -X POST http://localhost/api/v1/workspaces \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "name": "研发团队",
    "website": "https://example.com",
    "email": "dev@example.com"
  }'

# 预期响应（HTTP 201）
# {
#   "responseMeta": { "status": 201, "success": true },
#   "data": {
#     "id": "workspace-new-id",
#     "name": "研发团队",
#     "userPermissions": ["read:workspaces", "manage:workspaces"]
#   }
# }
```

--------------------------------

### Get Database Structure

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieve table structure information (table names, column names, column types) for a data source, used for auto-completion in the editor.

```APIDOC
## GET /api/v1/datasources/{datasourceId}/structure — 获取数据库结构

获取数据源的表结构信息（表名、字段名、字段类型），用于编辑器中的自动补全提示。

```bash
curl -X GET \
  "http://localhost/api/v1/datasources/64f1a2b3c4d5e6f7a8b9c0d5/structure?ignoreCache=false" \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应
# {
#   "data": {
#     "tables": [
#       {
#         "name": "orders",
#         "type": "TABLE",
#         "columns": [
#           { "name": "id", "type": "INT", "isAutogenerated": true },
#           { "name": "user_id", "type": "INT" },
#           { "name": "total_amount", "type": "DECIMAL(10,2)" },
#           { "name": "created_at", "type": "DATETIME" }
#         ],
#         "templates": [ { "title": "SELECT", "body": "SELECT * FROM orders LIMIT 10;" } ]
#       }
#     ]
#   }
# }
```
```

--------------------------------

### Execute an Action

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Manually trigger the execution of an action in edit or preview mode. This endpoint accepts `multipart/form-data` and returns the query results. It allows specifying parameters for the action execution.

```bash
curl -X POST http://localhost/api/v1/actions/execute \
  -H "Cookie: SESSION=your-session-cookie" \
  -F 'actionId=64f1a2b3c4d5e6f7a8b9c0d7' \
  -F 'viewMode=false' \
  -F 'paramProperties={}' \
  -F 'params=[{"key":"statusSelect.selectedOptionValue","value":"PENDING"}]'
```

--------------------------------

### Publish Application API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Use this endpoint to publish an edited application, making it visible to visitors. The expected response indicates success.

```bash
curl -X POST http://localhost/api/v1/applications/publish/66a74833284da125b39b5c4f \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应
# { "responseMeta": { "status": 200, "success": true }, "data": true }
```

--------------------------------

### Fork Application API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Duplicate an application into another workspace, preserving all its pages and action configurations. The response provides import information for the newly created application.

```bash
curl -X POST \
  "http://localhost/api/v1/applications/66a74833284da125b39b5c4f/fork/64f1a2b3c4d5e6f7a8b9c0d3" \
  -H "Cookie: SESSION=your-session-cookie"

# 预期响应：返回新应用的导入信息
# { "responseMeta": { "status": 200 }, "data": { "application": { "id": "new-app-id", ... } } }
```

--------------------------------

### Get Database Structure

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Retrieve table structure information (table names, column names, and types) for a given data source. This is useful for auto-completion in editors. The `ignoreCache` parameter can be set to `false` to force a refresh.

```bash
curl -X GET \
  "http://localhost/api/v1/datasources/64f1a2b3c4d5e6f7a8b9c0d5/structure?ignoreCache=false" \
  -H "Cookie: SESSION=your-session-cookie"
```

--------------------------------

### Display Border Radius Tokens

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/theming/src/stories/Dimension.mdx

This React component displays border radius tokens from the theme. It utilizes `useTheme` to get theme properties and `TokenTable` for rendering. The `StyledSquarePreview` component is used to visualize the applied border-radius CSS variable.

```javascript
export const BorderRadius = () => {
  const { theme } = useTheme();
  console.log(theme);
  const { borderRadiusElevation } = theme;
  return (
    <ThemeProvider theme={theme}>
      <TokenTable
        prefix="border-radius-elevation"
        tokens={borderRadiusElevation}
      >
        {(cssVar) => (
          <StyledSquarePreview
            style={{
              borderRadius: cssVar,
            }}
          />
        )}
      </TokenTable>
    </ThemeProvider>
  );
};
```

--------------------------------

### Test Data Source Connectivity

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Verify that a data source configuration can successfully connect before saving it.

```APIDOC
## POST /api/v1/datasources/test — 测试数据源连通性

在保存前验证数据源配置是否可以成功连接。

```bash
curl -X POST http://localhost/api/v1/datasources/test \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d 
    "{
    "datasourceId": "ds-id-or-null-for-new",
    "datasourceConfiguration": {
      "endpoints": [{ "host": "db.example.com", "port": 5432 }],
      "authentication": {
        "authenticationType": "USERNAME_PASSWORD",
        "username": "admin",
        "password": "secret",
        "databaseName": "mydb"
      }
    }
  }"

# 成功响应
# { "data": { "success": true, "invalids": [], "messages": [] } }

# 失败响应
# { "data": { "success": false, "invalids": ["Connection timed out: db.example.com:5432"] } }
```
```

--------------------------------

### Get WeChat Login QR Code API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

PagePlug extension API to obtain QR code information required for WeChat扫码登录 (scan to log in). This requires configuring WeChat Official Platform AppID/Secret. The response includes the QR code URL and a state parameter.

```bash
curl -X GET http://localhost/api/v1/wxLogin/code

# Expected response
# {
#   "responseMeta": { "status": 200, "success": true },
#   "data": {
#     "qrcodeUrl": "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=...",
#     "state": "random-state-string"
#   }
# }
```

--------------------------------

### POST /api/v1/applications/{applicationId}/fork/{workspaceId} — Fork Application

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Copies an application to another workspace, preserving all page and action configurations.

```APIDOC
## POST /api/v1/applications/{applicationId}/fork/{workspaceId}

### Description
Copies an application to another workspace, preserving all page and action configurations.

### Method
POST

### Endpoint
/api/v1/applications/{applicationId}/fork/{workspaceId}

### Parameters
#### Path Parameters
- **applicationId** (string) - Required - The ID of the application to fork.
- **workspaceId** (string) - Required - The ID of the target workspace.

### Request Example
```bash
curl -X POST \
  "http://localhost/api/v1/applications/66a74833284da125b39b5c4f/fork/64f1a2b3c4d5e6f7a8b9c0d3" \
  -H "Cookie: SESSION=your-session-cookie"
```

### Response
#### Success Response (200)
- **data** (object) - Contains import information for the new application.
  - **application** (object) - Details of the newly forked application.

#### Response Example
```json
{ "responseMeta": { "status": 200 }, "data": { "application": { "id": "new-app-id", ... } } }
```
```

--------------------------------

### Create Action

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Create a query action (SQL query, API request, JS function, etc.) on a page. Action results can be directly bound to components.

```APIDOC
## POST /api/v1/actions — 创建动作

在页面上创建一个查询动作（SQL 查询、API 请求、JS 函数等），动作结果可直接绑定到组件。

```bash
# 创建一个 SQL 查询动作
curl -X POST http://localhost/api/v1/actions \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d 
    "{
    "name": "getOrderList",
    "pageId": "66a74833284da125b39b5c5e",
    "datasource": { "id": "64f1a2b3c4d5e6f7a8b9c0d5" },
    "pluginType": "DB",
    "actionConfiguration": {
      "body": "SELECT id, user_id, total_amount, status, created_at FROM orders WHERE status = {{statusSelect.selectedOptionValue}} LIMIT {{pageSize.text}} OFFSET {{(pageNo.text - 1) * pageSize.text}};
",
      "timeoutInMillisecond": 10000
    },
    "executeOnLoad": true,
    "dynamicBindingPathList": [
      { "key": "body" }
    ]
  }"
```
```

--------------------------------

### Calculate User Sizing and Density Ratio

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/theming/src/stories/Dimension.mdx

This code illustrates how user-defined density and sizing preferences are combined with predefined ratios to influence token calculations. The `userDensityRatio` and `userSizingRatio` can vary per scale, affecting how much density or sizing adjustments impact different spacing types.

```javascript
const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;

const scales = calculateScales(
 {
  V: V * ratio,
  ...rest,
 },
);
```

--------------------------------

### POST /api/v1/applications/import/{workspaceId} — Import Application (JSON File)

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Imports a complete application from an exported JSON file, supporting demo project imports.

```APIDOC
## POST /api/v1/applications/import/{workspaceId}

### Description
Imports a complete application from an exported JSON file, supporting demo project imports. JSON files in the `/demo` directory can be used directly with this endpoint.

### Method
POST

### Endpoint
/api/v1/applications/import/{workspaceId}

### Parameters
#### Path Parameters
- **workspaceId** (string) - Required - The ID of the workspace to import the application into.

#### Request Body
- **file** (file) - Required - The JSON file containing the application data.

### Request Example
```bash
curl -X POST \
  "http://localhost/api/v1/applications/import/64f1a2b3c4d5e6f7a8b9c0d2" \
  -H "Cookie: SESSION=your-session-cookie" \
  -F "file=@./demo/入门案例/api使用相关/APIDemo.json"
```

### Response
#### Success Response (200)
- **data** (object) - Contains information about the imported application.
  - **application** (object) - Details of the imported application.
  - **isPartialImport** (boolean) - Indicates if the import was partial.
  - **unConfiguredDatasourceList** (array) - List of datasources that were not configured.

#### Response Example
```json
{
  "responseMeta": { "status": 200, "success": true },
  "data": {
    "application": { "id": "...", "name": "API示例应用" },
    "isPartialImport": false,
    "unConfiguredDatasourceList": []
  }
}
```
```

--------------------------------

### Storybook Configuration

Source: https://github.com/cloudtogo/pageplug/blob/open-v1.9.39/app/client/packages/design-system/ads/src/Collapsible/Collapsible.mdx

This snippet shows the basic Storybook configuration for the Collapsible component, importing stories and setting metadata.

```javascript
import { Canvas, Meta } from "@storybook/blocks";

import * as CollapsibleStories from "./Collapsible.stories";

<Meta of={CollapsibleStories} />
```

--------------------------------

### AppThemingApi - Application Theming

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Client for managing application themes. Allows fetching and updating the current theme.

```APIDOC
## AppThemingApi

Manages the theming of an application.

### Methods

#### `fetchSelected(applicationId: string, mode: string)`

Fetches the currently selected theme for the application.

- **applicationId** (string) - The ID of the application.
- **mode** (string) - The application mode (e.g., 'EDIT').

Returns the current theme object.

### `updateTheme(applicationId: string, theme: AppTheme)`

Updates the theme of the application.

- **applicationId** (string) - The ID of the application.
- **theme** (AppTheme) - The new theme object to apply.

Returns the updated theme object.
```

--------------------------------

### Create Page API

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Create a new page within an application. Options include creating a blank page or automatically generating a CRUD page based on a database table. The response includes the new page's details.

```bash
curl -X POST http://localhost/api/v1/pages \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -d '{
    "applicationId": "66a74833284da125b39b5c4f",
    "name": "订单管理",
    "isDefault": false
  }'

# 预期响应（HTTP 201）
# {
#   "responseMeta": { "status": 201 },
#   "data": {
#     "id": "66a74833284da125b39b5c5e",
#     "name": "订单管理",
#     "slug": "ding-dan-guan-li",
#     "applicationId": "66a74833284da125b39b5c4f",
#     "layouts": [ { "id": "...", "dsl": { "type": "CANVAS_WIDGET", "children": [] } } ]
#   }
# }
```

--------------------------------

### Connect Git Repository

Source: https://context7.com/cloudtogo/pageplug/llms.txt

Bind an application to a remote Git repository, supporting GitHub, GitLab, Bitbucket, etc., for application version management.

```APIDOC
## POST /api/v1/git/connect/app/{applicationId} — 连接 Git 仓库

将应用与远程 Git 仓库绑定，支持 GitHub、GitLab、Bitbucket 等，实现应用版本管理。

```bash
curl -X POST \
  "http://localhost/api/v1/git/connect/app/66a74833284da125b39b5c4f" \
  -H "Content-Type: application/json" \
  -H "Cookie: SESSION=your-session-cookie" \
  -H "Origin: http://localhost" \
  -d 
    "{
    "remoteUrl": "git@github.com:yourorg/pageplug-app.git",
    "gitProfile": {
      "authorName": "张三",
      "authorEmail": "developer@example.com",
      "useDefaultProfile": false
    }
  }"
```
```