cygnus/src/blocks/FlowExampleBlock.ts at de3e56c31449bad63dd3e80a0eb0d4e4e10fa8d8 · code0-tech/cygnus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import { iconField } from "@mvriu5/payload-icon-picker"
import type { Block, Field } from "payload"

function flowIconField(): Field {
    return iconField({
        name: "icon",
        label: "Icon",
        required: true,
        placeholder: "Search icons",
        noResultsLabel: "No icons found",
        admin: { position: "sidebar" },
    })
}

export const FlowExampleBlock: Block = {
    slug: "flowExample",
    labels: {
        singular: "Flow Example",
        plural: "Flow Examples",
    },
    fields: [
        {
            type: "collapsible",
            label: "Section",
            fields: [
                {
                    name: "sectionHeading",
                    label: "Section Heading",
                    type: "text",
                    localized: true,
                },
                {
                    name: "sectionLayout",
                    label: "Section Layout",
                    type: "select",
                    required: true,
                    defaultValue: "center",
                    options: [
                        { label: "Center", value: "center" },
                        { label: "Left", value: "left" },
                    ],
                },
                {
                    name: "sectionDescription",
                    label: "Section Description",
                    type: "textarea",
                    localized: true,
                },
                {
                    name: "sectionLinkButton",
                    label: "Section Link Button",
                    type: "group",
                    fields: [
                        { name: "label", type: "text", localized: true },
                        { name: "url", type: "text" },
                    ],
                },
            ],
        },
        {
            name: "contentHeading",
            label: "Content Heading",
            type: "text",
            localized: true,
        },
        {
            name: "contentDescription",
            label: "Content Description",
            type: "textarea",
            localized: true,
        },
        {
            name: "flowLayout",
            label: "Flow Layout",
            type: "select",
            required: true,
            defaultValue: "left",
            options: [
                { label: "Flow left", value: "left" },
                { label: "Flow right", value: "right" },
            ],
        },
        {
            name: "flow",
            type: "group",
            fields: [
                {
                    name: "trigger",
                    type: "group",
                    fields: [
                        flowIconField(),
                        {
                            name: "name",
                            type: "text",
                            required: true,
                            localized: true,
                        },
                    ],
                },
                {
                    name: "items",
                    label: "Flow items",
                    type: "array",
                    fields: [
                        flowIconField(),
                        {
                            name: "color",
                            type: "select",
                            required: true,
                            defaultValue: "brand",
                            options: [
                                { label: "Brand", value: "brand" },
                                { label: "Yellow", value: "yellow" },
                                { label: "Aqua", value: "aqua" },
                                { label: "Blue", value: "blue" },
                                { label: "Pink", value: "pink" },
                            ],
                        },
                        {
                            name: "outline",
                            type: "checkbox",
                            defaultValue: true,
                        },
                        {
                            name: "segments",
                            type: "array",
                            required: true,
                            minRows: 1,
                            fields: [
                                {
                                    name: "type",
                                    type: "select",
                                    required: true,
                                    defaultValue: "text",
                                    options: [
                                        { label: "Text", value: "text" },
                                        { label: "Literal", value: "literal" },
                                        { label: "Reference", value: "reference" },
                                        { label: "Node", value: "node" },
                                    ],
                                },
                                {
                                    name: "value",
                                    type: "text",
                                    required: true,
                                    localized: true,
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            name: "showBorder",
            label: "Show Border",
            type: "checkbox",
            defaultValue: false,
        },
    ],
}