Web extension

packages/extension/.gitignore

@@ -0,0 +1,2 @@
+.expo
+web-build

packages/extension/Readme.md

@@ -0,0 +1,31 @@
+# @withorbit/extension
+
+A browser extension for Orbit to create prompts on any website.
+
+# Usage
+
+### Navigate to the extension package
+
+```sh
+cd $PATH_TO_ORBIT/packages/extension
+```
+
+### Install dependencies
+
+```sh
+yarn
+```
+
+### Build
+
+```sh
+yarn build
+```
+
+### Load the extension in Chrome
+
+1. Go to Chrome Settings
+2. Click on Extensions
+3. Enable _Developer mode_
+4. Load Unpacked
+5. Open the `web-build` folder

packages/extension/app.json

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "name": "Orbit Extension",
+    "slug": "orbit-extension",
+    "privacy": "unlisted",
+    "version": "0.0.1",
+    "assetBundlePatterns": ["**/*"],
+    "platforms": ["web"],
+    "web": {
+      "build": {
+        "babel": {
+          "include": "@withorbit/ui"
+        }
+      }
+    }
+  }
+}

packages/extension/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

packages/extension/index.js

@@ -0,0 +1,5 @@
+import { registerRootComponent } from "expo";
+
+import App from "./src/App";
+
+registerRootComponent(App);

packages/extension/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@withorbit/extension",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "expo start:web --web",
+    "build": "expo build:web --no-pwa"
+  },
+  "dependencies": {
+    "@withorbit/ui": "0.0.1",
+    "expo": "^40.0.0",
+    "react": "17.0.1",
+    "react-native": "0.63.4",
+    "react-native-web": "~0.15.0"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0",
+    "@types/chrome": "^0.0.142",
+    "@types/react": "~17.0.3",
+    "@types/react-native": "~0.63.2",
+    "babel-preset-expo": "^8.3.0"
+  }
+}

packages/extension/src/App.tsx

@@ -0,0 +1,17 @@
+import { styles } from "@withorbit/ui";
+import React from "react";
+import CreateForm from "./CreateForm";
+
+const colorPalette = styles.colors.palettes.orange;
+
+export default function App() {
+  const onSubmit = () => console.log("Submit");
+
+  return (
+    <CreateForm
+      onSubmit={onSubmit}
+      isPendingServerResponse={false}
+      colorPalette={colorPalette}
+    />
+  );
+}

packages/extension/src/CreateForm.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  IconName,
+  Spacer,
+  styles as uiStyles,
+  textFieldHorizontalPadding,
+  TextInput,
+} from "@withorbit/ui";
+import { ColorPalette } from "@withorbit/ui/src/styles/colors";
+import React from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+
+const { colors, layout, type } = uiStyles;
+const colorPalette = colors.palettes.orange;
+
+interface Props {
+  onSubmit: (question: string, answer: string) => void;
+  isPendingServerResponse: boolean;
+  colorPalette: ColorPalette;
+}
+
+export default function CreateForm(props: Props) {
+  const [question, setQuestion] = React.useState("");
+  const [answer, setAnswer] = React.useState("");
+
+  const { onSubmit, isPendingServerResponse } = props;
+
+  const onPressSubmit = React.useCallback(() => {
+    onSubmit(question, answer);
+  }, [onSubmit, question, answer]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Question</Text>
+      <Spacer units={1} />
+      <TextInput
+        // @ts-ignore
+        style={styles.textInput}
+        colorPalette={colorPalette}
+        onChangeText={setQuestion}
+        value={question}
+        placeholder="Question"
+        returnKeyType="next"
+        multiline
+      />
+      <Spacer units={2} />
+      <Text style={styles.label}>Answer</Text>
+      <Spacer units={1} />
+      <TextInput
+        // @ts-ignore
+        style={styles.textInput}
+        colorPalette={colorPalette}
+        onChangeText={setAnswer}
+        value={answer}
+        placeholder="Answer"
+        returnKeyType="done"
+        onSubmitEditing={onPressSubmit}
+        multiline
+      />
+      <Spacer units={2} />
+      <View style={{ position: "relative" }}>
+        <Button
+          color={colors.white}
+          accentColor={colorPalette.accentColor}
+          iconName={IconName.ArrowRight}
+          title="Create"
+          onPress={onPressSubmit}
+        />
+        <View style={styles.indicatorContainer}>
+          <ActivityIndicator
+            animating={true}
+            color={colorPalette.accentColor}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    justifyContent: "center",
+    backgroundColor: colorPalette.backgroundColor,
+    padding: layout.edgeMargin,
+  },
+
+  textInput: {
+    marginLeft: -textFieldHorizontalPadding,
+    marginRight: -textFieldHorizontalPadding,
+    height: "100%",
+  },
+
+  // @ts-ignore
+  label: {
+    ...type.labelSmall.layoutStyle,
+    color: colors.white,
+  },
+
+  indicatorContainer: {
+    position: "absolute",
+    right: 0,
+    bottom: layout.gridUnit * 2,
+  },
+});

