@yuntijs/ui 1.0.0-beta.1 → 1.0.0-beta.2

package/es/ConfigProvider/index.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, ReactNode } from 'react';
+import { CDN, CdnApi } from "../utils/genCdnUrl";
+type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+export interface Config {
+    customCdnFn?: CdnFn;
+    imgAs?: ElementType;
+    proxy?: CDN | 'custom';
+}
+export declare const ConfigContext: import("react").Context<Config | null>;
+export declare const ConfigProvider: import("react").NamedExoticComponent<{
+    children: ReactNode;
+    config: Config;
+}>;
+export declare const useCdnFn: () => CdnFn;
+export {};

package/es/ConfigProvider/index.js

@@ -0,0 +1,39 @@
+import { createContext, memo, useContext } from 'react';
+import { genCdnUrl } from "../utils/genCdnUrl";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ConfigContext = /*#__PURE__*/createContext(null);
+export var ConfigProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    config = _ref.config;
+  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
+    value: config,
+    children: children
+  });
+});
+var fallback = function fallback(_ref2) {
+  var pkg = _ref2.pkg,
+    version = _ref2.version,
+    path = _ref2.path;
+  return genCdnUrl({
+    path: path,
+    pkg: pkg,
+    proxy: 'aliyun',
+    version: version
+  });
+};
+export var useCdnFn = function useCdnFn() {
+  var config = useContext(ConfigContext);
+  if (!config) return fallback;
+  if ((config === null || config === void 0 ? void 0 : config.proxy) !== 'custom') return function (_ref3) {
+    var pkg = _ref3.pkg,
+      version = _ref3.version,
+      path = _ref3.path;
+    return genCdnUrl({
+      path: path,
+      pkg: pkg,
+      proxy: config.proxy,
+      version: version
+    });
+  };
+  return (config === null || config === void 0 ? void 0 : config.customCdnFn) || fallback;
+};

package/es/MonacoEditor/index.d.ts

@@ -0,0 +1,31 @@
+import type { IDiffMonacoEditorProps, IGeneralManacoEditorProps, ISingleMonacoEditorProps } from '@alilc/lowcode-plugin-base-monaco-editor/lib/helper';
+import React from 'react';
+export * from '@alilc/lowcode-plugin-base-monaco-editor/es/controller';
+export * from '@alilc/lowcode-plugin-base-monaco-editor/es/monaco';
+export interface BaseMonacoEditorProps extends IGeneralManacoEditorProps {
+    /** Should the editor be read only. See also domReadOnly. Defaults to false. */
+    readOnly?: boolean;
+    /** Control the rendering of line numbers. Defaults to on. */
+    lineNumbers?: 'on' | 'off' | 'relative' | 'interval' | ((lineNumber: number) => string);
+    /** Control the wrapping of the editor.  Defaults to off. */
+    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
+    /** Enable custom contextmenu. Defaults to true. */
+    contextmenu?: boolean;
+    /** Enable the rendering of the minimap. Defaults to false. */
+    minimapEnabled?: boolean;
+    /** Control the version of monaco-editor be loaded. Defaults to 0.45.0 */
+    version?: string;
+    /** An event emitted when the content of the current model has changed. */
+    onChange?: (input: string, event: any) => void;
+}
+export declare const BaseMonacoEditor: React.FC<BaseMonacoEditorProps & {
+    /** Only for BaseMonacoEditor. */
+    type?: 'single' | 'diff';
+}>;
+export type MonacoEditorProps = ISingleMonacoEditorProps & BaseMonacoEditorProps;
+export declare const MonacoEditor: React.FC<MonacoEditorProps>;
+export type MonacoDiffEditorProps = IDiffMonacoEditorProps & BaseMonacoEditorProps & {
+    /** Render the differences in one editor. Defaults to off, render the differences in two side-by-side editors */
+    inlineView?: 'on' | 'off' | 'auto';
+};
+export declare const MonacoDiffEditor: React.FC<MonacoDiffEditorProps>;

package/es/MonacoEditor/index.js

