Gathering detailed insights and metrics for @bigbinary/neeto-team-members-frontend
Gathering detailed insights and metrics for @bigbinary/neeto-team-members-frontend
Gathering detailed insights and metrics for @bigbinary/neeto-team-members-frontend
Gathering detailed insights and metrics for @bigbinary/neeto-team-members-frontend
npm install @bigbinary/neeto-team-members-frontend
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Total Downloads
348,057
Last Day
133
Last Week
1,006
Last Month
4,750
Last Year
119,877
Minified
Minified + Gzipped
Latest Version
4.4.16
Package Id
@bigbinary/neeto-team-members-frontend@4.4.16
Unpacked Size
1.95 MB
Size
418.28 kB
File Count
108
NPM Version
8.19.2
Node Version
18.12.1
Publised On
16 Jan 2025
Cumulative downloads
Total Downloads
Last day
-28.5%
133
Compared to previous day
Last week
-12.9%
1,006
Compared to previous week
Last month
-49.9%
4,750
Compared to previous month
Last year
-34.9%
119,877
Compared to previous year
2
45
119
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.
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.
Add this line to your application's Gemfile:
1 source "NEETO_GEM_SERVER_URL" do 2 # ...existing gems 3 4 gem 'neeto-team-members-engine' 5 end
And then execute:
1bundle install
Add this line to your application's config/routes.rb
file:
1 mount NeetoTeamMembersEngine::Engine => "/neeto_team_members_engine"
Run the command to bring in all migrations required from the engine to the host application:
1bundle exec rails neeto_team_members_engine:install:migrations
Add the migrations to the database:
1bundle exec rails db:migrate
Now, run the generator which will copy the required files.
1bundle 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.
You can learn more about the setup and usage here:
The package exports the four components: Roles
, TeamMembers
, Permissions
, and ManageRole
.
Install the latest NeetoTeamMembersNano
package using the below command:
1yarn add @bigbinary/neeto-team-members-frontend
Check the Frontend package development guide for step-by-step instructions to develop the frontend package.
Roles
This component manages team roles. It includes functionalities such as adding roles and allowing updates to roles with associated permissions.
config
: Configuration object that includes mandatory specifications for header breadcrumbs and role permissions. It also allows optional configurations for help articles and permission hierarchy.Refer to the Roles section for detailed information on the available configurations for the Roles
component.
1import React from "react"; 2 3import { Roles } from "@bigbinary/neeto-team-members-frontend"; 4import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; 5import { ToastContainer } from "react-toastify"; 6 7import SideBar from "./components/Common/SideBar"; 8 9const App = () => ( 10 <BrowserRouter> 11 <div className="flex"> 12 <SideBar /> 13 <Switch> 14 <Route exact path="/roles"> 15 <Roles config={ROLES_CONFIG} /> 16 </Route> 17 </Switch> 18 </div> 19 <ToastContainer /> 20 </BrowserRouter> 21); 22 23export 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.
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.Refer to the TeamMembers section for detailed information on the available configurations for the TeamMembers
component.
1import React from "react"; 2 3import { TeamMembers } from "@bigbinary/neeto-team-members-frontend"; 4import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; 5import { ToastContainer } from "react-toastify"; 6 7import SideBar from "./components/Common/SideBar"; 8 9const App = () => ( 10 <BrowserRouter> 11 <div className="flex"> 12 <SideBar /> 13 <Switch> 14 <Route exact path="/members"> 15 <TeamMembers config={MEMBERS_CONFIG} /> 16 </Route> 17 </Switch> 18 </div> 19 <ToastContainer /> 20 </BrowserRouter> 21); 22 23export 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.
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.Refer to the Permissions section for detailed information on the available configurations for the TeamMembers
component.
1import React from "react"; 2 3import { Permissions } from "@bigbinary/neeto-team-members-frontend"; 4import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; 5import { ToastContainer } from "react-toastify"; 6 7import SideBar from "./components/Common/SideBar"; 8 9const App = () => ( 10 <BrowserRouter> 11 <div className="flex"> 12 <SideBar /> 13 <Switch> 14 <Route exact path="/permissions"> 15 <Permissions 16 permissionRelationConfig={PERMISSION_RELATION_CONFIG} 17 permissions={PERMISSIONS} 18 /> 19 </Route> 20 </Switch> 21 </div> 22 <ToastContainer /> 23 </BrowserRouter> 24); 25 26export default App;
ManageMembers
The component is a form-based interface for adding or editing team members.
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.Refer to the ManageMembers section for detailed information on the available configurations for the ManageMembers
component.
1import React from "react"; 2 3import { ManageMembers } from "@bigbinary/neeto-team-members-frontend"; 4import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; 5import { ToastContainer } from "react-toastify"; 6 7import SideBar from "./components/Common/SideBar"; 8 9const App = () => ( 10 <BrowserRouter> 11 <div className="flex"> 12 <SideBar /> 13 <Switch> 14 <Route exact path="/permissions"> 15 <ManageMembers 16 componentConfig={COMPONENT_CONFIG} 17 config={CONFIG} 18 onComplete={() => void} 19 /> 20 </Route> 21 </Switch> 22 </div> 23 <ToastContainer /> 24 </BrowserRouter> 25); 26 27export default App;
Profile
The Profile
component encapsulates the user profile functionality, integrating a Pane
component for displaying profile details and a usePaneState
hook to efficiently manage the state associated with the Pane
.
Profile.Pane
: The component is a pane-based interface for viewing and editing the user's profile details.
Profile.usePaneState
: A hook to manage the state of the profile pane.
1import { Profile } from "@bigbinary/neeto-team-members-frontend"; 2 3const [isOpen, setIsOpen] = Profile.usePaneState(); 4 5return ( 6 <> 7 <button onClick={() => setIsOpen(true)}> Open profile pane</button> 8 <button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}> 9 Toggle Profile pane 10 </button> 11 </> 12);
Consult the building and releasing packages guide for details on how to publish.
Projects | TeamMembers | Roles | Permissions |
---|---|---|---|
NeetoAuth | :white_check_mark: | :white_check_mark: | - |
NeetoCal | :white_check_mark: | :white_check_mark: | - |
NeetoChangelog | :white_check_mark: | :white_check_mark: | - |
NeetoChat | :white_check_mark: | :white_check_mark: | - |
NeetoCI | :white_check_mark: | :white_check_mark: | - |
NeetoCourse | :white_check_mark: | :white_check_mark: | - |
NeetoCRM | :white_check_mark: | :white_check_mark: | - |
NeetoDeploy | :white_check_mark: | :white_check_mark: | :white_check_mark: |
NeetoDesk | :white_check_mark: | :white_check_mark: | - |
NeetoForm | :white_check_mark: | :white_check_mark: | - |
NeetoGit | :white_check_mark: | :white_check_mark: | - |
NeetoInvisible | :white_check_mark: | :white_check_mark: | - |
NeetoInvoice | :white_check_mark: | :white_check_mark: | - |
NeetoKB | :white_check_mark: | :white_check_mark: | - |
NeetoPlanner | :white_check_mark: | :white_check_mark: | - |
NeetoPlaydash | :white_check_mark: | :white_check_mark: | - |
NeetoQuiz | :white_check_mark: | :white_check_mark: | - |
NeetoRecord | :white_check_mark: | :white_check_mark: | - |
NeetoReplay | :white_check_mark: | :white_check_mark: | - |
NeetoRunner | :white_check_mark: | :white_check_mark: | - |
NeetoSite | :white_check_mark: | :white_check_mark: | - |
NeetoTestify | :white_check_mark: | :white_check_mark: | - |
NeetoTower | :white_check_mark: | :white_check_mark: | - |
NeetoWheel | :white_check_mark: | :white_check_mark: | - |
NeetoWireframe | :white_check_mark: | :white_check_mark: | - |
No vulnerabilities found.
No security vulnerabilities found.