@sachinvedaraj/my-pkg-test
v1.0.5
Published
A template for revvsales npm packages
Downloads
2
Readme
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 orcmd+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 becausedist/
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>
- feature
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