@churchapps/apphelper 0.1.9 → 0.1.11

package/package.json

@@ -1,86 +1,88 @@
-{
-  "name": "@churchapps/apphelper",
-  "version": "0.1.9",
-  "description": "Library of helper functions for React and NextJS ChurchApps",
-  "main": "dist/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist",
-    "copy-css": "copyfiles -f src/components/markdownEditor/editor.css dist/components/markdownEditor",
-    "copy-icons": "copyfiles -f src/components/markdownEditor/images/icons/* dist/components/markdownEditor/images/icons",
-    "copy-emojis": "copyfiles -f src/components/markdownEditor/images/emoji/* dist/components/markdownEditor/images/emoji",
-    "copy-assets": "npm-run-all copy-css copy-icons copy-emojis",
-    "link": "link",
-    "tsc": "tsc",
-    "build": "npm-run-all clean tsc copy-assets",
-    "updateLink": "npm-run-all clean tsc && npm rm @churchapps/apphelper -g && npm link"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/LiveChurchSolutions/AppHelper.git"
-  },
-  "keywords": [
-    "ChurchApps"
-  ],
-  "author": "ChurchApps.org",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/LiveChurchSolutions/AppHelper/issues"
-  },
-  "homepage": "https://github.com/LiveChurchSolutions/AppHelper#readme",
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
-  },
-  "dependencies": {
-    "@churchapps/helpers": "^1.0.6",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@lexical/code": "^0.12.0",
-    "@lexical/link": "^0.12.0",
-    "@lexical/list": "^0.12.0",
-    "@lexical/markdown": "^0.12.0",
-    "@lexical/react": "^0.12.0",
-    "@lexical/rich-text": "^0.12.0",
-    "@lexical/selection": "^0.12.0",
-    "@lexical/table": "^0.12.0",
-    "@lexical/utils": "^0.12.0",
-    "@mui/lab": "^5.0.0-alpha.142",
-    "@mui/material": "^5.14.7",
-    "@stripe/react-stripe-js": "^2.1.2",
-    "@stripe/stripe-js": "^2.1.1",
-    "axios": "^1.5.0",
-    "cropperjs": "^1.6.0",
-    "date-fns": "^2.30.0",
-    "flexsearch": "^0.7.31",
-    "jwt-decode": "^3.1.2",
-    "lexical": "^0.12.0",
-    "material-symbols": "^0.11.0",
-    "mui-tel-input": "^4.0.1",
-    "react-activity": "^2.1.3",
-    "react-cookie": "^6.1.0",
-    "react-cropper": "^2.3.3",
-    "react-csv": "^2.2.2",
-    "react-ga4": "^2.1.0",
-    "react-google-charts": "^3.0.15",
-    "react-google-recaptcha": "^3.1.0",
-    "react-to-print": "^2.14.13",
-    "rrule": "^2.7.2"
-  },
-  "devDependencies": {
-    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/react-csv": "^1.1.3",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-google-recaptcha": "^2.1.5",
-    "copyfiles": "^2.4.1",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.1",
-    "tslint": "^6.1.2",
-    "typescript": "^5.2.2"
-  }
-}
+{
+  "name": "@churchapps/apphelper",
+  "version": "0.1.11",
+  "description": "Library of helper functions for React and NextJS ChurchApps",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rimraf dist",
+    "copy-css": "copyfiles -f src/components/markdownEditor/editor.css dist/components/markdownEditor",
+    "copy-icons": "copyfiles -f src/components/markdownEditor/images/icons/* dist/components/markdownEditor/images/icons",
+    "copy-emojis": "copyfiles -f src/components/markdownEditor/images/emoji/* dist/components/markdownEditor/images/emoji",
+    "copy-assets": "npm-run-all copy-css copy-icons copy-emojis",
+    "link": "link",
+    "tsc": "tsc",
+    "build": "npm-run-all clean tsc copy-assets",
+    "updateLink": "npm-run-all clean tsc && npm rm @churchapps/apphelper -g && npm link"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LiveChurchSolutions/AppHelper.git"
+  },
+  "keywords": [
+    "ChurchApps"
+  ],
+  "author": "ChurchApps.org",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/LiveChurchSolutions/AppHelper/issues"
+  },
+  "homepage": "https://github.com/LiveChurchSolutions/AppHelper#readme",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0"
+  },
+  "dependencies": {
+    "@churchapps/helpers": "^1.0.6",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@lexical/code": "^0.12.0",
+    "@lexical/link": "^0.12.0",
+    "@lexical/list": "^0.12.0",
+    "@lexical/markdown": "^0.12.0",
+    "@lexical/react": "^0.12.0",
+    "@lexical/rich-text": "^0.12.0",
+    "@lexical/selection": "^0.12.0",
+    "@lexical/table": "^0.12.0",
+    "@lexical/utils": "^0.12.0",
+    "@mui/lab": "^5.0.0-alpha.142",
+    "@mui/material": "^5.14.7",
+    "@stripe/react-stripe-js": "^2.1.2",
+    "@stripe/stripe-js": "^2.1.1",
+    "axios": "^1.5.0",
+    "cropperjs": "^1.6.0",
+    "date-fns": "^2.30.0",
+    "flexsearch": "^0.7.31",
+    "jwt-decode": "^3.1.2",
+    "lexical": "^0.12.0",
+    "material-symbols": "^0.11.0",
+    "mui-tel-input": "^4.0.1",
+    "react-activity": "^2.1.3",
+    "react-cookie": "^6.1.0",
+    "react-cropper": "^2.3.3",
+    "react-csv": "^2.2.2",
+    "react-ga4": "^2.1.0",
+    "react-google-charts": "^3.0.15",
+    "react-google-recaptcha": "^3.1.0",
+    "react-to-print": "^2.14.13",
+    "rrule": "^2.7.2",
+    "slug": "^8.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.21",
+    "@types/react-csv": "^1.1.3",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-google-recaptcha": "^2.1.5",
+    "@types/slug": "^5.0.7",
+    "copyfiles": "^2.4.1",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.1",
+    "tslint": "^6.1.2",
+    "typescript": "^5.2.2"
+  }
+}

