Add 'etp-front/' from commit 'db2f2e1202a1f7cf8f29f3f1ee66e2cde543c23b'

git-subtree-dir: etp-front
git-subtree-mainline: a2f55b0
git-subtree-split: db2f2e1

etp-front/.github/workflows/node.js.yml

@@ -0,0 +1,80 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    branches: [ develop ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 18.x, 20.x ]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 18.x, 20.x ]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
+
+  format:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 18.x, 20.x ]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run check-format
+
+  storybook:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 18.x, 20.x ]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run storybook:build

etp-front/.gitignore

@@ -0,0 +1,16 @@
+/node_modules/
+/public/
+/.vscode/
+/.nyc_output/
+/coverage/
+/jsdoc/out/
+/storybook-static/
+.DS_Store
+
+# IntelliJ IDEA
+*.iml
+.idea
+.nrepl-port
+
+# Emacs
+.projectile

etp-front/.nvmrc

@@ -0,0 +1 @@
+18

etp-front/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "svelteSortOrder": "options-scripts-styles-markup",
+  "svelteAllowShorthand": true,
+  "bracketSameLine": true
+}

etp-front/.storybook/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+      '@storybook/addon-actions/register',
+      '@storybook/addon-links/register',
+      '@storybook/addon-a11y/register',
+      '@storybook/addon-viewport/register'
+    ]
+}

etp-front/.storybook/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('tailwindcss')
+    ],
+};

etp-front/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div class="font-body"></div>

etp-front/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+/>
+
+<script>
+  window.CONFIG = {"COGNITOCLIENTID":"forStorybook"};
+</script>

etp-front/.storybook/preview.js

@@ -0,0 +1,17 @@
+import './tailwind.css';
+import { makeDecorator } from '@storybook/addons';
+import { addParameters, addDecorator } from '@storybook/svelte';
+import { withA11y } from '@storybook/addon-a11y';
+import { setupI18n } from '@Language/i18n';
+
+addDecorator(withA11y);
+addParameters({ viewport: { defaultViewport: 'responsive' } });
+
+const localizationDecorator = makeDecorator({
+  wrapper: (storyFn, context) => {
+    setupI18n();
+    return storyFn(context);
+  }
+});
+
+addDecorator(localizationDecorator);

etp-front/.storybook/tailwind.css

@@ -0,0 +1,10 @@
+@tailwind base;
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');
+
+.font-body ~ * {
+  @apply font-body;
+}
+
+@tailwind component;
+@tailwind utilities;

etp-front/.storybook/webpack.config.js

@@ -0,0 +1,58 @@
+const R = require('ramda');
+const path = require('path');
+
+const configModuleRulesLens = R.lensPath(['module', 'rules']);
+
+const ruleLens = (config, testString) =>
+  R.compose(
+    configModuleRulesLens,
+    R.compose(
+      R.lensIndex,
+      R.findIndex(R.compose(R.test(R.__, testString), R.prop('test'))),
+      R.view(configModuleRulesLens)
+    )(config)
+  );
+
+module.exports = async ({ config, mode }) => {
+  config.resolve.alias = {
+    ...(config.resolve.alias || {}),
+    '@Pages': path.resolve(__dirname, '../src/pages'),
+    '@Component': path.resolve(__dirname, '../src/components'),
+    '@Utility': path.resolve(__dirname, '../src/utils'),
+    '@Language': path.resolve(__dirname, '../src/language'),
+    '@': path.resolve(__dirname, '../src')
+  };
+
+  config.module.rules.push({
+    test: /\.css$/,
+    loaders: [
+      {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: true,
+          config: {
+            path: './.storybook/'
+          }
+        }
+      }
+    ]
+  });
+
+  const svelteLens = ruleLens(config, '.svelte');
+
+  return R.over(
+    svelteLens,
+    R.mergeLeft({
+      options: {
+        immutable: true,
+        preprocess: require('svelte-preprocess')({
+          postcss: {
+            sourceMap: true,
+            path: './.storybook/'
+          }
+        })
+      }
+    }),
+    config
+  );
+};

