feat(web-ux): add web-ux

.github/codeql/codeql-web-ux-config.yml

@@ -0,0 +1,4 @@
+name: "CodeQL web-ux config"
+
+paths:
+  - code/web-ux

.github/workflows/build-web-ux.yaml

@@ -0,0 +1,90 @@
+name: build web-ux
+
+on:
+  push:
+    branches:
+    - main
+  pull_request:
+    branches:
+    - main
+  workflow_dispatch:
+jobs:
+  prepare:
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip: ${{ steps.skip_check.outputs.should_skip }}
+    steps:
+      - id: skip_check
+        uses: fkirc/[email protected]
+        with:
+          paths: '["code/web-ux/**", ".github/workflows/build-web-ux.yaml"]'
+          cancel_others: 'true'
+          do_not_skip: '["workflow_dispatch", "push"]'
+  semantic-release:
+    needs: prepare
+    if: ${{ needs.prepare.outputs.should_skip != 'true' }}
+    runs-on: ubuntu-latest
+    concurrency: 
+      group: ci-${{ github.ref }}
+      cancel-in-progress: false
+    outputs:
+      new_release_published: ${{ steps.release.outputs.new_release_published }}
+      new_release_version: ${{ steps.release.outputs.new_release_version }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Semantic Release web-ux
+        id: release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          working_directory: code/web-ux
+          semantic_version: 18
+          dry_run: false
+          extra_plugins: |
+            @semantic-release/[email protected]
+            @semantic-release/[email protected]
+            @semantic-release/[email protected]
+            @semantic-release/[email protected]
+            @semantic-release/[email protected]
+          extends: |
+            semantic-release-monorepo
+        env:
+          GH_TOKEN: ${{ secrets.PAT_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  build-web-ux:
+    needs: 
+      - prepare
+      - semantic-release
+    if: ${{ needs.prepare.outputs.should_skip != 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: javascript
+          config-file: .github/codeql/codeql-web-ux-config.yml
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Build
+        working-directory: code/web-ux
+        run: make build  
+      - name: Login to DockerHub
+        if: ${{ needs.semantic-release.outputs.new_release_published == 'true' }}
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Push
+        if: ${{ needs.semantic-release.outputs.new_release_published == 'true' }}
+        working-directory: code/web-ux
+        run: make push VERSION=${{ needs.semantic-release.outputs.new_release_version }}
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
+        with:
+          category: "ara_web-ux"

code/web-ux/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  env: {
+    "vue/setup-compiler-macros": true,
+    node: true,
+  },
+};

code/web-ux/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

code/web-ux/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
+}

code/web-ux/Dockerfile

@@ -0,0 +1,20 @@
+# STAGE 1 : build
+FROM node:16 as builder
+
+WORKDIR /usr/src/app
+
+COPY . ./
+
+RUN npm ci
+
+RUN npm run build
+
+# STAGE 2 : serve
+
+FROM nginx:1.20.2
+
+ENV PORT 7000
+EXPOSE ${PORT}
+
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+COPY config/default.conf.template /etc/nginx/templates/default.conf.template

code/web-ux/Makefile

@@ -0,0 +1,46 @@
+#####################################
+##            VARIABLES            ##
+#####################################
+
+NODE_VERSION=16
+FULL_IMAGE?=decathlon/ara-web-ux
+VERSION?=$(shell make -s get-version)
+
+#####################################
+##             DEVELOP             ##
+#####################################
+
+# WITH NODE
+
+npm-install: ## DEV - install project
+	@npm install
+
+npm-run: ## DEV - run web-ui
+	@npm run dev
+
+#####################################
+##             PACKAGE             ##
+#####################################
+
+build: ## Build docker image
+	@docker build -t $(FULL_IMAGE) .
+
+push: ## Push docker image. You can use VERSION to specify one.
+	@docker image tag $(FULL_IMAGE) $(FULL_IMAGE):$(VERSION)
+	@docker image push $(FULL_IMAGE):$(VERSION)
+
+#####################################
+##              UTILS              ##
+#####################################
+
+get-version: ## Get component version
+	@cat package.json | jq -r '.version'
+
+update-version: ## Update component version
+	@npm version $(VERSION)
+
+.PHONY: help
+help:
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+.DEFAULT_GOAL := help

code/web-ux/README.md

@@ -0,0 +1,41 @@
+# arav2
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

code/web-ux/config/default.conf.template

@@ -0,0 +1,45 @@
+server {
+    listen       $PORT;
+    server_name  localhost;
+
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}

code/web-ux/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./src/assets/img/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ara</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>