{"id":35649746,"url":"https://github.com/menteora/login-form","last_synced_at":"2026-01-05T14:04:47.915Z","repository":{"id":327994558,"uuid":"1112586904","full_name":"menteora/login-form","owner":"menteora","description":"login-form","archived":false,"fork":false,"pushed_at":"2025-12-10T15:43:33.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-11T01:10:16.571Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/menteora.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-08T20:41:47.000Z","updated_at":"2025-12-10T15:43:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/menteora/login-form","commit_stats":null,"previous_names":["menteora/login-form"],"tags_count":null,"template":false,"template_full_name":"google-gemini/aistudio-repository-template","purl":"pkg:github/menteora/login-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/menteora%2Flogin-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/menteora%2Flogin-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/menteora%2Flogin-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/menteora%2Flogin-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/menteora","download_url":"https://codeload.github.com/menteora/login-form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/menteora%2Flogin-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28217171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2026-01-05T02:00:06.358Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-05T14:03:03.208Z","updated_at":"2026-01-05T14:04:47.910Z","avatar_url":"https://github.com/menteora.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Guida alla Creazione di una Libreria React\n\nQuesto repository funge da template per lo sviluppo di una libreria di componenti React. La struttura è progettata per permettere lo sviluppo dei componenti (nella cartella `lib`) contemporaneamente alla loro visualizzazione in un'applicazione di prova (nella cartella `demo`).\n\n## Struttura del Progetto\n\nL'organizzazione delle cartelle è fondamentale per separare il codice distribuibile da quello di test:\n\n```text\nroot/\n├── demo/               # Applicazione \"Consumer\" di esempio\n│   ├── App.tsx         # Componente principale della demo\n│   └── ...\n├── lib/                # SORGENTE DELLA LIBRERIA (Codice da pubblicare)\n│   ├── components/     # Componenti UI riutilizzabili\n│   ├── context/        # React Contexts\n│   ├── hooks/          # Custom Hooks\n│   ├── types.ts        # Definizioni TypeScript condivise\n│   └── index.ts        # Entry point (Barrel file)\n├── index.html          # Entry point per Vite (modalità sviluppo)\n├── index.tsx           # Bootstrap dell'applicazione React (monta la demo)\n├── package.json        # Configurazione npm\n└── tsconfig.json       # Configurazione TypeScript\n```\n\n## 1. Configurazione package.json\n\nPer trasformare il progetto in una libreria installabile, il `package.json` deve essere configurato correttamente:\n\n*   **files**: Definisce quali cartelle vengono incluse quando si pubblica su npm. Qui includiamo solo `lib`.\n*   **main/module/types**: Puntano all'entry point della libreria (`lib/index.ts`).\n*   **peerDependencies**: Indica che la libreria necessita di React per funzionare, ma non lo include nel bundle finale (sarà l'app ospite a fornirlo).\n\nEsempio:\n```json\n{\n  \"name\": \"nome-tua-libreria\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\",\n  \"main\": \"lib/index.ts\",\n  \"module\": \"lib/index.ts\",\n  \"types\": \"lib/index.ts\",\n  \"files\": [\n    \"lib\"\n  ],\n  \"peerDependencies\": {\n    \"react\": \"\u003e=19.0.0\",\n    \"react-dom\": \"\u003e=19.0.0\"\n  }\n}\n```\n\n## 2. L'Entry Point (Barrel File)\n\nIl file `lib/index.ts` è cruciale. Serve a esporre all'esterno solo ciò che vuoi rendere pubblico.\n\n```typescript\n// lib/index.ts\nexport { MioComponente } from './components/MioComponente';\nexport { useMioHook } from './hooks/useMioHook';\nexport type { MioTipo } from './types';\n```\n\n## 3. Flusso di Sviluppo (Dev Loop)\n\nPer sviluppare, utilizziamo **Vite**.\n\n1.  **Entry Point**: Vite carica `index.html`.\n2.  **Bootstrap**: `index.html` carica `index.tsx`.\n3.  **Demo**: `index.tsx` renderizza `demo/App.tsx`.\n4.  **Integrazione**: All'interno di `demo/App.tsx`, importi i tuoi componenti direttamente da `../lib`.\n\n```bash\n# Avvia il server di sviluppo\nnpm run dev\n```\n\nQuesto permette di vedere le modifiche ai componenti in tempo reale (HMR) all'interno di un'applicazione reale.\n\n## 4. Build e Pubblicazione\n\nQuando la libreria è pronta:\n\n1.  **TypeScript Check**: Esegui `tsc` per assicurarti che non ci siano errori di tipo.\n2.  **Pubblicazione**: Esegui `npm publish`. Grazie alla configurazione `\"files\": [\"lib\"]`, verrà caricata su npm solo la cartella `lib`.\n\n## 5. Gestione degli Stili (CSS/Tailwind)\n\nIn questo template, Tailwind CSS è configurato globalmente.\n*   **Sviluppo**: Tailwind viene caricato via script o configurazione nell'app di demo.\n*   **Produzione**: Se la tua libreria usa classi Tailwind, l'applicazione che installerà la tua libreria dovrà avere Tailwind configurato per generare il CSS corrispondente alle classi usate nei tuoi componenti.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmenteora%2Flogin-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmenteora%2Flogin-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmenteora%2Flogin-form/lists"}