@happyvertical/smrt-content 0.30.0

package/dist/svelte/components/ContentContributionForm.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type {
+  ContentContributionData,
+  ContentContributionTypeData,
+} from '../../mock-smrt-client';
+import { M } from '../i18n.contribution.js';
+
+const { t } = useI18n();
+
+export interface ContentContributionFormSubmitData {
+  typeKey: string;
+  contributorEmail?: string;
+  contributorName?: string;
+  title: string;
+  description: string;
+  body: string;
+  files: File[];
+}
+
+export interface Props {
+  types?: ContentContributionTypeData[];
+  initial?: Partial<ContentContributionData>;
+  showContributorFields?: boolean;
+  submitLabel?: string;
+  action?: string;
+  onSubmit?: (payload: ContentContributionFormSubmitData) => void;
+  onCancel?: () => void;
+}
+
+let {
+  types = [],
+  initial = {},
+  showContributorFields = true,
+  submitLabel = 'Submit contribution',
+  action = undefined,
+  onSubmit,
+  onCancel = undefined,
+}: Props = $props();
+
+function createDraft(
+  source: Partial<ContentContributionData>,
+  availableTypes: ContentContributionTypeData[],
+) {
+  return {
+    typeKey: source.contributionTypeKey || availableTypes[0]?.key || '',
+    contributorEmail: source.contributorEmail || '',
+    contributorName: source.contributorName || '',
+    title: source.title || '',
+    description: source.description || '',
+    body: source.body || '',
+    files: [] as File[],
+  };
+}
+
+function getInitialSignature(source: Partial<ContentContributionData>) {
+  return JSON.stringify({
+    contributionTypeKey: source.contributionTypeKey || '',
+    contributorEmail: source.contributorEmail || '',
+    contributorName: source.contributorName || '',
+    title: source.title || '',
+    description: source.description || '',
+    body: source.body || '',
+  });
+}
+
+let draft = $state(createDraft({}, []));
+let lastInitialSignature = $state('__unset__');
+
+$effect(() => {
+  const nextInitialSignature = getInitialSignature(initial);
+  if (nextInitialSignature !== lastInitialSignature) {
+    draft = createDraft(initial, types);
+    lastInitialSignature = nextInitialSignature;
+    return;
+  }
+
+  if (types.length === 0) {
+    if (draft.typeKey) {
+      draft.typeKey = '';
+    }
+    return;
+  }
+
+  const hasValidType = types.some((type) => type.key === draft.typeKey);
+  if (!hasValidType) {
+    draft.typeKey = types[0]?.key || '';
+  }
+});
+
+const activeType = $derived(
+  types.find((type) => type.key === draft.typeKey) || null,
+);
+
+function handleFileChange(event: Event) {
+  const target = event.currentTarget as HTMLInputElement;
+  draft.files = Array.from(target.files || []);
+}
+
+function handleSubmit(event: SubmitEvent) {
+  if (!onSubmit) {
+    if (!action?.trim()) {
+      event.preventDefault();
+    }
+    return;
+  }
+
+  event.preventDefault();
+  onSubmit({
+    typeKey: draft.typeKey,
+    contributorEmail: draft.contributorEmail || undefined,
+    contributorName: draft.contributorName || undefined,
+    title: draft.title,
+    description: draft.description,
+    body: draft.body,
+    files: draft.files,
+  });
+}
+</script>
+
+<form
+  class="contribution-form"
+  method="post"
+  enctype="multipart/form-data"
+  {action}
+  onsubmit={handleSubmit}
+>
+  <h3>{t(M['content.contribution_form.heading'])}</h3>
+
+  <label>
+    {t(M['content.contribution_form.contribution_type'])}
+    <select name="typeKey" bind:value={draft.typeKey} required>
+      {#each types.filter((type) => type.enabled !== false) as type (type.key)}
+        <option value={type.key}>{type.label}</option>
+      {/each}
+    </select>
+  </label>
+
+  {#if showContributorFields}
+    <div class="grid">
+      <label>
+        Email
+        <input name="contributorEmail" type="email" bind:value={draft.contributorEmail} required />
+      </label>
+      <label>
+        Name
+        <input name="contributorName" type="text" bind:value={draft.contributorName} />
+      </label>
+    </div>
+  {/if}
+
+  <label>
+    Title
+    <input name="title" type="text" bind:value={draft.title} />
+  </label>
+
+  <label>
+    Description
+    <textarea name="description" bind:value={draft.description} rows="2"></textarea>
+  </label>
+
+  <label>
+    Body
+    <textarea name="body" bind:value={draft.body} rows="8"></textarea>
+  </label>
+
+  {#if activeType?.allowFiles !== false}
+    <label>
+      {t(M['content.contribution_form.attach_files'])}
+      <input
+        name="files"
+        type="file"
+        multiple
+        onchange={handleFileChange}
+      />
+    </label>
+    {#if draft.files.length > 0}
+      <div class="file-list">
+        {#each draft.files as file (file.name + file.size)}
+          <span>{file.name} ({Math.max(1, Math.round(file.size / 1024))} KB)</span>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+
+  <div class="actions">
+    <button type="submit">{submitLabel}</button>
+    {#if onCancel}
+      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+        Cancel
+      </button>
+    {/if}
+  </div>
+</form>
+
+<style>
+  .contribution-form {
+    display: grid;
+    gap: 0.85rem;
+  }
+
+  .grid {
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+
+  label {
+    display: grid;
+    gap: 0.35rem;
+  }
+
+  .file-list {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    font-size: var(--smrt-typography-body-medium-size, 0.9rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+</style>

package/dist/svelte/components/ContentContributionForm.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ContentContributionData, ContentContributionTypeData } from '../../mock-smrt-client';
+export interface ContentContributionFormSubmitData {
+    typeKey: string;
+    contributorEmail?: string;
+    contributorName?: string;
+    title: string;
+    description: string;
+    body: string;
+    files: File[];
+}
+export interface Props {
+    types?: ContentContributionTypeData[];
+    initial?: Partial<ContentContributionData>;
+    showContributorFields?: boolean;
+    submitLabel?: string;
+    action?: string;
+    onSubmit?: (payload: ContentContributionFormSubmitData) => void;
+    onCancel?: () => void;
+}
+declare const ContentContributionForm: import("svelte").Component<Props, {}, "">;
+type ContentContributionForm = ReturnType<typeof ContentContributionForm>;
+export default ContentContributionForm;
+//# sourceMappingURL=ContentContributionForm.svelte.d.ts.map

package/dist/svelte/components/ContentContributionForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContributionForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentContributionForm.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,uBAAuB,EACvB,2BAA2B,EAC5B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,iCAAiC;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iCAAiC,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAwKD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/ContentContributionInbox.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { ContentContributionData } from '../../mock-smrt-client';
+import { M } from '../i18n.contribution.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  contributions?: ContentContributionData[];
+  selectedId?: string | null;
+  emptyMessage?: string;
+  workflowFormAction?: string;
+  onSelect?: (contribution: ContentContributionData) => void;
+  onApprove?: (
+    contribution: ContentContributionData,
+    options: { targetStatus: 'draft' | 'review'; note: string },
+  ) => void;
+  onRequestChanges?: (
+    contribution: ContentContributionData,
+    options: { note: string },
+  ) => void;
+  onReject?: (
+    contribution: ContentContributionData,
+    options: { note: string },
+  ) => void;
+}
+
+let {
+  contributions = [],
+  selectedId = null,
+  emptyMessage = 'No contributions need review right now.',
+  workflowFormAction = undefined,
+  onSelect = undefined,
+  onApprove = undefined,
+  onRequestChanges = undefined,
+  onReject = undefined,
+}: Props = $props();
+
+let note = $state('');
+let targetStatus = $state<'draft' | 'review'>('draft');
+const workflowIntents = ['approve', 'request-changes', 'reject'] as const;
+type WorkflowIntent = (typeof workflowIntents)[number];
+
+const selectedContribution = $derived(
+  contributions.find((item) => item.id === selectedId) ||
+    contributions[0] ||
+    null,
+);
+const canSubmitWorkflow = $derived(
+  !workflowFormAction || Boolean(selectedContribution?.id),
+);
+
+function workflowStatus(
+  contribution: ContentContributionData | null | undefined,
+) {
+  return contribution?.status || 'submitted';
+}
+
+function approveActionLabel(contribution: ContentContributionData) {
+  return workflowStatus(contribution) === 'approved'
+    ? 'Promote'
+    : 'Approve and promote';
+}
+
+function isWorkflowIntent(
+  intent: string | undefined,
+): intent is WorkflowIntent {
+  return workflowIntents.includes(intent as WorkflowIntent);
+}
+
+function handleWorkflowSubmit(event: SubmitEvent) {
+  const submitter = event.submitter as HTMLButtonElement | null;
+  const intent = submitter?.value;
+  const hasNativeWorkflowTarget =
+    Boolean(workflowFormAction) &&
+    Boolean(selectedContribution?.id) &&
+    isWorkflowIntent(intent);
+  const shouldHandleWithCallback =
+    Boolean(selectedContribution) &&
+    ((intent === 'approve' && Boolean(onApprove)) ||
+      (intent === 'request-changes' && Boolean(onRequestChanges)) ||
+      (intent === 'reject' && Boolean(onReject)));
+
+  if (!hasNativeWorkflowTarget || shouldHandleWithCallback) {
+    event.preventDefault();
+  }
+
+  if (intent === 'approve' && onApprove && selectedContribution) {
+    onApprove(selectedContribution, {
+      targetStatus,
+      note,
+    });
+    return;
+  }
+
+  if (
+    intent === 'request-changes' &&
+    onRequestChanges &&
+    selectedContribution
+  ) {
+    onRequestChanges(selectedContribution, {
+      note,
+    });
+    return;
+  }
+
+  if (intent === 'reject' && onReject && selectedContribution) {
+    onReject(selectedContribution, {
+      note,
+    });
+  }
+}
+
+$effect(() => {
+  note = selectedContribution?.editorNotes || '';
+  targetStatus = 'draft';
+});
+</script>
+
+<section class="inbox">
+  <header class="inbox__header">
+    <div>
+      <h3>{t(M['content.contribution_inbox.heading'])}</h3>
+      <p>{t(M['content.contribution_inbox.intro'])}</p>
+    </div>
+    <span class="pill">{contributions.length}</span>
+  </header>
+
+  {#if contributions.length === 0}
+    <p class="empty-copy">{emptyMessage}</p>
+  {:else}
+    <div class="inbox__layout">
+      <div class="inbox__list">
+        {#each contributions as contribution (contribution.id)}
+          <button
+            type="button"
+            class:selected={selectedContribution?.id === contribution.id}
+            onclick={() => onSelect?.(contribution)}
+          >
+            <strong>{contribution.title || contribution.contributionTypeKey || 'Untitled submission'}</strong>
+            <span>{contribution.contributorName || contribution.contributorEmail || 'Unknown contributor'}</span>
+            <span class="pill">{workflowStatus(contribution)}</span>
+          </button>
+        {/each}
+      </div>
+
+      {#if selectedContribution}
+        <article class="inbox__detail">
+          <header>
+            <div>
+              <h4>{selectedContribution.title || 'Untitled submission'}</h4>
+              <p>{selectedContribution.contributorName || selectedContribution.contributorEmail || 'Unknown contributor'}</p>
+            </div>
+            <span class="pill">{workflowStatus(selectedContribution)}</span>
+          </header>
+
+          {#if selectedContribution.body}
+            <div class="body-preview">
+              {selectedContribution.body}
+            </div>
+          {/if}
+
+          <dl>
+            <div>
+              <dt>Type</dt>
+              <dd>{selectedContribution.contributionTypeKey || 'n/a'}</dd>
+            </div>
+            <div>
+              <dt>Revisions</dt>
+              <dd>{selectedContribution.revisionCount || 0}</dd>
+            </div>
+            <div>
+              <dt>{t(M['content.contribution_inbox.promoted_content'])}</dt>
+              <dd>{selectedContribution.promotedContentId || 'Not promoted yet'}</dd>
+            </div>
+            {#if selectedContribution.intakeDecision}
+              <div>
+                <dt>{t(M['content.contribution_inbox.intake_decision'])}</dt>
+                <dd>{selectedContribution.intakeDecision}</dd>
+              </div>
+            {/if}
+          </dl>
+
+          <form
+            method="post"
+            action={workflowFormAction}
+            onsubmit={handleWorkflowSubmit}
+          >
+            {#if selectedContribution.id}
+              <input type="hidden" name="contributionId" value={selectedContribution.id} />
+            {/if}
+
+            <label>
+              {t(M['content.contribution_inbox.editorial_note'])}
+              <textarea name="editorNote" bind:value={note} rows="4"></textarea>
+            </label>
+
+            <div class="actions">
+              {#if onApprove || workflowFormAction}
+                <label class="inline">
+                  {t(M['content.contribution_inbox.promote_to'])}
+                  <select name="targetStatus" bind:value={targetStatus}>
+                    <option value="draft">draft</option>
+                    <option value="review">review</option>
+                  </select>
+                </label>
+                <button
+                  type="submit"
+                  name="intent"
+                  value="approve"
+                  disabled={!canSubmitWorkflow}
+                >
+                  {approveActionLabel(selectedContribution)}
+                </button>
+              {/if}
+
+              {#if onRequestChanges || workflowFormAction}
+                <button
+                  type="submit"
+                  name="intent"
+                  value="request-changes"
+                  class="secondary"
+                  disabled={!canSubmitWorkflow}
+                >
+                  {t(M['content.contribution_inbox.request_changes'])}
+                </button>
+              {/if}
+
+              {#if onReject || workflowFormAction}
+                <button
+                  type="submit"
+                  name="intent"
+                  value="reject"
+                  class="danger"
+                  disabled={!canSubmitWorkflow}
+                >
+                  Reject
+                </button>
+              {/if}
+            </div>
+          </form>
+        </article>
+      {/if}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .inbox,
+  .inbox__header,
+  .inbox__layout,
+  .inbox__detail,
+  .inbox__detail form {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .inbox__layout {
+    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
+  }
+
+  .inbox__list {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .inbox__list button,
+  .inbox__detail {
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 0.75rem;
+    padding: 0.85rem;
+    background: var(--smrt-color-surface);
+  }
+
+  .inbox__list button {
+    display: grid;
+    gap: 0.35rem;
+    text-align: left;
+  }
+
+  .inbox__list button.selected {
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 1px var(--smrt-color-primary);
+  }
+
+  .body-preview {
+    padding: 0.85rem;
+    border-radius: 0.75rem;
+    background: var(--smrt-color-surface-container);
+    white-space: pre-wrap;
+  }
+
+  dl div {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .actions,
+  .inline {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.75rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary-container);
+  }
+
+  @media (max-width: 720px) {
+    .inbox__layout {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/dist/svelte/components/ContentContributionInbox.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ContentContributionData } from '../../mock-smrt-client';
+export interface Props {
+    contributions?: ContentContributionData[];
+    selectedId?: string | null;
+    emptyMessage?: string;
+    workflowFormAction?: string;
+    onSelect?: (contribution: ContentContributionData) => void;
+    onApprove?: (contribution: ContentContributionData, options: {
+        targetStatus: 'draft' | 'review';
+        note: string;
+    }) => void;
+    onRequestChanges?: (contribution: ContentContributionData, options: {
+        note: string;
+    }) => void;
+    onReject?: (contribution: ContentContributionData, options: {
+        note: string;
+    }) => void;
+}
+declare const ContentContributionInbox: import("svelte").Component<Props, {}, "">;
+type ContentContributionInbox = ReturnType<typeof ContentContributionInbox>;
+export default ContentContributionInbox;
+//# sourceMappingURL=ContentContributionInbox.svelte.d.ts.map

package/dist/svelte/components/ContentContributionInbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContributionInbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentContributionInbox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CACV,YAAY,EAAE,uBAAuB,EACrC,OAAO,EAAE;QAAE,YAAY,EAAE,OAAO,GAAG,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KACxD,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CACjB,YAAY,EAAE,uBAAuB,EACrC,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KACtB,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CACT,YAAY,EAAE,uBAAuB,EACrC,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KACtB,IAAI,CAAC;CACX;AAgND,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}