{"id":28900037,"url":"https://github.com/unfoldingword-box3/hello-world-react-component-library","last_synced_at":"2026-01-20T16:56:51.825Z","repository":{"id":35095444,"uuid":"206173537","full_name":"unfoldingWord-box3/hello-world-react-component-library","owner":"unfoldingWord-box3","description":"Hello World React Component Library","archived":false,"fork":false,"pushed_at":"2023-03-02T07:49:26.000Z","size":6745,"stargazers_count":0,"open_issues_count":32,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-19T02:41:04.727Z","etag":null,"topics":["scripture-open-components"],"latest_commit_sha":null,"homepage":"https://unfoldingword-box3.github.io/hello-world-react-component-library/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unfoldingWord-box3.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":"2019-09-03T21:14:00.000Z","updated_at":"2022-06-14T15:18:39.000Z","dependencies_parsed_at":"2023-01-15T13:45:19.734Z","dependency_job_id":null,"html_url":"https://github.com/unfoldingWord-box3/hello-world-react-component-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/unfoldingWord-box3/hello-world-react-component-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unfoldingWord-box3%2Fhello-world-react-component-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unfoldingWord-box3%2Fhello-world-react-component-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unfoldingWord-box3%2Fhello-world-react-component-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unfoldingWord-box3%2Fhello-world-react-component-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unfoldingWord-box3","download_url":"https://codeload.github.com/unfoldingWord-box3/hello-world-react-component-library/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unfoldingWord-box3%2Fhello-world-react-component-library/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261095300,"owners_count":23108784,"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":["scripture-open-components"],"created_at":"2025-06-21T09:09:15.377Z","updated_at":"2026-01-20T16:56:51.820Z","avatar_url":"https://github.com/unfoldingWord-box3.png","language":"JavaScript","readme":"[![Custom badge](https://img.shields.io/endpoint?color=%2374b9ff\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2unfoldingWord-box3%2Fhello-world-react-component-library%2Fmaster%2Fcoverage%2Fshields.json)]()\n![Lego Blocks](https://forum.door43.org/uploads/default/original/1X/0a2172623a094033c0f609fe36bb08eacdd4fb1b.jpeg)\n\n# Example React Component Library\n\nRead more about why we are focusing on creating component libraries and our approach:\nhttps://forum.door43.org/t/component-libraries/396\n\n### The Stack\n\n- Javascript + React (functional components \u0026 hooks).\n- MaterialUI for UI/UX baseline design components.\n- Styleguidist for Playground Documentation.\n- Yarn for dependencies, publishing, and deploying.\n- Github + NPM + Github Pages for Hosting.\n\nThere are many alternatives to each layer referenced here. However, many of the alternatives add a great deal of complexity to the initial setup and long term maintenance which prevents it from being practical.\n\n# How to deploy your own?\n\nOnce you have this codebase forked and cloned to your local machine, you can start modifying the codebase.\nYou will need to ensure `node.js` and `yarn` are already installed.\n\n### Installation and Running the Styleguide Locally\n\n1. Install the npm dependencies with `yarn`.\n1. Run the Styleguide with `yarn start`.\n1. Ensure that the Styleguide is running by visiting `localhost:6060` on your web browser.\n1. Modify the code and documentation in your code editor and check out the Styleguide.\n    - Update the styleguide.config.js to match your new component names.\n\n### Setting up NPM Publishing\n\n1. Rename your library:\n    - the folder\n    - repo on Github\n1. Update the `package.json`:\n    - change the `name` and `description` of your app\n    - change the URLs of your `homepage` and `repository`\n1. Create an account on `npmjs.org` if you don't have one already.\n\n### Publishing to NPM\n\nThe scripts in the `package.json` file do all of the heavy lifting.\n\n1. Commit and push all changes to your github repo.\n1. Run `yarn publish`:\n    - login to NPM using your credentials if asked.\n    - enter the new version number using symver.\n    - wait for the code to be transpiled and published to NPM.\n    - wait for the styleguide to be built and deployed to GHPages.\n1. Visit your published library on NPM.\n1. Visit your deployed Styleguide on GHPages.\n\n### Deploying Styleguide to GHPages\n\nYou can optionally deploy the styleguide to GHPages without publishing to NPM.\n\n1. Run `yarn deploy`\n1. There is a `predeploy` hook that builds the Styleguide.\n1. That's it!\n\n# Other Resources\n\nHere's a great writeup that walks you through a slightly different stack:\nhttps://itnext.io/how-to-write-your-own-reusable-react-component-library-a57dc7c9a210\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funfoldingword-box3%2Fhello-world-react-component-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funfoldingword-box3%2Fhello-world-react-component-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funfoldingword-box3%2Fhello-world-react-component-library/lists"}