integrate iconscout in icon button and image comp

raheeliftikhar5 · raheeliftikhar5 · commit 0639f1bc80bb · 2025-04-19T01:27:07.000+05:00
diff --git a/client/packages/lowcoder/src/api/iconscoutApi.ts b/client/packages/lowcoder/src/api/iconscoutApi.ts
@@ -0,0 +1,80 @@
+import Api from "api/api";
+import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";
+import { GenericApiResponse } from "./apiResponses";
+
+export interface SearchParams {
+  query: string;
+  product_type: string;
+  asset: string;
+  per_page: number;
+  page: 1;
+  sort: string;
+  formats: string;
+}
+
+export type ResponseType = {
+  response: any;
+};
+
+const apiUrl = "https://api.iconscout.com";
+const clientID = ""; //"91870410585071";
+const clientSecret = ""; // "GV5aCWpwdLWTxVXFBjMKSoyDPUyjzXLR";
+const currentPage = 1;
+const currentQuery = '';
+const currentData = [];
+
+let axiosIns: AxiosInstance | null = null;
+
+const getAxiosInstance = (clientSecret?: string) => {
+  if (axiosIns && !clientSecret) {
+    return axiosIns;
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "Client-ID": clientID,
+  }
+  if (clientSecret) {
+    headers['Client-Secret'] = clientSecret;
+  }
+  const apiRequestConfig: AxiosRequestConfig = {
+    baseURL: `${apiUrl}`,
+    headers,
+    withCredentials: true,
+  };
+
+  axiosIns = axios.create(apiRequestConfig);
+  return axiosIns;
+}
+
+class IconscoutApi extends Api {
+  static async search(params: SearchParams): Promise<any> {
+    let response;
+    try {
+      response = await getAxiosInstance().request({
+        url: '/v3/search',
+        method: "GET",
+        withCredentials: false,
+        params: {
+          ...params,
+          'formats[]': params.formats,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+    return response?.data.response.items;
+  }
+
+  static async download(uuid: string, params: Record<string, string>): Promise<any> {
+    const response = await getAxiosInstance(clientSecret).request({
+      url: `/v3/items/${uuid}/api-download`,
+      method: "POST",
+      withCredentials: false,
+      params,
+    });
+    return response?.data.response.download;
+  }
+}
+
+export default IconscoutApi;
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -12,7 +12,7 @@ import {
   withExposingConfigs,
 } from "../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
-import { useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
@@ -35,6 +35,8 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
 import { PositionControl } from "comps/controls/dropdownControl";
+import { dropdownControl } from "../controls/dropdownControl";
+import { IconScoutAssetType, IconscoutControl } from "../controls/iconscoutControl";
 
 const Container = styled.div<{ 
   $style: ImageStyleType | undefined, 
@@ -111,6 +113,10 @@ const getStyle = (style: ImageStyleType) => {
 };
 
 const EventOptions = [clickEvent] as const;
+const ModeOptions = [
+  { label: "URL", value: "standard" },
+  { label: "Advanced", value: "advanced" },
+] as const;
 
 const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
   const imgRef = useRef<HTMLDivElement>(null);
@@ -194,7 +200,11 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
             }
           >
             <AntImage
-              src={props.src.value}
+              src={
+                props.sourceMode === 'advanced'
+                ? (props.srcIconScout as ReactElement)?.props.value
+                : props.src.value
+              }
               referrerPolicy="same-origin"
               draggable={false}
               preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
@@ -210,7 +220,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 const childrenMap = {
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   src: withDefault(StringStateControl, "https://temp.im/350x400"),
+  srcIconScout: IconscoutControl(IconScoutAssetType.ILLUSTRATION),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(ImageStyle , 'style'),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
@@ -234,7 +246,14 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
     return (
       <>
         <Section name={sectionNames.basic}>
-          {children.src.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.src.propertyView({
+            label: trans("image.src"),
+          })}
+          {children.sourceMode.getView() === 'advanced' &&children.srcIconScout.propertyView({
             label: trans("image.src"),
           })}
         </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -18,6 +18,7 @@ import {
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
 import { EditorContext } from "comps/editorState";
+import { IconScoutAssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 
 const Player = lazy(
   () => import('@lottiefiles/react-lottie-player')
@@ -84,12 +85,20 @@ const speedOptions = [
   },
 ] as const;
 
+const ModeOptions = [
+  { label: "Data", value: "standard" },
+  { label: "Advanced", value: "advanced" },
+] as const;
+
 let JsonLottieTmpComp = (function () {
   const childrenMap = {
+    sourceMode: dropdownControl(ModeOptions, "standard"),
     value: withDefault(
       ArrayOrJSONObjectControl,
       JSON.stringify(defaultLottie, null, 2)
     ),
+    srcIconScout: IconscoutControl(IconScoutAssetType.LOTTIE),
+    valueIconScout: ArrayOrJSONObjectControl,
     speed: dropdownControl(speedOptions, "1"),
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
@@ -100,6 +109,7 @@ let JsonLottieTmpComp = (function () {
     keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
   return new UICompBuilder(childrenMap, (props) => {
+    console.log(props.srcIconScout);
     return (
       <div
         style={{
@@ -145,7 +155,17 @@ let JsonLottieTmpComp = (function () {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {children.value.propertyView({
+            { children.sourceMode.propertyView({
+              label: "",
+              radioButton: true
+            })}
+            {children.sourceMode.getView() === 'standard' && children.value.propertyView({
+              label: trans("jsonLottie.lottieJson"),
+            })}
+            {children.sourceMode.getView() === 'advanced' && children.srcIconScout.propertyView({
+              label: "Lottie Source",
+            })}
+            {children.sourceMode.getView() === 'advanced' && children.valueIconScout.propertyView({
               label: trans("jsonLottie.lottieJson"),
             })}
           </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
+import { IconScoutAssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -74,6 +75,13 @@ const IconWrapper = styled.div<{ $style: any }>`
   ${(props) => props.$style && getStyleIcon(props.$style)}
 `;
 
+const IconScoutWrapper = styled.div<{ $style: any }>`
+  display: flex;
+  height: 100%;
+
+  ${(props) => props.$style && getStyleIcon(props.$style)}
+`;
+
 function getStyleIcon(style: any) {
   return css`
     svg {
@@ -163,6 +171,11 @@ const typeOptions = [
   },
 ] as const;
 
+const ModeOptions = [
+  { label: "Standard", value: "standard" },
+  { label: "Advanced", value: "advanced" },
+] as const;
+
 function isDefault(type?: string) {
   return !type;
 }
@@ -183,7 +196,9 @@ const childrenMap = {
   disabled: BoolCodeControl,
   loading: BoolCodeControl,
   form: SelectFormControl,
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   prefixIcon: IconControl,
+  prefixIconScout: IconscoutControl(IconScoutAssetType.ICON),
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
   restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
@@ -226,7 +241,7 @@ let ButtonTmpComp = (function () {
 
       setStyle(container?.clientHeight + "px", container?.clientWidth + "px");
     };
-
+    console.log(props.prefixIconScout);
     return (
       <EditorContext.Consumer>
         {(editorState) => (
@@ -270,14 +285,20 @@ let ButtonTmpComp = (function () {
                         : submitForm(editorState, props.form)
                     }
                   >
-                    {props.prefixIcon && (
+                    {props.sourceMode === 'standard' && props.prefixIcon && (
                       <IconWrapper
                         $style={{ ...props.style, size: props.iconSize }}
                       >
                         {props.prefixIcon}
                       </IconWrapper>
                     )}
-                    
+                    {props.sourceMode === 'advanced' && props.prefixIconScout && (
+                      <IconScoutWrapper
+                        $style={{ ...props.style, size: props.iconSize }}
+                      >
+                        {props.prefixIconScout}
+                      </IconScoutWrapper>
+                    )}
                   </Button100>
                 </div>
               </Container>
@@ -291,7 +312,14 @@ let ButtonTmpComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.prefixIcon.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.prefixIcon.propertyView({
+            label: trans("button.icon"),
+          })}
+          {children.sourceMode.getView() === 'advanced' &&children.prefixIconScout.propertyView({
             label: trans("button.icon"),
           })}
         </Section>
diff --git a/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx b/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx
