fix: lint and storybook

.storybook/main.ts

@@ -0,0 +1,72 @@
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+import type { Plugin } from 'vite';
+
+/**
+ * Vite plugin that provides an empty stub module for server-only packages
+ * (Payload CMS and its plugins) so they don't get bundled into
+ * the browser build and cause Node.js built-in errors.
+ *
+ * Uses a Proxy-based default export so any named or nested import
+ * resolves to a no-op function at runtime without needing to enumerate
+ * every export.
+ */
+function mockServerModules(): Plugin {
+  const serverPrefixes = ['payload', '@payloadcms/'];
+
+  const resolvedId = '\0mock-server-module';
+
+  return {
+    name: 'mock-server-modules',
+    enforce: 'pre',
+    resolveId(source) {
+      if (
+        serverPrefixes.some(
+          (prefix) => source === prefix || source.startsWith(prefix + '/'),
+        )
+      ) {
+        return { id: resolvedId, syntheticNamedExports: true };
+      }
+      return null;
+    },
+    load(id) {
+      if (id === resolvedId) {
+        return `export default new Proxy({}, { get: (_, p) => p === '__esModule' ? true : () => {} });`;
+      }
+      return null;
+    },
+  };
+}
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [],
+  "framework": "@storybook/nextjs-vite",
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins || []), mockServerModules()],
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        exclude: [
+          ...(config.optimizeDeps?.exclude || []),
+          'payload',
+          '@payloadcms/richtext-lexical',
+          '@payloadcms/db-postgres',
+          '@payloadcms/storage-gcs',
+          '@payloadcms/plugin-seo',
+        ],
+      },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            // This tells Sass to look in the root directory for imports
+            loadPaths: ["./"],
+          },
+        },
+      },
+    };
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<style>
+  :root {
+    --base-color: #016699;
+    --shade1: #67A3C2;
+    --shade2: #DDECF7;
+    --shade3: #eff6ff;
+    --contrast-color: #CE490F;
+    --contrast-shade1: #DA764B;
+    --border-radius: 13px;
+    --font-size-xl: 90px;
+    --font-size-lg: 60px;
+    --font-size-md: 33px;
+    --font-size-sm: 25px;
+    --font-size-lead: 36px;
+    --font-size-body: 20px;
+    --font-weight-extra-bold: 800;
+    --font-weight-bold: 700;
+    --font-weight-light: 300;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/nextjs-vite'
+
+import { defaultFont, headerFont } from '@/assets/fonts'
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        <div
+          className={defaultFont.className}
+          style={{
+            fontSize: 'var(--font-size-body)',
+            '--header-font': headerFont.style.fontFamily,
+          } as React.CSSProperties}
+        >
+          <Story />
+        </div>
+      )
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+}
+
+export default preview

src/components/AdminMenu/AdminMenu.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { AdminMenu } from './AdminMenu'
+
+const meta: Meta<typeof AdminMenu> = {
+  component: AdminMenu,
+}
+
+type Story = StoryObj<typeof AdminMenu>
+export default meta
+
+export const Authenticated: Story = {
+  args: {
+    collection: 'blog',
+    id: 'some_id',
+    isAuthenticated: true,
+  },
+}
+
+export const AuthenticatedWithoutId: Story = {
+  args: {
+    collection: 'blog',
+    isAuthenticated: true,
+  },
+}
+
+export const NotAuthenticated: Story = {
+  args: {
+    collection: 'blog',
+    id: 'some_id',
+    isAuthenticated: false,
+  },
+}

