fixed imported dependencies path

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -25,7 +25,8 @@ import {
 import { RefControl } from "comps/controls/refControl";
 
 import React, { useContext } from "react";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -130,7 +131,7 @@ const ButtonTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     style: ButtonStyleControl,
-    animationStyle:styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => (

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -21,8 +21,7 @@ import {
   ButtonStyleControl,
   getButtonStyle,
 } from "./buttonCompConstants";
-import { styleControl } from "@lowcoder-ee/index.sdk";
-
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;

client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx

@@ -16,7 +16,8 @@ import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {

client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx

@@ -18,7 +18,8 @@ import {
   ContainerCompBuilder,
 } from "../pageLayoutComp/pageLayoutCompBuilder";
 import { PageLayout } from "../pageLayoutComp/pageLayout";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {

client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

@@ -12,7 +12,8 @@ import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
-import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -218,7 +219,7 @@ function InnerCustomComponent(props: IProps) {
 const childrenMap = {
   model: jsonObjectStateControl(defaultModel),
   code: withDefault(StringControl, defaultCode),
-  style:styleControl(CustomStyle),
+  style: styleControl(CustomStyle),
   animationStyle:styleControl(AnimationStyle),
 };
 

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -58,7 +58,8 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { styled } from "styled-components";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 
 const FormWrapper = styled.div`
   height: 100%;
@@ -79,7 +80,7 @@ const childrenMap = {
   disableSubmit: BoolCodeControl,
   loading: BoolCodeControl,
   onEvent: eventHandlerControl(eventOptions),
-  animationStyle:styleControl(AnimationStyle)
+  animationStyle: styleControl(AnimationStyle)
 };
 
 type FormProps = TriContainerViewProps &

client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx

@@ -11,7 +11,8 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { useContext } from "react";
-import { AnimationStyle, AnimationStyleType, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 /**
  * JsonExplorer Comp
@@ -54,7 +55,7 @@ let JsonExplorerTmpComp = (function () {
     indent: withDefault(NumberControl, 4),
     expandToggle: BoolControl.DEFAULT_TRUE,
     theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
-    animationStyle:styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => (
     <JsonExplorerContainer

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -18,11 +18,11 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
-import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
+import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 
 const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;

client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

@@ -39,7 +39,6 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
-import { BoolControl } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;

client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx

@@ -9,8 +9,11 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
@@ -69,10 +72,27 @@ let ProgressCircleTmpComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl("value", 60),
     // borderRadius property hidden as it's not valid for progress circle
-    style: styleControl(CircleProgressStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(CircleProgressStyle, 'style'),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <StyledProgressCircle
         $style={props.style}

client/packages/lowcoder/src/comps/comps/progressComp.tsx

@@ -10,8 +10,11 @@ import styled, { css } from "styled-components";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
@@ -53,10 +56,27 @@ const ProgressBasicComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl('value', 60),
     showInfo: BoolControl,
-    style: styleControl(ProgressStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(ProgressStyle, 'style'),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <ProgressStyled
         percent={Math.round(props.value.value)}

client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx

@@ -22,7 +22,7 @@ import { RefControl } from "comps/controls/refControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { withDefault } from "@lowcoder-ee/index.sdk";
+import { withDefault } from "@lowcoder-ee/comps/generators";
 
 export const RadioLayoutOptions = [
   { label: trans("radio.horizontal"), value: "horizontal" },
@@ -41,7 +41,7 @@ export const RadioChildrenMap = {
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
+  inputFieldStyle: withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
   animationStyle: styleControl(AnimationStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,