@bigbinary/neeto-approvals-frontend

@bigbinary/neeto-approvals-frontend

neetoApprovals is a library that manages approvals across neeto products.

Installation

1. neetoApprovals has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:

   yarn add @bigbinary/neeto-icons@1.8.46 @bigbinary/neetoui@4.1.33 axios@1.2.1 classnames@2.3.2 formik@2.2.9 ramda@0.28.0 react-router-dom@5.3.3 react-toastify@8.2.0 react-query@3.39.2 yup@0.32.11
   

2. Now install the latest neetoApprovals package using the below command:

   yarn add @bigbinary/neeto-approvals-frontend
   

Usage

import React from "react";

import { routes } from "common/routes";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./Common/SideBar";

import { Approvals } from "neetoapprovals";

const Main = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route
          path={routes.approvals}
          render={() => (
            <Approvals
              config={{
                approvalsPath: routes.approvals,
                templateUrl: "templatesUrl",
                requestUrl: "requestsUrl",
                templatePlaceholders: [
                  {
                    category: "ticket",
                    label: "Ticket",
                    variables: [
                      { key: "id", label: "ticket.id" },
                      { key: "number", label: "ticket.number" },
                      { key: "subject", label: "ticket.subject" },
                    ],
                  },
                  {
                    category: "requester",
                    label: "Customer",
                    variables: [
                      { key: "id", label: "customer.id" },
                      { key: "name", label: "customer.name" },
                      { key: "email", label: "customer.email" },
                    ],
                  },
                ],
                breadcrumbs: [
                  { text: "Settings", link: routes.settings },
                  { text: "General settings", link: routes.settings.general },
                  { text: "Approvals" },
                ],
              }}
            />
          )}
        />
        <Redirect to={routes.approvals} />
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default Main;

Configurations

The configurations for the components present in this NPM package are given below. Click on them to read more:

1. Approvals
2. Form

Development

1. Install all the dependencies by executing the following command

   yarn install
   

2. See the changes in the example app by executing the following command:

   yarn dev
   

Building and releasing.

The @bigbinary/neeto-approvals-frontend package gets published to NPM when we merge a PR with patch, minor or major label to the main branch. The patch label is used for bug fixes, minor label is used for new features and major label is used for breaking changes. You can checkout the Create and publish releases workflow in GitHub Actions to get a live update.

In case if you missed to add the label, you can manually publish the package. For that first you need to create a PR to update the version number in the package.json file and merge it to the main branch. After merging the PR, you need to create a new github release from main branch. Whenever a new release is created with a new version number, the github actions will automatically publish the built package to npm. You can checkout the Publish to npm workflow in GitHub Actions to get a live update.

Please note that before publishing the package, you need to verify the functionality in some of the neeto web-apps locally using yalc package manager. The usage of yalc is explained in this video: https://youtu.be/QBiYGP0Rhe0