Merge pull request #12 from coder/brett/snippets

feat: add snippets and fix component styling

Author: brettkolodny

preview/scripts/types/main.go

@@ -43,7 +43,12 @@ func main() {
 }
 
 ts, err := gen.ToTypescript()
-ts.ApplyMutations(config.ExportTypes, config.NullUnionSlices, config.SimplifyOmitEmpty)
+ts.ApplyMutations(
+config.ExportTypes,
+config.NullUnionSlices,
+config.SimplifyOmitEmpty,
+config.EnumAsTypes,
+)
 
 if err != nil {
 log.Fatalf("to typescript: %v", err)

src/client/Editor.tsx

@@ -15,7 +15,6 @@ import {
 } from "@/client/components/Tooltip";
 import { useStore } from "@/client/store";
 import {
-BookIcon,
 CheckIcon,
 ChevronDownIcon,
 CopyIcon,
@@ -25,8 +24,9 @@ import {
 SquareMousePointerIcon,
 TextCursorInputIcon,
 ToggleLeftIcon,
+ZapIcon,
 } from "lucide-react";
-import { type FC, useEffect, useRef, useState } from "react";
+import { type FC, useCallback, useEffect, useRef, useState } from "react";
 import CodeEditor from "react-simple-code-editor";
 
 // The following imports can't be re-ordered otherwise things break
@@ -35,6 +35,8 @@ import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-hcl";
 import "prismjs/themes/prism.css";
 import { cn } from "@/utils/cn";
+import type { ParameterFormType } from "@/gen/types";
+import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
 
 // Adds line numbers to the highlight.
 const hightlightWithLineNumbers = (input: string, language: unknown) =>
@@ -62,6 +64,20 @@ export const Editor: FC = () => {
 setCodeCopied(() => true);
 };
 
+const onAddSnippet = useCallback(
+(formType: ParameterFormType) => {
+if (formType === "input") {
+$setCode(`${$code.trimEnd()}\n\n${textInput}\n`);
+} else if (formType === "radio") {
+$setCode(`${$code.trimEnd()}\n\n${radio}\n`);
+} else if (formType === "multi-select") {
+$setCode(`${$code.trimEnd()}\n\n${multiSelect}\n`);
+} else if (formType === "switch") {
+$setCode(`${$code.trimEnd()}\n\n${switchInput}\n`);
+}
+},
+[$code, $setCode],
+);
 
 useEffect(() => {
 if (!codeCopied) {
@@ -105,27 +121,29 @@ export const Editor: FC = () => {
 <DropdownMenu>
 <DropdownMenuTrigger className="flex w-fit min-w-[140px] cursor-pointer items-center justify-between rounded-md border bg-surface-primary px-2 py-1.5 text-content-secondary transition-colors hover:text-content-primary data-[state=open]:text-content-primary">
 <div className="flex items-center justify-center gap-2">
-<BookIcon width={18} height={18} />
-<p className="text-xs">Examples</p>
+<ZapIcon width={18} height={18} />
+<p className="text-xs">Snippets</p>
 </div>
 <ChevronDownIcon width={18} height={18} />
 </DropdownMenuTrigger>
 
 <DropdownMenuPortal>
 <DropdownMenuContent align="start">
-<DropdownMenuItem>
+<DropdownMenuItem onClick={() => onAddSnippet("input")}>
 <TextCursorInputIcon width={24} height={24} />
 Text input
 </DropdownMenuItem>
-<DropdownMenuItem>
+<DropdownMenuItem
+onClick={() => onAddSnippet("multi-select")}
+>
 <SquareMousePointerIcon width={24} height={24} />
 Multi-select
 </DropdownMenuItem>
-<DropdownMenuItem>
+<DropdownMenuItem onClick={() => onAddSnippet("radio")}>
 <RadioIcon width={24} height={24} />
 Radio
 </DropdownMenuItem>
-<DropdownMenuItem>
+<DropdownMenuItem onClick={() => onAddSnippet("switch")}>
 <ToggleLeftIcon width={24} height={24} /> Switches
 </DropdownMenuItem>
 </DropdownMenuContent>

src/client/components/Markdown.tsx

@@ -46,6 +46,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 p: ({ children }) => {
 return <p className="text-xs">{children}</p>;
 },
+
 a: ({ href, children }) => {
 const isExternal = href?.startsWith("http");
 
@@ -56,6 +57,8 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 );
 },
 
+hr: () => <hr className="my-3"/>,
+
 pre: ({ node, children }) => {
 if (!node || !node.children) {
 return <pre>{children}</pre>;
@@ -92,6 +95,13 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 );
 },
 
+ul: ({ children }) => {
+return <ul className="list-inside list-disc">{children}</ul>;
+},
+li: ({ children }) => {
+return <li className="text-sm">{children}</li>;
+},
+
 table: ({ children }) => {
 return <Table>{children}</Table>;
 },
@@ -117,27 +127,27 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 },
 
 h1: ({ children }) => {
-return <h1 className="mt-8 mb-4 font-bold text-lg">{children}</h1>;
+return <h1 className="my-3 font-bold text-xl">{children}</h1>;
 },
 
 h2: ({ children }) => {
-return <h2 className="mt-8 mb-4">{children}</h2>;
+return <h2 className="my-2 font-semibold">{children}</h2>;
 },
 
 h3: ({ children }) => {
-return <h3 className="mt-8 mb-4">{children}</h3>;
+return <h3 className="my-2 font-medium">{children}</h3>;
 },
 
 h4: ({ children }) => {
-return <h4 className="mt-8 mb-4">{children}</h4>;
+return <h4 className="">{children}</h4>;
 },
 
 h5: ({ children }) => {
-return <h5 className="mt-8 mb-4">{children}</h5>;
+return <h5 className="">{children}</h5>;
 },
 
 h6: ({ children }) => {
-return <h6 className="mt-8 mb-4">{children}</h6>;
+return <h6 className="">{children}</h6>;
 },
 
 /**

src/client/components/MultiSelectCombobox.tsx

@@ -460,7 +460,7 @@ export const MultiSelectCombobox = forwardRef<
 {/* biome-ignore lint/a11y/useKeyWithClickEvents: onKeyDown is not needed here */}
 <div
 className={cn(
-"min-h-10 rounded-md border border-border border-solid pr-3 text-sm focus-within:ring-2 focus-within:ring-content-link",
+"h-10 min-h-10 rounded-md border border-border border-solid pr-3 text-sm focus-within:ring-2 focus-within:ring-content-link",
 {
 "py-1 pl-3": selected.length !== 0,
 "cursor-text": !disabled && selected.length !== 0,
@@ -472,7 +472,7 @@ export const MultiSelectCombobox = forwardRef<
 inputRef?.current?.focus();
 }}
 >
-<div className="flex items-center justify-between">
+<div className="flex items-center justify-between h-full">
 <div className="relative flex flex-wrap gap-1">
 {selected.map((option) => {
 return (
@@ -540,7 +540,7 @@ export const MultiSelectCombobox = forwardRef<
 "flex-1 border-none bg-transparent outline-none placeholder:text-content-secondary",
 {
 "w-full": hidePlaceholderWhenSelected,
-"px-3 py-2.5": selected.length === 0,
+"px-3": selected.length === 0,
 "ml-1": selected.length !== 0,
 },
 inputProps?.className,
@@ -562,7 +562,7 @@ export const MultiSelectCombobox = forwardRef<
 }
 }}
 className={cn(
-"mt-1 cursor-pointer rounded-sm border-none bg-transparent text-content-secondary outline-none hover:text-content-primary focus:ring-2 focus:ring-content-link",
+"cursor-pointer rounded-sm border-none bg-transparent text-content-secondary outline-none hover:text-content-primary focus:ring-2 focus:ring-content-link",
 (hideClearAllButton ||
 disabled ||
 selected.length < 1 ||

src/client/components/Switch.tsx

@@ -20,7 +20,7 @@ export const Switch = forwardRef<
 >
 <SwitchPrimitives.Thumb
 className={cn(
-"data-[state=unchecked]:-translate-x-1.5 pointer-events-none block h-4 w-4 rounded-full bg-surface-primary shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-2.5",
+"pointer-events-none block h-4 w-4 rounded-full bg-surface-primary shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4",
 )}
 />
 </SwitchPrimitives.Root>

src/client/snippets.ts

@@ -0,0 +1,95 @@
+export const defaultCode = `terraform {
+ required_providers {
+ coder = {
+ source = "coder/coder"
+ }
+ }
+}`;
+
+export const textInput = `data "coder_parameter" "project-name" {
+ display_name = "An input"
+ name = "an-input"
+ description = "What is the name of your project?"
+ order = 1
+
+ form_type = "input"
+ type = "string"
+ default = "An input value"
+}`;
+
+export const radio = `data "coder_parameter" "radio" {
+ name = "radio"
+ display_name = "An example of a radio input"
+ description = "The next parameter supports a single value."
+ type = "string"
+ form_type = "radio"
+ order = 1
+ default = "option-1"
+
+ option {
+ name = "Option 1"
+ value = "option-1"
+ description = "A description for Option 1"
+ }
+
+ option {
+ name = "Option 2"
+ value = "option-2"
+ description = "A description for Option 2"
+ }
+
+ option {
+ name = "Option 3"
+ value = "option-3"
+ description = "A description for Option 3"
+ }
+
+ option {
+ name = "Option 4"
+ value = "option-4"
+ description = "A description for Option 4"
+ }
+}`;
+
+export const multiSelect = `data "coder_parameter" "multi-select" {
+ name = "multi-select"
+ display_name = "An example of a multi-select"
+ description = "The next parameter supports multiple values."
+ type = "list(string)"
+ form_type = "multi-select"
+ order = 1
+
+ option {
+ name = "Option 1"
+ value = "option-1"
+ description = "A description for Option 1"
+ }
+
+ option {
+ name = "Option 2"
+ value = "option-2"
+ description = "A description for Option 2"
+ }
+
+ option {
+ name = "Option 3"
+ value = "option-3"
+ description = "A description for Option 3"
+ }
+
+ option {
+ name = "Option 4"
+ value = "option-4"
+ description = "A description for Option 4"
+ }
+}`;
+
+export const switchInput = `data "coder_parameter" "switch" {
+ name = "switch"
+ display_name = "An example of a switch"
+ description = "The next parameter can be on or off"
+ type = "bool"
+ form_type = "switch"
+ defalt = true
+ order = 1
+}`

src/client/store.tsx

@@ -1,14 +1,7 @@
 import { create } from "zustand";
 import type { Diagnostic } from "@/client/diagnostics";
 import type { Parameter } from "@/gen/types";
-
-const defaultCode = `terraform {
- required_providers {
- coder = {
- source = "coder/coder"
- }
- }
-}`;
+import { defaultCode } from "./snippets";
 
 type FormState = Record<string, string>;
 

src/gen/types.ts

@@ -40,12 +40,7 @@ export interface NullHCLString {
 }
 
 // From apitypes/apitypes.go
-export enum OptionType {
- OptionTypeBoolean = "bool",
- OptionTypeListString = "list(string)",
- OptionTypeNumber = "number",
- OptionTypeString = "string"
-}
+export type OptionType = "bool" | "list(string)" | "number" | "string";
 
 // From preview/preview.go
 export interface Output {
@@ -80,19 +75,7 @@ export interface ParameterData {
 }
 
 // From provider/formtype.go
-export enum ParameterFormType {
- ParameterFormTypeCheckbox = "checkbox",
- ParameterFormTypeDefault = "",
- ParameterFormTypeDropdown = "dropdown",
- ParameterFormTypeError = "error",
- ParameterFormTypeInput = "input",
- ParameterFormTypeMultiSelect = "multi-select",
- ParameterFormTypeRadio = "radio",
- ParameterFormTypeSlider = "slider",
- ParameterFormTypeSwitch = "switch",
- ParameterFormTypeTagSelect = "tag-select",
- ParameterFormTypeTextArea = "textarea"
-}
+export type ParameterFormType = "checkbox" | "" | "dropdown" | "error" | "input" | "multi-select" | "radio" | "slider" | "switch" | "tag-select" | "textarea";
 
 // From types/parameter.go
 export interface ParameterOption {

tsconfig.app.json

@@ -27,7 +27,7 @@
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
- "erasableSyntaxOnly": false,
+ "erasableSyntaxOnly": true,
  "noFallthroughCasesInSwitch": true,
  "noUncheckedSideEffectImports": false
  },

tsconfig.json

@@ -1,6 +1,6 @@
 {
  "files": [],
- "erasableSyntaxOnly": false,
+ "erasableSyntaxOnly": true,
  "references": [
  {
  "path": "./tsconfig.app.json"