@openrails/contentkit-ui 0.79.0 → 0.81.0

package/dist/components/groups/directory.js

@@ -0,0 +1,117 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { Button as n } from "../../ui/button.js";
+import { Skeleton as r } from "../../ui/skeleton.js";
+import { contentError as i } from "../social/parts.js";
+import { LETTERS as a } from "../../client/group-fields.js";
+import { useGroups as o } from "../../react/groups.js";
+import { GroupCover as s, GroupLink as c } from "./parts.js";
+import { useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { cn as f } from "cn";
+//#region src/components/groups/directory.tsx
+function p(p) {
+	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = o({
+		kind: p.kind,
+		language: p.language,
+		contentKind: p.contentKind,
+		parent: p.parent,
+		scope: p.scope,
+		sort: p.sort,
+		letter: v ?? void 0,
+		pageSize: p.pageSize
+	}, { client: p.client }), x = p.layout === "grid", S = (e) => new Intl.NumberFormat(m.language).format(e);
+	return /* @__PURE__ */ d(t, {
+		appearance: p.appearance,
+		className: f("grid gap-4 text-sm", p.className),
+		"data-ckui": "group-directory",
+		"data-kind": p.kind,
+		children: [
+			p.letters !== !1 && /* @__PURE__ */ u("nav", {
+				"aria-label": h("groups.byLetter"),
+				className: "flex flex-wrap gap-1",
+				"data-ckui": "letters",
+				children: [null, ...a].map((e) => /* @__PURE__ */ u(n, {
+					size: "xs",
+					variant: v === e ? "default" : "ghost",
+					"aria-pressed": v === e,
+					"aria-label": e === null ? void 0 : e === "#" ? h("groups.otherLetters") : e.toUpperCase(),
+					className: "min-w-7",
+					onClick: () => y(e),
+					children: e === null ? h("groups.all") : e.toUpperCase()
+				}, e ?? "all"))
+			}),
+			b.loading && !b.items.length ? /* @__PURE__ */ u("div", {
+				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "grid gap-2",
+				"aria-busy": !0,
+				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(r, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
+			}) : b.error && !b.items.length ? /* @__PURE__ */ d("div", {
+				role: "alert",
+				className: "grid justify-items-start gap-2",
+				children: [/* @__PURE__ */ u("p", {
+					className: "text-destructive",
+					children: i(m, b.error)
+				}), /* @__PURE__ */ u(n, {
+					size: "sm",
+					variant: "outline",
+					onClick: b.reload,
+					children: h("common.retry")
+				})]
+			}) : b.items.length ? /* @__PURE__ */ u("ul", {
+				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "flex flex-wrap gap-2",
+				"data-ckui": "groups",
+				children: b.items.map((e) => /* @__PURE__ */ u("li", {
+					"data-ckui": "group",
+					"data-slug": e.slug,
+					children: p.renderGroup ? p.renderGroup(e) : x ? /* @__PURE__ */ d(c, {
+						group: e,
+						href: p.href,
+						className: "group grid gap-1.5",
+						children: [
+							/* @__PURE__ */ u(s, {
+								group: e,
+								className: "aspect-[3/4] w-full"
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "font-medium break-words group-hover:underline",
+								children: e.name || e.slug
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "text-xs text-muted-foreground tabular-nums",
+								children: m.plural("groups.items", e.count)
+							})
+						]
+					}) : /* @__PURE__ */ d(c, {
+						group: e,
+						href: p.href,
+						className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted",
+						children: [/* @__PURE__ */ u("span", {
+							className: "break-words",
+							children: e.name || e.slug
+						}), /* @__PURE__ */ u("span", {
+							className: "text-xs text-muted-foreground tabular-nums",
+							"aria-label": m.plural("groups.items", e.count),
+							children: S(e.count)
+						})]
+					})
+				}, e.id))
+			}) : /* @__PURE__ */ u("p", {
+				className: "text-muted-foreground",
+				role: "status",
+				children: h("groups.empty")
+			}),
+			b.hasMore && /* @__PURE__ */ u(n, {
+				variant: "outline",
+				size: "sm",
+				className: "justify-self-center",
+				disabled: b.loadingMore,
+				onClick: () => void b.loadMore(),
+				children: b.loadingMore ? h("groups.loading") : h("groups.loadMore")
+			})
+		]
+	});
+}
+//#endregion
+export { p as GroupDirectory };
+
+//# sourceMappingURL=directory.js.map

package/dist/components/groups/directory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory.js","names":[],"sources":["../../../src/components/groups/directory.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { LETTERS } from \"../../client/group-fields.js\";\nimport type { GroupCard } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useGroups, type GroupSort } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError } from \"../social/parts.js\";\nimport { GroupCover, GroupLink, type GroupLike } from \"./parts.js\";\n\nexport interface GroupDirectoryProps {\n  /** The group kind listed: tag, artist, series. */\n  kind: string;\n  /** Names, counts and paths in this language; default the provider's. */\n  language?: string;\n  /** Count contents of this kind only; default every kind. */\n  contentKind?: string;\n  /** Children of this group. */\n  parent?: string;\n  /** Groups scoped by this group (characters of a series). */\n  scope?: string;\n  /** Default \"name\". */\n  sort?: GroupSort;\n  /** The letter bucket shown, a-z or \"#\", null for every group. With onLetterChange the host keeps it (in its URL). */\n  letter?: string | null;\n  onLetterChange?: (letter: string | null) => void;\n  /** Hide the A-Z bar. */\n  letters?: boolean;\n  /** \"list\" (names with counts, default) or \"grid\" (covers). */\n  layout?: \"list\" | \"grid\";\n  /** A group's link; default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** A group's entry instead of the default one. */\n  renderGroup?: (group: GroupCard) => ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A directory of one kind's groups: A-Z buckets, names with content counts or covers, paged. */\nexport function GroupDirectory(p: GroupDirectoryProps) {\n  const m = useMessages();\n  const { t } = m;\n  const [own, setOwn] = useState<string | null>(null);\n  const letter = p.letter !== undefined ? p.letter : own;\n  const choose = (l: string | null) => (p.onLetterChange ? p.onLetterChange(l) : setOwn(l));\n  const list = useGroups(\n    { kind: p.kind, language: p.language, contentKind: p.contentKind, parent: p.parent, scope: p.scope, sort: p.sort, letter: letter ?? undefined, pageSize: p.pageSize },\n    { client: p.client },\n  );\n  const grid = p.layout === \"grid\";\n  const count = (n: number) => new Intl.NumberFormat(m.language).format(n);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"group-directory\" data-kind={p.kind}>\n      {p.letters !== false && (\n        <nav aria-label={t(\"groups.byLetter\")} className=\"flex flex-wrap gap-1\" data-ckui=\"letters\">\n          {[null, ...LETTERS].map((l) => (\n            <Button\n              key={l ?? \"all\"}\n              size=\"xs\"\n              variant={letter === l ? \"default\" : \"ghost\"}\n              aria-pressed={letter === l}\n              aria-label={l === null ? undefined : l === \"#\" ? t(\"groups.otherLetters\") : l.toUpperCase()}\n              className=\"min-w-7\"\n              onClick={() => choose(l)}\n            >\n              {l === null ? t(\"groups.all\") : l.toUpperCase()}\n            </Button>\n          ))}\n        </nav>\n      )}\n      {list.loading && !list.items.length ? (\n        <div className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"grid gap-2\"} aria-busy>\n          {Array.from({ length: 6 }, (_, i) => (\n            <Skeleton key={i} className={grid ? \"aspect-[3/4] w-full\" : \"h-6 w-48\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <p className=\"text-muted-foreground\" role=\"status\">\n          {t(\"groups.empty\")}\n        </p>\n      ) : (\n        <ul className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"flex flex-wrap gap-2\"} data-ckui=\"groups\">\n          {list.items.map((g) => (\n            <li key={g.id} data-ckui=\"group\" data-slug={g.slug}>\n              {p.renderGroup ? (\n                p.renderGroup(g)\n              ) : grid ? (\n                <GroupLink group={g} href={p.href} className=\"group grid gap-1.5\">\n                  <GroupCover group={g} className=\"aspect-[3/4] w-full\" />\n                  <span className=\"font-medium break-words group-hover:underline\">{g.name || g.slug}</span>\n                  <span className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", g.count)}</span>\n                </GroupLink>\n              ) : (\n                <GroupLink group={g} href={p.href} className=\"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted\">\n                  <span className=\"break-words\">{g.name || g.slug}</span>\n                  <span className=\"text-xs text-muted-foreground tabular-nums\" aria-label={m.plural(\"groups.items\", g.count)}>\n                    {count(g.count)}\n                  </span>\n                </GroupLink>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {list.hasMore && (\n        <Button variant=\"outline\" size=\"sm\" className=\"justify-self-center\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n          {list.loadingMore ? t(\"groups.loading\") : t(\"groups.loadMore\")}\n        </Button>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

package/dist/components/groups/editor.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitClient } from '../../client/client.js';
+import { Group, GroupCard, GroupDetail, MergeReport } from '../../client/generated/wire.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+import { Labels } from './parts.js';
+export interface GroupEditorProps {
+    /** The group edited; null creates one of `kind`. */
+    id: string | null;
+    /** The kind a new group is created as. */
+    kind: string;
+    /** Languages names and text are written in; default the content model's. */
+    languages?: readonly string[];
+    labels?: Labels;
+    onCreated?: (group: Group) => void;
+    /** After a merge: the survivor's id is report.into. */
+    onMerged?: (report: MergeReport) => void;
+    onDeleted?: (group: Group) => void;
+    /** Below the editor's sections, with the loaded group: the members, host fields. */
+    children?: (group: GroupDetail) => ReactNode;
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Staff (root:groups:write): creates a group, or edits one: slug, parent,
+ * scope and declared attributes; names and aliases per language; description
+ * and sort key per language; cover (an upload, or automatic); edges to other
+ * groups; merge into another group; delete and restore.
+ */
+export declare function GroupEditor(p: GroupEditorProps): import('react').JSX.Element;
+export interface GroupMergeDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The group merged away. */
+    group: GroupDetail;
+    /** Merges into the chosen group: memberships, names, edges and children move, its code redirects. */
+    onMerge: (into: GroupCard) => Promise<MergeReport>;
+    language?: string;
+    client?: ContentKitClient;
+}
+/** Picks a group of the same kind and merges this one into it, after typing the confirmation word. */
+export declare function GroupMergeDialog({ open, onOpenChange, group, onMerge, language, client }: GroupMergeDialogProps): import('react').JSX.Element;