@@ -0,0 +1,104 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "editorDidMount", "readOnly", "lineNumbers", "wordWrap", "contextmenu", "minimapEnabled", "version", "requireConfig", "options", "onChange"],
+  _excluded2 = ["inlineView", "options"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { SingleMonacoEditorComponent } from '@alilc/lowcode-plugin-base-monaco-editor';
+import React, { useMemo, useState } from 'react';
+import { useCdnFn } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+export * from '@alilc/lowcode-plugin-base-monaco-editor/es/controller';
+export * from '@alilc/lowcode-plugin-base-monaco-editor/es/monaco';
+export var BaseMonacoEditor = function BaseMonacoEditor(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'single' : _props$type,
+    editorDidMount = props.editorDidMount,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$lineNumbers = props.lineNumbers,
+    lineNumbers = _props$lineNumbers === void 0 ? 'on' : _props$lineNumbers,
+    _props$wordWrap = props.wordWrap,
+    wordWrap = _props$wordWrap === void 0 ? 'off' : _props$wordWrap,
+    _props$contextmenu = props.contextmenu,
+    contextmenu = _props$contextmenu === void 0 ? true : _props$contextmenu,
+    _props$minimapEnabled = props.minimapEnabled,
+    minimapEnabled = _props$minimapEnabled === void 0 ? false : _props$minimapEnabled,
+    _props$version = props.version,
+    version = _props$version === void 0 ? '0.45.0' : _props$version,
+    _props$requireConfig = props.requireConfig,
+    requireConfigFromProps = _props$requireConfig === void 0 ? {} : _props$requireConfig,
+    options = props.options,
+    onChange = props.onChange,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorInstance = _useState2[0],
+    setEditorInstance = _useState2[1];
+  var handleEditorDidMount = function handleEditorDidMount(monaco, editor) {
+    setEditorInstance(editor);
+    editorDidMount === null || editorDidMount === void 0 || editorDidMount(monaco, editor);
+    // add onChange event for diff editor
+    if (type === 'diff') {
+      var _ref = editor.getModel(),
+        modified = _ref.modified;
+      modified.onDidChangeContent(function (event) {
+        onChange === null || onChange === void 0 || onChange(modified.getValue(), event);
+      });
+    }
+  };
+
+  // @Todo: auto change light/dark theme
+  var editorOptions = useMemo(function () {
+    var newOps = Object.assign({}, options, {
+      readOnly: readOnly,
+      lineNumbers: lineNumbers,
+      wordWrap: wordWrap,
+      contextmenu: contextmenu,
+      minimap: minimapEnabled === undefined ? options === null || options === void 0 ? void 0 : options.minimap : Object.assign({}, options === null || options === void 0 ? void 0 : options.minimap, {
+        enabled: minimapEnabled
+      })
+    });
+    editorInstance === null || editorInstance === void 0 || editorInstance.updateOptions(newOps);
+    return newOps;
+  }, [readOnly, lineNumbers, wordWrap, contextmenu, minimapEnabled, options]);
+  var genCdnUrl = useCdnFn();
+  var requireConfig = useMemo(function () {
+    return Object.assign({}, requireConfigFromProps, {
+      paths: _objectSpread({
+        vs: genCdnUrl({
+          path: 'min/vs',
+          pkg: 'monaco-editor',
+          version: version
+        })
+      }, requireConfigFromProps.paths)
+    });
+  }, [requireConfigFromProps, version]);
+  var Editor = type === 'diff' ? SingleMonacoEditorComponent.MonacoDiffEditor : SingleMonacoEditorComponent;
+  return /*#__PURE__*/_jsx(Editor, _objectSpread({
+    editorDidMount: handleEditorDidMount,
+    onChange: onChange,
+    options: editorOptions,
+    requireConfig: requireConfig
+  }, otherProps));
+};
+export var MonacoEditor = function MonacoEditor(props) {
+  return /*#__PURE__*/_jsx(BaseMonacoEditor, _objectSpread(_objectSpread({}, props), {}, {
+    type: "single"
+  }));
+};
+export var MonacoDiffEditor = function MonacoDiffEditor(props) {
+  var _props$inlineView = props.inlineView,
+    inlineView = _props$inlineView === void 0 ? 'off' : _props$inlineView,
+    options = props.options,
+    otherProps = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_jsx(BaseMonacoEditor, _objectSpread(_objectSpread({
+    options: Object.assign({
+      useInlineViewWhenSpaceIsLimited: inlineView === 'on' || inlineView === 'auto',
+      renderSideBySide: inlineView === 'off' || inlineView === 'auto'
+    }, options)
+  }, otherProps), {}, {
+    type: "diff"
+  }));
+};

package/es/index.d.ts

@@ -1,2 +1,4 @@
+export * from './ConfigProvider';
 export * from './Logo';
+export * from './MonacoEditor';
 export * from './Tree';

package/es/index.js

@@ -1,2 +1,4 @@
+export * from "./ConfigProvider";
 export * from "./Logo";
+export * from "./MonacoEditor";
 export * from "./Tree";

package/es/utils/genCdnUrl.d.ts

@@ -0,0 +1,8 @@
+export type CDN = 'aliyun' | 'unpkg';
+export interface CdnApi {
+    path: string;
+    pkg: string;
+    proxy?: CDN;
+    version?: string;
+}
+export declare const genCdnUrl: ({ pkg, version, path, proxy }: CdnApi) => string;

package/es/utils/genCdnUrl.js

@@ -0,0 +1,20 @@
+import urlJoin from 'url-join';
+var UNPKG_API = 'https://unpkg.com';
+var ALIYUN_API = 'https://registry.npmmirror.com';
+export var genCdnUrl = function genCdnUrl(_ref) {
+  var pkg = _ref.pkg,
+    _ref$version = _ref.version,
+    version = _ref$version === void 0 ? 'latest' : _ref$version,
+    path = _ref.path,
+    proxy = _ref.proxy;
+  switch (proxy) {
+    case 'unpkg':
+      {
+        return urlJoin(UNPKG_API, "".concat(pkg, "@").concat(version), path);
+      }
+    default:
+      {
+        return urlJoin(ALIYUN_API, pkg, version, 'files', path);
+      }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -77,6 +77,7 @@
     ]
   },
   "dependencies": {
+    "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.2",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lobehub/ui": "^1",
@@ -85,7 +86,8 @@
     "lucide-react": "latest",
     "query-string": "^8",
     "react-error-boundary": "^4",
-    "react-layout-kit": "^1"
+    "react-layout-kit": "^1",
+    "url-join": "^5.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14",
@@ -107,6 +109,7 @@
     "jest": "^27",
     "jsdom": "^22",
     "lint-staged": "^15",
+    "monaco-editor": "^0.45.0",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",