Skip to content

Commit 2a8ca11

Browse files
justEhmadSaeedjustEhmadSaeed
authored
[1104] Add Link widget and corresponding tests (#1105)
1 parent 559a462 commit 2a8ca11

File tree

11 files changed

+860
-21
lines changed

11 files changed

+860
-21
lines changed

‎.changeset/old-boxes-drive.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@ensembleui/react-kitchen-sink": patch
3+
"@ensembleui/react-runtime": patch
4+
---
5+
6+
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‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
View:
2+
inputs:
3+
- userId
24
styles:
35
scrollableView: true
46
onLoad:
@@ -1295,6 +1297,182 @@ View:
12951297
onRefresh:
12961298
executeCode: |
12971299
console.log('refreshed')
1300+
- Column:
1301+
styles:
1302+
padding: 20
1303+
children:
1304+
- Text:
1305+
text: Link Widget Examples
1306+
styles:
1307+
fontSize: 24
1308+
fontWeight: bold
1309+
marginBottom: 20
1310+
1311+
- Card:
1312+
styles:
1313+
marginBottom: 20
1314+
children:
1315+
- Text:
1316+
text: Basic Internal Links
1317+
styles:
1318+
fontSize: 18
1319+
fontWeight: 600
1320+
marginBottom: 10
1321+
- Link:
1322+
url: /widgets
1323+
widget:
1324+
Text:
1325+
text: Go to Widgets Page
1326+
- Text:
1327+
text: " | "
1328+
- Link:
1329+
url: /forms
1330+
styles:
1331+
color: blue
1332+
hoverColor: red
1333+
widget:
1334+
Text:
1335+
text: Forms Page (with hover effect)
1336+
1337+
- Card:
1338+
styles:
1339+
marginBottom: 20
1340+
children:
1341+
- Text:
1342+
text: External Links
1343+
styles:
1344+
fontSize: 18
1345+
fontWeight: 600
1346+
marginBottom: 10
1347+
- Link:
1348+
url: https://google.com
1349+
openNewTab: true
1350+
widget:
1351+
Text:
1352+
text: Google (opens in new tab)
1353+
- Text:
1354+
text: " | "
1355+
- Link:
1356+
url: mailto:test@example.com
1357+
widget:
1358+
Text:
1359+
text: Send Email
1360+
1361+
- Card:
1362+
styles:
1363+
marginBottom: 20
1364+
children:
1365+
- Text:
1366+
text: Links with Custom Content
1367+
styles:
1368+
fontSize: 18
1369+
fontWeight: 600
1370+
marginBottom: 10
1371+
- Link:
1372+
url: /home
1373+
styles:
1374+
textDecoration: none
1375+
color: darkblue
1376+
widget:
1377+
Row:
1378+
children:
1379+
- Icon:
1380+
name: home
1381+
styles:
1382+
marginRight: 8
1383+
- Text:
1384+
text: Home Page
1385+
styles:
1386+
fontWeight: 500
1387+
1388+
- Card:
1389+
styles:
1390+
marginBottom: 20
1391+
children:
1392+
- Text:
1393+
text: Link with Action
1394+
styles:
1395+
fontSize: 18
1396+
fontWeight: 600
1397+
marginBottom: 10
1398+
- Link:
1399+
url: /actions
1400+
onTap:
1401+
executeCode: |
1402+
console.log('Link clicked!');
1403+
ensemble.storage.set('lastClicked', 'Link to Actions');
1404+
widget:
1405+
Column:
1406+
children:
1407+
- Text:
1408+
text: Actions Page (with console log)
1409+
1410+
- Card:
1411+
styles:
1412+
marginBottom: 20
1413+
children:
1414+
- Text:
1415+
text: Dynamic Link with Inputs
1416+
styles:
1417+
fontSize: 18
1418+
fontWeight: 600
1419+
marginBottom: 10
1420+
- Button:
1421+
label: Set User ID
1422+
onTap:
1423+
executeCode: ensemble.storage.set('userId', 123)
1424+
- Text:
1425+
text: Refresh to see the Current User ID:${userId || 'not set'}
1426+
- Link:
1427+
url: /widgets
1428+
inputs: ${{"userId":ensemble.storage.get('userId')}}
1429+
widget:
1430+
Text:
1431+
text: Go to Widgets (with inputs)
1432+
1433+
- Card:
1434+
children:
1435+
- Text:
1436+
text: Styled Links
1437+
styles:
1438+
fontSize: 18
1439+
fontWeight: 600
1440+
marginBottom: 10
1441+
- Row:
1442+
children:
1443+
- Link:
1444+
url: /test1
1445+
styles:
1446+
color: green
1447+
textDecoration: none
1448+
fontSize: 16
1449+
widget:
1450+
Text:
1451+
text: Green Link
1452+
- Text:
1453+
text: " | "
1454+
- Link:
1455+
url: /test2
1456+
styles:
1457+
color: orange
1458+
textDecoration: underline
1459+
fontWeight: bold
1460+
widget:
1461+
Text:
1462+
text: Orange Bold Link
1463+
- Text:
1464+
text: " | "
1465+
- Link:
1466+
url: /test3
1467+
styles:
1468+
color: purple
1469+
hoverColor: magenta
1470+
textDecoration: none
1471+
hoverTextDecoration: underline
1472+
widget:
1473+
Text:
1474+
text: Purple Link (hover effects)
1475+
12981476
- Row:
12991477
children:
13001478
- Search:

‎packages/runtime/src/shared/coreSchema.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {
2424
CardProps,
2525
FittedColumnProps,
2626
FittedRowProps,
27+
LinkProps,
2728
} from "../widgets";
2829
import type { Menu, View } from "./screenSchema";
2930
import type { FlexboxProps, IconProps } from "./types";
@@ -194,6 +195,7 @@ export type Widget =
194195
// | { ConnectWithGoogle?: ConnectWithProvider }
195196
// | { ConnectWithMicrosoft?: ConnectWithProvider }
196197
| { Button?: ButtonProps }
198+
| { Link?: LinkProps }
197199
// | { IconButton?: IconButton }
198200
// | { Address?: Address }
199201
| { Card?: ReplaceChildrenTemplate<CardProps> }

‎packages/runtime/src/shared/types.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type EnsembleWidgetStyles = Omit<React.CSSProperties, "direction"> & {
1212
*/
1313
names?: Expression<string>;
1414
className?: Expression<string>;
15-
visible?: boolean;
15+
visible?: Expression<boolean>;
1616
};
1717

1818
export interface EnsembleWidgetProps<
@@ -38,12 +38,12 @@ export type BaseTextProps = {
3838
export interface FlexboxStyles {
3939
mainAxis?: string;
4040
crossAxis?: string;
41-
gap?: number;
42-
margin?: number | string;
43-
padding?: number | string;
44-
maxWidth?: string;
45-
minWidth?: string;
46-
visible?: boolean;
41+
gap?: Expression<number>;
42+
margin?: Expression<number | string>;
43+
padding?: Expression<number | string>;
44+
maxWidth?: Expression<string>;
45+
minWidth?: Expression<string>;
46+
visible?: Expression<boolean>;
4747
}
4848

4949
export type FlexboxProps = {

‎packages/runtime/src/widgets/Button.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ export type ButtonProps = {
2727
textColor?: string;
2828
gap?: string | number;
2929
};
30-
loading?: boolean;
30+
loading?: Expression<boolean>;
3131
} & EnsembleWidgetProps;
3232

3333
export const Button: React.FC<ButtonProps> = ({ id, onTap, ...rest }) => {
34-
const [loading, setLoading] = useState<boolean>(rest.loading || false);
34+
const [loading, setLoading] = useState<Expression<boolean>>(
35+
rest.loading || false,
36+
);
3537
const action = useEnsembleAction(onTap);
3638
const onClickCallback = useCallback(
3739
(e?: MouseEvent) => {
@@ -61,7 +63,7 @@ export const Button: React.FC<ButtonProps> = ({ id, onTap, ...rest }) => {
6163
<AntButton
6264
disabled={values?.disabled ?? false}
6365
htmlType={values?.submitForm === true ? "submit" : "button"}
64-
loading={loading}
66+
loading={Boolean(loading)}
6567
onClick={onClickCallback}
6668
ref={rootRef}
6769
style={{

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const widgetName = "DataGrid";
4848

4949
interface DataColumn {
5050
label?: Expression<{ [key: string]: unknown }>;
51-
type: string;
51+
type?: string;
5252
tooltip?: string;
5353
sort?: {
5454
compareFn: string;
@@ -66,13 +66,13 @@ interface DataColumn {
6666

6767
export interface DataGridStyles extends Partial<EnsembleWidgetStyles> {
6868
headerStyle?: {
69-
backgroundColor: Expression<string>;
70-
fontSize: Expression<string>;
71-
fontFamily: Expression<string>;
72-
fontWeight: Expression<string>;
73-
textColor: Expression<string>;
74-
hasDivider: boolean;
75-
borderBottom: string;
69+
backgroundColor?: Expression<string>;
70+
fontSize?: Expression<string>;
71+
fontFamily?: Expression<string>;
72+
fontWeight?: Expression<string>;
73+
textColor?: Expression<string>;
74+
hasDivider?: boolean;
75+
borderBottom?: string;
7676
};
7777
styles?: EnsembleWidgetStyles;
7878
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export type FormProps = {
2424
onSubmit?: EnsembleAction;
2525
onChange?: EnsembleAction;
2626
styles?: {
27-
labelPosition: "top" | "start" | "none";
28-
labelOverflow: "wrap" | "visible" | "clip" | "ellipsis";
27+
labelPosition?: "top" | "start" | "none";
28+
labelOverflow?: "wrap" | "visible" | "clip" | "ellipsis";
2929
} & EnsembleWidgetStyles;
3030
} & EnsembleWidgetProps;
3131

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export type TextInputProps = {
4040
regexError?: string;
4141
maskError?: string;
4242
};
43-
onKeyDown: EnsembleAction;
43+
onKeyDown?: EnsembleAction;
4444
} & EnsembleWidgetProps<TextStyles> &
4545
FormInputProps<string>;
4646

0 commit comments

Comments
 (0)