src/components/Arrow/Arrow.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Arrow } from './Arrow'
 
 const meta: Meta<typeof Arrow> = {

src/components/Banner/Banner.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Banner } from './Banner'
 
 const meta: Meta<typeof Banner> = {

src/components/BlogExcerpt/BlogExcerpt.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { BlogExcerpt } from './BlogExcerpt'
 
 const meta: Meta<typeof BlogExcerpt> = {

src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { Button } from './Button'
 
 const meta: Meta<typeof Button> = {

src/components/ChurchCard/ChurchCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ChurchCard } from './ChurchCard'
 
 const meta: Meta<typeof ChurchCard> = {

src/components/ChurchIcon/ChurchIcon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ChurchIcon } from './ChurchIcon'
 
 const meta: Meta<typeof ChurchIcon> = {

src/components/Classifieds/Ad.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { SerializedEditorState } from 'lexical'
+import { Ad } from './Ad'
+
+const meta: Meta<typeof Ad> = {
+  component: Ad,
+}
+
+type Story = StoryObj<typeof Ad>
+export default meta
+
+const makeAdText = (text: string): SerializedEditorState =>
+  ({
+    root: {
+      type: 'root',
+      format: '',
+      indent: 0,
+      version: 1,
+      direction: 'ltr',
+      children: [
+        {
+          type: 'paragraph',
+          format: '',
+          indent: 0,
+          version: 1,
+          direction: 'ltr',
+          textFormat: 0,
+          textStyle: '',
+          children: [
+            {
+              type: 'text',
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text,
+              detail: 0,
+              version: 1,
+            },
+          ],
+        },
+      ],
+    },
+  }) as SerializedEditorState
+
+export const Default: Story = {
+  args: {
+    text: makeAdText(
+      'Suche Helfer für unseren Gemeindegarten. Wir treffen uns jeden Samstag um 10 Uhr.',
+    ),
+    contact: 'gemeinde@drei-koenige-berlin.de',
+  },
+}
+
+export const LongerText: Story = {
+  args: {
+    text: makeAdText(
+      'Biete Klavierunterricht für Anfänger und Fortgeschrittene. Unterricht im Pfarrheim oder bei Ihnen zuhause möglich. Freue mich auf Ihren Anruf oder Ihre E-Mail.',
+    ),
+    contact: 'klavier@example.com',
+  },
+}

src/components/Classifieds/Classifieds.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { SerializedEditorState } from 'lexical'
+import { Classifieds } from './Classifieds'
+
+const meta: Meta<typeof Classifieds> = {
+  component: Classifieds,
+}
+
+type Story = StoryObj<typeof Classifieds>
+export default meta
+
+const makeAdText = (text: string): SerializedEditorState =>
+  ({
+    root: {
+      type: 'root',
+      format: '',
+      indent: 0,
+      version: 1,
+      direction: 'ltr',
+      children: [
+        {
+          type: 'paragraph',
+          format: '',
+          indent: 0,
+          version: 1,
+          direction: 'ltr',
+          textFormat: 0,
+          textStyle: '',
+          children: [
+            {
+              type: 'text',
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text,
+              detail: 0,
+              version: 1,
+            },
+          ],
+        },
+      ],
+    },
+  }) as SerializedEditorState
+
+export const Default: Story = {
+  args: {
+    ads: [
+      {
+        id: '1',
+        text: makeAdText(
+          'Suche Helfer für unseren Gemeindegarten. Wir treffen uns jeden Samstag um 10 Uhr.',
+        ),
+        email: 'gemeinde@drei-koenige-berlin.de',
+      },
+      {
+        id: '2',
+        text: makeAdText(
+          'Biete Klavierunterricht für Anfänger und Fortgeschrittene.',
+        ),
+        email: 'klavier@example.com',
+      },
+      {
+        id: '3',
+        text: makeAdText('Verschenke Kinderfahrrad, gut erhalten.'),
+        email: 'fahrrad@example.com',
+      },
+    ],
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    ads: [],
+  },
+}

src/components/Collapsible/Collapsible.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Collapsible } from './Collapsible'
 
 const meta: Meta<typeof Collapsible> = {

src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CollapsibleArrow } from './CollapsibleArrow'
 
 const meta: Meta<typeof CollapsibleArrow> = {

src/components/ContactPerson/ContactPerson.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ContactPerson } from './ContactPerson'
 
 const meta: Meta<typeof ContactPerson> = {

src/components/ContactPerson/ContactPersonList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ContactPersonList } from './ContactPersonList'
 
 const meta: Meta<typeof ContactPersonList> = {

src/components/ContactPerson2/ContactPerson2.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import portrait from "./portrait.jpeg"
 import { ContactPerson2 } from './ContactPerson2'
 

src/components/ContactPersonCard/ContactPersonCard.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import portrait from '../ContactPerson2/portrait.jpeg'
+import { ContactPersonCard } from './ContactPersonCard'
+
+const meta: Meta<typeof ContactPersonCard> = {
+  component: ContactPersonCard,
+}
+
+type Story = StoryObj<typeof ContactPersonCard>
+export default meta
+
+export const Default: Story = {
+  args: {
+    contact: {
+      id: 'some_id',
+      name: 'Pfr. M. Mustermann',
+      role: 'Pfarrer',
+      email: 'm.mustermann@drei-koenige-berlin.de',
+      telephone: '+49 30 1234567',
+      createdAt: '2021-03-01T00:00:00.000Z',
+      updatedAt: '2021-03-01T00:00:00.000Z',
+    },
+  },
+}
+
+export const WithPhoto: Story = {
+  args: {
+    ...Default.args,
+    photo: portrait,
+  },
+}
+
+export const MinimalWithPhoto: Story = {
+  args: {
+    contact: {
+      id: 'some_id',
+      name: 'Pfr. M. Mustermann',
+      createdAt: '2021-03-01T00:00:00.000Z',
+      updatedAt: '2021-03-01T00:00:00.000Z',
+    },
+    photo: portrait,
+  },
+}
+
+export const NullContact: Story = {
+  args: {
+    contact: null,
+  },
+}
+
+export const StringContact: Story = {
+  args: {
+    contact: 'some_id_string',
+  },
+}

src/components/Container/Container.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Container } from './Container'
 
 const meta: Meta<typeof Container> = {

src/components/Cross/Cross.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Cross } from './Cross'
 
 const meta: Meta<typeof Cross> = {

src/components/DonationAppeal/DonationAppeal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { DonationAppeal } from './DonationAppeal'
 
 const meta: Meta<typeof DonationAppeal> = {

src/components/DonationForm/DonationForm.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { DonationForm } from './DonationForm'
+
+const meta: Meta<typeof DonationForm> = {
+  component: DonationForm,
+}
+
+type Story = StoryObj<typeof DonationForm>
+export default meta
+
+export const Default: Story = {}

src/components/Dropdown/Dropdown.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Dropdown } from './Dropdown'
 
 const meta: Meta<typeof Dropdown> = {

src/components/Error/Error.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import Error from './Error'
+
+const meta: Meta<typeof Error> = {
+  component: Error,
+}
+
+type Story = StoryObj<typeof Error>
+export default meta
+
+export const NotFound: Story = {
+  args: {
+    statusCode: 404,
+    message: 'Die angeforderte Seite wurde nicht gefunden.',
+  },
+}
+
+export const ServerError: Story = {
+  args: {
+    statusCode: 500,
+    message: 'Interner Serverfehler.',
+  },
+}
+
+export const WithoutMessage: Story = {
+  args: {
+    statusCode: 403,
+  },
+}

src/components/EventExcerpt/EventExcerpt.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { EventExcerpt, EventExcerptRow } from './EventExcerpt'
 import { TextDiv } from '@/components/Text/TextDiv'
 

src/components/EventRow/EventRow.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { EventRow } from './EventRow'
 
 const meta: Meta<typeof EventRow> = {

src/components/Flex/Col.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Col } from './Col'
+
+const meta: Meta<typeof Col> = {
+  component: Col,
+}
+
+type Story = StoryObj<typeof Col>
+export default meta
+
+export const Default: Story = {
+  args: {
+    children: <div>Spalteninhalt</div>,
+  },
+}
+
+export const Empty: Story = {
+  args: {},
+}

src/components/Flex/Row.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Row } from './Row'
+
+const meta: Meta<typeof Row> = {
+  component: Row,
+}
+
+type Story = StoryObj<typeof Row>
+export default meta
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <div>Erste Spalte</div>
+        <div>Zweite Spalte</div>
+        <div>Dritte Spalte</div>
+      </>
+    ),
+  },
+}
+
+export const WithGap: Story = {
+  args: {
+    gap: 32,
+    children: (
+      <>
+        <div>Links</div>
+        <div>Rechts</div>
+      </>
+    ),
+  },
+}
+
+export const CenterAligned: Story = {
+  args: {
+    alignItems: 'center',
+    gap: 16,
+    children: (
+      <>
+        <div style={{ height: 40 }}>Kurz</div>
+        <div style={{ height: 100 }}>Lang</div>
+      </>
+    ),
+  },
+}

