Skip to content

Commit df60b13

Browse files
thedaviddiasthedaviddias
committed
feat: add input types
1 parent e2b509d commit df60b13

File tree

8 files changed

+987
-34
lines changed

8 files changed

+987
-34
lines changed

‎app/_components/decision-flow/data/input-types.ts

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,349 @@
1+
import type { DecisionEdge, DecisionNode } from "../types";
2+
3+
export const nodes: DecisionNode[] = [
4+
{
5+
id: "start",
6+
type: "question",
7+
data: {
8+
label: "What type of data are you collecting?",
9+
description: "Consider the type of information you need from the user"
10+
},
11+
position: { x: 250, y: 0 },
12+
},
13+
{
14+
id: "text",
15+
type: "question",
16+
data: {
17+
label: "Is it free-form text?",
18+
description: "Does the user need to enter custom text?"
19+
},
20+
position: { x: 250, y: 50 },
21+
},
22+
{
23+
id: "complex",
24+
type: "question",
25+
data: {
26+
label: "Need rich formatting?",
27+
description: "Does the input require special formatting or complex interaction?"
28+
},
29+
position: { x: 100, y: 100 },
30+
},
31+
{
32+
id: "multiline",
33+
type: "question",
34+
data: {
35+
label: "Multiple lines needed?",
36+
description: "Will users need to enter multiple lines of text?"
37+
},
38+
position: { x: 250, y: 100 },
39+
},
40+
{
41+
id: "special_text",
42+
type: "question",
43+
data: {
44+
label: "Is it a special format?",
45+
description: "Does the input require specific validation or formatting?"
46+
},
47+
position: { x: 400, y: 100 },
48+
},
49+
{
50+
id: "selection",
51+
type: "question",
52+
data: {
53+
label: "Are options predefined?",
54+
description: "Do users choose from a set list of options?"
55+
},
56+
position: { x: 250, y: 150 },
57+
},
58+
{
59+
id: "multiple",
60+
type: "question",
61+
data: {
62+
label: "Multiple selections allowed?",
63+
description: "Can users select more than one option?"
64+
},
65+
position: { x: 150, y: 200 },
66+
},
67+
{
68+
id: "option_count",
69+
type: "question",
70+
data: {
71+
label: "How many options?",
72+
description: "Consider the number of choices available"
73+
},
74+
position: { x: 350, y: 200 },
75+
},
76+
{
77+
id: "special_input",
78+
type: "question",
79+
data: {
80+
label: "What kind of special input?",
81+
description: "Select the specific type of input needed"
82+
},
83+
position: { x: 250, y: 250 },
84+
},
85+
// Complex inputs
86+
{
87+
id: "rich_text",
88+
type: "pattern",
89+
data: {
90+
label: "Use Rich Text Editor",
91+
description: "Best for formatted text with styling options",
92+
patternLink: "/patterns/forms/rich-text-editor"
93+
},
94+
position: { x: 30, y: 150 },
95+
},
96+
{
97+
id: "signature",
98+
type: "pattern",
99+
data: {
100+
label: "Use Signature Pad",
101+
description: "Best for capturing handwritten signatures",
102+
patternLink: "/patterns/forms/signature-pad"
103+
},
104+
position: { x: 100, y: 150 },
105+
},
106+
// Text inputs
107+
{
108+
id: "textarea",
109+
type: "pattern",
110+
data: {
111+
label: "Use Textarea",
112+
description: "Best for multi-line text entry",
113+
patternLink: "/patterns/forms/text-field#multiline"
114+
},
115+
position: { x: 170, y: 150 },
116+
},
117+
{
118+
id: "text_input",
119+
type: "pattern",
120+
data: {
121+
label: "Use Text Input",
122+
description: "Best for single-line text entry",
123+
patternLink: "/patterns/forms/text-field"
124+
},
125+
position: { x: 240, y: 150 },
126+
},
127+
// Special format inputs
128+
{
129+
id: "email",
130+
type: "pattern",
131+
data: {
132+
label: "Use Email Input",
133+
description: "Includes email format validation",
134+
patternLink: "/patterns/forms/text-field#email"
135+
},
136+
position: { x: 310, y: 150 },
137+
},
138+
{
139+
id: "number",
140+
type: "pattern",
141+
data: {
142+
label: "Use Number Input",
143+
description: "Best for numeric data entry",
144+
patternLink: "/patterns/forms/text-field#number"
145+
},
146+
position: { x: 380, y: 150 },
147+
},
148+
{
149+
id: "currency",
150+
type: "pattern",
151+
data: {
152+
label: "Use Currency Input",
153+
description: "Best for monetary values with formatting",
154+
patternLink: "/patterns/forms/currency-input"
155+
},
156+
position: { x: 450, y: 150 },
157+
},
158+
{
159+
id: "phone",
160+
type: "pattern",
161+
data: {
162+
label: "Use Phone Input",
163+
description: "Best for phone numbers with formatting",
164+
patternLink: "/patterns/forms/phone-number"
165+
},
166+
position: { x: 520, y: 150 },
167+
},
168+
// Selection inputs
169+
{
170+
id: "checkbox",
171+
type: "pattern",
172+
data: {
173+
label: "Use Checkboxes",
174+
description: "Best for multiple selections",
175+
patternLink: "/patterns/forms/checkbox"
176+
},
177+
position: { x: 30, y: 250 },
178+
},
179+
{
180+
id: "multi_select",
181+
type: "pattern",
182+
data: {
183+
label: "Use Multi-select",
184+
description: "Best for multiple selections with search",
185+
patternLink: "/patterns/forms/multi-select-input"
186+
},
187+
position: { x: 100, y: 250 },
188+
},
189+
{
190+
id: "tag_input",
191+
type: "pattern",
192+
data: {
193+
label: "Use Tag Input",
194+
description: "Best for multiple text entries as tags",
195+
patternLink: "/patterns/forms/tag-input"
196+
},
197+
position: { x: 170, y: 250 },
198+
},
199+
{
200+
id: "radio",
201+
type: "pattern",
202+
data: {
203+
label: "Use Radio Buttons",
204+
description: "Best for single selection from few options",
205+
patternLink: "/patterns/forms/radio"
206+
},
207+
position: { x: 310, y: 250 },
208+
},
209+
{
210+
id: "select",
211+
type: "pattern",
212+
data: {
213+
label: "Use Select Dropdown",
214+
description: "Best for single selection from many options",
215+
patternLink: "/patterns/forms/selection-input"
216+
},
217+
position: { x: 380, y: 250 },
218+
},
219+
// Special inputs
220+
{
221+
id: "date",
222+
type: "pattern",
223+
data: {
224+
label: "Use Date Input",
225+
description: "Best for date selection",
226+
patternLink: "/patterns/forms/date-input"
227+
},
228+
position: { x: 30, y: 300 },
229+
},
230+
{
231+
id: "time",
232+
type: "pattern",
233+
data: {
234+
label: "Use Time Input",
235+
description: "Best for time selection",
236+
patternLink: "/patterns/forms/time-input"
237+
},
238+
position: { x: 100, y: 300 },
239+
},
240+
{
241+
id: "file",
242+
type: "pattern",
243+
data: {
244+
label: "Use File Input",
245+
description: "Best for file uploads",
246+
patternLink: "/patterns/forms/file-input"
247+
},
248+
position: { x: 170, y: 300 },
249+
},
250+
{
251+
id: "range",
252+
type: "pattern",
253+
data: {
254+
label: "Use Range Input",
255+
description: "Best for numeric ranges",
256+
patternLink: "/patterns/forms/slider"
257+
},
258+
position: { x: 240, y: 300 },
259+
},
260+
{
261+
id: "color",
262+
type: "pattern",
263+
data: {
264+
label: "Use Color Picker",
265+
description: "Best for color selection",
266+
patternLink: "/patterns/forms/color-picker"
267+
},
268+
position: { x: 310, y: 300 },
269+
},
270+
{
271+
id: "rating",
272+
type: "pattern",
273+
data: {
274+
label: "Use Rating Input",
275+
description: "Best for collecting ratings or scores",
276+
patternLink: "/patterns/forms/rating-input"
277+
},
278+
position: { x: 380, y: 300 },
279+
},
280+
{
281+
id: "code",
282+
type: "pattern",
283+
data: {
284+
label: "Use Code Input",
285+
description: "Best for verification codes or OTP",
286+
patternLink: "/patterns/forms/code-confirmation"
287+
},
288+
position: { x: 450, y: 300 },
289+
},
290+
{
291+
id: "toggle",
292+
type: "pattern",
293+
data: {
294+
label: "Use Toggle Switch",
295+
description: "Best for boolean options",
296+
patternLink: "/patterns/forms/toggle"
297+
},
298+
position: { x: 520, y: 300 },
299+
},
300+
];
301+
302+
export const edges: DecisionEdge[] = [
303+
// Initial paths from start
304+
{ id: "start-text", source: "start", target: "text", label: "Text" },
305+
{ id: "start-selection", source: "start", target: "selection", label: "Selection" },
306+
{ id: "start-special", source: "start", target: "special_input", label: "Special" },
307+
308+
// Text paths
309+
{ id: "text-complex", source: "text", target: "complex", label: "Complex" },
310+
{ id: "text-multiline", source: "text", target: "multiline", label: "Simple" },
311+
{ id: "text-special", source: "text", target: "special_text", label: "Formatted" },
312+
313+
// Complex text paths
314+
{ id: "complex-rich", source: "complex", target: "rich_text", label: "Rich Text" },
315+
{ id: "complex-signature", source: "complex", target: "signature", label: "Signature" },
316+
317+
// Regular text paths
318+
{ id: "multiline-textarea", source: "multiline", target: "textarea", label: "Yes" },
319+
{ id: "multiline-text_input", source: "multiline", target: "text_input", label: "No" },
320+
321+
// Special format paths
322+
{ id: "special-email", source: "special_text", target: "email", label: "Email" },
323+
{ id: "special-number", source: "special_text", target: "number", label: "Number" },
324+
{ id: "special-currency", source: "special_text", target: "currency", label: "Currency" },
325+
{ id: "special-phone", source: "special_text", target: "phone", label: "Phone" },
326+
327+
// Selection paths
328+
{ id: "selection-multiple", source: "selection", target: "multiple", label: "Multiple?" },
329+
{ id: "selection-option_count", source: "selection", target: "option_count", label: "Single" },
330+
331+
// Multiple selection paths
332+
{ id: "multiple-checkbox", source: "multiple", target: "checkbox", label: "Simple" },
333+
{ id: "multiple-multiselect", source: "multiple", target: "multi_select", label: "With Search" },
334+
{ id: "multiple-tags", source: "multiple", target: "tag_input", label: "Tags" },
335+
336+
// Single selection paths
337+
{ id: "option_count-radio", source: "option_count", target: "radio", label: "< 5" },
338+
{ id: "option_count-select", source: "option_count", target: "select", label: "> 5" },
339+
340+
// Special input paths
341+
{ id: "special-date", source: "special_input", target: "date", label: "Date" },
342+
{ id: "special-time", source: "special_input", target: "time", label: "Time" },
343+
{ id: "special-file", source: "special_input", target: "file", label: "File" },
344+
{ id: "special-range", source: "special_input", target: "range", label: "Range" },
345+
{ id: "special-color", source: "special_input", target: "color", label: "Color" },
346+
{ id: "special-rating", source: "special_input", target: "rating", label: "Rating" },
347+
{ id: "special-code", source: "special_input", target: "code", label: "Code" },
348+
{ id: "special-toggle", source: "special_input", target: "toggle", label: "Boolean" },
349+
];

