Convert CreateEditVariableModal.svelte

packages/bbui/src/Form/Core/TextField.svelte

@@ -13,7 +13,7 @@
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus: boolean | null = false
-  export let autocomplete: boolean | undefined
+  export let autocomplete: boolean | string | undefined
 
   const dispatch = createEventDispatcher()
 

packages/bbui/src/Form/Input.svelte

@@ -14,7 +14,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
-  export let autocomplete: boolean | undefined = undefined
+  export let autocomplete: boolean | string | undefined = undefined
   export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()

packages/bbui/src/context.d.ts

@@ -1,7 +1,9 @@
 import { ActionMenu } from "./types"
+import { ModalContext } from "./types"
 
 declare module "svelte" {
   export function getContext(key: "actionMenu"): ActionMenu | undefined
+  export function getContext(key: "bbui-modal"): ModalContext
 }
 
 export const Modal = "bbui-modal"

packages/bbui/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./actionMenu"
+export * from "./modalContext"

packages/bbui/src/types/modalContext.ts

@@ -0,0 +1,3 @@
+export interface ModalContext {
+  hide: () => void
+}

packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {
     ModalContent,
     Button,
@@ -14,23 +14,23 @@
 
   const modalContext = getContext(Context.Modal)
 
-  export let save
+  export let save: any
-  export let row
+  export let row: any
 
-  let deleteDialog
+  let deleteDialog: ConfirmDialog
   let name = row?.name || ""
-  let productionValue
+  let productionValue: string
-  let developmentValue
+  let developmentValue: string
   let useProductionValue = true
 
   const HasSpacesRegex = /[\\"\s]/
 
-  const deleteVariable = async name => {
+  const deleteVariable = async (name: string) => {
     try {
       await environment.deleteVariable(name)
       modalContext.hide()
       notifications.success("Environment variable deleted")
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(err.message)
     }
   }
@@ -43,7 +43,7 @@
         development: developmentValue,
       })
       notifications.success("Environment variable saved")
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(`Error saving environment variable - ${err.message}`)
     }
   }
@@ -58,7 +58,7 @@
     disabled={row}
     label="Name"
     bind:value={name}
-    error={HasSpacesRegex.test(name) && "Must not include spaces"}
+    error={HasSpacesRegex.test(name) ? "Must not include spaces" : undefined}
   />
   <div>
     <Heading size="XS">Production</Heading>