@stapel/workspaces-react 0.4.0 → 0.5.0

package/src/default/MembersManager.tsx

@@ -0,0 +1,185 @@
+/**
+ * `<MembersManager/>` — default skin for the "members & roles" settings
+ * screen (owner directive: "настройки воркспейса (имя/участники/роли/
+ * инвайты)"). Built entirely on this pair's EXISTING `Members` headless
+ * wrapper (`useMembers`/`useInviteMembers`/`useUpdateMemberRole`/
+ * `useRemoveMember`) — no new backend surface.
+ */
+import { useState } from "react";
+import type { ReactElement } from "react";
+import { Alert, Button, Card, Input, Modal, Popconfirm, Select, Table, Typography } from "antd";
+import type { TableProps } from "antd";
+import { useT } from "@stapel/core";
+import { Members } from "../headless/Members.js";
+import type { Member, WorkspaceRole } from "../api/types.js";
+import { WORKSPACES_I18N_KEYS } from "../i18n/keys.js";
+
+export interface MembersManagerProps {
+  workspaceId: string;
+  /**
+   * Whether the caller may invite, change roles, and remove members. The
+   * host already knows the caller's own role in this workspace (e.g. from
+   * `useWorkspace(workspaceId).data?.my_role`); this component doesn't
+   * re-derive it — pass `false` for a read-only roster (e.g. a `viewer`/
+   * `member` looking at their teammates). Default `true`.
+   */
+  canManage?: boolean;
+}
+
+const ROLES: readonly WorkspaceRole[] = ["owner", "admin", "member", "viewer"];
+
+const ROLE_KEY: Record<
+  WorkspaceRole,
+  "roleOwner" | "roleAdmin" | "roleMember" | "roleViewer"
+> = {
+  owner: "roleOwner",
+  admin: "roleAdmin",
+  member: "roleMember",
+  viewer: "roleViewer",
+};
+
+function isWorkspaceRole(value: string): value is WorkspaceRole {
+  return (ROLES as readonly string[]).includes(value);
+}
+
+export function MembersManager(props: MembersManagerProps): ReactElement {
+  const t = useT();
+  const canManage = props.canManage ?? true;
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [emailsText, setEmailsText] = useState("");
+  const [inviteRole, setInviteRole] = useState<WorkspaceRole>("member");
+
+  return (
+    <Members workspaceId={props.workspaceId}>
+      {({ members, isLoading, isError, error, invite, isInviting, updateRole, remove }) => {
+        function openInvite(): void {
+          setEmailsText("");
+          setInviteRole("member");
+          setInviteOpen(true);
+        }
+
+        function submitInvite(): void {
+          const emails = emailsText
+            .split(/[,\s]+/)
+            .map((e) => e.trim())
+            .filter((e) => e.length > 0);
+          if (emails.length === 0) return;
+          invite({ emails, role: inviteRole });
+          setInviteOpen(false);
+        }
+
+        const columns: TableProps<Member>["columns"] = [
+          {
+            title: "Email",
+            dataIndex: "email",
+            key: "email",
+            render: (value: string | null) => value ?? "—",
+          },
+          {
+            title: t(WORKSPACES_I18N_KEYS.membersInviteRoleLabel),
+            key: "role",
+            render: (_: unknown, member: Member) => {
+              const role = isWorkspaceRole(member.role) ? member.role : "member";
+              return canManage ? (
+                <Select<WorkspaceRole>
+                  value={role}
+                  style={{ width: 140 }}
+                  onChange={(next) => updateRole({ userId: member.user_id, role: next })}
+                  options={ROLES.map((r) => ({ value: r, label: t(WORKSPACES_I18N_KEYS[ROLE_KEY[r]]) }))}
+                />
+              ) : (
+                <span>{t(WORKSPACES_I18N_KEYS[ROLE_KEY[role]])}</span>
+              );
+            },
+          },
+          ...(canManage
+            ? [
+                {
+                  title: "",
+                  key: "actions",
+                  render: (_: unknown, member: Member) => (
+                    <Popconfirm
+                      title={t(WORKSPACES_I18N_KEYS.membersRemoveConfirm)}
+                      onConfirm={() => remove(member.user_id)}
+                    >
+                      <Button danger type="link">
+                        {t(WORKSPACES_I18N_KEYS.membersRemove)}
+                      </Button>
+                    </Popconfirm>
+                  ),
+                },
+              ]
+            : []),
+        ];
+
+        return (
+          <Card data-testid="members-manager">
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
+              <div>
+                <Typography.Title level={4} style={{ marginTop: 0 }}>
+                  {t(WORKSPACES_I18N_KEYS.membersTitle)}
+                </Typography.Title>
+                <Typography.Text type="secondary">{t(WORKSPACES_I18N_KEYS.membersSubtitle)}</Typography.Text>
+              </div>
+              {canManage && (
+                <Button
+                  type="primary"
+                  onClick={openInvite}
+                  data-analytics="none"
+                  data-analytics-reason="local-ui-open-invite-dialog"
+                >
+                  {t(WORKSPACES_I18N_KEYS.membersInvite)}
+                </Button>
+              )}
+            </div>
+
+            {isError && error && (
+              <Alert style={{ marginTop: 12 }} type="error" showIcon message={error.message} />
+            )}
+
+            <Table<Member>
+              style={{ marginTop: 16 }}
+              size="small"
+              loading={isLoading}
+              rowKey={(member) => member.id}
+              dataSource={members as Member[]}
+              columns={columns}
+              pagination={false}
+            />
+
+            <Modal
+              title={t(WORKSPACES_I18N_KEYS.membersInviteDialogTitle)}
+              open={inviteOpen}
+              onCancel={() => setInviteOpen(false)}
+              onOk={submitInvite}
+              okButtonProps={{ loading: isInviting, disabled: emailsText.trim().length === 0 }}
+            >
+              <div style={{ display: "grid", gap: 12 }}>
+                <div>
+                  <Typography.Text>{t(WORKSPACES_I18N_KEYS.membersInviteEmailsLabel)}</Typography.Text>
+                  <Input
+                    value={emailsText}
+                    onChange={(e) => setEmailsText(e.target.value)}
+                    placeholder={t(WORKSPACES_I18N_KEYS.membersInviteEmailsPlaceholder)}
+                  />
+                </div>
+                <div>
+                  <Typography.Text>{t(WORKSPACES_I18N_KEYS.membersInviteRoleLabel)}</Typography.Text>
+                  <Select<WorkspaceRole>
+                    value={inviteRole}
+                    onChange={setInviteRole}
+                    style={{ width: "100%" }}
+                    options={ROLES.filter((r) => r !== "owner").map((r) => ({
+                      value: r,
+                      label: t(WORKSPACES_I18N_KEYS[ROLE_KEY[r]]),
+                    }))}
+                  />
+                </div>
+              </div>
+            </Modal>
+          </Card>
+        );
+      }}
+    </Members>
+  );
+}

