@bigbinary/neeto-team-members

2.2.3 • Public • Published

@bigbinary/neeto-team-members

npm npm

neetoTeamMembers is the library that manages team members across neeto products.

Installation

  1. neetoTeamMembers 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-commons-frontend@2.0.1 @bigbinary/neeto-icons@1.8.37 @bigbinary/neetoui@3.5.15 axios@0.27.2 classnames@2.3.1 formik@2.2.9 ramda@0.28.0 react-router-dom@5.3.3 react-toastify@9.0.8 yup@0.32.11
  2. Now install the latest neetoTeamMembers package using the below command:

    yarn add @bigbinary/neeto-team-members@2.2.3

Usage

import React from "react";

import { Roles, TeamMembers } from "@bigbinary/neeto-team-members";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import SideBar from "./components/Common/SideBar";

const App = () => (
  <BrowserRouter>
    <div className="flex">
      <SideBar />
      <Switch>
        <Route exact path="/members">
          <TeamMembers config={MEMBERS_CONFIG} />
        </Route>
        <Route exact path="/roles">
          <Roles config={ROLES_CONFIG} />
        </Route>
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default App;

By default TeamMembers and Roles component will render without the config prop.

Configurations

TeamMembers component

Some of the configurations that are available for TeamMembers components are:

  • To toggle the Manage Roles button visibility in the right sub-header, please provide the roles button props as below. It uses the same props as neetoUI Button component.

    const MEMBERS_CONFIG = {
      rolesButtonProps: {
        to: "/roles",
      },
    };
  • To override the activation and deactivation alert box title or message, please use the below configuration.

    const MEMBERS_CONFIG = {
      alert: {
          title: member =>
            member.active ? "Deactivate member" : "Activate member",
          message: member =>
            member.active
              ? `You are deactivating member ${member?.name}. Are you sure you want to proceed?`
              : `You are activating member ${member?.name}. Are you sure you want to proceed?`,
        },
    }

Roles component

Some of the configurations that are available for Roles components are:

  • (Deprecated) To specify the location for the members page in the neetoUI Header component's breadcrumb, use the below configuration.

      const ROLES_CONFIG = {
        membersPageUrl: "/members",
      };
  • To specify the neetoUI Header component's breadcrumb, use the below configuration.

      const ROLES_CONFIG = {
        header: {
          breadcrumbs: [
            {
              text: "Settings",
              link: "/settings",
            },
          ],
        },
      };

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

The neetoTeamMembers package gets auto-published to NPM for every new merge to the master branch. You can checkout the publish workflow in GitHub Actions to get a live update.

Integrations

Projects Integrated Projects Integrated
neetoAnalytics neetoQuiz
neetoCal neetoReplay
neetoChangelog neetoRunner
neetoCourse neetoStore
neetoCRM neetoTestify
neetoEngage neetoWheel
neetoForm neetoWireframe
neetoGrow neetoAuth
neetoInvisible neetoChat
neetoKB neetoDesk
neetoPlanner neetoInvoice
neetoPopups

Readme

Keywords

none

Package Sidebar

Install

npm i @bigbinary/neeto-team-members

Weekly Downloads

2

Version

2.2.3

License

MIT

Unpacked Size

1.41 MB

Total Files

5

Last publish

Collaborators

  • neetohq
  • bigbinarybot
  • yedhink
  • neerajdotname