{"id":17274632,"url":"https://github.com/rip21/cra-components-development","last_synced_at":"2025-07-30T19:13:14.566Z","repository":{"id":21717054,"uuid":"93756995","full_name":"RIP21/CRA-components-development","owner":"RIP21","description":"Boilerplate for components library creation. With code-style best practices. Styleguidist auto documentation. Based on non-ejected create-react-app.","archived":false,"fork":false,"pushed_at":"2022-12-07T17:45:16.000Z","size":2603,"stargazers_count":9,"open_issues_count":39,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T23:54:54.265Z","etag":null,"topics":["boilerplate","components","create-react-app","publishing","react","styled-components","styleguide"],"latest_commit_sha":null,"homepage":"https://rip21.github.io/CRA-components-development/","language":"JavaScript","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/RIP21.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":"2017-06-08T14:10:03.000Z","updated_at":"2020-09-09T11:19:24.000Z","dependencies_parsed_at":"2022-08-07T10:01:08.422Z","dependency_job_id":null,"html_url":"https://github.com/RIP21/CRA-components-development","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/RIP21%2FCRA-components-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIP21%2FCRA-components-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIP21%2FCRA-components-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RIP21%2FCRA-components-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RIP21","download_url":"https://codeload.github.com/RIP21/CRA-components-development/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852109,"owners_count":21171839,"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":["boilerplate","components","create-react-app","publishing","react","styled-components","styleguide"],"created_at":"2024-10-15T08:54:23.569Z","updated_at":"2025-04-14T08:54:26.879Z","avatar_url":"https://github.com/RIP21.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [create-react-app](https://github.com/facebookincubator/create-react-app) for components development\n\n[![Build Status](https://travis-ci.org/RIP21/CRA-components-development.svg?branch=master)](https://travis-ci.org/RIP21/CRA-components-development)\n[![Greenkeeper badge](https://badges.greenkeeper.io/RIP21/CRA-components-development.svg)](https://greenkeeper.io/)  \nIs a minimal yet another  boilerplate based on top of the famous \ncreate-react-app, made especially for creating components libraries with \nrich online docs powered by [Styleguidist](https://github.com/styleguidist/react-styleguidist) and all power of CRA.\n \n ### Includes: \n - [Styleguidist](https://github.com/styleguidist/react-styleguidist) for automatic styleguide docs generation\n - stylelint of [styled-components](https://github.com/styled-components/styled-components) \n - [prettier](https://github.com/prettier/prettier) \n - eslint\n - [create-react-app](https://github.com/facebookincubator/create-react-app)\n - [react-app-rewired](https://github.com/timarney/react-app-rewired)\n - babel with CRA preset and ENV preset (https://www.npmjs.com/package/babel-preset-react-app) for components libs transpiling\n - Scripts for publishing components with ES6 imports support\n - Publishing script for handy \n ```javascript \n import Button from \"components-lib/Button\";\n ``` \n imports. Which means no import of unnecessary components! \n And also tree shaking!\n - Enzyme with `jest-enzyme` and `jest-styled-components` goodness!\n - [lint-staged 💩](https://github.com/okonet/lint-staged) installed for running prettier before any commit. \n So no wrong codestyle will leak into the codebase!\n - GitHub pages styleguide automatic deploy right after next release\n\n## Commands\nTo develop components run\n```bash\nnpm run styleguide \n```\n\nTo test\n```bash\nnpm run test\n# For watch mode\nnpm run test:watch\n# For tests with coverage info\nnpm run test:coverage\n```\n\nTo publish your lib run (which also will run a build process)\n```bash\nnpm run release\n```\n\nAlso you can run `build, (stylelint, eslint, prettier) -\u003e stylecheck, demo:start / build` for your \namazing landing page for your component lib and other commands \nwhich are pretty descriptive but just a part of the release/build process :)\n\n## More details\nAs an example in boilerplate there is a `normalize.css` imported to styleguidist.\nLanding page is empty styled with `styled-components`.\n\nSince I use `styled-components` every day. There is also stylelint with \n`styled-components` preprocessor for linting styles in them. And hence \nno stylelinting of plain CSS.\n\nAll your components should be in `src/components` folder, so it will be visible\nby styleguidist and so they will be bundled to the `lib` for future publishing.\n\nThere is CRA underneath, so you can use all its goodness to write your landing page\nand also for testing your components library, collect test coverage on them etc.\nAll setup this way so they will run only on `src/components` and will ignore all other \nfolders which are not related to components library.\n\nReadme for your lib lay down in `LIBRARY.md` and will automatically be attached to \nthe newly released version of the lib.\n\n## More on release process\nBasically when you run `npm run release`\nIt will run prettier, all linters, then all tests, and after all will bundle\nignoring `test.js` your components. After that it will generate `package.json` for\n`lib` folder so handy `name/Button` imports will be possible. Then he will run `npm publish` \non that newly created `package.json` and publish on Github Pages updated docs of \nyour components.\n\nAll you need to do is to change package name in `scripts/copyBuildFiles.js` on line 52.\nVersion of the components lib will be derived from root `package.json`\n\n## Known issues\nIf you run `npm run deploy:docs` or any other scripts that call him too, on Windows `cmd.exe` you will\nget error like \n```\nbash: /dev/tty: No such device or address\nerror: failed to execute prompt script (exit code 1)\nfatal: could not read Username for 'https://github.com': Invalid argument\n```\nTo successfully run it on Windows please use git bash or cygwin or anything that simulates linux bash.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frip21%2Fcra-components-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frip21%2Fcra-components-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frip21%2Fcra-components-development/lists"}