{"id":23456384,"url":"https://github.com/timonwa/demo-ui-library","last_synced_at":"2025-06-27T19:32:16.021Z","repository":{"id":162496150,"uuid":"637047122","full_name":"Timonwa/demo-ui-library","owner":"Timonwa","description":"A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.","archived":false,"fork":false,"pushed_at":"2024-09-13T08:24:51.000Z","size":484,"stargazers_count":39,"open_issues_count":1,"forks_count":19,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T09:08:26.138Z","etag":null,"topics":["article","beginner-friendly","beginner-project","component-library","demo","react-lib","turorial","ui-library"],"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/Timonwa.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-06T10:44:52.000Z","updated_at":"2025-05-11T13:03:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed7e28fc-d281-45c0-8f59-cb3db0ee6c82","html_url":"https://github.com/Timonwa/demo-ui-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Timonwa/demo-ui-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Fdemo-ui-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Fdemo-ui-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Fdemo-ui-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Fdemo-ui-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timonwa","download_url":"https://codeload.github.com/Timonwa/demo-ui-library/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Fdemo-ui-library/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262319114,"owners_count":23293005,"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":["article","beginner-friendly","beginner-project","component-library","demo","react-lib","turorial","ui-library"],"created_at":"2024-12-24T04:28:37.387Z","updated_at":"2025-06-27T19:32:15.987Z","avatar_url":"https://github.com/Timonwa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Demo UI Library\n\nThis is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created for an article update for [LogRocket](https://blog.logrocket.com/author/pelumiakintokun/) on how to create a UI component library in React. You can read the article [here](https://blog.logrocket.com/build-component-library-react-typescript/).\n\nVisit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical contents like articles, code snippets, tech goodies, community projects and more.\n\n## Installation\n\nYou can install this demo UI library using npm:\n\n```\nnpm install @timonwa/demo-ui-library\n```\n\n## Usage\n\nTo use this demo UI library in your project, import the components you need from the library and use them in your React components.\n\n```jsx\nimport React from \"react\";\nimport { Input, Button } from \"@timonwa/demo-ui-library\";\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cInput\n        id=\"name\"\n        disabled={false}\n        label=\"Enter your name\"\n        message=\"This field is required\"\n        error={false}\n        success={false}\n        onChange={(e) =\u003e console.log(e.target.value)}\n        placeholder=\"Enter your name here\"\n      /\u003e\n      \u003cButton\n        size=\"medium\"\n        primary={true}\n        disabled={false}\n        text=\"Click me!\"\n        onClick={() =\u003e alert(\"Button clicked!\")}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Contributing\n\nThis library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.\n\n### Steps\n\n- Fork the repository.\n- Clone the repository to your local machine.\n- Install the dependencies using `npm install`.\n- View the components in the browser using `npm run storybook`.\n- Make your changes.\n- Test the changes using `npm test`.\n- Build the library using `npm run build`.\n- Commit the changes and push them to your forked repository.\n- Publish the package on [npm](https://www.npmjs.com/).\n- Install and use the package in your project.\n\n## License\n\nThis demo UI library is licensed under the [MIT License](https://github.com/Timonwa/demo-ui-library/blob/main/license).\n\n## Connect\n\nMore of my articles can be found in [Timonwa's Notes](https://blog.timonwa.com). Connect with me on Twitter: [@timonwa\\_](https://twitter.com/timonwa_)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimonwa%2Fdemo-ui-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimonwa%2Fdemo-ui-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimonwa%2Fdemo-ui-library/lists"}