Add the 7 stories CLAUDE.md's testing rule ("UI is exercised via Storybook
stories") was missing: shared/layout/shell (Design System/Templates/Shell)
and all six previously-unstoried brief components (passage-picker,
rejection-comments, diagnostics-panel, letter-block, letter-preview,
letter-section — Domein/Brief/*), each with a default state plus the
meaningful variants (locked/editable, findings/clean, show/entry, etc).
Every *.component.ts in the repo now has a co-located story; *.page.ts
files stay unstoried, matching the existing norm.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/angular';
|
|
import { LetterSection, LibraryPassage } from '@brief/domain/brief';
|
|
import { LetterSectionComponent } from './letter-section.component';
|
|
|
|
const section: LetterSection = {
|
|
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: '.' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const emptySection: LetterSection = { ...section, blocks: [] };
|
|
|
|
const passages: LibraryPassage[] = [
|
|
{
|
|
passageId: 'p2',
|
|
scope: 'beroep',
|
|
beroep: 'arts',
|
|
sectionKey: 'kern',
|
|
label: 'Toelichting arts',
|
|
version: 1,
|
|
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Als arts ...' }] }] },
|
|
},
|
|
];
|
|
|
|
const placeholders = [{ key: 'reden_besluit', label: 'Reden besluit' }];
|
|
|
|
const meta: Meta<LetterSectionComponent> = {
|
|
title: 'Domein/Brief/Letter Section',
|
|
component: LetterSectionComponent,
|
|
args: { section, availablePassages: passages, placeholders, edit: () => {} },
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<LetterSectionComponent>;
|
|
|
|
export const ReadOnly: Story = { args: { editable: false } };
|
|
export const Editable: Story = { args: { editable: true } };
|
|
export const EditableEmpty: Story = { args: { section: emptySection, editable: true } };
|