@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/checkbox.tsx

@@ -1,22 +1,25 @@
-import React from 'react'; 
-import { useObservable } from '../hooks';
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useObservable } from "../hooks";
 
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  checked: any,
-  type?: React.HTMLInputTypeAttribute
+interface IProps
+  extends Omit<
+    React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    "checked"
+  > {
+  checked?: boolean | Observable<boolean | undefined>;
+  type?: React.HTMLInputTypeAttribute;
 }
 
 export function Checkbox(props: IProps) {
   const [checked, setChecked] = useObservable(props.checked);
-  const type = props.type ?? 'checkbox';
+  const type = props.type ?? "checkbox";
   function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    let _value: any = evt.target.checked;
-    if (type === 'checkbox') {
+    let _value: boolean = evt.target.checked;
+    if (type === "checkbox") {
       _value = !!_value;
     }
     setChecked(_value);
   }
-  return (
-    <input onChange={onChange} type={type} {...props} checked={checked}  />
-  )
-}
+  return <input onChange={onChange} type={type} {...props} checked={checked} />;
+}

package/src/components/group-switcher.tsx

@@ -1,6 +1,19 @@
-import { getMe, getUserContext, Groups, IGroup, newid, newKeys, peersCorePackageId, rpcServerCalls, setUserTrustLevel, TrustLevel, UserContext, Users } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { usePromise } from '../hooks';
+import {
+  Groups,
+  getMe,
+  getUserContext,
+  type IGroup,
+  newid,
+  newKeys,
+  peersCorePackageId,
+  rpcServerCalls,
+  setUserTrustLevel,
+  TrustLevel,
+  type UserContext,
+  Users,
+} from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from "react";
+import { usePromise } from "../hooks";
 
 interface GroupSwitcherProps {
   colorMode: string;
@@ -32,13 +45,13 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
     const currentGroupId = userContext?.currentlyActiveGroupId();
     if (!currentGroupId) return null;
     return allGroups.find((g: IGroup) => g.groupId === currentGroupId) || null;
-  }, [allGroups, userContext?.currentlyActiveGroupId()]);
+  }, [allGroups, userContext?.currentlyActiveGroupId]);
 
   const handleGroupSelect = (group: IGroup | null) => {
     if (!userContext) return;
 
     // Set the active group through user context
-    userContext.currentlyActiveGroupId(group?.groupId || '');
+    userContext.currentlyActiveGroupId(group?.groupId || "");
     setShowDropdown(false);
   };
 
@@ -48,67 +61,76 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
   };
 
   const getGroupIcon = (group: IGroup | null | undefined) => {
-    if (!group) return 'bi-person-fill'; // Personal group icon
-    return group.iconClassName || 'bi-people-fill';
+    if (!group) return "bi-person-fill"; // Personal group icon
+    return group.iconClassName || "bi-people-fill";
   };
 
   const getGroupName = (group: IGroup | null | undefined) => {
-    if (!group) return 'Personal';
+    if (!group) return "Personal";
     return group.name;
   };
 
