feat(frontend): stylelint & workflow build storybook

.github/file-filters.yml

@@ -10,4 +10,8 @@ frontend-test-build-code: &frontend-test-build-code
   - '**/*'
 
 frontend-test-build-docs: &frontend-test-build-docs
-  - '**/*.md'
+  - '**/*.md'
+  - '.vuepress/'
+
+frontend-test-build-storybook: &frontend-test-build-storybook
+  - '**/*'

.github/workflows/deploy.docs.yml → .github/workflows/frontend.deploy.docs.yml

@@ -1,4 +1,4 @@
-name: "deploy:docs to github"
+name: "frontend:deploy:docs to github"
 on:
   push:
     branches:

.github/workflows/test.build.code.yml → .github/workflows/frontend.test.build.code.yml

@@ -1,4 +1,4 @@
-name: "test:build test code"
+name: "frontend:test:build test code"
 
 on: push
 

.github/workflows/test.build.docs.yml → .github/workflows/frontend.test.build.docs.yml

@@ -1,4 +1,4 @@
-name: "test:build test docs"
+name: "frontend:test:build test docs"
 
 on: push
 
@@ -30,5 +30,5 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Frontend | Build
+      - name: Frontend | Build Docs
         run: npm install && npm run docs:build

.github/workflows/frontend.test.build.storybook.yml

@@ -0,0 +1,34 @@
+name: "frontend:test:build test storybook"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here
+  files-changed:
+    name: Detect File Changes - frontend-test-build-storybook
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-build-storybook }}
+    steps:
+      - uses: actions/checkout@v3.3.0
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v2.11.1
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  storybook:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build Storybook - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Frontend | Build Storybook
+        run: npm install && npm run storybook:build

.github/workflows/test.lint.code.yml → .github/workflows/frontend.test.lint.code.yml

@@ -1,4 +1,4 @@
-name: "test:lint code with defined linters"
+name: "frontend:test:lint code with defined linters"
 
 on: push
 

.github/workflows/test.unit.code.yml → .github/workflows/frontend.test.unit.code.yml

@@ -1,4 +1,4 @@
-name: "test:unit test code with defined suites"
+name: "frontend:test:unit test code with defined suites"
 
 on: push
 

.github/workflows/test.lint.pr.yml

@@ -9,7 +9,7 @@ on:
 
 permissions:
   pull-requests: write
-  actions: write
+  statuses: write
 
 jobs:
   main:
@@ -29,6 +29,7 @@ jobs:
           # Configure which scopes are allowed (newline delimited).
           # Append a scope for each service here
           scopes: |
+            frontend
             docker
             release
             workflow

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue",
+        "stylelint-config-recess-order",
+        "stylelint-config-css-modules"
+    ]
+}

README.md

@@ -9,6 +9,7 @@
 [![vue-i18n][badge-vue-i18n-img]][badge-vue-i18n-href]
 [![eslint][badge-eslint-img]][badge-eslint-href]
 [![remark-cli][badge-remark-cli-img]][badge-remark-cli-href]
+[![stylelint][badge-stylelint-img]][badge-stylelint-href]
 [![vitest][badge-vitest-img]][badge-vitest-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
 [![vuepress][badge-vuepress-img]][badge-vuepress-href]
@@ -21,7 +22,7 @@ To be able to build this project you need `nodejs`, `npm` and optional `docker`.
 
 The project uses `vite` as builder, `vike` to do the SSR. The design framework is `vuetify` which requires the frontend framework `vue3`. For localization `vue-i18n` is used; Session storage is handled with `pinia`.
 
-Testing is done with `vitest` and code style is enforced with `eslint` and `remark-cli`.
+Testing is done with `vitest` and code style is enforced with `eslint`, `remark-cli` and `stylelint`.
 
 This projects utilizes `storybook` to develop frontend components and `vuepress` for static documentation generation.
 
@@ -41,6 +42,7 @@ The following commands are available:
 | `npm run test:lint`        | Run all linters                                 |
 | `npm run test:lint:eslint` | Run linter eslint                               |
 | `npm run test:lint:remark` | Run linter remark                               |
+| `npm run test:lint:style`  | Run linter stylelint                            |
 | `npm run test:unit`        | Run all unit tests and generate coverage report |
 | `npm run test:unit:dev`    | Run all unit tests in watch mode                |
 | `npm test`                 | Run all tests & linters                         |
@@ -122,6 +124,9 @@ Currently none
 [badge-remark-cli-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies%5B%27remark-cli%27%5D&label=remark-cli&color=yellow
 [badge-remark-cli-href]: https://remark.js.org/
 
+[badge-stylelint-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.stylelint&label=stylelint&color=yellow
+[badge-stylelint-href]: https://stylelint.io/
+
 [badge-vitest-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vitest&label=vitest&color=yellow
 [badge-vitest-href]: https://vitest.dev/