diff --git a/.github/workflows/chromatic-deploy.yml b/.github/workflows/chromatic-deploy.yml
new file mode 100644
index 0000000..81ec60a
--- /dev/null
+++ b/.github/workflows/chromatic-deploy.yml
@@ -0,0 +1,39 @@
+name: Chromatic Deploy
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+
+concurrency:
+ group: ${{ github.workflow }}-${{ github.ref }}
+ cancel-in-progress: true
+
+permissions:
+ actions: write
+ contents: read
+
+jobs:
+ changed-files:
+ runs-on: ubuntu-latest
+ name: Check UI Changes
+ outputs:
+ all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
+ any_changed: ${{ steps.changed-files.outputs.any_changed }}
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+ - name: Get changed files
+ id: changed-files
+ uses: tj-actions/changed-files@v44
+ with:
+ files: |
+ dashboard/**
+ chromatic:
+ name: Visual tests
+ needs: [changed-files]
+ if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
+ uses: ./.github/workflows/chromatic.yml
+ secrets: inherit
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 0000000..ad157d2
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,74 @@
+name: Chromatic
+
+on: workflow_call
+
+concurrency:
+ group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+ cancel-in-progress: true
+
+permissions:
+ pull-requests: write
+ actions: write
+ contents: read
+
+jobs:
+ chromatic:
+ name: Chromatic
+ runs-on: ubuntu-latest
+ env:
+ CI: true
+ defaults:
+ run:
+ working-directory: ./dashboard
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+
+ - uses: pnpm/action-setup@v3
+ name: Install pnpm
+ with:
+ version: 8
+ run_install: false
+ - name: Get pnpm store directory
+ shell: bash
+ run: |
+ echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+ - uses: actions/cache@v3
+ name: Setup pnpm cache
+ with:
+ path: ${{ env.STORE_PATH }}
+ key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-pnpm-store-
+
+ - name: 📥 Install deps
+ run: pnpm install
+
+ - name: Build Storybook
+ run: pnpm run build-storybook
+
+ - name: âš¡ Run chromatic
+ uses: chromaui/action@latest
+ id: chromatic
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+ exitZeroOnChanges: true
+ workingDir: ./dashboard
+ autoAcceptChanges: "main"
+ exitOnceUploaded: true
+ onlyChanged: true
+ skip: "@(renovate/**|dependabot/**)"
+ zip: true
+
+ - name: Publish Chromatic Action Summary
+ run: echo -e "| Results | |\n| --- | --- |\n| Build Results | ${{steps.chromatic.outputs.buildUrl}} |\n| Storybook Preview | ${{steps.chromatic.outputs.storybookUrl}} |\n| Component Count | ${{steps.chromatic.outputs.componentCount}} |" >> $GITHUB_STEP_SUMMARY
+
+ - name: Publish Chromatic Link in the comments
+ uses: dannyhw/storybook-chromatic-link-comment@v0.11
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ review-url: ${{ steps.chromatic.outputs.url }}
+ build-url: ${{ steps.chromatic.outputs.buildUrl }}
+ storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
diff --git a/.github/workflows/dashboard-ci.yml b/.github/workflows/dashboard-ci.yml
index 27e6786..6951716 100644
--- a/.github/workflows/dashboard-ci.yml
+++ b/.github/workflows/dashboard-ci.yml
@@ -1,13 +1,47 @@
name: Dashboard CI
on:
-
push:
branches: [ "master" ]
pull_request:
jobs:
+ lint:
+ env:
+ VITE_BASE_API: /api/
+ runs-on: ubuntu-latest
+ defaults:
+ run:
+ working-directory: ./dashboard
+ steps:
+ - uses: actions/checkout@v4
+
+ - uses: pnpm/action-setup@v3
+ name: Install pnpm
+ with:
+ version: 8
+ run_install: false
+ - name: Get pnpm store directory
+ shell: bash
+ run: |
+ echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+ - uses: actions/cache@v3
+ name: Setup pnpm cache
+ with:
+ path: ${{ env.STORE_PATH }}
+ key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-pnpm-store-
+
+ - name: 📥 Install deps
+ run: pnpm install
+
+ - name: Lint Dashboard
+ run: pnpm lint
+
build:
+ needs: [lint]
env:
VITE_BASE_API: /api/
runs-on: ubuntu-latest
@@ -15,40 +49,34 @@ jobs:
run:
working-directory: ./dashboard
steps:
- - uses: actions/checkout@v4
-
- - uses: pnpm/action-setup@v3
- name: Install pnpm
- with:
- version: 8
- run_install: false
- - name: Get pnpm store directory
- shell: bash
- run: |
- echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
- - uses: actions/cache@v3
- name: Setup pnpm cache
- with:
- path: ${{ env.STORE_PATH }}
- key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
- restore-keys: |
- ${{ runner.os }}-pnpm-store-
-
- - name: Install dependencies
- run: pnpm install
-
- - name: Lint Dashboard
- run: pnpm lint
-
- - name: Build Dashboard
- run: pnpm build --base '/dashboard/'
-
- - name: Unit Test Dashboard
- run: pnpm test
-
- - name: Upload a Build Artifact
- uses: actions/upload-artifact@v4.2.0
- with:
- name: artifact
- path: dashboard/dist
+ - uses: actions/checkout@v4
+
+ - uses: pnpm/action-setup@v3
+ name: Install pnpm
+ with:
+ version: 8
+ run_install: false
+ - name: Get pnpm store directory
+ shell: bash
+ run: |
+ echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+ - uses: actions/cache@v3
+ name: Setup pnpm cache
+ with:
+ path: ${{ env.STORE_PATH }}
+ key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-pnpm-store-
+
+ - name: 📥 Install deps
+ run: pnpm install
+
+ - name: Build Dashboard
+ run: pnpm build --base '/dashboard/'
+
+ - name: Upload a Build Artifact
+ uses: actions/upload-artifact@v4.2.0
+ with:
+ name: artifact
+ path: dashboard/dist
diff --git a/dashboard/.eslintrc.cjs b/dashboard/.eslintrc.cjs
index 93e874c..7a02611 100644
--- a/dashboard/.eslintrc.cjs
+++ b/dashboard/.eslintrc.cjs
@@ -1,11 +1,7 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:react-hooks/recommended',
- ],
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
diff --git a/dashboard/.gitignore b/dashboard/.gitignore
index a547bf3..bc6d306 100644
--- a/dashboard/.gitignore
+++ b/dashboard/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+*storybook.log
\ No newline at end of file
diff --git a/dashboard/.storybook/main.ts b/dashboard/.storybook/main.ts
new file mode 100644
index 0000000..388da08
--- /dev/null
+++ b/dashboard/.storybook/main.ts
@@ -0,0 +1,21 @@
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+ stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+ addons: [
+ "@storybook/addon-onboarding",
+ "@storybook/addon-links",
+ "@storybook/addon-essentials",
+ "@chromatic-com/storybook",
+ "@storybook/addon-interactions",
+ ],
+ staticDirs: ["../public", "../src/assets"],
+
+ framework: {
+ name: "@storybook/react-vite",
+ options: {},
+ },
+};
+
+export default config;
diff --git a/dashboard/.storybook/preview.tsx b/dashboard/.storybook/preview.tsx
new file mode 100644
index 0000000..0b4515d
--- /dev/null
+++ b/dashboard/.storybook/preview.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { TooltipProvider } from "../src/components";
+import { ThemeProvider } from "../src/features/theme-switch";
+import { queryClient } from "../src/utils";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { I18nextProvider } from "react-i18next";
+import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import i18n from "../src/features/i18n";
+
+import "./../src/globals.css";
+
+const preview: Preview = {
+ decorators: [
+ (Story) => (
+