Merge pull request #14 from DHBW-FN-TIT20/KWYG-Sprint-0

Kwyg sprint 0

.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:16-bullseye",
+	"features": {
+		"ghcr.io/devcontainers/features/git:1": {},
+		"ghcr.io/devcontainers/features/github-cli:1": {}
+	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		3000
+	],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "npm install -g [email protected] && npm install",
+	// Configure tool-specific properties.
+	// "customizations": {},
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	"remoteUser": "root",
+	// Add extensions
+	"extensions": [
+		"mhutchie.git-graph",
+		"donjayamanne.githistory",
+		"Gruntfuggly.todo-tree",
+		"GitHub.copilot",
+		"GitHub.vscode-pull-request-github",
+		"esbenp.prettier-vscode"
+	],
+	"settings": {
+		"[javascript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+		},
+		"editor.indentSize": "tabSize",
+		"editor.tabSize": 2
+	}
+}

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "max-len": [
+            "error",
+            {
+                "code": 120
+            }
+        ],
+        "react/prop-types": "off"
+    },
+    "ignorePatterns": [
+        "src/**/*.test.js",
+        "src/fonts/*"
+    ]
+}

.github/workflows/new_release.yml

@@ -0,0 +1,93 @@
+# Deploy App in GitHub Pages and create realse 
+
+
+name: New Release
+
+on:
+  push:
+    branches:
+      - "main"
+    tags:
+      - v*.*.*
+
+jobs:
+  # Validate the code
+  call-workflow-2-in-local-repo:
+    uses: ./.github/workflows/validate_pr.yml
+
+  # Build the App
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        cache: 'npm'
+
+    - name: Install packages
+      run: npm ci
+
+    - name: Run Tests
+      run: npm test --if-present
+
+    - name: Build app
+      run: npm run build
+
+    - name: Archive Release
+      uses: thedoctor0/zip-release@main
+      with:
+        type: 'zip'
+        directory: 'www'
+        filename: ${{ env.GIT_TAG_NAME }}.zip
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@main
+      with:
+        name: github-pages
+        path: ${{ env.GIT_TAG_NAME }}.zip
+        retention-days: ${{ inputs.retention-days }}
+
+  # Create Release
+  release:
+    runs-on: ubuntu-latest
+    needs: [build]
+
+    steps:
+    - name: Download build
+      uses: actions/download-artifact@v3
+      with:
+        name: github-pages
+
+    - name: Create release
+      uses: marvinpinto/action-automatic-releases@latest
+      with:
+        repo_token: ${{ secrets.GITHUB_TOKEN }}
+        prerelease: false
+        files: |
+          ${{ env.GIT_TAG_NAME }}.zip
+
+  # Deploy on GitHub Pages
+  GitHubPages:
+
+    runs-on: ubuntu-latest
+    needs: [build]
+
+    steps:
+    - name: Download build
+      uses: actions/download-artifact@v3
+      with:
+        name: github-pages
+
+    - name: Unzip Data
+      uses: montudor/action-zip@v1
+      with:
+        args: unzip -qq ${{ env.GIT_TAG_NAME }}.zip -d www
+
+    - name: Deploy 🚀
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        folder: www

.github/workflows/validate_pr.yml

@@ -0,0 +1,31 @@
+# Validate the PR to the Sprint branches
+
+name: Check PR for valid code
+
+on:
+  pull_request:
+    branches:
+    - main
+    - '*Sprint*'
+  workflow_call:
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - 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 lint-check-all
+    - run: npm run prettier-check-all
+    - run: npm run build --if-present
+    - run: npm test --if-present

.gitignore

@@ -0,0 +1,42 @@
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Misc
+.DS_Store
+Thumbs.db
+
+
+
+
+
+# Production build
+www/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run check-staged

.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "src/**/*.{js,jsx,json,css,html}": [
+    "prettier --write"
+  ]
+}

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore fonts
+src/fonts

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "printWidth": 120,
+    "trailingComma": "all",
+    "useTabs": false,
+    "tabWidth": 2,
+    "semi": true,
+    "arrowParens": "avoid"
+}

CodingGuidelines.md

@@ -0,0 +1,54 @@
+# Coding Guidelines - React Typescript
+
+## Names
+1. Do not use "_" as a prefix for private properties.
+2. Use whole words in names when possible.
+3. Give folders/files/components/functions unique names.
+
+Style | Category
+--- | ---
+PascalCase | class / enum / decorator / component files
+camelCase | variable / parameter / function / method / property / module alias / folder names + non-component files
+CONSTANT_CASE | global constant values (declared on module level; if the value can be instantiated more than once it must use camelCase) 
+
+## Components
+1. 1 file per logical component.
+2. Filename should match the component name.
+
+## `null` and `undefined`
+1. Use **undefined**. Do not use null.
+
+## Comments
+1. Use JSDoc-style comments (`/** JSDoc */`) for functions, interfaces, enums, and classes.
+   1. Specify all function attribute/parameter types
+   2. Only specify function attributes/parameters with text if they are not self-explanatory.
+2. Use single line comments (`// line comment`) for implementation comments.
+3. Write comments only if they add value. Do not comment for the sake of commenting.
+   > What comments are needed so that another developer understands the code?<br/>
+   > Keep in mind: The comments are the projects documentation. If the code is not self-explanatory, it should be refactored/commented. 
+
+## Style
+1. Use arrow functions over anonymous function expressions.
+2. Only surround arrow function parameters when necessary.<br/>
+   For example, `(x) => x + x` is wrong but the following are correct:
+   1. `x => x + x`
+   2. `(x, y) => x + y`
+   3. `<T>(x: T, y: T) => x === y`
+3. Always surround loop and conditional bodies with curly braces. Statements on the same line are allowed to omit braces.
+4. Open curly braces always go on the **same line** as whatever necessitates them.
+5. Use a single declaration per variable statement (i.e. use `var x = 1; var y = 2;` over `var x = 1, y = 2;`).
+6. Separate function from the JSX if it takes more than one line (i.e. button click).
+7. Do not use inline styles. Use separate CSS files instead.
+8. Use 2 spaces for indentation.
+   > VSCode: *View* -> *Command Palette...* -> *"Indent Using Spaces"* ->  **2**
+
+## Structure within components
+1. Imports - Prefer destructuring over importing the whole module.
+2. Additional variables
+3. Component/Class
+   1. Optional constructor
+      > Only use constructor if you need to set initial state or bind methods. JavaScript will automatically create an empty constructor for you.
+   2. Definitions
+   3. Functions
+   4. Additional destructors
+4. Exports