@steedos-widgets/antd 6.10.34-beta.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022, Steedos Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# Builder Widgets
+
+Adds widgets for Steedos Page editing.
+
+## How to use it
+
+在华炎魔方项目中把开发好并发布到npm仓库的资产包地址配置到环境变量STEEDOS_PUBLIC_PAGE_ASSETURLS中即可。
+
+```bash
+STEEDOS_PUBLIC_PAGE_ASSETURLS=https://unpkg.com/@steedos-widgets/example@0.0.4/dist/assets.json
+```
+
+资产包的地址只要可以访问即可，它可以是发布到npm的包(unpkg.com)地址，也可以是其他任何可以被当前服务访问的地址，比如在远程开发环境中公开的资产包地址。
+
+示例项目 [with-amis-custom-components](https://github.com/steedos/steedos-examples/tree/main/with-amis-custom-components) 完整演示了如何在魔方项目中引用自定义资产包来实现自定义 amis 组件。
+
+## 资产包开发
+
+资产包最终输出的是一个可访问的静态json文件，一般命名为 `assets.json`。
+
+### 资产包内容
+
+以下是一个引用了自定义组件的资产包内容示例。
+
+```json
+// https://unpkg.com/@steedos-widgets/example@0.0.4/dist/assets.json
+{
+    "packages": [
+        {
+            "package": "@steedos-widgets/example",
+            "urls": [
+                "https://unpkg.com/@steedos-widgets/example@0.0.6/dist/example.umd.min.js",
+                "https://unpkg.com/@steedos-widgets/example@0.0.6/dist/example.umd.css"
+            ],
+            "library": "BuilderExample"
+        }
+    ],
+    "components": [
+        {
+            "exportName": "BuilderExampleWidgetsMeta",
+            "npm": {
+                "package": "@steedos-widgets/example"
+            },
+            "url": "https://unpkg.com/@steedos-widgets/example@0.0.6/dist/meta.js",
+            "urls": {
+                "default": "https://unpkg.com/@steedos-widgets/example@0.0.6/dist/meta.js",
+                "design": "https://unpkg.com/@steedos-widgets/example@0.0.6/dist/meta.js"
+            }
+        }
+    ]
+}
+```
+
+资产包分为组件本身和组件可配置属性(meta.js)两部分的资源地址，可以为它们配置npm包名称以及发布到npm仓库的静态访问地址，如果本地已经安装了npm包的话，默认会直接访问本地安装的npm包中的资源文件，否则将重定向到 `urls` 属性中配置的远程资源文件。
+
+#### 输出自定义组件
+
+在 `packages` 节点配置的是自定义组件资源。
+- package: 发布到npm仓库中的包名称。
+- urls: 自定义组件发布到npm仓库后的地址，需要使用 [rollupjs](https://rollupjs.org/) 打包为 `umd` 格式的资源文件。
+- library: 输出的全局变量名称，可以在`window`下访问到该变量。
+
+#### 输出自定义组件可配置属性
+
+在 `components` 节点配置的是自定义组件在设计器中的可配置属性资源，用于把自定义组件集成到微页面引擎，比如amis中。
+- exportName: 输出的全局变量名称，可以在`window`下访问到该变量。
+- npm.package: 发布到npm仓库中的包名称。
+- url: `meta.js` 发布到npm仓库后的地址，需要使用 [rollupjs](https://rollupjs.org/) 打包为 `umd` 格式的资源文件。
+- urls: 同url，区分了设计器和渲染器地址，一般配置为url属性一样的地址。
+
+### 开发
+
+资产包开发主要是需要通过导出配置文件把自定义组件注册到微页面引擎，比如amis中。
+
+本示例中对应的配置文件源码在 `src/metas/Hello.ts`。
+
+关于如何配置相关属性请参考对应的微页面引擎官网文档，比如以下是配置amis引擎时的参考资料：
+
+- https://github.com/aisuda/amis-editor-demo/blob/master/README.md
+- https://github.com/aisuda/amis-widget/blob/master/README.md
+
+### 打包
+
+资产包开发最终输出的 `assets.json` 文件中引用的所有静态资源文件都需要打包为umd格式的模块，我们推荐使用工具 [rollupjs](https://rollupjs.org/)。
+
+本示例中只需要执行以下命令即可打包输出相关模块打包后的umd格式文件。
+
+```bash
+yarn build
+```
+
+### 调式
+
+因为资产包最终输出的静态json文件需要发包到npm仓库后才可以被访问到，这意味着每次改动都需要重新发包才能测试，非常不方便。
+
+所以建议专门输出一个 `assets-dev.json` 文件用于调式，然后使用 `http-server` 这种工具把它公开为静态资源，这样环境变量 `STEEDOS_PUBLIC_PAGE_ASSETURLS` 就可以设置为这个静态资源来测试效果，测试通过后再发版本到npm仓库中。
+
+本示例项目中执行以下指令即可把 `assets-dev.json` 文件公开为可访问的静态资源了。
+
+```bash
+yarn http
+```
+
+### 发包
+
+开发完成后，请执行 [npm publish](https://docs.npmjs.com/cli/v8/commands/npm-publish) 把打包后的资源文件发布为一个npm包到npm仓库中。
+
+## 组件开发
+
+本示例中开发了一个名为 `Hello` 的组件作为示例说明，为了方便演示示例效果，其源码就放在示例项目的 `src/components` 文件夹中，并且打包脚本会把其源码打包为umd格式的资源文件。
+
+但是我们并不推荐大家在实际项目开发中把组件源码与 widgets 项目源码放在一起，widgets 项目是用来把组件注册到微页面引擎中的，组件本身应该在独立的项目中进行开发、打包和发布，只要最终能像本示例一样通过类似 [rollupjs](https://rollupjs.org/) 的工具打包为umd格式的资源文件即可。

package/dist/antd.umd.js

@@ -0,0 +1,100 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  (typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('antd')) : typeof define === 'function' && define.amd ? define(['exports', 'react', 'antd'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BuilderAntd = {}, global.React, global.antd));
+})(this, function (exports, React, antd) {
+  var global = window;
+  function _interopDefaultLegacy(e) {
+    return e && _typeof(e) === 'object' && 'default' in e ? e : {
+      'default': e
+    };
+  }
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+   Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  var _assign = function __assign() {
+    _assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+    };
+    return _assign.apply(this, arguments);
+  };
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  // 使用 Amis 的 FormItem HOC 包装，可以自动处理数据绑定
+  var AntdSelect = function AntdSelect(props) {
+    var value = props.value,
+      onChange = props.onChange,
+      amisOptions = props.options,
+      _a = props.placeholder,
+      placeholder = _a === void 0 ? '请选择' : _a,
+      _b = props.isLoading,
+      isLoading = _b === void 0 ? false : _b,
+      _c = props.selectProps,
+      selectProps = _c === void 0 ? {} : _c,
+      cx = props.classnames;
+    // 1. 格式化选项：将 Amis 的 Options 转换为 Antd Select 的 Options
+    // Amis Options 默认是 { label: string, value: any } 结构
+    var antdOptions = React.useMemo(function () {
+      return (amisOptions || []).map(function (item) {
+        return {
+          label: item.label,
+          value: item.value,
+          disabled: item.disabled
+        };
+      });
+    }, [amisOptions]);
+    // 2. 处理 loading 状态
+    if (isLoading) {
+      return React__default["default"].createElement(antd.Spin, {
+        style: {
+          width: '100%',
+          display: 'block'
+        }
+      });
+    }
+    // 3. 处理值变化
+    var handleChange = function handleChange(newValue) {
+      // 关键：通过 props.onChange 将值回传给 Amis 表单
+      onChange(newValue);
+    };
+    return React__default["default"].createElement("div", {
+      className: cx('AntdSelect-Wrapper', props.className)
+    }, React__default["default"].createElement(antd.Select
+    // 绑定值和 onChange 事件
+    , _assign({
+      // 绑定值和 onChange 事件
+      value: value,
+      onChange: handleChange,
+      // 渲染选项
+      options: antdOptions,
+      // antd Select 默认属性
+      placeholder: placeholder,
+      allowClear: true,
+      style: {
+        width: '100%'
+      }
+    }, selectProps)));
+  };
+  exports.AntdSelect = AntdSelect;
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+});

package/dist/assets-dev.json

@@ -0,0 +1,39 @@
+{
+    "packages": [
+        {
+            "package": "dayjs",
+            "urls": [
+                "https://unpkg.steedos.cn/dayjs@1.11.19/dayjs.min.js"
+            ],
+            "library": "dayjs"
+        },
+        {
+            "package": "antd",
+            "urls": [
+                "https://unpkg.steedos.cn/antd@5.29.1/dist/antd.min.js"
+            ],
+            "library": "antd"
+        },
+        {
+            "package": "@steedos-widgets/antd",
+            "urls": [
+                "http://127.0.0.1:8080/@steedos-widgets/antd/dist/antd.umd.js",
+                "http://127.0.0.1:8080/@steedos-widgets/antd/dist/antd.umd.css"
+            ],
+            "library": "BuilderAntd"
+        }
+    ],
+    "components": [
+        {
+            "exportName": "BuilderAntdMeta",
+            "npm": {
+                "package": "@steedos-widgets/antd"
+            },
+            "url": "http://127.0.0.1:8080/@steedos-widgets/antd/dist/meta.js",
+            "urls": {
+                "default": "http://127.0.0.1:8080/@steedos-widgets/antd/dist/meta.js",
+                "design": "http://127.0.0.1:8080/@steedos-widgets/antd/dist/meta.js"
+            }
+        }
+    ]
+}

package/dist/assets.json

@@ -0,0 +1,39 @@
+{
+    "packages": [
+        {
+            "package": "dayjs",
+            "urls": [
+                "https://unpkg.com/dayjs@1.11.19/dayjs.min.js"
+            ],
+            "library": "dayjs"
+        },
+        {
+            "package": "antd",
+            "urls": [
+                "https://unpkg.com/antd@5.29.1/dist/antd.min.js"
+            ],
+            "library": "antd"
+        },
+        {
+            "package": "@steedos-widgets/antd",
+            "urls": [
+                "https://unpkg.com/@steedos-widgets/antd@6.10.34-beta.10/dist/antd.umd.js",
+                "https://unpkg.com/@steedos-widgets/antd@6.10.34-beta.10/dist/antd.umd.css"
+            ],
+            "library": "BuilderAntd"
+        }
+    ],
+    "components": [
+        {
+            "exportName": "BuilderAntdMeta",
+            "npm": {
+                "package": "@steedos-widgets/antd"
+            },
+            "url": "https://unpkg.com/@steedos-widgets/antd@6.10.34-beta.10/dist/meta.js",
+            "urls": {
+                "default": "https://unpkg.com/@steedos-widgets/antd@6.10.34-beta.10/dist/meta.js",
+                "design": "https://unpkg.com/@steedos-widgets/antd@6.10.34-beta.10/dist/meta.js"
+            }
+        }
+    ]
+}

package/dist/components/Select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Select.css';
+declare const AntdSelect: React.FC<any>;
+export { AntdSelect };

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/meta.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    components: any[];
+};
+export default _default;

package/dist/meta.js

@@ -0,0 +1,181 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BuilderAntdMeta = factory());
+})(this, (function () { 'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    /*
+     * @Description: Configuration definition for the Antd Select Amis Custom Component.
+     */
+    // Removed i18next dependency (t function)
+    var config = {
+        // 1. Base Configuration
+        group: 'Antd',
+        componentName: "AntdSelect",
+        title: 'Select',
+        docUrl: "",
+        screenshot: "",
+        npm: {
+            package: "@steedos-widgets/antd", // Replace with your actual package name
+            version: "{{version}}",
+            exportName: "AntdSelect",
+            main: "",
+            destructuring: true,
+            subName: ""
+        },
+        preview: {
+            placeholder: "Please select",
+            options: [
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+            ]
+        },
+        targets: ["steedos__RecordPage", "steedos__AppPage", "steedos__HomePage"],
+        engines: ["amis"],
+        // 2. Amis Core Configuration
+        amis: {
+            name: 'antd-select', // Amis Renderer Type Name
+            icon: "fa-fw fa fa-angle-down" // Icon for the component
+        }
+    };
+    var Select = __assign(__assign({}, config), { 
+        // 3. Snippets Configuration
+        snippets: [
+            {
+                title: config.title,
+                screenshot: "",
+                schema: {
+                    componentName: config.componentName,
+                    props: config.preview
+                }
+            }
+        ], 
+        // 4. Amis Renderer and Editor Plugin Configuration
+        amis: {
+            // Renderer Registration Info
+            render: {
+                type: config.amis.name,
+                usage: "formitem", // Declares this as a form item component
+                weight: 1,
+                framework: "react"
+            },
+            // Editor Plugin Configuration
+            plugin: {
+                rendererName: config.amis.name,
+                $schema: '/schemas/FormItem.json',
+                name: config.title,
+                description: config.title,
+                tags: [config.group],
+                order: -9999,
+                icon: config.amis.icon,
+                // Default scaffolding structure
+                scaffold: {
+                    type: config.amis.name,
+                    label: config.title,
+                    options: [
+                        { label: 'Option One', value: 'one' },
+                        { label: 'Option Two', value: 'two' },
+                    ]
+                },
+                previewSchema: { type: config.amis.name, label: 'Preview', placeholder: 'Please select' },
+                panelTitle: 'Select Dropdown Settings',
+                // Controls for the editor's right-side property panel
+                panelControls: [
+                    // ====== Basic Properties ======
+                    {
+                        type: 'text',
+                        name: 'label',
+                        label: 'Label'
+                    },
+                    {
+                        type: 'text',
+                        name: 'name',
+                        label: 'Field Name'
+                    },
+                    {
+                        type: 'text',
+                        name: 'placeholder',
+                        label: 'Placeholder Text'
+                    },
+                    // ====== Options Configuration ======
+                    {
+                        type: 'combo',
+                        name: 'options',
+                        label: 'Options Configuration',
+                        multiple: true,
+                        items: [
+                            { type: 'text', name: 'label', label: 'Display Value' },
+                            { type: 'text', name: 'value', label: 'Actual Value' }
+                        ]
+                    },
+                    {
+                        type: 'switch',
+                        name: 'selectProps.showSearch', // Maps to the selectProps object
+                        label: 'Searchable',
+                        pipeIn: function (value) { return value !== false; },
+                    },
+                    {
+                        type: 'select',
+                        name: 'selectProps.mode',
+                        label: 'Selection Mode',
+                        options: [
+                            { label: 'Single Select (Default)', value: undefined },
+                            { label: 'Multiple Select', value: 'multiple' },
+                            { label: 'Tags', value: 'tags' }
+                        ]
+                    },
+                    {
+                        type: 'switch',
+                        name: 'required', // Amis Form validation property
+                        label: 'Is Required',
+                    }
+                ]
+            }
+        } });
+
+    /*
+     * @Author: baozhoutao@steedos.com
+     * @Date: 2022-08-31 16:32:35
+     * @LastEditors: baozhoutao@steedos.com
+     * @LastEditTime: 2022-09-01 18:46:29
+     * @Description:
+     */
+    var components = [Select];
+    var meta = {
+        components: components
+    };
+
+    return meta;
+
+}));

package/dist/metas/Select.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/components/Select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Select.css';
+declare const AntdSelect: React.FC<any>;
+export { AntdSelect };

package/dist/types/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/types/meta.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    components: any[];
+};
+export default _default;

package/dist/types/metas/Select.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@steedos-widgets/antd",
+  "private": false,
+  "version": "6.10.34-beta.10",
+  "main": "dist/antd.cjs.js",
+  "module": "dist/antd.esm.js",
+  "unpkg": "dist/antd.umd.js",
+  "typings": "dist/antd.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "http": "npx http-server ../ --port 8080 --cors -c -1",
+    "build": "yarn build-types && yarn build-rollup",
+    "build-types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build-rollup": "rollup -c rollup.config.ts"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.4.0",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-alias": "^2.2.0",
+    "rollup-plugin-external-globals": "^0.6.1",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-polyfill-node": "^0.8.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-webpack-alias-less-loader": "^1.0.0",
+    "rollup-plugin-re": "^1.0.7",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-tslib-resolve-id": "^0.0.0",
+    "rollup-plugin-visualizer": "^5.8.0"
+  },
+  "gitHead": "71a0b8bd214c7820ea9046ee5610a4f5754cdbb0"
+}