{"_rev":"4-9ac079fa1d6a0ca92588cb455045a0f4","time":{"created":"2026-02-04T22:19:17.042Z","modified":"2026-02-04T22:19:17.538Z","1.0.0":"2026-02-04T22:14:59.290Z","1.0.1":"2026-02-04T22:19:17.360Z"},"_id":"@biowz/portal","name":"@biowz/portal","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@biowz/portal","version":"1.0.1","description":"Hub shell : écran de choix d'applications, sidebar et barre du haut réutilisables","type":"module","main":"./dist/portal.cjs","module":"./dist/portal.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/portal.js","require":"./dist/portal.cjs","types":"./dist/index.d.ts"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","lucide-react":"^0.260.0"},"devDependencies":{"@types/node":"^20.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react-swc":"^3.11.0","clsx":"^2.1.1","react":"^18.3.1","react-dom":"^18.3.1","lucide-react":"^0.462.0","tailwind-merge":"^2.6.0","tailwindcss":"^3.4.0","typescript":"^5.0.0","vite":"^5.0.0","vite-plugin-dts":"^3.9.0"},"keywords":["react","hub","sidebar","app-launcher","dashboard"],"license":"MIT","gitHead":"a9a11babec34233334d779979fad283231d95bec","_id":"@biowz/portal@1.0.1","_nodeVersion":"23.3.0","_npmVersion":"11.6.4","dist":{"integrity":"sha512-gXCC6NrclChi186rEan3Vph8K25ubvOMgqkvhAxFZc/NCBZfjgABUpEKQcCKny4IbU6VxXydksahH1xPuxS4/g==","shasum":"a1eda58ab3e996d750981ef9aaebb041081418be","tarball":"https://registry.npmjs.org/@biowz/portal/-/portal-1.0.1.tgz","fileCount":17,"unpackedSize":82896,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID9vufHfFrxQ44F53gsXZ0BQ53SSLQSpmOxf+Z/hAGOLAiBRENaxwVnQQI65v5NSNWhS5EVcItQCMP4dje9U4qeKXA=="}]},"_npmUser":{"name":"biowz","email":"biowhazarde@gmail.com"},"directories":{},"maintainers":[{"name":"biowz","email":"biowhazarde@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/portal_1.0.1_1770243557120_0.9956103176294095"},"_hasShrinkwrap":false}},"maintainers":[{"name":"biowz","email":"biowhazarde@gmail.com"}],"description":"Hub shell : écran de choix d'applications, sidebar et barre du haut réutilisables","keywords":["react","hub","sidebar","app-launcher","dashboard"],"license":"MIT","readme":"# portal\n\nModule npm fournissant un **hub shell** réutilisable : écran de choix d’applications, sidebar et barre du haut. À intégrer dans différentes apps en fournissant la liste des apps (liens / menu) et le contenu à afficher pour chaque app.\n\n## Installation\n\n```bash\nnpm install @biowz/portal\n```\n\n**Peer dependencies** (à avoir dans votre projet) : `react`, `react-dom`, `lucide-react`.\n\n## Utilisation\n\n1. **Importer les styles** une fois dans votre app (par ex. dans `main.tsx` ou `App.tsx`) :\n\n```ts\nimport \"@biowz/portal/styles.css\";\n```\n\n2. **Tailwind** : votre projet doit utiliser Tailwind avec les mêmes variables CSS (couleurs `--primary`, `--background`, etc.). Ajoutez le package dans le `content` de votre `tailwind.config` pour que les classes utilisées par les composants soient générées :\n\n```js\n// tailwind.config.js ou tailwind.config.ts\ncontent: [\n  \"./index.html\",\n  \"./src/**/*.{js,ts,jsx,tsx}\",\n  \"./node_modules/@biowz/portal/dist/**/*.js\",\n],\n```\n\n3. **Utiliser `HubShell`** en lui passant vos apps, vos agences et le rendu du contenu :\n\n```tsx\nimport { HubShell } from \"@biowz/portal\";\nimport type { App, Agency } from \"@biowz/portal\";\nimport { Mail, Calendar } from \"lucide-react\";\n\nconst apps: App[] = [\n  {\n    id: \"mail\",\n    name: \"Mail\",\n    description: \"Gérez vos emails\",\n    icon: Mail,\n    color: \"linear-gradient(135deg, #3b82f6, #1d4ed8)\",\n    category: \"Productivité\",\n  },\n  {\n    id: \"calendar\",\n    name: \"Calendrier\",\n    description: \"Planifiez vos rendez-vous\",\n    icon: Calendar,\n    color: \"linear-gradient(135deg, #10b981, #059669)\",\n    category: \"Productivité\",\n  },\n];\n\nconst agencies: Agency[] = [\n  { id: \"paris\", name: \"Agence Paris\", city: \"Paris\" },\n  { id: \"lyon\", name: \"Agence Lyon\", city: \"Lyon\" },\n];\n\nfunction App() {\n  return (\n    <HubShell\n      apps={apps}\n      agencies={agencies}\n      title=\"Applications\"\n      subtitle=\"Accédez à toutes vos applications depuis un seul endroit\"\n      renderAppContent={(app, agency) => (\n        <div>\n          Contenu pour {app.name} — {agency.name}\n        </div>\n      )}\n    />\n  );\n}\n```\n\n## API\n\n### `HubShell`\n\n| Prop | Type | Description |\n|------|------|--------------|\n| `apps` | `App[]` | Liste des applications (fournie par votre app). |\n| `agencies` | `Agency[]` | Liste des agences pour le sélecteur de la barre du haut. |\n| `categories` | `string[]` | (Optionnel) Catégories pour le filtre. Par défaut : dérivé des `apps` + \"Tout\". |\n| `title` | `string` | Titre de l’écran de choix (grille). Défaut : \"Applications\". |\n| `subtitle` | `string` | Sous-titre de l’écran de choix. |\n| `renderAppContent` | `(app: App, agency: Agency) => ReactNode` | Contenu affiché sous la barre du haut quand une app est sélectionnée. |\n\n### Types\n\n- **`App`** : `{ id, name, description, icon: LucideIcon, color, category }`\n- **`Agency`** : `{ id, name, city }`\n\n### Exports\n\nVous pouvez aussi utiliser les composants individuellement :\n\n- `HubShell` — layout complet\n- `AppCard`, `SearchBar`, `CategoryFilter` — écran de choix\n- `AppSidebar` — barre latérale d’apps\n- `AppHeaderBar`, `AgencySelector` — barre du haut\n\n## Licence\n\nMIT\n","readmeFilename":"README.md"}