{"id":14957146,"url":"https://github.com/magicianredlabs/generic-ui-library","last_synced_at":"2025-05-02T08:30:35.761Z","repository":{"id":48080357,"uuid":"371896406","full_name":"MagicianredLabs/generic-ui-library","owner":"MagicianredLabs","description":"An experiment on going in order to generate a generic UI for different project. Show the path using feature branches.","archived":false,"fork":false,"pushed_at":"2021-08-08T10:29:58.000Z","size":668,"stargazers_count":5,"open_issues_count":8,"forks_count":5,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-07T00:07:19.974Z","etag":null,"topics":["angular","library","react","reactjs","stenciljs","storybook","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagicianredLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-29T06:18:55.000Z","updated_at":"2023-04-09T21:08:58.000Z","dependencies_parsed_at":"2022-08-12T18:10:41.933Z","dependency_job_id":null,"html_url":"https://github.com/MagicianredLabs/generic-ui-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicianredLabs%2Fgeneric-ui-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicianredLabs%2Fgeneric-ui-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicianredLabs%2Fgeneric-ui-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicianredLabs%2Fgeneric-ui-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagicianredLabs","download_url":"https://codeload.github.com/MagicianredLabs/generic-ui-library/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252008690,"owners_count":21679623,"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","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":["angular","library","react","reactjs","stenciljs","storybook","webcomponents"],"created_at":"2024-09-24T13:14:14.007Z","updated_at":"2025-05-02T08:30:35.173Z","avatar_url":"https://github.com/MagicianredLabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# generic-ui-library\n\n[English translation](./README_EN.md)\n\nUn esperimento per creare una libreria generica con i *WebComponents* usati in librerie di uno specifico framework (for example React or Angular) e quest'ultime incluse nelle applicazioni finali.\n\nIl processo che utilizzo è dall'alto al basso (dall'applicazione finale andando verso le librerie), passo dopo passo, come se venissero inserite in un progetto già esistente.\n\nPer l'applicazione di esempio ho preso spunto da questo tutorial in Angular che creava dei *dumb component* per realizzare un'applicazione Todo.\nhttps://www.sitepoint.com/angular-2-tutorial/\n\n## Descrizione\n\n![Diagram](Project/Diagrams/schema.png)  \n[drawio](Project/Diagrams/schema.drawio)  \n[png](Project/Diagrams/schema.png)  \n\nL'obbiettivo è poter riutilizzare una serie di *dumb component* creati in Web Components (così da poter essere riutilizzati in diversi framework) e creare una o più librerie di uno specifico framework così da poterle inserire facilmente nel proprio progetto e poter arricchire i componenti fatti in Web Components con le specifiche caratteristiche dei framework (routing, lifecycle, state management, ecc).\n\n## Procedere per gradi nell'esperimento\n\nQuesto è un'esperimento, ma verrà effettuato partendo da alcuni progetti finali (inizialmente uno in Angular e uno in React - così da poter verificare la riutilizzabilità dei Web Components creati). E verrà fatto per step simulando una situazione in cui non si può cambiare il progetto tutto in una volta, ma gradualmente.\n\n### Primo step\n\nIl primo step sarà quello di trasformare i componenti in *dumb component*. Per ogni linguaggio ci sarà un approccio diverso, secondo le caratteristiche proprie della tecnologia.\n\n### Angular\n\nSpostare, i componenti creati, in un modulo così da facilitare poi la separazione in libreria e sarà fatto nel branch *feature/frameworkAngular/move-components-into-module*.\n\n### React\n\nSpostare, i componenti creati, in una cartella separata ed esportare i componenti tramite un file *index.js* sia come libreria completa che come singolo componente (come avviene ad esempio con *react-bootstrap* o *lodash*). Questo renderà facile poi sostituire la cartella con una libreria esterna e sarà fatto nel branch *feature/frameworkReact/move-components-into-module*.\n\n### Secondo step\n\nConvertire la cartella (o il modulo per Angular) in una libreria esterna e caricarla in un servizio per essere installata con *npm* o *yarn* o altro package manager. Una volta creato l'npm package andare ad importarlo ed utilizzarlo nei progetti.\n\n#### Angular\n\n[TO DO]\n\n#### React\n\nPer creare la libreria npm react seguire le seguenti istruzioni per creare il progetto:\nhttps://fathomtech.io/blog/create-a-react-component-library-using-create-react-app/\n\nModificare nel *package.json* le seguenti dipendenze:\n\n```json\n  \"dependencies\": {\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scripts\": \"4.0.3\",\n    \"web-vitals\": \"^1.0.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.14.8\",\n    \"@babel/core\": \"^7.15.0\",\n    \"@babel/preset-env\": \"^7.15.0\",\n    \"@babel/preset-react\": \"^7.14.5\",\n    \"@storybook/addon-actions\": \"^6.3.6\",\n    \"@storybook/addon-essentials\": \"^6.3.6\",\n    \"@storybook/addon-links\": \"^6.3.6\",\n    \"@storybook/node-logger\": \"^6.3.6\",\n    \"@storybook/addon-storyshots\": \"^6.3.6\",\n    \"@storybook/preset-create-react-app\": \"^3.2.0\",\n    \"@storybook/react\": \"^6.3.6\",\n    \"react-test-renderer\": \"^17.0.2\",\n    \"cross-env\": \"^7.0.3\",\n    \"@testing-library/jest-dom\": \"^5.11.4\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-scripts\": \"4.0.3\"\n  },\n```\n\nIn particolare aggiornare la versione *\"react-scripts\": \"4.0.3\"* e aggiungere i pacchetti *@babel/cli* e *@babel/core* che serviranno per lo script *compile*\n\ned aggiungere gli script\n\n```json\n\"clean\": \"rimraf dist\",\n\"compile\": \"npm run clean \u0026\u0026 cross-env NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__\",\n\"prepare\": \"npm run compile\"\n```\n\nCreare i componenti necessari, verificarli attraverso storybook e una volta soddisfatto, creare un account su npmjs.com o altro npm server, aggiornare la versione nel package.json e lanciare il comando\n\n```cmd\nnpm publish\n```\n\nImporta la libreria nel progetto React con il seguente comando\n\n```javascript\nimport { \n    TodoListHeaderWrapper as TodoListHeader, \n    TodoListWrapper as TodoList, \n    TodoListFooterWrapper as TodoListFooter \n} from '@magicianred/todo-react-ui-library';\n```\n\n\nCreata la libreria npm *@magicianred/todo-react-ui-library* come prova\nhttps://www.npmjs.com/package/@magicianred/todo-react-ui-library\n\n\n\n### Terzo step\nConvertire i componenti delle librerie specifiche (React ed Angular) in componenti Web Components. Andare poi ad utilizzare questi componenti nelle librerie delle specifiche tecnologie.\n\n#### Angular\n\n[TO DO]\n\n#### React\n\n[TO DO]\n\n\n## Credits\n\n- Thanks to [jawblia](https://github.com/jawblia) for her guide to make npm package for react\nhttps://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f\n\n- Thanks to *Suprada Urval*\nhttps://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f\n\n- Thanks to *benjaminwfox*\nhttps://benjaminwfox.medium.com/creating-a-react-component-library-by-abstracting-a-react-component-library-45290114d22a\n\n- Thanks to *fathomtech.io*\nhttps://fathomtech.io/blog/create-a-react-component-library-using-create-react-app/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicianredlabs%2Fgeneric-ui-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicianredlabs%2Fgeneric-ui-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicianredlabs%2Fgeneric-ui-library/lists"}