React Component Library Starter

I found it a bit annoying that I couldn't find a good starter package for creating a React Component Library in Typescript with automatic semantic release setup, so I decided to write this package

Features:

• tsdx - a wonderful zero-config cli that helps with all that TypeScript developing, building and testing.
• Configured Storybook (courtesy of tsdx).
• CI/CD with automatic semantic version and changelog via conventional commits, release via semantic-release and conventional-commits
• Configured support for SCSS modules
• Coverage badge with coveralls

Getting started

🤷‍♂️I will try to make this a bit more automatic, but until then some manual work will be needed.

I would start with cloning this repo locally git clone [email protected]:ovidb/react-component-library-starter.git

Then just rename the project folder, remove the .git folder so you can start fresh with a git init

mv react-component-livrary-starter my-react-component
cd my-react-component
rm -rf .git
git init
npm install

Then Rename project name, description, homepage, bugs, repository links in package.json and make sure the version is 0.0.0. This is required so that you can sensibly start at version 1.0.0 when semantic release will run in CircleCI.

• in README.md change the link of the coverage badge to point to your own repository You will have to signup for account with coveralls.io. We'll setup this later on, but for now you can just put a link that will match your github repo url.

You should also change the README.md file to describe what is so fabulous about the component you're building

Create a new repo in github and add it as an origin

git remote add origin [email protected]:your-user-name/my-component-library.git

Now let's commit the changes

⚠️ Warning

You will need to use conventional commit format to benefit of automated semantic release and changelog generation

Commit and and push

yarn commit
git push

At this point CircleCI will probably fail because you haven't setup the required tokens

Configure CI/CD:

To support semantic-release you'll have to generate a Github token and npm token.

Login to CircleCI. Find your project and add environment variables for GITHUB_TOKEN and NPM_TOKEN environment variables. These are needed by semantic-release for GITHUB_TOKEN, NPM_TOKEN and CODECOV_TOKEN and a CACHE_VERSION. CACHE_VERSION is used to manually invalidate CircleCI cache if needed. The initial value can be 00001. The reason for the leading 0s is so that the latest value is visible in Environment Variables view.

Now you can head back to CircleCI and rerun the release workflow.