@sudobility/entity_pages 0.0.56 → 0.0.57

package/README.md

@@ -0,0 +1,73 @@
+# @sudobility/entity_pages
+
+Page containers for entity/organization management in React web applications.
+
+## Installation
+
+```bash
+bun add @sudobility/entity_pages
+```
+
+## Usage
+
+```tsx
+import {
+  EntityListPage,
+  EntitySettingsPage,
+  MembersPage,
+  InvitationsPage,
+} from '@sudobility/entity_pages';
+
+// In your router
+<Route path="/entities" element={<EntityListPage />} />
+<Route path="/entities/:slug/members" element={<MembersPage />} />
+<Route path="/entities/:slug/settings" element={<EntitySettingsPage />} />
+<Route path="/invitations" element={<InvitationsPage />} />
+```
+
+## API
+
+### Pages
+
+| Component | Description |
+|-----------|-------------|
+| `EntityListPage` | Display and select user's entities |
+| `EntitySettingsPage` | Edit entity name and settings |
+| `MembersPage` | View, add, and remove members |
+| `InvitationsPage` | Manage pending invitations |
+
+### Common Props
+
+```typescript
+interface PageProps {
+  networkClient: NetworkClient;
+  baseUrl: string;
+  token: string;
+  userId: string;
+  entitySlug?: string;
+  onEntityChange?: (entity: Entity) => void;
+  className?: string;
+}
+```
+
+### Peer Dependencies
+
+- `react` >= 18.0.0
+- `@tanstack/react-query` >= 5.0.0
+- `@sudobility/types` -- shared type definitions
+- `@sudobility/entity_client` -- data hooks
+- `@sudobility/entity-components` -- UI components
+
+## Development
+
+```bash
+bun run build        # Build ESM + CJS to dist/
+bun run clean        # Remove dist/
+bun run type-check   # TypeScript check (note: hyphenated)
+bun run lint         # ESLint
+bun test             # Run tests
+```
+
+## License
+
+BUSL-1.1

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@sudobility/entity_pages",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "Page containers for entity/organization management",
   "type": "module",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.js"
     }
   },
   "files": [
@@ -42,19 +40,19 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@tanstack/react-query": "^5.0.0",
-    "@sudobility/components": "^5.0.18",
-    "@sudobility/entity_client": "^0.0.25",
+    "@sudobility/components": "^5.0.20",
+    "@sudobility/entity_client": "^0.0.27",
     "@sudobility/entity-components": "^1.0.11",
     "@heroicons/react": "^2.2.0",
-    "@sudobility/types": "^1.9.55"
+    "@sudobility/types": "^1.9.57"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@heroicons/react": "^2.2.0",
-    "@sudobility/components": "^5.0.18",
+    "@sudobility/components": "^5.0.20",
     "@sudobility/entity-components": "^1.0.11",
-    "@sudobility/entity_client": "^0.0.25",
-    "@sudobility/types": "^1.9.55",
+    "@sudobility/entity_client": "^0.0.27",
+    "@sudobility/types": "^1.9.57",
     "@tanstack/react-query": "^5.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",

package/dist/index.umd.js

@@ -1 +0,0 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@sudobility/components"),require("@sudobility/entity-components"),require("@sudobility/entity_client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@sudobility/components","@sudobility/entity-components","@sudobility/entity_client"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.EntityPages={},l.jsxRuntime,l.React,l.SudobilityComponents,l.SudobilityEntityComponents,l.SudobilityEntityClient))})(this,(function(l,e,N,E,w,m){"use strict";function j(r){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(a,s,t.get?t:{enumerable:!0,get:()=>r[s]})}}return a.default=r,Object.freeze(a)}const I=j(N);function D({title:r,titleId:a,...s},t){return I.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:t,"aria-labelledby":a},s),r?I.createElement("title",{id:a},r):null,I.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}))}const P=I.forwardRef(D);function A(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading workspaces",children:[[1,2,3].map(r=>e.jsx("div",{className:"h-16 sm:h-20 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading workspaces..."})]})}function F({client:r,onSelectEntity:a}){const[s,t]=N.useState(!1),[o,n]=N.useState({displayName:"",description:""}),[f,u]=N.useState(null),{data:x=[],isLoading:g,isError:v,error:k,refetch:S}=m.useEntities(r),p=m.useCreateEntity(r),h=x.filter(i=>i.entityType==="personal"),c=x.filter(i=>i.entityType==="organization"),C=async i=>{if(i.preventDefault(),u(null),!o.displayName.trim()){u("Display name is required");return}try{await p.mutateAsync({displayName:o.displayName.trim(),description:o.description.trim()||void 0}),t(!1),n({displayName:"",description:""})}catch(b){u(b.message||"Failed to create organization")}};return e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Workspaces",children:[e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Workspaces"}),e.jsx("p",{className:"text-sm sm:text-base text-muted-foreground",children:"Manage your personal and organization workspaces"})]}),e.jsxs("button",{type:"button",onClick:()=>t(!0),"aria-label":"Create new organization",className:"flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:[e.jsx(P,{className:"h-4 w-4","aria-hidden":"true"}),e.jsx("span",{children:"New Organization"})]})]}),s&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":"Create organization",onClick:i=>{i.target===i.currentTarget&&(t(!1),n({displayName:"",description:""}),u(null))},onKeyDown:i=>{i.key==="Escape"&&(t(!1),n({displayName:"",description:""}),u(null))},children:e.jsxs("div",{className:"w-full max-w-md rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h2",{className:"text-lg font-semibold mb-4",children:"Create Organization"}),e.jsxs("form",{onSubmit:C,className:"space-y-4","aria-label":"Create organization form",children:[e.jsxs("div",{children:[e.jsx("label",{htmlFor:"create-org-name",className:"block text-sm font-medium mb-1",children:"Display Name"}),e.jsx("input",{id:"create-org-name",type:"text",value:o.displayName,onChange:i=>n(b=>({...b,displayName:i.target.value})),placeholder:"My Organization","aria-required":"true","aria-invalid":f?"true":void 0,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"})]}),e.jsxs("div",{children:[e.jsx("label",{htmlFor:"create-org-description",className:"block text-sm font-medium mb-1",children:"Description (optional)"}),e.jsx("textarea",{id:"create-org-description",value:o.description,onChange:i=>n(b=>({...b,description:i.target.value})),placeholder:"What is this organization for?",rows:3,className:"w-full px-3 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y"})]}),f&&e.jsx("p",{className:"text-sm text-destructive",role:"alert","aria-live":"polite",children:f}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:()=>{t(!1),n({displayName:"",description:""}),u(null)},className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Cancel"}),e.jsx("button",{type:"submit",disabled:p.isPending,"aria-busy":p.isPending,className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:p.isPending?"Creating...":"Create"})]})]})]})}),v&&e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-6 sm:mb-8",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load workspaces"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:k?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>S(),"aria-label":"Retry loading workspaces",className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",children:"Retry"})]}),g&&e.jsx(A,{}),!g&&!v&&e.jsxs(e.Fragment,{children:[h.length>0&&e.jsxs("section",{className:"mb-6 sm:mb-8","aria-label":"Personal workspace",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Personal Workspace"}),e.jsx(w.EntityList,{entities:h,onSelect:a,isLoading:g})]}),e.jsxs("section",{"aria-label":"Organizations",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Organizations"}),c.length===0?e.jsxs("div",{className:"text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{children:"No organizations yet"}),e.jsx("button",{type:"button",onClick:()=>t(!0),className:"mt-2 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded","aria-label":"Create your first organization",children:"Create your first organization"})]}):e.jsx(w.EntityList,{entities:c,onSelect:a,isLoading:g})]}),x.length===0&&e.jsxs("div",{className:"text-center py-8 sm:py-12 text-muted-foreground",role:"status",children:[e.jsx("p",{className:"text-base sm:text-lg font-medium mb-2",children:"No workspaces found"}),e.jsx("p",{className:"text-sm",children:"Create an organization to get started."})]})]})]})})}function z(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading members",children:[[1,2,3].map(r=>e.jsx("div",{className:"h-14 sm:h-16 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading members..."})]})}function O({title:r,message:a,confirmLabel:s,onConfirm:t,onCancel:o}){return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":r,onClick:n=>{n.target===n.currentTarget&&o()},onKeyDown:n=>{n.key==="Escape"&&o()},children:e.jsxs("div",{className:"w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:r}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:a}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:o,className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Cancel"}),e.jsx("button",{type:"button",onClick:t,className:"px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",children:s})]})]})})}function T({client:r,entity:a,currentUserId:s}){const t=a.userRole==="owner",[o,n]=N.useState(null),{data:f=[],isLoading:u,isError:x,error:g,refetch:v}=m.useEntityMembers(r,a.entitySlug),k=m.useUpdateMemberRole(r),S=m.useRemoveMember(r),{data:p=[],isLoading:h,isError:c,error:C,refetch:i}=m.useEntityInvitations(r,t?a.entitySlug:null),b=m.useCreateInvitation(r),Y=m.useCancelInvitation(r),$=async(d,y)=>{try{await k.mutateAsync({entitySlug:a.entitySlug,memberId:d,role:y})}catch(M){console.error("Failed to update role:",M)}},U=d=>{const y=f.find(L=>L.id===d),M=y?.user?.displayName||y?.user?.email||"this member";n({type:"removeMember",id:d,displayLabel:M})},B=async d=>{try{await S.mutateAsync({entitySlug:a.entitySlug,memberId:d})}catch(y){console.error("Failed to remove member:",y)}},G=async d=>{await b.mutateAsync({entitySlug:a.entitySlug,request:d})},H=d=>{const M=p.find(L=>L.id===d)?.email||"this invitation";n({type:"cancelInvitation",id:d,displayLabel:M})},J=async d=>{try{await Y.mutateAsync({entitySlug:a.entitySlug,invitationId:d})}catch(y){console.error("Failed to cancel invitation:",y)}},Q=async()=>{o&&(o.type==="removeMember"?await B(o.id):o.type==="cancelInvitation"&&await J(o.id),n(null))};return a.entityType==="personal"?e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{className:"text-center py-8 sm:py-12 text-muted-foreground",role:"status","aria-label":"Personal workspace notice",children:[e.jsx("p",{children:"Personal workspaces cannot have additional members."}),e.jsx("p",{className:"mt-2",children:"Create an organization to collaborate with others."})]})}):e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Members management",children:[o&&e.jsx(O,{title:o.type==="removeMember"?"Remove Member":"Cancel Invitation",message:o.type==="removeMember"?`Are you sure you want to remove ${o.displayLabel}? They will lose access to this organization.`:`Are you sure you want to cancel the invitation to ${o.displayLabel}?`,confirmLabel:o.type==="removeMember"?"Remove":"Cancel Invitation",onConfirm:Q,onCancel:()=>n(null)}),e.jsxs("div",{className:"mb-6 sm:mb-8",children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Members"}),e.jsxs("p",{className:"text-sm sm:text-base text-muted-foreground",children:["Manage members and invitations for ",a.displayName]})]}),t&&e.jsxs("section",{className:"rounded-lg border p-3 sm:p-4 mb-6 sm:mb-8","aria-label":"Invite members",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3 sm:mb-4",children:"Invite Members"}),e.jsx(w.InvitationForm,{onSubmit:G,isSubmitting:b.isPending})]}),t&&e.jsxs("section",{className:"mb-6 sm:mb-8","aria-label":"Pending invitations",children:[e.jsx("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:"Pending Invitations"}),c?e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load invitations"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:C?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>i(),"aria-label":"Retry loading invitations",className:"px-3 py-1.5 text-sm rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",children:"Retry"})]}):h?e.jsx(z,{}):p.length===0?e.jsx("div",{className:"text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",role:"status",children:e.jsx("p",{children:"No pending invitations"})}):e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.InvitationList,{invitations:p,mode:"admin",onCancel:H,isLoading:h,emptyMessage:"No pending invitations"})})]}),e.jsxs("section",{"aria-label":"Current members",children:[e.jsxs("h2",{className:"text-base sm:text-lg font-semibold mb-3",children:["Current Members (",f.length,")"]}),x?e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load members"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:g?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>v(),"aria-label":"Retry loading members",className:"px-3 py-1.5 text-sm rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",children:"Retry"})]}):u?e.jsx(z,{}):f.length===0?e.jsxs("div",{className:"text-center py-4 sm:py-6 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{children:"No members yet"}),t&&e.jsx("p",{className:"text-sm mt-1",children:"Use the invite form above to add members."})]}):e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.MemberList,{members:f,currentUserId:s,canManage:t,onRoleChange:$,onRemove:U,isLoading:u})})]})]})})}function W(){return e.jsxs("div",{className:"space-y-3",role:"status","aria-label":"Loading invitations",children:[[1,2].map(r=>e.jsx("div",{className:"h-16 sm:h-20 rounded-lg bg-muted animate-pulse"},r)),e.jsx("span",{className:"sr-only",children:"Loading invitations..."})]})}function q({entityName:r,onConfirm:a,onCancel:s}){return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",role:"dialog","aria-modal":"true","aria-label":"Decline invitation",onClick:t=>{t.target===t.currentTarget&&s()},onKeyDown:t=>{t.key==="Escape"&&s()},children:e.jsxs("div",{className:"w-full max-w-sm rounded-lg bg-background p-4 sm:p-6 shadow-lg",children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Decline Invitation"}),e.jsxs("p",{className:"text-sm text-muted-foreground mb-4",children:["Are you sure you want to decline the invitation to join"," ",e.jsx("strong",{children:r}),"? You will need a new invitation to join later."]}),e.jsxs("div",{className:"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",children:[e.jsx("button",{type:"button",onClick:s,className:"px-4 py-2 rounded-lg border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 w-full sm:w-auto",children:"Keep"}),e.jsx("button",{type:"button",onClick:a,className:"px-4 py-2 rounded-lg bg-destructive text-destructive-foreground font-medium hover:bg-destructive/90 transition-colors focus:outline-none focus:ring-2 focus:ring-destructive focus:ring-offset-2 w-full sm:w-auto",children:"Decline"})]})]})})}function K({client:r,onInvitationAccepted:a}){const{data:s=[],isLoading:t,isError:o,error:n,refetch:f}=m.useMyInvitations(r),u=m.useAcceptInvitation(r),x=m.useDeclineInvitation(r),[g,v]=N.useState(null),k=async c=>{try{await u.mutateAsync(c),a?.()}catch(C){console.error("Failed to accept invitation:",C)}},S=c=>{const i=s.find(b=>b.token===c)?.entity?.displayName||"this organization";v({token:c,entityName:i})},p=async()=>{if(g){try{await x.mutateAsync(g.token)}catch(c){console.error("Failed to decline invitation:",c)}v(null)}},h=s.filter(c=>c.status==="pending").length;return e.jsx(E.Section,{spacing:"lg",maxWidth:"4xl",children:e.jsxs("div",{role:"main","aria-label":"Invitations",children:[g&&e.jsx(q,{entityName:g.entityName,onConfirm:p,onCancel:()=>v(null)}),e.jsxs("div",{className:"mb-4 sm:mb-6",children:[e.jsx("h1",{className:"text-xl sm:text-2xl font-bold text-foreground",children:"Invitations"}),e.jsx("p",{className:"text-sm sm:text-base text-muted-foreground",children:h>0?`You have ${h} pending invitation${h>1?"s":""}`:"No pending invitations"})]}),o&&e.jsxs("div",{className:"rounded-lg border border-destructive/50 bg-destructive/10 p-4 sm:p-6 text-center mb-4 sm:mb-6",role:"alert","aria-live":"polite",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load invitations"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:n?.message||"An unexpected error occurred"}),e.jsx("button",{type:"button",onClick:()=>f(),"aria-label":"Retry loading invitations",className:"px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",children:"Retry"})]}),t&&e.jsx(W,{}),!t&&!o&&e.jsx(e.Fragment,{children:s.length===0?e.jsxs("div",{className:"text-center py-6 sm:py-8 text-muted-foreground border border-dashed rounded-lg",role:"status",children:[e.jsx("p",{className:"text-base sm:text-lg font-medium mb-1",children:"No invitations"}),e.jsx("p",{className:"text-sm",children:"You don't have any pending invitations"})]}):e.jsx("section",{"aria-label":"Invitation list",children:e.jsx("div",{className:"overflow-x-auto",children:e.jsx(w.InvitationList,{invitations:s,mode:"user",onAccept:k,onDecline:S,isLoading:t,emptyMessage:"You don't have any pending invitations"})})})})]})})}l.EntityListPage=F,l.InvitationsPage=K,l.MembersManagementPage=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));