https://github.com/dreamsparkx/react-library-boilerplate

A boilerplate for react library
https://github.com/dreamsparkx/react-library-boilerplate

boilerplate library module npm npm-package react

Last synced: 9 days ago
JSON representation

A boilerplate for react library

• Host: GitHub
• URL: https://github.com/dreamsparkx/react-library-boilerplate
• Owner: dreamsparkx
• Created: 2020-07-03T18:21:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T00:19:42.000Z (over 1 year ago)
• Last Synced: 2023-03-04T02:08:30.441Z (over 1 year ago)
• Topics: boilerplate, library, module, npm, npm-package, react
• Language: JavaScript
• Homepage: https://dreamsparkx.github.io/react-library-boilerplate/
• Size: 8.33 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-library-boilerplate

[![Dependency Status](https://david-dm.org/dreamsparkx/react-library-boilerplate.svg)](https://david-dm.org/dreamsparkx/react-library-boilerplate)

The main purpose of this repository is to give users structured react library boilerplate.

```sh

cd your-module

npx semantic-release-cli setup

```

edit github workflow yml

```yml

name: module

on:

  release:

    types: [published]

  push:

    branches:

      - master

  pull_request:

  schedule:

    - cron: '0 12 * * *'

jobs:

  build:

    name: Test & Build

    runs-on: ${{ matrix.os }}

    strategy:

      matrix:

        os: [ubuntu-latest, macos-latest]

        node: [10, 12, 14]

    steps:

      - uses: actions/checkout@v2

        with:

          ref: ${{ github.ref }}

      - name: Setup Node

        uses: actions/setup-node@v1

        with:

          node-version: ${{ matrix.node }}

      - name: Cache dependencies

        uses: actions/cache@v2

        with:

          path: ~/.npm

          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}

          restore-keys: |

            ${{ runner.OS }}-node-

            ${{ runner.OS }}-

      - name: Install dependencies

        run: npm ci

      - name: Run Linting

        run: npm run lint

      - name: Run tests

        run: npm run test

      - name: Run Build

        run: npm run build

  release:

    name: Semantic Release

    runs-on: ubuntu-latest

    if: ${{ github.ref == 'refs/heads/master' }}

    needs: build

    steps:

      - uses: actions/checkout@v2

        with:

          ref: ${{ github.ref }}

      - name: Setup Node

        uses: actions/setup-node@v1

      - name: Install dependencies

        run: npm install

      - name: Run Build

        run: npm run build

      - name: Release

        run: npm run semantic-release

        env:

          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

  deploy:

    name: Deploy

    runs-on: ubuntu-latest

    if: ${{ github.ref == 'refs/heads/master' }}

    needs: build

    steps:

      - uses: actions/checkout@v2

        with:

          ref: ${{ github.ref }}

      - name: Setup Node

        uses: actions/setup-node@v1

      - name: Install dependencies

        run: npm ci

      - name: Run Build

        run: npm run build

      - name: Deploy Storybook

        run: npm run deploy-storybook

        env:

          GH_TOKEN: ${{ secrets.GH_TOKEN }}

```

To create default storybook:

```

npx -p @storybook/cli sb init

OR

npx sb init

```

Credits:

 - https://blog.harveydelaney.com/creating-your-own-react-component-library/

 - https://github.com/jaebradley/example-rollup-react-component-npm-package