@planningcenter/organization-avatars 0.1.0-pre

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Planning Center
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Organization Avatars
+
+This package provides a React component that can be used for uploading and editing an organization's light mode and dark mode avatars.

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),B=require("react-dom"),D=require("@planningcenter/url"),N=require("@planningcenter/tapestry"),A=require("@planningcenter/icons/paths/general"),L=require("@planningcenter/icons/paths/services"),P=require("react-dropzone");function S(a){var o,r,t="";if(typeof a=="string"||typeof a=="number")t+=a;else if(typeof a=="object")if(Array.isArray(a)){var c=a.length;for(o=0;o<c;o++)a[o]&&(r=S(a[o]))&&(t&&(t+=" "),t+=r)}else for(r in a)a[r]&&(t&&(t+=" "),t+=r);return t}function $(){for(var a,o,r=0,t="",c=arguments.length;r<c;r++)(a=arguments[r])&&(o=S(a))&&(t&&(t+=" "),t+=o);return t}const T=a=>a==="dark_mode_avatar"?"dark":"light";function z({avatarUrl:a,organization:o,mode:r,pcoApp:t,pcoEnv:c,csrfToken:f,onAvatarUpdate:x}){const[n,m]=i.useState(null),[d,v]=i.useState(a),[l,g]=i.useState(!1),[j,u]=i.useState(""),_=i.useId(),C=i.useRef(null),b=T(r),F=h=>{const[s]=h;s&&m(Object.assign(s,{preview:URL.createObjectURL(s)}))};i.useEffect(()=>{v(a)},[a]),i.useEffect(()=>()=>{n?.preview&&(URL.revokeObjectURL(n.preview),u(""))},[n]);const k=async h=>{const s=await fetch(D.pcoApiUrl(t,{env:c}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":f,Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),p=await s.json();if(!s.ok)throw p;return p},q=async h=>{if(h.preventDefault(),!(!n||l)){g(!0);try{const s=new FileReader,p=await new Promise((w,U)=>{s.onloadend=()=>w(s.result),s.onerror=U,s.readAsDataURL(n)}),y=await k({[r]:p,[`${r}_cache`]:""});v(y.data.attributes[r].url),m(null),x(r,y.data.attributes[r].url),C.current?.close()}catch{u("We were unable to save your avatar.")}finally{g(!1)}}},M=async()=>{if(!l){g(!0);try{await k({[`remove_${r}`]:"1"}),v(""),x(r,""),C.current?.close()}catch{u("We were unable to delete your avatar.")}finally{g(!1)}}},O=()=>{m(null),u("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",commandfor:_,command:"show-modal",className:`pco-org-avatar__button pco-org-avatar__button--${b}`,children:d?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:d,alt:`Church logo for ${o}`}),e.jsx("span",{children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:A.pencil})})})]}):e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:L.image})})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[b," mode"]})]}),B.createPortal(e.jsx("dialog",{id:_,ref:C,className:"dialog",onClose:O,children:e.jsxs("form",{onSubmit:q,children:[e.jsxs("div",{className:"dialog__header",children:[e.jsxs("h1",{className:"dialog__title",children:["Church logo — ",b," mode"]}),e.jsx("button",{type:"button",commandfor:_,command:"close",className:"dialog__close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:A.smallX})})})]}),e.jsxs("div",{className:"dialog__body",children:[j&&e.jsxs("div",{role:"alert",className:"alert alert--danger mb-2",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:A.exclamationTriangle})}),e.jsx("div",{className:"alert__content",children:e.jsx("p",{children:j})})]}),e.jsx(P,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:F,children:({getRootProps:h,getInputProps:s,isFocused:p,isDragAccept:y,isDragReject:w,isDragActive:U})=>{const R=$("pco-org-avatar__dropzone",`pco-org-avatar__dropzone--${b}`,{"pco-org-avatar__dropzone--image":n||d,"pco-org-avatar__dropzone--focused":p,"pco-org-avatar__dropzone--accepted":y,"pco-org-avatar__dropzone--rejected":U&&w});return e.jsxs("div",{...h({className:R}),children:[e.jsx("input",{...s()}),n?e.jsx("img",{src:n.preview,alt:`Church logo for ${o}`}):d?e.jsx("img",{src:d,alt:`Church logo for ${o}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:A.toCloudArrow})}),U&&w?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Add church logo"}),e.jsx("p",{children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]})}})]}),e.jsxs("div",{className:"dialog__actions",children:[d&&e.jsx(N.Button,{label:"Delete logo",kind:"delete",onClick:M,loading:l,disabled:l,className:"mr-a"}),e.jsx(N.Button,{type:"button",label:"Cancel",commandfor:_,command:"close",disabled:l}),e.jsx(N.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!n||l})]})]})}),document.body)]})}function I({avatarUrl:a,darkModeAvatarUrl:o,orgName:r,pcoApp:t,pcoEnv:c,csrfToken:f,showDarkModeAvatar:x=!1}){const[n,m]=i.useState(a),[d,v]=i.useState(o),l=(j,u)=>{j==="avatar"?m(u):j==="dark_mode_avatar"&&v(u)},g=d||n;return e.jsxs("div",{className:"d-f g-1",children:[e.jsx(z,{avatarUrl:n,organization:r,mode:"avatar",pcoApp:t,pcoEnv:c,csrfToken:f,onAvatarUpdate:l}),x&&e.jsx(z,{avatarUrl:g,organization:r,mode:"dark_mode_avatar",pcoApp:t,pcoEnv:c,csrfToken:f,onAvatarUpdate:l})]})}exports.OrganizationAvatars=I;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { OrganizationAvatars } from "./organization_avatars";
+export type { OrganizationAvatarsProps } from "./types";

package/dist/index.js

@@ -0,0 +1,331 @@
+import { jsxs as o, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as m, useId as P, useRef as S, useEffect as M } from "react";
+import { createPortal as I } from "react-dom";
+import { pcoApiUrl as T } from "@planningcenter/url";
+import { Button as j } from "@planningcenter/tapestry";
+import { pencil as W, smallX as G, exclamationTriangle as J, toCloudArrow as X } from "@planningcenter/icons/paths/general";
+import { image as q } from "@planningcenter/icons/paths/services";
+import E from "react-dropzone";
+function R(a) {
+  var l, r, t = "";
+  if (typeof a == "string" || typeof a == "number") t += a;
+  else if (typeof a == "object") if (Array.isArray(a)) {
+    var c = a.length;
+    for (l = 0; l < c; l++) a[l] && (r = R(a[l])) && (t && (t += " "), t += r);
+  } else for (r in a) a[r] && (t && (t += " "), t += r);
+  return t;
+}
+function H() {
+  for (var a, l, r = 0, t = "", c = arguments.length; r < c; r++) (a = arguments[r]) && (l = R(a)) && (t && (t += " "), t += l);
+  return t;
+}
+const K = (a) => a === "dark_mode_avatar" ? "dark" : "light";
+function D({
+  avatarUrl: a,
+  organization: l,
+  mode: r,
+  pcoApp: t,
+  pcoEnv: c,
+  csrfToken: y,
+  onAvatarUpdate: w
+}) {
+  const [i, g] = m(null), [s, f] = m(a), [d, v] = m(!1), [_, h] = m(""), U = P(), z = S(null), C = K(r), F = (u) => {
+    const [n] = u;
+    n && g(
+      Object.assign(n, {
+        preview: URL.createObjectURL(n)
+      })
+    );
+  };
+  M(() => {
+    f(a);
+  }, [a]), M(() => () => {
+    i?.preview && (URL.revokeObjectURL(i.preview), h(""));
+  }, [i]);
+  const x = async (u) => {
+    const n = await fetch(T(t, { env: c }), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": y,
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        data: {
+          attributes: u
+        }
+      })
+    }), p = await n.json();
+    if (!n.ok) throw p;
+    return p;
+  }, L = async (u) => {
+    if (u.preventDefault(), !(!i || d)) {
+      v(!0);
+      try {
+        const n = new FileReader(), p = await new Promise((k, N) => {
+          n.onloadend = () => k(n.result), n.onerror = N, n.readAsDataURL(i);
+        }), A = await x({
+          [r]: p,
+          [`${r}_cache`]: ""
+        });
+        f(A.data.attributes[r].url), g(null), w(r, A.data.attributes[r].url), z.current?.close();
+      } catch {
+        h("We were unable to save your avatar.");
+      } finally {
+        v(!1);
+      }
+    }
+  }, O = async () => {
+    if (!d) {
+      v(!0);
+      try {
+        await x({
+          [`remove_${r}`]: "1"
+        }), f(""), w(r, ""), z.current?.close();
+      } catch {
+        h("We were unable to delete your avatar.");
+      } finally {
+        v(!1);
+      }
+    }
+  }, $ = () => {
+    g(null), h("");
+  };
+  return /* @__PURE__ */ o(b, { children: [
+    /* @__PURE__ */ o("div", { className: "pco-org-avatar", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          commandfor: U,
+          command: "show-modal",
+          className: `pco-org-avatar__button pco-org-avatar__button--${C}`,
+          children: s ? /* @__PURE__ */ o(b, { children: [
+            /* @__PURE__ */ e("img", { src: s, alt: `Church logo for ${l}` }),
+            /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e("path", { d: W })
+              }
+            ) })
+          ] }) : /* @__PURE__ */ e(
+            "svg",
+            {
+              width: "48",
+              height: "48",
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e("path", { d: q })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "pco-org-avatar__label", children: [
+        C,
+        " mode"
+      ] })
+    ] }),
+    I(
+      /* @__PURE__ */ e(
+        "dialog",
+        {
+          id: U,
+          ref: z,
+          className: "dialog",
+          onClose: $,
+          children: /* @__PURE__ */ o("form", { onSubmit: L, children: [
+            /* @__PURE__ */ o("div", { className: "dialog__header", children: [
+              /* @__PURE__ */ o("h1", { className: "dialog__title", children: [
+                "Church logo — ",
+                C,
+                " mode"
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  commandfor: U,
+                  command: "close",
+                  className: "dialog__close",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ e(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "currentColor",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ e("path", { d: G })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o("div", { className: "dialog__body", children: [
+              _ && /* @__PURE__ */ o("div", { role: "alert", className: "alert alert--danger mb-2", children: [
+                /* @__PURE__ */ e(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    className: "symbol",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ e("path", { d: J })
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "alert__content", children: /* @__PURE__ */ e("p", { children: _ }) })
+              ] }),
+              /* @__PURE__ */ e(
+                E,
+                {
+                  accept: { "image/*": [".jpg", ".jpeg", ".png"] },
+                  multiple: !1,
+                  onDropAccepted: F,
+                  children: ({
+                    getRootProps: u,
+                    getInputProps: n,
+                    isFocused: p,
+                    isDragAccept: A,
+                    isDragReject: k,
+                    isDragActive: N
+                  }) => {
+                    const B = H(
+                      "pco-org-avatar__dropzone",
+                      `pco-org-avatar__dropzone--${C}`,
+                      {
+                        "pco-org-avatar__dropzone--image": i || s,
+                        "pco-org-avatar__dropzone--focused": p,
+                        "pco-org-avatar__dropzone--accepted": A,
+                        "pco-org-avatar__dropzone--rejected": N && k
+                      }
+                    );
+                    return /* @__PURE__ */ o("div", { ...u({ className: B }), children: [
+                      /* @__PURE__ */ e("input", { ...n() }),
+                      i ? /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: i.preview,
+                          alt: `Church logo for ${l}`
+                        }
+                      ) : s ? /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: s,
+                          alt: `Church logo for ${l}`
+                        }
+                      ) : /* @__PURE__ */ o(b, { children: [
+                        /* @__PURE__ */ e(
+                          "svg",
+                          {
+                            width: "64",
+                            height: "64",
+                            viewBox: "0 0 16 16",
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ e("path", { d: X })
+                          }
+                        ),
+                        N && k ? /* @__PURE__ */ o(b, { children: [
+                          /* @__PURE__ */ e("h2", { children: "Wrong file type" }),
+                          /* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
+                        ] }) : /* @__PURE__ */ o(b, { children: [
+                          /* @__PURE__ */ e("h2", { children: "Add church logo" }),
+                          /* @__PURE__ */ e("p", { children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                        ] })
+                      ] })
+                    ] });
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o("div", { className: "dialog__actions", children: [
+              s && /* @__PURE__ */ e(
+                j,
+                {
+                  label: "Delete logo",
+                  kind: "delete",
+                  onClick: O,
+                  loading: d,
+                  disabled: d,
+                  className: "mr-a"
+                }
+              ),
+              /* @__PURE__ */ e(
+                j,
+                {
+                  type: "button",
+                  label: "Cancel",
+                  commandfor: U,
+                  command: "close",
+                  disabled: d
+                }
+              ),
+              /* @__PURE__ */ e(
+                j,
+                {
+                  type: "submit",
+                  label: "Update logo",
+                  kind: "primary",
+                  loading: d,
+                  disabled: !i || d
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function oe({
+  avatarUrl: a,
+  darkModeAvatarUrl: l,
+  orgName: r,
+  pcoApp: t,
+  pcoEnv: c,
+  csrfToken: y,
+  showDarkModeAvatar: w = !1
+}) {
+  const [i, g] = m(a), [s, f] = m(
+    l
+  ), d = (_, h) => {
+    _ === "avatar" ? g(h) : _ === "dark_mode_avatar" && f(h);
+  };
+  return /* @__PURE__ */ o("div", { className: "d-f g-1", children: [
+    /* @__PURE__ */ e(
+      D,
+      {
+        avatarUrl: i,
+        organization: r,
+        mode: "avatar",
+        pcoApp: t,
+        pcoEnv: c,
+        csrfToken: y,
+        onAvatarUpdate: d
+      }
+    ),
+    w && /* @__PURE__ */ e(
+      D,
+      {
+        avatarUrl: s || i,
+        organization: r,
+        mode: "dark_mode_avatar",
+        pcoApp: t,
+        pcoEnv: c,
+        csrfToken: y,
+        onAvatarUpdate: d
+      }
+    )
+  ] });
+}
+export {
+  oe as OrganizationAvatars
+};

package/dist/organization_avatar.d.ts

@@ -0,0 +1,2 @@
+import type { OrganizationAvatarProps } from "./types";
+export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoApp, pcoEnv, csrfToken, onAvatarUpdate, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/organization_avatars.d.ts

@@ -0,0 +1,2 @@
+import type { OrganizationAvatarsProps } from "./types";
+export declare function OrganizationAvatars({ avatarUrl: initialAvatarUrl, darkModeAvatarUrl: initialDarkModeAvatarUrl, orgName, pcoApp, pcoEnv, csrfToken, showDarkModeAvatar, }: OrganizationAvatarsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+export type OrganizationAvatarsProps = {
+    avatarUrl?: string;
+    darkModeAvatarUrl?: string;
+    orgName: string;
+    pcoApp: string;
+    pcoEnv?: string;
+    csrfToken: string;
+    showDarkModeAvatar?: boolean;
+};
+export type OrganizationAvatarProps = {
+    avatarUrl?: string;
+    organization: string;
+    mode: "avatar" | "dark_mode_avatar";
+    pcoApp: string;
+    pcoEnv?: string;
+    csrfToken: string;
+    onAvatarUpdate: (attrName: string, newUrl: string) => void;
+};
+export type FileWithPreview = File & {
+    preview: string;
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@planningcenter/organization-avatars",
+  "version": "0.1.0-pre",
+  "description": "Organization avatar upload components for Planning Center apps",
+  "type": "module",
+  "packageManager": "yarn@1.22.22",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.docs.ts",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && cp src/organization_avatar.css dist/style.css",
+    "build:docs": "vite build --config vite.config.docs.ts"
+  },
+  "devDependencies": {
+    "@planningcenter/icons": "^15.28.0",
+    "@planningcenter/tapestry": "^2.8.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "@planningcenter/icons": "^15.26.0",
+    "@planningcenter/tapestry": "^2.7.0",
+    "@planningcenter/url": "^3.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-dropzone": "^14.0.0"
+  }
+}