@bigbinary/neeto-team-members v2.2.3

@bigbinary/neeto-team-members

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:

   ```zsh
   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