sell/middlelayer/types

Type Structure

Übersicht

Die Typen sind in zwei Kategorien aufgeteilt:

1. CMS-Typen (types/cms/)

Zweck: Struktur, wie Daten vom CMS (Contentful) kommen

• *Skeleton - Wrapper mit contentTypeId und fields
• Verwendet ComponentLayout (ist jetzt ein Alias für contentLayout)
• Beispiel: ComponentHeadlineSkeleton, HTMLSkeleton, MarkdownSkeleton

Verwendung: Nur im Mapper (mappers/pageMapper.ts) und Mock-Daten (adapters/Mock/_cms/)

Dateien:

• Headline.ts, Html.ts, Markdown.ts, Iframe.ts, ImageGallery.ts, Image.ts, Quote.ts, YoutubeVideo.ts
• Page.ts, Navigation.ts, SEO.ts, FullwidthBanner.ts
• Layout.ts - ComponentLayout (Alias für contentLayout)
• ContentType.enum.ts - Enum für alle Content-Typen

2. Domain-Typen (types/c_*.ts, types/page.ts, etc.)

Zweck: Struktur, wie Daten in der App verwendet werden

• c_* - Content-Item-Typen mit type-Feld für Discriminated Union
• Verwendet contentLayout direkt
• Beispiel: c_headline, c_html, c_markdown, c_iframe, c_imageGallery, c_image, c_quote, c_youtubeVideo

Verwendung: Überall in der App (GraphQL Schema, Astro Components, etc.)

Dateien:

• c_*.ts - Alle Content-Item-Typen
• page.ts - Page-Typ mit ContentItem Union und ContentRow
• contentLayout.ts - Einheitlicher Layout-Typ
• pageSeo.ts, navigation.ts, product.ts, user.ts - Weitere Domain-Typen

Mapping

Der PageMapper konvertiert von CMS-Typen zu Domain-Typen:

// Beispiel: Headline
CMS: ComponentHeadlineSkeleton {
  contentTypeId: ContentType.headline,
  fields: {
    internal: string,
    text: string,
    tag: "h1" | "h2" | ...,
    align?: "left" | "center" | "right",
    layout: ComponentLayout
  }
}
↓ (PageMapper.mapContentItem)
Domain: c_headline {
  type: "headline",
  internal: string,
  text: string,
  tag: "h1" | "h2" | ...,
  align?: "left" | "center" | "right",
  layout: contentLayout
}

Layout-Typen

• ComponentLayout (in types/cms/Layout.ts) = Alias für contentLayout
• contentLayout (in types/contentLayout.ts) = Einheitlicher Layout-Typ für alle Content-Items

Struktur:

{
  mobile: string;        // z.B. "12", "6", "4"
  tablet?: string;       // Optional, z.B. "8", "6"
  desktop?: string;      // Optional, z.B. "6", "4"
  spaceBottom?: number;  // Optional, z.B. 0, 0.5, 1, 1.5, 2
}

Warum: Redundanz vermeiden - beide haben die gleiche Struktur. ComponentLayout ist nur ein Alias, um die Semantik klar zu machen (CMS vs Domain).

Content-Items Union

Alle Content-Items werden in types/page.ts zu einer Union zusammengefasst:

export type ContentItem =
  | c_html
  | c_markdown
  | c_iframe
  | c_imageGallery
  | c_image
  | c_quote
  | c_youtubeVideo
  | c_headline;

Dies ermöglicht Type-Safe Discriminated Unions über das type-Feld.