@bigbinary/neeto-team-members-frontend 2.2.4

package/README.md

@@ -0,0 +1,150 @@
+# @bigbinary/neeto-team-members-frontend
+
+![npm](https://img.shields.io/npm/v/@bigbinary/neeto-team-members-frontend?color=greenyellow)
+![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-team-members-frontend?color=greenyellow)
+
+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:
+
+    ```zsh
+    yarn add @bigbinary/neeto-team-members-frontend@2.2.4
+    ```
+
+## Usage
+
+```jsx
+import React from "react";
+
+import { Roles, TeamMembers } from "@bigbinary/neeto-team-members-frontend";
+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.
+
+    ```js
+    const MEMBERS_CONFIG = {
+      rolesButtonProps: {
+        to: "/roles",
+      },
+    };
+    ```
+
+- To override the activation and deactivation alert box title or message, please use the below configuration.
+
+    ```js
+    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.
+
+    ```js
+      const ROLES_CONFIG = {
+        membersPageUrl: "/members",
+      };
+    ```
+
+- To specify the neetoUI Header component's breadcrumb, use the below configuration.
+
+    ```js
+      const ROLES_CONFIG = {
+        header: {
+          breadcrumbs: [
+            {
+              text: "Settings",
+              link: "/settings",
+            },
+          ],
+        },
+      };
+    ```
+
+## Development
+
+1. Install all the dependencies by executing the following command
+
+    ```zsh
+    yarn install
+    ```
+
+2. See the changes in the example app by executing the following command:
+
+    ```zsh
+    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: |                 |                    |