packages/extension/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "types": ["jest"],
+    "module": "esnext",
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "importHelpers": true,
+    "removeComments": true
+  },
+  "include": ["./src/**/*.tsx", "./src/**/*.ts", "../@types/**/*.d.ts"],
+  "references": [
+    {
+      "path": "../api"
+    },
+    {
+      "path": "../api-client"
+    },
+    {
+      "path": "../core"
+    },
+    {
+      "path": "../embedded-support"
+    },
+    {
+      "path": "../sample-data"
+    },
+    {
+      "path": "../ui"
+    }
+  ]
+}

packages/extension/web/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="%LANG_ISO_CODE%">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
+    />
+    <title>%WEB_TITLE%</title>
+    <style>
+      /**
+       * Extend the react-native-web reset:
+       * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+       */
+      html,
+      body,
+      #root {
+        width: 100%;
+        /* To smooth any scrolling behavior */
+        -webkit-overflow-scrolling: touch;
+        margin: 0px;
+        padding: 0px;
+        /* Allows content to fill the viewport and go beyond the bottom */
+        min-height: 100%;
+      }
+      #root {
+        flex-shrink: 0;
+        flex-basis: auto;
+        flex-grow: 1;
+        display: flex;
+        flex: 1;
+      }
+
+      html {
+        scroll-behavior: smooth;
+        /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+        -webkit-text-size-adjust: 100%;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        /* Allows you to scroll below the viewport; default value is visible */
+        overflow-y: auto;
+        overscroll-behavior-y: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -ms-overflow-style: scrollbar;
+      }
+
+      #root {
+        /* Size of the popup */
+        width: 400px;
+        height: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <noscript>
+      <form
+        action=""
+        style="
+          background-color: #fff;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 9999;
+        "
+      >
+        <div
+          style="
+            font-size: 18px;
+            font-family: Helvetica, sans-serif;
+            line-height: 24px;
+            margin: 10%;
+            width: 80%;
+          "
+        >
+          <p>Orbit requires JavaScript to display its interactive elements.</p>
+          <p style="margin: 20px 0">
+            <button
+              type="submit"
+              style="
+                background-color: #4630eb;
+                border-radius: 100px;
+                border: none;
+                box-shadow: none;
+                color: #fff;
+                cursor: pointer;
+                font-weight: bold;
+                line-height: 20px;
+                padding: 6px 16px;
+              "
+            >
+              Reload
+            </button>
+          </p>
+        </div>
+      </form>
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/extension/web/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "Orbit",
+  "description": "Extension for Orbit (withorbit.com)",
+  "version": "0.0.1",
+  "manifest_version": 3,
+  "permissions": ["storage", "activeTab", "scripting"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "index.html",
+    "default_title": "Orbit",
+    "default_icon": {
+      "16": "/assets/icons/16.png",
+      "32": "/assets/icons/32.png",
+      "48": "/assets/icons/32.png",
+      "128": "/assets/icons/32.png"
+    }
+  },
+  "icons": {
+    "16": "/assets/icons/16.png",
+    "32": "/assets/icons/32.png",
+    "48": "/assets/icons/32.png",
+    "128": "/assets/icons/32.png"
+  },
+  "commands": {
+    "_execute_action": {
+      "suggested_key": {
+        "default": "Ctrl+O"
+      }
+    }
+  }
+}