From 1b1998971095fe9330525c1a6a64ee1dd8c8587d Mon Sep 17 00:00:00 2001 From: Benno Tielen Date: Fri, 21 Feb 2025 15:29:07 +0100 Subject: [PATCH] refactor: delete unused components --- .../archive/BannerText/BannerText.stories.ts | 13 -- .../archive/BannerText/BannerText.tsx | 18 --- .../archive/BannerText/bannerText.module.css | 59 ------- src/components/archive/Card/Card.stories.tsx | 15 -- src/components/archive/Card/Card.tsx | 9 -- src/components/archive/Card/styles.module.css | 6 - .../archive/HomeBanner/HomeBanner.css | 19 --- .../archive/HomeBanner/HomeBanner.stories.ts | 15 -- .../archive/HomeBanner/HomeBanner.tsx | 84 ---------- src/components/archive/HomeBanner/bg.svg | 150 ------------------ .../archive/MassTimer/MassTimer.stories.ts | 52 ------ .../archive/MassTimer/MassTimer.tsx | 56 ------- .../archive/MassTimer/masstimer.module.css | 20 --- .../archive/MassTimer/useCountdown.ts | 39 ----- .../MassTimerTooltip.stories.ts | 29 ---- .../MassTimerTooltip/MassTimerTooltip.tsx | 29 ---- .../archive/MassTimerTooltip/clara.svg | 22 --- .../massTimerTooltip.module.css | 32 ---- .../archive/MassTitle/MassTitle.stories.tsx | 23 --- .../archive/MassTitle/MassTitle.tsx | 26 --- .../archive/MassTitle/styles.module.css | 14 -- .../MenuBaseLayer/MenuBaseLayer.stories.tsx | 13 -- .../archive/MenuBaseLayer/MenuBaseLayer.tsx | 5 - src/components/archive/MenuBaseLayer/bg.svg | 9 -- .../archive/MenuBaseLayer/style.module.css | 10 -- 25 files changed, 767 deletions(-) delete mode 100644 src/components/archive/BannerText/BannerText.stories.ts delete mode 100644 src/components/archive/BannerText/BannerText.tsx delete mode 100644 src/components/archive/BannerText/bannerText.module.css delete mode 100644 src/components/archive/Card/Card.stories.tsx delete mode 100644 src/components/archive/Card/Card.tsx delete mode 100644 src/components/archive/Card/styles.module.css delete mode 100644 src/components/archive/HomeBanner/HomeBanner.css delete mode 100644 src/components/archive/HomeBanner/HomeBanner.stories.ts delete mode 100644 src/components/archive/HomeBanner/HomeBanner.tsx delete mode 100644 src/components/archive/HomeBanner/bg.svg delete mode 100644 src/components/archive/MassTimer/MassTimer.stories.ts delete mode 100644 src/components/archive/MassTimer/MassTimer.tsx delete mode 100644 src/components/archive/MassTimer/masstimer.module.css delete mode 100644 src/components/archive/MassTimer/useCountdown.ts delete mode 100644 src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts delete mode 100644 src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx delete mode 100644 src/components/archive/MassTimerTooltip/clara.svg delete mode 100644 src/components/archive/MassTimerTooltip/massTimerTooltip.module.css delete mode 100644 src/components/archive/MassTitle/MassTitle.stories.tsx delete mode 100644 src/components/archive/MassTitle/MassTitle.tsx delete mode 100644 src/components/archive/MassTitle/styles.module.css delete mode 100644 src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx delete mode 100644 src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx delete mode 100644 src/components/archive/MenuBaseLayer/bg.svg delete mode 100644 src/components/archive/MenuBaseLayer/style.module.css diff --git a/src/components/archive/BannerText/BannerText.stories.ts b/src/components/archive/BannerText/BannerText.stories.ts deleted file mode 100644 index 038f40a..0000000 --- a/src/components/archive/BannerText/BannerText.stories.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { BannerText } from './BannerText' - -const meta: Meta = { - component: BannerText, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: {}, -} diff --git a/src/components/archive/BannerText/BannerText.tsx b/src/components/archive/BannerText/BannerText.tsx deleted file mode 100644 index 7307650..0000000 --- a/src/components/archive/BannerText/BannerText.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styles from './bannerText.module.css' -import { faustina, defaultFont } from '@/assets/fonts' - -export const BannerText = () => { - return ( -
-
KATHOLISCHE
-
- PFARREI
- HEILIGE
- DREI KÖNIGE
-
-
- Berlin Nord-Neukölln -
-
- ) -} diff --git a/src/components/archive/BannerText/bannerText.module.css b/src/components/archive/BannerText/bannerText.module.css deleted file mode 100644 index a0b8426..0000000 --- a/src/components/archive/BannerText/bannerText.module.css +++ /dev/null @@ -1,59 +0,0 @@ -.catholic { - font-weight: 600; - font-size: 35px; - position: relative; - bottom: -15px; - left: 10px; - animation: slidein 0.3s backwards; - animation-delay: 0.5s; -} - -.container { - position: absolute; - bottom: 100px; - color: #ffffff; -} - -.name { - font-weight: 600; - font-size: 120px; - line-height: 105px; - padding: 20px 0; - animation: slidein 0.2s backwards; - animation-delay: 1s; -} - -.berlin { - position: relative; - left: 10px; - animation: slidein 0.3s backwards; - animation-delay: 1.5s; -} - -@keyframes slidein { - from { - transform: translateX(-150%); - } - - to { - transform: translateX(0); - } -} - -@media screen and (max-width: 420px) { - .name { - font-size: 42px; - line-height: 42px; - padding: 5px 0; - } - - .catholic { - font-size: 18px; - bottom: 0; - left: 0; - } - - .berlin { - left: 0; - } -} diff --git a/src/components/archive/Card/Card.stories.tsx b/src/components/archive/Card/Card.stories.tsx deleted file mode 100644 index 561980f..0000000 --- a/src/components/archive/Card/Card.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react' -import { Card } from './Card' - -const meta: Meta = { - component: Card, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: { - children: <>Some content, - }, -} diff --git a/src/components/archive/Card/Card.tsx b/src/components/archive/Card/Card.tsx deleted file mode 100644 index c4a77ae..0000000 --- a/src/components/archive/Card/Card.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styles from './styles.module.css' - -type CardProps = { - children?: JSX.Element | JSX.Element[] -} - -export const Card = ({ children }: CardProps) => { - return
{children}
-} diff --git a/src/components/archive/Card/styles.module.css b/src/components/archive/Card/styles.module.css deleted file mode 100644 index 3135f78..0000000 --- a/src/components/archive/Card/styles.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.card { - height: 260px; - width: 240px; - box-shadow: 0 0 11px 0 rgba(79, 66, 79, 0.26); - background-color: #ffffff; -} diff --git a/src/components/archive/HomeBanner/HomeBanner.css b/src/components/archive/HomeBanner/HomeBanner.css deleted file mode 100644 index ca7aa26..0000000 --- a/src/components/archive/HomeBanner/HomeBanner.css +++ /dev/null @@ -1,19 +0,0 @@ -.splash-bg { - background-color: #8d5fd3; -} - -.splash { - height: 80vh; - background: url('bg.svg') center center; - background-size: cover; - color: #ffffff; - padding: 20px; - position: relative; -} - -.stars { - position: absolute; - top: 0; - left: 0; - z-index: 0; -} diff --git a/src/components/archive/HomeBanner/HomeBanner.stories.ts b/src/components/archive/HomeBanner/HomeBanner.stories.ts deleted file mode 100644 index a65f163..0000000 --- a/src/components/archive/HomeBanner/HomeBanner.stories.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { HomeBanner } from '@/components/archive/HomeBanner/HomeBanner' - -const meta: Meta = { - component: HomeBanner, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: { - stars: 50, - }, -} diff --git a/src/components/archive/HomeBanner/HomeBanner.tsx b/src/components/archive/HomeBanner/HomeBanner.tsx deleted file mode 100644 index 6d2c377..0000000 --- a/src/components/archive/HomeBanner/HomeBanner.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { - forwardRef, - useCallback, - useEffect, - useImperativeHandle, - useRef, -} from 'react' -import './HomeBanner.css' - -type HomeBannerProps = { - children?: React.ReactNode - stars: number -} - -export type HomeBannerHandle = { - newStar: () => void -} - -export const HomeBanner = forwardRef( - function HomeBanner({ children, stars }: HomeBannerProps, ref) { - const canvasRef = useRef(null) - const containerRef = useRef(null) - - const drawStarAtPosition = useCallback( - (ctx: CanvasRenderingContext2D, x: number, y: number) => { - let r = 2.5 * Math.random() - - //Draw the stars; - ctx.beginPath() - ctx.fillStyle = 'white' - ctx.arc(x, y, r, 0, Math.PI * 2) - ctx.fill() - }, - [], - ) - - const drawStar = useCallback( - (ctx: CanvasRenderingContext2D) => { - //Random position and size of stars; - let x = ctx.canvas.width * Math.random() - let y = ctx.canvas.height * Math.random() - - drawStarAtPosition(ctx, x, y) - }, - [drawStarAtPosition], - ) - - useImperativeHandle(ref, () => { - return { - newStar() { - const context = canvasRef.current?.getContext('2d') - if (context) { - drawStar(context) - } - }, - } - }, [drawStar]) - - useEffect(() => { - if (canvasRef.current) { - canvasRef.current.width = - containerRef.current?.clientWidth || window.innerWidth - canvasRef.current.height = 0.8 * window.innerHeight - } - const context = canvasRef.current?.getContext('2d') - if (context) { - for (let i = 0; i < stars; i++) { - //Glow effect; - context.shadowBlur = 10 - context.shadowColor = 'white' - - setTimeout(() => drawStar(context), i * 100) - } - } - }, [drawStar, stars]) - - return ( -
- -
{children}
-
- ) - }, -) diff --git a/src/components/archive/HomeBanner/bg.svg b/src/components/archive/HomeBanner/bg.svg deleted file mode 100644 index 9b5b8d4..0000000 --- a/src/components/archive/HomeBanner/bg.svg +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/archive/MassTimer/MassTimer.stories.ts b/src/components/archive/MassTimer/MassTimer.stories.ts deleted file mode 100644 index 92c05ab..0000000 --- a/src/components/archive/MassTimer/MassTimer.stories.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { MassTimer } from './MassTimer' -import { fn } from '@storybook/test' - -const meta: Meta = { - component: MassTimer, -} - -type Story = StoryObj -export default meta - -export const OneDay: Story = { - args: { - nextMass: { - id: '1', - location: { - id: "d", - name: "St. Richard", - address: "Wegstraße 12", - updatedAt: "2025-08-23T15:00:00.000Z", - createdAt: '2025-08-23T15:00:00.000Z', - }, - date: '2025-08-23T15:00:00.000Z', - type: 'WORD', - cancelled: false, - createdAt: '2025-08-23T15:00:00.000Z', - updatedAt: '2025-08-23T15:00:00.000Z', - }, - onStarClick: fn(), - }, -} - -export const TimeOut: Story = { - args: { - nextMass: { - id: '1', - location: { - id: "d", - name: "St. Richard", - address: "Wegstraße 12", - updatedAt: "2025-08-23T15:00:00.000Z", - createdAt: '2025-08-23T15:00:00.000Z', - }, - date: '2025-08-23T15:00:00.000Z', - type: 'WORD', - cancelled: false, - createdAt: '2025-08-23T15:00:00.000Z', - updatedAt: '2025-08-23T15:00:00.000Z', - }, - onStarClick: fn(), - }, -} diff --git a/src/components/archive/MassTimer/MassTimer.tsx b/src/components/archive/MassTimer/MassTimer.tsx deleted file mode 100644 index b4e5b11..0000000 --- a/src/components/archive/MassTimer/MassTimer.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'use client' - -import { useCountdown } from '@/components/archive/MassTimer/useCountdown' -import styles from './masstimer.module.css' -import { useState } from 'react' -import { MassTimerTooltip } from '@/components/archive/MassTimerTooltip/MassTimerTooltip' -import { Worship } from '@/payload-types' - -type MassTimerProps = { - nextMass: Worship - - /** - * Optional click handler - */ - onStarClick?: () => void -} - -export const MassTimer = ({ nextMass, onStarClick }: MassTimerProps) => { - const [displayTooltip, setDisplayTooltip] = useState(false) - const [days, hours, minutes, seconds] = useCountdown( - new Date(nextMass.date).getTime(), - ) - - return ( -
-
- - - setDisplayTooltip(true)} - suppressHydrationWarning={true} - > - {days}T {hours}S {minutes}M {seconds}S - -
- -
setDisplayTooltip(false)} - > - -
-
- ) -} diff --git a/src/components/archive/MassTimer/masstimer.module.css b/src/components/archive/MassTimer/masstimer.module.css deleted file mode 100644 index 1bab979..0000000 --- a/src/components/archive/MassTimer/masstimer.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.container { - position: relative; - width: 145px; -} - -.starButton { - background: none; - border: none; - margin-right: 5px; -} - -.starButton:hover { - cursor: pointer; -} - -.tooltip { - position: absolute; - right: 0; - top: 35px; -} diff --git a/src/components/archive/MassTimer/useCountdown.ts b/src/components/archive/MassTimer/useCountdown.ts deleted file mode 100644 index 398c99c..0000000 --- a/src/components/archive/MassTimer/useCountdown.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { useEffect, useState } from 'react' - -/** - * Countdown until targetDate, - * return an array of four numbers representing the - * number of days, hours, minutes and seconds until targetDate - * - */ -const useCountdown = (targetDate: number) => { - const [countDown, setCountDown] = useState(targetDate - new Date().getTime()) - - useEffect(() => { - if (countDown > 0) { - setTimeout(() => setCountDown(countDown - 1000), 1000) - } else { - setCountDown(0) - } - }, [countDown]) - - return getDaysHoursMinutesAndSeconds(countDown) -} - -/** - * Return an array of four numbers, representing the - * numbers days, hours, minutes and seconds - */ -const getDaysHoursMinutesAndSeconds = (countDown: number) => { - // calculate time left - const days = Math.floor(countDown / (1000 * 60 * 60 * 24)) - const hours = Math.floor( - (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), - ) - const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60)) - const seconds = Math.floor((countDown % (1000 * 60)) / 1000) - - return [days, hours, minutes, seconds] -} - -export { useCountdown } diff --git a/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts b/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts deleted file mode 100644 index e3936cc..0000000 --- a/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { MassTimerTooltip } from './MassTimerTooltip' - -const meta: Meta = { - component: MassTimerTooltip, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: { - nextMass: { - id: "12", - date: '2024-08-23T15:00:00.000Z', - location: { - id: "d", - name: "St. Richard", - address: "Wegstraße 12", - updatedAt: "2025-08-23T15:00:00.000Z", - createdAt: '2025-08-23T15:00:00.000Z', - }, - type: "MASS", - cancelled: false, - updatedAt: '2025-08-23T15:00:00.000Z', - createdAt: '2025-08-23T15:00:00.000Z' - } - }, -} diff --git a/src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx b/src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx deleted file mode 100644 index b8643af..0000000 --- a/src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styles from './massTimerTooltip.module.css' -import clara from './clara.svg' -import Image from 'next/image' -import { Worship } from '@/payload-types' -import { useTime } from '@/hooks/useTime' -import { useLocationName } from '@/hooks/useLocationName' -import { useCompactDate } from '@/hooks/useCompactDate' - -type MassTimerTooltipProps = { - nextMass: Worship -} - -export const MassTimerTooltip = ({ nextMass }: MassTimerTooltipProps) => { - const time = useTime(nextMass.date) - const location = useLocationName(nextMass.location) - const date = useCompactDate(nextMass.date) - - return ( -
-
- {''} -
- -
- Die nächste Messe is am {date} um {time} Uhr in {location}. -
-
- ) -} diff --git a/src/components/archive/MassTimerTooltip/clara.svg b/src/components/archive/MassTimerTooltip/clara.svg deleted file mode 100644 index 3370000..0000000 --- a/src/components/archive/MassTimerTooltip/clara.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - diff --git a/src/components/archive/MassTimerTooltip/massTimerTooltip.module.css b/src/components/archive/MassTimerTooltip/massTimerTooltip.module.css deleted file mode 100644 index 94b2365..0000000 --- a/src/components/archive/MassTimerTooltip/massTimerTooltip.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.tooltip { - width: 310px; - padding: 20px; - color: #4d4d4d; - background: rgb(244, 244, 244); - background: linear-gradient( - 40deg, - rgba(244, 244, 244, 1) 0%, - rgba(228, 228, 228, 1) 100% - ); - border: solid 1px #dddddd; - border-radius: 6px; - display: flex; - gap: 20px; - align-items: center; -} - -.church { - width: 75px; - height: 75px; - border-radius: 50%; - flex-shrink: 0; - background-color: #f6f6f6; - border: solid 2px #c2c2c2; - transition: background-color 200ms ease-in; - overflow: clip; -} - -.church:hover { - cursor: pointer; - background-color: #fff318; -} diff --git a/src/components/archive/MassTitle/MassTitle.stories.tsx b/src/components/archive/MassTitle/MassTitle.stories.tsx deleted file mode 100644 index cc29b3d..0000000 --- a/src/components/archive/MassTitle/MassTitle.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react' -import { MassTitle } from './MassTitle' - -const meta: Meta = { - component: MassTitle, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: { - title: 'Mittwoch der 19. Woche im Jahreskreis', - cancelled: false, - }, -} - -export const Cancelled: Story = { - args: { - title: 'Mittwoch der 19. Woche im Jahreskreis', - cancelled: true, - }, -} diff --git a/src/components/archive/MassTitle/MassTitle.tsx b/src/components/archive/MassTitle/MassTitle.tsx deleted file mode 100644 index 27716d4..0000000 --- a/src/components/archive/MassTitle/MassTitle.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import classNames from 'classnames' -import { faustina } from '@/assets/fonts' -import styles from './styles.module.css' -import { Pill } from '@/components/Pill/Pill' - -type MassTitleProps = { - title: string - cancelled: boolean -} - -export const MassTitle = ({ title, cancelled }: MassTitleProps) => { - return ( -
-
- Gottesdienst {cancelled && ABGESAGT} -
-

- {title} -

-
- ) -} diff --git a/src/components/archive/MassTitle/styles.module.css b/src/components/archive/MassTitle/styles.module.css deleted file mode 100644 index 2f40be1..0000000 --- a/src/components/archive/MassTitle/styles.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.title { - font-size: 48px; - font-weight: 700; - margin-block-start: -10px; -} - -.mass { - font-size: 16px; - font-weight: 700; -} - -.cancelled { - text-decoration: line-through; -} diff --git a/src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx b/src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx deleted file mode 100644 index 9176bf3..0000000 --- a/src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react' -import { MenuBaseLayer } from '@/components/archive/MenuBaseLayer/MenuBaseLayer' - -const meta: Meta = { - component: MenuBaseLayer, -} - -type Story = StoryObj -export default meta - -export const Default: Story = { - args: {}, -} diff --git a/src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx b/src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx deleted file mode 100644 index d8c02b2..0000000 --- a/src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from './style.module.css' - -export const MenuBaseLayer = () => { - return
-} diff --git a/src/components/archive/MenuBaseLayer/bg.svg b/src/components/archive/MenuBaseLayer/bg.svg deleted file mode 100644 index c6e346a..0000000 --- a/src/components/archive/MenuBaseLayer/bg.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/components/archive/MenuBaseLayer/style.module.css b/src/components/archive/MenuBaseLayer/style.module.css deleted file mode 100644 index dcd360b..0000000 --- a/src/components/archive/MenuBaseLayer/style.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.background { - width: 100%; - height: 340px; - background-image: url('bg.svg'); - background-size: 100% 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -}