Merge pull request #702 from lowcoder-org/dev

Dev - update

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.3.0
+2.3.1

client/package.json

@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@remixicon/react": "^4.1.1",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",

client/packages/lowcoder-comps/README.md

@@ -1,22 +1,100 @@
-# lowcoder comp lib
+# Lowcoder Extra Components
+
+This is the workspace for Lowcoder Extra Components like Calendar, Image Editor, Mermaid Charts and eCharts.
+
+## Local Development preparation
+
+Navigate your terminal or bash to your /root folder (lowcoder repository) to install Lowcoder Extra Components dependencies and the Lowcoder SDK
+
+To develop with the Lowcoder Extra Components after you clone the Lowcoder Repository, first make sure the Lowcoder SDK is local built.
+
+```bash
+cd client/packages/lowcoder-sdk
+yarn build
+```
 
 ## Start
 
-Start dev server to develop your comp lib.
+Now you can start the local dev server for Lowcoder Extra Components to develop and add your Component Plugin
 
 ```bash
+cd client/packages/lowcoder-comps
 yarn start
+```
 
-# or
+The local dev server will build for roughly a minute and open then a Browser Window on http://localhost:9000/ with the Lowcoder Component Builder. 
+
+## Local development
+
+After the local dev server is started, the Lowcoder Component Builder is prepared. A new browser window should open at http://localhost:9000 This is the Components Preview, which allows you to see your new component in action, as it would work in the Lowcoder Editor.
+
+Data, methods and properties are visible and interactive, so you can test your Component during development. The view will get automatically refreshed.
+
+The Lowcoder Component Builder makes the development & publishing of multiple individual components as bundle possible. Find the /src/comps folder in /lowcoder-comps. Here are existing components to find. It is suggested for new components to create a new folder. In the left navigation of the Components Preview you can switch between your components.
+
+to see your component and include it in the processing on the development server, you have to do the folloiwing steps:
+
+### modify /lowcoder-comps/package.json
+
+```JSON
+"yournewcomponent": {
+    "name": "Your new Component name",
+    "icon": "./icons/your-icon.svg",
+    "description": "A Component Plugin to ...",
+    "category": "itemHandling",
+    "layoutInfo": {
+        "w": 6,
+        "h": 30
+    }
+}
+```
 
-npm start
+
+Please choose one category out of:
+
+ - dashboards
+ - layout
+ - forms
+ - collaboration
+ - projectmanagement
+ - scheduling
+ - documents
+ - itemHandling
+ - multimedia
+ - integration
+
+layoutInfo helps you to define the size (in grid-cells) of your Component in the grid for the very first moment, when a user drags your Component out of the components display on the right side in the Lowcoder Editor.
+
+### modify /lowcoder-comps/src/index.ts
+
+```JavaScript
+Add your Component for the exported members of Lowcoder Extra Components 
+
+import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
+import { ImageEditorComp } from "./comps/imageEditorComp/index";
+import { CalendarComp } from "./comps/calendarComp/calendarComp";
+import { MermaidComp } from "comps/mermaidComp";
+
+import { YourComponent } from "comps/yourComponentFolder/yourComponent";
+
+export default {
+  chart: ChartCompWithDefault,
+  imageEditor: ImageEditorComp,
+  calendar: CalendarComp,
+  mermaid: MermaidComp,
+
+  yourcomponent: YourComponent,
+};
 ```
+Now your Plugin should be visibe and displayed in the Lowcoder Component Builder at http://localhost:9000/
 
 ## Build
 
-Build current comp lib into a .tgz file that you can upload it to the Lowcoder Comp Market.
+When you finish development and all tests, you can build the Components to use it in runtime.
 
-Before build you should change the version in package.json file.
+This will build the current Component Plugins into a .tgz file that you can upload.
+
+**Before build you should change the version in package.json file.**
 
 ```bash
 yarn build
@@ -25,3 +103,18 @@ yarn build
 
 npm run build
 ```
