@bigbinary/neeto-molecules 3.4.2 → 3.6.0-beta-1

package/types/SessionEnvironment.d.ts

@@ -0,0 +1,166 @@
+import React from "react";
+import { HelpPopoverProps } from "./HelpPopover";
+interface Details {
+  name?: string;
+  value: string;
+  label?: string;
+  key?: string;
+  icon?: React.ReactNode;
+  error?: string;
+  kind?: string;
+  isEditable?: boolean;
+  extraClasses?: string;
+  extraWrapperClasses?: string;
+  id?: string;
+  fieldValueId?: string;
+  custom?: boolean;
+  showCopyButton?: boolean;
+}
+;
+/**
+ *
+ * SessionEnvironment is a component that displays the session details like name,
+ *
+ * email, phone number, etc. It also provides an option to view more details, where
+ *
+ * you can see additional information about the session, which is hidden by
+ *
+ * default.
+ *
+ * ![Screenshot](https://github.com/user-attachments/assets/37f608e0-8a3d-4f47-87e2-fcd49ba067a4|height=200|width=300)
+ *
+ * @example 
+ *
+ * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
+ * 
+ * const App = () => {
+ *   const details = [
+ *     { name: "name", value: "John Doe" },
+ *     { name: "email", value: "john.doe@example.com" },
+ *     { name: "phone_number", value: "+1 123 456 7890" },
+ *   ];
+ * 
+ *   const moreDetails = [
+ *     {
+ *       name: "created_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Created at",
+ *     },
+ *     {
+ *       name: "updated_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Updated at",
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <div>
+ *       <SessionEnvironment
+ *         details={details}
+ *         helpPopoverProps={{
+ *           description:
+ *             "The details pane shows extra information about your recording. Additional details on each metadata field can be found in the help article.",
+ *           helpLinkProps: {
+ *             href: "https://neetoreplayhelp.neetokb.com/articles/recording-details",
+ *             label: t("common.viewHelpArticle"),
+ *           },
+ *         }}
+ *         moreDetails={moreDetails}
+ *         title="Recording details"
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import { useState } from "react";
+ * 
+ * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
+ * 
+ * const App = () => {
+ *   const basicDetails = [
+ *     {
+ *       name: "name",
+ *       value: "John Doe",
+ *       isEditable: true,
+ *     },
+ *     {
+ *       name: "email",
+ *       value: "john.doe@example.com",
+ *       isEditable: true,
+ *     },
+ *     {
+ *       name: "phone_number",
+ *       value: "+1 123 456 7890",
+ *     },
+ *   ];
+ * 
+ *   const moreDetails = [
+ *     {
+ *       name: "created_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Created at",
+ *     },
+ *     {
+ *       name: "updated_at",
+ *       value: "2021-09-01 12:00:00",
+ *       kind: "datetime",
+ *       label: "Updated at",
+ *     },
+ *   ];
+ * 
+ *   const [editableDetails, setEditableDetails] = useState([
+ *     ...basicDetails,
+ *     ...moreDetails,
+ *   ]);
+ * 
+ *   const handleSubmit = ({ name, value }) => {
+ *     setEditableDetails(oldDetails =>
+ *       oldDetails.map(detail => {
+ *         if (detail.name === name) {
+ *           return { ...detail, value, isEditing: false };
+ *         }
+ * 
+ *         return detail;
+ *       })
+ *     );
+ *   };
+ * 
+ *   const handleCancel = name => {
+ *     setEditableDetails(oldDetails =>
+ *       oldDetails.map(detail => {
+ *         if (detail.name === name) return findBy({ name }, args.details);
+ * 
+ *         return detail;
+ *       })
+ *     );
+ *   };
+ * 
+ *   return (
+ *     <div>
+ *       <SessionEnvironment
+ *         details={basicDetails}
+ *         handleCancel={handleCancel}
+ *         handleSubmit={handleSubmit}
+ *         moreDetails={moreDetails}
+ *       />
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const SessionEnvironment: React.FC<{
+  details: Details[];
+  handleCancel?: (string) => void;
+  handleSubmit?: (object) => void;
+  helpPopoverProps?: HelpPopoverProps;
+  iconSize?: number;
+  isLoading?: boolean;
+  moreDetails?: Details[];
+  title?: string;
+}>;
+export default SessionEnvironment;

package/types/StatusDropdown.d.ts

@@ -9,7 +9,7 @@ import React from "react";
  *
  * @example 
  *
- * import StatusDropdown from "@bigbinary/neeto-molecules/Sidebar";
+ * import StatusDropdown from "@bigbinary/neeto-molecules/StatusDropdown";
  * 
  * const App = () => {
  *   const [selectedStatus, setSelectedStatus] = React.useState("All");
@@ -34,7 +34,7 @@ import React from "react";
  * @endexample
  * @example 
  *
- * import StatusDropdown from "@bigbinary/neeto-molecules/Sidebar";
+ * import StatusDropdown from "@bigbinary/neeto-molecules/StatusDropdown";
  * 
  * const App = () => {
  *   const [selectedStatus, setSelectedStatus] = React.useState("All");