package/src/default/WorkspaceSettings.tsx

@@ -0,0 +1,128 @@
+/**
+ * `<WorkspaceSettings/>` — default skin for the "workspace" settings screen
+ * (owner directive: workspace name/general settings, one of the settings
+ * surfaces this liberary pair owns). Built entirely on this pair's EXISTING
+ * hooks (`useWorkspace`, `useUpdateWorkspace`, `useDeleteWorkspace`) — no new
+ * backend surface. Participants/roles live in the sibling
+ * `<MembersManager/>` (a workspace's settings page composes both).
+ */
+import { useEffect, useState } from "react";
+import type { ReactElement } from "react";
+import { Alert, Badge, Button, Card, Input, Popconfirm, Spin, Typography } from "antd";
+import { useT } from "@stapel/core";
+import { useWorkspace } from "../model/queries.js";
+import { useUpdateWorkspace, useDeleteWorkspace } from "../model/mutations.js";
+import { WORKSPACES_I18N_KEYS } from "../i18n/keys.js";
+
+export interface WorkspaceSettingsProps {
+  workspaceId: string;
+  /** Called after a successful delete — the host navigates away / switches
+   * to another workspace. Not called on cancel or failure. */
+  onDeleted?(): void;
+}
+
+export function WorkspaceSettings(props: WorkspaceSettingsProps): ReactElement {
+  const t = useT();
+  const query = useWorkspace(props.workspaceId);
+  const updateMutation = useUpdateWorkspace(props.workspaceId);
+  const deleteMutation = useDeleteWorkspace();
+
+  const workspace = query.data;
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    if (workspace) setName(workspace.name);
+  }, [workspace]);
+
+  function handleSave(): void {
+    updateMutation.mutate({ name: name.trim() });
+  }
+
+  function handleDelete(): void {
+    deleteMutation.mutate(props.workspaceId, {
+      onSuccess: () => props.onDeleted?.(),
+    });
+  }
+
+  if (query.isLoading && !workspace) {
+    return <Spin data-testid="workspace-settings-loading" />;
+  }
+  if (!workspace) {
+    return (
+      <Alert
+        data-testid="workspace-settings-error"
+        type="error"
+        showIcon
+        message={query.error?.message ?? t(WORKSPACES_I18N_KEYS.unknownError)}
+      />
+    );
+  }
+
+  const isOwner = workspace.my_role === "owner";
+
+  return (
+    <div data-testid="workspace-settings" style={{ display: "grid", gap: 16 }}>
+      <Card>
+        <Typography.Title level={4} style={{ marginTop: 0 }}>
+          {t(WORKSPACES_I18N_KEYS.settingsTitle)}
+        </Typography.Title>
+        <Typography.Text type="secondary">{t(WORKSPACES_I18N_KEYS.settingsSubtitle)}</Typography.Text>
+
+        <div style={{ display: "grid", gap: 12, maxWidth: 480, marginTop: 16 }}>
+          <div>
+            <Typography.Text>{t(WORKSPACES_I18N_KEYS.fieldName)}</Typography.Text>
+            <Input value={name} onChange={(e) => setName(e.target.value)} disabled={!isOwner} />
+          </div>
+          <div>
+            <Typography.Text>{t(WORKSPACES_I18N_KEYS.fieldSlug)}</Typography.Text>
+            <div>
+              <Typography.Text code>{workspace.slug}</Typography.Text>
+            </div>
+          </div>
+          <div>
+            <Typography.Text>{t(WORKSPACES_I18N_KEYS.fieldType)}</Typography.Text>
+            <div>
+              <Badge status="default" text={workspace.type} />
+            </div>
+          </div>
+        </div>
+
+        {updateMutation.error && (
+          <Alert
+            style={{ marginTop: 12 }}
+            type="error"
+            showIcon
+            message={updateMutation.error.message}
+          />
+        )}
+
+        <Button
+          type="primary"
+          style={{ marginTop: 16 }}
+          loading={updateMutation.isPending}
+          disabled={!isOwner || !name.trim()}
+          onClick={handleSave}
+          data-analytics="none"
+          data-analytics-reason="business action — host app wraps with its own tracked(); pairs carry no @stapel/analytics runtime dependency by architecture"
+        >
+          {updateMutation.isPending ? t(WORKSPACES_I18N_KEYS.saving) : t(WORKSPACES_I18N_KEYS.save)}
+        </Button>
+      </Card>
+
+      {isOwner && (
+        <Card>
+          <Typography.Title level={5} type="danger" style={{ marginTop: 0 }}>
+            {t(WORKSPACES_I18N_KEYS.dangerZoneTitle)}
+          </Typography.Title>
+          <Popconfirm
+            title={t(WORKSPACES_I18N_KEYS.deleteWorkspaceConfirm)}
+            onConfirm={handleDelete}
+            okButtonProps={{ loading: deleteMutation.isPending, danger: true }}
+          >
+            <Button danger>{t(WORKSPACES_I18N_KEYS.deleteWorkspace)}</Button>
+          </Popconfirm>
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/default/index.ts

@@ -0,0 +1,17 @@
+/**
+ * `@stapel/workspaces-react/default` — the pilot default skin for this
+ * pair's settings surfaces (mirrors auth-react's `/default` split, §54): a
+ * separate entry point so consumers who bring their own visuals never pull
+ * `antd` into their bundle; importing this subpath is the opt-in.
+ *
+ * ```tsx
+ * import { WorkspaceSettings, MembersManager } from "@stapel/workspaces-react/default";
+ * // under this pair's <WorkspacesProvider> + core <I18nProvider>:
+ * <WorkspaceSettings workspaceId={id} />
+ * <MembersManager workspaceId={id} />
+ * ```
+ */
+export { WorkspaceSettings } from "./WorkspaceSettings.js";
+export type { WorkspaceSettingsProps } from "./WorkspaceSettings.js";
+export { MembersManager } from "./MembersManager.js";
+export type { MembersManagerProps } from "./MembersManager.js";

package/src/headless/WorkspacesProvider.tsx

@@ -9,7 +9,7 @@ import type { WorkspacesRuntime } from "../model/runtime.js";
  * to this pair — slim wave §21/S2.)
  *
  * ```tsx
- * const runtime = createWorkspacesRuntime({ baseUrl: "/workspaces/api/" });
+ * const runtime = createWorkspacesRuntime({ baseUrl: "/workspaces/api/v1/" });
  * // give runtime.client to core's <StapelConfigProvider config={{ client }}>
  * <WorkspacesProvider runtime={runtime}>{app}</WorkspacesProvider>
  * ```

package/src/i18n/keys.ts

@@ -27,6 +27,29 @@ export const WORKSPACES_I18N_KEYS = {
   acceptAccept: "workspaces.accept.accept",
   acceptAccepting: "workspaces.accept.accepting",
   acceptAccepted: "workspaces.accept.accepted",
+  // Workspace settings (default skin — WorkspaceSettings)
+  settingsTitle: "workspaces.settings.title",
+  settingsSubtitle: "workspaces.settings.subtitle",
+  fieldName: "workspaces.settings.field.name",
+  fieldSlug: "workspaces.settings.field.slug",
+  fieldType: "workspaces.settings.field.type",
+  save: "workspaces.settings.save",
+  saving: "workspaces.settings.saving",
+  dangerZoneTitle: "workspaces.settings.danger_zone.title",
+  deleteWorkspace: "workspaces.settings.danger_zone.delete",
+  deleteWorkspaceConfirm: "workspaces.settings.danger_zone.delete_confirm",
+  // Members manager (default skin — MembersManager)
+  membersTitle: "workspaces.members.title",
+  membersSubtitle: "workspaces.members.subtitle",
+  membersInviteDialogTitle: "workspaces.members.invite_dialog.title",
+  membersInviteEmailsLabel: "workspaces.members.invite_dialog.emails_label",
+  membersInviteEmailsPlaceholder: "workspaces.members.invite_dialog.emails_placeholder",
+  membersInviteRoleLabel: "workspaces.members.invite_dialog.role_label",
+  membersRemoveConfirm: "workspaces.members.remove_confirm",
+  roleOwner: "workspaces.members.role.owner",
+  roleAdmin: "workspaces.members.role.admin",
+  roleMember: "workspaces.members.role.member",
+  roleViewer: "workspaces.members.role.viewer",
 } as const;
 
 export type WorkspacesI18nKey =
@@ -57,6 +80,27 @@ export const workspacesI18nBundleEn: I18nDictionary = {
   "workspaces.accept.accept": "Accept invitation",
   "workspaces.accept.accepting": "Accepting…",
   "workspaces.accept.accepted": "You've joined the workspace.",
+  "workspaces.settings.title": "Workspace",
+  "workspaces.settings.subtitle": "Name and general settings.",
+  "workspaces.settings.field.name": "Workspace name",
+  "workspaces.settings.field.slug": "URL slug",
+  "workspaces.settings.field.type": "Type",
+  "workspaces.settings.save": "Save changes",
+  "workspaces.settings.saving": "Saving…",
+  "workspaces.settings.danger_zone.title": "Danger zone",
+  "workspaces.settings.danger_zone.delete": "Delete workspace",
+  "workspaces.settings.danger_zone.delete_confirm": "Delete this workspace? This can't be undone.",
+  "workspaces.members.title": "Members",
+  "workspaces.members.subtitle": "Manage who has access to this workspace.",
+  "workspaces.members.invite_dialog.title": "Invite members",
+  "workspaces.members.invite_dialog.emails_label": "Emails",
+  "workspaces.members.invite_dialog.emails_placeholder": "Type an email and press Enter",
+  "workspaces.members.invite_dialog.role_label": "Role",
+  "workspaces.members.remove_confirm": "Remove this member?",
+  "workspaces.members.role.owner": "Owner",
+  "workspaces.members.role.admin": "Admin",
+  "workspaces.members.role.member": "Member",
+  "workspaces.members.role.viewer": "Viewer",
 };
 
 /**

package/src/i18n/ru.ts

@@ -37,6 +37,27 @@ export const workspacesI18nBundleRu: I18nDictionary = {
   "workspaces.accept.accept": "Принять приглашение",
   "workspaces.accept.accepting": "Принятие…",
   "workspaces.accept.accepted": "Вы присоединились к рабочему пространству.",
+  "workspaces.settings.title": "Рабочее пространство",
+  "workspaces.settings.subtitle": "Название и общие настройки.",
+  "workspaces.settings.field.name": "Название рабочего пространства",
+  "workspaces.settings.field.slug": "URL-идентификатор",
+  "workspaces.settings.field.type": "Тип",
+  "workspaces.settings.save": "Сохранить изменения",
+  "workspaces.settings.saving": "Сохранение…",
+  "workspaces.settings.danger_zone.title": "Опасная зона",
+  "workspaces.settings.danger_zone.delete": "Удалить рабочее пространство",
+  "workspaces.settings.danger_zone.delete_confirm": "Удалить это рабочее пространство? Действие необратимо.",
+  "workspaces.members.title": "Участники",
+  "workspaces.members.subtitle": "Управляйте доступом к рабочему пространству.",
+  "workspaces.members.invite_dialog.title": "Пригласить участников",
+  "workspaces.members.invite_dialog.emails_label": "Email-адреса",
+  "workspaces.members.invite_dialog.emails_placeholder": "Введите email и нажмите Enter",
+  "workspaces.members.invite_dialog.role_label": "Роль",
+  "workspaces.members.remove_confirm": "Удалить этого участника?",
+  "workspaces.members.role.owner": "Владелец",
+  "workspaces.members.role.admin": "Администратор",
+  "workspaces.members.role.member": "Участник",
+  "workspaces.members.role.viewer": "Наблюдатель",
 };
 
 /**