refactor: migrate docs-dev from storybook to vitepress config and update devcontainer configuration
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1,95 @@
|
||||
# Monorepo Architecture Overview
|
||||
|
||||
## π Repository Structure
|
||||
|
||||
The monorepo is organized into **Apps** (deployable applications) and **Packages** (shared libraries).
|
||||
|
||||
```text
|
||||
.
|
||||
βββ apps/
|
||||
β βββ web/ # Main React Application (Vite + TypeScript)
|
||||
β βββ landing/ # Public Promotional SPA (Vite + TypeScript)
|
||||
β βββ desktop/ # Electron Desktop Wrapper (electron-vite)
|
||||
β βββ docs-dev/ # Component Documentation & Playground (VitePress)
|
||||
β
|
||||
βββ packages/
|
||||
β βββ core-api/ # Shared HTTP Client, Observability & Data Services Engine
|
||||
β βββ core-storage/ # Enterprise Storage Engine (IndexedDB/localStorage + Encryption)
|
||||
β βββ core-i18n/ # Enterprise Internationalization Architecture
|
||||
β βββ ui/ # Shared UI Component Library
|
||||
β βββ utils/ # Shared Utilities (Date, Encryption, Core Logic, etc)
|
||||
β βββ configs/ # Shared Tooling Configurations
|
||||
β βββ eslint/ # Shared ESLint rules
|
||||
β βββ typescript/ # Shared TypeScript (tsconfig) bases
|
||||
β
|
||||
βββ package.json # Root scripts and dependencies
|
||||
βββ pnpm-workspace.yaml # pnpm workspace definition
|
||||
βββ turbo.json # Turborepo pipeline configuration
|
||||
```
|
||||
|
||||
## π¦ Packages Overview
|
||||
|
||||
### 1. `apps/web`
|
||||
The main consumer-facing application.
|
||||
* Imports business logic from `@repo/utils`
|
||||
* Uses shared UI components from `@repo/ui`
|
||||
|
||||
**Tech Stack**: React, Vite, TypeScript, Tailwind CSS
|
||||
|
||||
### 2. `apps/desktop`
|
||||
The **Electron desktop wrapper** that embeds `apps/web` for native desktop experiences.
|
||||
* In **development**: loads the Vite dev server with full hot reload
|
||||
* In **production**: serves the static web build via a secure custom `app://` protocol
|
||||
* Configurable target app via `.env` (can wrap `apps/web`, `apps/docs-dev`, or any future app)
|
||||
|
||||
**Tech Stack**: Electron 33.x, electron-vite, electron-builder, electron-updater
|
||||
|
||||
### 3. `apps/landing`
|
||||
The **public promotional website** β a standalone SPA for the company profile and marketing pages.
|
||||
* Deployed independently to the web (e.g., Vercel) β no interaction with Electron
|
||||
* Consumes shared UI components from `@repo/ui` and utilities from `@repo/utils`
|
||||
* Locked to port **3000** (`strictPort: true`) β evacuated from the `517x` range to avoid `electron-vite` port collisions
|
||||
|
||||
### 4. `apps/docs-dev`
|
||||
An isolated environment for developing and documenting UI components.
|
||||
* Ensures components in `@repo/ui` are built and tested independently
|
||||
* Acts as a living design system and playground
|
||||
* Built with **VitePress**
|
||||
|
||||
### 5. `packages/core-api`
|
||||
The **platform-agnostic API engine** for the monorepo. Provides an isolated HTTP client factory, a unified observability pipeline (Grafana Faro + OpenTelemetry), and a generic data services engine.
|
||||
|
||||
### 6. `packages/core-storage`
|
||||
The **Enterprise-grade storage engine** for the monorepo.
|
||||
Provides a unified, Promise-based interface for interacting with browser storage (`localStorage` and `IndexedDB`). Enforces strict type safety, prevents key collisions via a centralized registry, and automatically provides **AES encryption at rest** for sensitive payloads using `@repo/utils`.
|
||||
|
||||
### 7. `packages/core-i18n`
|
||||
The **Enterprise Internationalization Architecture** for the monorepo.
|
||||
Provides a Hybrid Namespace Architecture combining a centralized i18n engine with decentralized, lazy-loaded feature dictionaries. Features strict TypeScript typings (including nested keys), optional backend synchronization with automatic error rollbacks, and a deep-merge mechanism for dynamic tenant-specific vocabulary overrides.
|
||||
|
||||
### 8. `packages/core-events`
|
||||
The **decoupled Nervous System** for the monorepo.
|
||||
Provides a highly performant, strictly typed Event Bus (Pub/Sub) powered by `mitt`. It allows independent modules to communicate seamlessly without tightly coupling their codebases or triggering expensive global React tree re-renders.
|
||||
|
||||
### 9. `packages/utils`
|
||||
Shared business logic and reusable utility modules that can be consumed across multiple applications. Fully tested using Vitest.
|
||||
|
||||
### 10. `packages/ui`
|
||||
Shared UI component library (Buttons, Inputs, Cards, Layouts) with a comprehensive **Form UI Library**.
|
||||
* Ensures consistent design across all applications
|
||||
* Designed to be consumed by both web apps and docs
|
||||
* **Form UI Library**: 22 RHF-connected Mantine form components with Zod validation and i18n error translation, built via a `withRHF()` HOC factory with `useController` micro-subscriptions and `React.memo` optimization for ERP-scale forms
|
||||
|
||||
### 11. `packages/configs`
|
||||
Single source of truth for tooling configuration.
|
||||
* **eslint-config**: Shared ESLint rules
|
||||
* **typescript-config**: Shared `tsconfig.json` base configurations
|
||||
|
||||
## βοΈ Configuration & Environment
|
||||
|
||||
### Turborepo Caching
|
||||
This repository uses **Turborepo caching** for builds, tests, and other artifacts.
|
||||
To fully clean the workspace (dependencies, build outputs, and Turbo cache):
|
||||
```bash
|
||||
rm -rf node_modules **/*/node_modules .turbo **/*/.turbo dist **/*/dist out **/*/out web-dist **/*/web-dist release **/*/release
|
||||
```
|
||||
Reference in New Issue
Block a user