Skip to content

Commit 8a5a716

Browse files
mvriu5mvriu5
authored
Merge pull request #369 from code0-tech/feat/flowexample-section
Feat/flowexample section
2 parents d8d0c22 + de3e56c commit 8a5a716

28 files changed

Lines changed: 71201 additions & 91 deletions

‎src/app/(payload)/admin/importMap.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/blocks/FlowExampleBlock.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { iconField } from "@mvriu5/payload-icon-picker"
2+
import type { Block, Field } from "payload"
3+
4+
function flowIconField(): Field {
5+
return iconField({
6+
name: "icon",
7+
label: "Icon",
8+
required: true,
9+
placeholder: "Search icons",
10+
noResultsLabel: "No icons found",
11+
admin: { position: "sidebar" },
12+
})
13+
}
14+
15+
export const FlowExampleBlock: Block = {
16+
slug: "flowExample",
17+
labels: {
18+
singular: "Flow Example",
19+
plural: "Flow Examples",
20+
},
21+
fields: [
22+
{
23+
type: "collapsible",
24+
label: "Section",
25+
fields: [
26+
{
27+
name: "sectionHeading",
28+
label: "Section Heading",
29+
type: "text",
30+
localized: true,
31+
},
32+
{
33+
name: "sectionLayout",
34+
label: "Section Layout",
35+
type: "select",
36+
required: true,
37+
defaultValue: "center",
38+
options: [
39+
{ label: "Center", value: "center" },
40+
{ label: "Left", value: "left" },
41+
],
42+
},
43+
{
44+
name: "sectionDescription",
45+
label: "Section Description",
46+
type: "textarea",
47+
localized: true,
48+
},
49+
{
50+
name: "sectionLinkButton",
51+
label: "Section Link Button",
52+
type: "group",
53+
fields: [
54+
{ name: "label", type: "text", localized: true },
55+
{ name: "url", type: "text" },
56+
],
57+
},
58+
],
59+
},
60+
{
61+
name: "contentHeading",
62+
label: "Content Heading",
63+
type: "text",
64+
localized: true,
65+
},
66+
{
67+
name: "contentDescription",
68+
label: "Content Description",
69+
type: "textarea",
70+
localized: true,
71+
},
72+
{
73+
name: "flowLayout",
74+
label: "Flow Layout",
75+
type: "select",
76+
required: true,
77+
defaultValue: "left",
78+
options: [
79+
{ label: "Flow left", value: "left" },
80+
{ label: "Flow right", value: "right" },
81+
],
82+
},
83+
{
84+
name: "flow",
85+
type: "group",
86+
fields: [
87+
{
88+
name: "trigger",
89+
type: "group",
90+
fields: [
91+
flowIconField(),
92+
{
93+
name: "name",
94+
type: "text",
95+
required: true,
96+
localized: true,
97+
},
98+
],
99+
},
100+
{
101+
name: "items",
102+
label: "Flow items",
103+
type: "array",
104+
fields: [
105+
flowIconField(),
106+
{
107+
name: "color",
108+
type: "select",
109+
required: true,
110+
defaultValue: "brand",
111+
options: [
112+
{ label: "Brand", value: "brand" },
113+
{ label: "Yellow", value: "yellow" },
114+
{ label: "Aqua", value: "aqua" },
115+
{ label: "Blue", value: "blue" },
116+
{ label: "Pink", value: "pink" },
117+
],
118+
},
119+
{
120+
name: "outline",
121+
type: "checkbox",
122+
defaultValue: true,
123+
},
124+
{
125+
name: "segments",
126+
type: "array",
127+
required: true,
128+
minRows: 1,
129+
fields: [
130+
{
131+
name: "type",
132+
type: "select",
133+
required: true,
134+
defaultValue: "text",
135+
options: [
136+
{ label: "Text", value: "text" },
137+
{ label: "Literal", value: "literal" },
138+
{ label: "Reference", value: "reference" },
139+
{ label: "Node", value: "node" },
140+
],
141+
},
142+
{
143+
name: "value",
144+
type: "text",
145+
required: true,
146+
localized: true,
147+
},
148+
],
149+
},
150+
],
151+
},
152+
],
153+
},
154+
{
155+
name: "showBorder",
156+
label: "Show Border",
157+
type: "checkbox",
158+
defaultValue: false,
159+
},
160+
],
161+
}

