Resolve Typescript Issues 1/2 (#2124)

Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com>

sites/skeleton.dev/src/lib/components/DocsIcon/icons.ts

@@ -3,8 +3,19 @@
     License - https://fontawesome.com/license (Commercial License)
     Copyright 2022 Fonticons, Inc
 */
+export type Icon = {
+	viewBox?: string;
+	path: string;
+};
 
-export const icons: any = {
+export type Icons = {
+	[key: string]: Icon;
+	placeholder: Icon;
+	svelte: Icon;
+	tailwind: Icon;
+};
+
+export const icons: Icons = {
 	// Default Placeholder
 	// Source: https://fontawesome.com/icons/image?s=solid
 	placeholder: {

sites/skeleton.dev/src/lib/layouts/DocsShell/sveldMapper.ts

@@ -7,7 +7,7 @@ export function sveldMapperProps(component: Component): TableSource {
 	const { props } = component.sveld;
 	const propsHeadings = ['Name', 'Type', 'Value', 'Description'];
 	// Filter props with undefined types (exclude getContext)
-	const propsFiltered = props.filter((p: any) => {
+	const propsFiltered = props.filter((p) => {
 		// Filter out Tree View export function props
 		if (['expandAll', 'collapseAll', 'onParentChange'].includes(p.name)) return;
 		// Return all undefined
@@ -20,8 +20,8 @@ export function sveldMapperProps(component: Component): TableSource {
 	}
 	return {
 		head: propsHeadings,
-		body: propsFiltered.map((p: any) => {
-			return [`<code class="code">${p.name}<?code>`, `<em>${p.type}</em>`, cleanValue(p.value), p.description ? p?.description : '-'];
+		body: propsFiltered.map((p) => {
+			return [`<code class="code">${p.name}<?code>`, `<em>${p.type}</em>`, cleanValue(p.value), p.description ? p.description : '-'];
 		})
 	};
 }
@@ -32,7 +32,7 @@ export function sveldMapperSlots(component: Component): TableSource {
 	const slotsHeadings = ['Name', 'Default', 'Fallback', 'Description'];
 	return {
 		head: slotsHeadings,
-		body: slots.map((s: any) => {
+		body: slots.map((s) => {
 			// prettier-ignore
 			return [
 				`<code class="code">${s.name.replaceAll('__', '')}</code>`,
@@ -51,7 +51,7 @@ export function sveldMapperEvents(component: Component): TableSource {
 	const eventsHeadings = ['Name', 'Type', 'Element', 'Response', 'Description'];
 	return {
 		head: eventsHeadings,
-		body: events.map((e: any) => {
+		body: events.map((e) => {
 			// prettier-ignore
 			return [
 				`<code class="code">on:${e.name}</code>`,

sites/skeleton.dev/src/lib/layouts/DocsShell/types.ts

@@ -1,3 +1,5 @@
+import type { SveldJson } from 'sveld-types';
+
 export enum DocsFeature {
 	Element = 'Tailwind',
 	Component = 'Svelte Component',
@@ -22,21 +24,7 @@ export interface Component {
 	/** Provide a list of props that children can override. */
 	overrideProps?: string[];
 	/** Provide the raw component Sveld doc source. */
-	sveld: any; // SveldJson; // FIXME: we need to resolve this type
-}
-
-export interface SveldJson {
-	name?: string;
-	type?: string;
-	description?: string;
-	value?: string;
-	detail?: string;
-	element?: string;
-	tags?: {
-		tag: string;
-		value?: string;
-	}[];
-	[key: string]: unknown;
+	sveld: SveldJson;
 }
 
 export interface DocsShellSettings {

sites/skeleton.dev/src/lib/layouts/DocsThemer/DocsThemer.svelte

@@ -12,7 +12,6 @@
 
 	// Local Utils
 	import { storePreview } from './stores';
-	import { storeTheme } from '$lib/stores/stores';
 	import type { ColorSettings, FormTheme, ContrastReport } from './types';
 	import { inputSettings, fontSettings } from './settings';
 	import { type Palette, generatePalette, generateA11yOnColor, hexValueIsValid, getPassReport } from './colors';

sites/skeleton.dev/src/lib/modals/examples/ModalExampleEmbed.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { SvelteComponent } from 'svelte';
 
-	const modalStore = getModalStore();
+	import { getModalStore } from '@skeletonlabs/skeleton';
 
 	// Props
 	/** Exposes parent props to this component. */
-	export let parent: any;
+	export let parent: SvelteComponent;
+
+	const modalStore = getModalStore();
 
 	// Base Classes
 	const cBase = 'relative w-modal-wide shadow-xl';

sites/skeleton.dev/src/lib/modals/examples/ModalExampleForm.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	// Props
-	/** Exposes parent props to this component. */
-	export let parent: any;
+	import type { SvelteComponent } from 'svelte';
 
 	// Stores
 	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	// Props
+	/** Exposes parent props to this component. */
+	export let parent: SvelteComponent;
+
 	const modalStore = getModalStore();
 
 	// Form Data

sites/skeleton.dev/src/lib/modals/examples/ModalExampleImage.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+	import type { SvelteComponent } from 'svelte';
+
+	// Stores
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
-	export let parent: any;
+	// Props
+	/** Exposes parent props to this component. */
+	export let parent: SvelteComponent;
 
 	const modalStore = getModalStore();
 

sites/skeleton.dev/src/lib/modals/examples/ModalExampleList.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import type { SvelteComponent } from 'svelte';
+
 	import { ListBox, ListBoxItem, getModalStore } from '@skeletonlabs/skeleton';
 
 	// Props
 	/** Exposes parent props to this component. */
-	export let parent: any;
+	export let parent: SvelteComponent;
 
 	// Local
 	let flavor = 'chocolate';

sites/skeleton.dev/src/lib/themes.ts

@@ -1,7 +1,21 @@
 // Preset Themes
+interface Font {
+	url?: string;
+	source: string;
+	name: string;
+	file: string;
+	import: string;
+}
 
-const ghPath = 'https://github.com/skeletonlabs/skeleton/blob/master/src/themes';
-export const themes: any[] = [
+export interface Theme {
+	file: string;
+	name: string;
+	colors: string[];
+	surface: string;
+	fonts: Font[];
+}
+
+export const themes: Theme[] = [
 	// Custom (IMPORTANT: must remain the first option)
 	{
 		file: 'custom',

sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte

@@ -36,7 +36,7 @@
 		return value.includes('@') && value.includes('.');
 	}
 
-	function onInvalidHandler(event: any): void {
+	function onInvalidHandler(event: CustomEvent): void {
 		toastStore.trigger({
 			message: `"${event.detail.input}" is an invalid value. Please try again!`,
 			background: 'variant-filled-error'

sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionThemes.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { storeOnboardMethod } from '$lib/stores/stores';
-	import { themes } from '$lib/themes';
+	import { themes, type Theme } from '$lib/themes';
 	// Components
 	import { CodeBlock } from '@skeletonlabs/skeleton';
 
@@ -15,7 +14,7 @@ plugins: [
 `;
 
 	// Copy Theme Import to Clipboard
-	function setActiveTheme(theme: any): void {
+	function setActiveTheme(theme: Theme): void {
 		activeTheme = theme;
 	}
 </script>

sites/skeleton.dev/src/routes/(inner)/docs/sponsorship/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import LayoutPage from '$lib/layouts/LayoutPage/LayoutPage.svelte';
-	import { Accordion, AccordionItem, Avatar, CodeBlock } from '@skeletonlabs/skeleton';
+	import { Accordion, AccordionItem, Avatar } from '@skeletonlabs/skeleton';
 </script>
 
 <LayoutPage>
@@ -108,7 +108,7 @@
 				<svelte:fragment slot="content">
 					<!-- prettier-ignore -->
 					<p>
-						While your sponsorship is active, you gain access to a <a class="anchor" href="https://github.com/skeletonlabs/skeleton-templates" target="_blank">private GitHub respository</a> containing all available templates.
+						While your sponsorship is active, you gain access to a <a class="anchor" href="https://github.com/skeletonlabs/skeleton-templates" target="_blank">private GitHub repository</a> containing all available templates.
 					</p>
 				</svelte:fragment>
 			</AccordionItem>
@@ -218,7 +218,7 @@
 					<h3 class="h3" data-toc-ignore>Is support available for templates?</h3>
 				</svelte:fragment>
 				<svelte:fragment slot="content">
-					<p>Yes, support is provided through the private GitHub respository, or via our standard Discord support channels.</p>
+					<p>Yes, support is provided through the private GitHub repository, or via our standard Discord support channels.</p>
 				</svelte:fragment>
 			</AccordionItem>
 			<AccordionItem>
@@ -274,18 +274,18 @@
 					<!-- Method 1: CLI -->
 					<h4 class="h4 !mt-4">Method 1: CLI Install</h4>
 					<div class="space-y-4">
-						<p>1. Download the template zip file from the private respository.</p>
-						<p>2. Use NPM (or similiar) to run the CLI and point at the local unzipped template files.</p>
+						<p>1. Download the template zip file from the private repository.</p>
+						<p>2. Use NPM (or similar) to run the CLI and point at the local unzipped template files.</p>
 						<pre class="pre">npm create skeleton-app@latest --skeletontheme=./path/to/unzipped/template/</pre>
 						<p>3. Follow the CLI instructions. Note that <u>Typescript is required</u> for all templates.</p>
 					</div>
 					<!-- Method 2: Basic -->
 					<h4 class="h4 !mt-10">Method 2: Manual Install</h4>
 					<div class="space-y-4">
-						<p>1. Download the template zip file from the private respository.</p>
+						<p>1. Download the template zip file from the private repository.</p>
 						<p>2. Unzip the file and rename the directory as desired. (ex: my-blog)</p>
 						<p>3. Point your terminal at the contents of the unzipped directory.</p>
-						<p>4. Use NPM (or similiar) to install all package depdencies.</p>
+						<p>4. Use NPM (or similar) to install all package dependencies.</p>
 						<pre class="pre">npm install</pre>
 						<p>5. Start your local SvelteKit dev server.</p>
 						<pre class="pre">npm run dev</pre>

sites/skeleton.dev/src/routes/(inner)/docs/sponsorship/licensing/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import LayoutPage from '$lib/layouts/LayoutPage/LayoutPage.svelte';
-	import { Avatar, CodeBlock } from '@skeletonlabs/skeleton';
 </script>
 
 <LayoutPage>

sites/skeleton.dev/src/routes/(inner)/elements/forms/+page.svelte

@@ -5,7 +5,7 @@
 	// Components
 	import { CodeBlock } from '@skeletonlabs/skeleton';
 	// Field Settings
-	import { fieldSettings } from './settings';
+	import { fieldSettings, type InputSettings } from './settings';
 
 	// Docs Shell
 	const settings: DocsShellSettings = {
@@ -31,12 +31,12 @@
 	};
 
 	// Local
-	let currentInput: any = fieldSettings.inputs[0];
+	let currentInput = fieldSettings.inputs[0];
 	let colorValue = '#bada55';
 
-	function mapInputAttributes(obj: any): any {
-		return Object.keys(obj)
-			.map((key: any) => `${key}="${obj[key]}"`)
+	function mapInputAttributes(obj: InputSettings): string {
+		return Object.entries(obj)
+			.map(([key, value]) => `${key}="${value}"`)
 			.join(' ');
 	}
 </script>

sites/skeleton.dev/src/routes/(inner)/elements/forms/settings.ts

@@ -1,19 +1,8 @@
 // Form Field Settings
-export const fieldSettings: {
-	inputs: {
-		title: string;
-		type: HTMLInputElement['type'];
-		placeholder?: string;
-		readonly?: boolean;
-		disabled?: boolean;
-		multiple?: boolean;
-		autocomplete?: string;
-		tabindex?: string;
-	}[];
-} = {
+export const fieldSettings: { inputs: InputSettings[] } = {
 	inputs: [
 		{ title: 'Input (text)', type: 'text', placeholder: 'input text' },
-		{ title: 'Input (readonly)', type: 'text', placeholder: 'input readonly', readonly: true, tabindex: '-1' },
+		{ title: 'Input (readonly)', type: 'text', placeholder: 'input readonly', readonly: true, tabindex: -1 },
 		{ title: 'Input (disabled)', type: 'text', placeholder: 'input disabled', disabled: true },
 		{ title: 'Input (email)', type: 'email', placeholder: 'john@example.com', autocomplete: 'email' },
 		{ title: 'Input (email, multiple)', type: 'email', multiple: true, placeholder: 'john@example.com, susy@example.com' },
@@ -29,3 +18,14 @@ export const fieldSettings: {
 		{ title: 'Input (url)', type: 'url', multiple: true, placeholder: 'example.com' }
 	]
 };
+
+export interface InputSettings {
+	title: string;
+	type: HTMLInputElement['type'];
+	placeholder?: string;
+	readonly?: boolean;
+	disabled?: boolean;
+	multiple?: boolean;
+	autocomplete?: string;
+	tabindex?: number;
+}

sites/skeleton.dev/vite-plugin-sveld/index.d.ts

@@ -66,3 +66,73 @@ declare module '*.svelte?raw&sveld' {
 
 	export default json;
 }
+
+declare module 'sveld-types' {
+	interface SveldProp {
+		name: string;
+		kind: string;
+		type?: string;
+		isFunction: boolean;
+		isFunctionDeclaration: boolean;
+		isRequired: boolean;
+		constant: boolean;
+		reactive: boolean;
+		// added
+		description?: string;
+		value?: string;
+	}
+
+	interface SveldSlot {
+		name: string;
+		default: boolean;
+		fallback: string;
+		slot_props: string;
+		description?: string;
+	}
+
+	interface SveldEvent {
+		type: string;
+		name: string;
+		element: string;
+		description?: string;
+		// added
+		detail?: string;
+	}
+
+	interface SveldRestProps {
+		type: string;
+		name: string;
+	}
+
+	interface SveldTypedefs {
+		type: string;
+		name: string;
+		ts: string;
+	}
+
+	interface SveldModuleExport {
+		name: string;
+		kind: string;
+		type?: string;
+		value: string;
+		isFunction: boolean;
+		isFunctionDeclaration: boolean;
+		isRequired: boolean;
+		constant: boolean;
+		reactive: boolean;
+	}
+
+	interface SveldJson {
+		props: SveldProp[];
+		slots: SveldSlot[];
+		events: SveldEvent[];
+		typedefs: SveldTypedefs[];
+		rest_props: SveldRestProps[];
+		moduleExports: SveldModuleExport[];
+		componentComment?: string;
+		extends?: {
+			interface: string;
+			import: string;
+		};
+	}
+}