516 lines
13 KiB
Markdown
516 lines
13 KiB
Markdown
# Dependency Map - Frontend Nyla
|
|
|
|
Diese Datei enthält eine detaillierte Dependency Map aller Code-Elemente im Frontend Nyla.
|
|
|
|
## Legende
|
|
|
|
- `→` = Import/Dependency
|
|
- `[Module]` = Modul/Namespace
|
|
- `(Hook)` = React Hook
|
|
- `(Component)` = React Component
|
|
- `(Context)` = React Context
|
|
- `(Type)` = TypeScript Type/Interface
|
|
|
|
---
|
|
|
|
## 1. Application Entry & Core
|
|
|
|
### main.tsx
|
|
```
|
|
main.tsx
|
|
→ react (StrictMode)
|
|
→ react-dom/client (createRoot)
|
|
→ App.tsx
|
|
```
|
|
|
|
### App.tsx
|
|
```
|
|
App.tsx
|
|
→ react-router-dom (BrowserRouter, Routes, Route)
|
|
→ react (useEffect)
|
|
→ pages/Login (Login)
|
|
→ pages/Register (Register)
|
|
→ auth/authProvider (AuthProvider)
|
|
→ auth/ProtectedRoute (ProtectedRoute)
|
|
→ contexts/LanguageContext (LanguageProvider)
|
|
→ pages/Home/Home (Home)
|
|
→ assets/styles/light.css
|
|
→ index.css
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Authentication Layer
|
|
|
|
### auth/authProvider.tsx
|
|
```
|
|
auth/authProvider.tsx
|
|
→ @azure/msal-browser (AuthenticationResult, EventType, PublicClientApplication)
|
|
→ @azure/msal-react (MsalProvider)
|
|
→ auth/authConfig (msalConfig)
|
|
→ react (ReactNode, useEffect, useState)
|
|
```
|
|
|
|
### auth/ProtectedRoute.tsx
|
|
```
|
|
auth/ProtectedRoute.tsx
|
|
→ react-router-dom (Navigate)
|
|
→ hooks/useAuthentication (useAuth)
|
|
→ react (ReactNode)
|
|
```
|
|
|
|
### hooks/useAuthentication.ts
|
|
```
|
|
hooks/useAuthentication.ts
|
|
→ @azure/msal-react (useMsal, useIsAuthenticated)
|
|
→ api.ts (api)
|
|
→ react (useState, useCallback, useEffect)
|
|
```
|
|
|
|
---
|
|
|
|
## 3. API Layer
|
|
|
|
### api.ts
|
|
```
|
|
api.ts
|
|
→ axios (axios.create, AxiosInstance)
|
|
→ [Environment Variables]
|
|
```
|
|
|
|
### hooks/useApi.ts
|
|
```
|
|
hooks/useApi.ts
|
|
→ api.ts (api)
|
|
→ react (useState, useCallback)
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Context Layer
|
|
|
|
### contexts/LanguageContext.tsx
|
|
```
|
|
contexts/LanguageContext.tsx
|
|
→ react (createContext, useContext, useState, useEffect, ReactNode)
|
|
→ locales/index (loadLanguage)
|
|
→ locales/types (Language, TranslationKeys)
|
|
```
|
|
|
|
### locales/index.ts
|
|
```
|
|
locales/index.ts
|
|
→ locales/de (de)
|
|
→ locales/en (en)
|
|
→ locales/fr (fr)
|
|
→ locales/types (Language, TranslationKeys, LanguageLoader)
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Page Management System
|
|
|
|
### components/PageManager/PageManager.tsx
|
|
```
|
|
PageManager.tsx
|
|
→ react (useEffect, useState, Suspense)
|
|
→ react-router-dom (useLocation)
|
|
→ framer-motion (motion, AnimatePresence)
|
|
→ components/PageManager/pageConfigs (pageConfigs)
|
|
→ components/PageManager/PageManager.module.css
|
|
```
|
|
|
|
### components/PageManager/pageConfigs.ts
|
|
```
|
|
pageConfigs.ts
|
|
→ react (lazy)
|
|
→ components/PageManager/pageConfigInterface (PageConfig)
|
|
→ pages/Home/Dashboard (Dashboard) [lazy]
|
|
→ pages/Home/Dateien (Dateien) [lazy]
|
|
→ pages/Home/TeamBereich (TeamBereich) [lazy]
|
|
→ pages/Home/Connections (Connections) [lazy]
|
|
→ pages/Home/Workflows (Workflows) [lazy]
|
|
→ pages/Home/Einstellungen (Einstellungen) [lazy]
|
|
→ pages/Home/Prompts (Prompts) [lazy]
|
|
→ react-icons/* (Icons)
|
|
```
|
|
|
|
### components/PageManager/pageConfigInterface.ts
|
|
```
|
|
pageConfigInterface.ts
|
|
→ react (ComponentType)
|
|
→ react-icons (IconType)
|
|
```
|
|
|
|
---
|
|
|
|
## 6. Sidebar System
|
|
|
|
### components/Sidebar/Sidebar.tsx
|
|
```
|
|
Sidebar.tsx
|
|
→ react (React)
|
|
→ components/Sidebar/SidebarItem (SidebarItem)
|
|
→ components/Sidebar/SidebarUser (SidebarUser)
|
|
→ hooks/useSidebar (useSidebarFromPageConfigs)
|
|
→ components/Sidebar/sidebarLogic (useSidebarLogic)
|
|
→ components/Sidebar/sidebarTypes (SidebarProps)
|
|
→ components/Sidebar/SidebarStyles/Sidebar.module.css
|
|
→ react-icons/go (GoSidebarExpand, GoSidebarCollapse)
|
|
```
|
|
|
|
### hooks/useSidebar.ts
|
|
```
|
|
useSidebar.ts
|
|
→ components/PageManager/pageConfigs (getSidebarItems)
|
|
→ react (useMemo)
|
|
```
|
|
|
|
### components/Sidebar/sidebarLogic.ts
|
|
```
|
|
sidebarLogic.ts
|
|
→ react-router-dom (useLocation, useNavigate)
|
|
→ react (useState, useCallback, useEffect)
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Dashboard & Workflow System
|
|
|
|
### pages/Home/Dashboard.tsx
|
|
```
|
|
Dashboard.tsx
|
|
→ react (useState, useCallback, useRef, useEffect)
|
|
→ react-router-dom (useSearchParams)
|
|
→ hooks/useWorkflows (useWorkflows)
|
|
→ components/Dashboard/DashboardChat/dashboardChatAreaTypes (Workflow)
|
|
→ components/Dashboard/DashboardChat/useWorkflowManager (useWorkflowManager)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Dashboard/DashboardChat/DashboardChat (DashboardChat)
|
|
→ pages/Home/HomeStyles/Dashboard.module.css
|
|
→ components/PageManager/pages.module.css
|
|
→ react-icons/io (IoMdArrowDropdown, IoMdClose)
|
|
```
|
|
|
|
### components/Dashboard/DashboardChat/DashboardChat.tsx
|
|
```
|
|
DashboardChat.tsx
|
|
→ react (React)
|
|
→ components/Dashboard/DashboardChat/DashboardChatArea (DashboardChatArea)
|
|
→ components/Dashboard/DashboardChat/dashboardChatAreaTypes (DashboardChatProps)
|
|
→ components/Dashboard/DashboardChatAreaStyles/DashboardChat.module.css
|
|
```
|
|
|
|
### components/Dashboard/DashboardChat/DashboardChatArea.tsx
|
|
```
|
|
DashboardChatArea.tsx
|
|
→ react (useState, useEffect, useRef, useCallback, useMemo)
|
|
→ components/Dashboard/DashboardChat/DashboardChatAreaMessageList (DashboardChatAreaMessageList)
|
|
→ components/Dashboard/DashboardChat/DashboardChatAreaInput (DashboardChatAreaInput)
|
|
→ components/Dashboard/DashboardChat/DashboardChatAreaConnectedFiles (DashboardChatAreaConnectedFiles)
|
|
→ components/Dashboard/DashboardChat/DashboardChatAreaFilePreview (DashboardChatAreaFilePreview)
|
|
→ components/Dashboard/DashboardChat/DashboardChatAreaLogItem (DashboardChatAreaLogItem)
|
|
→ components/Dashboard/DashboardChat/dashboardChatAreaTypes (Types)
|
|
→ components/Dashboard/DashboardChatAreaStyles/*.module.css
|
|
```
|
|
|
|
### components/Dashboard/DashboardChat/useWorkflowManager.ts
|
|
```
|
|
useWorkflowManager.ts
|
|
→ react (useState, useEffect, useCallback, useRef, useMemo)
|
|
→ hooks/useWorkflows (useWorkflow, useWorkflowStatus, useWorkflowMessages, useWorkflowLogs, useWorkflowOperations, StartWorkflowRequest)
|
|
→ components/Dashboard/DashboardChat/dashboardChatAreaTypes (WorkflowState, WorkflowActions)
|
|
```
|
|
|
|
### hooks/useWorkflows.ts
|
|
```
|
|
useWorkflows.ts
|
|
→ react (useState, useEffect)
|
|
→ hooks/useApi (useApiRequest)
|
|
→ components/Dashboard/DashboardChat/dashboardChatAreaTypes (Workflow, WorkflowMessage, WorkflowStats, WorkflowDocument, WorkflowLog)
|
|
```
|
|
|
|
---
|
|
|
|
## 8. Connections Module
|
|
|
|
### pages/Home/Connections.tsx
|
|
```
|
|
Connections.tsx
|
|
→ react (useState)
|
|
→ components/Connections (ConnectionsTable, useConnectionsLogic)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/PageManager/pages.module.css
|
|
→ react-icons/io (IoIosLink)
|
|
```
|
|
|
|
### components/Connections/ConnectionsTable.tsx
|
|
```
|
|
ConnectionsTable.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/Connections/connectionsLogic (useConnectionsLogic)
|
|
→ components/Connections/ConnectionEditModal (ConnectionEditModal)
|
|
→ components/Connections/ConnectionsErrorDisplay (ConnectionsErrorDisplay)
|
|
→ hooks/useConnections (useConnections)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Connections/ConnectionsTable.module.css
|
|
```
|
|
|
|
### components/Connections/connectionsLogic.tsx
|
|
```
|
|
connectionsLogic.tsx
|
|
→ react (useState, useCallback)
|
|
→ hooks/useConnections (useConnections, useConnectionOperations)
|
|
→ components/Connections/connectionsInterfaces (Connection Types)
|
|
```
|
|
|
|
### hooks/useConnections.ts
|
|
```
|
|
useConnections.ts
|
|
→ react (useState, useEffect, useCallback)
|
|
→ hooks/useApi (useApiRequest)
|
|
→ components/Connections/connectionsInterfaces (Connection Types)
|
|
```
|
|
|
|
---
|
|
|
|
## 9. Files Module
|
|
|
|
### pages/Home/Dateien.tsx
|
|
```
|
|
Dateien.tsx
|
|
→ react (useRef, useState)
|
|
→ components/Dateien (DateienTable)
|
|
→ hooks/useFiles (useFileOperations)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/PageManager/pages.module.css
|
|
→ pages/Home/HomeStyles/Dateien.module.css
|
|
→ react-icons/io (IoMdCloudUpload)
|
|
```
|
|
|
|
### components/Dateien/DateienTable.tsx
|
|
```
|
|
DateienTable.tsx
|
|
→ react (useState, useEffect, useCallback)
|
|
→ components/Dateien/dateienLogic (useDateienLogic)
|
|
→ components/FilePreview (FilePreview)
|
|
→ hooks/useFiles (useFiles, useFileOperations)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Dateien/DateienTable.module.css
|
|
```
|
|
|
|
### hooks/useFiles.ts
|
|
```
|
|
useFiles.ts
|
|
→ react (useState, useEffect, useCallback)
|
|
→ hooks/useApi (useApiRequest)
|
|
```
|
|
|
|
### components/FilePreview/FilePreview.tsx
|
|
```
|
|
FilePreview.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/FilePreview/renderers/* (Alle Renderer)
|
|
→ components/FilePreview/FilePreview.module.css
|
|
```
|
|
|
|
### components/FilePreview/renderers/*
|
|
```
|
|
renderers/
|
|
→ ApplicationRenderer.tsx
|
|
→ ErrorRenderer.tsx
|
|
→ HtmlRenderer.tsx
|
|
→ ImageRenderer.tsx
|
|
→ JsonRenderer.tsx
|
|
→ LoadingRenderer.tsx
|
|
→ PdfRenderer.tsx
|
|
→ TextRenderer.tsx
|
|
→ UnsupportedRenderer.tsx
|
|
→ index.ts (Exports)
|
|
```
|
|
|
|
---
|
|
|
|
## 10. Prompts Module
|
|
|
|
### pages/Home/Prompts.tsx
|
|
```
|
|
Prompts.tsx
|
|
→ react (useState)
|
|
→ components/Prompts (PromptsTable)
|
|
→ components/Popup (Popup, EditForm)
|
|
→ hooks/usePrompts (usePrompts, usePromptOperations)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/PageManager/pages.module.css
|
|
→ react-icons/io (IoMdAdd)
|
|
```
|
|
|
|
### components/Prompts/PromptsTable.tsx
|
|
```
|
|
PromptsTable.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/Prompts/promptsLogic (usePromptsLogic)
|
|
→ hooks/usePrompts (usePrompts, usePromptOperations)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Prompts/PromptsTable.module.css
|
|
```
|
|
|
|
### hooks/usePrompts.ts
|
|
```
|
|
usePrompts.ts
|
|
→ react (useState, useEffect, useCallback)
|
|
→ hooks/useApi (useApiRequest)
|
|
→ components/Prompts/promptsTypes (Prompt Types)
|
|
```
|
|
|
|
---
|
|
|
|
## 11. Workflows Module
|
|
|
|
### pages/Home/Workflows.tsx
|
|
```
|
|
Workflows.tsx
|
|
→ components/Workflows (WorkflowsTable)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/PageManager/pages.module.css
|
|
→ pages/Home/HomeStyles/Workflows.module.css
|
|
```
|
|
|
|
### components/Workflows/WorkflowsTable.tsx
|
|
```
|
|
WorkflowsTable.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/Workflows/workflowsLogic (useWorkflowsLogic)
|
|
→ hooks/useWorkflows (useWorkflows)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Workflows/WorkflowsTable.module.css
|
|
```
|
|
|
|
---
|
|
|
|
## 12. Popup/Modal System
|
|
|
|
### components/Popup/Popup.tsx
|
|
```
|
|
Popup.tsx
|
|
→ react (useEffect, ReactNode)
|
|
→ components/Popup/Popup.module.css
|
|
```
|
|
|
|
### components/Popup/EditForm.tsx
|
|
```
|
|
EditForm.tsx
|
|
→ react (useState, useEffect, useCallback)
|
|
→ components/Popup/EditForm.module.css
|
|
```
|
|
|
|
### components/Popup/ViewForm.tsx
|
|
```
|
|
ViewForm.tsx
|
|
→ react (ReactNode)
|
|
→ components/Popup/ViewForm.module.css
|
|
```
|
|
|
|
---
|
|
|
|
## 13. Form Generator
|
|
|
|
### components/FormGenerator/FormGenerator.tsx
|
|
```
|
|
FormGenerator.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/FormGenerator/FormGenerator.module.css
|
|
```
|
|
|
|
---
|
|
|
|
## 14. Users & Settings
|
|
|
|
### pages/Home/Einstellungen.tsx
|
|
```
|
|
Einstellungen.tsx
|
|
→ react (useState, useEffect, useRef)
|
|
→ hooks/useUsers (useCurrentUser, useUser, User)
|
|
→ contexts/LanguageContext (useLanguage, Language)
|
|
→ components/settings/settingsUser (SettingsUser)
|
|
→ components/PageManager/pages.module.css
|
|
→ pages/Home/HomeStyles/Einstellungen.module.css
|
|
```
|
|
|
|
### hooks/useUsers.ts
|
|
```
|
|
useUsers.ts
|
|
→ react (useState, useEffect, useCallback)
|
|
→ hooks/useApi (useApiRequest)
|
|
```
|
|
|
|
---
|
|
|
|
## 15. Team/Mitglieder Module
|
|
|
|
### pages/Home/TeamBereich.tsx
|
|
```
|
|
TeamBereich.tsx
|
|
→ components/Mitglieder/MitgliederTable (MitgliederTable)
|
|
→ components/PageManager/pages.module.css
|
|
```
|
|
|
|
### components/Mitglieder/MitgliederTable.tsx
|
|
```
|
|
MitgliederTable.tsx
|
|
→ react (useState, useEffect)
|
|
→ components/Mitglieder/mitgliederLogic (useMitgliederLogic)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/Mitglieder/MitgliederTable.module.css
|
|
```
|
|
|
|
---
|
|
|
|
## 16. SharePoint Test Module
|
|
|
|
### pages/Home/TestSharepoint.tsx
|
|
```
|
|
TestSharepoint.tsx
|
|
→ react (useState)
|
|
→ components/TestSharepoint (TestSharepointTable, useTestSharepointLogic)
|
|
→ contexts/LanguageContext (useLanguage)
|
|
→ components/PageManager/pages.module.css
|
|
→ pages/Home/HomeStyles/TestSharepoint.module.css
|
|
→ react-icons/io (IoIosRefresh, IoIosLink)
|
|
```
|
|
|
|
### hooks/useSharePointTest.ts
|
|
```
|
|
useSharePointTest.ts
|
|
→ react (useState, useEffect, useCallback)
|
|
→ hooks/useApi (useApiRequest)
|
|
```
|
|
|
|
---
|
|
|
|
## Dependency Summary
|
|
|
|
### Most Imported Modules
|
|
1. **react** - In fast allen Komponenten und Hooks
|
|
2. **react-router-dom** - Für Routing und Navigation
|
|
3. **hooks/useApi** - Für API-Aufrufe
|
|
4. **contexts/LanguageContext** - Für Internationalisierung
|
|
5. **components/PageManager/pageConfigs** - Für Seiten-Konfiguration
|
|
|
|
### Core Infrastructure Dependencies
|
|
- `api.ts` → Alle API-Hooks
|
|
- `hooks/useApi.ts` → Alle Feature-Hooks
|
|
- `contexts/LanguageContext.tsx` → Alle Komponenten mit i18n
|
|
- `components/PageManager/pageConfigs.ts` → PageManager & Sidebar
|
|
|
|
### External Library Dependencies
|
|
- **@azure/msal-*** → Authentication
|
|
- **axios** → HTTP Client
|
|
- **framer-motion** → Animations
|
|
- **react-icons** → Icons
|
|
- **xstate** → State Machine (optional)
|
|
|
|
---
|
|
|
|
*Zuletzt aktualisiert: 2025-01-15*
|
|
|