feat(ui): new dashboard strutcure (#1123)

.github/workflows/pr-go.yaml

@@ -6,7 +6,7 @@ on:
  branches:
  - main
  paths-ignore:
- - "ui/web-v2/**"
+ - "ui/**"
  - "**/**.md"
 
 concurrency:

.github/workflows/pr-ui-dashboard.yaml

@@ -0,0 +1,98 @@
+name: pr-ui-dashboard
+
+on:
+ pull_request:
+ branches:
+ - main
+ paths:
+ - "ui/dashboard/**"
+ - "!**/**.md"
+
+concurrency:
+ group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+ cancel-in-progress: true
+
+env:
+ NODE_VERSION: "22.1"
+ WEB_DIRECTORY: "ui/dashboard"
+
+jobs:
+ install-dependencies:
+ defaults:
+ run:
+ working-directory: ${{ env.WEB_DIRECTORY }}
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE_VERSION }}
+ - name: Set yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v4
+ id: yarn-cache
+ with:
+ path: |
+ **/node_modules
+ **/.eslintcache
+ ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+ - name: Install dependencies
+ run: yarn install
+
+ lint:
+ needs: install-dependencies
+ defaults:
+ run:
+ working-directory: ${{ env.WEB_DIRECTORY }}
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE_VERSION }}
+ - name: Set yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v4
+ id: yarn-cache
+ with:
+ path: |
+ **/node_modules
+ **/.eslintcache
+ ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+ - name: Lint
+ run: yarn style:all
+
+ build:
+ needs: install-dependencies
+ defaults:
+ run:
+ working-directory: ${{ env.WEB_DIRECTORY }}
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE_VERSION }}
+ - name: Set yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v4
+ id: yarn-cache
+ with:
+ path: |
+ **/node_modules
+ **/.eslintcache
+ ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+ - name: Build
+ run: yarn build

ui/dashboard/.env.example

@@ -0,0 +1,2 @@
+DEV_WEB_API_ENDPOINT=https://example.com
+DEV_AUTH_REDIRECT_ENDPOINT=http://localhost:8000

ui/dashboard/.gitignore

