Feature: Mobile - Added main tool chain for the new tech stack (with vite as the build tool).

Added Vite with the `vite_rails` ruby gem: `bundle install`, `bundle exec vite install` and vite.config.ts
Added Vue.js: `yarn add vue@next vue-router@next` and `yarn add -D @vitejs/plugin-vue`.
Added Typescript: `yarn add -D typescript vue-tsc` and `tsconfig.json`.
Added Prettier: `yarn add -D prettier --exact` and `.prettierrc.json`.
Added ESLint and ESLint-Plugins: `yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue eslint-plugin-prettier-vue` and `.eslintrc.js`.
Added Jest: `yarn add -D jest @types/jest @vue/test-utils eslint-plugin-jest jest-serializer-vue jest-transform-stub ts-jest @vue/vue3-jest` and `jest.config.js`.
Added TailwindCSS: `yarn add -D tailwindcss@next @tailwindcss/forms@next postcss autoprefixer` and `npx tailwindcss init -p`
Added GraphQL for the frontend: `yarn add @vue/apollo-option @apollo/client @vue/apollo-composable graphql-ruby-client`
Added GraphQL for the backend: `gem 'graphql'` and `gem 'graphql-batch', require: 'graphql/batch'`
Added Actioncable: `yarn add actioncable`
Adding GraphQL Code-Generator: `yarn add -D @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-vue-apollo`

.eslintrc.js

@@ -0,0 +1,80 @@
+const path = require('path')
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    jest: true,
+    node: true,
+  },
+  plugins: ['@typescript-eslint', 'vue', 'prettier', 'jest'],
+  extends: [
+    'airbnb-base',
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+    '@vue/prettier',
+    '@vue/typescript/recommended',
+    '@vue/prettier/@typescript-eslint',
+    'prettier',
+  ],
+  rules: {
+    'vue/script-setup-uses-vars': 'error',
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['vite.config.ts', 'app/frontend/tests/**/*'] },
+    ],
+    // Adding typescript file types, because airbnb doesn't allow this by default.
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        mjs: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+  ],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@mobile', path.resolve(__dirname, './app/frontend/apps/mobile')],
+          ['@common', path.resolve(__dirname, './app/frontend/common')],
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      },
+    },
+    // Adding typescript file types, because airbnb doesn't allow this by default.
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser', // the typescript-parser for eslint, instead of tslint
+    sourceType: 'module', // allow the use of imports statements
+    ecmaVersion: 2020, // allow the parsing of modern ecmascript
+  },
+}

.gitignore

@@ -41,9 +41,6 @@
 /config/locales-*.yml
 /config/translations/*.yml
 
-# NPM / Yarn
-/node_modules
-
 # logfiles and tempfiles
 /log
 /public/assets/*.*
@@ -88,3 +85,14 @@
 
 # Backup files
 *~
+
+# ESLint
+.eslintcache
+
+# Vite Ruby
+yarn-error.log
+/public/vite
+/public/vite-dev
+/public/vite-test
+/node_modules
+

.gitlab-ci.yml

@@ -6,6 +6,7 @@ include:
   - local: '/.gitlab/ci/pre.yml'
   - local: '/.gitlab/ci/integration.yml'
   - local: '/.gitlab/ci/rspec.yml'
+  - local: '/.gitlab/ci/jest.yml'
   - local: '/.gitlab/ci/unit.yml'
   - local: '/.gitlab/ci/browser-core.yml'
   - local: '/.gitlab/ci/browser-integration.yml'

.gitlab/ci/jest.yml

@@ -0,0 +1,9 @@
+jest:
+  stage: test
+  extends:
+    - .env_base
+  before_script:
+    - source /opt/rh/rh-nodejs12/enable
+    - yarn install
+  script:
+    - yarn test

.graphql_code_generator.yml

@@ -0,0 +1,18 @@
+# TODO:
+# overwrite: true
+# schema:
+#   - http://localhost:3000/graphql:
+#       headers:
+#         SkipAuthenticityTokenCheck: 'true'
+# documents: 'app/frontend/apps/mobile/graphql/**/*.graphql'
+# generates:
+#   ./app/frontend/apps/mobile/graphql/api.ts:
+#     plugins:
+#       - typescript
+#       - typescript-operations
+#       - typescript-vue-apollo
+#     config:
+#       vueCompositionApiImportFrom: vue
+#   ./app/frontend/apps/mobile/graphql/schema.json:
+#     plugins:
+#       - 'introspection'

.stylelintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: ['stylelint-prettier/recommended'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['extends', 'tailwind'],
+      },
+    ],
+  },
+}

Gemfile

@@ -42,6 +42,10 @@ gem 'aasm'
 # core - authorization
 gem 'pundit'
 
+# core - graphql handling
+gem 'graphql'
+gem 'graphql-batch', require: 'graphql/batch'
+
 # core - image processing
 gem 'rszr'
 
@@ -51,6 +55,9 @@ gem 'dalli', require: false
 # Only load gems for asset compilation if they are needed to avoid
 #   having unneeded runtime dependencies like NodeJS.
 group :assets do
+  # asset handling - frontend tool chain
+  gem 'vite_rails'
+
   # asset handling - javascript execution for e.g. linux
   gem 'execjs', require: false
 

Gemfile.lock

@@ -168,6 +168,7 @@ GEM
     doorkeeper (5.5.4)
       railties (>= 5)
     dotenv (2.7.6)
+    dry-cli (0.7.0)
     eco (1.0.0)
       coffee-script
       eco-source
@@ -222,6 +223,10 @@ GEM
       activesupport (>= 5.0)
     gmail_xoauth (0.4.2)
       oauth (>= 0.3.6)
+    graphql (1.12.17)
+    graphql-batch (0.4.3)
+      graphql (>= 1.3, < 2)
+      promise.rb (~> 0.7.2)
     guard (2.18.0)
       formatador (>= 0.2.4)
       listen (>= 2.7, < 4.0)
@@ -377,6 +382,7 @@ GEM
       ast (~> 2.4.1)
     pg (1.2.3)
     power_assert (2.0.1)
+    promise.rb (0.7.4)
     pry (0.14.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -404,6 +410,8 @@ GEM
       rack (>= 1.0, < 3)
     rack-livereload (0.3.17)
       rack
+    rack-proxy (0.7.0)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.1.5.1)
@@ -580,6 +588,13 @@ GEM
       logging
       nokogiri
       rubyntlm
+    vite_rails (3.0.0)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0)
+    vite_ruby (3.0.0)
+      dry-cli (~> 0.7.0)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     webmock (3.14.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -636,6 +651,8 @@ DEPENDENCIES
   factory_bot_rails
   faker
   gmail_xoauth
+  graphql
+  graphql-batch
   guard
   guard-livereload
   guard-symlink
@@ -707,6 +724,7 @@ DEPENDENCIES
   valid_email2
   vcr
   viewpoint
+  vite_rails
   webmock
   writeexcel
   zendesk_api

Procfile.dev

@@ -0,0 +1,3 @@
+vite: bin/vite dev
+web: bundle exec script/rails server -b ${ZAMMAD_BIND_IP:=127.0.0.1} -p ${ZAMMAD_RAILS_PORT:=3000}
+worker: bundle exec script/scheduler.rb start -t

app/controllers/mobile_controller.rb

@@ -0,0 +1,7 @@
+# Copyright (C) 2012-2021 Zammad Foundation, http://zammad-foundation.org/
+
+class MobileController < ApplicationController
+  def index
+    render(layout: 'layouts/mobile')
+  end
+end