Feature/integrate animations

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

@@ -146,6 +146,7 @@ export const sectionNames = {
   layout: trans("prop.layout"),
   style: trans("prop.style"),
   labelStyle:trans("prop.labelStyle"),
+  animationStyle:trans("prop.animationStyle"),
   data: trans("prop.data"),
   meetings: trans("prop.meetings"), // added by Falk Wolsky
   field: trans("prop.field"),

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -23,6 +23,7 @@ export const en = {
     advanced: "Advanced",
     validation: "Validation",
     layout: "Layout",
+    animationStyle:"Animation Style",
     labelStyle: "Label Style",
     style: "Style",
     meetings: "Meeting Settings",

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

@@ -161,6 +161,10 @@ export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
 export { ReactComponent as EditIcon } from "./icon-edit.svg";
 export { ReactComponent as EditableIcon } from "./icon-editable.svg";
 export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
+export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
+export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
+export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
+export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
 export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
 export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
 export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";

client/packages/lowcoder/package.json

@@ -36,6 +36,7 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
+    "animate.css": "^4.1.1",
     "antd": "5.13.2",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",

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

@@ -44,10 +44,17 @@ export interface ThemeDetail {
   primarySurface: string; // comp bg-color
   borderRadius: string;
   chart?: string;
-  margin?: string;	
+  margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
   textSize?: string;
+  animation?: string;
+  animationDelay?: string;
+  animationDuration?: string;
+  opacity?: string;
+  boxShadow?: string;
+  boxShadowColor?: string;
+  animationIterationCount?: string;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {

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

@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
+  AnimationStyle,
   InputFieldStyle,
   InputLikeStyle,
   InputLikeStyleType,
@@ -62,6 +63,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
     ${getStyle(props.$style)}
     input {
       padding: ${props.style?.padding};
+      rotate: ${props?.$style?.rotation};
     }
     .ant-select-single {
       width: 100% !important;
@@ -89,6 +91,7 @@ const childrenMap = {
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
   inputFieldStyle: styleControl(InputLikeStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -283,6 +286,7 @@ let AutoCompleteCompBase = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle: props.animationStyle,
       ...validateState,
     });
   })
@@ -347,6 +351,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
         </>
       );
     })

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

@@ -3,7 +3,7 @@ import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/butt
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -23,7 +23,11 @@ import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";
 
-const Link = styled(Button) <{ $style: LinkStyleType }>`
+const Link = styled(Button)<{
+  $style: LinkStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   ${(props) => `
     color: ${props.$style.text};
     margin: ${props.$style.margin};
