Update Demo Plugin Sources

Author: FalkWolsky

client/packages/lowcoder-cli-template-typescript/.gitignore

@@ -1,2 +1,4 @@
 *.tgz
-/node_modules
+.DS_Store
+node_modules
+*.zip

client/packages/lowcoder-cli-template-typescript/icons/hills.svg

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lowcoder Comp Playground</title>
+    <title>Lowcoder Component Plugin Preview</title>
     <style>
       #root {
         height: 100vh;

client/packages/lowcoder-cli-template-typescript/index.html

@@ -1,8 +1,7 @@
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
-
 import "lowcoder-sdk/dist/style.css";
 
 function CompDevApp() {
@@ -15,7 +14,6 @@ function CompDevApp() {
     />
   );
 }
-
-const container = document.querySelector("#root");
-const root = createRoot(container!);
+const container = document.querySelector("#root") as Element | DocumentFragment;
+const root = createRoot(container);
 root.render(<CompDevApp />);

client/packages/lowcoder-cli-template-typescript/index.tsx

@@ -1,29 +1,33 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "scripts": {
     "start": "vite",
     "build": "lowcoder-cli build",
     "build_publish": "lowcoder-cli build --publish"
   },
   "lowcoder": {
-    "description": "",
+    "description": "A Demo Hillchart Component Plugin",
     "comps": {
-      "hello_world": {
-        "name": "__i18n_helloWorldCompName__",
-        "icon": "./icons/demo-icon.svg"
+      "hillcharts": {
+        "name": "Hillcharts Demo",
+        "icon": "./icons/hills.svg",
+        "description": "Hillchart Plugin Demo Component"
       }
     }
   },
   "devDependencies": {
-    "lowcoder-cli": "workspace:^",
-    "lowcoder-sdk": "workspace:^",
-    "typescript": "^4.8.4",
+    "lowcoder-cli": "^0.0.30",
+    "lowcoder-sdk": "^2.1.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resize-detector": "^7.0.0",
+    "typescript": "5.3.3",
     "vite": "^4.3.9"
   },
   "keywords": [
-    "Lowcoder, Component, Template, Plugin"
+    "Lowcoder, Component, Template, Plugin, Demonstrator"
   ],
   "license": "MIT"
 }

client/packages/lowcoder-cli-template-typescript/locales/en.json