package/src/components/CreatePerson.tsx

@@ -1,80 +1,80 @@
-import React from "react"
-import { useNavigate } from "react-router-dom"
-import { UserHelper, ApiHelper } from "../helpers";
-import { Permissions, PersonInterface, HouseholdInterface } from "../interfaces";
-import { Button, Grid, TextField } from "@mui/material"
-import { ErrorMessages } from "./ErrorMessages"
-import { useMountedState } from "../hooks/useMountedState"
-
-interface Props {
-  navigateOnCreate?: boolean;
-  onCreate?: (person: PersonInterface) => void;
-}
-
-export function CreatePerson({ navigateOnCreate = true, onCreate = () => {} }: Props) {
-  const navigate = useNavigate()
-  const [person, setPerson] = React.useState<PersonInterface>({ name: { first: "", last: "" }, contactInfo: {} });
-  const [errors, setErrors] = React.useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const isMounted = useMountedState()
-
-  const validate = () => {
-    const result = [];
-    if (!person.name?.first) result.push("Please enter a first name.");
-    if (!person.name?.last) result.push("Please enter a last name.");
-    setErrors(result);
-    return result.length === 0;
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const p = { ...person } as PersonInterface;
-    let value = e.target.value;
-    switch (e.target.name) {
-      case "first": p.name.first = value; break;
-      case "last": p.name.last = value; break;
-    }
-    setPerson(p);
-  }
-
-  function handleSubmit() {
-    let household = { name: person.name.last } as HouseholdInterface;
-    if (validate()) {
-      setIsSubmitting(true);
-      ApiHelper.post("/households", [household], "MembershipApi").then(data => {
-        household.id = data[0].id;
-        person.householdId = household.id;
-        person.name.display = [person.name.first, person.name.last].join(" ");
-        ApiHelper.post("/people", [person], "MembershipApi").then(data => {
-          person.id = data[0].id
-          onCreate(person);
-          setPerson({...person, name: { first: "", last: "" }});
-          navigateOnCreate && navigate("/people/" + person.id);
-        }).finally(() => {
-          if (isMounted()) {
-            setIsSubmitting(false);
-          }
-        });
-      });
-    }
-  }
-
-  if (!UserHelper.checkAccess(Permissions.membershipApi.people.edit)) return null;
-  return (
-    <div>
-      <p className="pl-1 mb-3 text-dark"><b>Add a New Person</b></p>
-      <ErrorMessages errors={errors} />
-      <Grid container spacing={3} alignItems="center">
-        <Grid item md={4} xs={12}>
-          <TextField size="small" margin="none" fullWidth type="text" aria-label="firstName" label="First Name" name="first" value={person.name.first || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
-        </Grid>
-        <Grid item md={4} xs={12}>
-          <TextField size="small" margin="none" fullWidth type="text" aria-label="lastName" label="Last Name" name="last" value={person.name.last || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
-        </Grid>
-        <Grid item md={4} xs={12}>
-          <Button type="submit" fullWidth variant="contained" disabled={isSubmitting} onClick={handleSubmit}>Add</Button>
-        </Grid>
-      </Grid>
-    </div>
-  )
-}
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { UserHelper, ApiHelper } from "../helpers";
+import { Permissions, PersonInterface, HouseholdInterface } from "../interfaces";
+import { Button, Grid, TextField } from "@mui/material"
+import { ErrorMessages } from "./ErrorMessages"
+import { useMountedState } from "../hooks/useMountedState"
+
+interface Props {
+  navigateOnCreate?: boolean;
+  onCreate?: (person: PersonInterface) => void;
+}
+
+export function CreatePerson({ navigateOnCreate = true, onCreate = () => {} }: Props) {
+  const navigate = useNavigate()
+  const [person, setPerson] = React.useState<PersonInterface>({ name: { first: "", last: "" }, contactInfo: {} });
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const isMounted = useMountedState()
+
+  const validate = () => {
+    const result = [];
+    if (!person.name?.first) result.push("Please enter a first name.");
+    if (!person.name?.last) result.push("Please enter a last name.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const p = { ...person } as PersonInterface;
+    let value = e.target.value;
+    switch (e.target.name) {
+      case "first": p.name.first = value; break;
+      case "last": p.name.last = value; break;
+    }
+    setPerson(p);
+  }
+
+  function handleSubmit() {
+    let household = { name: person.name.last } as HouseholdInterface;
+    if (validate()) {
+      setIsSubmitting(true);
+      ApiHelper.post("/households", [household], "MembershipApi").then(data => {
+        household.id = data[0].id;
+        person.householdId = household.id;
+        person.name.display = [person.name.first, person.name.last].join(" ");
+        ApiHelper.post("/people", [person], "MembershipApi").then(data => {
+          person.id = data[0].id
+          onCreate(person);
+          setPerson({...person, name: { first: "", last: "" }});
+          navigateOnCreate && navigate("/people/" + person.id);
+        }).finally(() => {
+          if (isMounted()) {
+            setIsSubmitting(false);
+          }
+        });
+      });
+    }
+  }
+
+  if (!UserHelper.checkAccess(Permissions.membershipApi.people.edit)) return null;
+  return (
+    <div>
+      <p className="pl-1 mb-3 text-dark"><b>Add a New Person</b></p>
+      <ErrorMessages errors={errors} />
+      <Grid container spacing={3} alignItems="center">
+        <Grid item md={4} xs={12}>
+          <TextField size="small" margin="none" fullWidth type="text" aria-label="firstName" label="First Name" name="first" value={person.name.first || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <TextField size="small" margin="none" fullWidth type="text" aria-label="lastName" label="Last Name" name="last" value={person.name.last || ""} onChange={handleChange} onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSubmit} />
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <Button type="submit" fullWidth variant="contained" disabled={isSubmitting} onClick={handleSubmit}>Add</Button>
+        </Grid>
+      </Grid>
+    </div>
+  )
+}

package/src/components/DisplayBox.tsx

@@ -1,68 +1,68 @@
-import React from "react";
-import { Paper, Box, Typography, styled, Icon } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-import { SmallButton } from "./SmallButton";
-
-interface Props {
-  id?: string,
-  children: React.ReactNode,
-  headerIcon?: string,
-  headerText: string,
-  editFunction?: () => void,
-  editContent?: React.ReactNode,
-  "data-cy"?: string,
-  ariaLabel?: string,
-  footerContent?: React.ReactNode,
-  help?: string
-}
-
-/* "& p": { color: "#666" }, */
-const CustomContextBox = styled(Box)({
-  marginTop: 10,
-  overflowX: "hidden",
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 0 },
-  "& li": {
-    listStyleType: "none",
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  },
-  "& td:first-of-type": { paddingLeft: 0 },
-  "& td:last-of-type": { paddingRight: 0 },
-  "& th:first-of-type": { paddingLeft: 0 },
-  "& th:last-of-type": { paddingRight: 0 }
-});
-
-export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-
-  let editContent: React.ReactNode;
-  if (props.editFunction !== undefined) {
-    editContent = <SmallButton icon="edit" aria-label={props.ariaLabel || "editButton"} onClick={props.editFunction} />
-  }
-  else if (props.editContent !== undefined) editContent = props.editContent;
-
-  return (
-    <Paper sx={{ padding: 2, marginBottom: 4 }} id={props.id} data-cy={props["data-cy"] || ""}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <Box sx={{ display: "flex", alignItems: "center" }}>
-          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
-          <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
-            {props.headerText}
-          </Typography>
-
-        </Box>
-        <Box>
-          {editContent}
-        </Box>
-      </Box>
-      <CustomContextBox ref={ref} data-cy="content">{props.children}</CustomContextBox>
-      {props.footerContent && (<div style={{ marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }}>{props.footerContent}</div>)}
-    </Paper>
-  );
-})
-
-DisplayBox.displayName = "DisplayBox";
+import React from "react";
+import { Paper, Box, Typography, styled, Icon } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+import { SmallButton } from "./SmallButton";
+
+interface Props {
+  id?: string,
+  children: React.ReactNode,
+  headerIcon?: string,
+  headerText: string,
+  editFunction?: () => void,
+  editContent?: React.ReactNode,
+  "data-cy"?: string,
+  ariaLabel?: string,
+  footerContent?: React.ReactNode,
+  help?: string
+}
+
+/* "& p": { color: "#666" }, */
+const CustomContextBox = styled(Box)({
+  marginTop: 10,
+  overflowX: "hidden",
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 0 },
+  "& li": {
+    listStyleType: "none",
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  },
+  "& td:first-of-type": { paddingLeft: 0 },
+  "& td:last-of-type": { paddingRight: 0 },
+  "& th:first-of-type": { paddingLeft: 0 },
+  "& th:last-of-type": { paddingRight: 0 }
+});
+
+export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+
+  let editContent: React.ReactNode;
+  if (props.editFunction !== undefined) {
+    editContent = <SmallButton icon="edit" aria-label={props.ariaLabel || "editButton"} onClick={props.editFunction} />
+  }
+  else if (props.editContent !== undefined) editContent = props.editContent;
+
+  return (
+    <Paper sx={{ padding: 2, marginBottom: 4 }} id={props.id} data-cy={props["data-cy"] || ""}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
+          <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
+            {props.headerText}
+          </Typography>
+
+        </Box>
+        <Box>
+          {editContent}
+        </Box>
+      </Box>
+      <CustomContextBox ref={ref} data-cy="content">{props.children}</CustomContextBox>
+      {props.footerContent && (<div style={{ marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 }}>{props.footerContent}</div>)}
+    </Paper>
+  );
+})
+
+DisplayBox.displayName = "DisplayBox";

