atomic-design-poc/apps/ssp/src/app/brief/ui/letter-canvas/letter-canvas.stories.ts

import type { Meta, StoryObj } from '@storybook/angular';
import { Brief, allDiagnostics } from '@brief/domain/brief';
import { OrgTemplate } from '@brief/domain/org-template';
import { LetterCanvasComponent } from './letter-canvas.component';

const orgTemplate: OrgTemplate = {
  subOrgId: 'cibg-registers',
  orgName: 'CIBG — Registers',
  returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
  footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example\n070 000 00 00',
  footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
  signatureName: 'A. de Vries',
  signatureRole: 'Hoofd Registratie',
  signatureClosing: 'Met vriendelijke groet,',
  margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
  version: 1,
};

const brief: Brief = {
  briefId: 'b1',
  beroep: 'arts',
  templateId: 't1',
  drafterId: 'demo-drafter',
  status: { tag: 'draft' },
  placeholders: [
    { key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
    { key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
  ],
  sections: [
    {
      sectionKey: 'aanhef',
      title: 'Aanhef',
      required: true,
      locked: true,
      blocks: [
        {
          type: 'passage',
          blockId: 'local-1',
          sourcePassageId: 'p1',
          sourceVersion: 1,
          edited: false,
          content: {
            paragraphs: [
              {
                nodes: [
                  { type: 'text', text: 'Geachte heer/mevrouw ' },
                  { type: 'placeholder', key: 'naam_zorgverlener' },
                  { type: 'text', text: ',' },
                ],
              },
            ],
          },
        },
      ],
    },
    {
      sectionKey: 'kern',
      title: 'Kern van het besluit',
      required: true,
      locked: false,
      blocks: [
        {
          type: 'freeText',
          blockId: 'local-2',
          content: {
            paragraphs: [
              {
                nodes: [
                  { type: 'text', text: 'Wij hebben besloten om reden ' },
                  { type: 'placeholder', key: 'reden_besluit' },
                  { type: 'text', text: '.' },
                ],
              },
            ],
          },
        },
      ],
    },
  ],
};

/** Enough repeated body text to push the surface past one A4 page. */
const longBrief: Brief = {
  ...brief,
  sections: brief.sections.map((s) =>
    s.sectionKey === 'kern'
      ? {
          ...s,
          blocks: [
            {
              type: 'freeText',
              blockId: 'local-long',
              content: {
                paragraphs: Array.from({ length: 40 }, (_, i) => ({
                  nodes: [
                    {
                      type: 'text' as const,
                      text: `Alinea ${i + 1}: de beoordeling van uw aanvraag is uitgevoerd volgens de geldende regels voor herregistratie in het BIG-register.`,
                    },
                  ],
                })),
              },
            },
          ],
        }
      : s,
  ),
};

const meta: Meta<LetterCanvasComponent> = {
  title: 'Domein/Brief/Letter Canvas',
  component: LetterCanvasComponent,
  args: {
    brief,
    orgTemplate,
    diagnostics: allDiagnostics(brief),
  },
};
export default meta;
type Story = StoryObj<LetterCanvasComponent>;

/** Read-only rendered letter: the drafter's preview modal and the approver view, with the
    sample-values toggle and diagnostic placeholder chips (absorbs the old Letter Preview). */
export const ReadOnly: Story = { args: { editableRegions: 'none' } };

export const ReadOnlyZonderBevindingen: Story = {
  args: { editableRegions: 'none', diagnostics: [] },
};

/** Admin editor focus: body read-only, no "not yours" tint. */
export const TemplateMode: Story = { args: { editableRegions: 'template' } };

export const Zoomed: Story = { args: { editableRegions: 'none', zoom: 0.6 } };

/** Approver's "Toon wijzigingen": blocks changed/added since rejection are badged. */
export const WithDiff: Story = {
  args: {
    editableRegions: 'none',
    diagnostics: [],
    showDiff: true,
    blockDiffs: new Map([
      ['local-1', 'added'],
      ['local-2', 'changed'],
    ]),
  },
};

/** Long letter: the approximate ±page-break marks appear per A4 interval. */
export const PageBreak: Story = {
  args: { editableRegions: 'none', brief: longBrief, diagnostics: [] },
};

// Inline SVG so the story needs no backend/upload round-trip (the logo upload).
const sampleLogo =
  'data:image/svg+xml;utf8,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#003366"/><text x="60" y="25" font-size="14" fill="white" text-anchor="middle">CIBG</text></svg>',
  );

/** Published org logo: the letterhead shows it above the org name. */
export const MetLogo: Story = {
  args: { editableRegions: 'none', diagnostics: [], logoUrl: sampleLogo },
};