@bigbinary/neeto-team-members-frontend 2.11.4 → 2.12.0

package/README.md

@@ -9,9 +9,9 @@ The `neeto-team-members-nano` facilitates the administration of team members wit
       - [Installation](#installation)
       - [Usage](#usage)
     - [Frontend package](#frontend-package)
-      * [Installation](#installation-1)
-      * [Instructions for development](#instructions-for-development)
-      * [Components](#components)
+      - [Installation](#installation-1)
+      - [Instructions for development](#instructions-for-development)
+      - [Components](#components)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 ## Development with Host Application
@@ -91,6 +91,7 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
 ### Components
 
 #### `Roles`
+
 ![Roles page](./docs/frontend/images/roles_page.png)
 
 This component manages team roles. It includes functionalities such as adding roles and allowing updates to roles with associated permissions.
@@ -270,6 +271,33 @@ const App = () => (
 export 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`.
+
+1. `Profile.Pane`: The component is a pane-based interface for viewing and editing the user's profile details.
+
+    ![Profile pane component](./docs/frontend/images/profile_component.png)
+
+2. `Profile.usePaneState`: A hook to manage the state of the profile pane.
+
+    ###### Usage
+
+    ```jsx
+    import { Profile } from "@bigbinary/neeto-team-members-frontend";
+
+    const [isOpen, setIsOpen] = Profile.usePaneState();
+
+    return (
+      <>
+        <button onClick={() => setIsOpen(true)}> Open profile pane</button>
+        <button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
+          Toggle Profile pane
+        </button>
+      </>
+    );
+    ```
+
 ## 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.

package/app/javascript/src/translations/en.json

@@ -124,6 +124,38 @@
       "roleRequired": "Please select a role.",
       "removeSpaces": "Please remove the spaces.",
       "validEmail": "Please ensure that all email addresses are valid."
+    },
+    "profile": {
+      "common": {
+        "myProfile": "My Profile",
+        "mmddyy": "MM/DD/YYYY",
+        "ddmmyy": "DD/MM/YYYY",
+        "timeZoneOption": "{{timeZone}} - {{currentTime}}",
+        "toUpdateProfile": "To update more information visit:",
+        "neetoAuth": "neetoAuth"
+      },
+      "inputs": {
+        "label": {
+          "firstName": "First name",
+          "lastName": "Last name",
+          "selectCountry": "Select country",
+          "selectTimeZone": "Select time zone",
+          "dateFormat": "Date format"
+        },
+        "placeholder": {
+          "firstName": "First name",
+          "lastName": "Last name"
+        }
+      },
+      "form": {
+        "isRequired": {
+          "firstName": "First name is required",
+          "lastName": "Last name is required",
+          "dateFormat": "Date format is required"
+        },
+        "invalidName": "Use only letters, numbers, spaces, commas, periods, apostrophes, and hyphens.",
+        "dotsNotAllowed": "Dots are not allowed"
+      }
     }
   }
 }