Merge branch 'feature/echarts' of https://github.com/lowcoder-org/lowcoder into feature/echarts

Author: Imiss-U1025

README.md

@@ -7,25 +7,32 @@
     <p>
         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>
+    <h3 style="margin-top: 0">We think, Lowcoder is simply better than Retool, Appsmith Tooljet, Outsystems or Mendix.</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"/>
-
+## 🎥 Lowcoder Intro Video  
+<div align="center">
+    <a href="https://www.youtube.com/watch?v=AQo0iFWUWiU" target="_blank">
+        <img src="https://img.youtube.com/vi/AQo0iFWUWiU/maxresdefault.jpg" alt="Lowcoder Intro Video" width="100%">
+    </a>
+    <p><i>Click the image above to watch the video on YouTube</i> 📺</p>
+</div>
 
+---
 ## 📢 Use Lowcoder in 3 steps
 1. Connect to any data sources or APIs.
-2. Build flexible and responsive UI with 100+ components and free layout / design possibilities.
+2. Build flexible and responsive UI with 120+ components and free layout / design possibilities.
 3. Share with colleagues and customers.
 
 ## 💡 Why Lowcoder
 One platform for everything instead so many different softwares. (like Website Builders, CMS, CRM, POS, ERP, Dashboards & Data Story Visualization, Collaboration Tools).
 
 It's cumbersome to create a single app. You had to design user interfaces, write code in multiple languages and frameworks, and understand how all of that code works together.
 
-NewGen Lowcode Platforms like Retool and others are great for their simplicity and flexibility - like Lowcoder too, but they can also be limited in different ways, especially when it comes to "external" applications for everyone.
+NewGen Lowcode Platforms like Retool and others are great for their simplicity and flexibility - like Lowcoder too, but they can also be limited in different ways, especially when it comes to "external" applications for everyone - because their pricing focusses to internal apps and "pay per User".
 
-Lowcoder wants to take a step forward. More specifically, Lowcoder is:
+With Lowcoder we did a step forward. More specifically, Lowcoder is:
 - An all-in-one IDE to create internal or customer-facing (external) apps.
 - A place to create, build and share building blocks of web applications and whole websites.
 - The tool and community to support your business, and lower the cost and time to develop interactive applications.
