Skip to content

Commit 3cdaf7b

Browse files
brettkolodnybrettkolodny
committed
feat: add all form types to snippets
1 parent 8a74059 commit 3cdaf7b

File tree

2 files changed

+192
-59
lines changed

2 files changed

+192
-59
lines changed

‎src/client/Editor.tsx‎

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,15 @@ import {
1414
TooltipTrigger,
1515
} from "@/client/components/Tooltip";
1616
import { useTheme } from "@/client/contexts/theme";
17-
import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
18-
import type { ParameterFormType } from "@/gen/types";
17+
import { snippets } from "@/client/snippets";
1918
import { cn } from "@/utils/cn";
2019
import { Editor as MonacoEditor } from "@monaco-editor/react";
2120
import {
2221
CheckIcon,
2322
ChevronDownIcon,
2423
CopyIcon,
2524
FileJsonIcon,
26-
RadioIcon,
2725
SettingsIcon,
28-
SquareMousePointerIcon,
29-
TextCursorInputIcon,
30-
ToggleLeftIcon,
3126
ZapIcon,
3227
} from "lucide-react";
3328
import { type FC, useEffect, useRef, useState } from "react";
@@ -54,18 +49,6 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
5449
setCodeCopied(() => true);
5550
};
5651

57-
const onAddSnippet = (formType: ParameterFormType) => {
58-
if (formType === "input") {
59-
setCode(`${code.trimEnd()}\n\n${textInput}\n`);
60-
} else if (formType === "radio") {
61-
setCode(`${code.trimEnd()}\n\n${radio}\n`);
62-
} else if (formType === "multi-select") {
63-
setCode(`${code.trimEnd()}\n\n${multiSelect}\n`);
64-
} else if (formType === "switch") {
65-
setCode(`${code.trimEnd()}\n\n${switchInput}\n`);
66-
}
67-
};
68-
6952
useEffect(() => {
7053
if (!codeCopied) {
7154
return;
@@ -116,23 +99,17 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
11699

117100
<DropdownMenuPortal>
118101
<DropdownMenuContent align="start">
119-
<DropdownMenuItem onClick={() => onAddSnippet("input")}>
120-
<TextCursorInputIcon width={24} height={24} />
121-
Text input
122-
</DropdownMenuItem>
123-
<DropdownMenuItem
124-
onClick={() => onAddSnippet("multi-select")}
125-
>
126-
<SquareMousePointerIcon width={24} height={24} />
127-
Multi-select
128-
</DropdownMenuItem>
129-
<DropdownMenuItem onClick={() => onAddSnippet("radio")}>
130-
<RadioIcon width={24} height={24} />
131-
Radio
132-
</DropdownMenuItem>
133-
<DropdownMenuItem onClick={() => onAddSnippet("switch")}>
134-
<ToggleLeftIcon width={24} height={24} /> Switches
135-
</DropdownMenuItem>
102+
{snippets.map(({ label, icon: Icon, snippet }, index) => (
103+
<DropdownMenuItem
104+
key={index}
105+
onClick={() =>
106+
setCode(`${code.trimEnd()}\n\n${snippet()}\n`)
107+
}
108+
>
109+
<Icon size={24} />
110+
{label}
111+
</DropdownMenuItem>
112+
))}
136113
</DropdownMenuContent>
137114
</DropdownMenuPortal>
138115
</DropdownMenu>

‎src/client/snippets.ts‎

Lines changed: 180 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
import {
2+
ChevronDownIcon,
3+
LetterTextIcon,
4+
RadioIcon,
5+
Settings2Icon,
6+
SquareMousePointerIcon,
7+
TagIcon,
8+
TextCursorInputIcon,
9+
ToggleLeftIcon,
10+
} from "lucide-react";
11+
112
export const defaultCode = `terraform {
213
required_providers {
314
coder = {
@@ -7,25 +18,91 @@ export const defaultCode = `terraform {
718
}
819
}`;
920

10-
export const textInput = `data "coder_parameter" "project-name" {
11-
display_name = "An input"
12-
name = "an-input"
13-
description = "What is the name of your project?"
14-
order = 4
21+
type SnippetFunc = (name?: string, order?: number) => string;
22+
type Snippet = {
23+
label: string;
24+
icon: typeof RadioIcon;
25+
snippet: SnippetFunc;
26+
};
27+
28+
export const input: SnippetFunc = (
29+
name = "input",
30+
order = 1,
31+
) => `data "coder_parameter" "text-input" {
32+
name = "${name}"
33+
display_name = "A text input"
34+
description = "This parameter can be used to input text."
35+
order = ${order}
1536
1637
form_type = "input"
1738
type = "string"
1839
default = "An input value"
1940
}`;
2041

21-
export const radio = `data "coder_parameter" "radio" {
22-
name = "radio"
23-
display_name = "An example of a radio input"
24-
description = "The next parameter supports a single value."
25-
type = "string"
26-
form_type = "radio"
27-
order = 1
28-
default = "option-1"
42+
export const textarea: SnippetFunc = (
43+
name = "textarea",
44+
order = 1,
45+
) => `data "coder_parameter" "textarea" {
46+
name = "${name}"
47+
display_name = "A textarea input"
48+
description = "This parameter can be used to input multiple lines of text"
49+
order = ${order}
50+
51+
form_type = "textarea"
52+
type = "string"
53+
default = "An input value"
54+
}`;
55+
56+
export const radio: SnippetFunc = (
57+
name = "radio",
58+
order = 1,
59+
) => `data "coder_parameter" "radio" {
60+
name = "${name}"
61+
display_name = "A radio input"
62+
description = "This parameter supports selecting a single value out of a list of options"
63+
order = ${order}
64+
65+
type = "string"
66+
form_type = "radio"
67+
default = "option-1"
68+
69+
option {
70+
name = "Option 1"
71+
value = "option-1"
72+
description = "A description for Option 1"
73+
}
74+
75+
option {
76+
name = "Option 2"
77+
value = "option-2"
78+
description = "A description for Option 2"
79+
}
80+
81+
option {
82+
name = "Option 3"
83+
value = "option-3"
84+
description = "A description for Option 3"
85+
}
86+
87+
option {
88+
name = "Option 4"
89+
value = "option-4"
90+
description = "A description for Option 4"
91+
}
92+
}`;
93+
94+
export const dropdown: SnippetFunc = (
95+
name = "dropdown",
96+
order = 1,
97+
) => `data "coder_parameter" "dropdown" {
98+
name = "${name}"
99+
display_name = "A dropdown input"
100+
description = "This parameter supports selecting a single value out of a list of options. Especially useful when you have a lot of options."
101+
order = ${order}
102+
103+
type = "string"
104+
form_type = "dropdown"
105+
default = "option-1"
29106
30107
option {
31108
name = "Option 1"
@@ -52,13 +129,16 @@ export const radio = `data "coder_parameter" "radio" {
52129
}
53130
}`;
54131

55-
export const multiSelect = `data "coder_parameter" "multi-select" {
56-
name = "multi-select"
57-
display_name = "An example of a multi-select"
58-
description = "The next parameter supports multiple values."
132+
export const multiSelect: SnippetFunc = (
133+
name = "multi-select",
134+
order = 1,
135+
) => `data "coder_parameter" "multi-select" {
136+
name = "${name}"
137+
display_name = "A multi-select input"
138+
description = "This parameter supports selecting multiple values from a list of options"
59139
type = "list(string)"
60140
form_type = "multi-select"
61-
order = 1
141+
order = ${order}
62142
63143
option {
64144
name = "Option 1"
@@ -85,15 +165,91 @@ export const multiSelect = `data "coder_parameter" "multi-select" {
85165
}
86166
}`;
87167

88-
export const switchInput = `data "coder_parameter" "switch" {
89-
name = "switch"
90-
display_name = "An example of a switch"
91-
description = "The next parameter can be on or off"
168+
export const tagSelect: SnippetFunc = (
169+
name = "tag-select",
170+
order = 1,
171+
) => `data "coder_parameter" "tag-select" {
172+
name = "${name}"
173+
display_name = "A tag-select input"
174+
description = "This parameter supports selecting multiple user inputed values at once"
175+
type = "list(string)"
176+
form_type = "tag-select"
177+
order = ${order}
178+
}`;
179+
180+
export const switchInput: SnippetFunc = (
181+
name = "switch",
182+
order = 1,
183+
) => `data "coder_parameter" "switch" {
184+
name = "${name}"
185+
display_name = "A switch input"
186+
description = "This parameter can be toggled between true and false"
92187
type = "bool"
93188
form_type = "switch"
94189
default = true
95-
order = 1
96-
}`
190+
order = ${order}
191+
}`;
192+
193+
export const slider: SnippetFunc = (
194+
name = "slider",
195+
order = 1,
196+
) => `data "coder_parameter" "slider" {
197+
name = "${name}"
198+
display_name = "A slider input"
199+
description = "This parameter supports selecting a number within a given range"
200+
type = "number"
201+
form_type = "slider"
202+
default = 6
203+
order = ${order}
204+
205+
validation {
206+
min = 1
207+
max = 10
208+
}
209+
}`;
210+
211+
export const snippets: Snippet[] = [
212+
{
213+
label: "Text Input",
214+
icon: TextCursorInputIcon,
215+
snippet: input,
216+
},
217+
{
218+
label: "Textarea",
219+
icon: LetterTextIcon,
220+
snippet: textarea,
221+
},
222+
{
223+
label: "Radio",
224+
icon: RadioIcon,
225+
snippet: radio,
226+
},
227+
{
228+
label: "Multi-select",
229+
icon: SquareMousePointerIcon,
230+
snippet: multiSelect,
231+
},
232+
{
233+
label: "Tag-select",
234+
icon: TagIcon,
235+
snippet: tagSelect,
236+
},
237+
{
238+
label: "Switch",
239+
icon: ToggleLeftIcon,
240+
snippet: switchInput,
241+
},
242+
{
243+
label: "Dropdown",
244+
icon: ChevronDownIcon,
245+
snippet: dropdown,
246+
},
247+
{
248+
label: "Slider",
249+
icon: Settings2Icon,
250+
snippet: slider,
251+
},
252+
];
97253

98254
export const checkerModule = `
99255
variable "solutions" {

0 commit comments

Comments
 (0)