-  const isDark = colorMode === 'dark';
+  const isDark = colorMode === "dark";
 
   return (
     <>
       <div className="dropdown">
         <button
-          className={`btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`}
+          className={`btn btn-sm ${isMobile ? "" : "me-2"} d-flex align-items-center`}
           onClick={() => setShowDropdown(!showDropdown)}
           title={`Current group: ${getGroupName(currentGroup)}`}
           style={{
-            padding: isMobile ? '4px' : '4px 8px',
-            fontSize: '12px',
-            borderRadius: '6px',
-            border: 'none',
-            background: 'transparent',
-            color: isDark ? '#adb5bd' : '#6c757d',
-            minWidth: isMobile ? '36px' : undefined
+            padding: isMobile ? "4px" : "4px 8px",
+            fontSize: "12px",
+            borderRadius: "6px",
+            border: "none",
+            background: "transparent",
+            color: isDark ? "#adb5bd" : "#6c757d",
+            minWidth: isMobile ? "36px" : undefined,
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
-            e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
+            e.currentTarget.style.backgroundColor = isDark ? "#495057" : "#f8f9fa";
+            e.currentTarget.style.color = isDark ? "#ffffff" : "#0d6efd";
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = 'transparent';
-            e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
+            e.currentTarget.style.backgroundColor = "transparent";
+            e.currentTarget.style.color = isDark ? "#adb5bd" : "#6c757d";
           }}
         >
-          <i className={`${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`} style={{ fontSize: '14px' }} />
+          <i
+            className={`${getGroupIcon(currentGroup)} ${isMobile ? "" : "me-1"}`}
+            style={{ fontSize: "14px" }}
+          />
           {!isMobile && (
-            <span className="text-truncate" style={{ maxWidth: '80px' }}>
+            <span className="text-truncate" style={{ maxWidth: "80px" }}>
               {getGroupName(currentGroup)}
             </span>
           )}
-          <i className="bi-chevron-down ms-1" style={{ fontSize: '10px' }} />
+          <i className="bi-chevron-down ms-1" style={{ fontSize: "10px" }} />
         </button>
 
         {showDropdown && (
           <div
-            className={`dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`}
+            className={`dropdown-menu show position-absolute ${isDark ? "dropdown-menu-dark" : ""}`}
             style={{
               left: 0,
-              top: '100%',
+              top: "100%",
               zIndex: 1000,
-              minWidth: '200px',
-              maxHeight: '300px',
-              overflowY: 'auto'
+              minWidth: "200px",
+              maxHeight: "300px",
+              overflowY: "auto",
             }}
           >
             {/* Personal Group */}
             <button
-              className={`dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`}
-              style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
+              className={`dropdown-item d-flex align-items-center ${!currentGroup ? "active" : ""}`}
+              style={{
+                cursor: "pointer",
+                border: "none",
+                background: "none",
+                width: "100%",
+                textAlign: "left",
+              }}
               onClick={() => handleGroupSelect(null)}
             >
               <i className="bi-person-fill me-2" />
@@ -116,9 +138,7 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
             </button>
 
             {/* Divider */}
-            {allGroups.length > 0 && (
-              <div className="dropdown-divider" />
-            )}
+            {allGroups.length > 0 && <div className="dropdown-divider" />}
 
             {/* Group List */}
             {allGroups
@@ -126,8 +146,14 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
               .map((group: IGroup) => (
                 <button
                   key={group.groupId}
-                  className={`dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`}
-                  style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
+                  className={`dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? "active" : ""}`}
+                  style={{
+                    cursor: "pointer",
+                    border: "none",
+                    background: "none",
+                    width: "100%",
+                    textAlign: "left",
+                  }}
                   onClick={() => handleGroupSelect(group)}
                 >
                   <i className={`${getGroupIcon(group)} me-2`} />
@@ -139,7 +165,13 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
             <div className="dropdown-divider" />
             <button
               className="dropdown-item d-flex align-items-center"
-              style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
+              style={{
+                cursor: "pointer",
+                border: "none",
+                background: "none",
+                width: "100%",
+                textAlign: "left",
+              }}
               onClick={handleCreateClick}
             >
               <i className="bi-plus-circle me-2" />
@@ -187,25 +219,30 @@ interface CreateGroupModalProps {
   onGroupCreated: (groupId: string) => void;
 }
 
-function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: CreateGroupModalProps) {
-  const [groupName, setGroupName] = useState('');
-  const [iconClassName, setIconClassName] = useState('bi-people-fill');
-  const [description, setDescription] = useState('');
+function CreateGroupModal({
+  colorMode,
+  userContext,
+  onClose,
+  onGroupCreated,
+}: CreateGroupModalProps) {
+  const [groupName, setGroupName] = useState("");
+  const [iconClassName, setIconClassName] = useState("bi-people-fill");
+  const [description, setDescription] = useState("");
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const isDark = colorMode === 'dark';
+  const isDark = colorMode === "dark";
 
   const handleCreate = async () => {
     // Validate
     const trimmedName = groupName.trim();
     if (!trimmedName) {
-      setError('Group name is required');
+      setError("Group name is required");
       return;
     }
 
     if (trimmedName.length > 100) {
-      setError('Group name must be 100 characters or less');
+      setError("Group name must be 100 characters or less");
       return;
     }
 
@@ -223,16 +260,17 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
       const groupDataContext = userContext.getDataContext(groupId);
 
       // Store groupKeys.secretKey securely for this group
-      const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
-      const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+      const persistentVarsTable =
+        userContext.userDataContext.tableContainer.getTableByName("PersistentVars");
+      const groupSecretKeyVarName = `groupSecretKey_${groupDataContext.dataContextId}`;
       await persistentVarsTable.save({
         persistentVarId: newid(),
         name: groupSecretKeyVarName,
-        scope: 'groupUser',
+        scope: "groupUser",
         isSecret: true,
         value: { value: groupKeys.secretKey },
       });
-      
+
       // Add current user to the group's users table
       await Users(groupDataContext).save(me);
 
@@ -245,35 +283,37 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
         groupId,
         name: trimmedName,
         description: description.trim(),
-        iconClassName: iconClassName.trim() || 'bi-people-fill',
+        iconClassName: iconClassName.trim() || "bi-people-fill",
         founderUserId: me.userId,
         disabled: false,
         publicKey: groupKeys.publicKey,
         publicBoxKey: groupKeys.publicBoxKey,
-        signature: '', // Will be set by signAndSave()
+        signature: "", // Will be set by signAndSave()
       });
 
       await Groups(groupDataContext).signAndSave(newGroup);
 
       // Auto-install peers-core for the new group
-      await rpcServerCalls.addOrUpdatePackage(peersCorePackageId, { dataContextId: groupId }).catch((err: any) => {
-        console.error('Error auto-installing peers-core for group:', err);
-      });
-      
+      await rpcServerCalls
+        .addOrUpdatePackage(peersCorePackageId, { dataContextId: groupId })
+        .catch((err: unknown) => {
+          console.error("Error auto-installing peers-core for group:", err);
+        });
+
       // Notify parent
       onGroupCreated(newGroup.groupId);
-    } catch (err: any) {
-      console.error('Failed to create group:', err);
-      setError(err.message || 'Failed to create group. Please try again.');
+    } catch (err: unknown) {
+      console.error("Failed to create group:", err);
+      setError(err instanceof Error ? err.message : "Failed to create group. Please try again.");
       setIsCreating(false);
     }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey && groupName.trim()) {
+    if (e.key === "Enter" && !e.shiftKey && groupName.trim()) {
       e.preventDefault();
       handleCreate();
-    } else if (e.key === 'Escape') {
+    } else if (e.key === "Escape") {
       onClose();
     }
   };
@@ -285,9 +325,9 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
         top: 0,
         left: 0,
         zIndex: 1050,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        backdropFilter: 'blur(4px)',
-        paddingTop: '10vh'
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)",
+        paddingTop: "10vh",
       }}
       onClick={(e) => {
         if (e.target === e.currentTarget) {
@@ -296,42 +336,44 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
       }}
     >
       <div
-        className={`${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`}
+        className={`${isDark ? "bg-dark text-light" : "bg-white text-dark"}`}
         style={{
-          width: '90%',
-          maxWidth: '500px',
-          borderRadius: '12px',
-          boxShadow: isDark
-            ? '0 20px 40px rgba(0, 0, 0, 0.5)'
-            : '0 20px 40px rgba(0, 0, 0, 0.1)',
-          border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
-          overflow: 'hidden'
+          width: "90%",
+          maxWidth: "500px",
+          borderRadius: "12px",
+          boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
+          border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+          overflow: "hidden",
         }}
       >
         {/* Header */}
         <div
           className="p-3 border-bottom d-flex align-items-center justify-content-between"
           style={{
-            borderBottomColor: isDark ? '#495057' : '#dee2e6'
+            borderBottomColor: isDark ? "#495057" : "#dee2e6",
           }}
         >
           <div className="d-flex align-items-center">
-            <i className="bi-people-fill me-2" style={{ fontSize: '20px' }} />
+            <i className="bi-people-fill me-2" style={{ fontSize: "20px" }} />
             <h6 className="mb-0">Create New Group</h6>
           </div>
           <button
             className="btn btn-sm p-0"
             style={{
-              border: 'none',
-              background: 'none',
-              fontSize: '24px',
-              lineHeight: '1',
-              opacity: 0.6
+              border: "none",
+              background: "none",
+              fontSize: "24px",
+              lineHeight: "1",
+              opacity: 0.6,
             }}
             onClick={onClose}
             disabled={isCreating}
-            onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
-            onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.opacity = "1";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.opacity = "0.6";
+            }}
           >
             <i className="bi-x" />
           </button>
