Feature/4629 create frontend template

src/Altinn.Apps/AppTemplates/react/.eslintrc.json

@@ -0,0 +1,178 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "eslint:recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+        "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json",
+    "extraFileExtensions": [".ts", ".tsx"]
+  },
+  "settings": {
+    "import/extensions": [".js",".jsx",".ts",".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts",".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js",".jsx",".ts",".tsx"]
+      }
+    }
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "setupTests.ts"
+  ],
+  "rules": {
+    "brace-style": [
+      "warn"
+    ],
+    "indent": [
+      "warn",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "react/jsx-indent": [
+      "warn",
+      2
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "max-len": [
+      "warn",
+      120,
+      4,
+      {
+        "ignoreUrls": true,
+        "ignorePattern": "/^import|^export/",
+        "ignoreComments": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true
+      }
+    ],
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    // "@typescript-eslint/no-empty-interface": [
+    //   "warning",
+    //   {
+    //     "allowSingleExtends": false
+    //   }
+    // ]
+    "quotes": [
+      "warn",
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "jsx-quotes": [
+      "warn",
+      "prefer-single"
+    ],
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [
+          ".jsx",
+          ".tsx"
+        ]
+      }
+    ],
+    "react/jsx-wrap-multilines": [
+      0
+    ],
+    "react/jsx-tag-spacing": [
+      0
+    ],
+    "react/jsx-curly-newline": [
+      0
+    ],
+    "operator-linebreak": "off",
+    "sort-keys": "off",
+    "camelcase": [
+      "warn"
+    ],
+    "id-blacklist": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", {
+      "vars": "all",
+      "args": "after-used",
+      "ignoreRestSiblings": false
+    }],
+    "no-duplicate-imports": [
+      0
+    ],
+    "import/no-duplicates": "off",
+    "import/prefer-default-export": "off",
+    "prefer-destructuring": "off",
+    "react/destructuring-assignment": "off",
+    "no-use-before-define":"off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-fragments": "off",
+    "arrow-body-style": "off",
+    "import/no-extraneous-dependencies": [
+      "warn",
+      {
+        "devDependencies": true
+      }
+    ],
+    "object-curly-newline": [
+      "warn",
+      {
+        "ObjectExpression": { "minProperties": 3, "consistent": true },
+        "ObjectPattern": { "minProperties": 3, "consistent": true  },
+        "ImportDeclaration": "never",
+        "ExportDeclaration": { "minProperties": 3, "consistent": true }
+      }
+    ],
+    "react/jsx-max-props-per-line": [
+      "warn",
+      {
+        "maximum": 2
+      }
+    ],
+    "react/jsx-boolean-value": "off",
+    "linebreak-style": "off",
+    "import/no-cycle": "off"
+  }
+}

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "env",
+    "react"
+  ],
+  "plugins": [
+    "syntax-dynamic-import"
+  ]
+}

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/.env

@@ -0,0 +1 @@
+PORT=9000

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/Dockerfile

@@ -0,0 +1,21 @@
+# base image
+FROM 12.14.1-alpine3.11 AS generate-runtime-app
+
+# Copy and install Lerna
+COPY ./src/react-apps/lerna.json .
+COPY ./src/react-apps/package.json .
+COPY ./src/react-apps/package-lock.json .
+RUN npm ci
+
+# Copy shared and runtime
+COPY ./src/react-apps/applications/shared/ /applications/shared/
+COPY ./src/react-apps/applications/runtime/ /applications/runtime/
+
+# Install
+RUN npm run install-deps
+
+# Build runtime
+RUN npm run build --prefix /applications/runtime; exit 0
+
+CMD ["echo", "done"]
+

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/README.md