etp-front/LICENSE.md

@@ -0,0 +1,4 @@
+Licence
+
+Licensed under the EUPL
+More information about EUPL licence: [https://eupl.eu/](https://eupl.eu/)

etp-front/README.md

@@ -0,0 +1,147 @@
+# ARA - Energiatodistuspalvelu
+
+Tämä on web sovellus energiatodistusten laadintaan 
+ja todistuksiin liittyvään viranomaistoimintaan.
+
+This is a web application for managing energy performance certificates and related activities. 
+This application is for accredited certificate experts and public authorities.
+
+[Node.js](https://nodejs.org) has to be installed and preferred node version manager tool is 
+[node version manager](https://github.com/nvm-sh/nvm).
+
+## Node version manager
+
+https://github.com/nvm-sh/nvm#git-install
+
+```bash
+source ~/.nvm/nvm.sh
+nvm use
+```
+
+## Get started
+
+Install the dependencies...
+
+```bash
+npm install
+```
+
+You also need to start [backend](https://github.com/solita/etp-core) services found in different repository.
+
+...then start [webpack](https://webpack.js.org)
+
+```bash
+npm run dev
+```
+
+Navigate to [https://localhost:3000](https://localhost:3000). You should see your app running. Edit a component file in `src`, save it, the page should reload automatically.
+
+## Testing
+
+### Mocha
+
+Run unit tests with:
+
+```bash
+npm run test
+```
+
+or
+
+```bash
+npm run tdd
+```
+
+The latter command watches file changes and reruns tests upon saved changes.
+
+### Cypress
+
+Make sure you installed optional dependencies from npm. Then just use the command:
+
+```bash
+npm run cypress
+```
+
+## Building and running in production mode
+
+To create a production optimised version of the app:
+
+```bash
+npm run build
+```
+
+
+## About the application
+
+### Directory structure
+
+#### ./src
+
+Contains all the application code divided into subfolders for different purposes. The root contains internal riggin required for scaffolding the application.
+
+##### ./src/components
+
+General components to be used in UI building e.g. inputs, buttons etc. 
+These components can be used in any page.
+
+##### ./src/pages
+
+All pages and their components. Pages are grouped by feature-basis.
+Each feature contains:
+* index (`index.svelte`)
+* page components and specialized components used from these pages (`*.svelte`)
+* api modules (`*-api.js`) to create backend futures
+* datamodel validation schemas (`schema.js`)
+* other functional utility modules (`*.js`)
+
+Specialized components (used only from a specific place) are:
+* header
+* breadcrumb
+* navigation
+* footer
+* valvonta (used from valvonta-oikeellisuus/valvonta-kaytto)
+
+##### ./src/language
+
+Translations, i18n riggings and some utilities for handling objects with fi/sv-label fields.
+
+##### ./src/utils
+
+General purpose pure function libraries.
+
+#### ./assets
+
+Static assets (images, pdfs, etc.)
+
+#### ./cypress
+
+Cypress tests
+
+
+### Best practices
+
+#### Naming things
+
+- Directories/files should be kebab-case
+- Imported namespaces should be pascal-case 
+- Data models used with backend are kebab-case
+- Otherwise use camel-case.
+
+#### Monadic types
+
+Always use proper monadic type for special cases.
+- Instead of null, use Maybe.
+- Everything that could fail (f.ex. parsing/validation) synchronously should be wrapped in Either where Left is error and Right is value.
+- Asynchronous operations should be wrapped in futures.
+
+#### Programming style
+
+- In general prefer functional programming style.
+- Variable reassignment should only happen with svelte components. Always declare variables with const.
+- No mutations allowed
+- Heavy utilization of Ramda
+- Curry-functions and compositions
+- Write pointfree/tacit code
+- Only pure functions in utilities, side effects allowed inside svelte components
+- Try to achieve good test coverage with unit tests.
+- If you find 2 different ways to achieve the same result within codebase; default to the newer version for examples when writing new code.

etp-front/assets/errorpages/404.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    Page not found.
+  </body>
+</html>