@bigbinary/neeto-team-members-frontend 2.10.3 → 2.10.5

package/README.md

@@ -1,19 +1,212 @@
 # neeto-team-members-nano
 
-This repo acts as the source of truth for the new nano's structure, configs,
-data etc.
+The `neeto-team-members-nano` facilitates the administration of team members within neeto applications. The nano exports the `@bigbinary/neeto-team-members-frontend` NPM package and `neeto-team-members-engine` Rails engine for development.
 
-# Local Development Setup
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+      * [Installation](#installation)
+      * [Usage](#usage)
+    - [Frontend package](#frontend-package)
+      * [Installation](#installation-1)
+      * [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
 
-1. Setup
-   [Instructions](https://github.com/bigbinary/neeto-engineering/tree/main/Local-Development-Setup).
+# Development with Host Application
+## Engine
+The engine is used to seed the roles and permissions for the organization. It also provides concerns to handle common logic related to `User` model.
 
-2. Run `yarn build` to bundle the app.
+### Installation
+1. Add this line to your application's Gemfile:
+   ```ruby
+    source "NEETO_GEM_SERVER_URL" do
+      # ..existing gems
 
-3. Visit http://spinkart.lvh.me:9100 and login with email `oliver@example.com`
-   and password `welcome`.
+      gem 'neeto-team-members-engine'
+    end
+   ```
+2. And then execute:
+   ```shell
+   bundle install
+   ```
+3. Add this line to your application's `config/routes.rb` file:
+   ```ruby
+    mount NeetoTeamMembersEngine::Engine => "/neeto_team_members_engine"
+   ```
+4. Run the command to bring in all migrations required from the engine to the host application:
+   ```shell
+   bundle exec rails neeto_team_members_engine:install:migrations
+   ```
+5. Add the migrations to the database:
+   ```shell
+   bundle exec rails db:migrate
+   ```
+6. Now, run the generator which will copy the required files.
+   ```shell
+   bundle exec rails g neeto_team_members_engine:install
+   ```
+   This command will try to inject the engine's route as well as create a `config/permissions.yml` file to add the permissions required.
 
-# Publish instructions
+### Usage
+You can learn more about the setup and usage here:
+1. [Permissions](./docs/engine/permissions.md)
+2. [Roles](./docs/engine/roles.md)
+3. [Concerns](./docs/engine/concerns.md)
 
-1. [Engine and package installation](./docs/engine-and-package-installation.md)
-2. [Building and releasing](./docs/building-and-releasing.md)
+## Frontend package
+The package exports the four components: `Roles`, `TeamMembers`, `Permissions`, and `ManageRole`.
+
+### Installation
+Install the latest `NeetoTeamMembersnano` package using the below command:
+
+```shell
+yarn add @bigbinary/neeto-team-members-frontend
+```
+### Components
+#### `Roles`
+This component manages team roles. It includes functionalities such as adding roles and allowing updates to roles with associated permissions.
+##### Props
+- `config`: Configuration object that includes mandatory specifications for header breadcrumbs and role permissions. It also allows optional configurations for help articles and permission hierarchy.
+##### Configuration
+Refer to the [Roles](./docs/frontend/roles.md) section for detailed information on the available configurations for the `Roles` component.
+##### Usage
+```jsx
+import React from "react";
+
+import { Roles } 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="/roles">
+          <Roles config={ROLES_CONFIG} />
+        </Route>
+      </Switch>
+    </div>
+    <ToastContainer />
+  </BrowserRouter>
+);
+
+export default App;
+```
+#### `TeamMembers`
+The component offers functionalities for adding, updating and viewing team members and their roles in a tabular format. Additionally, it provides filtering options based on email, name, and role.
+##### Props
+- `config`: Configuration object that allows customization of role management, member operation permissions, UI elements like buttons and headers, callback functions, table structure, dropdown actions, and various display aspects.
+##### Configuration
+Refer to the [TeamMembers](./docs/frontend/team_members.md) section for detailed information on the available configurations for the `TeamMembers` component.
+##### Usage
+```jsx
+import React from "react";
+
+import { 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>
+      </Switch>
+    </div>
+    <ToastContainer />
+  </BrowserRouter>
+);
+
+export default App;
+```
+
+#### `Permissions`
+The component handles the rendering and management of permissions for team members. It organizes permissions into categories, provides checkboxes for selection, and supports hierarchical structures with parent-child relationships.
+##### Props
+- `permissions`: An array of permissions.
+- `isDisabled`: A boolean indicating whether the component is disabled. By default, it is false.
+- `permissionRelationConfig`: Configuration for managing parent-child relationships and unchecking permissions on select.
+##### Configuration
+Refer to the [Permissions](./docs/frontend/permissions.md) section for detailed information on the available configurations for the `TeamMembers` component.
+##### Usage
+```jsx
+import React from "react";
+
+import { Permissions } 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="/permissions">
+          <Permissions
+            permissionRelationConfig={PERMISSION_RELATION_CONFIG}
+            permissions={PERMISSIONS}
+          />
+        </Route>
+      </Switch>
+    </div>
+    <ToastContainer />
+  </BrowserRouter>
+);
+
+export default App;
+```
+
+#### `ManageMembers`
+The component is a form-based interface for adding or editing team members.
+##### Props
+- `config`: Configuration object with various options for customizing the behavior of the component.
+- `onComplete`: Callback function to be executed when the component is closed or the form is submitted.
+- `roles`: An array of roles available for team members.
+- `selectedMember`: The team member object being edited, if applicable.
+- `componentConfig`: Configuration specific to the component, including the type of pane, initial focus reference, etc.
+
+##### Configuration
+Refer to the [ManageMembers](./docs/frontend/manage_members.md) section for detailed information on the available configurations for the `ManageMembers` component.
+##### Usage
+```jsx
+import React from "react";
+
+import { ManageMembers } 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="/permissions">
+          <ManageMembers
+            componentConfig={COMPONENT_CONFIG}
+            config={CONFIG}
+            onComplete={() => void}
+          />
+        </Route>
+      </Switch>
+    </div>
+    <ToastContainer />
+  </BrowserRouter>
+);
+
+export default App;
+```
+# Instructions for Publishing
+
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.