@cloudbase/weda-ui 0.2.14 → 0.2.17

package/README.md

@@ -1,16 +1,12 @@
-# 腾讯云微搭源码组件库
+# 腾讯云微搭低代码-官方组件库
 
-[腾讯云微搭低代码]平台支持你将自己的组件导入成低码平台可运行的自定义代码组件，本项目即是腾讯云微搭低代码平台的组件库模板，介绍如何编写一个可以在微搭使用的代码组件库。
+包含微搭低代码平台基础的源码组件和基于源码组件开发的低码组件。
 
-当前支持[小程序组件]和 [react] 组件。
-
-## 组件库
-
-微搭组件库使用各平台/框架标准的组件格式，通过类型文件描述好组件的行为、出参、入参及元数据等信息和微搭平台做对接。
+微搭组件库使用各平台/框架标准的组件格式，通过类型文件描述好组件的行为、出参、入参及元数据等信息和微搭平台做对接。当前支持在小程序和 web 平台上使用。
 
 **多平台原生实现**
 
-为了保证良好的性能，当前微搭平台没有对小程序和 web 做跨端的自动适配。如果希望你的组件能够运行在多端，需要自行针对小程序和 web 原生实现两套组件。
+为了保证良好的性能，当前微搭平台没有对小程序和 web 做跨端的自动适配。目前采用多平台原生实现。
 
 ## 项目目录
 
@@ -18,41 +14,41 @@
 .
 ├── .storybook              # storybook 配置目录
 ├── cloudbaserc.json        # 组件库配置
+├── lowcode-comps           # 低码组件内容
 └── src
     ├── test                # 测试目录
-    ├── configs             # 组件类型申明目录
-    │   ├── actions         # 组件库方法类型申明
-    │   ├── components      # 组件目录类型申明
-    │   └── index.js        # 组件类型申明的入口
+    ├── configs             # 组件类型声明目录
+    │   ├── actions         # 组件库方法类型声明
+    │   ├── components      # 组件类型声明
+    │   └── index.js        # 组件类型声明入口
     ├── mp                  # 小程序组件
     │   ├── actions         # 小程序组件方法实现
     │   ├── components      # 小程序组件实现
     │   └── index.json      # 小程序组件入口
     ├── stories             # 组件 story / 测试
-    └── web                 # web（react） 组件
+    └── web                 # web 组件
         ├── actions         # web 组件方法实现
         ├── components      # web 组件实现
         └── index.js        # web 组件入口
+├── cloudbaserc.json        # 组件库配置文件
 ```
 
-## 组件库配置
-
-当前使用 `cloudbaserc.json` 文件来申明组件库配置。
-
 ## 开发
 
 组件库开发前置依赖：
 
-1. 进入组件库更目录，安装依赖： `npm i` or `yarn`，使用 `npm` 安装依赖可能会有依赖冲突问题，可以使用 `npm i --legacy-peer-deps` 来解决。
+1. 进入组件库根目录，安装依赖： `npx npm@6 i` 使用 `npm@6` 安装依赖可能会有依赖冲突问题，可以使用 `npm i --legacy-peer-deps` 来解决。用 npm@6 是为了跟构建保持一致
 2. 安装云开发命令行工具：`npm i -g @cloudbase/cli` or `yarn global add @cloudbase/cli`
 3. 登录云开发命令行：`tcb login` 并输入密码
-4. 去腾讯云微搭低码控制台创建组件库
+4. 在腾讯云微搭低码控制台创建组件库，库名应该和 cloudbaserc.json 配置的 `name` 中一致（默认是`weda`）
+
+> 下面的内容是源码组件库的开发文档，低码组件库开发请查看[lowcode-comps 下的文档](lowcode-comps/README.md)
 
 ### 编写组件
 
-编写能在低码平台运行的组件需要各自平台的**标准组件源码**和**组件描述**。
+编写能在低码平台运行的组件需要各自平台的**标准组件源码**和**组件描述**。具体可参考 [实现自定义 button 组件 | 云开发 CloudBase - 一站式后端云服务](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comp)
 
-#### 通用属性
+#### 处理组件通用属性
 
 对于每个组件，除了自己定义的属性生效外，在微搭平台运行时有可能会有些公共属性从平台传入。对于小程序平台组件默认情况下不需要处理这些通用属性，对于 react 组件可以额外的将通用的属性透传到具体实现的节点中。
 如：
@@ -115,54 +111,17 @@ export default function Container({ children, events, ...args }) {
 }
 ```
 
