@microsoft/power-apps-native-host 0.3.3 → 0.5.1

package/lib/module/target/DefaultPowerAppsExperience.js

@@ -0,0 +1,559 @@
+"use strict";
+
+import React from 'react';
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { darkTheme, lightTheme } from "../theme/tokens.js";
+import { PowerAppsRuntimeGate, usePowerAppsExperience } from "./PowerAppsExperience.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Action({
+  label,
+  icon,
+  onPress,
+  theme,
+  secondary = false
+}) {
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.action, {
+      backgroundColor: secondary ? theme.surface0 : theme.accentBase
+    }, secondary && {
+      borderColor: theme.surface4
+    }, pressed && styles.pressed],
+    children: [/*#__PURE__*/_jsx(Feather, {
+      name: icon,
+      size: 18,
+      color: secondary ? theme.text1 : theme.accentOnAccent
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.actionLabel, {
+        color: secondary ? theme.text0 : theme.accentOnAccent
+      }],
+      children: label
+    })]
+  });
+}
+function Frame({
+  appDisplayName,
+  eyebrow,
+  title,
+  children
+}) {
+  const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.background, {
+      backgroundColor: theme.surface1
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.topBand, {
+        backgroundColor: theme.accentDeep
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.sideBand, {
+        backgroundColor: theme.accentSoft
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.frame,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.brandRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.brandMark, {
+            backgroundColor: theme.accentBase
+          }],
+          children: /*#__PURE__*/_jsx(Feather, {
+            name: "grid",
+            size: 22,
+            color: theme.accentOnAccent
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 2,
+          style: [styles.brandName, {
+            color: theme.text0
+          }],
+          children: appDisplayName
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.content,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.eyebrow, {
+            color: theme.accentDeep
+          }],
+          children: eyebrow
+        }), /*#__PURE__*/_jsx(Text, {
+          accessibilityRole: "header",
+          style: [styles.title, {
+            color: theme.text0
+          }],
+          children: title
+        }), children]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.footer, {
+          color: theme.text2
+        }],
+        children: "Powered by Microsoft Power Apps"
+      })]
+    })]
+  });
+}
+function Status({
+  appDisplayName,
+  title,
+  message
+}) {
+  const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme;
+  return /*#__PURE__*/_jsx(Frame, {
+    appDisplayName: appDisplayName,
+    eyebrow: "Getting things ready",
+    title: title,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.statusRow,
+      accessibilityRole: "progressbar",
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        color: theme.accentBase,
+        size: "small"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, {
+          color: theme.text1
+        }],
+        children: message
+      })]
+    })
+  });
+}
+function Message({
+  children,
+  theme
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.body, {
+      color: theme.text1
+    }],
+    children: children
+  });
+}
+export function DefaultPowerAppsExperience({
+  appDisplayName,
+  children
+}) {
+  const experience = usePowerAppsExperience();
+  const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme;
+  switch (experience.status) {
+    case 'preparing':
+      return /*#__PURE__*/_jsx(Status, {
+        appDisplayName: appDisplayName,
+        title: "Welcome",
+        message: "Preparing secure sign-in..."
+      });
+    case 'discovering':
+      return /*#__PURE__*/_jsx(Status, {
+        appDisplayName: appDisplayName,
+        title: "Finding your workspace",
+        message: "Checking the environments available to your account..."
+      });
+    case 'connecting':
+      return /*#__PURE__*/_jsx(Status, {
+        appDisplayName: appDisplayName,
+        title: `Opening ${experience.environment.label}`,
+        message: "Establishing a secure connection..."
+      });
+    case 'resolvingApp':
+      return /*#__PURE__*/_jsx(Status, {
+        appDisplayName: appDisplayName,
+        title: "Almost there",
+        message: "Loading the app configuration..."
+      });
+    case 'signIn':
+      return /*#__PURE__*/_jsxs(Frame, {
+        appDisplayName: appDisplayName,
+        eyebrow: "Secure access",
+        title: "Sign in to continue",
+        children: [/*#__PURE__*/_jsx(Message, {
+          theme: theme,
+          children: "Use your work or school account to find the environments available to you."
+        }), experience.error ? /*#__PURE__*/_jsxs(View, {
+          style: [styles.notice, {
+            backgroundColor: theme.surface2,
+            borderColor: theme.surface4
+          }],
+          children: [/*#__PURE__*/_jsx(Feather, {
+            name: "alert-circle",
+            size: 18,
+            color: "#A4262C"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.noticeText, {
+              color: theme.text0
+            }],
+            children: experience.error
+          })]
+        }) : null, /*#__PURE__*/_jsxs(View, {
+          style: styles.actions,
+          children: [/*#__PURE__*/_jsx(Action, {
+            label: "Sign in with Microsoft",
+            icon: "log-in",
+            onPress: () => {
+              void experience.signIn();
+            },
+            theme: theme
+          }), experience.goBack ? /*#__PURE__*/_jsx(Action, {
+            label: "Choose another environment",
+            icon: "arrow-left",
+            onPress: experience.goBack,
+            theme: theme,
+            secondary: true
+          }) : null]
+        })]
+      });
+    case 'selectEnvironment':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [styles.background, {
+          backgroundColor: theme.surface1
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.topBand, {
+            backgroundColor: theme.accentDeep
+          }]
+        }), /*#__PURE__*/_jsxs(ScrollView, {
+          contentContainerStyle: styles.scrollFrame,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.brandRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.brandMark, {
+                backgroundColor: theme.accentBase
+              }],
+              children: /*#__PURE__*/_jsx(Feather, {
+                name: "grid",
+                size: 22,
+                color: theme.accentOnAccent
+              })
+            }), /*#__PURE__*/_jsx(Text, {
+              numberOfLines: 2,
+              style: [styles.brandName, {
+                color: theme.text0
+              }],
+              children: appDisplayName
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.content,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.eyebrow, {
+                color: theme.accentDeep
+              }],
+              children: "Your workspace"
+            }), /*#__PURE__*/_jsx(Text, {
+              accessibilityRole: "header",
+              style: [styles.title, {
+                color: theme.text0
+              }],
+              children: "Choose an environment"
+            }), /*#__PURE__*/_jsx(Message, {
+              theme: theme,
+              children: "Select where you want to open this app."
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.environmentList,
+              children: experience.environments.map(environment => /*#__PURE__*/_jsxs(Pressable, {
+                accessibilityRole: "button",
+                accessibilityLabel: `Open ${environment.label}`,
+                onPress: () => experience.selectEnvironment(environment.id),
+                style: ({
+                  pressed
+                }) => [styles.environment, {
+                  backgroundColor: theme.surface0,
+                  borderColor: theme.surface3
+                }, pressed && {
+                  backgroundColor: theme.surface2
+                }],
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.environmentIcon, {
+                    backgroundColor: theme.accentSoft
+                  }],
+                  children: /*#__PURE__*/_jsx(Feather, {
+                    name: "briefcase",
+                    size: 19,
+                    color: theme.accentDeep
+                  })
+                }), /*#__PURE__*/_jsx(Text, {
+                  numberOfLines: 2,
+                  style: [styles.environmentLabel, {
+                    color: theme.text0
+                  }],
+                  children: environment.label
+                }), /*#__PURE__*/_jsx(Feather, {
+                  name: "chevron-right",
+                  size: 20,
+                  color: theme.text2
+                })]
+              }, environment.id))
+            }), /*#__PURE__*/_jsx(Action, {
+              label: "Sign out",
+              icon: "log-out",
+              onPress: () => {
+                void experience.signOut();
+              },
+              theme: theme,
+              secondary: true
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.footer, {
+              color: theme.text2
+            }],
+            children: "Powered by Microsoft Power Apps"
+          })]
+        })]
+      });
+    case 'empty':
+      return /*#__PURE__*/_jsxs(Frame, {
+        appDisplayName: appDisplayName,
+        eyebrow: "No environments",
+        title: "Nothing available yet",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.stateIcon, {
+            backgroundColor: theme.accentSoft
+          }],
+          children: /*#__PURE__*/_jsx(Feather, {
+            name: "inbox",
+            size: 26,
+            color: theme.accentDeep
+          })
+        }), /*#__PURE__*/_jsx(Message, {
+          theme: theme,
+          children: "We could not find a Dataverse environment that contains this app."
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actions,
+          children: [/*#__PURE__*/_jsx(Action, {
+            label: "Try again",
+            icon: "refresh-cw",
+            onPress: experience.retry,
+            theme: theme
+          }), /*#__PURE__*/_jsx(Action, {
+            label: "Use another account",
+            icon: "user",
+            onPress: () => {
+              void experience.signOut();
+            },
+            theme: theme,
+            secondary: true
+          })]
+        })]
+      });
+    case 'error':
+      return /*#__PURE__*/_jsxs(Frame, {
+        appDisplayName: appDisplayName,
+        eyebrow: "We hit a problem",
+        title: "Unable to continue",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.stateIcon, {
+            backgroundColor: theme.surface2
+          }],
+          children: /*#__PURE__*/_jsx(Feather, {
+            name: "alert-triangle",
+            size: 26,
+            color: "#A4262C"
+          })
+        }), /*#__PURE__*/_jsx(Message, {
+          theme: theme,
+          children: experience.error.message
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actions,
+          children: [experience.retry ? /*#__PURE__*/_jsx(Action, {
+            label: "Try again",
+            icon: "refresh-cw",
+            onPress: experience.retry,
+            theme: theme
+          }) : null, experience.goBack ? /*#__PURE__*/_jsx(Action, {
+            label: "Choose another environment",
+            icon: "arrow-left",
+            onPress: experience.goBack,
+            theme: theme,
+            secondary: true
+          }) : null, experience.signOut ? /*#__PURE__*/_jsx(Action, {
+            label: "Use another account",
+            icon: "user",
+            onPress: () => {
+              void experience.signOut?.();
+            },
+            theme: theme,
+            secondary: true
+          }) : null]
+        })]
+      });
+    case 'ready':
+      return /*#__PURE__*/_jsx(PowerAppsRuntimeGate, {
+        children: children
+      });
+  }
+}
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  topBand: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: 8
+  },
+  sideBand: {
+    position: 'absolute',
+    top: 80,
+    right: -24,
+    width: 72,
+    height: 220,
+    transform: [{
+      rotate: '8deg'
+    }]
+  },
+  frame: {
+    flex: 1,
+    width: '100%',
+    maxWidth: 560,
+    alignSelf: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 54,
+    paddingRight: 28,
+    paddingBottom: 28,
+    paddingLeft: 28
+  },
+  scrollFrame: {
+    flexGrow: 1,
+    width: '100%',
+    maxWidth: 560,
+    alignSelf: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 54,
+    paddingRight: 28,
+    paddingBottom: 28,
+    paddingLeft: 28
+  },
+  brandRow: {
+    minHeight: 48,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12
+  },
+  brandMark: {
+    width: 44,
+    height: 44,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  brandName: {
+    flex: 1,
+    fontSize: 17,
+    lineHeight: 22,
+    fontWeight: '700'
+  },
+  content: {
+    width: '100%',
+    gap: 18,
+    paddingVertical: 40
+  },
+  eyebrow: {
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: '700',
+    textTransform: 'uppercase'
+  },
+  title: {
+    maxWidth: 470,
+    fontSize: 30,
+    lineHeight: 38,
+    fontWeight: '700'
+  },
+  body: {
+    maxWidth: 460,
+    fontSize: 16,
+    lineHeight: 24
+  },
+  statusRow: {
+    minHeight: 48,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14
+  },
+  actions: {
+    width: '100%',
+    maxWidth: 380,
+    gap: 10,
+    paddingTop: 4
+  },
+  action: {
+    minHeight: 52,
+    width: '100%',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    borderRadius: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    paddingHorizontal: 18
+  },
+  actionLabel: {
+    flexShrink: 1,
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  pressed: {
+    opacity: 0.78
+  },
+  notice: {
+    maxWidth: 460,
+    borderWidth: 1,
+    borderRadius: 6,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+    padding: 14
+  },
+  noticeText: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 20
+  },
+  environmentList: {
+    width: '100%',
+    gap: 10,
+    paddingTop: 4
+  },
+  environment: {
+    minHeight: 64,
+    borderWidth: 1,
+    borderRadius: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  environmentIcon: {
+    width: 38,
+    height: 38,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  environmentLabel: {
+    flex: 1,
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '600'
+  },
+  stateIcon: {
+    width: 52,
+    height: 52,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  footer: {
+    fontSize: 12,
+    lineHeight: 18
+  }
+});

package/lib/module/target/PowerAppsExperience.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import React, { createContext, useContext } from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const PowerAppsExperienceContext = /*#__PURE__*/createContext(undefined);
+export function usePowerAppsExperience() {
+  const experience = useContext(PowerAppsExperienceContext);
+  if (!experience) {
+    throw new Error('usePowerAppsExperience must be used by a multi-tenant experience component.');
+  }
+  return experience;
+}
+export function PowerAppsRuntimeGate({
+  children
+}) {
+  return usePowerAppsExperience().status === 'ready' ? /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  }) : null;
+}
+export function PowerAppsExperienceBoundary({
+  experience,
+  appDisplayName,
+  component: Component,
+  children,
+  fallback
+}) {
+  return /*#__PURE__*/_jsx(PowerAppsExperienceContext.Provider, {
+    value: experience,
+    children: Component ? /*#__PURE__*/_jsx(Component, {
+      appDisplayName: appDisplayName,
+      children: children
+    }) : fallback
+  });
+}