feature: event page

README.md

@@ -36,4 +36,9 @@ cp .env.example .env
 
 ```bash
 npm run dev
-```
+```
+
+## Storybook
+Storybook is a popular open-source tool used for building UI components and pages in isolation. Think of it as a playground for your user interface elements. It allows developers to create, test, and document components independently from the main application.
+
+Run `yarn storybook` to view the storybook

package.json

@@ -18,16 +18,16 @@
     "chromatic": "npx chromatic --project-token=chpt_70d6a2e05af185a"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "^3.2.1",
+    "@payloadcms/db-mongodb": "^3.2.2",
-    "@payloadcms/next": "^3.2.1",
+    "@payloadcms/next": "^3.2.2",
     "@payloadcms/plugin-cloud": "^3.0.2",
-    "@payloadcms/richtext-lexical": "^3.2.1",
+    "@payloadcms/richtext-lexical": "^3.2.2",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
     "mapbox-gl": "^3.5.2",
     "next": "15.0.0",
-    "payload": "^3.2.1",
+    "payload": "^3.2.2",
     "qs-esm": "^7.0.2",
     "react": "19.0.0-rc-65a56d0e-20241020",
     "react-dom": "19.0.0-rc-65a56d0e-20241020",

src/app/veranstaltungen/[id]/page.tsx

@@ -1,13 +1,8 @@
-import { Section } from '@/components/Section/Section'
-import { Container } from '@/components/Container/Container'
 import { notFound } from 'next/navigation'
 import { Event } from '@/payload-types'
-import { Title } from '@/components/Title/Title'
+import { EventPage } from '@/pageComponents/Event/Event'
-import { HR } from '@/components/HorizontalRule/HorizontalRule'
-import { readableDateTime } from '@/utils/readableDate'
-import { TextDiv } from '@/components/Text/TextDiv'
 
-export default async function EventPage({ params }: { params: Promise<{id: string}>}) {
+export default async function Page({ params }: { params: Promise<{id: string}>}) {
 
   const id = (await params).id;
   const res = await fetch(`http://localhost:3000/api/event/${id}?depth=0`);
