Merge pull request #643 from lowcoder-org/dev

Dev -> Main Release 2.3.0 preparation

Author: FalkWolsky

.DS_Store

@@ -10,3 +10,4 @@ client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
 .DS_Store
+.DS_Store

.gitignore

@@ -3,17 +3,18 @@
 
 <div align="center">
     <h1 style="border-bottom: none; margin-bottom: 0">Lowcoder</h1>
-    <h3 style="margin-top: 0">Lowcoder is the best Retool, Appsmith or Tooljet Alternative.</h3>
+    <h3 style="margin-top: 0">This is the only Platform, which closes the gap between App Development, Website Development and Slide-Presentations.</h3>
     <p>
-        Create internal and external software applications for your Company and your Customers with minimal coding experience. 
+        Create software applications (internal and customer-facing!) and Meeting/Collaboration tools for your Company and your Customers with minimal coding experience. 
     </p>
+    <h3 style="margin-top: 0">Lowcoder is the best Retool, Appsmith or Tooljet Alternative.</h3>
 </div>
 
 <img src="https://1167272343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjNgeI0mUzgw6Re92iTOw%2Fuploads%2FnwXJC1XBqP2MvTQitPyo%2FApp%20Editor%20%7C%20Main%20Screeen%20clean.png?alt=media&token=e5fba81b-82a7-4c0e-a15d-baa781d5b13a"/>
 
 ## 📢 Use Lowcoder in 3 steps
 1. Connect to any data sources or APIs.
-2. Build UI with 50+ components.
+2. Build UI with 60+ components.
 3. Share with colleagues and customers.
 
 ## 💡 Why Lowcoder
@@ -52,7 +53,7 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is:
 - build a Meeting tool with peace in mind. Blue buttons - ok. Red corners or circle Videostream - ok too.
 - embedd applications in your Video-Meetings, so attendees can enjoy collaborative "anything". From shopping to working and gaming...
 ### Lowcoder vs Powerapps
-- build a apps way faster than in Power Apps. Save up to 50& of the time at least.
+- build a apps way faster than in Power Apps. Save up to 50& of the time and costs at least.
 - Use self-hosting to keep all apps and data under your control for example at the own baremetals.
 ### Lowcoder vs Retool
 - Lowcoder is open-source. You don't need to worry about vendor lock-in or being stuck with an outdated version of the software.