@@ -0,0 +1,36 @@
+# dependencies
+/node_modules
+dist
+dist-ssr
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.vscode/*
+.idea
+*.pem
+
+# logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# eslint
+.eslintcache
+

ui/dashboard/.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"

ui/dashboard/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+build
+*-lock.json

ui/dashboard/.prettierrc

@@ -0,0 +1,28 @@
+{
+ "plugins": [
+ "prettier-plugin-tailwindcss",
+ "@trivago/prettier-plugin-sort-imports"
+ ],
+ "trailingComma": "none",
+ "arrowParens": "avoid",
+ "singleQuote": true,
+ "useTabs": false,
+ "tabWidth": 2,
+ "semi": true,
+ "importOrder": [
+ "^react",
+ "^clsx$",
+ "<THIRD_PARTY_MODULES>",
+ "^tailwind(.*)$",
+ "^@types$",
+ "^@constants$",
+ "^utils(.*)$",
+ "^@icons$",
+ "^app(.*)$",
+ "^pages(.*)$",
+ "^components(.*)$",
+ "^elements(.*)$",
+ "^[./]"
+ ],
+ "importOrderSeparation": false
+}

ui/dashboard/README.md

@@ -0,0 +1,30 @@
+# Bucketeer Console
+
+## Overview
+
+This version is renew design and structures
+
+## Tech Stack
+
+- **Typescript** 5.x
+- **ReactJS** 18.x + Vite
+- **TailwindCSS**
+- **React-Router**
+- **TanStack-Query**
+- **RadixUI**
+- **React-i18next**
+
+## How to Install and Run
+
+1. Clone the repository locally.
+2. Run `yarn install`.
+3. Run `yarn start` for development mode.
+
+## Scripts
+
+- `yarn start`: Start the web app in development mode.
+- `yarn serve`: Start the web app in production mode.
+- `yarn build`: Build for production.
+- `yarn style:all`: Run type check, lint check, and prettier check on all files.
+- `yarn style:lint`: Run lint check on all files.
+- `yarn style:prettier`: Format all files with Prettier.

ui/dashboard/client.d.ts

@@ -0,0 +1,4 @@
+declare module 'unfonts.css' {
+ const content: string;
+ export default content;
+}

ui/dashboard/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ ignores: ['dist'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true }
+ ],
+ 'react-hooks/exhaustive-deps': 'off',
+ 'react-refresh/only-export-components': 'off'
+ }
+});

ui/dashboard/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" data-version="1.0.2">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" href="/favicon.ico" />
+ <title>Bucketeer Console</title>
+ </head>
+
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>

ui/dashboard/package.json

@@ -0,0 +1,78 @@
+{
+ "name": "dashboard",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "start": "vite --host",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview",
+ "style:all": "tsc && yarn run style:lint && yarn run style:prettier",
+ "style:lint": "tsc && eslint '**/src/**/*.{js,jsx,ts,tsx}' --fix",
+ "style:prettier": "prettier --check '**/*.{js,jsx,ts,tsx}'",
+ "make-pretty": "prettier --write '**/*.{js,jsx,ts,tsx}'",
+ "test": "react-scripts test --watchAll --coverage",
+ "eject": "react-scripts eject",
+ "svgo": "npx svgo -f src/@icons/customized-icons -o src/@icons/customized-icons & npx svgo -f src/@icons/sidebar-icons -o src/@icons/sidebar-icons & npx svgo -f src/@icons/special-icons -o src/@icons/special-icons"
+ },
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+ "src/**/*.{js,jsx,ts,tsx,css}": "prettier --write --ignore-unknown"
+ },
+ "dependencies": {
+ "@hookform/resolvers": "^3.9.0",
+ "@radix-ui/react-dialog": "^1.1.1",
+ "@radix-ui/react-popover": "^1.1.1",
+ "@radix-ui/react-scroll-area": "^1.1.0",
+ "@tailwindcss/forms": "^0.5.7",
+ "@testing-library/jest-dom": "^6.4.8",
+ "class-variance-authority": "^0.7.0",
+ "clsx": "^2.1.1",
+ "lodash": "^4.17.21",
+ "prettier": "^3.3.3",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-hook-form": "^7.52.2",
+ "react-icons-material-design": "^1.0.4",
+ "react-router-dom": "^6.26.0",
+ "tailwind-merge": "^2.4.0",
+ "web-vitals": "^4.2.3",
+ "zod": "^3.23.8"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.8.0",
+ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+ "@types/jest": "^29.5.12",
+ "@types/lodash": "^4.17.7",
+ "@types/node": "^22.1.0",
+ "@types/react": "^18.3.3",
+ "@types/react-dom": "^18.3.0",
+ "@typescript-eslint/eslint-plugin": "^8.0.1",
+ "@typescript-eslint/parser": "^8.0.1",
+ "@vitejs/plugin-react": "^4.3.1",
+ "autoprefixer": "^10.4.20",
+ "eslint": "^9.8.0",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-prettier": "^5.2.1",
+ "eslint-plugin-react": "^7.35.0",
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+ "eslint-plugin-react-refresh": "^0.4.9",
+ "eslint-plugin-tailwindcss": "^3.17.4",
+ "eslint-plugin-unused-imports": "^4.1.2",
+ "globals": "^15.9.0",
+ "husky": "^9.1.4",
+ "lint-staged": "^15.2.8",
+ "postcss": "^8.4.41",
+ "prettier-plugin-tailwindcss": "^0.6.5",
+ "string-width": "^4.2.0",
+ "string-width-cjs": "^5.1.1",
+ "svgo": "^3.3.2",
+ "tailwindcss": "^3.4.9",
+ "typescript": "^5.5.3",
+ "typescript-eslint": "^8.0.0",
+ "unplugin-fonts": "^1.1.1",
+ "vite": "^5.4.0",
+ "vite-plugin-svgr": "^4.2.0",
+ "vite-tsconfig-paths": "^5.0.1"
+ }
+}

ui/dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {}
+ }
+};

ui/dashboard/public/.htaccess

@@ -0,0 +1,10 @@
+RewriteEngine On
+# If an existing asset or directory is requested go to it as it is
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+RewriteRule ^ - [L]
+
+# If the requested resource doesn't exist, use index.html
+RewriteRule ^ /index.html
+
+