fix(web): remove redundant prop-types and unblock lint pipeline
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 10s
Build & Deploy / 🧪 QA (push) Failing after 2m24s
Build & Deploy / 🏗️ Build (push) Failing after 3m40s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 3s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 10s
Build & Deploy / 🧪 QA (push) Failing after 2m24s
Build & Deploy / 🏗️ Build (push) Failing after 3m40s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 3s
This commit is contained in:
315
apps/web/src/components/PayloadRichText.tsx
Normal file
315
apps/web/src/components/PayloadRichText.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||
import type { JSXConverters } from "@payloadcms/richtext-lexical/react";
|
||||
import { MemeCard } from "@/src/components/MemeCard";
|
||||
import { Mermaid } from "@/src/components/Mermaid";
|
||||
import { LeadMagnet } from "@/src/components/LeadMagnet";
|
||||
import { ComparisonRow } from "@/src/components/Landing/ComparisonRow";
|
||||
import { mdxComponents } from "../content-engine/components";
|
||||
|
||||
const jsxConverters: JSXConverters = {
|
||||
blocks: {
|
||||
memeCard: ({ node }: any) => (
|
||||
<div className="my-8">
|
||||
<MemeCard
|
||||
template={node.fields.template}
|
||||
captions={node.fields.captions}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
mermaid: ({ node }: any) => (
|
||||
<div className="my-8">
|
||||
<Mermaid
|
||||
id={node.fields.id}
|
||||
title={node.fields.title}
|
||||
showShare={node.fields.showShare}
|
||||
>
|
||||
{node.fields.chartDefinition}
|
||||
</Mermaid>
|
||||
</div>
|
||||
),
|
||||
leadMagnet: ({ node }: any) => (
|
||||
<div className="my-12">
|
||||
<LeadMagnet
|
||||
title={node.fields.title}
|
||||
description={node.fields.description}
|
||||
buttonText={node.fields.buttonText}
|
||||
href={node.fields.href}
|
||||
variant={node.fields.variant}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
comparisonRow: ({ node }: any) => (
|
||||
<ComparisonRow
|
||||
description={node.fields.description}
|
||||
negativeLabel={node.fields.negativeLabel}
|
||||
negativeText={node.fields.negativeText}
|
||||
positiveLabel={node.fields.positiveLabel}
|
||||
positiveText={node.fields.positiveText}
|
||||
reverse={node.fields.reverse}
|
||||
showShare={true}
|
||||
/>
|
||||
),
|
||||
// --- MDX Registry Injections ---
|
||||
leadParagraph: ({ node }: any) => (
|
||||
<mdxComponents.LeadParagraph>
|
||||
{node.fields.text}
|
||||
</mdxComponents.LeadParagraph>
|
||||
),
|
||||
articleBlockquote: ({ node }: any) => (
|
||||
<mdxComponents.ArticleBlockquote>
|
||||
{node.fields.quote}
|
||||
{node.fields.author && ` - ${node.fields.author}`}
|
||||
</mdxComponents.ArticleBlockquote>
|
||||
),
|
||||
mintelH2: ({ node }: any) => (
|
||||
<mdxComponents.H2>{node.fields.text}</mdxComponents.H2>
|
||||
),
|
||||
mintelH3: ({ node }: any) => (
|
||||
<mdxComponents.H3>{node.fields.text}</mdxComponents.H3>
|
||||
),
|
||||
mintelHeading: ({ node }: any) => {
|
||||
const displayLevel = node.fields.displayLevel || "h2";
|
||||
if (displayLevel === "h3")
|
||||
return <mdxComponents.H3>{node.fields.text}</mdxComponents.H3>;
|
||||
return <mdxComponents.H2>{node.fields.text}</mdxComponents.H2>;
|
||||
},
|
||||
statsDisplay: ({ node }: any) => (
|
||||
<mdxComponents.StatsDisplay
|
||||
label={node.fields.label}
|
||||
value={node.fields.value}
|
||||
subtext={node.fields.subtext}
|
||||
/>
|
||||
),
|
||||
diagramState: ({ node }: any) => (
|
||||
<mdxComponents.DiagramState
|
||||
states={[]}
|
||||
transitions={[]}
|
||||
caption={node.fields.definition}
|
||||
/>
|
||||
),
|
||||
diagramTimeline: ({ node }: any) => (
|
||||
<mdxComponents.DiagramTimeline
|
||||
events={[]}
|
||||
title={node.fields.definition}
|
||||
/>
|
||||
),
|
||||
diagramGantt: ({ node }: any) => (
|
||||
<mdxComponents.DiagramGantt tasks={[]} title={node.fields.definition} />
|
||||
),
|
||||
diagramPie: ({ node }: any) => (
|
||||
<mdxComponents.DiagramPie data={[]} title={node.fields.definition} />
|
||||
),
|
||||
diagramSequence: ({ node }: any) => (
|
||||
<mdxComponents.DiagramSequence
|
||||
participants={[]}
|
||||
steps={[]}
|
||||
title={node.fields.definition}
|
||||
/>
|
||||
),
|
||||
diagramFlow: ({ node }: any) => (
|
||||
<mdxComponents.DiagramFlow
|
||||
nodes={[]}
|
||||
edges={[]}
|
||||
title={node.fields.definition}
|
||||
/>
|
||||
),
|
||||
|
||||
waterfallChart: ({ node }: any) => (
|
||||
<mdxComponents.WaterfallChart
|
||||
title={node.fields.title}
|
||||
events={node.fields.metrics || []}
|
||||
/>
|
||||
),
|
||||
premiumComparisonChart: ({ node }: any) => (
|
||||
<mdxComponents.PremiumComparisonChart
|
||||
title={node.fields.title}
|
||||
items={node.fields.datasets || []}
|
||||
/>
|
||||
),
|
||||
iconList: ({ node }: any) => (
|
||||
<mdxComponents.IconList>
|
||||
{node.fields.items?.map((item: any, i: number) => (
|
||||
// @ts-ignore
|
||||
<mdxComponents.IconListItem
|
||||
key={i}
|
||||
icon={item.icon || "check"}
|
||||
title={item.title}
|
||||
>
|
||||
{item.description}
|
||||
</mdxComponents.IconListItem>
|
||||
))}
|
||||
</mdxComponents.IconList>
|
||||
),
|
||||
statsGrid: ({ node }: any) => {
|
||||
const rawStats = node.fields.stats || [];
|
||||
let statsStr = "";
|
||||
if (Array.isArray(rawStats)) {
|
||||
statsStr = rawStats
|
||||
.map((s: any) => `${s.value || ""}|${s.label || ""}`)
|
||||
.join("~");
|
||||
} else if (typeof rawStats === "string") {
|
||||
statsStr = rawStats;
|
||||
}
|
||||
return <mdxComponents.StatsGrid stats={statsStr} />;
|
||||
},
|
||||
metricBar: ({ node }: any) => (
|
||||
<mdxComponents.MetricBar
|
||||
label={node.fields.label}
|
||||
value={node.fields.value}
|
||||
color={node.fields.color as any}
|
||||
/>
|
||||
),
|
||||
carousel: ({ node }: any) => (
|
||||
<mdxComponents.Carousel
|
||||
items={
|
||||
node.fields.slides?.map((s: any) => ({
|
||||
title: s.caption || "Image",
|
||||
content: "",
|
||||
icon: undefined,
|
||||
})) || []
|
||||
}
|
||||
/>
|
||||
),
|
||||
imageText: ({ node }: any) => (
|
||||
<mdxComponents.ImageText
|
||||
image={node.fields.image?.url || ""}
|
||||
title="ImageText Component"
|
||||
>
|
||||
{node.fields.text}
|
||||
</mdxComponents.ImageText>
|
||||
),
|
||||
revenueLossCalculator: ({ node }: any) => (
|
||||
<mdxComponents.RevenueLossCalculator />
|
||||
),
|
||||
performanceChart: ({ node }: any) => <mdxComponents.PerformanceChart />,
|
||||
performanceROICalculator: ({ node }: any) => (
|
||||
<div className="not-prose my-12">
|
||||
<mdxComponents.PerformanceROICalculator />
|
||||
</div>
|
||||
),
|
||||
loadTimeSimulator: ({ node }: any) => (
|
||||
<div className="not-prose my-12">
|
||||
<mdxComponents.LoadTimeSimulator />
|
||||
</div>
|
||||
),
|
||||
architectureBuilder: ({ node }: any) => (
|
||||
<div className="not-prose my-12">
|
||||
<mdxComponents.ArchitectureBuilder />
|
||||
</div>
|
||||
),
|
||||
digitalAssetVisualizer: ({ node }: any) => (
|
||||
<div className="not-prose my-12">
|
||||
<mdxComponents.DigitalAssetVisualizer />
|
||||
</div>
|
||||
),
|
||||
|
||||
twitterEmbed: ({ node }: any) => (
|
||||
<mdxComponents.TwitterEmbed
|
||||
tweetId={node.fields.url?.split("/").pop() || ""}
|
||||
/>
|
||||
),
|
||||
youTubeEmbed: ({ node }: any) => (
|
||||
<mdxComponents.YouTubeEmbed
|
||||
videoId={node.fields.videoId}
|
||||
title={node.fields.title}
|
||||
/>
|
||||
),
|
||||
linkedInEmbed: ({ node }: any) => (
|
||||
<mdxComponents.LinkedInEmbed url={node.fields.url} />
|
||||
),
|
||||
externalLink: ({ node }: any) => (
|
||||
<mdxComponents.ExternalLink href={node.fields.href}>
|
||||
{node.fields.label}
|
||||
</mdxComponents.ExternalLink>
|
||||
),
|
||||
trackedLink: ({ node }: any) => (
|
||||
<mdxComponents.TrackedLink
|
||||
href={node.fields.href}
|
||||
eventName={node.fields.eventName}
|
||||
>
|
||||
{node.fields.label}
|
||||
</mdxComponents.TrackedLink>
|
||||
),
|
||||
articleMeme: ({ node }: any) => (
|
||||
<mdxComponents.ArticleMeme
|
||||
template="drake"
|
||||
captions={node.fields.caption || "Top|Bottom"}
|
||||
image={node.fields.image?.url || undefined}
|
||||
/>
|
||||
),
|
||||
marker: ({ node }: any) => (
|
||||
<mdxComponents.Marker color={node.fields.color} delay={node.fields.delay}>
|
||||
{node.fields.text}
|
||||
</mdxComponents.Marker>
|
||||
),
|
||||
boldNumber: ({ node }: any) => (
|
||||
<mdxComponents.BoldNumber
|
||||
value={node.fields.value}
|
||||
label={node.fields.label}
|
||||
source={node.fields.source}
|
||||
sourceUrl={node.fields.sourceUrl}
|
||||
/>
|
||||
),
|
||||
webVitalsScore: ({ node }: any) => (
|
||||
<mdxComponents.WebVitalsScore
|
||||
values={{
|
||||
lcp: node.fields.lcp,
|
||||
inp: node.fields.inp,
|
||||
cls: node.fields.cls,
|
||||
}}
|
||||
description={node.fields.description}
|
||||
/>
|
||||
),
|
||||
buttonBlock: ({ node }: any) => (
|
||||
<mdxComponents.Button
|
||||
href={node.fields.href}
|
||||
variant={node.fields.variant}
|
||||
size={node.fields.size}
|
||||
showArrow={node.fields.showArrow}
|
||||
>
|
||||
{node.fields.label}
|
||||
</mdxComponents.Button>
|
||||
),
|
||||
articleQuote: ({ node }: any) => (
|
||||
<mdxComponents.ArticleQuote
|
||||
quote={node.fields.quote}
|
||||
author={node.fields.author}
|
||||
role={node.fields.role}
|
||||
source={node.fields.source}
|
||||
sourceUrl={node.fields.sourceUrl}
|
||||
translated={node.fields.translated}
|
||||
isCompany={node.fields.isCompany}
|
||||
/>
|
||||
),
|
||||
reveal: ({ node }: any) => (
|
||||
<mdxComponents.Reveal
|
||||
direction={node.fields.direction}
|
||||
delay={node.fields.delay}
|
||||
>
|
||||
{/* Reveal component takes children, which in MDX is nested content */}
|
||||
<PayloadRichText data={node.fields.content} />
|
||||
</mdxComponents.Reveal>
|
||||
),
|
||||
section: ({ node }: any) => (
|
||||
<mdxComponents.Section title={node.fields.title}>
|
||||
<PayloadRichText data={node.fields.content} />
|
||||
</mdxComponents.Section>
|
||||
),
|
||||
tableOfContents: () => <mdxComponents.TableOfContents />,
|
||||
faqSection: ({ node }: any) => (
|
||||
<mdxComponents.FAQSection>
|
||||
<PayloadRichText data={node.fields.content} />
|
||||
</mdxComponents.FAQSection>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export function PayloadRichText({ data }: { data: any }) {
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="article-content max-w-none">
|
||||
<RichText data={data} converters={jsxConverters} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user