From bd84946ab3aec0e0c92f3c7be3a77718f5f1f119 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Sat, 2 Nov 2024 23:14:50 +0200
Subject: [PATCH] feat: added client workflows for docs and release
 [WTEL-5425](https://webitel.atlassian.net/browse/WTEL-5425)

---
 .github/workflows/main.yml      |  93 +++++++++++++++++--
 .github/workflows/release.yml   | 160 ++++++++++++++++++++++++++++++++
 docs/.vitepress/theme/style.css | 139 +++++++++++++++++++++++++++
 docs/index.md                   |  46 +++++++++
 4 files changed, 428 insertions(+), 10 deletions(-)
 create mode 100644 .github/workflows/release.yml
 create mode 100644 docs/.vitepress/theme/style.css
 create mode 100644 docs/index.md

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 1c47418df..fb9a2a2cc 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,20 +1,93 @@
-name: Admin CI
+# NOTES:
+# generating changelog for release is performed twice because first changelog generates for release notes,
+# so it runs before release step, and second changelog generates for updating CHANGELOG.md file, so it runs after release step.
+# if i'd try to generate changelog once, changes will be marked as "master" branch changes, cause there's no new tag yet.
+
+name: webitel ui tests and docs
 
 on:
   push:
     branches: [ master ]
-  pull_request:
-    branches: [ master ]
 
 jobs:
+  install_deps:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache_node_modules
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        if: steps.cache_node_modules.outputs.cache-hit != 'true'
+        run: npm ci
+
   test:
+    needs: [install_deps]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: npm run test:unit
+
+  build_docs:
+    needs: [test]
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
+      - name: Build docs
+        run: npm run docs:build
+
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          name: docs
+          path: docs/.vitepress/dist
+
+  deploy:
+    needs: [build_docs]
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '18.x'
-    - run: npm ci
-    - run: npm run test:unit
+      - name: setup Github Pages
+        id: setup_pages
+        uses: actions/configure-pages@v4
+
+      - name: deploy to Github Pages
+        id: deploy_pages
+        uses: actions/deploy-pages@v4
+        with:
+          artifact_name: docs
+
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..a7626a898
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,160 @@
+# NOTES:
+# generating changelog for release is performed twice because first changelog generates for release notes,
+# so it runs before release step, and second changelog generates for updating CHANGELOG.md file, so it runs after release step.
+# if i'd try to generate changelog once, changes will be marked as "master" branch changes, cause there's no new tag yet.
+
+name: webitel ui release
+
+on:
+  push:
+    branches: [ release ]
+
+jobs:
+  install_deps:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        id: cache_node_modules
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        if: steps.cache_node_modules.outputs.cache-hit != 'true'
+        run: npm ci
+
+  test:
+    needs: [install_deps]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: npm run test:unit
+
+  release:
+    needs: [install_deps, test]
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: get prevTag
+        id: prevTag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+
+      # for release notes // why 2 changelogs? see NOTES
+      - name: generate Release Changelog
+        id: changelog
+        uses: requarks/changelog-action@v1
+        continue-on-error: true
+        with:
+          writeToFile: false
+          reverseOrder: true
+          excludeTypes: []
+          token: ${{ github.token }}
+          fromTag: ${{ github.ref_name }}
+          toTag: ${{ steps.prevTag.outputs.tag }}
+
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
+
+      - name: Create release
+        id: create_release
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: "v${{ steps.package-version.outputs.current-version}}"
+          name: "@webitel/client v${{ steps.package-version.outputs.current-version}}"
+          body: ${{ steps.changelog.outputs.changes }}
+
+      # update tags list after prev step release, so that we fetch new tag, created by prev step
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: get newTag
+        id: newTag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+
+      # update CHANGELOG.md file // why 2 changelogs? see NOTES
+      - name: update Release Changelog
+        id: update-changelog
+        uses: requarks/changelog-action@v1
+        continue-on-error: true
+        with:
+          reverseOrder: true
+          excludeTypes: build
+          token: ${{ github.token }}
+          fromTag: ${{ steps.newTag.outputs.tag }}
+          toTag: ${{ steps.prevTag.outputs.tag }}
+
+      - name: commit changelog
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: autoupdate changelog
+          file_pattern: 'CHANGELOG.md'
+          push_options: --force
+
+  build_docs:
+    needs: [release]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Build docs
+        run: npm run docs:build
+
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          name: docs
+          path: docs/.vitepress/dist
+
+  deploy:
+    needs: [build_docs]
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    runs-on: ubuntu-latest
+    steps:
+      - name: setup Github Pages
+        id: setup_pages
+        uses: actions/configure-pages@v4
+
+      - name: deploy to Github Pages
+        id: deploy_pages
+        uses: actions/deploy-pages@v4
+        with:
+          artifact_name: docs
+
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
new file mode 100644
index 000000000..22ed8c53a
--- /dev/null
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,139 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..2559704bc
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,46 @@
+---
+layout: home
+
+hero:
+  name: Webitel Admin Docs
+
+  text: Дока по адмінці.
+
+#  tagline: Як вам не сподобається картінка справа, то запропонуйте будь ласка нову.
+
+#  image:
+#    src: /logo.png
+#    alt: VitePress
+
+  actions:
+
+    - theme: brand
+      text: Старт
+      link: /pages/docs/faq/faq/Readme
+
+    - theme: alt
+      text: Сорси
+      link: https://github.com/webitel/client
+
+    - theme: alt
+      text: Сорси доків
+      link: https://github.com/webitel/client/tree/master/docs
+
+    - theme: brand
+      text: не тицять!!
+      link: https://www.youtube.com/watch?v=aONT12VVlvE&ab_channel=LILRUSYA
+
+# https://vitepress.dev/reference/default-theme-home-page#features-section 
+features:
+
+  - icon: 🛠️
+    title: TODO
+
+
+  - icon: 🛠️
+    title: TODO
+
+
+  - icon: 🛠️
+    title: TODO
+---