@@ -81,6 +85,7 @@ const LinkTmpComp = (function () {
     disabled: BoolCodeControl,
     loading: BoolCodeControl,
     style: migrateOldData(styleControl(LinkStyle), fixOldData),
+    animationStyle:styleControl(AnimationStyle),
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
@@ -91,6 +96,7 @@ const LinkTmpComp = (function () {
     return (
       <ButtonCompWrapper disabled={props.disabled}>
         <Link
+          $animationStyle={props.animationStyle}
           ref={props.viewRef}
           $style={props.style}
           loading={props.loading}
@@ -130,7 +136,10 @@ const LinkTmpComp = (function () {
           )}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+            <>
+              <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+              <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
+            </>
           )}
         </>
       );

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

@@ -15,7 +15,11 @@ import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompCons
 import { IconControl } from "comps/controls/iconControl";
 import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
-import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
+import {
+  AnimationStyle,
+  AnimationStyleType,
+  ToggleButtonStyle,
+} from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
@@ -29,7 +33,9 @@ const IconWrapper = styled.div`
 const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
   $align: "left" | "center" | "right" | "stretch";
   $showBorder: boolean;
+  $animationStyle: AnimationStyleType;
 }>`
+  ${(props) => props.$animationStyle}
   width: 100%;
   display: flex;
   justify-content: ${(props) => props.$align};
@@ -55,7 +61,8 @@ const ToggleTmpComp = (function () {
     iconPosition: LeftRightControl,
     alignment: AlignWithStretchControl,
     style: styleControl(ToggleButtonStyle),
-    showBorder: withDefault(BoolControl, true), 
+    animationStyle: styleControl(AnimationStyle),
+    showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -67,6 +74,7 @@ const ToggleTmpComp = (function () {
         disabled={props.disabled}
         $align={props.alignment}
         $showBorder={props.showBorder}
+        $animationStyle={props.animationStyle}
       >
         <Button100
           ref={props.viewRef}
@@ -122,13 +130,21 @@ const ToggleTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <><Section name={sectionNames.style}>
-            {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
-            {children.style.getPropertyView()}
-          </Section></>
-        )}
-
+        {(useContext(EditorContext).editorModeStatus === "layout" ||
+          useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+            <Section name={sectionNames.style}>
+              {children.showBorder.propertyView({
+                label: trans("toggleButton.showBorder"),
+              })}
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
+          )}
+
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)

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

@@ -31,6 +31,7 @@ import { EditorContext } from "comps/editorState";
 
 // Introducing styles
 import {
+  AnimationStyle,
   CommentStyle,
   heightCalculator,
   widthCalculator,
@@ -100,6 +101,7 @@ const childrenMap = {
   }),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(CommentStyle),
+  animationStyle: styleControl(AnimationStyle),
   commentList: jsonValueExposingStateControl("commentList", []),
   deletedItem: jsonValueExposingStateControl("deletedItem", []),
   submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -125,6 +127,7 @@ const CommentCompBase = (
     userInfo,
     placeholder,
     deleteAble,
+    animationStyle,
   } = props;
   type PrefixType = "@" | keyof typeof mentionList;
   // Used to save the consolidated list of mentions
@@ -233,7 +236,11 @@ const CommentCompBase = (
         width: widthCalculator(style.margin ?? "3px"),
         height: heightCalculator(style.margin ?? "3px"),
         background: style.background,
-        borderRadius: style.radius,
+      borderRadius: style.radius,
+      animation: animationStyle.animation,
+      animationDelay: animationStyle.animationDelay,
+      animationDuration: animationStyle.animationDuration,
+        animationIterationCount:animationStyle.animationIterationCount
       }}>
       <div
         style={{
@@ -413,8 +420,12 @@ let CommentBasicComp = (function () {
             {children.placeholder.propertyView({
               label: trans("comment.placeholderDec"),
             })}
-          </Section><Section name={sectionNames.style}>
+          </Section>
+            <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
             </Section></>
         )}
 

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

@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "comps/editorState";
 import { Card } from "antd";
 import styled from "styled-components";
-import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { IconControl } from "comps/controls/iconControl";
 import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,7 +22,14 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
+const Warpper = styled.div<{
+  $style: CardStyleType | undefined;
+  $showMate: boolean;
+  $cardType: string;
+  $headerStyle: CardHeaderStyleType;
+  $bodyStyle: CardHeaderStyleType;
+  $animationStyle:AnimationStyleType;
+}>`
   height: 100%;
   width: 100%;
   .ant-card-small >.ant-card-head {
@@ -70,6 +77,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
+    ${props=>props.$animationStyle}
   }
   .ant-card-body {
     display: ${props => props.$showMate ? '' : 'none'};
@@ -173,6 +181,7 @@ export const ContainerBaseComp = (function () {
     style: styleControl(CardStyle),
     headerStyle: styleControl(CardHeaderStyle),
     bodyStyle: styleControl(CardHeaderStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -202,6 +211,7 @@ export const ContainerBaseComp = (function () {
         <Warpper
           ref={conRef}
           $style={props.style}
+          $animationStyle={props.animationStyle}
           $headerStyle={props.headerStyle}
           $bodyStyle={props.bodyStyle}
           $showMate={props.showMeta || props.cardType == 'custom'}
@@ -321,6 +331,9 @@ export const ContainerBaseComp = (function () {
               <Section name={sectionNames.bodyStyle}>
                 {children.bodyStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>

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

@@ -16,10 +16,12 @@ 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";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
     disabled: BoolCodeControl,
+    animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return (

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

@@ -18,11 +18,12 @@ import {
   ContainerCompBuilder,
 } from "../pageLayoutComp/pageLayoutCompBuilder";
 import { PageLayout } from "../pageLayoutComp/pageLayout";
-
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 export const ContainerBaseComp = (function () {
-  const childrenMap = { 
-    disabled: BoolCodeControl
+  const childrenMap = {
+    disabled: BoolCodeControl,
+    animationStyle: styleControl(AnimationStyle),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -52,7 +53,10 @@ export const ContainerBaseComp = (function () {
             </Section>
             <Section name={sectionNames.style}>
               { children.container.stylePropertyView() }
-            </Section>
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             {children.container.children.showHeader.getView() && (
               <Section name={"Header Style"}>
                 { children.container.headerStylePropertyView() }

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

@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { TextStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -63,6 +63,7 @@ export const ContainerBaseComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     width: withDefault(StringControl, "40"),
     style: styleControl(TextStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return <TriContainer {...props} />;
@@ -95,6 +96,9 @@ export const ContainerBaseComp = (function () {
               <Section name={"Floating Text Style"}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
               <Section name={"Container Style"}>
                 {children.container.stylePropertyView()}
               </Section>