@@ -84,7 +85,7 @@ And we mean it... Day by day!
 🔎 Submit an issue here on [GitHub](https://github.com/lowcoder-org/lowcoder/issues)
 
 ## 💻 Deployment Options
-You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for deploying Lowcoder on different platforms:
+You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
 - [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
 
 ## 💪 Contributing

README.md

@@ -20,23 +20,23 @@
     }
   },
   "env": {
-    "ENCRYPTION_PASSWORD": {
+    "LOWCODER_DB_ENCRYPTION_PASSWORD": {
       "description": "The encryption password used to encrypt all sensitive credentials in the database. You can use any random string (eg abcd).",
       "required": false
     },
-    "ENCRYPTION_SALT": {
+    "LOWCODER_DB_ENCRYPTION_SALT": {
       "description": "The encryption salt used to encrypt all sensitive credentials in the database. You can use any random string (eg abcd).",
       "required": false
     },
-    "CORS_ALLOWED_DOMAINS": {
+    "LOWCODER_CORS_DOMAINS": {
       "description": "The domains supported for CORS requests. All domains are allowed by default. If there are multiple domains, please separate them with commas.",
       "required": false
     },
-    "MONGODB_URL": {
+    "LOWCODER_MONGODB_URL": {
       "description": "Your Mongo Database URL.",
       "required": false
     },
-    "REDIS_URL": {
+    "LOWCODER_REDIS_URL": {
       "description": "Your Redis Database URL.",
       "required": false
     }

app.json

@@ -1 +1 @@
-dev
+2.3.0

client/VERSION

@@ -1,9 +1,9 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "NODE_OPTIONS=--max_old_space_size=6144 vite",
     "build": "lowcoder-cli build",
     "build_publish": "lowcoder-cli build --publish"
   },
@@ -13,11 +13,15 @@
       "hillcharts": {
         "name": "Hillcharts Demo",
         "icon": "./icons/hills.svg",
-        "description": "Hillchart Plugin Demo Component"
+        "description": "Hillchart Plugin Demo Component",
+        "layoutInfo": {
+          "w": 10,
+          "h": 40
+        }
       }
     }
   },
-  "devDependencies": {
+  "dependencies": {
     "@observablehq/runtime": "^4.8.2",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

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

@@ -5,20 +5,22 @@ import {
   Section,
   withDefault,
   withExposingConfigs,
+  withMethodExposing,
   eventHandlerControl,
   styleControl,
   toJSONObjectArray,
   jsonControl,
   AutoHeightControl,
   EditorContext,
 } from "lowcoder-sdk";
+import { useResizeDetector } from "react-resize-detector";
 
 import styles from "./styles.module.css";
 
 import { i18nObjs, trans } from "./i18n/comps";
 
 import { Chart } from './vendors'
-import { useContext, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 
 export const CompStyles = [
@@ -59,7 +61,13 @@ export const CompStyles = [
   }
 ] as const;
 
-
+interface Point {
+  id: number,
+  color?: string,
+  description?: string,
+  x: number,
+  size?: number,
+}
 
 // const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
 let HillchartsCompBase = (function () {
@@ -74,42 +82,57 @@ let HillchartsCompBase = (function () {
         value: "change",
         description: "Triggers when Chart data changes",
       },
-    ]),
+    ] as const),
   };
 
-  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; }) => {
+  return new UICompBuilder(childrenMap, (props: {
+    onEvent: any;
+    styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; };
+    data: any[] | null | undefined;
+    autoHeight: boolean;
+  }) => {
   const handleDataChange = () => {
     props.onEvent("change");
   };
 
-  const conRef = useRef<HTMLDivElement>(null);
-  const [dimensions, setDimensions] = useState({ width: 400, height: 250 });
+  const [dimensions, setDimensions] = useState({ width: 480, height: 280 });
+  const { width, height, ref: conRef } = useResizeDetector({onResize: () =>{
+    const container = conRef.current;
+    if(!container || !width || !height) return;
 
-  useEffect(() => {
-    if (conRef.current) {
+    if(props.autoHeight) {
       setDimensions({
-        width: conRef.current.clientWidth,
-        height: conRef.current.clientHeight
-      });
+        width,
+        height: dimensions.height,
+      })
+      return;
     }
-  }, []);
+
+    setDimensions({
+      width,
+      height,
+    })
+  }});
 
   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>
+    <div ref={conRef} className={styles.wrapper} style={{
+      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) => {
@@ -137,6 +160,38 @@ HillchartsCompBase = class extends HillchartsCompBase {
   }
 };
 
+HillchartsCompBase = withMethodExposing(HillchartsCompBase, [
+  {
+    method: {
+      name: "setPoint",
+      description: trans("methods.setPoint"),
+      params: [{
+        name: "data",
+        type: "JSON",
+        description: "JSON value"
+      }],
+    },
+    execute: (comp: any, values: any[]) => {
+      const point = values[0] as Point;
+      if(typeof point !== 'object') {
+        return Promise.reject(trans("methods.invalidInput"))
+      }
+      if(!point.id) {
+        return Promise.reject(trans("methods.requiredField", { field: 'ID' }));
+      }
+      if(!point.x) {
+        return Promise.reject(trans("methods.requiredField", { field: 'X position' }));
+      }
+      const data = comp.children.data.getView(); 
+      const newData = [
+        ...data,
+        point,
+      ];
+      comp.children.data.dispatchChangeValueAction(JSON.stringify(newData, null, 2));
+    }
+  },
+]);
+
 export default withExposingConfigs(HillchartsCompBase, [
   new NameConfig("data", trans("component.data")),
 ]);

client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx

@@ -27,4 +27,9 @@ export const en = {
   "component": {
     "data": "Hillchart Data",
   },
+  "methods": {
+    "setPoint": "Set Point",
+    "invalidInput": "Invalid Input",
+    "requiredField": "{field} is required",
+  }
 };

client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts

@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  /* height: 100%; */
   border: 1px solid #dddddd;
   background-color: white;
 }

client/packages/lowcoder-cli-template-typescript/src/styles.module.css

@@ -194,9 +194,14 @@ function Chart(props) {
       // Render an updated chart
       runtime.module(define, Inspector.into(chartRef), 'chart');
     }
-  }, [chartRef, props.data]);
-
-  return <div ref={useChartRef} style={{ height: "100%" }} />;
+  }, [chartRef, props.data, props.width, props.height]);
+
+  return (
+    <div
+      ref={useChartRef}
+      style={{ height: "100%" }}
+    />
+  );
 }