@@ -19,29 +14,18 @@ export default async function EventPage({ params }: { params: Promise<{id: strin
   const event = await res.json() as Event;
 
   return (
-    <>
+    <EventPage
-      <Section>
+      title={event.title}
-        <Container>
+      date={event.date}
-          <Title
+      createdAt={event.createdAt}
-            title={event.title}
+      cancelled={event.cancelled}
-            subtitle={readableDateTime(event.date)}
+      isRecurring={event.isRecurring}
-            size={"xl"}/>
+      location={event.location}
-        </Container>
+      description={event.description}
-
+      shortDescription={event.shortDescription}
-        <HR />
+      contact={event.contact || undefined}
-      </Section>
+      address={event.address || undefined}
-
+      flyer={typeof event.flyer === 'object' ? event.flyer || undefined : undefined}
-      <Section>
+    />
-        <Container textAlign={"center"}>
-          <TextDiv text={event.shortDescription} />
-          <p>
-            <strong>Location</strong> <br/>
-            {event.location}
-          </p>
-        </Container>
-      </Section>
-    </>
-
-
   )
 }

src/collections/Events.ts

@@ -49,6 +49,13 @@ export const Events: CollectionConfig = {
         de: 'Location'
       },
     },
+    {
+      name: 'address',
+      type: 'textarea',
+      label: {
+        de: 'Addresse'
+      },
+    },
     {
       name: 'parish',
       type: 'relationship',
@@ -95,6 +102,13 @@ export const Events: CollectionConfig = {
         return true
       },
     },
+    {
+      name: 'contact',
+      type: 'textarea',
+      label: {
+        de: "Ansprechperson"
+      }
+    },
     {
       name: 'shortDescription',
       type: 'textarea',
@@ -105,12 +119,17 @@ export const Events: CollectionConfig = {
     },
     {
       name: 'description',
-      type: 'richText',
+      type: 'textarea',
       required: true,
       label: {
         de: 'Umschreibung',
       },
     },
+    {
+      name: 'flyer',
+      type: 'upload',
+      relationTo: 'documents'
+    },
     {
       name: 'cancelled',
       type: 'checkbox',
@@ -120,6 +139,15 @@ export const Events: CollectionConfig = {
       },
       defaultValue: false,
     },
+    {
+      name: 'isRecurring',
+      type: 'checkbox',
+      required: true,
+      label: {
+        de: 'Regelmäßig',
+      },
+      defaultValue: false,
+    },
   ],
   admin: {
     useAsTitle: 'title',

src/components/EventExcerpt/EventExcerpt.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EventExcerpt } from './EventExcerpt'
+
+const meta: Meta<typeof EventExcerpt> = {
+  component: EventExcerpt,
+}
+
+type Story = StoryObj<typeof EventExcerpt>;
+export default meta
+
+export const Default: Story = {
+  args: {
+    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    where: 'St. Richard\n' +
+      'Braunschweiger Str. 18, 12055 Berlin \n' +
+      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
+    who: 'Pfarrei Ulrich Kotzur\n' +
+      'pfarrer@sankt-clara.de\n' +
+      '+4930 6851042'
+  },
+}
+
+export const OnlyWhatAndWhere: Story = {
+  args: {
+    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    where: 'St. Richard\n' +
+      'Braunschweiger Str. 18, 12055 Berlin \n' +
+      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
+  },
+}

src/components/EventExcerpt/EventExcerpt.tsx

@@ -0,0 +1,44 @@
+import styles from "./styles.module.scss"
+import { TextDiv } from '@/components/Text/TextDiv'
+
+type EventExcerptProps = {
+  what?: string | null,
+  where?: string | null,
+  who?: string | null
+}
+
+type RowProps = {
+  label: string,
+  text: string
+}
+
+const Row = ({label, text}: RowProps) => {
+  return (
+    <div className={styles.row}>
+      <div className={styles.col1}>
+        {label}
+      </div>
+      <div>
+        <TextDiv text={text} />
+      </div>
+    </div>
+  )
+}
+
+export const EventExcerpt = ({ what, where, who }: EventExcerptProps) => {
+  return (
+    <div className={styles.container}>
+      { what &&
+        <Row label={"Was:"} text={what} />
+      }
+
+      { where &&
+        <Row label={"Wo:"} text={where} />
+      }
+
+      { who &&
+        <Row label={"Ansprechperson:"} text={who} />
+      }
+    </div>
+  )
+}

src/components/EventExcerpt/styles.module.scss

@@ -0,0 +1,40 @@
+@import "template.scss";
+
+.container {
+  padding: 50px;
+  border: 1px solid $base-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 740px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.row {
+  display: flex;
+}
+
+.col1 {
+  flex-shrink: 0;
+  width: 200px;
+}
+
+@media screen and (max-width: 576px) {
+  .row {
+    flex-direction: column;
+  }
+
+  .col1 {
+    font-weight: bold;
+  }
+
+  .container {
+    width: 100%;
+    padding: 20px;
+    border: 4px solid $base-color;
+    border-radius: 0;
+  }
+}
+

src/components/Flex/Col.tsx

@@ -1,7 +1,7 @@
 import styles from "./styles.module.scss"
 
 type ColProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export const Col = ({children}: ColProps) => {

src/components/Pill/Pill.stories.tsx

@@ -13,3 +13,10 @@ export const Default: Story = {
     children: 'Default',
   },
 }
+
+export const Contrast: Story = {
+  args: {
+    children: 'Contrast',
+    schema: "contrast"
+  },
+}

src/components/Pill/Pill.tsx

@@ -1,9 +1,14 @@
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
+import classNames from 'classnames'
 
 type PillProps = {
+  schema?: "base" | "contrast"
   children: JSX.Element | string | JSX.Element[]
 }
 
-export const Pill = ({ children }: PillProps) => {
+export const Pill = ({ children, schema }: PillProps) => {
-  return <div className={styles.pill}>{children}</div>
+  return <div className={classNames({
+    [styles.pill]: true,
+    [styles.danger]: schema === "contrast"
+  })}>{children}</div>
 }

src/components/Pill/styles.module.css

@@ -1,6 +0,0 @@
-.pill {
-  padding: 8px 12px;
-  background-color: #c2c2c2;
-  border-radius: 20px;
-  display: inline-block;
-}

src/components/Pill/styles.module.scss

@@ -0,0 +1,14 @@
+@import "template.scss";
+
+.pill {
+  padding: 8px 12px;
+  background-color: $shade2;
+  color: $base-color;
+  border-radius: 20px;
+  display: inline-block;
+}
+
+.danger {
+  background-color: $contrast-shade1;
+  color: #ffffff;
+}

src/components/Title/Title.stories.tsx

@@ -52,3 +52,10 @@ export const sansSerifMedium: Story = {
   }
 }
 
+export const Cancelled: Story = {
+  args: {
+    title: 'Some event',
+    cancelled: true
+  }
+}
+

src/components/Title/Title.tsx

@@ -8,10 +8,11 @@ type TitleProps = {
   align?: 'left' | 'center';
   size?: 'xl' | 'lg' | 'md' | "sm";
   fontStyle?: 'serif' | 'sans-serif'
-  color?: "base" | "contrast" | "white"
+  color?: "base" | "contrast" | "white",
+  cancelled?: boolean,
 }
 
-export const Title = ({title, subtitle, align = "left", size = "lg", fontStyle = "serif", color = "base"}: TitleProps) => {
+export const Title = ({title, subtitle, align = "left", size = "lg", fontStyle = "serif", color = "base", cancelled = false}: TitleProps) => {
   return (
     <>
       <h2 className={classNames({
@@ -26,6 +27,7 @@ export const Title = ({title, subtitle, align = "left", size = "lg", fontStyle =
         [styles.left]: align === "left",
         [styles.center]: align === "center",
         [faustina.className]: fontStyle == "serif",
+        [styles.cancelled]: cancelled
       })}>{title}</h2>
       {subtitle &&
         <div className={classNames({

src/components/Title/styles.module.scss

@@ -52,6 +52,10 @@
   text-align: center;
 }
 
+.cancelled {
+  text-decoration: line-through;
+}
+
 @media screen and (max-width: 576px) {
   .extraLarge {
     font-size: 60px;

src/pageComponents/Event/Event.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EventPage as Event } from './Event'
+import forest from "../../assets/forest.jpeg"
+
+const meta: Meta<typeof Event> = {
+  component: Event,
+}
+
+type Story = StoryObj<typeof Event>;
+export default meta
+
+export const Default: Story = {
+  args: {
+    title: "Sing & Pray",
+    date: "2024-12-02T09:21:19Z",
+    createdAt: "2024-12-02T09:21:19Z",
+    cancelled: false,
+    isRecurring: true,
+    location: "St. Richard",
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.' +
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    shortDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ',
+    contact: 'Pfarrei Ulrich Kotzur\n' +
+      'pfarrer@sankt-clara.de\n' +
+      '+4930 6851042',
+    address: 'Braunschweiger Str. 18, 12055 Berlin \n' +
+      'Anfahrt über S-Sonnenallee oder Mareschtraße',
+    flyer: {
+      id: "1",
+      name: "some flyer",
+      createdAt: "2024-12-02T09:21:19Z",
+      updatedAt: "2024-12-02T09:21:19Z",
+      url: "https://disney.com",
+    },
+    photo: forest
+  },
+}

src/pageComponents/Event/Event.tsx

@@ -0,0 +1,131 @@
+import styles from "./styles.module.scss"
+import { Document } from '@/payload-types'
+import { Section } from '@/components/Section/Section'
+import { Title } from '@/components/Title/Title'
+import { Container } from '@/components/Container/Container'
+import { Row } from '@/components/Flex/Row'
+import { Col } from '@/components/Flex/Col'
+import { Pill } from '@/components/Pill/Pill'
+import { HR } from '@/components/HorizontalRule/HorizontalRule'
+import { useDate } from '@/hooks/useCompactDate'
+import { readableDateTime } from '@/utils/readableDate'
+import { TextDiv } from '@/components/Text/TextDiv'
+import { EventExcerpt } from '@/components/EventExcerpt/EventExcerpt'
+import { Button } from '@/components/Button/Button'
+import { StaticImageData } from 'next/image'
+
+type EventProps = {
+  title: string,
+  date: string,
+  createdAt: string,
+  cancelled: boolean,
+  isRecurring?: boolean,
+  location: string,
+  description: string,
+  shortDescription: string,
+  contact?: string,
+  address?: string,
+  flyer?: Document,
+  photo?: StaticImageData
+}
+
+export function EventPage(
+  {
+    title,
+    date,
+    createdAt,
+    cancelled,
+    isRecurring,
+    location,
+    description,
+    shortDescription,
+    contact,
+    address,
+    flyer,
+    photo
+  }: EventProps
+) {
+  const published = useDate(createdAt)
+  const readableDate = readableDateTime(date)
+  let where = location;
+
+  if (address) {
+    where += '\n' + address;
+  }
+
+
+  return (
+    <>
+      <Section paddingBottom={"small"}>
+        <Container>
+          <Title
+            title={title}
+            size={"xl"}
+            color={"contrast"}
+            cancelled={cancelled}
+          />
+
+          <Row alignItems={'center'}>
+            <Col>
+              <p>
+                Herzliche Einladungen an unseren kommenden Veranstaltungen und Events teilzunehmen.
+              </p>
+              <p className={styles.published}>
+                Publiziert am {published}
+              </p>
+
+              <div className={styles.pills}>
+                { isRecurring &&
+                  <Pill>Regelmäßig</Pill>
+                }
+                { cancelled &&
+                  <Pill schema={"contrast"}>Abgesagt</Pill>
+                }
+              </div>
+            </Col>
+            <Col>
+            </Col>
+          </Row>
+        </Container>
+        <HR />
+      </Section>
+
+      <Section padding={"medium"}>
+        <Container>
+          <Title
+            size={"md"}
+            title={`${title} - ${readableDate}`}
+            fontStyle={"sans-serif"}
+            align={"center"}
+          />
+          <Title
+            size={"md"}
+            title={location}
+            fontStyle={"sans-serif"}
+            align={"center"}
+          />
+
+          <Section padding={"medium"}>
+            <div className={styles.description}>
+              <TextDiv text={description} />
+
+              { typeof flyer === "object" && flyer?.url &&
+                <Section padding={"small"}>
+                  <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button>
+                </Section>
+              }
+            </div>
+          </Section>
+        </Container>
+
+        <EventExcerpt
+          what={shortDescription}
+          where={where}
+          who={contact}
+        />
+
+      </Section>
+      <Section/>
+    </>
+  )
+}

src/pageComponents/Event/styles.module.scss

@@ -0,0 +1,19 @@
+.description {
+  text-align: center;
+  padding: 0 100px;
+}
+
+.published {
+  font-size: 12px;
+}
+
+.pills {
+  display: flex;
+  gap: 10px;
+}
+
+@media screen and (max-width: 576px) {
+  .description {
+    padding: 0;
+  }
+}

src/payload-types.ts

@@ -334,25 +334,15 @@ export interface Event {
   title: string;
   date: string;
   location: string;
+  address?: string | null;
   parish?: (string | Parish)[] | null;
   group?: (string | Group)[] | null;
+  contact?: string | null;
   shortDescription: string;
-  description: {
+  description: string;
-    root: {
+  flyer?: (string | null) | Document;
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  };
   cancelled: boolean;
+  isRecurring: boolean;
   updatedAt: string;
   createdAt: string;
 }
@@ -694,11 +684,15 @@ export interface EventSelect<T extends boolean = true> {
   title?: T;
   date?: T;
   location?: T;
+  address?: T;
   parish?: T;
   group?: T;
+  contact?: T;
   shortDescription?: T;
   description?: T;
+  flyer?: T;
   cancelled?: T;
+  isRecurring?: T;
   updatedAt?: T;
   createdAt?: T;
 }

src/payload.config.ts

@@ -33,6 +33,7 @@ import { Blog } from '@/collections/Blog'
 import { Highlight } from '@/collections/Highlight'
 import { Pages } from '@/collections/Pages'
 import { Documents } from '@/collections/Documents'
+import { payloadCloud } from '@payloadcms/plugin-cloud'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -86,5 +87,6 @@ export default buildConfig({
   sharp,
   plugins: [
     // storage-adapter-placeholder
+    payloadCloud()
   ],
 })

yarn.lock

@@ -3827,9 +3827,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@payloadcms/db-mongodb@npm:^3.2.1":
+"@payloadcms/db-mongodb@npm:^3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/db-mongodb@npm:3.2.1"
+  resolution: "@payloadcms/db-mongodb@npm:3.2.2"
   dependencies:
     http-status: "npm:1.6.2"
     mongoose: "npm:8.8.1"
@@ -3838,14 +3838,14 @@ __metadata:
     prompts: "npm:2.4.2"
     uuid: "npm:10.0.0"
   peerDependencies:
-    payload: 3.2.1
+    payload: 3.2.2
-  checksum: 10c0/2b0cf665db5a026d6131b8966b8262a1cd6252b4a734c7d520dba2dde589abdc5ecb196fe770ea15b6f9b52f2edaa0c8da01bea770477a2bd55315cd7b82c088
+  checksum: 10c0/bd833cc91167197a8074808d066b3ea1863c2205f5b076c386fdd84cbc179fbecadb049d5daf975a2d78ea9b78427ba2463d3f86b21573573279428190da0b3a
   languageName: node
   linkType: hard
 
-"@payloadcms/graphql@npm:3.2.1":
+"@payloadcms/graphql@npm:3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/graphql@npm:3.2.1"
+  resolution: "@payloadcms/graphql@npm:3.2.2"
   dependencies:
     graphql-scalars: "npm:1.22.2"
     pluralize: "npm:8.0.0"
@@ -3853,21 +3853,21 @@ __metadata:
     tsx: "npm:4.19.2"
   peerDependencies:
     graphql: ^16.8.1
-    payload: 3.2.1
+    payload: 3.2.2
   bin:
     payload-graphql: bin.js
-  checksum: 10c0/a6dc7677f0d6a5a2aaa148bc0e1172fb82dc12f6fc125d1e661e62b572fea6e30d614465f16cbd7da88a6dbb8bbac9243bc73c817ad47ae8d5b6492c390f69e8
+  checksum: 10c0/bbdf000c5668e21aa08fddbbf02e31203738e6338f88df3cde0836a9ca2df6bc84bd83140eb12122bccbc19539ab6cf687297f4b1e6ca37ced5ca04495a3ede2
   languageName: node
   linkType: hard
 
-"@payloadcms/next@npm:^3.2.1":
+"@payloadcms/next@npm:^3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/next@npm:3.2.1"
+  resolution: "@payloadcms/next@npm:3.2.2"
   dependencies:
     "@dnd-kit/core": "npm:6.0.8"
-    "@payloadcms/graphql": "npm:3.2.1"
+    "@payloadcms/graphql": "npm:3.2.2"
-    "@payloadcms/translations": "npm:3.2.1"
+    "@payloadcms/translations": "npm:3.2.2"
-    "@payloadcms/ui": "npm:3.2.1"
+    "@payloadcms/ui": "npm:3.2.2"
     busboy: "npm:^1.6.0"
     file-type: "npm:19.3.0"
     graphql-http: "npm:^1.22.0"
@@ -3882,8 +3882,8 @@ __metadata:
   peerDependencies:
     graphql: ^16.8.1
     next: ^15.0.0
-    payload: 3.2.1
+    payload: 3.2.2
-  checksum: 10c0/77e6137b78c0f5531a9fb23f52873707ecc00384dfe3ee4d4f6304e093ea539049e7aa285ef5e2f1a1c555e5dfe8ad997acd9f6938b9ed28c5381c68650b7c0b
+  checksum: 10c0/6b3e673f12df0c26633104780ecfe4fb49cc21ec1d1fdd0566eec6ec9763e1b6de77da6edecbed00205f2ed06f3aba16a3f6d07509920f31744bda1faf496ca1
   languageName: node
   linkType: hard
 
@@ -3903,9 +3903,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@payloadcms/richtext-lexical@npm:^3.2.1":
+"@payloadcms/richtext-lexical@npm:^3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/richtext-lexical@npm:3.2.1"
+  resolution: "@payloadcms/richtext-lexical@npm:3.2.2"
   dependencies:
     "@lexical/headless": "npm:0.20.0"
     "@lexical/link": "npm:0.20.0"
@@ -3915,8 +3915,8 @@ __metadata:
     "@lexical/rich-text": "npm:0.20.0"
     "@lexical/selection": "npm:0.20.0"
     "@lexical/utils": "npm:0.20.0"
-    "@payloadcms/translations": "npm:3.2.1"
+    "@payloadcms/translations": "npm:3.2.2"
-    "@payloadcms/ui": "npm:3.2.1"
+    "@payloadcms/ui": "npm:3.2.2"
     "@types/uuid": "npm:10.0.0"
     acorn: "npm:8.12.1"
     bson-objectid: "npm:2.0.4"
@@ -3926,7 +3926,7 @@ __metadata:
     mdast-util-from-markdown: "npm:2.0.2"
     mdast-util-mdx-jsx: "npm:3.1.3"
     micromark-extension-mdx-jsx: "npm:3.0.1"
-    react-error-boundary: "npm:4.1.1"
+    react-error-boundary: "npm:4.1.2"
     ts-essentials: "npm:10.0.3"
     uuid: "npm:10.0.0"
   peerDependencies:
@@ -3941,27 +3941,27 @@ __metadata:
     "@lexical/selection": 0.20.0
     "@lexical/table": 0.20.0
     "@lexical/utils": 0.20.0
-    "@payloadcms/next": 3.2.1
+    "@payloadcms/next": 3.2.2
     lexical: 0.20.0
-    payload: 3.2.1
+    payload: 3.2.2
     react: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
     react-dom: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
-  checksum: 10c0/4d7e5932c13f0648641ffc7e2bacbc20d303ec1d4f1ebb6fc4dd5580845cbbb5353339fe669f03ede0354589bd2b0ddce9dbeaae3b6f248efdad95c0f6ed8b19
+  checksum: 10c0/a1db79898a19c8f175845af46fd03787cc39cf0771d8fbb05c435b79e510731fd1e98d3f1451892290853b4b92dfc67189712809eda718ae4634ea708bc5804d
   languageName: node
   linkType: hard
 
-"@payloadcms/translations@npm:3.2.1":
+"@payloadcms/translations@npm:3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/translations@npm:3.2.1"
+  resolution: "@payloadcms/translations@npm:3.2.2"
   dependencies:
     date-fns: "npm:4.1.0"
-  checksum: 10c0/6778b89874c8ab9161de2c315ebbf39d52e286609b61f83670b8e919751a454efab86f565711b1e476151e73cbe9841c87aed59954a1101003fdd3aa6f8ea4a8
+  checksum: 10c0/31ceae81475c50ddb66d1aaf002b6dd43e5e3ca0128215b496684c1c431ac5b4381722b51a92e6727a2ae037dd9d76f53487911c84ff68d7a86b9fb8f00a9ef2
   languageName: node
   linkType: hard
 
-"@payloadcms/ui@npm:3.2.1":
+"@payloadcms/ui@npm:3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "@payloadcms/ui@npm:3.2.1"
+  resolution: "@payloadcms/ui@npm:3.2.2"
   dependencies:
     "@dnd-kit/core": "npm:6.0.8"
     "@dnd-kit/sortable": "npm:7.0.2"
@@ -3969,7 +3969,7 @@ __metadata:
     "@faceless-ui/scroll-info": "npm:2.0.0-beta.0"
     "@faceless-ui/window-info": "npm:3.0.0-beta.0"
     "@monaco-editor/react": "npm:4.6.0"
-    "@payloadcms/translations": "npm:3.2.1"
+    "@payloadcms/translations": "npm:3.2.2"
     body-scroll-lock: "npm:4.0.0-beta.0"
     bson-objectid: "npm:2.0.4"
     date-fns: "npm:4.1.0"
@@ -3987,10 +3987,10 @@ __metadata:
     uuid: "npm:10.0.0"
   peerDependencies:
     next: ^15.0.0
-    payload: 3.2.1
+    payload: 3.2.2
     react: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
     react-dom: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
-  checksum: 10c0/89e62c2a3408122b8b9174e1c677212464972daedb8720e1f803c3e95c72743d5b847faba806eaf38c91dea47a53cb0ad17e41443a9f23d2eef2fb5af0346a5b
+  checksum: 10c0/afeb3d2776a5c5147097b5e9ef8eb30ff2f6e876b36be169ef7b50f4decc0b5bf548c0433fa9892deb321677da83a1cf5f4c407cb51fe1956eaf2ba79c63c29b
   languageName: node
   linkType: hard
 
@@ -8581,10 +8581,10 @@ __metadata:
   resolution: "drei-koenige-v3@workspace:."
   dependencies:
     "@chromatic-com/storybook": "npm:^1.6.1"
-    "@payloadcms/db-mongodb": "npm:^3.2.1"
+    "@payloadcms/db-mongodb": "npm:^3.2.2"
-    "@payloadcms/next": "npm:^3.2.1"
+    "@payloadcms/next": "npm:^3.2.2"
     "@payloadcms/plugin-cloud": "npm:^3.0.2"
-    "@payloadcms/richtext-lexical": "npm:^3.2.1"
+    "@payloadcms/richtext-lexical": "npm:^3.2.2"
     "@storybook/addon-essentials": "npm:^8.2.9"
     "@storybook/addon-interactions": "npm:^8.2.9"
     "@storybook/addon-links": "npm:^8.2.9"
@@ -8608,7 +8608,7 @@ __metadata:
     graphql: "npm:^16.8.1"
     mapbox-gl: "npm:^3.5.2"
     next: "npm:15.0.0"
-    payload: "npm:^3.2.1"
+    payload: "npm:^3.2.2"
     qs-esm: "npm:^7.0.2"
     react: "npm:19.0.0-rc-65a56d0e-20241020"
     react-dom: "npm:19.0.0-rc-65a56d0e-20241020"
@@ -13633,13 +13633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"payload@npm:^3.2.1":
+"payload@npm:^3.2.2":
-  version: 3.2.1
+  version: 3.2.2
-  resolution: "payload@npm:3.2.1"
+  resolution: "payload@npm:3.2.2"
   dependencies:
     "@monaco-editor/react": "npm:4.6.0"
     "@next/env": "npm:^15.0.0"
-    "@payloadcms/translations": "npm:3.2.1"
+    "@payloadcms/translations": "npm:3.2.2"
     "@types/busboy": "npm:1.5.4"
     ajv: "npm:8.17.1"
     bson-objectid: "npm:2.0.4"
@@ -13668,7 +13668,7 @@ __metadata:
     graphql: ^16.8.1
   bin:
     payload: bin.js
-  checksum: 10c0/aaa1915da20312f593acbbf5c5e6e9d77cf5bc9f3af4ba32a82924f6a2cf3ed6a534d52636345d51c4bcba817cb9176fd681c4ff3b0bb4fa26a52f34874bf74c
+  checksum: 10c0/5800f0db7b1e7df40496c311f72f2162a31f949019828079897c8e7b11d724ff0b0f92b2e5f45e022a0a3d261988ab3335b44df65ab0f6f598f989365aea7f0e
   languageName: node
   linkType: hard
 
@@ -14448,14 +14448,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-error-boundary@npm:4.1.1":
+"react-error-boundary@npm:4.1.2":
-  version: 4.1.1
+  version: 4.1.2
-  resolution: "react-error-boundary@npm:4.1.1"
+  resolution: "react-error-boundary@npm:4.1.2"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
   peerDependencies:
     react: ">=16.13.1"
-  checksum: 10c0/0faa4236833a5d98844f84180c8f54316b555bb3e1b38b37d59e6edf8baa754c4fad4570155dc49de61558a0e912fb7143554657f9abccf8ccd08fbee1bd7ac4
+  checksum: 10c0/0737e5259bed40ce14eb0823b3c7b152171921f2179e604f48f3913490cdc594d6c22d43d7abb4ffb1512c832850228db07aa69d3b941db324953a5e393cb399
   languageName: node
   linkType: hard