style: enhance README diagrams with improved subgraph labels and node styling for clarity
This commit is contained in:
@@ -40,8 +40,21 @@ graph TD
|
|||||||
FACTORY -.->|reports via| FARO
|
FACTORY -.->|reports via| FARO
|
||||||
FACTORY -.->|throws| API_ERR
|
FACTORY -.->|throws| API_ERR
|
||||||
|
|
||||||
style Core fill:#f8f9fa,stroke:#ced4da
|
%% Styling Subgraphs (Backgrounds)
|
||||||
style Apps fill:#e9ecef,stroke:#adb5bd
|
style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
|
||||||
|
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||||
|
|
||||||
|
%% Styling Nodes (Apps - Blue)
|
||||||
|
style WEB fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style LAND fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style DESK fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
|
||||||
|
%% Styling Nodes (Core Modules)
|
||||||
|
style FACTORY fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style FARO fill:#fd7e14,stroke:#d9480f,color:#fff
|
||||||
|
style BASE fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style COMMON fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style API_ERR fill:#fa5252,stroke:#c92a2a,color:#fff
|
||||||
```
|
```
|
||||||
|
|
||||||
### Data Flow Lifecycle
|
### Data Flow Lifecycle
|
||||||
@@ -50,12 +63,25 @@ Every HTTP request flows through this precise interceptor pipeline:
|
|||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
|
autonumber
|
||||||
|
|
||||||
|
box #e7f5ff App Layer (Consumers)
|
||||||
participant C as UI Component
|
participant C as UI Component
|
||||||
|
end
|
||||||
|
|
||||||
|
box #f8f9fa Core Engine (@repo/core-api)
|
||||||
participant S as Data Service
|
participant S as Data Service
|
||||||
participant H as HTTP Client
|
participant H as HTTP Client
|
||||||
participant F as Faro Adapter
|
participant F as Faro Adapter
|
||||||
participant A as App Hooks (IoC)
|
end
|
||||||
|
|
||||||
|
box #e7f5ff App Logic (IoC)
|
||||||
|
participant A as App Hooks
|
||||||
|
end
|
||||||
|
|
||||||
|
box #fff5f5 External
|
||||||
participant N as Network
|
participant N as Network
|
||||||
|
end
|
||||||
|
|
||||||
C->>S: getMany()
|
C->>S: getMany()
|
||||||
S->>H: request()
|
S->>H: request()
|
||||||
@@ -63,13 +89,13 @@ sequenceDiagram
|
|||||||
H->>A: hooks.onRequest() (Inject Token)
|
H->>A: hooks.onRequest() (Inject Token)
|
||||||
A->>N: fetch/XHR
|
A->>N: fetch/XHR
|
||||||
|
|
||||||
alt Success
|
alt Success (2xx)
|
||||||
N-->>A: 200 OK
|
N-->>A: return Response
|
||||||
A->>F: onRequestEnd() (Close Span)
|
A->>F: onRequestEnd() (Close Span)
|
||||||
F->>A: hooks.onResponse()
|
F->>A: hooks.onResponse()
|
||||||
A-->>S: return data
|
A-->>S: return data
|
||||||
else Error
|
else Error (4xx / 5xx)
|
||||||
N-->>A: 401 / 500
|
N-->>A: return Rejection
|
||||||
A->>F: onRequestError() (Log Error)
|
A->>F: onRequestError() (Log Error)
|
||||||
F->>A: hooks.onResponseError() (Redirect/Refresh)
|
F->>A: hooks.onResponseError() (Redirect/Refresh)
|
||||||
A-->>S: throw ApiError
|
A-->>S: throw ApiError
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ By routing communication through a centralized event bus, we achieve:
|
|||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
graph TD
|
graph TD
|
||||||
subgraph "@repo/core-events (Pure Tool)"
|
subgraph Core ["@repo/core-events (Pure Tool)"]
|
||||||
R["AppEventRegistry<br/>(empty interface)"]
|
R["AppEventRegistry<br/>(empty interface)"]
|
||||||
T["AppEvents = mapped type"]
|
T["AppEvents = mapped type"]
|
||||||
E((Event Bus<br/>mitt))
|
E((Event Bus<br/>mitt))
|
||||||
@@ -29,7 +29,7 @@ graph TD
|
|||||||
E --> H
|
E --> H
|
||||||
end
|
end
|
||||||
|
|
||||||
subgraph "apps/web (App Autonomy)"
|
subgraph Apps ["apps/web (App Autonomy)"]
|
||||||
D["events.d.ts<br/>declare module augmentation"]
|
D["events.d.ts<br/>declare module augmentation"]
|
||||||
A[Cashier UI]
|
A[Cashier UI]
|
||||||
B[Profile Settings]
|
B[Profile Settings]
|
||||||
@@ -49,9 +49,24 @@ graph TD
|
|||||||
E -.-> Y
|
E -.-> Y
|
||||||
E -.-> Z
|
E -.-> Z
|
||||||
|
|
||||||
style E fill:#4263eb,color:#fff,stroke:#fff
|
%% Styling Subgraphs (Backgrounds)
|
||||||
style R fill:#2b8a3e,color:#fff,stroke:#fff
|
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||||
style D fill:#e67700,color:#fff,stroke:#fff
|
style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
|
||||||
|
|
||||||
|
%% Styling Core Engine (Purple) & Contracts (Green)
|
||||||
|
style R fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style T fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style E fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style H fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
|
||||||
|
%% Styling App Injection (Orange) & Components (Blue)
|
||||||
|
style D fill:#fd7e14,stroke:#d9480f,color:#fff
|
||||||
|
style A fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style B fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style C fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style X fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style Y fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style Z fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ graph TD
|
|||||||
COMMON[Common Vocabulary]
|
COMMON[Common Vocabulary]
|
||||||
end
|
end
|
||||||
|
|
||||||
subgraph Backend ["Backend API"]
|
subgraph Backend ["Backend API (External)"]
|
||||||
SYNC[Language Sync Endpoint]
|
SYNC[Language Sync Endpoint]
|
||||||
TENANT[Tenant Config Endpoint]
|
TENANT[Tenant Config Endpoint]
|
||||||
end
|
end
|
||||||
@@ -42,9 +42,23 @@ graph TD
|
|||||||
|
|
||||||
TENANT -.->|applyTenantOverrides| I18N
|
TENANT -.->|applyTenantOverrides| I18N
|
||||||
|
|
||||||
style I18N fill:#4263eb,color:#fff,stroke:#fff
|
%% Styling Subgraphs (Backgrounds)
|
||||||
style Apps fill:#f8f9fa,stroke:#ced4da
|
style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
|
||||||
style Core fill:#f8f9fa,stroke:#ced4da
|
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||||
|
style Backend fill:#fff4e6,stroke:#ffd8a8,stroke-width:2px,color:#d9480f
|
||||||
|
|
||||||
|
%% Styling App Nodes (Blue)
|
||||||
|
style UI fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
style DICT fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
|
||||||
|
%% Styling Core Nodes (Purple Engine, Green Storage/Data)
|
||||||
|
style I18N fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style STORE fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style COMMON fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
|
||||||
|
%% Styling Backend Nodes (Orange/Network)
|
||||||
|
style SYNC fill:#fd7e14,stroke:#d9480f,color:#fff
|
||||||
|
style TENANT fill:#fd7e14,stroke:#d9480f,color:#fff
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ graph TD
|
|||||||
IDB[IndexedDB Adapter]
|
IDB[IndexedDB Adapter]
|
||||||
end
|
end
|
||||||
|
|
||||||
subgraph Browser ["Browser APIs"]
|
subgraph Browser ["Browser APIs (Native)"]
|
||||||
B_LOCAL[(localStorage)]
|
B_LOCAL[(localStorage)]
|
||||||
B_IDB[(IndexedDB)]
|
B_IDB[(IndexedDB)]
|
||||||
end
|
end
|
||||||
@@ -38,9 +38,24 @@ graph TD
|
|||||||
LOCAL <--> B_LOCAL
|
LOCAL <--> B_LOCAL
|
||||||
IDB <--> B_IDB
|
IDB <--> B_IDB
|
||||||
|
|
||||||
style Core fill:#f8f9fa,stroke:#ced4da
|
%% Styling Subgraphs (Backgrounds)
|
||||||
style ENC fill:#fab005,color:#fff,stroke:#fff
|
style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
|
||||||
style Browser fill:#e9ecef,stroke:#adb5bd
|
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||||
|
style Browser fill:#f1f3f5,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||||
|
|
||||||
|
%% Styling App Nodes (Blue)
|
||||||
|
style UI fill:#339af0,stroke:#1864ab,color:#fff
|
||||||
|
|
||||||
|
%% Styling Core Nodes (Purple Engine, Green Registry, Gold Encryption)
|
||||||
|
style API fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style LOCAL fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style IDB fill:#845ef7,stroke:#5f3dc4,color:#fff
|
||||||
|
style REG fill:#20c997,stroke:#089981,color:#fff
|
||||||
|
style ENC fill:#fab005,stroke:#e67700,color:#fff
|
||||||
|
|
||||||
|
%% Styling Browser Nodes (Neutral Gray)
|
||||||
|
style B_LOCAL fill:#868e96,stroke:#495057,color:#fff
|
||||||
|
style B_IDB fill:#868e96,stroke:#495057,color:#fff
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user