Projito Components

Une bibliothèque React moderne pour afficher et suivre en temps réel les tâches GitHub de vos projets.

🚀 Fonctionnalités

• 📊 Affichage des tâches GitHub par priorité (P0 à P3)
• ⚡ Mises à jour en temps réel via WebSocket
• 🎨 Thème personnalisable (Material-UI)
• 🔄 Synchronisation automatique avec GitHub
• 📱 Design responsive
• 🌗 Mode sombre par défaut

📦 Installation

NPM

npm install @cesar-richard/projito-components

Yarn

yarn add @cesar-richard/projito-components

🔧 Configuration

Backend Requirements

Votre backend doit exposer :

• Une API REST pour la récupération initiale des données
• Un endpoint WebSocket pour les mises à jour en temps réel

Configuration minimale

import { ProjectDetailComponent } from '@cesar-richard/projito-components';
function App() {
return (
<ProjectDetailComponent
projectId="123"
backendUrl="https://your-api.com"
wsBackendUrl="wss://your-api.com"
/>
);
}

Configuration avancée

import { ProjectDetailComponent } from '@cesar-richard/projito-components';
import { createTheme } from '@mui/material';
const customTheme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2',
},
},
});
function App() {
return (
<ProjectDetailComponent
projectId="123"
backendUrl="https://your-api.com"
wsBackendUrl="wss://your-api.com"
initialData={optionalInitialData}
theme={customTheme}
/>
);
}

📝 Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | projectId | string | ✅ | - | ID du projet GitHub à afficher | | backendUrl | string | ❌ | https://projito.crichard.fr | URL de l'API backend | | wsBackendUrl | string | ❌ | wss://projito.crichard.fr | URL du WebSocket | | initialData | object | ❌ | null | Données initiales pour le rendu SSR | | theme | object | ❌ | darkTheme | Thème Material-UI personnalisé |

🔌 WebSocket Events

Le composant écoute les événements WebSocket suivants :

{
type: 'project_update',
project_id: string,
data: {
// Données du projet mises à jour
}
}

🎨 Personnalisation du thème

Le composant utilise Material-UI et peut être personnalisé via le prop theme :

const customTheme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#90caf9',
},
secondary: {
main: '#f48fb1',
},
},
});

🛠️ Développement

src/
├── lib/
│ ├── index.js # Point d'entrée principal
│ └── ProjectDetailComponent.jsx
├── components/
│ └── Issue.jsx # Composant de rendu des tâches
└── hooks/
└── useWebSocket.js # Hook de gestion WebSocket

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

1. Fork le projet
2. Créer une branche (git checkout -b feature/amazing-feature)
3. Commit vos changements (git commit -m 'feat: add amazing feature')
4. Push sur la branche (git push origin feature/amazing-feature)
5. Ouvrir une Pull Request

📄 Licence

MIT © César Richard

🙏 Remerciements

• Material-UI pour les composants UI
• React pour le framework
• Vite pour le bundler