diff --git a/README.md b/README.md index da98444..99ffb52 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,50 @@ -# React + TypeScript + Vite +# Application [4NK] - Interface Web -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Cette application React fournit une interface pour interagir avec la plateforme [4NK]. Elle permet l'authentification des utilisateurs, la création de profils et de dossiers, ainsi que la visualisation des processus. -Currently, two official plugins are available: +## Fonctionnalités principales -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- Authentification utilisateur via OAuth +- Création et gestion de profils utilisateur +- Création et gestion de dossiers +- Visualisation des processus +- Console de messages pour le suivi des événements -## Expanding the ESLint configuration +## Prérequis -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +- Node.js (version 18 ou supérieure) +- npm ou yarn -```js -export default tseslint.config({ - extends: [ - // Remove ...tseslint.configs.recommended and replace with this - ...tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - ...tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - ...tseslint.configs.stylisticTypeChecked, - ], - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) +## Installation + +Pour installer les dépendances du projet, exécutez : + +```bash +npm install ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +## Commandes disponibles -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +### Démarrage de l'application -export default tseslint.config({ - plugins: { - // Add the react-x and react-dom plugins - 'react-x': reactX, - 'react-dom': reactDom, - }, - rules: { - // other rules... - // Enable its recommended typescript rules - ...reactX.configs['recommended-typescript'].rules, - ...reactDom.configs.recommended.rules, - }, -}) +**Commande principale** pour lancer l'application en mode développement : + +```bash +npm run dev ``` + +L'application sera accessible à l'adresse : http://localhost:5173 + +## Communication avec la plateforme [4NK] + +L'application communique avec la plateforme [4NK] via une iframe et un bus de messages. La communication est gérée par les classes `MessageBus` et `EventBus` dans le dossier `/src/sdk`. + +## Configuration + +L'URL de l'iframe est définie dans `App.tsx` : + +```typescript +const iframeUrl = 'https://dev3.4nkweb.com' +``` + +Pour modifier l'environnement cible, vous devez changer cette URL. diff --git a/src/App.tsx b/src/App.tsx index 4f63a2a..eac9463 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -147,6 +147,7 @@ function App() { onLogout={handleLogout} onCreateProfile={handleOpenProfileModal} onCreateFolder={handleOpenFolderModal} + iframeUrl={iframeUrl} /> {/* Structure flexible avec console à gauche et contenu à droite */} diff --git a/src/components/ControlPanel.tsx b/src/components/ControlPanel.tsx index f73b2eb..ba9914c 100644 --- a/src/components/ControlPanel.tsx +++ b/src/components/ControlPanel.tsx @@ -9,28 +9,22 @@ interface ControlPanelProps { iframeUrl?: string; } -/** - * Composant de panel de contrôle pour gérer les actions principales - * - * Fournit des boutons pour la connexion, la création de profil et le contrôle de visibilité - */ -function ControlPanel({ +function ControlPanel({ onLogin = () => console.log('Connexion demandée'), onLogout = () => console.log('Déconnexion demandée'), onCreateProfile = () => console.log('Création de profil demandée'), onCreateFolder = () => console.log('Création de dossier demandée'), isConnected = false, - iframeUrl = 'https://dev1.4nkweb.com' + iframeUrl = '' }: ControlPanelProps) { - // État pour gérer l'affichage du tooltip const [showTooltip, setShowTooltip] = useState(false); - + return (
{/* Bouton d'information avec tooltip */}
-
)}
- + {/* Boutons de contrôle */}
-
-
-