src/components/Gallery/AutoScroll.tsx

@@ -53,7 +53,7 @@ export const AutoScroll = ({children, isScrolling, onTouch}: AutoScrollProps) =>
         }, 1);
       }
 
-    }}, [wrapper, step, setStep, direction, setDirection])
+    }}, [wrapper, step, setStep, direction, setDirection, isScrolling])
 
   return (
     <div

src/components/Gallery/Gallery.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Gallery } from './Gallery'
 import chris from "./../../assets/christophorus.jpeg"
 

src/components/HorizontalRule/HorizontalRule.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { HR } from './HorizontalRule'
 
 const meta: Meta<typeof HR> = {

src/components/Image/Image.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { Image } from './Image'
 
 const meta: Meta<typeof Image> = {

src/components/ImageCard/ImageCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ImageCard } from './ImageCard'
 
 const meta: Meta<typeof ImageCard> = {

src/components/Input/input.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Input } from './Input'
 
 const meta: Meta<typeof Input> = {

src/components/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Logo } from './Logo'
 
 const meta: Meta<typeof Logo> = {

src/components/MainText/MainText.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { MainText } from './MainText'
 
 const meta: Meta<typeof MainText> = {

src/components/MassTable/MassTable.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { MassTable } from './MassTable'
 
 const meta: Meta<typeof MassTable> = {

src/components/MassTable/MassTableRow.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { MassTableRow } from './MassTableRow'
 
 const meta: Meta<typeof MassTableRow> = {

src/components/MegaMenu/MegaMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { MegaMenu } from './MegaMenu'
 
 const meta: Meta<typeof MegaMenu> = {

src/components/Menu/Menu.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Menu } from './Menu'
 
 const meta: Meta<typeof Menu> = {

src/components/NextPrevButtons/NextPrevButtons.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { NextPrevButtons } from './NextPrevButtons'
 
 const meta: Meta<typeof NextPrevButtons> = {

src/components/Pill/Pill.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Pill } from './Pill'
 
 const meta: Meta<typeof Pill> = {

src/components/PopupButton/PopupButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { PopupButton } from './PopupButton'
 
 const meta: Meta<typeof PopupButton> = {

src/components/RandomPrayer/RandomPrayer.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { RandomPrayer } from './RandomPrayer'
+
+const meta: Meta<typeof RandomPrayer> = {
+  component: RandomPrayer,
+}
+
+type Story = StoryObj<typeof RandomPrayer>
+export default meta
+
+export const Default: Story = {
+  args: {
+    prayers: [
+      'Vater unser im Himmel, geheiligt werde dein Name.',
+      'Gegrüßet seist du, Maria, voll der Gnade, der Herr ist mit dir.',
+      'Ehre sei dem Vater und dem Sohn und dem Heiligen Geist.',
+      'Herr, bleibe bei uns, denn es will Abend werden.',
+    ],
+  },
+}
+
+export const SinglePrayer: Story = {
+  args: {
+    prayers: ['Komm, Heiliger Geist, erfülle die Herzen deiner Gläubigen.'],
+  },
+}

src/components/RawHTML/RawHTML.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { RawHTML } from './RawHTML'
+
+const meta: Meta<typeof RawHTML> = {
+  component: RawHTML,
+}
+
+type Story = StoryObj<typeof RawHTML>
+export default meta
+
+export const Default: Story = {
+  args: {
+    html: '<h3>Willkommen</h3><p>Dies ist ein Absatz mit <strong>fettem</strong> und <em>kursivem</em> Text.</p>',
+  },
+}
+
+export const WithList: Story = {
+  args: {
+    html: '<h3>Gottesdienste</h3><ul><li>Sonntag 10:00 Uhr</li><li>Mittwoch 18:30 Uhr</li><li>Freitag 18:30 Uhr</li></ul>',
+  },
+}
+
+export const WithLink: Story = {
+  args: {
+    html: '<p>Besuchen Sie <a href="https://example.com">unsere Website</a> für weitere Informationen.</p>',
+  },
+}

src/components/Section/Section.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Section } from './Section'
 
 const meta: Meta<typeof Section> = {

src/components/SideSlider/SideSlider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { SideSlider } from './SideSlider'
 
 const meta: Meta<typeof SideSlider> = {

src/components/Testimony/Testimony.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Testimony } from './Testimony'
 
 const meta: Meta<typeof Testimony> = {

src/components/Text/HTMLText.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { SerializedEditorState } from 'lexical'
+import { HTMLText } from './HTMLText'
+
+const meta: Meta<typeof HTMLText> = {
+  component: HTMLText,
+}
+
+type Story = StoryObj<typeof HTMLText>
+export default meta
+
+const sampleState: SerializedEditorState = {
+  root: {
+    type: 'root',
+    format: '',
+    indent: 0,
+    version: 1,
+    direction: 'ltr',
+    children: [
+      {
+        type: 'paragraph',
+        format: '',
+        indent: 0,
+        version: 1,
+        direction: 'ltr',
+        textFormat: 0,
+        textStyle: '',
+        children: [
+          {
+            type: 'text',
+            format: 0,
+            mode: 'normal',
+            style: '',
+            text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
+            detail: 0,
+            version: 1,
+          },
+        ],
+      },
+    ],
+  },
+} as SerializedEditorState
+
+export const ThreeFourth: Story = {
+  args: {
+    width: '3/4',
+    data: sampleState,
+  },
+}
+
+export const Half: Story = {
+  args: {
+    width: '1/2',
+    data: sampleState,
+  },
+}

src/components/Text/Paragraph.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { P } from './Paragraph'
+
+const meta: Meta<typeof P> = {
+  component: P,
+}
+
+type Story = StoryObj<typeof P>
+export default meta
+
+export const ThreeFourth: Story = {
+  args: {
+    width: '3/4',
+    children:
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+  },
+}
+
+export const Half: Story = {
+  args: {
+    width: '1/2',
+    children:
+      'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+  },
+}

src/components/Text/RichText.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { SerializedEditorState } from 'lexical'
+import { RichText } from './RichText'
+
+const meta: Meta<typeof RichText> = {
+  component: RichText,
+}
+
+type Story = StoryObj<typeof RichText>
+export default meta
+
+const buildState = (
+  children: SerializedEditorState['root']['children'],
+): SerializedEditorState =>
+  ({
+    root: {
+      type: 'root',
+      format: '',
+      indent: 0,
+      version: 1,
+      direction: 'ltr',
+      children,
+    },
+  }) as SerializedEditorState
+
+const paragraph = (
+  textNodes: {
+    text: string
+    format?: number
+  }[],
+) => ({
+  type: 'paragraph',
+  format: '',
+  indent: 0,
+  version: 1,
+  direction: 'ltr',
+  textFormat: 0,
+  textStyle: '',
+  children: textNodes.map((n) => ({
+    type: 'text',
+    format: n.format ?? 0,
+    mode: 'normal',
+    style: '',
+    text: n.text,
+    detail: 0,
+    version: 1,
+  })),
+})
+
+export const SimpleParagraph: Story = {
+  args: {
+    data: buildState([
+      paragraph([
+        { text: 'Willkommen bei der Pfarrei Heilige Drei Könige in Berlin.' },
+      ]),
+    ]),
+  },
+}
+
+export const Formatted: Story = {
+  args: {
+    data: buildState([
+      paragraph([
+        { text: 'Dies ist ein ' },
+        { text: 'fettgedruckter', format: 1 },
+        { text: ' und ein ' },
+        { text: 'kursiver', format: 2 },
+        { text: ' Text.' },
+      ]),
+    ]),
+  },
+}
+
+export const MultipleParagraphs: Story = {
+  args: {
+    data: buildState([
+      paragraph([
+        {
+          text: 'Unsere Gottesdienste finden jeden Sonntag um 10:00 Uhr statt.',
+        },
+      ]),
+      paragraph([
+        {
+          text: 'Herzlich willkommen sind alle, die mitfeiern und mitbeten möchten.',
+        },
+      ]),
+    ]),
+  },
+}

src/components/Text/TextDiv.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { TextDiv } from './TextDiv'
+
+const meta: Meta<typeof TextDiv> = {
+  component: TextDiv,
+}
+
+type Story = StoryObj<typeof TextDiv>
+export default meta
+
+export const Default: Story = {
+  args: {
+    text: 'Eine einzelne Textzeile.',
+  },
+}
+
+export const MultipleLines: Story = {
+  args: {
+    text: `Pfarrbüro Heilige Drei Könige
+Musterstraße 1
+12345 Berlin
+
+Tel. 030 1234567
+E-Mail: kontakt@drei-koenige-berlin.de`,
+  },
+}

src/components/Title/Title.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Title } from './Title'
 
 const meta: Meta<typeof Title> = {
@@ -43,7 +43,7 @@ export const Centered: Story = {
   },
 }
 
-export const sansSerifMedium: Story = {
+export const SansSerifMedium: Story = {
   args: {
     title: 'Erntedankfest',
     align: 'left',

src/components/TwoColumnText/TwoColumnText.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { TwoColumnText } from './TwoColumnText'
 
 const meta: Meta<typeof TwoColumnText> = {

src/components/YoutubePlayer/YoutubePlayer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { YoutubePlayer } from './YoutubePlayer'
 
 const meta: Meta<typeof YoutubePlayer> = {

src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CalendarAnnouncementButtons } from './CalendarAnnouncementButtons'
 
 const meta: Meta<typeof CalendarAnnouncementButtons> = {

src/compositions/ChurchWithContact/ChurchWithContact.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ChurchWithContact } from './ChurchWithContact'
+
+const meta: Meta<typeof ChurchWithContact> = {
+  component: ChurchWithContact,
+}
+
+type Story = StoryObj<typeof ChurchWithContact>
+export default meta
+
+export const StClara: Story = {
+  args: {
+    church: 'St. Clara',
+    contact: `Pfarrbüro St. Clara
+Musterstraße 1
+12345 Berlin
+
+Tel. 030 1234567
+E-Mail: kontakt@st-clara.de`,
+  },
+}
+
+export const StAnna: Story = {
+  args: {
+    church: 'St. Anna',
+    contact: `Pfarrbüro St. Anna
+Beispielstraße 5
+10115 Berlin
+
+Tel. 030 7654321`,
+  },
+}

src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import forest from "../../assets/forest.jpeg"
 import { CollapsibleImageWithText } from './CollapsibleImageWithText'
 import { Title } from '@/components/Title/Title'

src/compositions/ContactForm/ContactForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ContactForm } from './ContactForm'
 
 const meta: Meta<typeof ContactForm> = {

src/compositions/ContactSection/ContactSection.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ContactSection } from './ContactSection'
 
 const meta: Meta<typeof ContactSection> = {

src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ContentWithSlider } from './ContentWithSlider'
 import { Title } from '@/components/Title/Title'
 

src/compositions/Events/Events.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Events } from './Events'
 
 const meta: Meta<typeof Events> = {

src/compositions/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Footer } from './Footer'
 
 const meta: Meta<typeof Footer> = {

src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ImageCardSlider } from './ImageCardSlider'
 import { Container } from '@/components/Container/Container'
 

src/compositions/ImageWithText/ImageWithText.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import forest from "../../assets/forest.jpeg"
 import chris from "../../assets/christophorus.jpeg"
 import { ImageWithText } from './ImageWithText'

src/compositions/PageHeader/PageHeader.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { PageHeader } from './PageHeader'
+
+const meta: Meta<typeof PageHeader> = {
+  component: PageHeader,
+}
+
+type Story = StoryObj<typeof PageHeader>
+export default meta
+
+export const Default: Story = {
+  args: {
+    title: 'Sakramente',
+    description:
+      'Taufe, Eucharistie, Firmung, Buße, Krankensalbung, Weihe und Ehe – erfahren Sie mehr über die sieben Sakramente unserer Kirche.',
+  },
+}
+
+export const ShortDescription: Story = {
+  args: {
+    title: 'Kontakt',
+    description: 'So erreichen Sie uns.',
+  },
+}
+
+export const LongDescription: Story = {
+  args: {
+    title: 'Willkommen',
+    description: `Herzlich willkommen auf der Website der Pfarrei Heilige Drei Könige in Berlin.
+Hier finden Sie Informationen zu unseren Gottesdiensten, Veranstaltungen und Gruppen.
+Wir freuen uns auf Ihren Besuch.`,
+  },
+}

src/compositions/PublicationAndNewsletter/NewsletterItem.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { NewsletterItem } from './NewsletterItem'
+
+const meta: Meta<typeof NewsletterItem> = {
+  component: NewsletterItem,
+}
+
+type Story = StoryObj<typeof NewsletterItem>
+export default meta
+
+export const Default: Story = {
+  args: {
+    title: 'Newsletter aus dem Bistum – März 2026',
+    pubDate: '2026-03-01T00:00:00.000Z',
+    link: 'https://example.com/newsletter/march',
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title:
+      'Newsletter aus dem Bistum mit ausführlichen Informationen zur Fastenaktion 2026 und zur Osterliturgie',
+    pubDate: '2026-02-10T00:00:00.000Z',
+    link: 'https://example.com/newsletter/february',
+  },
+}

src/pageComponents/Event/Event.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { EventPage as Event } from './Event'
 import photo from "./lobpreis.jpeg"
 

src/pageComponents/Event/Event.tsx

@@ -11,7 +11,7 @@ import { readableDateTime } from '@/utils/readableDate'
 import { TextDiv } from '@/components/Text/TextDiv'
 import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
 import { Button } from '@/components/Button/Button'
-import { StaticImageData } from 'next/image'
+import Image, { StaticImageData } from 'next/image'
 import { locationString } from '@/utils/dto/location'
 import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2'
 import { getPhoto } from '@/utils/dto/gallery'
@@ -91,10 +91,11 @@ export function EventPage(
             </div>
             <Col>
               { photo &&
-                <img
-                  src={photo.src}
+                <Image
+                  src={photo}
                   className={styles.photo}
                   alt={"Veranstaltungsbild"}
+                  unoptimized={true}
                 />
               }
 

src/pageComponents/Home/Home.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Home } from './Home'
 
 const meta: Meta<typeof Home> = {

src/pageComponents/Parish/Parish.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import chris from "../../assets/christophorus.jpeg"
 import { Parish } from './Parish'
 import { Menu } from '@/components/Menu/Menu'

src/pageComponents/Search/Search.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Search } from '@/payload-types'
+import { SearchPage } from './SearchPage'
+
+const meta: Meta<typeof SearchPage> = {
+  component: SearchPage,
+}
+
+type Story = StoryObj<typeof SearchPage>
+export default meta
+
+const makeResult = (
+  id: string,
+  title: string,
+  doc: Search['doc'],
+): Search => ({
+  id,
+  title,
+  doc,
+  updatedAt: '2026-03-01T00:00:00.000Z',
+  createdAt: '2026-03-01T00:00:00.000Z',
+})
+
+export const WithResults: Story = {
+  args: {
+    query: 'Gottesdienst',
+    results: [
+      makeResult('1', 'Sonntagsgottesdienst', {
+        relationTo: 'pages',
+        value: {
+          id: 'p1',
+          slug: 'gottesdienst',
+        } as Search['doc']['value'],
+      }),
+      makeResult('2', 'Ostern 2026 – Liturgische Feier', {
+        relationTo: 'event',
+        value: { id: 'e1' } as Search['doc']['value'],
+      }),
+      makeResult('3', 'Ministrantengruppe', {
+        relationTo: 'group',
+        value: {
+          id: 'g1',
+          slug: 'ministranten',
+        } as Search['doc']['value'],
+      }),
+      makeResult('4', 'Rundbrief Januar', {
+        relationTo: 'blog',
+        value: { id: 'b1' } as Search['doc']['value'],
+      }),
+    ],
+  },
+}
+
+export const NoResults: Story = {
+  args: {
+    query: 'xyzunbekannt',
+    results: [],
+  },
+}
+
+export const EmptyQuery: Story = {
+  args: {
+    query: '',
+    results: [],
+  },
+}

src/pageComponents/Worship/Worship.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Worship } from './Worship'
 
 const meta: Meta<typeof Worship> = {