@churchapps/apphelper 0.5.1 → 0.5.3

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>
+  );
 };

package/src/components/QuestionEdit.tsx

@@ -1,99 +1,99 @@
-"use client";
-
-import React from "react";
-import { Elements } from "@stripe/react-stripe-js";
-import { Stripe } from "@stripe/stripe-js";
-import { MuiTelInput } from "mui-tel-input";
-import { AnswerInterface, QuestionInterface } from "@churchapps/helpers";
-import { Checkbox, Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField, FormLabel, FormGroup, FormControlLabel, Box } from "@mui/material";
-import { FormCardPayment } from "./FormCardPayment";
-
-interface Props {
-  answer: AnswerInterface
-  question: QuestionInterface,
-  noBackground?: boolean,
-  changeFunction: (questionId: string, value: string) => void,
-  churchId?: string,
-  ref?: React.ForwardedRef<any>,
-  stripePromise?: Promise<Stripe>
-}
-
-export const QuestionEdit = React.forwardRef<any, Props>(({noBackground = false, ...props}, ref) => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    props.changeFunction(props.question.id, e.target.value);
-  }
-
-  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedOptions = props.answer.value ? props.answer.value.split(",") : [];
-    if (e.target.checked) {
-      selectedOptions.push(e.target.name);
-    } else {
-      const idx = selectedOptions.indexOf(e.target.name);
-      selectedOptions.splice(idx, 1);
-    }
-    props.changeFunction(props.question.id, selectedOptions.join());
-  }
-
-  let q = props.question;
-
-  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
-  else {
-    let input = null;
-    let choiceOptions = [];
-    if (q.choices !== undefined && q.choices !== null) {
-      if (q.fieldType === "Multiple Choice") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
-      } else if (q.fieldType === "Checkbox") {
-        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={i} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
-      }
-    }
-
-    let answerValue = (props.answer === null) ? "" : props.answer.value
-    switch (q.fieldType) {
-      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Multiple Choice": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
-          </FormControl>);
-        break;
-      }
-      case "Yes/No": {
-        input = (
-          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
-            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
-            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
-              <MenuItem value="False">No</MenuItem>
-              <MenuItem value="True">Yes</MenuItem>
-            </Select>
-          </FormControl>);
-        break;
-      }
-      case "Checkbox": {
-        input = (
-          <FormControl fullWidth sx={{ marginLeft: 1 }}>
-            <FormLabel sx={{ fontWeight: "bold" }}>{q.title}</FormLabel>
-            <FormGroup>
-              {choiceOptions}
-            </FormGroup>
-          </FormControl>
-        );
-        break;
-      }
-      case "Whole Number":
-      case "Decimal":
-        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
-        break;
-      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry excludedCountries={["TA", "AC"]} />; break;
-      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
-      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
-      case "Payment": input = <Elements stripe={props.stripePromise}><FormCardPayment churchId={props.churchId} question={q} ref={ref} /></Elements>; break;
-      default: return null;
-    }
-    return input;
-  }
-
-});
-
+"use client";
+
+import React from "react";
+import { Elements } from "@stripe/react-stripe-js";
+import { Stripe } from "@stripe/stripe-js";
+import { MuiTelInput } from "mui-tel-input";
+import { AnswerInterface, QuestionInterface } from "@churchapps/helpers";
+import { Checkbox, Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField, FormLabel, FormGroup, FormControlLabel, Box } from "@mui/material";
+import { FormCardPayment } from "./FormCardPayment";
+
+interface Props {
+  answer: AnswerInterface
+  question: QuestionInterface,
+  noBackground?: boolean,
+  changeFunction: (questionId: string, value: string) => void,
+  churchId?: string,
+  ref?: React.ForwardedRef<any>,
+  stripePromise?: Promise<Stripe>
+}
+
+export const QuestionEdit = React.forwardRef<any, Props>(({noBackground = false, ...props}, ref) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    props.changeFunction(props.question.id, e.target.value);
+  }
+
+  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedOptions = props.answer.value ? props.answer.value.split(",") : [];
+    if (e.target.checked) {
+      selectedOptions.push(e.target.name);
+    } else {
+      const idx = selectedOptions.indexOf(e.target.name);
+      selectedOptions.splice(idx, 1);
+    }
+    props.changeFunction(props.question.id, selectedOptions.join());
+  }
+
+  let q = props.question;
+
+  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
+  else {
+    let input = null;
+    let choiceOptions = [];
+    if (q.choices !== undefined && q.choices !== null) {
+      if (q.fieldType === "Multiple Choice") {
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+      } else if (q.fieldType === "Checkbox") {
+        for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<FormControlLabel key={i} label={q.choices[i].text} control={<Checkbox onChange={handleCheck} name={q.choices[i].value} />} />);
+      }
+    }
+
+    let answerValue = (props.answer === null) ? "" : props.answer.value
+    switch (q.fieldType) {
+      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Multiple Choice": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
+          </FormControl>);
+        break;
+      }
+      case "Yes/No": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel sx={{ fontWeight: "bold" }}>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
+              <MenuItem value="False">No</MenuItem>
+              <MenuItem value="True">Yes</MenuItem>
+            </Select>
+          </FormControl>);
+        break;
+      }
+      case "Checkbox": {
+        input = (
+          <FormControl fullWidth sx={{ marginLeft: 1 }}>
+            <FormLabel sx={{ fontWeight: "bold" }}>{q.title}</FormLabel>
+            <FormGroup>
+              {choiceOptions}
+            </FormGroup>
+          </FormControl>
+        );
+        break;
+      }
+      case "Whole Number":
+      case "Decimal":
+        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
+        break;
+      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{ shrink: true, sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Phone Number": input = <MuiTelInput fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="" value={answerValue} onChange={(value) => { props.changeFunction(props.question.id, value); }} defaultCountry="US" focusOnSelectCountry excludedCountries={["TA", "AC"]} />; break;
+      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
+      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} InputLabelProps={{ sx: { fontWeight: "bold" } }} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Payment": input = <Elements stripe={props.stripePromise}><FormCardPayment churchId={props.churchId} question={q} ref={ref} /></Elements>; break;
+      default: return null;
+    }
+    return input;
+  }
+
+});
+