@cloudbase/weda-ui 0.2.13 → 0.2.16

package/README.md

@@ -18,6 +18,7 @@
 .
 ├── .storybook              # storybook 配置目录
 ├── cloudbaserc.json        # 组件库配置
+├── lowcode-comps           # 低码组件内容
 └── src
     ├── test                # 测试目录
     ├── configs             # 组件类型申明目录
@@ -43,10 +44,12 @@
 
 组件库开发前置依赖：
 
-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 中一致
+
+> 下面的内容是源码组件库的开发文档，低码组件库开发请查看[lowcode-comps下的文档](lowcode-comps/README.md)
 
 ### 编写组件
 
@@ -289,6 +292,8 @@ export function handleEvent({ event, data }) {
 
 对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
 
+- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389
+
 ### 组件测试
 
 我们建议你为你的定义组件编写必要的测试。我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.13",
+  "version": "0.2.16",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -20,7 +20,20 @@
     "build:cli": "tcb lowcode build",
     "build:analyze": "cross-env ANALYZER=1 tcb lowcode build",
     "test": "jest test --env=jsdom",
+    "test:jest": "jest test --env=jsdom",
     "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",
@@ -42,6 +55,7 @@
     "@cloudbase/ui-react": "^1.0.4",
     "@loadable/component": "^5.15.2",
     "@react-hookz/web": "^12.0.0",
+    "@tcwd/style-wedatheme": "^1.0.0",
     "@use-gesture/react": "^10.2.4",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",
@@ -50,6 +64,8 @@
     "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 +81,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",
@@ -80,33 +100,33 @@
     "@typescript-eslint/parser": "^5.9.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
+    "babel-plugin-istanbul": "^6.1.1",
     "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.3.1",
+    "eslint": "^8.9.0",
+    "eslint-config-tencent": "^1.0.3",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-jest": "^26.1.1",
+    "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",
     "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"
   },
   "nano-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -117,7 +137,12 @@
     {
       "path": ".temp/dist/*.main.*",
       "webpack": false,
-      "limit": "700 KB"
+      "limit": "720 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"
+  }
+}

package/src/configs/components/carousel.json

