PowerOn/wiki
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
wiki/ui_nyla/DEPENDENCY_MAP.md
ValueOn AG 9c3af697ec nyla doc
2025-12-16 00:27:41 +01:00

13 KiB
Raw Blame History

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