‎src/blocks/StatsBlock.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ export const StatsBlock: Block = {
8585
defaultValue: true,
8686
},
8787
{
88-
name: "showPlus",
89-
label: "Show plus",
90-
type: "checkbox",
91-
defaultValue: false,
88+
name: "suffix",
89+
label: "Suffix",
90+
type: "text",
91+
localized: true,
9292
},
9393
],
9494
},

‎src/collections/pages.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { StandaloneBlock } from "@/blocks/StandaloneBlock"
2626
import { VideoBlock } from "@/blocks/VideoBlock"
2727
import { WideHeroBlock } from "@/blocks/WideHeroBlock"
2828
import { StatsBlock } from "@/blocks/StatsBlock"
29+
import { FlowExampleBlock } from "@/blocks/FlowExampleBlock"
2930

3031
export const Pages: CollectionConfig = {
3132
slug: "pages",
@@ -101,6 +102,7 @@ export const Pages: CollectionConfig = {
101102
WideHeroBlock,
102103
ListFeatureSection,
103104
StatsBlock,
105+
FlowExampleBlock,
104106
],
105107
required: false,
106108
localized: true,

‎src/components/PageBlockRenderer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { StandaloneCardSection } from "./sections/StandaloneCardSection"
2020
import { VideoSection } from "./sections/VideoSection"
2121
import { WideHeroSection } from "./sections/WideHeroSection"
2222
import { StatsSection } from "./sections/StatsSection"
23+
import { FlowExampleSection } from "./sections/FlowExampleSection"
2324
import { ActionHeroSection } from "./sections/ActionHeroSection"
2425
import { ActionDetailSection } from "./sections/ActionDetailSection"
2526
import { ActionReferencesSection } from "./sections/ActionReferencesSection"
@@ -62,6 +63,7 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
6263
widehero: (block) => <WideHeroSection content={block as Extract<PageBlock, { blockType: "widehero" }>} />,
6364
listFeature: (block) => <ListFeatureSection content={block as Extract<PageBlock, { blockType: "listFeature" }>} />,
6465
stats: (block) => <StatsSection content={block as Extract<PageBlock, { blockType: "stats" }>} />,
66+
flowExample: (block) => <FlowExampleSection content={block as Extract<PageBlock, { blockType: "flowExample" }>} />,
6567
actionHero: (block, options) =>
6668
options.action ? <ActionHeroSection action={options.action} locale={options.locale ?? "en"} content={block as Extract<PageBlock, { blockType: "actionHero" }>} /> : null,
6769
actionDetails: (block, options) => {

‎src/components/animations/NodesAnimation.tsx‎

Lines changed: 3 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,8 @@
11
"use client"
22

3-
import { Card, Flex, Text } from "@code0-tech/pictor"
4-
import { IconNote, IconVariable } from "@tabler/icons-react"
3+
import { NodeDisplay, type NodeItem } from "@/components/nodes/NodeDisplay"
54
import { useInView, useReducedMotion } from "motion/react"
65
import { useEffect, useRef } from "react"
7-
import { StableBadge } from "../ui/StableBadge"
8-
9-
type NodeSegmentType = "text" | "literal" | "reference" | "node"
10-
type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink"
11-
12-
const ICON_COLOR_MAP: Record<NodeAccent, string> = {
13-
brand: "var(--bg-brand)",
14-
yellow: "var(--bg-yellow)",
15-
aqua: "var(--bg-aqua)",
16-
blue: "var(--bg-blue)",
17-
pink: "var(--bg-pink)",
18-
}
19-
20-
export interface NodeSegment {
21-
type: NodeSegmentType
22-
value: string
23-
}
24-
25-
export interface NodeItem {
26-
color: NodeAccent
27-
segments: NodeSegment[]
28-
outline: boolean
29-
}
30-
31-
function displayMessage(segments: NodeSegment[]) {
32-
return segments.map((segment, index) => {
33-
switch (segment.type) {
34-
case "literal":
35-
return (
36-
<StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle" }} color={"secondary"}>
37-
<Text size={"sm"} style={{ color: "white" }}>
38-
{segment.value}
39-
</Text>
40-
</StableBadge>
41-
)
42-
case "reference":
43-
return (
44-
<StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle" }} color={"warning"} border className="py-0">
45-
<IconVariable size={12} />
46-
<Text size={"sm"} style={{ color: "inherit" }}>
47-
{segment.value}
48-
</Text>
49-
</StableBadge>
50-
)
51-
case "node":
52-
return (
53-
<StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle", textWrap: "nowrap" }} border>
54-
<IconNote size={12} className="text-white" />
55-
<Text size={"sm"} style={{ color: "white" }}>
56-
{segment.value}
57-
</Text>
58-
</StableBadge>
59-
)
60-
case "text":
61-
return (
62-
<Text key={`${segment.type}-${index}`} size="sm" style={{ color: "inherit" }}>
63-
{segment.value}
64-
</Text>
65-
)
66-
}
67-
})
68-
}
696

707
function NodeRow({ nodes, direction, active }: { nodes: NodeItem[]; direction: "left" | "right"; active: boolean }) {
718
const animationRef = useRef<HTMLDivElement>(null)
@@ -105,26 +42,12 @@ function NodeRow({ nodes, direction, active }: { nodes: NodeItem[]; direction: "
10542
>
10643
<div ref={listRef} className="flex items-start gap-4">
10744
{nodes.map((node, index) => (
108-
<Card key={`${direction}-${node.color}-${index}`} paddingSize="xs" py="0.35" borderColor="info" color="primary" outline={node.outline}>
109-
<Flex align="center" style={{ gap: "0.7rem" }}>
110-
<IconNote color={ICON_COLOR_MAP[node.color]} size={16} className="shrink-0" />
111-
<Flex align="center" wrap="wrap" className="text-secondary!" style={{ gap: "0.35rem" }}>
112-
{displayMessage(node.segments)}
113-
</Flex>
114-
</Flex>
115-
</Card>
45+
<NodeDisplay key={`${direction}-${node.color}-${index}`} node={node} />
11646
))}
11747
</div>
11848
<div className="flex items-start gap-4" aria-hidden="true">
11949
{nodes.map((node, index) => (
120-
<Card key={`${direction}-clone-${node.color}-${index}`} paddingSize="xs" py="0.35" borderColor="info" color="primary" outline={node.outline}>
121-
<Flex align="center" style={{ gap: "0.7rem" }}>
122-
<IconNote color={ICON_COLOR_MAP[node.color]} size={16} className="shrink-0" />
123-
<Flex align="center" wrap="wrap" className="text-secondary!" style={{ gap: "0.35rem" }}>
124-
{displayMessage(node.segments)}
125-
</Flex>
126-
</Flex>
127-
</Card>
50+
<NodeDisplay key={`${direction}-clone-${node.color}-${index}`} node={node} />
12851
))}
12952
</div>
13053
</div>

‎src/components/blog/TriggerMarkdownBlock.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { NodesAnimation, type NodeItem, type NodeSegment } from "../animations/NodesAnimation"
1+
import { NodesAnimation } from "../animations/NodesAnimation"
2+
import type { NodeItem, NodeSegment } from "../nodes/NodeDisplay"
23

34
interface TriggerMarkdownBlockProps {
45
source: string

0 commit comments

Comments
 (0)