@sachinvedaraj/my-pkg-test v1.0.5

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

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

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