@@ -0,0 +1,46 @@
+# App frontend template - React
+
+## Prerequisites
+1. An app built in Altinn Studio.
+2. The altinn-studio repo cloned to your local machine.
+2. Follow instructions for setting up apps to run locally [here](https://docs.altinn.studio/teknologi/altinnstudio/development/handbook/front-end/developing/#app-frontend).
+
+## Getting started
+
+### Setting up the frontend to run
+1. Navigate to the template folder.
+
+```cmd
+cd altinn-studio/src/Altinn.Apps/AppTemplates/react
+```
+2. Install dependencies
+
+```cmd
+npm ci
+npm run install-deps
+```
+
+3. Run application
+
+```cmd
+cd altinn-app-frontend
+npm start
+``` 
+
+  This will run the application on localhost:8080. Make sure to point to localhost in the `Index.cshtml` file, as described in instructions for setting up app to run locally (link above). Any changes made in the app frontend will automatically trigger a new build/reload.
+
+4. Build application
+To build the application (f.ex to host the .js-file somewhere and reference it from the `Index.cshtml` file), run 
+
+```cmd
+cd altinn-app-frontend // If not already in this folder
+npm run build
+``` 
+
+### Modifying the frontend
+The template is set up with some standard functionality, that is also included in the standard app frontend. F.ex. instantiation, party selection, and routing between these and the process step views. Calls to get data like party information, user profile, language/texts etc. are also set up, and the standard AltinnAppHeader component is shown at the top of the page. 
+
+In the template, all standard process step views have been removed, and replaced with a CustomView component, that you can use to customize your views. It is located in `src/features/custom`. 
+
+With the current setup, this view is the default for all process steps. If the instance is archived, the standard receipt view is shown. Use the CustomView as a starting point for building your own frontend.
+

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/__mocks__/applicationMetadataMock.ts

@@ -0,0 +1,42 @@
+const applicationMetadataJSON = `{
+  "id": "ttd/test-app",
+  "org": "ttd",
+  "title": {
+    "nb": "Test App"
+  },
+  "dataTypes": [
+    {
+      "id": "test-data-model",
+      "allowedContentTypes": [
+        "application/xml"
+      ],
+      "appLogic": {
+        "autoCreate": true,
+        "classRef": "Altinn.App.Models.Skjema"
+      },
+      "taskId": "Task_1",
+      "maxCount": 1,
+      "minCount": 1
+    },
+    {
+      "id": "ref-data-as-pdf",
+      "allowedContentTypes": [
+        "application/pdf"
+      ],
+      "maxCount": 0,
+      "minCount": 0
+    }
+  ],
+  "partyTypesAllowed": {
+    "bankruptcyEstate": false,
+    "organisation": false,
+    "person": true,
+    "subUnit": false
+  },
+  "created": "2020-06-29T08:47:12.425551Z",
+  "createdBy": "test testesen",
+  "lastChanged": "2020-06-29T08:47:12.4255537Z",
+  "lastChangedBy": "test testesen"
+}`;
+
+export const applicationMetadataMock = JSON.parse(applicationMetadataJSON);

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/__mocks__/formDataStateMock.ts

@@ -0,0 +1,15 @@
+import { IFormDataState } from '../src/features/form/data/formDataReducer';
+
+export function getFormDataStateMock(customState?: Partial<IFormDataState>) {
+  const formData: IFormDataState = {
+    error: null,
+    formData: {},
+    hasSubmitted: false,
+    isSaving: false,
+    isSubmitting: false,
+    responseInstance: false,
+    unsavedChanges: false,
+  };
+
+  return { ...formData, ...customState };
+}

src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/__mocks__/formLayoutStateMock.ts

@@ -0,0 +1,62 @@
+import { ILayoutState } from '../src/features/form/layout/formLayoutReducer';
+
+export function getFormLayoutStateMock(customStates?: Partial<ILayoutState>): ILayoutState {
+  const mockFormLayoutState: ILayoutState = {
+    layout: [
+      {
+        id: 'field1',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group.prop1',
+        },
+        textResourceBindings: {
+          title: 'Title',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      },
+      {
+        id: 'field2',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group.prop2',
+        },
+        textResourceBindings: {
+          title: 'Title',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      },
+      {
+        id: 'field3',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group.prop3',
+        },
+        textResourceBindings: {
+          title: 'Title',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      },
+    ],
+    error: {
+      message: null,
+      name: null,
+    },
+    uiConfig: {
+      autoSave: true,
+      focus: null,
+      hiddenFields: [],
+      repeatingGroups: null,
+    },
+  };
+
+  return {
+    ...mockFormLayoutState,
+    ...customStates,
+  };
+}