Welcome to base-project-npm-package!

Hi! It's a guide where you going to can know how packaging project React, build and publish in a repository npm.

What does it?

These guide will show the following topics:

• Explains the package.json-
• How to publish the project npm-package
• How use the component

Structure directory

   {
  "private": false,
  "name": "@viamericas/viacheck-check-processing",
  "version": "2.0.0",
  "description": "A React component scan and deposit checks.",
  "main": "build/index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack --watch --mode development --devtool inline-source-map",
    "start:dev": "webpack-dev-server --watch --config ./webpack.config.dev.js",
    "start:source": "webpack --watch --mode development --devtool source-map",
    "build": "webpack --mode production",
    "precommit": "lint-staged",
    "lint": "eslint .",
    "prepush": "yarn test"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "pretty-quick --staged",
      "eslint src/ --fix",
      "git add"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Viamericas/base-project-npm-package.git"
  },
  "keywords": [
    "react",
    "check procesing page",
    "scan"
  ],
  "author": "Cindy Milena Lamadrid Jaraba",
  "license": "ISC",
  "peerDependencies": {
    "@viamericas/viacheck-detail-check-processing": "^1.0.26",
    "@viamericas/viam-alert-messages": "^2.0.8",
    "axios": "^0.19.0",
    "base64-arraybuffer": "^0.2.0",
    "i18next": "^18.0.1",
    "i18next-xhr-backend": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "utif": "^3.1.0"
  },
  "dependencies": {
    "@viamericas/viacheck-detail-check-processing": "^1.0.26",
    "@viamericas/viam-alert-messages": "^2.0.6",
    "axios": "^0.19.0",
    "base64-arraybuffer": "^0.2.0",
    "i18next": "^18.0.1",
    "i18next-xhr-backend": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-i18next": "^11.2.2",
    "utif": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@testing-library/react": "^9.1.3",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "css-loader": "^3.2.0",
    "eslint": "6.1.0",
    "eslint-config-airbnb": "18.0.1",
    "eslint-config-prettier": "^6.1.0",
    "eslint-loader": "^3.0.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "husky": "^3.0.5",
    "jest": "^24.9.0",
    "lint-staged": "^9.2.5",
    "prettier": "^1.18.2",
    "pretty-quick": "^1.11.1",
    "react-test-renderer": "^16.9.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.9.0"
  }
}

See into to .babelrc

It's library for will transpilation your code jsx to javascript.

{
    // They are the necessary components for code transpilation.
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    // Here: You can add the necessary add-ons to interpret the writing style of the code.
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
 }

Follow the steps below:

• npm login
• npm build
• npm publish or npm publish --scope=organization name
• "--scope": is only necessary if the package name in the package.json file does not have the company name as a prefix. Always the company name must be with the "@-2 at the beginning and a separator "/" at the end in the package.json file: @viamericas/demo-react-to-npm-package

   {
  	"name": "@viamericas/demo-react-to-npm-package",
  		....
  }

How it works according to the environment?

If you are going to deploy in production

# In your package project:
npm build
npm publish
# Remember the company name in the package.json or --scope in npm command

# In the contnent project:
npm install @company_name/package_name # If is a private business package
npm install package_name # If is a public business package

If you are going to deploy in development mode

# In your package project:
# Make sure that the package name in the package.json file does not have the company name
npm start # you can use this command if you want to run development mode.

npm run start:source # If you want to run development mode with source_map, you can use this command if you are going to work with a debugger

npm link # This command will make a package works locally in your PC as temp package.

# In the contnent project:
npm link package_name # It's the same as running npm i package_name

• When you finish testing in development, remember to remove the npm link

# In the content project
npm unlink package_name

# In the package project
npm unlink

How use it?

import CheckProcessing from '@viamericas/viacheck-check-processing';

const params = { user, // login user agencyByDefault: branch, // branch token, // cognito token userBranchs: userBranchs.join(','), // All barch of the user userGroups, //Admin,Agent clientUrl: process.env.REACT_APP_API_URL, //Url of viacheck Api depositUrl: process.env.REACT_APP_URL_VIACHECK_DEPOSIT, //Url of viacheck deposit Api gateway ocrUrl: process.env.REACT_APP_URL_OCR, //Url of Ocr Api agencyName:"Dummy A00765", //Agency Name viacheckSettings:{ //Viacheck configurations "maxAmountPerCheck": 700.00, "maxAmountPerDay": 0.00, "ownLicense": false, "mva": 1.00, "stateCode": "AZ", "bank": "NABCO", "isGVerify": true, "endorsementText": "PAY TO THE ORDER OF @FLIB AS - SA@NCXXBFM. PAY TO THE ORDER OF VIAMERICAS CORP." }

          <CheckProcessing
              params={params} // parameters
              language={language} // language. es, en
              languageURL={process.env.REACT_APP_BUCKECT_LANGUAGE_URL} url to get the the traduction depending of the language selected
              token={localStorage.getItem('token')} // cognito token
              loadingImage="./assets/loading.gif" // gif for loading
              scannerReady="./assets/scannerReady.png" // image to show when the scaner is ready
              addNewStateRanger={addNewStateRanger} // Ranger method to configure scanner status
              addOnLostConnectionRanger={addOnLostConnectionRanger} // Ranger method to configure the conection of scanner
              addOnBusySocket={addOnBusySocket} // Ranger method to configure when the web socket is busy
            />