@@ -341,7 +383,7 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
         <div className="p-3">
           {/* Error Alert */}
           {error && (
-            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: '14px' }}>
+            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: "14px" }}>
               <i className="bi-exclamation-triangle me-2" />
               {error}
             </div>
@@ -354,7 +396,7 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
             </label>
             <input
               type="text"
-              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
               placeholder="Enter group name"
               value={groupName}
               onChange={(e) => {
@@ -362,15 +404,14 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
                 setError(null);
               }}
               onKeyDown={handleKeyDown}
-              autoFocus
               disabled={isCreating}
               maxLength={100}
               style={{
-                fontSize: '14px',
-                backgroundColor: isDark ? '#343a40' : '#ffffff'
+                fontSize: "14px",
+                backgroundColor: isDark ? "#343a40" : "#ffffff",
               }}
             />
-            <small className="text-muted" style={{ fontSize: '11px' }}>
+            <small className="text-muted" style={{ fontSize: "11px" }}>
               {groupName.length}/100 characters
             </small>
           </div>
@@ -380,26 +421,26 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
             <label className="form-label small mb-1">Icon</label>
             <div className="input-group">
               <span
-                className={`input-group-text ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
-                style={{ backgroundColor: isDark ? '#343a40' : undefined }}
+                className={`input-group-text ${isDark ? "bg-dark text-light border-secondary" : ""}`}
+                style={{ backgroundColor: isDark ? "#343a40" : undefined }}
               >
-                <i className={iconClassName || 'bi-people-fill'} />
+                <i className={iconClassName || "bi-people-fill"} />
               </span>
               <input
                 type="text"
-                className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+                className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
                 placeholder="bi-people-fill"
                 value={iconClassName}
                 onChange={(e) => setIconClassName(e.target.value)}
                 onKeyDown={handleKeyDown}
                 disabled={isCreating}
                 style={{
-                  fontSize: '14px',
-                  backgroundColor: isDark ? '#343a40' : '#ffffff'
+                  fontSize: "14px",
+                  backgroundColor: isDark ? "#343a40" : "#ffffff",
                 }}
               />
             </div>
-            <small className="text-muted" style={{ fontSize: '11px' }}>
+            <small className="text-muted" style={{ fontSize: "11px" }}>
               Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)
             </small>
           </div>
@@ -408,7 +449,7 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
           <div className="mb-3">
             <label className="form-label small mb-1">Description (optional)</label>
             <textarea
-              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
               placeholder="Enter group description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
@@ -416,12 +457,12 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
               rows={3}
               maxLength={500}
               style={{
-                fontSize: '14px',
-                backgroundColor: isDark ? '#343a40' : '#ffffff',
-                resize: 'none'
+                fontSize: "14px",
+                backgroundColor: isDark ? "#343a40" : "#ffffff",
+                resize: "none",
               }}
             />
-            <small className="text-muted" style={{ fontSize: '11px' }}>
+            <small className="text-muted" style={{ fontSize: "11px" }}>
               {description.length}/500 characters
             </small>
           </div>
@@ -431,14 +472,14 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
         <div
           className="p-3 border-top d-flex justify-content-end gap-2"
           style={{
-            borderTopColor: isDark ? '#495057' : '#dee2e6'
+            borderTopColor: isDark ? "#495057" : "#dee2e6",
           }}
         >
           <button
-            className={`btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+            className={`btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
             onClick={onClose}
             disabled={isCreating}
-            style={{ minWidth: '80px' }}
+            style={{ minWidth: "80px" }}
           >
             Cancel
           </button>
@@ -446,11 +487,15 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
             className="btn btn-sm btn-primary"
             onClick={handleCreate}
             disabled={isCreating || !groupName.trim()}
-            style={{ minWidth: '80px' }}
+            style={{ minWidth: "80px" }}
           >
             {isCreating ? (
               <>
-                <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+                <span
+                  className="spinner-border spinner-border-sm me-1"
+                  role="status"
+                  aria-hidden="true"
+                />
                 Creating...
               </>
             ) : (
@@ -466,8 +511,8 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: C
         <div
           className={`px-3 py-2 small text-muted border-top`}
           style={{
-            borderTopColor: isDark ? '#495057' : '#dee2e6',
-            fontSize: '11px'
+            borderTopColor: isDark ? "#495057" : "#dee2e6",
+            fontSize: "11px",
           }}
         >
           <kbd className="small">↵</kbd> to create • <kbd className="small">esc</kbd> to cancel

package/src/components/input-date.tsx

@@ -1,28 +1,29 @@
-import React from "react";
+import type { Observable } from "@peers-app/peers-sdk";
 import moment from "moment-timezone";
-import { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
 import { useObservable } from "../hooks";
 
-
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  date: Observable<Date | undefined> | Date | undefined
+interface IProps
+  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  date: Observable<Date | undefined> | Date | undefined;
 }
 export const InputDate = (props: IProps) => {
-
   const [date, setDate] = useObservable<Date | undefined>(props.date);
 
-  const inputProps = { ...props };
-  // @ts-ignore
-  delete inputProps.date;
+  const { date: _omitDate, ...inputProps } = props;
 
   return (
     <input
       {...inputProps}
-      type='date'
-      value={date?.toISOString?.().substring(0, 10) ?? ''}
-      onChange={evt => {
-        setDate(evt.currentTarget.value ? moment(new Date(evt.currentTarget.value)).startOf('day').add(1, 'day').toDate() : undefined)
-      }}      
+      type="date"
+      value={date?.toISOString?.().substring(0, 10) ?? ""}
+      onChange={(evt) => {
+        setDate(
+          evt.currentTarget.value
+            ? moment(new Date(evt.currentTarget.value)).startOf("day").add(1, "day").toDate()
+            : undefined,
+        );
+      }}
     />
-  )
-}
+  );
+};