New user interface (coral) setup

.github/workflows/coral-pr-pipeline.yml

@@ -0,0 +1,102 @@
+name: Coral PR Pipeline
+
+on:
+  pull_request:
+    branches:
+      - main
+      - coral
+    paths:
+      - 'coral/**'
+      - '.github/workflows/coral-checks.yml'
+
+permissions:
+  contents: read
+
+env:
+  NODE_VERSION: 16
+  PNPM_VERSION: 7.13.4
+
+jobs:
+  static_code_analysis:
+    name: Static code analysis
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        working-directory: ./coral
+        run: pnpm install --frozen-lockfile
+
+      - name: Run static checks
+        working-directory: ./coral 
+        run: pnpm run lint
+
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        working-directory: ./coral
+        run: pnpm install --frozen-lockfile
+
+      - name: Run unittests
+        working-directory: ./coral 
+        run: pnpm run test

.gitignore

@@ -30,3 +30,12 @@ hs_err_pid*
 
 .idea
 target
+
+# OS generated files
+.DS_Store
+**/.DS_Store
+
+# Node
+node_modules/
+**/node_modules/
+

README.md

@@ -25,6 +25,10 @@ For the versions available, see the [tags on this repository](https://github.com
 ### ClusterApi
 https://github.com/aiven/klaw-cluster-api
 
+## Work in progress
+
+The directory `/coral` contains a React app. It's an ongoing rewrite of the existing Klaw frontend. The app Frontend app is not used in Klaw at the moment.
+
 ## Features:
 
 - Topics (approval): Create, Update, Delete, Promote

coral/.eslintrc.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/jsx-runtime",
+        "prettier"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "rules": {
+    }
+}

coral/.husky/pre-commit

@@ -0,0 +1,13 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+FRONTEND_ROOT="coral"
+GIT_ROOT=$(git rev-parse --show-toplevel)
+STAGED_FILES=$(git diff --staged --name-only)
+
+if echo "$STAGED_FILES" | grep -q "$FRONTEND_ROOT";
+then
+    pnpm --prefix="$GIT_ROOT"/"$FRONTEND_ROOT" lint-staged
+    pnpm --prefix="$GIT_ROOT"/"$FRONTEND_ROOT" tsc
+    pnpm --prefix="$GIT_ROOT"/"$FRONTEND_ROOT" test --bail
+fi

coral/.npmrc

@@ -0,0 +1,2 @@
+node-version>=16.0.0<=16.18.0
+engine-strict=true

coral/README.md