-#### 运行时框架接口
+#### 调用运行时框架接口
 
-如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可以。。。
-//TODO
+如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可以参考 [应用客户端 SDK](https://docs.cloudbase.net/lowcode/framework/app/app) 以及 [在应用中使用数据源及其他后端服务](https://docs.cloudbase.net/lowcode/datasource/usage)
 
-#### 组件描述
+#### 编写组件描述文件
 
 当前编写的组件都是各个平台的标准组件，他们和微搭低码平台需要一个配置来互相连接起来。
 
 组件配置默认存放在 `src/configs` 目录下。
 
-具体编写配置时可以使用 schema: https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json
-
-一个示例：
-
-```json
-{
-  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
-  "data": {
-    "properties": {
-      "text": {
-        "title": "文本内容",
-        "type": "string",
-        "default": "请在此输入内容..",
-        "description": "文本内容"
-      },
-      "maxLines": {
-        "title": "最大显示行数",
-        "type": "number",
-        "description": "显示最大行数",
-        "default": 2
-      },
-      "space": {
-        "title": "连续空格",
-        "type": "boolean",
-        "description": "是否显示连续空格",
-        "default": false
-      }
-    }
-  },
-  "events": [{ "title": "点击", "name": "tap" }],
-  "meta": {
-    "title": "文本",
-    "description": "文本内容",
-    "category": "基础"
-  }
-}
-```
+### 调试组件库
 
 组件编写完成后，在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：
 
@@ -170,115 +129,38 @@ export default function Container({ children, events, ...args }) {
 tcb lowcode debug
 ```
 
-组件开发完成后，提交组件到微搭低代码平台：
+### 组件自动化测试
 
-```
-tcb lowcode publish
-```
+微搭官方组件库需要单元测试覆盖率达到 80% 以上才能发布，我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。
 
-组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
+编写完测试用例后运行 `npm test` 执行测试命令。
 
-#### 事件触发与监听
+组件测试请参考：
 
-以上一个章节 **组件描述** 里声明的 `tap` 事件为例, 演示如何在源码里触发事件。
+- <https://github.com/wechat-miniprogram/miniprogram-simulate>
+- <https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html>
+- <https://jestjs.io/docs/snapshot-testing>
+- <https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/>
 
-- 在 web 组件内部触发事件
+### 发布组件库
 
-```js
-export default function Container({ children, events, ...args }) {
-  function onClick(e) {
-    /**
-     * 事件数据, 开发者自定义
-     * 监听者可以在回调函数的 event.detail 获取到
-     */
-    const detail = {
-      value: e.target.value,
-    };
-    /**
-     * 事件配置, 目前只有 originEvent
-     * 监听者可以在回调函数的 event.originEvent 获取到
-     */
-    const option = {
-      originEvent: e,
-    };
-    events.tap(detail, option);
-  }
+组件开发完成后，提交组件到微搭低代码平台，该操作会将组件发布在自己的个人账号下，可以在应用中预览
 
-  return (
-    <div onClick={onClick} {...args}>
-      {children}
-    </div>
-  );
-}
 ```
-
-- 在小程序组件内部触发事件
-
-  //TODO
-
-- 在低码编辑器里绑定事件
-
-```js
-export function handleEvent({ event, data }) {
-  // 组件内部抛出的 detail
-  console.log(event.detail);
-  // 组件内部抛出的 option.originEvent
-  console.log(event.originEvent);
-}
+tcb lowcode publish
 ```
 
-### 指定组件入口
-
-#### 指定组件的类型声明入口
-
-使用通用的 `import` 和 `export`，在 **configs/index.js** 里指定入口。
-
-#### 指定组件的 web 实现入口
-
-使用通用的 `import` 和 `export`，在 **web/index.js** 里指定入口。
-
-#### 指定组件的小程序实现入口
-
-使用组件名和组件路径的方式，在 **mp/index.json** 里指定入口。
-
-- 以小程序自定义组件的方式，实现组件
-
-```json
-// 复杂写法, 不推荐
-{
-  "components": {
-    "Button": {
-      "type": "custom",
-      "path": "components/button/index"
-    }
-  }
-}
-// 简单写法, 推荐
-{
-  "components": {
-    "Button": "components/button/index"
-  }
-}
-```
+如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
 
-- 以小程序原生组件的方式，关联组件
+### 更多参考信息
 
-```json
-{
-  "components": {
-    "Slot": {
-      "type": "native",
-      "path": "slot"
-    }
-  }
-}
-```
+组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
 
 ## 其他
 
 为了让你的组件开发工作更加便捷和稳定，我们集成了 [storybook] 及组件测试工具来辅助组件的开发。虽然 storybook 和组件测试不是必须的，我们仍然建议你使用他们来保证组件始终工作正常。
 
-### 使用 storybook 本地开发
+### 使用 storybook 本地预览组件
 
 对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
 
@@ -289,19 +171,7 @@ export function handleEvent({ event, data }) {
 
 对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
 
-### 组件测试
-
-我们建议你为你的定义组件编写必要的测试。我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。
-对于 web 组件我们建议利用编写的 [story 来进行组件测试](https://storybook.js.org/docs/react/workflows/testing-with-storybook)。
-
-编写完测试用例后运行 `npm test` 执行测试命令。
-
-组件测试请参考：
-
-- https://github.com/wechat-miniprogram/miniprogram-simulate
-- https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html
-- https://jestjs.io/docs/snapshot-testing
-- https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/
+- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 <http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389>
 
 [腾讯云微搭低代码]: (https://cloud.tencent.com/product/weda)
 [小程序组件]: (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
@@ -309,3 +179,7 @@ export function handleEvent({ event, data }) {
 [storybook]: (https://storybook.js.org/)
 [http 调用]: (https://developers.weixin.qq.com/miniprogram/dev/devtools/http.html)
 [story]: (https://storybook.js.org/docs/react/get-started/whats-a-story)
+
+```
+
+```

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.14",
+  "version": "0.2.17",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
+  "engines": {
+    "node": "^14.13.1 || >=16.0.0"
+  },
   "files": [
     "src",
     "!src/test",
@@ -19,8 +22,21 @@
     "dev": "tcb lowcode debug",
     "build:cli": "tcb lowcode build",
     "build:analyze": "cross-env ANALYZER=1 tcb lowcode build",
-    "test": "jest test --env=jsdom",
+    "test": "jest test --env=jsdom --detectOpenHandles",
+    "test:jest": "jest test --env=jsdom --detectOpenHandles",
     "test:watch": "jest test --env=jsdom --watch",
+    "test:e2e": "npx cypress run-ct",
+    "test:all": "npm run test && npm run test:e2e",
+    "e2e": "npx cypress open-ct",
+    "pretest:all": "rimraf .nyc_output || true",
+    "posttest:all": "npm run report:combined",
+    "mkdir:reports": "mkdir reports || true",
+    "precopy:reports": "npm run mkdir:reports",
+    "copy:reports": "cp cypress-coverage/coverage-final.json reports/from-cypress.json && cp jest-coverage/coverage-final.json reports/from-jest.json",
+    "precombine:reports": "npm run copy:reports && mkdir .nyc_output || true",
+    "combine:reports": "npx nyc merge reports && mv coverage.json .nyc_output/out.json",
+    "prereport:combined": "npm run combine:reports",
+    "report:combined": "npx nyc report --reporter lcov --reporter text --reporter html --report-dir coverage",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "lint": "eslint src --fix",
@@ -41,15 +57,19 @@
   "dependencies": {
     "@cloudbase/ui-react": "^1.0.4",
     "@loadable/component": "^5.15.2",
-    "@react-hookz/web": "^12.0.0",
+    "@react-hookz/web": "^12.3.0",
+    "@tcwd/style-wedatheme": "^1.0.0",
     "@use-gesture/react": "^10.2.4",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",
     "dayjs": "^1.10.7",
+    "echarts": "^5.3.0",
     "lodash.isequal": "^4.5.0",
     "object.fromentries": "^2.0.5",
     "prop-types": "^15.7.2",
     "react-easy-swipe": "0.0.22",
+    "spark-md5": "^3.0.2",
+    "tdesign-icons-react": "0.0.8",
     "tea-component": "^2.7.3",
     "uuid": "8.3.2",
     "weui": "^2.4.4",
@@ -65,6 +85,10 @@
     "@cloudbase/lowcode-build-dependence": "^0.9.0",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^13.2.0",
+    "@cypress/code-coverage": "^3.9.12",
+    "@cypress/react": "^5.12.1",
+    "@cypress/webpack-dev-server": "~1.8.0",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@size-limit/preset-big-lib": "^7.0.5",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
@@ -77,36 +101,39 @@
     "@types/jest": "^27.0.3",
     "@types/resize-observer-browser": "^0.1.6",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
+    "babel-plugin-istanbul": "^6.1.1",
+    "canvas": "^2.9.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.4.1",
-    "eslint-config-tencent": "^1.0.2",
-    "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-react": "^7.27.1",
+    "cypress": "~9.5.1",
+    "eslint": "^8.9.0",
+    "eslint-config-tencent": "^1.0.3",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-jest": "^26.1.2",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-rulesdir": "^0.2.1",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.5",
+    "jest": "^27.5.1",
     "less": "^4.1.2",
     "miniprogram-simulate": "^1.4.3",
     "nano-staged": "^0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
     "react-test-renderer": "^17.0.2",
+    "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
     "size-limit": "^7.0.5",
     "ts-jest": "^27.1.1",
     "ts-loader": "^8.2.0",
     "typescript": "^4.5.4",
-    "webpack": "4.44.2"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react",
-      "@babel/preset-typescript"
-    ]
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3",
+    "zx": "^5.2.0"
   },
   "nano-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -117,7 +144,12 @@
     {
       "path": ".temp/dist/*.main.*",
       "webpack": false,
-      "limit": "700 KB"
+      "limit": "970 KB"
     }
-  ]
+  ],
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "excludeAfterRemap": false,
+    "report-dir": "cypress-coverage"
+  }
 }

package/src/configs/components/calendar.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+  "data": {
+    "properties": {
+      "initValue": {
+        "type": "date",
+        "title": "日历展示时间",
+        "x-category": "基础属性",
+        "x-index": 1
+      },
+      "configData": {
+        "type": "array",
+        "title": "展示配置",
+        "x-category": "基础属性",
+        "x-index": 2,
+        "items": {
+          "type": "object",
+          "properties": {
+            "matchDate": {
+              "title": "对应日期",
+              "type": "date"
+            },
+            "disabled": {
+              "title": "是否置灰",
+              "type": "string",
+              "enum": [
+                {
+                  "label": "是",
+                  "value": "true"
+                },
+                {
+                  "label": "否",
+                  "value": "false"
+                }
+              ]
+            },
+            "marked": {
+              "title": "打点标记",
+              "type": "string",
+              "enum": [
+                {
+                  "label": "红色",
+                  "value": "#E34D59"
+                },
+                {
+                  "label": "绿色",
+                  "value": "#00A870"
+                },
+                {
+                  "label": "橙色",
+                  "value": "#ED7B2F"
+                }
+              ]
+            }
+          }
+        },
+        "default": []
+      },
+      "initVisible": {
+        "type": "boolean",
+        "default": true,
+        "title": "时间控制器",
+        "x-category": "基础属性",
+        "x-index": 3
+      }
+    }
+  },
+  "meta": {
+    "name": "Calendar",
+    "title": "日历",
+    "description": "日历组件",
+    "category": "展示",
+    "icon": "https://imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Calendar.svg"
+  }
+}