+
+## How to publish a Component Plugin
+
+With the following command you can publish the script to the NPM repository:
+
+```bash
+yarn build --publish
+```
+
+This command will publis the whole Lowcoder Extra Components bundle to [NPMjs](https://www.npmjs.com/)
+Make sure, you updated the Version of Lowcoder Comps before in /lowcoder-comps/package.json
+
+## Contribute your Plugin
+
+If you wish to contribute your plugin and persist it as general Lowcoder Extra Component, please raise a PR to our /dev branch in the Lowcoder Community-Edition Repository https://github.com/lowcoder-org/lowcoder

client/packages/lowcoder-comps/package.json

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "jest": "29.3.0",
-    "vite": "^4.5.2",
+    "vite": "^5.0.12",
     "vite-tsconfig-paths": "^3.6.0"
   }
 }

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -205,9 +205,9 @@ export const Wrapper = styled.div<{
       flex-direction: inherit;
     }
     .fc-day-today .fc-daygrid-day-number {
-      background-color: ${(props) => props.$theme.primary};
+      background-color: ${(props) => props.$theme?.primary ? props.$theme.primary : props.$style.background};
       color: ${(props) =>
-        contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)};
+        contrastText(props.$theme?.primary || "", props.$theme?.textDark || "#000000", props.$theme?.textLight || "#ffffff")};
     }
     .fc-daygrid-day-events {
       padding: 1px 0 5px 0;
@@ -585,10 +585,10 @@ export const Wrapper = styled.div<{
     }
     .fc-day-today.fc-col-header-cell {
       background-color: ${(props) =>
-        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
+        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"};
       a {
         color: ${(props) =>
-          !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
+          !isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)};
       }
     }
     .fc-col-header-cell-cushion {

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

@@ -68,7 +68,7 @@ const TextInput = styled(Input)<InputProps & { $hasPrefix?: boolean }>`
   border: none;
   padding: 0 8px 0 4px;
   padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
-  color: #ffffff;
+  color: #444444;
   line-height: 28px;
   font-size: 14px;
 

client/packages/lowcoder/src/comps/comps/timelineComp/antIcon.tsx renamed to client/packages/lowcoder-design/src/icons/antIcon.tsx

@@ -1581,3 +1581,24 @@ export const ANTDICON = {
   zoominoutlined: <ZoomInOutlined />,
   zoomoutoutlined: <ZoomOutOutlined />,
 };
+
+
+// Function to dynamically import icons
+export const loadAntDIcon = async (iconName: string) => {
+  if (!iconName) return null;
+
+  try {
+    const module = await import(`@ant-design/icons`);
+    const IconComponent = (module as any)[iconName];
+    if (IconComponent) {
+      // Return the icon component if found
+      return <IconComponent />;
+    } else {
+      console.error(`Icon ${iconName} not found in @ant-design/icons`);
+      return null;
+    }
+  } catch (error) {
+    console.error(`Error loading icon ${iconName}:`, error);
+    return null;
+  }
+};

client/packages/lowcoder-design/src/icons/icon-application-home.svg

@@ -176,11 +176,13 @@ export { ReactComponent as HomeModuleIcon } from "./icon-application-module.svg"
 export { ReactComponent as HomeQueryLibraryIcon } from "./icon-application-query-library.svg";
 export { ReactComponent as HomeDataSourceIcon } from "./icon-application-datasource.svg";
 export { ReactComponent as RecyclerIcon } from "./icon-application-recycler.svg";
+export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg";
 export { ReactComponent as HomeActiveIcon } from "./icon-application-home-active.svg";
 export { ReactComponent as HomeModuleActiveIcon } from "./icon-application-module-active.svg";
 export { ReactComponent as HomeQueryLibraryActiveIcon } from "./icon-application-query-library-active.svg";
 export { ReactComponent as HomeDataSourceActiveIcon } from "./icon-application-datasource-active.svg";
 export { ReactComponent as RecyclerActiveIcon } from "./icon-application-recycler-active.svg";
+export { ReactComponent as MarketplaceActiveIcon } from "./icon-application-marketplace-active.svg";
 export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg";
 export { ReactComponent as HomeSettingIcon } from "./icon-application-setting.svg";
 export { ReactComponent as FolderIcon } from "./icon-application-folder.svg";

client/packages/lowcoder-design/src/icons/icon-application-marketplace-active.svg

@@ -49,3 +49,5 @@ export * from "./components/toolTip";
 export * from "./components/video";
 
 export * from "./icons";
+
+export * from "./icons/antIcon";

client/packages/lowcoder-design/src/icons/icon-application-marketplace.svg

@@ -78,6 +78,7 @@ class ApplicationApi extends Api {
   static newURLPrefix = "/applications";
   static fetchHomeDataURL = "/v1/applications/home";
   static createApplicationURL = "/v1/applications";
+  static fetchAllMarketplaceAppsURL = "/v1/applications/marketplace-apps";
   static deleteApplicationURL = (applicationId: string) => `/v1/applications/${applicationId}`;
   static getAppPublishInfoURL = (applicationId: string) => `/v1/applications/${applicationId}/view`;
   static getAppEditingInfoURL = (applicationId: string) => `/v1/applications/${applicationId}`;
@@ -92,6 +93,9 @@ class ApplicationApi extends Api {
     `/v1/applications/${applicationId}/permissions/${permissionId}`;
   static createFromTemplateURL = `/v1/applications/createFromTemplate`;
   static publicToAllURL = (applicationId: string) => `/applications/${applicationId}/public-to-all`;
+  static publicToMarketplaceURL = (applicationId: string) => `/v1/applications/${applicationId}/public-to-marketplace`;
+  static getMarketplaceAppURL = (applicationId: string) => `/v1/applications/${applicationId}/view_marketplace`;
+
 
   static fetchHomeData(request: HomeDataPayload): AxiosPromise<HomeDataResponse> {
     return Api.get(ApplicationApi.fetchHomeDataURL, request);
@@ -167,7 +171,9 @@ class ApplicationApi extends Api {
     const url =
       type === "published"
         ? ApplicationApi.getAppPublishInfoURL(applicationId)
-        : ApplicationApi.getAppEditingInfoURL(applicationId);
+        : type === "view_marketplace"
+          ? ApplicationApi.getMarketplaceAppURL(applicationId)
+          : ApplicationApi.getAppEditingInfoURL(applicationId);
     return Api.get(url);
   }
 
@@ -211,6 +217,20 @@ class ApplicationApi extends Api {
       publicToAll: publicToAll,
     });
   }
+
+  static publicToMarketplace(appId: string, publicToMarketplace: boolean) {
+    return Api.put(ApplicationApi.publicToMarketplaceURL(appId), {
+      publicToMarketplace,
+    });
+  }
+
+  static fetchAllMarketplaceApps() {
+    return Api.get(ApplicationApi.fetchAllMarketplaceAppsURL);
+  }
+
+  static getMarketplaceApp(appId: string) {
+    return Api.get(ApplicationApi.getMarketplaceAppURL(appId));
+  }
 }
 
 export default ApplicationApi;

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

@@ -29,6 +29,10 @@ export interface CreateOrgResponse extends ApiResponse {
   data: { orgId: string };
 }
 
+export interface OrgAPIUsageResponse extends ApiResponse {
+  data: number;
+}
+
 export class OrgApi extends Api {
   static createGroupURL = "/v1/groups";
   static updateGroupURL = (groupId: string) => `/v1/groups/${groupId}/update`;
@@ -47,6 +51,7 @@ export class OrgApi extends Api {
   static createOrgURL = "/v1/organizations";
   static deleteOrgURL = (orgId: string) => `/v1/organizations/${orgId}`;
   static updateOrgURL = (orgId: string) => `/v1/organizations/${orgId}/update`;
+  static fetchUsage = (orgId: string) => `/v1/organizations/${orgId}/api-usage`;
 
   static createGroup(request: { name: string }): AxiosPromise<GenericApiResponse<OrgGroup>> {
     return Api.post(OrgApi.createGroupURL, request);
@@ -127,6 +132,10 @@ export class OrgApi extends Api {
   static updateOrg(request: UpdateOrgPayload): AxiosPromise<ApiResponse> {
     return Api.put(OrgApi.updateOrgURL(request.id), request);
   }
+
+  static fetchAPIUsage(orgId: string, lastMonthOnly?: boolean): AxiosPromise<ApiResponse> {
+    return Api.get(OrgApi.fetchUsage(orgId), lastMonthOnly);
+  }
 }
 
 export default OrgApi;

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

@@ -14,6 +14,7 @@ import {
   IMPORT_APP_FROM_TEMPLATE_URL,
   INVITE_LANDING_URL,
   isAuthUnRequired,
+  MARKETPLACE_URL,
   ORG_AUTH_LOGIN_URL,
   ORG_AUTH_REGISTER_URL,
   QUERY_LIBRARY_URL,
@@ -138,6 +139,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 FOLDER_URL,
                 TRASH_URL,
                 SETTING,
+                MARKETPLACE_URL,
               ]}
               // component={ApplicationListPage}
               component={ApplicationHome}