@@ -0,0 +1,273 @@
+{
+  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+  "data": {
+    "properties": {
+      "autoplay": {
+        "title": "自动切换",
+        "default": true,
+        "type": "boolean",
+        "x-category": "基础属性"
+      },
+      "indicatorDots": {
+        "title": "导航锚点",
+        "default": true,
+        "type": "boolean",
+        "x-category": "高级属性"
+      },
+      "current": {
+        "title": "当前所在滑块的 index",
+        "default": 0,
+        "type": "number",
+        "x-category": "高级属性"
+      },
+      "interval": {
+        "title": "自动切换时间间隔",
+        "default": 5000,
+        "type": "number",
+        "x-category": "基础属性"
+      },
+      "duration": {
+        "title": "滑动动画时长",
+        "default": 500,
+        "type": "number",
+        "x-category": "高级属性"
+      },
+      "circular": {
+        "title": "衔接滑动",
+        "default": true,
+        "type": "boolean",
+        "x-category": "高级属性"
+      },
+      "vertical": {
+        "title": "纵向轮播",
+        "default": false,
+        "type": "boolean",
+        "x-category": "基础属性"
+      },
+      "indicatorColor": {
+        "title": "锚点颜色",
+        "type": "string",
+        "x-component": "color",
+        "default": "rgba(200, 200, 200, 0.9)",
+        "x-category": "高级属性"
+      },
+      "indicatorActiveColor": {
+        "title": "锚点激活色",
+        "type": "string",
+        "x-component": "color",
+        "default": "rgba(0, 0, 0, 0.9)",
+        "x-category": "高级属性"
+      },
+      "images": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "title": "images",
+          "default": {
+            "image": "https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png",
+            "title": "图片1",
+            "height": "160px",
+            "width": "100%",
+            "tapMode":"tap",
+            "fit":"cover"
+          },
+          "properties": {
+            "title": {
+              "type": "string",
+              "title": "图片标题",
+              "default": "图片1",
+              "x-index": 20
+            },
+            "image": {
+              "type": "image",
+              "title": "图片1",
+              "default": "https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png",
+              "x-index": 30
+            },
+            "height": {
+              "type": "string",
+              "title": "图片高度",
+              "default": "160px",
+              "x-index": 40
+            },
+            "width": {
+              "type": "string",
+              "title": "图片宽度",
+              "default": "100%",
+              "x-index": 50
+            },
+            "fit": {
+              "title": "布局模式",
+              "type": "string",
+              "default": "cover",
+              "enum": [
+                {
+                  "value": "cover",
+                  "label": "铺满"
+                },
+                {
+                  "value": "contain",
+                  "label": "适合"
+                },
+                {
+                  "value": "fill",
+                  "label": "拉伸"
+                }
+              ],
+              "x-index": 60
+            },
+            "tapMode": {
+              "type": "string",
+              "title": "点击时",
+              "default": "tap",
+              "x-index": 70,
+              "enum": [
+                {
+                  "value": "tap",
+                  "label": "无行为",
+                  "icon": "weda-editor-icon-alert-close"
+                },
+                {
+                  "value": "inside",
+                  "label": "打开页面",
+                  "icon": "weda-editor-icon-docs"
+                },
+                {
+                  "value": "outer",
+                  "label": "外部链接",
+                  "icon": "weda-editor-icon-link",
+                  "tooltip":[{
+                      "platform":["ALL","MP"],
+                      "text":"小程序平台不支持跳转外部链接"
+                  }],
+                  "disabled": [{
+                      "platform":["MP"]
+                  }]
+                }
+              ],
+              "x-component": "icon-text-radio",
+              "x-linkages": [
+                {
+                  "type": "value:visible",
+                  "target": "*(dataForm.insideUrl)",
+                  "condition": "{{$self.value=='inside'}}"
+                },
+                {
+                  "type": "value:visible",
+                  "target": "*(dataForm.outerUrl)",
+                  "condition": "{{$self.value=='outer'}}"
+                },
+                {
+                  "type": "value:visible",
+                  "target": "*(dataForm.widthParams)",
+                  "condition": "{{$self.value=='inside'}}"
+                },
+                {
+                  "type": "value:visible",
+                  "target": "*(dataForm.newPage)",
+                  "condition": "{{$self.value=='outer'}}"
+                }
+              ]
+            },
+            "insideUrl": {
+              "type": "string",
+              "x-component": "page-list",
+              "default": "",
+              "title": "跳转页面",
+              "description": "通过下拉选择应用页面，可以实现内部页面跳转",
+              "x-category": "基础属性",
+              "x-index": 120,
+              "x-component-props": {
+                "hideAddPlatform": ["MP"],
+                "addHidden":true
+              },
+              "x-linkages": [
+                  {
+                      "type": "value:state",
+                      "target": "*(dataForm.params)",
+                      "condition": "{{$self.value && $self.value.length>0}}",
+                      "state":{
+                          "pageId":"{{$self.value}}"
+                      }
+                  }
+              ]
+            },
+            "outerUrl": {
+              "title": "URL",
+              "default": "",
+              "type": "string",
+              "placeholder": "外部链接请以http://或https://开头",
+              "description":"当前页面打开只支持https"
+            },
+            "newPage": {
+              "title": "打开新页面",
+              "default": false,
+              "type": "boolean"
+            },
+            "widthParams": {
+              "title": "携带参数",
+              "default": false,
+              "type": "boolean",
+              "x-linkages": [
+                  {
+                    "type": "value:visible",
+                    "target": "*(dataForm.params)",
+                    "condition": "{{$self.value==true}}"
+                  }
+              ]
+            },
+            "params": {
+              "type": "array",
+              "title": "参数",
+              "pageId":"",
+              "default":[],
+              "x-component":"page-params"
+            }
+          }
+        },
+        "title": "轮播图",
+        "default": [
+          {
+            "image": "https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png",
+            "title": "图片1",
+            "fit":"cover",
+            "tapMode":"tap",
+            "height":"160px",
+            "width":"100%"
+          },
+          {
+            "image": "https://main.qcloudimg.com/raw/880b5277dc7d8f62fd6b5f964bee3af4.png",
+            "title": "图片2",
+            "fit":"cover",
+            "tapMode":"tap",
+            "height":"160px",
+            "width":"100%"
+          },
+          {
+            "image": "https://main.qcloudimg.com/raw/af8d7dff73fea17aa099876bc3a811fa.png",
+            "title": "图片3",
+            "fit":"cover",
+            "tapMode":"tap",
+            "height":"160px",
+            "width":"100%"
+          }
+        ],
+        "x-component": "list"
+      }
+    }
+  },
+  "events": [
+    {
+      "name": "change",
+      "title": "切换"
+    }
+  ],
+  "meta": {
+    "title": "轮播图",
+    "description": "轮播图",
+    "category": "展示",
+    "componentOrder": 80,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Swiper.svg"
+  },
+  "mpOrigin": "swiper"
+}