@@ -0,0 +1,88 @@
+# 🪸 Klaw's new frontend app
+
+- Please be aware of our [Code of Conduct](../CODE_OF_CONDUCT.md) ❤️
+
+## About
+
+`/coral` contains a React app. It's the rewrite of the existing Klaw frontend. 
+
+## Installation and usage 
+
+ℹ️ Coral uses `pnpm run` as a package manager. Read in their official documentation [how to install](https://pnpm.io/installation) it. 
+
+- navigate to this directory
+- run `pnpm install`
+- run `pnpm dev` to start the frontend app in development mode
+
+### Usage: How to run the app
+
+ℹ️ You can see all our scripts in the [`package.json`](package.json).
+You can also run `pnpm` in your console to get a list of all available scripts.
+
+#### Scripts used and what they execute
+- `build`: builds the frontend app for production
+- `dev`: starts the frontend app for development
+- `lint`: runs a code format check and if no error is found, lints the code. 
+  - the linting script does not mutate your code. See [Linting and code formatting](#linting-and-code-formatting) for more info.
+- `preview`: builds a preview production build _locally_
+- `reformat`: runs the code formatter (prettier) and reformat all code
+- `test-dev`: runs all test tests related to changed files in a watch mode
+- `test`: runs all tests one time
+- `tsc`: runs the TypeScript compiler
+
+## Tech stack
+
+### App development
+- TypeScript - 📃 [documentation](https://www.typescriptlang.org/) | 🐙 [repository](https://github.com/microsoft/TypeScript)
+- React - 📃 [documentation](https://reactjs.org/docs/getting-started.html) | 🐙 [repository](https://github.com/facebook/react/)
+- Vite - 📃 [documentation](https://vitejs.dev/guide/) | 🐙 [repository](https://github.com/vitejs/vite)
+
+### Testing
+- Jest - 📃 [documentation](https://jestjs.io/docs/getting-started) | 🐙 [repository](https://github.com/facebook/jest)
+- React Testing Library - 📃 [documentation](https://testing-library.com/docs/react-testing-library/intro/) | 🐙 [repository](https://github.com/testing-library/react-testing-library)
+
+📃 You can find more detailed information about testing in our docs for [Frontend Testing](docs/frontend-testing.md).
+
+### Linting and code formatting
+How we keep our app's codebase looking consistent and nice 💅🏼
+
+- [Prettier](https://prettier.io/) for code formatting
+- [ESlint](https://eslint.org/) and various plugins for linting
+
+The script `lint` runs a prettier check and eslint after. It does not mutate your code in any way. If you want to format your code or let eslint fix it for you, you can run:
+
+1. First: `pnpm reformat` (prettier formatting)
+2. After that: `pnpm eslint --fix` (eslint in fix mode)
+
+ℹ️ It's convenient to let prettier and eslint auto-format your code "on save" by your IDE or editor.
+
+## Styling 
+
+We use the component library of Aiven's design system:
+  - 📃 [documentation](https://aiven-ds.netlify.app/)
+  - the repository is open source, but `private` at the moment
+
+As a rule, please don't use css classes from the design system. All styles should be created by using the existing components and their properties. 
+
+__🔄 Work in progress related to styles__
+- We plan adding css variables based on the design system's tokens.
+- We plan having a custom theme for Klaw. This will be used instead of the Aiven theme.
+
+## Documentation
+
+We've a more detailed document about our thinking about [Docmentation](docs/documentation.md). 
+
+### Tip
+You can use `alex` ( 📃 [documentation]( https://alexjs.com/) | 🐙 [repository](https://github.com/get-alex/alex)) as an **optional** linting tool. It checks text documents and highlights language that potentially could be insensitive or inconsiderate. 
+
+- run it with `pnpm --silent dlx alex` to lint text files.  
+
+
+## More detailed documentation
+
+We provide more documentation on:
+
+- Our commitment to [Accessibility](docs/accessibility.md)
+- Detailed overview of the [Directory Structure](docs/directory-structure.md)
+- Our thinking about [Docmentation](docs/documentation.md)
+- More information about [Frontend Testing](docs/frontend-testing.md)

coral/docs/accessibility.md

@@ -0,0 +1,41 @@
+# 🏗 🏗 🏗 THIS IS A DRAFT 🏗 🏗 🏗 
+
+
+----
+
+
+# Accessibility for FE app
+
+🙏 we should aim to reach at least be AA on [WCAG 2.1 standards](https://www.w3.org/WAI/standards-guidelines/wcag/). If we reach AAA and/or are already looking into 2.2. - even better ❤️
+
+
+## How do we make sure of that?
+- we use the aiven component library components
+- we use semantic html
+- we use native elements where possible
+- we do automated accessibility linting and testing
+- we do manual testing for new features 
+	- using tools to help us find issues
+	- using assisitve technology to see how it works for ourselves
+- we do usability testing sessions with users that are used to assitive technology
+- we collect resources in documentation for developers for best practices
+
+
+### Automation tools
+(tbc)
+
+#### Linting
+- eslint-plugin-jsx-a11y
+- axe Accessibility Linter
+
+#### Testing
+- @axe-core/react
+
+#### Manual testing
+- Lighthouse (browser extension)
+- axe DevTools - Web Accessibility Testing (browser extension)
+- https://wave.webaim.org/extension/  (browser extension)
+- qualWeb Accessibility Checker (browser extension)
+- https://validator.w3.org/
+- https://raw.githubusercontent.com/Heydon/REVENGE.CSS/master/revenge.css
+