@mbpockets/shared-ui 0.1.18

package/dist/EventPage/editMode/index.mjs

@@ -0,0 +1,559 @@
+"use client";
+import { createContext, useState, useEffect, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from '@mui/icons-material/Add';
+import ColorizeIcon from '@mui/icons-material/Colorize';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import '@mui/material/Box';
+import '@mui/material/Grid';
+
+var defaultValue = {
+  isOwner: false,
+  updateEvent: async () => false,
+  updateImages: () => {
+  },
+  event: null
+};
+var EventEditContext = createContext(defaultValue);
+function EventEditProvider({
+  value,
+  initialEvent,
+  children
+}) {
+  const [event, setEvent] = useState(initialEvent);
+  useEffect(() => {
+    setEvent(initialEvent);
+  }, [initialEvent]);
+  const handleUpdateEvent = async (patch) => {
+    if (value == null ? void 0 : value.updateEvent) {
+      const result = value.updateEvent(patch);
+      if (result instanceof Promise) {
+        const success = await result;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      } else {
+        const success = result === false ? false : true;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      }
+    }
+    return false;
+  };
+  const mergedValue = {
+    ...defaultValue,
+    ...value,
+    event,
+    updateEvent: handleUpdateEvent
+  };
+  return /* @__PURE__ */ jsx(EventEditContext.Provider, { value: mergedValue, children });
+}
+function useEventEdit() {
+  const context = useContext(EventEditContext);
+  if (!context) {
+    throw new Error("useEventEdit must be used within an EventEditProvider");
+  }
+  return context;
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+function EventBannerEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const { updateImages } = useEventEdit();
+  const [title, setTitle] = useState(initialValue.title);
+  const [bannerColor, setBannerColor] = useState(initialValue.bannerColor || "");
+  const [desktopBanner, setDesktopBanner] = useState(initialValue.bannerUrl.desktop);
+  const [mobileBanner, setMobileBanner] = useState(initialValue.bannerUrl.mobile || "");
+  const [links, setLinks] = useState(initialValue.links);
+  const [linkToEdit, setLinkToEdit] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (title !== initialValue.title) {
+        patch.title = title;
+      }
+      const currentBannerColor = bannerColor || void 0;
+      const initialBannerColor = initialValue.bannerColor || void 0;
+      if (currentBannerColor !== initialBannerColor) {
+        patch.bannerColor = currentBannerColor;
+      }
+      const currentMobile = mobileBanner || void 0;
+      const initialMobile = initialValue.bannerUrl.mobile || void 0;
+      if (desktopBanner !== initialValue.bannerUrl.desktop || currentMobile !== initialMobile) {
+        patch.bannerUrl = {
+          desktop: desktopBanner,
+          mobile: currentMobile
+        };
+      }
+      if (JSON.stringify(links) !== JSON.stringify(initialValue.links)) {
+        patch.links = links;
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save banner changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const removeLink = (index) => {
+    setLinks(links.filter((_, i) => i !== index));
+  };
+  const openEditLink = (index) => {
+    setLinkToEdit({
+      index,
+      text: links[index].text,
+      url: links[index].url
+    });
+  };
+  const saveEditedLink = () => {
+    if (linkToEdit) {
+      const newLinks = [...links];
+      if (linkToEdit.index === -1) {
+        newLinks.push({ text: linkToEdit.text, url: linkToEdit.url });
+      } else {
+        newLinks[linkToEdit.index] = { text: linkToEdit.text, url: linkToEdit.url };
+      }
+      setLinks(newLinks);
+      setLinkToEdit(null);
+    }
+  };
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) {
+      alert("EyeDropper API is not supported in this browser");
+      return;
+    }
+    const eyeDropper = new window.EyeDropper();
+    try {
+      const result = await eyeDropper.open();
+      setBannerColor(result.sRGBHex);
+    } catch (e) {
+      console.log("EyeDropper cancelled or failed", e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        sx: {
+          background: backgroundColor,
+          paddingTop: "8px",
+          position: "relative",
+          border: "2px dashed rgba(255,255,255,0.5)",
+          borderRadius: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { sx: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            zIndex: 10,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            bgcolor: "rgba(0,0,0,0.5)",
+            p: 1,
+            borderRadius: 1,
+            width: "300px"
+          }, children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: "Title",
+                variant: "outlined",
+                size: "small",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                sx: { input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  label: "Banner Color",
+                  variant: "outlined",
+                  size: "small",
+                  value: bannerColor,
+                  onChange: (e) => setBannerColor(e.target.value),
+                  placeholder: "#HEX or linear-gradient(...)",
+                  sx: { flex: 1, input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip, { title: "Eye Dropper", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: handleEyeDropper,
+                  sx: { color: "white", bgcolor: "rgba(255,255,255,0.1)", "&:hover": { bgcolor: "rgba(255,255,255,0.2)" } },
+                  children: /* @__PURE__ */ jsx(ColorizeIcon, { fontSize: "small" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: bannerColor.startsWith("#") ? bannerColor : "#1976d2",
+                  onChange: (e) => setBannerColor(e.target.value),
+                  style: { width: "40px", height: "40px", padding: 0, border: "none", background: "transparent", cursor: "pointer" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1 }, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                size: "small",
+                fullWidth: true,
+                onClick: updateImages,
+                children: "Update Images"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                opacity: 0.8
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "img",
+                  src: desktopBanner,
+                  alt: title,
+                  sx: {
+                    width: "100%",
+                    height: "auto",
+                    objectFit: "contain"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 0.5, color: "rgba(255,255,255,0.5)", bgcolor: "rgba(0,0,0,0.4)", borderRadius: 2, border: "1px dashed rgba(255,255,255,0.2)" }, children: "Stats Placeholder" }),
+                generateTagsDisplay(initialValue.eventTag),
+                links.map((link, index) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2
+                    },
+                    children: [
+                      link.text,
+                      /* @__PURE__ */ jsxs(Box, { sx: { ml: 1, display: "flex" }, children: [
+                        /* @__PURE__ */ jsx(Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "inherit" }) }) }),
+                        /* @__PURE__ */ jsx(Tooltip, { title: "Remove Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => removeLink(index), sx: { color: "error.light", p: 0.2 }, children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "inherit" }) }) })
+                      ] })
+                    ]
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+                    onClick: () => setLinkToEdit({ index: -1, text: "", url: "" }),
+                    sx: {
+                      color: "white",
+                      borderColor: "rgba(255,255,255,0.5)",
+                      borderRadius: 2,
+                      "&:hover": { borderColor: "white", bgcolor: "rgba(255,255,255,0.1)" }
+                    },
+                    children: "Add Link"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 2, mt: 2 }, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, color: "inherit", disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSave,
+          variant: "contained",
+          color: "primary",
+          disabled: isSaving,
+          startIcon: isSaving ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
+          children: isSaving ? "Saving..." : "Save Changes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: linkToEdit !== null, onClose: () => setLinkToEdit(null), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: (linkToEdit == null ? void 0 : linkToEdit.index) === -1 ? "Add Link" : "Edit Link" }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1, width: "400px" }, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Link Text",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.text) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, text: e.target.value } : null)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Link URL",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.url) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, url: e.target.value } : null)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => setLinkToEdit(null), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: saveEditedLink, variant: "contained", children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+var CANDIDATE_TIMEZONES = [
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Anchorage",
+  "America/Adak",
+  "Pacific/Honolulu",
+  "UTC"
+];
+function EventBasicInfoEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const toWallTimeISO = (dateInput, timeZone) => {
+    if (!dateInput) return "";
+    const d = new Date(dateInput);
+    if (isNaN(d.getTime())) return "";
+    const parts = new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone
+    }).formatToParts(d);
+    const f = (type) => {
+      var _a;
+      return (_a = parts.find((p) => p.type === type)) == null ? void 0 : _a.value;
+    };
+    const year = f("year");
+    const month = f("month");
+    const day = f("day");
+    let hour = f("hour");
+    if (hour === "24") hour = "00";
+    const minute = f("minute");
+    return `${year}-${month}-${day}T${hour}:${minute}`;
+  };
+  const toUTCISOString = (wallTime, timeZone) => {
+    var _a;
+    if (!wallTime) return void 0;
+    const d = /* @__PURE__ */ new Date(wallTime + ":00Z");
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      timeZoneName: "longOffset"
+    }).formatToParts(d);
+    const offsetPart = ((_a = parts.find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value) || "GMT";
+    const offset = offsetPart.replace("GMT", "");
+    const isoWithOffset = `${wallTime}:00${offset || "+00:00"}`;
+    return new Date(isoWithOffset).toISOString();
+  };
+  const [description, setDescription] = useState(initialValue.description);
+  const [timezone, setTimezone] = useState(initialValue.timezone);
+  const [startingDate, setStartingDate] = useState(toWallTimeISO(initialValue.startingDate, initialValue.timezone));
+  const [endingDate, setEndingDate] = useState(toWallTimeISO(initialValue.endingDate, initialValue.timezone));
+  const [timeInfo, setTimeInfo] = useState(initialValue.date);
+  const [isSaving, setIsSaving] = useState(false);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (description !== initialValue.description) patch.description = description;
+      if (timeInfo !== initialValue.date) patch.date = timeInfo;
+      if (timezone !== initialValue.timezone) patch.timezone = timezone;
+      if (startingDate !== toWallTimeISO(initialValue.startingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.startingDate = toUTCISOString(startingDate, timezone);
+      }
+      if (endingDate !== toWallTimeISO(initialValue.endingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.endingDate = toUTCISOString(endingDate, timezone);
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save basic info changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Card, { sx: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))",
+    border: "2px dashed rgba(25,118,210,0.5)",
+    width: "100%"
+  }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: "Cancel", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onCancel, color: "error", disabled: isSaving, children: /* @__PURE__ */ jsx(CancelIcon, {}) }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: "Apply Changes", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleSave, color: "primary", disabled: isSaving, children: isSaving ? /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) : /* @__PURE__ */ jsx(CheckCircleIcon, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { mb: 1 }, children: "Event Dates & Times:" }),
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Starting Date",
+            type: "datetime-local",
+            size: "small",
+            value: startingDate,
+            onChange: (e) => setStartingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Ending Date",
+            type: "datetime-local",
+            size: "small",
+            value: endingDate,
+            onChange: (e) => setEndingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: "Display Timezone" }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Display Timezone",
+              value: timezone,
+              onChange: (e) => setTimezone(e.target.value),
+              children: CANDIDATE_TIMEZONES.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz, children: tz }, tz))
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Hours of Operation:" }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            multiline: true,
+            variant: "standard",
+            placeholder: "e.g. Mon-Fri 9am-5pm",
+            value: timeInfo,
+            onChange: (e) => setTimeInfo(e.target.value),
+            sx: { mt: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        multiline: true,
+        variant: "standard",
+        value: description,
+        onChange: (e) => setDescription(e.target.value),
+        sx: {
+          paddingTop: 1,
+          "& .MuiInputBase-root": {
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: {
+      mt: 2,
+      width: "100%",
+      p: 1.5,
+      borderRadius: 2,
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+      background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+      color: "rgba(0,0,0,0.5)",
+      border: "1px dashed rgba(0,0,0,0.2)"
+    }, children: "Location Data (Not Editable)" })
+  ] }) });
+}
+
+export { EventBannerEdit, EventBasicInfoEdit, EventEditProvider, useEventEdit };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map