@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:

   yarn add @bigbinary/[email protected] @bigbinary/[email protected] @bigbinary/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

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

   yarn add @bigbinary/[email protected]

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 | :white_check_mark: | neetoQuiz | :white_check_mark: | | neetoCal | :white_check_mark: | neetoReplay | :white_check_mark: | | neetoChangelog | :white_check_mark: | neetoRunner | :white_check_mark: | | neetoCourse | :white_check_mark: | neetoStore | :white_check_mark: | | neetoCRM | :white_check_mark: | neetoTestify | :white_check_mark: | | neetoEngage | :white_check_mark: | neetoWheel | :white_check_mark: | | neetoForm | :white_check_mark: | neetoWireframe | :white_check_mark: | | neetoGrow | :white_check_mark: | neetoAuth | :x: | | neetoInvisible | :white_check_mark: | neetoChat | :x: | | neetoKB | :white_check_mark: | neetoDesk | :x: | | neetoPlanner | :white_check_mark: | neetoInvoice | :x: | | neetoPopups | :white_check_mark: | | |