Add updated sample app (#47)

* Add updated sample app

* Add CI flow for sample app

* SDK bump

.github/workflows/sample-app-push.yml

@@ -0,0 +1,29 @@
+on:
+  push:
+    paths:
+      - "sample-app/**"
+name: Sample Extension Tests
+jobs:
+  tests:
+    name: Run Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('sample-app/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ hashFiles('sample-app/package-lock.json') }}
+            ${{ runner.os }}-node-
+            ${{ runner.os }}-
+      - name: Install dependencies
+        run: cd sample-app && npm ci
+      - name: Check types
+        run: cd sample-app && npm run check-types
+      - name: Run tests
+        run: cd sample-app && npm run test -- --passWithNoTests

sample-app/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab

sample-app/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { project: './tsconfig.json', tsconfigRootDir: __dirname },
+  plugins: ['@typescript-eslint', 'react-hooks', 'jsx-a11y'],
+  rules: {
+    // Temporary until we can import types from the SDK lib
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+
+    'no-console': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/restrict-plus-operands': 'error',
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    camelcase: 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    'eol-last': 'off',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: ['@unbounce/ui-componenets'],
+      },
+    ],
+  },
+};

sample-app/.gitignore

@@ -0,0 +1,7 @@
+dist
+node_modules
+.DS_Store
+.vscode
+# Optional npm cache directory
+.npm
+esm

sample-app/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "importOrder": ["^config(.*)$", "^[./]"],
+  "importOrderSeparation": true
+}

sample-app/README.md

@@ -0,0 +1,12 @@
+# sb-sample-extension
+
+## Developing apps locally using the Smart Builder
+
+1. Run `npm i` from the root directory.
+2. Run `npm start`. This will build the app and watch for changes.
+3. In a different terminal, run `npm run serve`
+4. Go to app.unbounce.com and create a Smart Builder page on the client where local development has been enabled.
+5. Open the apps sidebar panel and scroll down until you see "Add your own extension". Click "Add Manifest"
+6. Copy and paste the `manifest.json` file from this repo into the box.
+7. Now scroll up and find your app in the sidebar. Press the + button in the corner.
+8. Voila - you are now using the local version your app running on your machine.

sample-app/babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+            modules: 'commonjs',
+          },
+        ],
+        '@babel/preset-react',
+        ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+      ],
+    },
+  },
+};

sample-app/config/global-dependencies/smart-builder-components.ts

@@ -0,0 +1,22 @@
+export const {
+  Label,
+  GroupRadioButton,
+  FieldValidation,
+  DatePicker,
+  DateRangePicker,
+  DeleteButton,
+  AddButton,
+  ButtonLink,
+  Link,
+  MoreButton,
+  SearchBar,
+  Tab,
+  TabAnchor,
+  Tabs,
+  AddIcon,
+  ChevronIcon,
+  HelpIcon,
+  ErrorIcon,
+  ResetIcon,
+  Pagination,
+} = window['uiComponents'];

sample-app/config/global-dependencies/ub-shared.ts

@@ -0,0 +1,26 @@
+import type { Ub } from '@unbounce/smart-builder-sdk';
+
+declare global {
+  interface ExtendedWindow {
+    ub: Ub & {
+      section: any;
+      registerComponent: (appBundle: any) => void;
+      registerSection: (appBundle: any) => void;
+      registerControl: (appControl: any) => void;
+      registerHook: (appHook: any) => void;
+    };
+  }
+}
+
+export const {
+  Schema,
+  component,
+  section,
+  registerComponent,
+  registerSection,
+  registerControl,
+  registerHook,
+  useRegisteredEntitiesByPath,
+  WithStyles,
+} = (window as unknown as ExtendedWindow)['ub'];
+export default (window as unknown as ExtendedWindow)['ub'];

sample-app/jest.config.js

@@ -0,0 +1,19 @@
+const tsconfig = require('./tsconfig.json');
+const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);
+
+module.exports = {
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    ...moduleNameMapper,
+    'package.json': '<rootDir>/package.json',
+  },
+  moduleDirectories: ['node_modules'],
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)?$': 'babel-jest',
+  },
+  testMatch: ['**/?(*.)+(test).(js|jsx|ts|tsx)'],
+  testPathIgnorePatterns: ['<rootDir>/lib'],
+  coveragePathIgnorePatterns: ['mocks', 'node_modules'],
+};

sample-app/jest.setup.js

@@ -0,0 +1,5 @@
+require('whatwg-fetch');
+
+window.react = require('react');
+
+jest.setTimeout(3000); // Can increase as required

sample-app/manifest.ts

@@ -0,0 +1,16 @@
+import type { Manifest } from '@unbounce/smart-builder-sdk';
+
+const manifest: Manifest = {
+  appId: '@external/apptest',
+  version: '0.1',
+  name: 'App Test',
+  isSwappable: true,
+  type: 'media',
+  description: 'App Test',
+  iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/2/28/HelloWorld.svg',
+  moreInfoUrl: 'https://en.wikipedia.org/wiki/%22Hello,_World!%22_program',
+  categories: ['utility'],
+  files: [],
+  externalScripts: ['http://localhost:8081/index.js'],
+};
+export default manifest;