@@ -0,0 +1,142 @@
+import {
+  UICompBuilder,
+  NameConfig,
+  NumberControl,
+  Section,
+  withDefault,
+  withExposingConfigs,
+  eventHandlerControl,
+  styleControl,
+  toJSONObjectArray,
+  jsonControl,
+  AutoHeightControl,
+  EditorContext,
+} from "lowcoder-sdk";
+
+import styles from "./styles.module.css";
+
+import { i18nObjs, trans } from "./i18n/comps";
+
+import { Chart } from './vendors'
+import { useContext, useEffect, useRef, useState } from "react";
+
+
+export const CompStyles = [
+  {	
+    name: "margin",	
+    label: trans("style.margin"),
+    margin: "margin",	
+  },
+  {	
+    name: "padding",	
+    label: trans("style.padding"),
+    padding: "padding",	
+  },
+  {	
+    name: "textSize",
+    label: trans("style.textSize"),
+    textSize: "textSize",	
+  },
+  {	
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",	
+  },
+  {	
+    name: "border",
+    label: trans("style.border"),
+    border: "border",	
+  },
+  {
+    name : "radius",
+    label : trans("style.borderRadius"),
+    radius : "radius",
+  },
+  {
+    name : "borderWidth",
+    label : trans("style.borderWidth"),
+    borderWidth : "borderWidth",
+  }
+] as const;
+
+
+
+// const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
+let HillchartsCompBase = (function () {
+
+  const childrenMap = {
+    styles: styleControl(CompStyles),
+    autoHeight: withDefault(AutoHeightControl, "auto"),
+    data: jsonControl(toJSONObjectArray, i18nObjs.defaultData),
+    onEvent: eventHandlerControl([
+      {
+        label: "onChange",
+        value: "change",
+        description: "Triggers when Chart data changes",
+      },
+    ]),
+  };
+  
+  return new UICompBuilder(childrenMap, (props: { onEvent: (arg0: string) => void; styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; }; data: any[] | null | undefined; }) => {
+  const handleDataChange = () => {
+    props.onEvent("change");
+  };
+
+  const conRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 400, height: 250 });
+
+  useEffect(() => {
+    if (conRef.current) {
+      setDimensions({
+        width: conRef.current.clientWidth,
+        height: conRef.current.clientHeight
+      });
+    }
+  }, []);
+
+  return (
+      <div ref={conRef} className={styles.wrapper} style={{
+          display: "flex",
+          justifyContent: "center",
+          height: `100%`,
+          width: `100%`,
+          backgroundColor: `${props.styles.backgroundColor}`,
+          borderColor: `${props.styles.border}`,
+          borderRadius: `${props.styles.radius}`,
+          borderWidth: `${props.styles.borderWidth}`,
+          margin: `${props.styles.margin}`,
+          padding: `${props.styles.padding}`,
+          fontSize: `${props.styles.textSize}`,
+        }}>
+        <Chart data={props.data} height={dimensions.height} width={dimensions.width} onDataChange={handleDataChange}/>
+      </div>
+  );
+})
+.setPropertyViewFn((children: any) => {
+  return (
+    <>
+      <Section name="Basic">
+        {children.data.propertyView({ label: "Data" })}
+      </Section>
+      <Section name="Interaction">
+        {children.onEvent.propertyView()}
+      </Section>
+      <Section name="Styles">
+        {children.autoHeight.getPropertyView()}
+        {children.styles.getPropertyView()}
+      </Section>
+    </>
+  );
+})
+.build();
+})();
+
+HillchartsCompBase = class extends HillchartsCompBase {
+  autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
+export default withExposingConfigs(HillchartsCompBase, [
+  new NameConfig("data", trans("component.data")),
+]);

client/packages/lowcoder-cli-template-typescript/locales/zh_CN.json

@@ -0,0 +1,35 @@
+# Using Lowcoder Component Plugin
+
+## Prerequisites
+Before you start, ensure you have a running Lowcoder installation. Alternatively, you can use it online at [https://app.lowcoder.cloud](https://app.lowcoder.cloud).
+
+## Steps to Use the Plugin
+1. **Open the App Editor**: Navigate to the App Editor within your Lowcoder application.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
+</p>
+
+1. **Access Components Panel**: In the App Editor, locate the right panel where components are listed.
+
+2. **Switch to Extensions**: Find and switch on the "Extensions" toggle. This option allows you to add additional components to your project.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%201.png" alt="Lowcoder App Editor">
+</p>
+
+3. **Load the Plugin**: Here you have the option to load a Lowcoder Component Plugin from NPM. For example, to load the "hill charts" plugin, type `lowcoder-comp-hillcharts` in the provided field.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%202.png" alt="Lowcoder App Editor">
+</p>
+
+4. **Start Using the Plugin**: After loading the plugin, it will be available for use within your Lowcoder project. You can now integrate and customize the component as per your application's needs.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%203.png" alt="Lowcoder App Editor">
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%204.png" alt="Lowcoder App Editor">
+</p>

client/packages/lowcoder-cli-template-typescript/package.json

@@ -0,0 +1,30 @@
+import { getI18nObjects, getValueByLocale, Translator } from "lowcoder-sdk";
+import * as localeData from "./locales";
+import { I18nObjects } from "./locales/types";
+
+export const { trans, language } = new Translator<typeof localeData.en>(
+  localeData,
+  REACT_APP_LANGUAGES
+);
+
+export const i18nObjs = getI18nObjects<I18nObjects>(localeData, REACT_APP_LANGUAGES);
+
+export function getEchartsLocale() {
+  return getValueByLocale("EN", (locale) => {
+    switch (locale.language) {
+      case "en":
+        return "EN";
+      case "zh":
+        return "ZH";
+    }
+  });
+}
+
+export function getCalendarLocale() {
+  switch (language) {
+    case "zh":
+      return "zh-cn";
+    default:
+      return "en-gb";
+  }
+}