Forms personalization extension

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-transform-react-jsx"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "extends": ["eslint:recommended", "plugin:jest/recommended"],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    }
+}

.github/workflows/deploy_prod.yml

@@ -0,0 +1,60 @@
+name: AIO App CI
+
+on:
+  release:
+    types: [released]
+jobs:
+  deploy:
+    name: Deploy to Prod
+    runs-on: ${{ matrix.os }}
+    strategy:
+      max-parallel: 1
+      matrix:
+        node-version: ['20']
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 10.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_PROD }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_PROD }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_PROD }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_PROD }}
+          IMSORGID: ${{ secrets.IMSORGID_PROD }}
+          SCOPES: ${{ secrets.SCOPES_PROD }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_PROD }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Deploy
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_PROD }}
+          AIO_RUNTIME_AUTH: ${{ secrets.AIO_RUNTIME_AUTH_PROD }}
+          AIO_PROJECT_ID: ${{ secrets.AIO_PROJECT_ID_PROD }}
+          AIO_PROJECT_NAME: ${{ secrets.AIO_PROJECT_NAME_PROD }}
+          AIO_PROJECT_ORG_ID: ${{ secrets.AIO_PROJECT_ORG_ID_PROD }}
+          AIO_PROJECT_WORKSPACE_ID: ${{ secrets.AIO_PROJECT_WORKSPACE_ID_PROD }}
+          AIO_PROJECT_WORKSPACE_NAME: ${{ secrets.AIO_PROJECT_WORKSPACE_NAME_PROD }}
+          AIO_PROJECT_WORKSPACE_DETAILS_SERVICES: ${{ secrets.AIO_PROJECT_WORKSPACE_DETAILS_SERVICES_PROD }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: deploy

.github/workflows/deploy_stage.yml

@@ -0,0 +1,62 @@
+name: AIO App CI
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Deploy to Stage
+    runs-on: ${{ matrix.os }}
+    strategy:
+      max-parallel: 1
+      matrix:
+        node-version: ['20']
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 10.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_STAGE }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_STAGE }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_STAGE }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_STAGE }}
+          IMSORGID: ${{ secrets.IMSORGID_STAGE }}
+          SCOPES: ${{ secrets.SCOPES_STAGE }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Deploy
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+          AIO_RUNTIME_AUTH: ${{ secrets.AIO_RUNTIME_AUTH_STAGE }}
+          AIO_PROJECT_ID: ${{ secrets.AIO_PROJECT_ID_STAGE }}
+          AIO_PROJECT_NAME: ${{ secrets.AIO_PROJECT_NAME_STAGE }}
+          AIO_PROJECT_ORG_ID: ${{ secrets.AIO_PROJECT_ORG_ID_STAGE }}
+          AIO_PROJECT_WORKSPACE_ID: ${{ secrets.AIO_PROJECT_WORKSPACE_ID_STAGE }}
+          AIO_PROJECT_WORKSPACE_NAME: ${{ secrets.AIO_PROJECT_WORKSPACE_NAME_STAGE }}
+          AIO_PROJECT_WORKSPACE_DETAILS_SERVICES: ${{ secrets.AIO_PROJECT_WORKSPACE_DETAILS_SERVICES_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: deploy
+          noPublish: true

.github/workflows/pr_test.yml

@@ -0,0 +1,48 @@
+name: AIO App CI
+
+on: [pull_request]
+jobs:
+  test:
+    name: Test PR
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: ['20']
+        os: [macOS-latest, ubuntu-latest, windows-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 10.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_STAGE }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_STAGE }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_STAGE }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_STAGE }}
+          IMSORGID: ${{ secrets.IMSORGID_STAGE }}
+          SCOPES: ${{ secrets.SCOPES_STAGE }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Test
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: test

.gitignore

@@ -0,0 +1,42 @@
+
+# package directories
+node_modules
+jspm_packages
+
+# build
+build
+dist
+.manifest-dist.yml
+
+# Config
+config.json
+.env*
+.aio
+
+# Adobe I/O console config
+console.json
+
+# Test output
+junit.xml
+
+# IDE & Temp
+.cache
+.idea
+.nyc_output
+.vscode
+coverage
+.aws.tmp.creds.json
+.wskdebug.props.tmp
+
+# Parcel
+.parcel-cache
+
+# OSX
+.DS_Store
+
+# yeoman
+.yo-repository
+
+# logs folder for aio-run-detached
+logs
+

README.md

@@ -0,0 +1,81 @@
+# FormsPersonalization
+
+Welcome to my Adobe I/O Application!
+
+## Setup
+
+- Populate the `.env` file in the project root and fill it as shown [below](#env)
+
+## Local Dev
+
+- `aio app run` to start your local Dev server
+- App will run on `localhost:9080` by default
+
+By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
+local serverless stack and also run your actions locally use the `aio app run --local` option.
+
+## Test & Coverage
+
+- Run `aio app test` to run unit tests for ui and actions
+- Run `aio app test --e2e` to run e2e tests
+
+## Deploy & Cleanup
+
+- `aio app deploy` to build and deploy all actions on Runtime and static files to CDN
+- `aio app undeploy` to undeploy the app
+
+## Config
+
+### `.env`
+
+You can generate this file using the command `aio app use`. 
+
+```bash
+# This file must **not** be committed to source control
+
+## please provide your Adobe I/O Runtime credentials
+# AIO_RUNTIME_AUTH=
+# AIO_RUNTIME_NAMESPACE=
+```
+
+### `app.config.yaml`
+
+- Main configuration file that defines an application's implementation. 
+- More information on this file, application configuration, and extension configuration 
+  can be found [here](https://developer.adobe.com/app-builder/docs/guides/appbuilder-configuration/#appconfigyaml)
+
+#### Action Dependencies
+
+- You have two options to resolve your actions' dependencies:
+
+  1. **Packaged action file**: Add your action's dependencies to the root
+   `package.json` and install them using `npm install`. Then set the `function`
+   field in `app.config.yaml` to point to the **entry file** of your action
+   folder. We will use `webpack` to package your code and dependencies into a
+   single minified js file. The action will then be deployed as a single file.
+   Use this method if you want to reduce the size of your actions.
+
+  2. **Zipped action folder**: In the folder containing the action code add a
+     `package.json` with the action's dependencies. Then set the `function`
+     field in `app.config.yaml` to point to the **folder** of that action. We will
+     install the required dependencies within that directory and zip the folder
+     before deploying it as a zipped action. Use this method if you want to keep
+     your action's dependencies separated.
+
+## Debugging in VS Code
+
+While running your local server (`aio app run`), both UI and actions can be debugged, to do so open the vscode debugger
+and select the debugging configuration called `WebAndActions`.
+Alternatively, there are also debug configs for only UI and each separate action.
+
+## Typescript support for UI
+
+To use typescript use `.tsx` extension for react components and add a `tsconfig.json` 
+and make sure you have the below config added
+```
+ {
+  "compilerOptions": {
+      "jsx": "react"
+    }
+  } 
+```

app.config.yaml

@@ -0,0 +1,24 @@
+extensions:
+  universal-editor/ui/1:
+    $include: src/universal-editor-ui-1/ext.config.yaml
+    runtimeManifest:
+      packages:
+        forms-personalization:
+          license: Apache-2.0
+          actions:
+            fetchSegments:
+              function: src/universal-editor-ui-1/actions/fetchSegments/index.js
+              web: 'yes'
+              runtime: nodejs:16
+              inputs:
+                LOG_LEVEL: debug
+              annotations:
+                final: true
+            saveSegments:
+              function: src/universal-editor-ui-1/actions/saveSegments/index.js
+              web: 'yes'
+              runtime: nodejs:16
+              inputs:
+                LOG_LEVEL: debug
+              annotations:
+                final: true

extension-manifest.json

@@ -0,0 +1,6 @@
+{
+  "name": "Forms Personalization",
+  "id": "forms-personalization",
+  "description": "Personalization panel for AEM Forms",
+  "version": "0.0.1"
+}

hooks/post-deploy.js

@@ -0,0 +1,29 @@
+const chalk = require('chalk');
+const fs = require('fs');
+const yaml = require('js-yaml');
+
+module.exports = (config) => {
+  try {
+    // read the app.config.yaml file to get the extension points
+    const yamlFile = fs.readFileSync(`${config.root}/app.config.yaml`, 'utf8');
+    const yamlData = yaml.load(yamlFile);
+    const { extensions } = yamlData;
+
+    // For now we are ok just to read the first extension point to build the preview link
+    const extension = Object.keys(extensions)[0];
+    const previewData = {
+      extensionPoint: extension,
+      url: config.project.workspace.app_url,
+    };
+
+    // buid the preview URL
+    const base64EncodedData = Buffer.from(JSON.stringify(previewData)).toString('base64');
+    console.log(chalk.magenta(chalk.bold('For a developer preview of your UI extension in the AEM environment, follow the URL:')));
+
+    // check if the environment is stage, if so, we need to add the -stage suffix to the URL
+    const env = process.env.AIO_CLI_ENV === 'stage' ? '-stage' : '';
+    console.log(chalk.magenta(chalk.bold(`  -> https://experience${env}.adobe.com/aem/extension-manager/preview/${base64EncodedData}`)));
+  } catch (error) {
+    // if something went wrong, we do nothing, and just don't display the URL
+  }
+};

jest.setup.js

@@ -0,0 +1,8 @@
+/*
+* <license header>
+*/
+
+jest.setTimeout(10000)
+
+beforeEach(() => { })
+afterEach(() => { })