revv-pkg

A template for revvsales npm packages

Getting started

• Install node v12.16.0 in your system using NVM. How to guide
• Open a terminal & execute the below cmd one by one from the root path
  • npm install -g yarn
  • git clone https://github.com/revvsales/revv-pkg.git
  • cd revv-pkg
• Comment all the lines in example/src/App.js path and save the file.
• Now go back to terminal & execute the below cmd.
  • yarn install
  • yarn start
    • Once the app starts successfully, you should get something like this Watching source, compiling to dist:,
    • Now stop the process by entering ctrl+c for windows or cmd+c for mac.
  • cd example
  • yarn install
    • If the install is not successfull and you are getting an error like this An unexpected error occurred: "ENOENT: no such file or directory
    • Enter yarn install again in the terminal.
  • cd ..
  • yarn link
  • yarn link revv-pkg
• Un-comment all the lines in example/src/App.js path and save the file. (Lint will throw error & prevent running of the app because dist/ folder is not generated & git ignored. To hande, this step is done).
• Open Visual Studio Code & install the following plugins.
  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  • https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
  • https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
• Open User settings.json in vscode editor by hitting (cmd+,) in case of mac and (ctrl+,) in case of windows and add the following code and save the file.
  • Note: You can add your own setting to customize editor, but these are mandatory settings needed to run the app

{
  "breadcrumbs.enabled": true,
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "::",
      "color": "#f78c6c",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "eslint.enable": true,
  "window.zoomLevel": 0,
  "workbench.activityBar.visible": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.validate.enable": false,
}

Development

Local development is broken into two parts (ideally using two tabs).

First, navigate to root path where project is cloned.

yarn start # runs watch flag of the npm library

The second part will be running the example/ create-react-app that's linked to the local version of your module, navigate to root path where project is cloned

# (in another tab)
cd example
yarn start # runs create-react-app dev server

If all goes well, you should see the blow image in the browser.

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Guidelines

Branch Name

• Creating a branch for a
  • feature feat/<branchName>
  • bug fix fix/<branchName>
  • refactor refactor/<branchName>
  • performance perf/<branchName>
  • css updates style/<branchName>

Commit Message

type	description
feat	A new feature
fix	A bug fix
docs	Documentation only changes
style	Css changes
refactor	A code change that neither fixes a bug nor adds a feature
perf	A code change that improves performance
test	Adding missing or correcting existing tests
chore	Changes to the build process or auxiliary tools and libraries such as documentation generation

Example Code

For Feature:

feat: Integrated custom table feature 

For Fix:

fix: Fixed table hover issue
fix(701134547): Handled else condition  // For bug raised from monday.com
fix(ODIN-1JZ): Fixed 'length' of null   // For bug raised from sentry

Pull Request Rules

• The Title and Commit Message should follow Commit Message Conventions, only then you can merge your PR.

Release Types

commit msg conventions	description	release type
feat	A new feature	minor
fix	A bug fix	patch
docs	Documentation only changes	/
style	Css and changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)	/
refactor	A code change that neither fixes a bug nor adds a feature	/
perf	A code change that improves performance	patch
test	Adding missing or correcting existing tests	/
chore	Changes to the build process or auxiliary tools and libraries such as documentation generation	/
If the body contains `BREAKING CHANGE`, `BREAKING CHANGES` or `BREAKING` it will result in a a new major release
The highest release type will determine the global release type when multiple commits are made

Example Code:

Resulting in a patch release:

fix(dish): don't overcook rare steaks

Resulting in a minor release:

feat(dish): add mac and cheese

Resulting in a major release:

feat(chef): add chef Bob
BREAKING CHANGE:   
Chef Louis has been fired, all dishes must go to chef Bob

Install

yarn install --save revv-pkg

Usage

import React, { Component } from 'react'

import { MyComponent } from 'revv-pkg'
import 'revv-pkg/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Documentation

Coming soon.

License

MIT Ajai J