feature(website): make device preview panel resizable (#560)

* feature(website): make preview panel resizable * fix(website): hide panel resize when collapsed and restyle handle * chore(website): enable tablet Appetize previews * fix(website): filter Appetize device selector by platform * fix(website): keep panel resize hover style when dragging * refactor(website): clean up unused styling
expo · Feb 23, 2024 · 38e66a7 · 38e66a7
1 parent 8fd3d94
commit 38e66a7
Show file tree

Hide file tree

Showing 7 changed files with 276 additions and 193 deletions.
diff --git a/website/package.json b/website/package.json
@@ -73,6 +73,7 @@
     "react-dom": "^16.8.1",
     "react-helmet-async": "^0.2.0",
     "react-redux": "^6.0.0",
+    "react-resizable-panels": "^2.0.9",
     "react-resize-detector": "^6.7.4",
     "react-router-dom": "^4.4.0-beta.6",
     "react-simple-code-editor": "^0.11.0",

diff --git a/website/src/client/components/DevicePreview/AppetizeFrame.tsx b/website/src/client/components/DevicePreview/AppetizeFrame.tsx
@@ -226,10 +226,13 @@ function resolveAppetizePopupUrl(config: AppetizeSdkConfig) {
 const styles = StyleSheet.create({
   container: {
     position: 'relative',
-    height: 672,
+    height: '100%',
+    width: '100%',
     overflow: 'hidden',
     margin: 'auto',
     zIndex: 2,
+    padding: 32,
+    boxSizing: 'border-box',
   },
   containerEmbedded: {
     position: 'relative',
@@ -241,5 +244,6 @@ const styles = StyleSheet.create({
   frame: {
     border: 0,
     height: '100%',
+    width: '100%',
   },
 });
diff --git a/website/src/client/components/DevicePreview/DevicePreview.tsx b/website/src/client/components/DevicePreview/DevicePreview.tsx
@@ -151,7 +151,7 @@ class DevicePreview extends React.PureComponent<Props, State> {
     return (
       <div
         className={classnames(css(isEmbedded ? styles.embedded : styles.container), className)}
-        style={{ width }}
+        style={isEmbedded ? { width } : undefined}
       >
         {isEmbedded ? null : (
           <div className={css(styles.header)}>
@@ -218,9 +218,7 @@ export default withThemeName(DevicePreview);
 const styles = StyleSheet.create({
   container: {
     position: 'relative',
-    maxWidth: '50%',
-    overflowX: 'hidden',
-    overflowY: 'auto',
+    width: '100%',
     display: 'none',
     flexDirection: 'column',
 

diff --git a/website/src/client/components/DevicePreview/MyDeviceFrame.tsx b/website/src/client/components/DevicePreview/MyDeviceFrame.tsx
@@ -60,9 +60,10 @@ class MyDeviceFrame extends React.PureComponent<Props, State> {
     const { experienceURL, isEmbedded, width } = this.props;
     const { connectedDevices, copiedToClipboard } = this.state;
     const isConnected = connectedDevices.length >= 1;
+    const fixedWidthStyle = isEmbedded ? { width } : undefined;
 
     return (
-      <div className={css(styles.container)} style={{ width }}>
+      <div className={css(styles.container)} style={fixedWidthStyle}>
         <Banner visible={copiedToClipboard}>Copied to clipboard!</Banner>
         <div className={css(styles.frame)}>
           <h3 className={css(styles.title)}>
@@ -265,6 +266,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     padding: 10,
     marginLeft: 10,
+    margin: '0 auto 16px auto',
   },
   experienceLink: {
     cursor: 'pointer',

diff --git a/website/src/client/components/EditorView.tsx b/website/src/client/components/EditorView.tsx
diff --git a/website/src/client/utils/Appetize.ts b/website/src/client/utils/Appetize.ts
@@ -37,7 +37,10 @@ let cachedAppetizeDevices:
 
 export function useAppetizeDevices(platform: 'android' | 'ios') {
   const [devices, setDevices] = useState(cachedAppetizeDevices);
-  const deviceList = useMemo(() => createAppetizeDeviceList(devices), [platform, devices]);
+  const deviceList = useMemo(
+    () => createAppetizeDeviceList(platform, devices),
+    [platform, devices]
+  );
 
   useEffect(() => {
     if (!cachedAppetizeDevices) {
@@ -48,14 +51,17 @@ export function useAppetizeDevices(platform: 'android' | 'ios') {
   return deviceList;
 }
 
-function createAppetizeDeviceList(devices?: typeof cachedAppetizeDevices) {
+function createAppetizeDeviceList(
+  platform: 'android' | 'ios',
+  devices?: typeof cachedAppetizeDevices
+) {
   if (!devices) {
     return [];
   }
 
   return devices
-    .map((device) => ({ deviceName: device.name, deviceId: device.id }))
-    .filter(({ deviceId }) => !deviceId.includes('ipad') && !deviceId.includes('galaxytab'));
+    .filter((device) => device.platform === platform)
+    .map((device) => ({ deviceName: device.name, deviceId: device.id }));
 }
 
 async function fetchAppetizeDevices(): Promise<typeof cachedAppetizeDevices> {

diff --git a/yarn.lock b/yarn.lock
@@ -1355,7 +1355,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-typescript@^7.13.0", "@babel/plugin-transform-typescript@^7.23.3", "@babel/plugin-transform-typescript@^7.23.6", "@babel/plugin-transform-typescript@^7.5.0":
+"@babel/plugin-transform-typescript@^7.13.0", "@babel/plugin-transform-typescript@^7.23.3", "@babel/plugin-transform-typescript@^7.5.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
   integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
@@ -1598,7 +1598,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.13", "@babel/types@^7.12.17", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.13.0", "@babel/types@^7.17.0", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.13", "@babel/types@^7.12.17", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.13.0", "@babel/types@^7.17.0", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
   integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
@@ -4730,7 +4730,7 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-babel-core@^7.0.0-bridge.0:
+babel-core@7.0.0-bridge.0, babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
@@ -13859,6 +13859,11 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-resizable-panels@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-2.0.9.tgz#35acd8116475ebebb916c1559e75de3594004546"
+  integrity sha512-ZylBvs7oG7Y/INWw3oYGolqgpFvoPW8MPeg9l1fURDeKpxrmUuCHBUmPj47BdZ11MODImu3kZYXG85rbySab7w==
+
 react-resize-detector@^6.7.4:
   version "6.7.4"
   resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.4.tgz#594cc026115af05484e8011157b5dc2137492680"