package/src/components/ErrorMessages.tsx

@@ -1,26 +1,26 @@
-import { Alert, Snackbar } from "@mui/material";
-import React, { useEffect } from "react";
-
-interface Props { errors: string[] }
-
-export const ErrorMessages: React.FC<Props> = props => {
-  const [open, setOpen] = React.useState(false);
-  let [items, setItems] = React.useState([]);
-
-  useEffect(() => {
-    if (props.errors.length > 0) {
-      let _items = [];
-      for (let i = 0; i < props.errors.length; i++) {
-        _items.push(<div key={i}>{props.errors[i]}</div>);
-      }
-      setItems(_items);
-      setOpen(true);
-    }
-  }, [props.errors]);
-
-  let result = (<Snackbar open={open} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={6000} onClose={() => setOpen(false)}>
-    <Alert variant="filled" severity="error">{items}</Alert>
-  </Snackbar>);
-
-  return result;
-}
+import { Alert, Snackbar } from "@mui/material";
+import React, { useEffect } from "react";
+
+interface Props { errors: string[] }
+
+export const ErrorMessages: React.FC<Props> = props => {
+  const [open, setOpen] = React.useState(false);
+  let [items, setItems] = React.useState([]);
+
+  useEffect(() => {
+    if (props.errors.length > 0) {
+      let _items = [];
+      for (let i = 0; i < props.errors.length; i++) {
+        _items.push(<div key={i}>{props.errors[i]}</div>);
+      }
+      setItems(_items);
+      setOpen(true);
+    }
+  }, [props.errors]);
+
+  let result = (<Snackbar open={open} anchorOrigin={{ horizontal: "center", vertical: "bottom" }} autoHideDuration={6000} onClose={() => setOpen(false)}>
+    <Alert variant="filled" severity="error">{items}</Alert>
+  </Snackbar>);
+
+  return result;
+}