wise-introvert / react-component-library

React component library built using RollupJS and TypeScript

react-component-library

React component library boilerplate, created using rollup and typescript.

Technologies used

• RollupJS
• TypeScript
• ReactJS
• React Testing Library
• Husky
• Commitizen
• Commitlint
• Storybook
• SASS

Instructions

• Simply clone this repo and start coding!

Commands

• yarn build

  Compile the code using RollupJS

• yarn test

  Test the code using react-testing-library and Jest

• yarn storybook

  Preview your components using StorybookJS

• yarn lint

  Lint using ESLint

• yarn clean

  Cleans `dist` directory and replaces it with an empty folder (used by build script)

Enable automatic semantic versioning (Optional)

• Only allow squash merging of pull requests

• Install https://github.com/apps/semantic-pull-requests

• Create npm token using npm token create or https://www.npmjs.com/settings

• Add token to repo secrets as NPM_TOKEN

• Add release workflow file to .github/workflows/release.yml

  name: Release npm package
  
  on:
    push:
      branches:
        - master
  
  jobs:
    release:
      name: Release
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@master
        - uses: actions/setup-node@v1
          with:
            node-version: "12.x"
        - run: yarn install --frozen-lockfile
        - run: yarn build --if-present
        - run: yarn test
        - run: npx semantic-release
          env:
            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
            NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

• Set version to 0.0.0-development in package.json

• Install semantic-release as a dev dependency: yarn -D semantic-release

  Watch Zeke Sikelianos's demo at https://www.youtube.com/watch?v=rCXq86FOlzQ for a more detailed explanination

Author

👤 Wise Introvert

• Twitter: @wise__introvert
• Github: @wise-introvert

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!