OPHJOD-1037: Initialize project structure

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/CODEOWNERS

@@ -0,0 +1 @@
+/.github/ @Opetushallitus/jod-kehittajat

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+<!-- Have you ran tests and they pass?
+Did builds complete successfully?
+Remembered to run linters?
+-->
+
+## Description
+
+<!-- Give some description about the PR.
+- What was done and why? Give some context to help the reviewer.
+- Where to focus especially?
+-->
+
+## Related JIRA ticket
+
+<!-- Remember to add link to the JIRA issue
+https://jira.eduuni.fi/browse/OPHJOD-XXX
+-->
+
+https://jira.eduuni.fi/browse/OPHJOD-

.github/snyk_pull_request_template.yaml

@@ -0,0 +1,2 @@
+title: 'OPHJOD-851: Upgrade {{ package_name }} from {{ package_from }} to {{ package_to }}'
+commitMessage: 'OPHJOD-851: Upgrade {{ package_name }} from {{ package_from }} to {{ package_to }}'

.github/workflows/build.yml

@@ -0,0 +1,69 @@
+name: Build and deploy JOD Ohjaaja UI
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write # Needed to interact with GitHub's OIDC Token endpoint
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/iron
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npx eslint . --report-unused-disable-directives --max-warnings 0
+
+      - name: Run Prettier
+        run: npx prettier . --check
+
+      - name: Run Vitest unit tests
+        run: npx vitest --coverage.enabled true
+
+      - name: Upload Vitest report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage
+          path: coverage/
+          retention-days: 30
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: arn:aws:iam::${{ secrets.JOD_UTIL_AWS_ACCOUNT_ID }}:role/${{ secrets.JOD_UTIL_AWS_GITHUB_ROLE_NAME}}
+          aws-region: eu-west-1
+
+      - name: Copy third party assets from S3
+        run: aws s3 sync --quiet s3://${{ secrets.JOD_UI_ASSETS }} ./assets
+
+      - name: Run build
+        run: npm run build
+
+      # SonarCloud analysis
+      # - name: SonarCloud Scan
+      #   uses: SonarSource/sonarcloud-github-action@v2
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
+      #     SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+
+      - name: Upload dist artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+/public/assets
+/assets
+coverage
+/test-results/
+/blob-report/
+*.local
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged || (echo '\n (⊙＿⊙) Your forgot to use prettier and fix eslint errors!\n'; false)

.husky/pre-push

@@ -0,0 +1 @@
+npm run test:unit || (echo '\n (⊙＿⊙) Your forgot to run unit tests!\n'; false)

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*": ["prettier --check"],
+  "*.{ts,tsx}": ["eslint --report-unused-disable-directives --max-warnings 0"]
+}

.nvmrc

@@ -0,0 +1 @@
+lts/iron

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
+}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "deque-systems.vscode-axe-linter",
+    "Lokalise.i18n-ally",
+    "vitest.explorer",
+    "GitHub.vscode-github-actions",
+    "GitHub.vscode-pull-request-github",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/src"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "i18n-ally.localesPaths": ["src/i18n"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "fi"
+}

README.md

@@ -1,3 +1,75 @@
 # JOD Ohjaaja UI
 
 This repository is the UI for JOD Ohjaaja. JOD Ohjaaja is part of the Digital Service Ecosystem for Continuous Learning (JOD) project.
+
+The UI app is built using React, Vite, and TypeScript. React is a popular JavaScript library for building user interfaces, while Vite is a build tool that provides fast and efficient development experience. TypeScript is a superset of JavaScript that adds static type checking and other features to the language.
+
+Together, these technologies provide a robust and efficient development environment for building modern web applications with a focus on user experience. The app is designed to be responsive and accessible.
+
+## Getting Started
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
+
+1. First, ensure that you have [NVM](https://github.com/nvm-sh/nvm) installed on your machine.
+2. Clone this repository to your local machine.
+3. Open a terminal window and navigate to the root directory of the project.
+4. Run the following command to install Node.js & NPM and the dependencies:
+
+```shell
+nvm install
+nvm use
+npm install
+```
+
+5. Take the steps in JOD Design System repository to get components of the design system work in hot reload mode.
+6. Once the installation is complete, run the following command to start the development server:
+
+```shell
+npm run dev
+```
+
+7. The app should now be running on http://localhost:8080/.
+
+## Download third-party UI assets
+
+Third-party assets such as images, fonts, and icons are stored in a S3 bucket. Guide to download assets is available in the infrastructure repository.
+
+## Updating JOD Design System
+
+Run the following command to update the JOD Design System to the latest version:
+
+```shell
+npm update @jod/design-system
+```
+
+## Accessibility testing
+
+### Axe
+
+Axe is used automatically when run in development mode.
+When starting the development server you can see findings of Axe, if any, on the console for e.g when missing `<main>-tag`:
+
+```
+New axe issues
+moderate: Document should have one main landmark https://dequeuniversity.com/rules/axe/4.8/landmark-one-main?application=axeAPI
+moderate: All page content should be contained by landmarks https://dequeuniversity.com/rules/axe/4.8/region?application=axeAPI
+```
+
+### Axe DevTools
+
+Useful browser extension to use
+
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)
+- [Chromium](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/axe-devtools-web-access/kcenlimkmjjkdfcaleembgmldmnnlfkn)
+
+### WAVE Browser Extensions
+
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/)
+- [Chromium](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/wave-evaluation-tool/khapceneeednkiopkkbgkibbdoajpkoj)
+
+### Google Lighthouse
+
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)
+- [Chromium](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)

eslint.config.js

@@ -0,0 +1,34 @@
+import js from '@eslint/js';
+import singlestoreReactHooksDisableImport from '@singlestore/eslint-plugin-react-hooks-disable-import';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import sonarjs from 'eslint-plugin-sonarjs';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  { files: ['**/*.{ts,tsx}'] },
+  { languageOptions: { ecmaVersion: 2020, globals: globals.browser } },
+  sonarjs.configs.recommended,
+  jsxA11y.flatConfigs.recommended,
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      react: react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      '@singlestore/react-hooks-disable-import': singlestoreReactHooksDisableImport,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@singlestore/react-hooks-disable-import/react-hooks-disable-import': 'error',
+    },
+  },
+  eslintConfigPrettier,
+);