@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/Loading.tsx

@@ -1,77 +1,77 @@
-"use client";
-
-import React from "react";
-import { Dots } from "react-activity";
-
-// Inline CSS for react-activity to avoid external dependencies
-const activityStyles = `
-  .activity-loader {
-    position: relative;
-    display: inline-block;
-  }
-  .activity-dots {
-    position: relative;
-    display: inline-block;
-  }
-  .activity-dots > div {
-    position: absolute;
-    border-radius: 50%;
-    animation: activity-dots 1.2s infinite ease-in-out;
-    animation-fill-mode: both;
-  }
-  .activity-dots > div:nth-child(1) { animation-delay: -1.1s; }
-  .activity-dots > div:nth-child(2) { animation-delay: -1.0s; }
-  .activity-dots > div:nth-child(3) { animation-delay: -0.9s; }
-  .activity-dots > div:nth-child(4) { animation-delay: -0.8s; }
-  .activity-dots > div:nth-child(5) { animation-delay: -0.7s; }
-  .activity-dots > div:nth-child(6) { animation-delay: -0.6s; }
-  .activity-dots > div:nth-child(7) { animation-delay: -0.5s; }
-  .activity-dots > div:nth-child(8) { animation-delay: -0.4s; }
-  .activity-dots > div:nth-child(9) { animation-delay: -0.3s; }
-  .activity-dots > div:nth-child(10) { animation-delay: -0.2s; }
-  .activity-dots > div:nth-child(11) { animation-delay: -0.1s; }
-  .activity-dots > div:nth-child(12) { animation-delay: 0s; }
-
-  @keyframes activity-dots {
-    0%, 80%, 100% {
-      transform: scale(0);
-    }
-    40% {
-      transform: scale(1);
-    }
-  }
-`;
-
-// Add styles to document head if not already present
-if (typeof document !== 'undefined' && !document.getElementById('activity-styles')) {
-  const style = document.createElement('style');
-  style.id = 'activity-styles';
-  style.textContent = activityStyles;
-  document.head.appendChild(style);
-}
-
-interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
-
-export const Loading: React.FC<Props> = (props) => {
-
-  const getContents = () => {
-    const text = (props.loadingText) ? props.loadingText : "Loading"
-    const color = (props.color) ? props.color : "#222"
-    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
-    switch (props.size) {
-      case "sm":
-        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
-        break;
-      case "lg":
-        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <div id="loading-component" style={{ textAlign: "center", fontFamily: "Roboto" }}>
-      {getContents()}
-    </div>
-  )
-}
+"use client";
+
+import React from "react";
+import { Dots } from "react-activity";
+
+// Inline CSS for react-activity to avoid external dependencies
+const activityStyles = `
+  .activity-loader {
+    position: relative;
+    display: inline-block;
+  }
+  .activity-dots {
+    position: relative;
+    display: inline-block;
+  }
+  .activity-dots > div {
+    position: absolute;
+    border-radius: 50%;
+    animation: activity-dots 1.2s infinite ease-in-out;
+    animation-fill-mode: both;
+  }
+  .activity-dots > div:nth-child(1) { animation-delay: -1.1s; }
+  .activity-dots > div:nth-child(2) { animation-delay: -1.0s; }
+  .activity-dots > div:nth-child(3) { animation-delay: -0.9s; }
+  .activity-dots > div:nth-child(4) { animation-delay: -0.8s; }
+  .activity-dots > div:nth-child(5) { animation-delay: -0.7s; }
+  .activity-dots > div:nth-child(6) { animation-delay: -0.6s; }
+  .activity-dots > div:nth-child(7) { animation-delay: -0.5s; }
+  .activity-dots > div:nth-child(8) { animation-delay: -0.4s; }
+  .activity-dots > div:nth-child(9) { animation-delay: -0.3s; }
+  .activity-dots > div:nth-child(10) { animation-delay: -0.2s; }
+  .activity-dots > div:nth-child(11) { animation-delay: -0.1s; }
+  .activity-dots > div:nth-child(12) { animation-delay: 0s; }
+
+  @keyframes activity-dots {
+    0%, 80%, 100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+`;
+
+// Add styles to document head if not already present
+if (typeof document !== 'undefined' && !document.getElementById('activity-styles')) {
+  const style = document.createElement('style');
+  style.id = 'activity-styles';
+  style.textContent = activityStyles;
+  document.head.appendChild(style);
+}
+
+interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
+
+export const Loading: React.FC<Props> = (props) => {
+
+  const getContents = () => {
+    const text = (props.loadingText) ? props.loadingText : "Loading"
+    const color = (props.color) ? props.color : "#222"
+    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
+    switch (props.size) {
+      case "sm":
+        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
+        break;
+      case "lg":
+        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <div id="loading-component" style={{ textAlign: "center", fontFamily: "Roboto" }}>
+      {getContents()}
+    </div>
+  )
+}

package/src/components/PageHeader.tsx

@@ -1,111 +1,111 @@
-import React, { ReactNode } from "react";
-import { Box, Typography, Stack } from "@mui/material";
-
-interface PageHeaderProps {
-  icon: ReactNode;
-  title: string;
-  subtitle?: string;
-  children?: ReactNode; // For action buttons or tabs
-  statistics?: Array<{ icon: ReactNode; value: string; label: string }>;
-}
-
-export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, children, statistics }) => {
-  return (
-    <Box id="page-header" sx={{ 
-      backgroundColor: "var(--c1l2)", 
-      color: "#FFF", 
-      position: 'relative',
-      left: '50%',
-      right: '50%',
-      marginLeft: '-50vw',
-      marginRight: '-50vw',
-      width: '100vw',
-      '--c1': '#1565C0',
-      '--c1d1': '#1358AD', 
-      '--c1d2': '#114A99',
-      '--c1l2': '#568BDA'
-    }}>
-      <Box sx={{ 
-        paddingX: { xs: 2, sm: 3, md: 4 }, 
-        paddingY: 3
-      }}>
-        <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: 2, md: 4 }} alignItems={{ xs: "flex-start", md: "center" }} sx={{ width: "100%" }}>
-        {/* Left side: Title and Icon */}
-        <Stack id="page-header-title-section" direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
-          <Box
-            id="page-header-icon"
-            sx={{
-              backgroundColor: "rgba(255,255,255,0.2)",
-              borderRadius: "12px",
-              p: 1.5,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            {React.cloneElement(icon as React.ReactElement<any>, { sx: { fontSize: 32, color: "#FFF" } })}
-          </Box>
-          <Box id="page-header-text">
-            <Typography
-              id="page-header-title"
-              variant="h4"
-              sx={{
-                fontWeight: 600,
-                mb: 0.5,
-                fontSize: { xs: "1.75rem", md: "2.125rem" },
-              }}
-            >
-              {title}
-            </Typography>
-            {subtitle && (
-              <Typography
-                id="page-header-subtitle"
-                variant="body1"
-                sx={{
-                  color: "rgba(255,255,255,0.9)",
-                  fontSize: { xs: "0.875rem", md: "1rem" },
-                }}
-              >
-                {subtitle}
-              </Typography>
-            )}
-          </Box>
-        </Stack>
-
-        {/* Right side: Action Buttons/Tabs */}
-        {children && (
-          <Stack
-            id="page-header-actions"
-            direction="row"
-            spacing={1}
-            sx={{
-              flexShrink: 0,
-              justifyContent: { xs: "flex-start", md: "flex-end" },
-              width: { xs: "100%", md: "auto" },
-            }}
-          >
-            {children}
-          </Stack>
-        )}
-      </Stack>
-
-      {/* Statistics row */}
-      {statistics && statistics.length > 0 && (
-        <Stack id="page-header-statistics" direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
-          {statistics.map((stat, index) => (
-            <Stack key={index} direction="row" spacing={1} alignItems="center">
-              {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
-              <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
-                {stat.value}
-              </Typography>
-              <Typography variant="body2" sx={{ color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }}>
-                {stat.label}
-              </Typography>
-            </Stack>
-          ))}
-        </Stack>
-      )}
-      </Box>
-    </Box>
-  );
+import React, { ReactNode } from "react";
+import { Box, Typography, Stack } from "@mui/material";
+
+interface PageHeaderProps {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  children?: ReactNode; // For action buttons or tabs
+  statistics?: Array<{ icon: ReactNode; value: string; label: string }>;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, children, statistics }) => {
+  return (
+    <Box id="page-header" sx={{ 
+      backgroundColor: "var(--c1l2)", 
+      color: "#FFF", 
+      position: 'relative',
+      left: '50%',
+      right: '50%',
+      marginLeft: '-50vw',
+      marginRight: '-50vw',
+      width: '100vw',
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA'
+    }}>
+      <Box sx={{ 
+        paddingX: { xs: 2, sm: 3, md: 4 }, 
+        paddingY: 3
+      }}>
+        <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: 2, md: 4 }} alignItems={{ xs: "flex-start", md: "center" }} sx={{ width: "100%" }}>
+        {/* Left side: Title and Icon */}
+        <Stack id="page-header-title-section" direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+          <Box
+            id="page-header-icon"
+            sx={{
+              backgroundColor: "rgba(255,255,255,0.2)",
+              borderRadius: "12px",
+              p: 1.5,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {React.cloneElement(icon as React.ReactElement<any>, { sx: { fontSize: 32, color: "#FFF" } })}
+          </Box>
+          <Box id="page-header-text">
+            <Typography
+              id="page-header-title"
+              variant="h4"
+              sx={{
+                fontWeight: 600,
+                mb: 0.5,
+                fontSize: { xs: "1.75rem", md: "2.125rem" },
+              }}
+            >
+              {title}
+            </Typography>
+            {subtitle && (
+              <Typography
+                id="page-header-subtitle"
+                variant="body1"
+                sx={{
+                  color: "rgba(255,255,255,0.9)",
+                  fontSize: { xs: "0.875rem", md: "1rem" },
+                }}
+              >
+                {subtitle}
+              </Typography>
+            )}
+          </Box>
+        </Stack>
+
+        {/* Right side: Action Buttons/Tabs */}
+        {children && (
+          <Stack
+            id="page-header-actions"
+            direction="row"
+            spacing={1}
+            sx={{
+              flexShrink: 0,
+              justifyContent: { xs: "flex-start", md: "flex-end" },
+              width: { xs: "100%", md: "auto" },
+            }}
+          >
+            {children}
+          </Stack>
+        )}
+      </Stack>
+
+      {/* Statistics row */}
+      {statistics && statistics.length > 0 && (
+        <Stack id="page-header-statistics" direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
+          {statistics.map((stat, index) => (
+            <Stack key={index} direction="row" spacing={1} alignItems="center">
+              {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
+              <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
+                {stat.value}
+              </Typography>
+              <Typography variant="body2" sx={{ color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }}>
+                {stat.label}
+              </Typography>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+      </Box>
+    </Box>
+  );
 };

package/src/components/PersonAvatar.tsx

@@ -1,78 +1,78 @@
-"use client";
-
-import React from "react";
-import { Avatar, SxProps } from "@mui/material";
-import { PersonInterface } from "@churchapps/helpers";
-import { PersonHelper } from "../helpers";
-
-interface Props {
-  person: PersonInterface;
-  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "responsive";
-  sx?: SxProps;
-  onClick?: () => void;
-}
-
-export const PersonAvatar: React.FC<Props> = ({ person, size = "medium", sx, onClick }) => {
-  const [imageError, setImageError] = React.useState(false);
-  
-  const getSizeProps = () => {
-    switch (size) {
-      case "small":
-        return { width: 48, height: 48 };
-      case "medium":
-        return { width: 56, height: 56 };
-      case "large":
-        return { width: 80, height: 80 };
-      case "xlarge":
-        return { width: 100, height: 100 };
-      case "xxlarge":
-        return { width: 120, height: 120 };
-      case "responsive":
-        return { width: { xs: 70, sm: 80, md: 100 }, height: { xs: 70, sm: 80, md: 100 } };
-      default:
-        return { width: 56, height: 56 };
-    }
-  };
-
-  const getInitials = () => {
-    if (!person?.name?.display) return "?";
-    
-    const names = person.name.display.trim().split(" ");
-    if (names.length >= 2) {
-      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
-    } else if (names.length === 1) {
-      return names[0][0]?.toUpperCase() || "?";
-    }
-    return "?";
-  };
-
-  const photoUrl = PersonHelper.getPhotoUrl(person);
-  const sizeProps = getSizeProps();
-  
-  // Combine default styles with custom sx
-  const combinedSx = {
-    ...sizeProps,
-    cursor: onClick ? "pointer" : "default",
-    "&:hover": onClick ? {
-      opacity: 0.8,
-      transition: "opacity 0.2s ease-in-out",
-    } : {},
-    ...sx,
-  };
-
-  const handleImageError = () => {
-    setImageError(true);
-  };
-
-  return (
-    <Avatar
-      src={!imageError ? photoUrl : undefined}
-      alt={person?.name?.display || "User avatar"}
-      sx={combinedSx}
-      onClick={onClick}
-      onError={handleImageError}
-    >
-      {(imageError || !photoUrl) && getInitials()}
-    </Avatar>
-  );
+"use client";
+
+import React from "react";
+import { Avatar, SxProps } from "@mui/material";
+import { PersonInterface } from "@churchapps/helpers";
+import { PersonHelper } from "../helpers";
+
+interface Props {
+  person: PersonInterface;
+  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "responsive";
+  sx?: SxProps;
+  onClick?: () => void;
+}
+
+export const PersonAvatar: React.FC<Props> = ({ person, size = "medium", sx, onClick }) => {
+  const [imageError, setImageError] = React.useState(false);
+  
+  const getSizeProps = () => {
+    switch (size) {
+      case "small":
+        return { width: 48, height: 48 };
+      case "medium":
+        return { width: 56, height: 56 };
+      case "large":
+        return { width: 80, height: 80 };
+      case "xlarge":
+        return { width: 100, height: 100 };
+      case "xxlarge":
+        return { width: 120, height: 120 };
+      case "responsive":
+        return { width: { xs: 70, sm: 80, md: 100 }, height: { xs: 70, sm: 80, md: 100 } };
+      default:
+        return { width: 56, height: 56 };
+    }
+  };
+
+  const getInitials = () => {
+    if (!person?.name?.display) return "?";
+    
+    const names = person.name.display.trim().split(" ");
+    if (names.length >= 2) {
+      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+    } else if (names.length === 1) {
+      return names[0][0]?.toUpperCase() || "?";
+    }
+    return "?";
+  };
+
+  const photoUrl = PersonHelper.getPhotoUrl(person);
+  const sizeProps = getSizeProps();
+  
+  // Combine default styles with custom sx
+  const combinedSx = {
+    ...sizeProps,
+    cursor: onClick ? "pointer" : "default",
+    "&:hover": onClick ? {
+      opacity: 0.8,
+      transition: "opacity 0.2s ease-in-out",
+    } : {},
+    ...sx,
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  return (
+    <Avatar
+      src={!imageError ? photoUrl : undefined}
+      alt={person?.name?.display || "User avatar"}
+      sx={combinedSx}
+      onClick={onClick}
+      onError={handleImageError}
+    >
+      {(imageError || !photoUrl) && getInitials()}
+    </Avatar>
+  );
 };