‎app/_components/decision-flow/index.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,26 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
4242
const dagreGraph = new dagre.graphlib.Graph()
4343
dagreGraph.setDefaultEdgeLabel(() => ({}))
4444

45-
// Increase spacing between nodes
45+
// Detect if this is the pagination vs infinite scroll flow
46+
const isPaginationFlow = nodes.some(node =>
47+
node.data?.label?.toLowerCase().includes('pagination') ||
48+
node.data?.label?.toLowerCase().includes('infinite scroll')
49+
)
50+
51+
// Set spacing based on flow type
4652
dagreGraph.setGraph({
4753
rankdir: 'TB',
48-
ranksep: 150, // Increased vertical spacing
49-
nodesep: 200, // Increased horizontal spacing
50-
edgesep: 100, // Increased edge spacing
54+
ranksep: isPaginationFlow ? 150 : 75, // More space for pagination flow
55+
nodesep: isPaginationFlow ? 200 : 100, // More horizontal space for pagination
56+
edgesep: isPaginationFlow ? 100 : 50 // More edge space for pagination
5157
})
5258

53-
// Increase node size estimates for better spacing
59+
// Adjust node size based on flow type
5460
nodes.forEach((node) => {
55-
dagreGraph.setNode(node.id, { width: 300, height: 120 })
61+
dagreGraph.setNode(node.id, {
62+
width: isPaginationFlow ? 300 : 250,
63+
height: isPaginationFlow ? 120 : 100
64+
})
5665
})
5766

5867
edges.forEach((edge) => {

0 commit comments

Comments
 (0)