[1104] Add Link widget and corresponding tests

.changeset/old-boxes-drive.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Add Link widget and corresponding tests and Update types to use Expression for various properties in widgets

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -1,4 +1,6 @@
 View:
+  inputs:
+    - userId
   styles:
     scrollableView: true
   onLoad:
@@ -1295,6 +1297,182 @@ View:
                   onRefresh:
                     executeCode: |
                       console.log('refreshed')
+        - Column:
+            styles:
+              padding: 20
+            children:
+              - Text:
+                  text: Link Widget Examples
+                  styles:
+                    fontSize: 24
+                    fontWeight: bold
+                    marginBottom: 20
+
+              - Card:
+                  styles:
+                    marginBottom: 20
+                  children:
+                    - Text:
+                        text: Basic Internal Links
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Link:
+                        url: /widgets
+                        widget:
+                          Text:
+                            text: Go to Widgets Page
+                    - Text:
+                        text: " | "
+                    - Link:
+                        url: /forms
+                        styles:
+                          color: blue
+                          hoverColor: red
+                        widget:
+                          Text:
+                            text: Forms Page (with hover effect)
+
+              - Card:
+                  styles:
+                    marginBottom: 20
+                  children:
+                    - Text:
+                        text: External Links
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Link:
+                        url: https://google.com
+                        openNewTab: true
+                        widget:
+                          Text:
+                            text: Google (opens in new tab)
+                    - Text:
+                        text: " | "
+                    - Link:
+                        url: mailto:test@example.com
+                        widget:
+                          Text:
+                            text: Send Email
+
+              - Card:
+                  styles:
+                    marginBottom: 20
+                  children:
+                    - Text:
+                        text: Links with Custom Content
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Link:
+                        url: /home
+                        styles:
+                          textDecoration: none
+                          color: darkblue
+                        widget:
+                          Row:
+                            children:
+                              - Icon:
+                                  name: home
+                                  styles:
+                                    marginRight: 8
+                              - Text:
+                                  text: Home Page
+                                  styles:
+                                    fontWeight: 500
+
+              - Card:
+                  styles:
+                    marginBottom: 20
+                  children:
+                    - Text:
+                        text: Link with Action
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Link:
+                        url: /actions
+                        onTap:
+                          executeCode: |
+                            console.log('Link clicked!');
+                            ensemble.storage.set('lastClicked', 'Link to Actions');
+                        widget:
+                          Column:
+                            children:
+                              - Text:
+                                  text: Actions Page (with console log)
+
+              - Card:
+                  styles:
+                    marginBottom: 20
+                  children:
+                    - Text:
+                        text: Dynamic Link with Inputs
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Button:
+                        label: Set User ID
+                        onTap:
+                          executeCode: ensemble.storage.set('userId', 123)
+                    - Text:
+                        text: Refresh to see the Current User ID:${userId || 'not set'}
+                    - Link:
+                        url: /widgets
+                        inputs: ${{"userId":ensemble.storage.get('userId')}}
+                        widget:
+                          Text:
+                            text: Go to Widgets (with inputs)
+
+              - Card:
+                  children:
+                    - Text:
+                        text: Styled Links
+                        styles:
+                          fontSize: 18
+                          fontWeight: 600
+                          marginBottom: 10
+                    - Row:
+                        children:
+                          - Link:
+                              url: /test1
+                              styles:
+                                color: green
+                                textDecoration: none
+                                fontSize: 16
+                              widget:
+                                Text:
+                                  text: Green Link
+                          - Text:
+                              text: " | "
+                          - Link:
+                              url: /test2
+                              styles:
+                                color: orange
+                                textDecoration: underline
+                                fontWeight: bold
+                              widget:
+                                Text:
+                                  text: Orange Bold Link
+                          - Text:
+                              text: " | "
+                          - Link:
+                              url: /test3
+                              styles:
+                                color: purple
+                                hoverColor: magenta
+                                textDecoration: none
+                                hoverTextDecoration: underline
+                              widget:
+                                Text:
+                                  text: Purple Link (hover effects)
+
         - Row:
             children:
               - Search:

packages/runtime/src/shared/coreSchema.ts

@@ -24,6 +24,7 @@ import type {
   CardProps,
   FittedColumnProps,
   FittedRowProps,
+  LinkProps,
 } from "../widgets";
 import type { Menu, View } from "./screenSchema";
 import type { FlexboxProps, IconProps } from "./types";
