Merge branch 'main' of https://github.com/aaron1604/lowcoder into feat/margin-padding

Author: Aqib Mirza

.github/workflows/sonarcloud.yml

@@ -21,6 +21,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+          ref: ${{ github.event.pull_request.head.sha }}
       - name: Build Java
         run: |
           mvn clean compile -DskipTests -f ./server/api-service/pom.xml

README.md

@@ -30,40 +30,50 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is
 
 ## 🪄 Features
 - **Visual UI builder** with 50+ built-in components.
-- **Module and Query Library** for reusable components and queries in the UI builder.
-- **Custom components** to share through React and Lowcoder SDK (instead of iFrame).
-- **Native connections** to PostgreSQL, MongoDB, MySQL, Redis, Elasticsearch, REST API, SMTP, etc.
+- **Modules** for reusable (!) component sets in the UI builder.
+- **Embed Lowcoder Apps as native React component** instead of iFrame (!). [Demo](https://github.com/lowcoder-org/lowcoder-sdk-demo)
+- **Query Library** for reusable data queries of your data sources.
+- **Custom components** to develop own components and use them in the UI builder.
+- **Native Data connections** to PostgreSQL, MongoDB, MySQL, Redis, Elasticsearch, REST API, SMTP, etc.
 - **JavaScript supported everywhere** to transform data, control components, etc.
-- **Embed Lowcoder pages as a React component** (instead of iFrame). [Demo](https://github.com/lowcoder-org/lowcoder-sdk-demo)
 - **Role-based access control (RBAC)** for granular permission management.
 - **Auto-saved and restorable history** for release and version control.
-- **DIY app themes** to precisely align with your company's content.
-- **Audit logs** to track activities and ensure compliance.
+- **App Themes and Theme Editor** to precisely align with your company's brand guidelines.
+
+- **Self Hosting** to use Lowcoder in your internal company network.
+- **Free Community Cloud** to start within a minute and build your first Apps. [Start here](https://app.lowcoder.cloud)
 
 ## 🏆 Comparisons
 ### 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.
 - In Lowcoder, developers can create and use their own components instead of depending on official updates.
-- Lowcoder supports left menu navigation (like most sites do). Retool has header navigation only.
+- Lowcoder is free and you can contribute!
+- The EE Version of Lowcoder comes with a much better pricing model, so you have no "per-user costs".
 ### Lowcoder vs Appsmith, Tooljet
 - Lowcoder has more components and richer configuration than Appsmith and Tooljet.
 - In Lowcoder, you can choose auto-height or fixed-height mode for your components, while Appsmith supports fixed-height mode only.
 - In Lowcoder, you can reuse common structures when building apps with modules and query library features.
+### Lowcoder vs Mendix, Outsystems, Pega
+- Lowcoder is modern. The codebase is fresh and uses modern standards.
+- Lowcoder Apps do not need a compile and deployment. Just publish and use.
+- Lowcoder Apps can get embedded natively in websites and apps, even in mobile apps.
+### Lowcoder vs internal Tool platforms
+- Lowcoder supports internal tools like admin panels perfectly, but also customer-facing apps can get developed and published.
+- The Lowcoder UI builder is straightforward and better to use than Bubble.
+- App release cycles and updates can be done nearly daily without service downtimes for customers and users.
 
 ## 👐 Support and Community
-If you have any questions, please feel free to contact us or share with our community. Our team is here ready to help.
+If you have any questions, please feel free to contact us or share them with our community. Our team is here ready to help.
 
-📮 Chat with us on [Discord](https://discord.gg/vByQwGT2Yx)
+📮 Best way is to chat with us on [Discord](https://discord.gg/qMG9uTmAx2)
 
-📑 Search for solutions in our [Documentation](docs)
+📑 Search for solutions in our [Documentation](https://docs.lowcoder.cloud/lowcoder-documentation/)
 
 🔎 Submit an issue here on [GitHub](https://github.com/lowcoder-org/lowcoder/issues)
 
 ## 💻 Deployment Options
 You can access Lowcoder from [cloud-hosted version](https://www.lowcoder.cloud/) at any time, or use the following resources for deploying Lowcoder on different platforms:
 - [Docker](docs/self-hosting/README.md)
-- [AWS AMI](docs/self-hosting/aws-ami.md) (Coming Soon)
-- [DigitalOcean](docs/self-hosting/digitalocean.md) (Coming Soon)
 
 ## 💪 Contributing
 - Language support: If you have experience with a language that isn't currently supported by our product, send us a pull request.

client/package.json

@@ -73,6 +73,7 @@
     "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch"
   },
   "dependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "antd-mobile": "^5.28.0",
     "chalk": "4",
     "number-precision": "^1.6.0",

client/packages/lowcoder-design/src/icons/icon-table-cells.svg

@@ -285,4 +285,5 @@ export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg
 export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
 export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
 export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg";
-export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"
+export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"
+export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza

client/packages/lowcoder-design/src/icons/index.ts

@@ -120,7 +120,7 @@
     "eslint-plugin-only-ascii": "^0.0.0",
     "http-proxy-middleware": "^2.0.6",
     "lowcoder-dev-utils": "workspace:^",
-    "rollup-plugin-visualizer": "^5.8.3",
+    "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^4.8.4",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.5.1",

client/packages/lowcoder/package.json

@@ -46,6 +46,7 @@ export interface ThemeDetail {
   chart?: string;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -66,6 +67,9 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
       return trans("style.margin");	
     case "padding":	
       return trans("style.padding");
+    //Added By Aqib Mirza
+    case "gridColumns":
+      return trans("themeDetail.gridColumns");
   }
   return "";
 }
@@ -79,6 +83,7 @@ export function isThemeColorKey(key: string) {
     case "primarySurface":
     case "margin":	
     case "padding":
+    case "gridColumns": //Added By Aqib Mirza
       return true;
   }
   return false;

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -10,4 +10,6 @@ export { ReactComponent as DocIcon } from "./view-doc.svg";
 export { ReactComponent as TutorialIcon } from "./tutorial.svg";
 export { ReactComponent as ShortcutIcon } from "./icon-help-shortcut.svg";
 
+export { ReactComponent as LottieIcon } from "./icon-lottie.svg"; //Added By Aqib Mirza
+
 export { GoogleLoginIcon, GithubLoginIcon, GeneralLoginIcon, EmailLoginIcon };

client/packages/lowcoder/src/assets/icons/icon-lottie.svg

@@ -1,9 +1,10 @@
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { ConfigItem, Radius, Margin, Padding } from "../pages/setting/theme/styledComponents";
+import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents";
 import { isValidColor, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
+import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza
 
 import { ExpandIcon, CompressIcon } from "lowcoder-design";
 
@@ -14,6 +15,7 @@ export type configChangeParams = {
   chart?: string;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 type ColorConfigProps = {
@@ -27,6 +29,7 @@ type ColorConfigProps = {
   showVarName?: boolean;
   margin?: string;	
   padding?: string;
+  gridColumns?: string; //Added By Aqib Mirza
 };
 
 export default function ColorPicker(props: ColorConfigProps) {
@@ -40,13 +43,15 @@ export default function ColorPicker(props: ColorConfigProps) {
     showVarName = true,
     margin: defaultMargin,	
     padding: defaultPadding,
+    gridColumns: defaultGridColumns, //Added By Aqib Mirza
   } = props;
   const configChangeWithDebounce = _.debounce(configChange, 0);
   const [color, setColor] = useState(defaultColor);
   const [radius, setRadius] = useState(defaultRadius);
 
   const [margin, setMargin] = useState(defaultMargin);	
   const [padding, setPadding] = useState(defaultPadding);
+  const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
 
   const varName = `(${colorKey})`;
 
@@ -103,6 +108,21 @@ export default function ColorPicker(props: ColorConfigProps) {
     configChange({ colorKey, padding: result });	
   };
 
+  //Added By Aqib Mirza
+
+  const gridColumnsInputBlur = (gridColumns: string) => {
+    let result = "";
+    if (!gridColumns) {
+      result = "0";
+    } else {
+      result = gridColumns;
+    }
+    setGridColumns(result);
+    configChange({ colorKey, gridColumns: result });
+  };
+
+  /////////////////////
+
   useEffect(() => {
     if (color && isValidColor(color)) {
       configChangeWithDebounce({ colorKey, color });
@@ -125,6 +145,11 @@ export default function ColorPicker(props: ColorConfigProps) {
   useEffect(() => {	
     setPadding(defaultPadding);	
   }, [defaultPadding]);
+  // Added By Aqib Mirza
+  useEffect(() => {
+    setGridColumns(defaultGridColumns);
+  }, [defaultGridColumns]);
+  //////////////////////
 
   return (
     <ConfigItem className={props.className}>
@@ -136,7 +161,8 @@ export default function ColorPicker(props: ColorConfigProps) {
       </div>
       {colorKey !== "borderRadius" &&	
         colorKey !== "margin" &&	
-        colorKey !== "padding" && (
+        colorKey !== "padding" && 
+      colorKey !== "gridColumns" && (
         <div className="config-input">
           <ColorSelect
             changeColor={_.debounce(setColor, 500, {
@@ -153,7 +179,7 @@ export default function ColorPicker(props: ColorConfigProps) {
             onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
           />
         </div>
-      )}
+      )} 
       {colorKey === "borderRadius" && (
         <div className="config-input">
           <Radius radius={defaultRadius || "0"}>
@@ -203,7 +229,25 @@ export default function ColorPicker(props: ColorConfigProps) {
               paddingInputBlur(e.currentTarget.value)	
             }	
           />	
-        </div>	
+        </div>
+        )}
+      {colorKey === "gridColumns" && (
+        <div className="config-input">
+          <GridColumns gridColumns={defaultGridColumns || "24"}>
+            <div>
+              <GridIcon title="" />
+            </div>
+          </GridColumns>
+          <TacoInput
+            value={gridColumns}
+            onChange={(e) => setGridColumns(e.target.value)}
+            onBlur={(e) => gridColumnsInputBlur(e.target.value)}
+            onKeyUp={(e) =>
+              e.nativeEvent.key === "Enter" &&
+              gridColumnsInputBlur(e.currentTarget.value)
+            }
+          />
+        </div>
       )}
     </ConfigItem>
   );