@@ -34,9 +41,9 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is:
 - The only platform which has extensibility plugin architecture [Check Community Contributions](https://www.npmjs.com/search?q=lowcoder-comp)
 
 ## 🪄 Features
-- **Visual UI builder** with 100+ built-in components. Save 90% of time to build apps.
+- **Visual UI builder** with 120+ built-in components. Save 90% of time to build apps.
 - **Modules** for reusable (!) embedable component sets in the UI builder.
-- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](https://lowcoder.cloud/about), [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk)
+- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](http://demo-lowcoder.42web.io/ecommerce/), [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk)
 - **Video Meeting Components** to create your own individual Web-Meeting tool.
 - **Query Library** for reusable data queries of your data sources.
 - **Custom components** to develop own components and use them in the UI builder.
@@ -107,7 +114,3 @@ Accelerate the growth of Lowcoder and unleash its potential with your Sponsorshi
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)
 
 Like ...  [@Darkjamin](https://github.com/Darkjamin), [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
-
-## Intro Video
-
-[![Watch the video](https://i.ytimg.com/vi/s4ltAqS0hzM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGD0gSShyMA8=&rs=AOn4CLAlPOIFdtauythoBKNPXhi6XGwlDQ)](https://youtu.be/s4ltAqS0hzM?feature=shared)

client/packages/lowcoder-design/src/components/Loading.tsx

@@ -74,6 +74,7 @@ type LoadingProps = {
   size?: number; // circle's size
   className?: string;
   style?: CSSProperties;
+  compHeight?: number;
 };
 
 export const Loading = (props: LoadingProps) => {
@@ -92,7 +93,11 @@ export const Loading = (props: LoadingProps) => {
           <Load2 {...loadingProps} />
         </Container>
       </ContainerX> */}
-      <StyledSkeleton active style={{height: '100%', animationDuration: '2s'}} />
+      <StyledSkeleton
+        active
+        paragraph={{rows: props.compHeight ? Math.floor((props.compHeight * 8) / 35) : 4}}
+        style={{height: '100%', animationDuration: '2s'}}
+      />
     </LoadingWrapper>
   );
 };

client/packages/lowcoder-design/src/components/control.tsx

@@ -159,7 +159,9 @@ export const ControlPropertyViewWrapper = (
           <ToolTipLabel
             title={tooltip}
             label={label}
-            overlayInnerStyle={labelTooltipOverlayInnerStyle}
+            styles={{
+              body: labelTooltipOverlayInnerStyle,
+            }}
           />
         </LabelWrapper>
       )}

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -363,10 +363,12 @@ export const IconSelectBase = (props: {
       onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
-      overlayInnerStyle={{
-        border: "none",
-        boxShadow: "none",
-        background: "transparent",
+      styles={{
+        body: {
+          border: "none",
+          boxShadow: "none",
+          background: "transparent",
+        }
       }}
       // when dragging is allowed, always re-location to avoid the popover exceeds the screen
       destroyTooltipOnHide

client/packages/lowcoder-design/src/components/popover.tsx

@@ -64,7 +64,6 @@ const SimplePopover = (props: {
   );
   return (
     <Popover
-      overlayInnerStyle={{padding: 0}}
       align={{
         offset: [-12, 0, 0, 0],
       }}
@@ -74,7 +73,10 @@ const SimplePopover = (props: {
       open={visible}
       onOpenChange={setVisible}
       placement="left"
-      overlayStyle={{ width: "310px" }}
+      styles={{
+        root: { width: "310px" },
+        body: { padding: 0 }
+      }}
     >
       {props.children}
     </Popover>
@@ -101,16 +103,18 @@ const CustomPopover = (props: {
   );
   return (
     <Popover
-      overlayInnerStyle={{padding: 0}}
       content={contentWithBox}
       trigger="click"
       open={visible}
       onOpenChange={setVisible}
       placement={props.type === "query" ? "top" : "left"}
-      overlayStyle={{ width: "310px" }}
       align={{
         offset: [-12, 0, 0, 0],
       }}
+      styles={{
+        root: { width: "310px" },
+        body: { padding: 0 }
+      }}
     >
       {props.children}
     </Popover>
@@ -167,8 +171,10 @@ const EditPopover = (props: EditPopoverProps) => {
   return (
     <Popover
       arrow={false}
-      overlayStyle={{paddingTop: '15px'}}
-      overlayInnerStyle={{padding: 0}}
+      styles={{
+        root: { paddingTop: '15px' },
+        body: { padding: 0 }
+      }}
       content={() => (
         <>
           <Wedge />

client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

@@ -444,10 +444,12 @@ export const ShapeSelectBase = (props: {
       onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
-      overlayInnerStyle={{
-        border: "none",
-        boxShadow: "none",
-        background: "transparent",
+      styles={{
+        body: {
+          border: "none",
+          boxShadow: "none",
+          background: "transparent",
+        }
       }}
       // when dragging is allowed, always re-location to avoid the popover exceeds the screen
       destroyTooltipOnHide

client/packages/lowcoder-design/src/components/toolTip.tsx

@@ -155,7 +155,7 @@ export const UnderlineCss = css`
 `;
 
 function Tooltip(props: TooltipProps) {
-  return <AntdTooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
+  return <AntdTooltip color="#2c2c2c2" styles={{ body: overlayInnerCss }} {...props} />;
 }
 
 const Label = styled.div<{ $border?: boolean }>`
@@ -181,7 +181,9 @@ function ToolTipLabel(
     <AntdTooltip
       color="#2c2c2c"
       title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
-      overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
+      styles={{
+        body: { maxWidth: "232px", whiteSpace: "break-spaces" }
+      }}
       arrow={{
         pointAtCenter: true
       }}

client/packages/lowcoder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "type": "module",
   "files": [
     "src",
@@ -25,6 +25,9 @@
     },
     "./dist/style.css": {
       "import": "./dist/style.css"
+    },
+    "./dist/chunks/": {
+      "import": "./dist/chunks/"
     }
   },
   "scripts": {

client/packages/lowcoder-sdk/vite.config.mts

@@ -36,17 +36,7 @@ export const viteConfig: UserConfig = {
   },
   base: ensureLastSlash(process.env.PUBLIC_URL),
   build: {
-    minify: "terser",  
-    terserOptions: {
-      compress: {
-        drop_console: true,  
-        drop_debugger: true, 
-        pure_funcs: ["console.info", "console.debug", "console.log"], 
-      },
-      format: {
-        comments: false, 
-      },
-    },
+    minify: "terser",
     chunkSizeWarningLimit: 500,
     lib: {
       formats: ["es"],
@@ -56,46 +46,31 @@ export const viteConfig: UserConfig = {
     },
     rollupOptions: {
       treeshake: {
-        moduleSideEffects: false, 
+        moduleSideEffects: true, 
         propertyReadSideEffects: false,
         tryCatchDeoptimization: false, 
         unknownGlobalSideEffects: false, 
       },
       external: ["react", "react-dom"],
       output: {
         chunkFileNames: "chunks/[name]-[hash].js",
-        entryFileNames: "entry/[name]-[hash].js",
-        assetFileNames: "assets/[name]-[hash].[ext]",
+        entryFileNames: "lowcoder-sdk.js",
+        assetFileNames: "style.css",
         manualChunks: (id) => {
           if (id.includes("node_modules")) {
-            // CORE FRAMEWORK CHUNKS
-            if (id.includes("react")) return "react";
-            if (id.includes("react-dom")) return "react-dom";
-            if (id.includes("react-router")) return "react-router";
-            if (id.includes("react-redux")) return "react-redux";
-            if (id.includes("redux")) return "redux";
-            if (id.includes("redux-saga")) return "redux-saga";
-        
             // UI LIBRARIES
             if (id.includes("@ant-design/icons")) return "ant-design-icons";
-            if (id.includes("antd")) return "antd";
+            if (id.includes("node_modules/antd")) return "antd";
             if (id.includes("styled-components")) return "styled-components";
 
             // 🔹 BARCODE & QR CODE PROCESSING
-            if (id.includes("zxing") || id.includes("Barcode") || id.includes("QRCode") || id.includes("PDF417")) return "barcode";
-        
-            // CHARTING & DATA VISUALIZATION
-            if (id.includes("echarts")) return "echarts";
-            if (id.includes("echarts-wordcloud")) return "echarts-wordcloud";
-            if (id.includes("d3")) return "d3";
+            if (id.includes("react-qr-barcode-scanner")) return "barcode";
 
             // TEXT EDITORS & PARSERS
             if (id.includes("codemirror")) return "codemirror";
             if (id.includes("quill")) return "quill";
             if (id.includes("react-json-view")) return "react-json-view";
-            if (id.includes("react-markdown")) return "react-markdown";
             if (id.includes("react-quill")) return "react-quill";
-            if (id.includes("remark") || id.includes("rehype") || id.includes("markdown")) return "markdown-parsers";
             if (id.includes("remark-gfm")) return "remark-gfm";
             if (id.includes("rehype-raw")) return "rehype-raw";
             if (id.includes("rehype-sanitize")) return "rehype-sanitize";
@@ -133,7 +108,6 @@ export const viteConfig: UserConfig = {
             if (id.includes("xlsx")) return "xlsx";
             if (id.includes("alasql")) return "alasql";
             if (id.includes("sql-formatter")) return "sql-formatter";
-            if (id.includes("tern")) return "tern";
 
             // NETWORK & HTTP
             if (id.includes("axios")) return "axios";
@@ -158,41 +132,38 @@ export const viteConfig: UserConfig = {
             if (id.includes("cnchar")) return "cnchar";
             if (id.includes("hotkeys-js")) return "hotkeys-js";
             if (id.includes("loglevel")) return "loglevel";
-            if (id.includes("qrcode-react")) return "qrcode-react";
+            if (id.includes("qrcode.react")) return "qrcode-react";
             if (id.includes("react-joyride")) return "react-joyride";
             if (id.includes("rc-trigger")) return "rc-trigger";
             if (id.includes("really-relaxed-json")) return "really-relaxed-json";
             if (id.includes("simplebar-react")) return "simplebar-react";
-            return "vendor";
+            if (id.includes("react-documents")) return "react-documents";
+            if (id.includes("react-colorful")) return "react-colorful";
+            if (id.includes("react-best-gradient-color-picker")) return "react-best-gradient-color-picker";
+            if (id.includes("@supabase/supabase-js")) return "supabase";
+            return null;
           }
-          if (id.includes("src/api")) return "api";
-          if (id.includes("src/appView")) return "appView";
-          if (id.includes("src/base")) return "base";
-          if (id.includes("src/constants")) return "constants";
-          if (id.includes("src/i18n")) return "i18n";
-          if (id.includes("src/ide")) return "ide";
-          if (id.includes("src/layout")) return "layout";
-          if (id.includes("src/pages")) return "pages";
-          if (id.includes("src/redux")) return "app_redux";
-          if (id.includes("src/comps")) return "comps";
-          if (id.includes("comps/comps")) return "comps2";
-          if (id.includes("comps/controls")) return "controls";
-          if (id.includes("comps/queries")) return "queries";
-          if (id.includes("comps/utils")) return "utils";
-          if (id.includes("src/hooks")) return "hooks";
-          if (id.includes("src/util")) return "util";
-          return "common"; // 📦 Internal app shared code
-        },
+          return null;
+        }
       },
       experimental: {
         minChunkSize: 300000, // 📏 Force smaller chunks (~300KB)
       },
       plugins: [
-        terser(),
+        terser({
+          compress: {
+            drop_console: true,  
+            drop_debugger: true, 
+            pure_funcs: ["console.info", "console.debug", "console.log"], 
+          },
+          format: {
+            comments: /(@vite-ignore|webpackIgnore)/
+          },
+        }) as PluginOption,
         strip({
           functions: ["console.log", "debugger"], // ✅ Remove logs
           sourceMap: true,
-        }),
+        }) as PluginOption,
       ],
       onwarn: (warning, warn) => {
         if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {

client/packages/lowcoder/index.html

@@ -30,6 +30,7 @@
         flex-direction: column;
         top: 0;
         z-index: 10000;
+        transition: opacity 0.25s linear;
       }
       #loading svg {
         animation: breath 1s linear infinite;