@@ -194,6 +195,7 @@ export type Widget =
   // | { ConnectWithGoogle?: ConnectWithProvider }
   // | { ConnectWithMicrosoft?: ConnectWithProvider }
   | { Button?: ButtonProps }
+  | { Link?: LinkProps }
   // | { IconButton?: IconButton }
   // | { Address?: Address }
   | { Card?: ReplaceChildrenTemplate<CardProps> }

packages/runtime/src/shared/types.ts

@@ -12,7 +12,7 @@ export type EnsembleWidgetStyles = Omit<React.CSSProperties, "direction"> & {
    */
   names?: Expression<string>;
   className?: Expression<string>;
-  visible?: boolean;
+  visible?: Expression<boolean>;
 };
 
 export interface EnsembleWidgetProps<
@@ -38,12 +38,12 @@ export type BaseTextProps = {
 export interface FlexboxStyles {
   mainAxis?: string;
   crossAxis?: string;
-  gap?: number;
-  margin?: number | string;
-  padding?: number | string;
-  maxWidth?: string;
-  minWidth?: string;
-  visible?: boolean;
+  gap?: Expression<number>;
+  margin?: Expression<number | string>;
+  padding?: Expression<number | string>;
+  maxWidth?: Expression<string>;
+  minWidth?: Expression<string>;
+  visible?: Expression<boolean>;
 }
 
 export type FlexboxProps = {

packages/runtime/src/widgets/Button.tsx

@@ -27,11 +27,13 @@ export type ButtonProps = {
     textColor?: string;
     gap?: string | number;
   };
-  loading?: boolean;
+  loading?: Expression<boolean>;
 } & EnsembleWidgetProps;
 
 export const Button: React.FC<ButtonProps> = ({ id, onTap, ...rest }) => {
-  const [loading, setLoading] = useState<boolean>(rest.loading || false);
+  const [loading, setLoading] = useState<Expression<boolean>>(
+    rest.loading || false,
+  );
   const action = useEnsembleAction(onTap);
   const onClickCallback = useCallback(
     (e?: MouseEvent) => {
@@ -61,7 +63,7 @@ export const Button: React.FC<ButtonProps> = ({ id, onTap, ...rest }) => {
       <AntButton
         disabled={values?.disabled ?? false}
         htmlType={values?.submitForm === true ? "submit" : "button"}
-        loading={loading}
+        loading={Boolean(loading)}
         onClick={onClickCallback}
         ref={rootRef}
         style={{

packages/runtime/src/widgets/DataGrid/DataGrid.tsx

@@ -48,7 +48,7 @@ const widgetName = "DataGrid";
 
 interface DataColumn {
   label?: Expression<{ [key: string]: unknown }>;
-  type: string;
+  type?: string;
   tooltip?: string;
   sort?: {
     compareFn: string;
@@ -66,13 +66,13 @@ interface DataColumn {
 
 export interface DataGridStyles extends Partial<EnsembleWidgetStyles> {
   headerStyle?: {
-    backgroundColor: Expression<string>;
-    fontSize: Expression<string>;
-    fontFamily: Expression<string>;
-    fontWeight: Expression<string>;
-    textColor: Expression<string>;
-    hasDivider: boolean;
-    borderBottom: string;
+    backgroundColor?: Expression<string>;
+    fontSize?: Expression<string>;
+    fontFamily?: Expression<string>;
+    fontWeight?: Expression<string>;
+    textColor?: Expression<string>;
+    hasDivider?: boolean;
+    borderBottom?: string;
   };
   styles?: EnsembleWidgetStyles;
 }

packages/runtime/src/widgets/Form/Form.tsx

@@ -24,8 +24,8 @@ export type FormProps = {
   onSubmit?: EnsembleAction;
   onChange?: EnsembleAction;
   styles?: {
-    labelPosition: "top" | "start" | "none";
-    labelOverflow: "wrap" | "visible" | "clip" | "ellipsis";
+    labelPosition?: "top" | "start" | "none";
+    labelOverflow?: "wrap" | "visible" | "clip" | "ellipsis";
   } & EnsembleWidgetStyles;
 } & EnsembleWidgetProps;
 

packages/runtime/src/widgets/Form/TextInput.tsx

@@ -40,7 +40,7 @@ export type TextInputProps = {
     regexError?: string;
     maskError?: string;
   };
-  onKeyDown: EnsembleAction;
+  onKeyDown?: EnsembleAction;
 } & EnsembleWidgetProps<TextStyles> &
   FormInputProps<string>;