From dba13d1d31b6a6f4068ccffe76c0c825621984e0 Mon Sep 17 00:00:00 2001 From: Benno Tielen Date: Thu, 16 Apr 2026 15:06:37 +0200 Subject: [PATCH] fix: lint and storybook --- .storybook/main.ts | 72 +++++++++++++++ .storybook/preview-head.html | 20 +++++ .storybook/preview.tsx | 32 +++++++ .../AdminMenu/AdminMenu.stories.tsx | 32 +++++++ src/components/Arrow/Arrow.stories.tsx | 2 +- src/components/Banner/Banner.stories.tsx | 2 +- .../BlogExcerpt/BlogExcerpt.stories.tsx | 2 +- src/components/Button/Button.stories.tsx | 2 +- .../ChurchCard/ChurchCard.stories.tsx | 2 +- .../ChurchIcon/ChurchIcon.stories.tsx | 2 +- src/components/Classifieds/Ad.stories.tsx | 61 +++++++++++++ .../Classifieds/Classifieds.stories.tsx | 75 ++++++++++++++++ .../Collapsible/Collapsible.stories.tsx | 2 +- .../CollapsibleArrow.stories.tsx | 2 +- .../ContactPerson/ContactPerson.stories.tsx | 2 +- .../ContactPersonList.stories.tsx | 2 +- .../ContactPerson2/ContactPerson2.stories.tsx | 2 +- .../ContactPersonCard.stories.tsx | 55 ++++++++++++ .../Container/Container.stories.tsx | 2 +- src/components/Cross/Cross.stories.tsx | 2 +- .../DonationAppeal/DonationAppeal.stories.tsx | 2 +- .../DonationForm/DonationForm.stories.tsx | 11 +++ src/components/Dropdown/Dropdown.stories.ts | 2 +- src/components/Error/Error.stories.tsx | 29 ++++++ .../EventExcerpt/EventExcerpt.stories.tsx | 2 +- src/components/EventRow/EventRow.stories.tsx | 2 +- src/components/Flex/Col.stories.tsx | 19 ++++ src/components/Flex/Row.stories.tsx | 46 ++++++++++ src/components/Gallery/AutoScroll.tsx | 2 +- src/components/Gallery/Gallery.stories.tsx | 2 +- .../HorizontalRule/HorizontalRule.stories.tsx | 2 +- src/components/Image/Image.stories.tsx | 2 +- .../ImageCard/ImageCard.stories.tsx | 2 +- src/components/Input/input.stories.tsx | 2 +- src/components/Logo/Logo.stories.tsx | 2 +- src/components/MainText/MainText.stories.tsx | 2 +- src/components/MassTable/MassTable.stories.ts | 2 +- .../MassTable/MassTableRow.stories.ts | 2 +- src/components/MegaMenu/MegaMenu.stories.tsx | 2 +- src/components/Menu/Menu.stories.ts | 2 +- .../NextPrevButtons.stories.tsx | 2 +- src/components/Pill/Pill.stories.tsx | 2 +- .../PopupButton/PopupButton.stories.tsx | 2 +- .../RandomPrayer/RandomPrayer.stories.tsx | 26 ++++++ src/components/RawHTML/RawHTML.stories.tsx | 27 ++++++ src/components/Section/Section.stories.tsx | 2 +- .../SideSlider/SideSlider.stories.tsx | 2 +- .../Testimony/Testimony.stories.tsx | 2 +- src/components/Text/HTMLText.stories.tsx | 56 ++++++++++++ src/components/Text/Paragraph.stories.tsx | 25 ++++++ src/components/Text/RichText.stories.tsx | 89 +++++++++++++++++++ src/components/Text/TextDiv.stories.tsx | 26 ++++++ src/components/Title/Title.stories.tsx | 4 +- .../TwoColumnText/TwoColumnText.stories.tsx | 2 +- .../YoutubePlayer/YoutubePlayer.stories.tsx | 2 +- .../CalendarAnnouncementButtons.stories.tsx | 2 +- .../ChurchWithContact.stories.tsx | 32 +++++++ .../CollapsibleImageWithText.stories.tsx | 2 +- .../ContactForm/ContactForm.stories.tsx | 2 +- .../ContactSection/ContactSection.stories.tsx | 2 +- .../ContentWithSlider.stories.tsx | 2 +- src/compositions/Events/Events.stories.tsx | 2 +- src/compositions/Footer/Footer.stories.tsx | 2 +- .../ImageCardSlider.stories.tsx | 2 +- .../ImageWithText/ImageWithText.stories.tsx | 2 +- .../PageHeader/PageHeader.stories.tsx | 33 +++++++ .../NewsletterItem.stories.tsx | 26 ++++++ src/pageComponents/Event/Event.stories.tsx | 2 +- src/pageComponents/Event/Event.tsx | 7 +- src/pageComponents/Home/Home.stories.tsx | 2 +- src/pageComponents/Parish/Parish.stories.tsx | 2 +- src/pageComponents/Search/Search.stories.tsx | 66 ++++++++++++++ .../Worship/Worship.stories.tsx | 2 +- 73 files changed, 914 insertions(+), 55 deletions(-) create mode 100644 .storybook/main.ts create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/preview.tsx create mode 100644 src/components/AdminMenu/AdminMenu.stories.tsx create mode 100644 src/components/Classifieds/Ad.stories.tsx create mode 100644 src/components/Classifieds/Classifieds.stories.tsx create mode 100644 src/components/ContactPersonCard/ContactPersonCard.stories.tsx create mode 100644 src/components/DonationForm/DonationForm.stories.tsx create mode 100644 src/components/Error/Error.stories.tsx create mode 100644 src/components/Flex/Col.stories.tsx create mode 100644 src/components/Flex/Row.stories.tsx create mode 100644 src/components/RandomPrayer/RandomPrayer.stories.tsx create mode 100644 src/components/RawHTML/RawHTML.stories.tsx create mode 100644 src/components/Text/HTMLText.stories.tsx create mode 100644 src/components/Text/Paragraph.stories.tsx create mode 100644 src/components/Text/RichText.stories.tsx create mode 100644 src/components/Text/TextDiv.stories.tsx create mode 100644 src/compositions/ChurchWithContact/ChurchWithContact.stories.tsx create mode 100644 src/compositions/PageHeader/PageHeader.stories.tsx create mode 100644 src/compositions/PublicationAndNewsletter/NewsletterItem.stories.tsx create mode 100644 src/pageComponents/Search/Search.stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..f1c6c9d --- /dev/null +++ b/.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; \ No newline at end of file diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000..5b5c5a9 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,20 @@ + diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..daa264b --- /dev/null +++ b/.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 ( +
+ +
+ ) + }, + ], + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, + +} + +export default preview \ No newline at end of file diff --git a/src/components/AdminMenu/AdminMenu.stories.tsx b/src/components/AdminMenu/AdminMenu.stories.tsx new file mode 100644 index 0000000..fb71f6b --- /dev/null +++ b/src/components/AdminMenu/AdminMenu.stories.tsx @@ -0,0 +1,32 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { AdminMenu } from './AdminMenu' + +const meta: Meta = { + component: AdminMenu, +} + +type Story = StoryObj +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, + }, +} diff --git a/src/components/Arrow/Arrow.stories.tsx b/src/components/Arrow/Arrow.stories.tsx index 5548a1f..799f45e 100644 --- a/src/components/Arrow/Arrow.stories.tsx +++ b/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 = { diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx index 3802280..cae593a 100644 --- a/src/components/Banner/Banner.stories.tsx +++ b/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 = { diff --git a/src/components/BlogExcerpt/BlogExcerpt.stories.tsx b/src/components/BlogExcerpt/BlogExcerpt.stories.tsx index 252defb..0895a9e 100644 --- a/src/components/BlogExcerpt/BlogExcerpt.stories.tsx +++ b/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 = { diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index b3e1ffc..70a9213 100644 --- a/src/components/Button/Button.stories.tsx +++ b/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 = { diff --git a/src/components/ChurchCard/ChurchCard.stories.tsx b/src/components/ChurchCard/ChurchCard.stories.tsx index 11590b5..582cc4b 100644 --- a/src/components/ChurchCard/ChurchCard.stories.tsx +++ b/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 = { diff --git a/src/components/ChurchIcon/ChurchIcon.stories.tsx b/src/components/ChurchIcon/ChurchIcon.stories.tsx index dd56470..637c9b7 100644 --- a/src/components/ChurchIcon/ChurchIcon.stories.tsx +++ b/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 = { diff --git a/src/components/Classifieds/Ad.stories.tsx b/src/components/Classifieds/Ad.stories.tsx new file mode 100644 index 0000000..4c2065c --- /dev/null +++ b/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 = { + component: Ad, +} + +type Story = StoryObj +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', + }, +} \ No newline at end of file diff --git a/src/components/Classifieds/Classifieds.stories.tsx b/src/components/Classifieds/Classifieds.stories.tsx new file mode 100644 index 0000000..4250b87 --- /dev/null +++ b/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 = { + component: Classifieds, +} + +type Story = StoryObj +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: [], + }, +} diff --git a/src/components/Collapsible/Collapsible.stories.tsx b/src/components/Collapsible/Collapsible.stories.tsx index 43fb19e..d64de80 100644 --- a/src/components/Collapsible/Collapsible.stories.tsx +++ b/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 = { diff --git a/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx b/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx index e8a393b..4c361cf 100644 --- a/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx +++ b/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 = { diff --git a/src/components/ContactPerson/ContactPerson.stories.tsx b/src/components/ContactPerson/ContactPerson.stories.tsx index 3edcfd9..38735e0 100644 --- a/src/components/ContactPerson/ContactPerson.stories.tsx +++ b/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 = { diff --git a/src/components/ContactPerson/ContactPersonList.stories.tsx b/src/components/ContactPerson/ContactPersonList.stories.tsx index bff5c56..6e4cfeb 100644 --- a/src/components/ContactPerson/ContactPersonList.stories.tsx +++ b/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 = { diff --git a/src/components/ContactPerson2/ContactPerson2.stories.tsx b/src/components/ContactPerson2/ContactPerson2.stories.tsx index 6959fe6..629fa1e 100644 --- a/src/components/ContactPerson2/ContactPerson2.stories.tsx +++ b/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' diff --git a/src/components/ContactPersonCard/ContactPersonCard.stories.tsx b/src/components/ContactPersonCard/ContactPersonCard.stories.tsx new file mode 100644 index 0000000..6cfa35e --- /dev/null +++ b/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 = { + component: ContactPersonCard, +} + +type Story = StoryObj +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', + }, +} \ No newline at end of file diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx index b39a2f6..2cddeed 100644 --- a/src/components/Container/Container.stories.tsx +++ b/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 = { diff --git a/src/components/Cross/Cross.stories.tsx b/src/components/Cross/Cross.stories.tsx index 60e1981..4ed2153 100644 --- a/src/components/Cross/Cross.stories.tsx +++ b/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 = { diff --git a/src/components/DonationAppeal/DonationAppeal.stories.tsx b/src/components/DonationAppeal/DonationAppeal.stories.tsx index a3cd045..ccaf9c1 100644 --- a/src/components/DonationAppeal/DonationAppeal.stories.tsx +++ b/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 = { diff --git a/src/components/DonationForm/DonationForm.stories.tsx b/src/components/DonationForm/DonationForm.stories.tsx new file mode 100644 index 0000000..0a4e031 --- /dev/null +++ b/src/components/DonationForm/DonationForm.stories.tsx @@ -0,0 +1,11 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { DonationForm } from './DonationForm' + +const meta: Meta = { + component: DonationForm, +} + +type Story = StoryObj +export default meta + +export const Default: Story = {} diff --git a/src/components/Dropdown/Dropdown.stories.ts b/src/components/Dropdown/Dropdown.stories.ts index 4422ca1..59d7136 100644 --- a/src/components/Dropdown/Dropdown.stories.ts +++ b/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 = { diff --git a/src/components/Error/Error.stories.tsx b/src/components/Error/Error.stories.tsx new file mode 100644 index 0000000..02bbf96 --- /dev/null +++ b/src/components/Error/Error.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import Error from './Error' + +const meta: Meta = { + component: Error, +} + +type Story = StoryObj +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, + }, +} diff --git a/src/components/EventExcerpt/EventExcerpt.stories.tsx b/src/components/EventExcerpt/EventExcerpt.stories.tsx index 2d44cc8..ebeed1b 100644 --- a/src/components/EventExcerpt/EventExcerpt.stories.tsx +++ b/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' diff --git a/src/components/EventRow/EventRow.stories.tsx b/src/components/EventRow/EventRow.stories.tsx index 34affb9..cb2d4e6 100644 --- a/src/components/EventRow/EventRow.stories.tsx +++ b/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 = { diff --git a/src/components/Flex/Col.stories.tsx b/src/components/Flex/Col.stories.tsx new file mode 100644 index 0000000..6811342 --- /dev/null +++ b/src/components/Flex/Col.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { Col } from './Col' + +const meta: Meta = { + component: Col, +} + +type Story = StoryObj +export default meta + +export const Default: Story = { + args: { + children:
Spalteninhalt
, + }, +} + +export const Empty: Story = { + args: {}, +} diff --git a/src/components/Flex/Row.stories.tsx b/src/components/Flex/Row.stories.tsx new file mode 100644 index 0000000..24446c7 --- /dev/null +++ b/src/components/Flex/Row.stories.tsx @@ -0,0 +1,46 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { Row } from './Row' + +const meta: Meta = { + component: Row, +} + +type Story = StoryObj +export default meta + +export const Default: Story = { + args: { + children: ( + <> +
Erste Spalte
+
Zweite Spalte
+
Dritte Spalte
+ + ), + }, +} + +export const WithGap: Story = { + args: { + gap: 32, + children: ( + <> +
Links
+
Rechts
+ + ), + }, +} + +export const CenterAligned: Story = { + args: { + alignItems: 'center', + gap: 16, + children: ( + <> +
Kurz
+
Lang
+ + ), + }, +} diff --git a/src/components/Gallery/AutoScroll.tsx b/src/components/Gallery/AutoScroll.tsx index bc38716..c944ecd 100644 --- a/src/components/Gallery/AutoScroll.tsx +++ b/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 (
= { diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx index c70e0f1..3c6f0fe 100644 --- a/src/components/Image/Image.stories.tsx +++ b/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 = { diff --git a/src/components/ImageCard/ImageCard.stories.tsx b/src/components/ImageCard/ImageCard.stories.tsx index 6948b9a..616d24d 100644 --- a/src/components/ImageCard/ImageCard.stories.tsx +++ b/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 = { diff --git a/src/components/Input/input.stories.tsx b/src/components/Input/input.stories.tsx index c71ce9e..33c7faf 100644 --- a/src/components/Input/input.stories.tsx +++ b/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 = { diff --git a/src/components/Logo/Logo.stories.tsx b/src/components/Logo/Logo.stories.tsx index 9122026..dcc50f2 100644 --- a/src/components/Logo/Logo.stories.tsx +++ b/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 = { diff --git a/src/components/MainText/MainText.stories.tsx b/src/components/MainText/MainText.stories.tsx index 4e796ff..0f645f6 100644 --- a/src/components/MainText/MainText.stories.tsx +++ b/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 = { diff --git a/src/components/MassTable/MassTable.stories.ts b/src/components/MassTable/MassTable.stories.ts index 7c17626..df9d377 100644 --- a/src/components/MassTable/MassTable.stories.ts +++ b/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 = { diff --git a/src/components/MassTable/MassTableRow.stories.ts b/src/components/MassTable/MassTableRow.stories.ts index 15186a6..7c630db 100644 --- a/src/components/MassTable/MassTableRow.stories.ts +++ b/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 = { diff --git a/src/components/MegaMenu/MegaMenu.stories.tsx b/src/components/MegaMenu/MegaMenu.stories.tsx index 880d432..9dc7e76 100644 --- a/src/components/MegaMenu/MegaMenu.stories.tsx +++ b/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 = { diff --git a/src/components/Menu/Menu.stories.ts b/src/components/Menu/Menu.stories.ts index 0a32130..9fb7f09 100644 --- a/src/components/Menu/Menu.stories.ts +++ b/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 = { diff --git a/src/components/NextPrevButtons/NextPrevButtons.stories.tsx b/src/components/NextPrevButtons/NextPrevButtons.stories.tsx index dfb3e1e..7d8fd5e 100644 --- a/src/components/NextPrevButtons/NextPrevButtons.stories.tsx +++ b/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 = { diff --git a/src/components/Pill/Pill.stories.tsx b/src/components/Pill/Pill.stories.tsx index c5c6419..7440d62 100644 --- a/src/components/Pill/Pill.stories.tsx +++ b/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 = { diff --git a/src/components/PopupButton/PopupButton.stories.tsx b/src/components/PopupButton/PopupButton.stories.tsx index 5b189c5..37438df 100644 --- a/src/components/PopupButton/PopupButton.stories.tsx +++ b/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 = { diff --git a/src/components/RandomPrayer/RandomPrayer.stories.tsx b/src/components/RandomPrayer/RandomPrayer.stories.tsx new file mode 100644 index 0000000..d5f15f1 --- /dev/null +++ b/src/components/RandomPrayer/RandomPrayer.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { RandomPrayer } from './RandomPrayer' + +const meta: Meta = { + component: RandomPrayer, +} + +type Story = StoryObj +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.'], + }, +} diff --git a/src/components/RawHTML/RawHTML.stories.tsx b/src/components/RawHTML/RawHTML.stories.tsx new file mode 100644 index 0000000..76b2fb6 --- /dev/null +++ b/src/components/RawHTML/RawHTML.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { RawHTML } from './RawHTML' + +const meta: Meta = { + component: RawHTML, +} + +type Story = StoryObj +export default meta + +export const Default: Story = { + args: { + html: '

Willkommen

Dies ist ein Absatz mit fettem und kursivem Text.

', + }, +} + +export const WithList: Story = { + args: { + html: '

Gottesdienste

  • Sonntag 10:00 Uhr
  • Mittwoch 18:30 Uhr
  • Freitag 18:30 Uhr
', + }, +} + +export const WithLink: Story = { + args: { + html: '

Besuchen Sie unsere Website für weitere Informationen.

', + }, +} diff --git a/src/components/Section/Section.stories.tsx b/src/components/Section/Section.stories.tsx index 925be59..9970a7a 100644 --- a/src/components/Section/Section.stories.tsx +++ b/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 = { diff --git a/src/components/SideSlider/SideSlider.stories.tsx b/src/components/SideSlider/SideSlider.stories.tsx index 673532a..8e509b7 100644 --- a/src/components/SideSlider/SideSlider.stories.tsx +++ b/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 = { diff --git a/src/components/Testimony/Testimony.stories.tsx b/src/components/Testimony/Testimony.stories.tsx index 2a7f866..e0062d8 100644 --- a/src/components/Testimony/Testimony.stories.tsx +++ b/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 = { diff --git a/src/components/Text/HTMLText.stories.tsx b/src/components/Text/HTMLText.stories.tsx new file mode 100644 index 0000000..37f30d7 --- /dev/null +++ b/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 = { + component: HTMLText, +} + +type Story = StoryObj +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, + }, +} \ No newline at end of file diff --git a/src/components/Text/Paragraph.stories.tsx b/src/components/Text/Paragraph.stories.tsx new file mode 100644 index 0000000..8ac11b5 --- /dev/null +++ b/src/components/Text/Paragraph.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { P } from './Paragraph' + +const meta: Meta = { + component: P, +} + +type Story = StoryObj +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.', + }, +} diff --git a/src/components/Text/RichText.stories.tsx b/src/components/Text/RichText.stories.tsx new file mode 100644 index 0000000..b9db572 --- /dev/null +++ b/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 = { + component: RichText, +} + +type Story = StoryObj +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.', + }, + ]), + ]), + }, +} \ No newline at end of file diff --git a/src/components/Text/TextDiv.stories.tsx b/src/components/Text/TextDiv.stories.tsx new file mode 100644 index 0000000..4da9519 --- /dev/null +++ b/src/components/Text/TextDiv.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { TextDiv } from './TextDiv' + +const meta: Meta = { + component: TextDiv, +} + +type Story = StoryObj +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`, + }, +} diff --git a/src/components/Title/Title.stories.tsx b/src/components/Title/Title.stories.tsx index 900c56d..919d3e2 100644 --- a/src/components/Title/Title.stories.tsx +++ b/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 = { @@ -43,7 +43,7 @@ export const Centered: Story = { }, } -export const sansSerifMedium: Story = { +export const SansSerifMedium: Story = { args: { title: 'Erntedankfest', align: 'left', diff --git a/src/components/TwoColumnText/TwoColumnText.stories.tsx b/src/components/TwoColumnText/TwoColumnText.stories.tsx index 5c6e10f..abd2495 100644 --- a/src/components/TwoColumnText/TwoColumnText.stories.tsx +++ b/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 = { diff --git a/src/components/YoutubePlayer/YoutubePlayer.stories.tsx b/src/components/YoutubePlayer/YoutubePlayer.stories.tsx index 6047c18..732ccc9 100644 --- a/src/components/YoutubePlayer/YoutubePlayer.stories.tsx +++ b/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 = { diff --git a/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.stories.tsx b/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.stories.tsx index 9ea659c..970186b 100644 --- a/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.stories.tsx +++ b/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 = { diff --git a/src/compositions/ChurchWithContact/ChurchWithContact.stories.tsx b/src/compositions/ChurchWithContact/ChurchWithContact.stories.tsx new file mode 100644 index 0000000..0512a51 --- /dev/null +++ b/src/compositions/ChurchWithContact/ChurchWithContact.stories.tsx @@ -0,0 +1,32 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { ChurchWithContact } from './ChurchWithContact' + +const meta: Meta = { + component: ChurchWithContact, +} + +type Story = StoryObj +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`, + }, +} \ No newline at end of file diff --git a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx index 71c2685..233af4b 100644 --- a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx +++ b/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' diff --git a/src/compositions/ContactForm/ContactForm.stories.tsx b/src/compositions/ContactForm/ContactForm.stories.tsx index 973f347..0d1b0e4 100644 --- a/src/compositions/ContactForm/ContactForm.stories.tsx +++ b/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 = { diff --git a/src/compositions/ContactSection/ContactSection.stories.tsx b/src/compositions/ContactSection/ContactSection.stories.tsx index 9315387..69a3872 100644 --- a/src/compositions/ContactSection/ContactSection.stories.tsx +++ b/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 = { diff --git a/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx b/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx index 7cbb01e..83ba982 100644 --- a/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx +++ b/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' diff --git a/src/compositions/Events/Events.stories.tsx b/src/compositions/Events/Events.stories.tsx index 0f43ee5..367638a 100644 --- a/src/compositions/Events/Events.stories.tsx +++ b/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 = { diff --git a/src/compositions/Footer/Footer.stories.tsx b/src/compositions/Footer/Footer.stories.tsx index 85f6a6e..8615da0 100644 --- a/src/compositions/Footer/Footer.stories.tsx +++ b/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 = { diff --git a/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx b/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx index caf3cd2..84fa1aa 100644 --- a/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx +++ b/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' diff --git a/src/compositions/ImageWithText/ImageWithText.stories.tsx b/src/compositions/ImageWithText/ImageWithText.stories.tsx index 60a5183..b0ba2ab 100644 --- a/src/compositions/ImageWithText/ImageWithText.stories.tsx +++ b/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' diff --git a/src/compositions/PageHeader/PageHeader.stories.tsx b/src/compositions/PageHeader/PageHeader.stories.tsx new file mode 100644 index 0000000..717e67d --- /dev/null +++ b/src/compositions/PageHeader/PageHeader.stories.tsx @@ -0,0 +1,33 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { PageHeader } from './PageHeader' + +const meta: Meta = { + component: PageHeader, +} + +type Story = StoryObj +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.`, + }, +} diff --git a/src/compositions/PublicationAndNewsletter/NewsletterItem.stories.tsx b/src/compositions/PublicationAndNewsletter/NewsletterItem.stories.tsx new file mode 100644 index 0000000..244f1d5 --- /dev/null +++ b/src/compositions/PublicationAndNewsletter/NewsletterItem.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { NewsletterItem } from './NewsletterItem' + +const meta: Meta = { + component: NewsletterItem, +} + +type Story = StoryObj +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', + }, +} \ No newline at end of file diff --git a/src/pageComponents/Event/Event.stories.tsx b/src/pageComponents/Event/Event.stories.tsx index 5e5002d..53745ec 100644 --- a/src/pageComponents/Event/Event.stories.tsx +++ b/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" diff --git a/src/pageComponents/Event/Event.tsx b/src/pageComponents/Event/Event.tsx index 1e13861..4b0238e 100644 --- a/src/pageComponents/Event/Event.tsx +++ b/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(
{ photo && - {"Veranstaltungsbild"} } diff --git a/src/pageComponents/Home/Home.stories.tsx b/src/pageComponents/Home/Home.stories.tsx index e98cc73..ff7149d 100644 --- a/src/pageComponents/Home/Home.stories.tsx +++ b/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 = { diff --git a/src/pageComponents/Parish/Parish.stories.tsx b/src/pageComponents/Parish/Parish.stories.tsx index a5ca252..2f7004f 100644 --- a/src/pageComponents/Parish/Parish.stories.tsx +++ b/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' diff --git a/src/pageComponents/Search/Search.stories.tsx b/src/pageComponents/Search/Search.stories.tsx new file mode 100644 index 0000000..cb10179 --- /dev/null +++ b/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 = { + component: SearchPage, +} + +type Story = StoryObj +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: [], + }, +} \ No newline at end of file diff --git a/src/pageComponents/Worship/Worship.stories.tsx b/src/pageComponents/Worship/Worship.stories.tsx index 49c9bdf..33b1ca3 100644 --- a/src/pageComponents/Worship/Worship.stories.tsx +++ b/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 = {