add svelte-check and resolve all errors

package.json

@@ -28,7 +28,8 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "format": "npm run prettier && npm run lint:fix",
-    "prettier": "prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss src"
+    "prettier": "prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss src",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.3.3",
@@ -40,6 +41,7 @@
     "@storybook/svelte-vite": "^8.3.3",
     "@sveltejs/package": "^2.3.5",
     "@sveltejs/vite-plugin-svelte": "^2.5.3",
+    "@tsconfig/svelte": "^5.0.4",
     "@typescript-eslint/parser": "^8.8.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.50.0",
@@ -55,12 +57,14 @@
     "storybook": "^8.3.3",
     "stylelint": "^15.10.0",
     "stylelint-config-standard": "^31.0.0",
+    "svelte-check": "^4.1.0",
     "svelte-loader": "^3.2.3",
     "tailwindcss": "^3.3.0",
     "typescript-eslint": "^8.8.0",
     "vite": "^4.4.9"
   },
   "dependencies": {
+    "@melt-ui/svelte": "^0.86.2",
     "@storybook/addons": "^7.6.17",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",

src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svelte' {
+  import { SvelteComponentTyped } from 'svelte';
+  export default class SvelteComponent extends SvelteComponentTyped {}
+}

src/lib/atoms/FormElement.svelte

@@ -4,13 +4,11 @@
   export let label = '';
   export let isRequired = false;
   export let description = '';
-  export let value: string = '';
-  export let placeholder = 'Enter some text...';
   export let error: string | undefined;
 </script>
 
 <div class="flex flex-col gap-f4">
-  <label class="form-item-label">
+  <label class="form-item-label" for="form-element">
     {label}
     {#if isRequired}
       <span class="text-error">*</span>
@@ -21,7 +19,7 @@
     <span class="form-item-description">{description}</span>
   {/if}
 
-  <div class="flex items-center gap-f12">
+  <div class="flex items-center gap-f12" id="form-element">
     <slot />
 
     {#if error}

src/lib/atoms/Input.svelte

@@ -10,7 +10,7 @@
   export let error: string | undefined;
 </script>
 
-<FormElement {label} {isRequired} {description} {value} {placeholder} {error}>
+<FormElement {label} {isRequired} {description} {error}>
   <input
     class={cn(
       'border-input aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground sm flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border bg-white px-3 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',

src/lib/atoms/Select.svelte

@@ -2,10 +2,10 @@
   import { Root, Trigger, Value, Content, Item, Label } from '../shadcnComponents/ui/select';
 
   export let label: string;
-  export let description: string | undefined;
+  export let description: string | undefined = undefined;
   export let placeholder: string | undefined;
   export let isRequired: boolean = false;
-  export let error: string | undefined;
+  export let error: string | undefined = undefined;
   export let options: { optionLabel: string; value: string }[];
 </script>
 

src/lib/atoms/Textarea.svelte

@@ -10,7 +10,7 @@
   export let error: string | undefined;
 </script>
 
-<FormElement {label} {isRequired} {description} {value} {placeholder} {error}>
+<FormElement {label} {isRequired} {description} {error}>
   <textarea
     class={cn(
       'border-input aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground sm flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border bg-white px-3 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',

src/lib/features/Header.stories.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Meta, Story } from '@storybook/addon-svelte-csf';
   import Header from './Header.svelte';
-  import { MenuItem } from '../utils/types.js';
+  import type { MenuItem } from '../utils/types.js';
 
   const menuItems: MenuItem[] = [
     { label: 'Mission', href: '#mission', viewportHighlightId: 'mission' },

src/lib/features/Header.svelte

@@ -2,7 +2,7 @@
   import { FrequencyLogo } from '../assets/index';
   import NavMenu from './NavMenu.svelte';
   import NavMenuMobile from './NavMenuMobile.svelte';
-  import { MenuItem } from '$lib/utils/types.js';
+  import type { MenuItem } from '$lib/utils/types.js';
   import { cn } from '../utils/utils.js';
 
   export let logoLink = '';

src/lib/features/Modal.svelte

@@ -2,7 +2,7 @@
   import { Root, Trigger, Content, Header, Title, Description } from '../shadcnComponents/ui/dialog';
 
   export let title = '';
-  export let description;
+  export let description = '';
 </script>
 
 <Root>

src/lib/features/NavMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   // Note: Shows the buttons still in md view, but not the non-buttons
   import { onMount, tick } from 'svelte';
-  import { MenuItem } from '../utils/types.js';
+  import type { MenuItem } from '../utils/types.js';
   import Button from '../atoms/Button.svelte';
 
   export let menuItems: MenuItem[] = [];
@@ -69,7 +69,7 @@
   {/each}
 </nav>
 
-<style>
+<style lang="postcss">
   /* Underline on hover animation */
   .underline-on-nav-hover,
   .underline-on-nav {

src/lib/features/NavMenuMobile.svelte

@@ -2,7 +2,7 @@
   // Note: Menu "Buttons" are shown on the nav bar in "md" view
 
   import { OpenClose } from '../assets/index';
-  import { MenuItem } from '$lib/utils/types.js';
+  import type { MenuItem } from '$lib/utils/types.js';
   import Button from '../atoms/Button.svelte';
 
   export let menuItems: MenuItem[] = [];

tsconfig.json

@@ -1,4 +1,6 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "types": ["svelte"],
   "compilerOptions": {
     "paths": {
       "$src": [
@@ -30,7 +32,5 @@
     "outDir": "dist",
     "declaration": true
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }