Enable lint in worflow and format all files

.changeset/README.md

@@ -1,8 +1,5 @@
 # Changesets
 
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package repos, or single-package repos to help you version and publish your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets)
 
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
+We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -1,9 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": [
-    "@svitejs/changesets-changelog-github-compact",
-    { "repo": "themesberg/flowbite-svelte" }
-  ],
+  "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "themesberg/flowbite-svelte" }],
   "commit": false,
   "fixed": [],
   "linked": [],

.github/workflows/playwright-and-lint.yaml

@@ -23,9 +23,10 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm i
+      - name: Run lint
+        run: pnpm lint
       - name: Run playwright tests
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
           FATHOM_ID: 'ABCDEFGF'
         run: pnpm test:integration
-

.prettierignore

@@ -15,4 +15,4 @@ yarn.lock
 playwright-report
 .vercel
 
-/src/routes/**/*.md
+**/*.md

README.md

@@ -468,7 +468,6 @@ Please read [how to contribute](https://github.com/themesberg/flowbite-svelte/bl
 
 View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md) on this page.
 
-
 ## License
 
 Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).

eslint.config.mjs

@@ -0,0 +1,59 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import parser from 'svelte-eslint-parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+});
+
+export default [
+  {
+    ignores: ['**/*.cjs', '.vercel/', '.svelte-kit/']
+  },
+  ...compat.extends('eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:svelte/recommended'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint
+    },
+
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+
+      // TODO: Enable this rule
+      '@typescript-eslint/no-explicit-any': 'off'
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: 'module'
+    }
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parser: parser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  }
+];

package.json

@@ -36,6 +36,8 @@
     "@changesets/cli": "^2.27.7",
     "@docsearch/css": "^3.6.1",
     "@docsearch/js": "^3.6.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.9.0",
     "@playwright/test": "^1.46.0",
     "@sveltejs/adapter-vercel": "^5.4.3",
     "@sveltejs/kit": "^2.5.22",
@@ -52,6 +54,7 @@
     "flowbite-svelte": "^0.46.15",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
+    "globals": "^15.9.0",
     "mdsvex": "^0.11.2",
     "mdsvexamples": "^0.4.1",
     "postcss": "^8.4.41",
@@ -759,4 +762,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}

src/lib/accordion/Accordion.svelte

@@ -14,17 +14,7 @@
 <script lang="ts">
   import Frame from '$lib/utils/Frame.svelte';
   import { twMerge } from 'tailwind-merge';
-  import { setContext, type ComponentProps } from 'svelte';
-
-  interface $$Props extends ComponentProps<Frame> {
-    multiple?: boolean;
-    flush?: boolean;
-    activeClass?: string;
-    inactiveClass?: string;
-    defaultClass?: string;
-    classActive?: string;
-    classInactive?: string;
-  }
+  import { setContext } from 'svelte';
 
   export let multiple: boolean = false;
   export let flush: boolean = false;

src/lib/accordion/AccordionItem.svelte

@@ -2,7 +2,7 @@
   import { twMerge } from 'tailwind-merge';
   import { getContext, onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import { fade, blur, fly, slide } from 'svelte/transition';
+  import { fade, blur, fly, slide, type BlurParams, type FlyParams, type FadeParams, type SlideParams } from 'svelte/transition';
   import type { TransitionTypes, TransitionParamTypes } from '../types';
   import type { AccordionCtxType } from './Accordion.svelte';
 
@@ -29,16 +29,16 @@
   let inactiveCls = twMerge(inactiveClass, classInactive);
 
   // make a custom transition function that returns the desired transition
-  const multiple = (node: HTMLElement, params: any) => {
+  const multiple = (node: HTMLElement, params: unknown) => {
     switch (transitionType) {
       case 'blur':
-        return blur(node, params);
+        return blur(node, params as BlurParams);
       case 'fly':
-        return fly(node, params);
+        return fly(node, params as FlyParams);
       case 'fade':
-        return fade(node, params);
+        return fade(node, params as FadeParams);
       default:
-        return slide(node, params);
+        return slide(node, params as SlideParams);
     }
   };
 
@@ -58,7 +58,7 @@
     return selected.subscribe((x) => (open = x === self));
   });
 
-  const handleToggle = (_: Event) => selected.set(open ? {} : self);
+  const handleToggle = () => selected.set(open ? {} : self);
 
   let buttonClass: string;
   $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);

src/lib/alert/Alert.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
   import TransitionFrame from '$lib/utils/TransitionFrame.svelte';
-  import type { ComponentProps } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import CloseButton from '../utils/CloseButton.svelte';
 
-  interface $$Props extends ComponentProps<TransitionFrame> {
-    defaultClass?: string;
-  }
-
   export let dismissable: boolean = false;
   export let defaultClass: string = 'p-4 gap-3 text-sm';
 

src/lib/badge/Badge.svelte

@@ -3,52 +3,42 @@
   import { twMerge } from 'tailwind-merge';
   import { CloseButton } from '$lib';
   import type { ColorVariant } from '../types';
-  import { fade, type TransitionConfig } from 'svelte/transition';
-  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+  import { fade } from 'svelte/transition';
   const dispatcher = createEventDispatcher();
-  
-  export let color: ColorVariant = 'primary'
-  export let large: boolean = false
-  export let dismissable: boolean = false
-  export let border: boolean = false
-  export let href: string = ''
-  export let rounded: boolean = false
-  export let transition = fade
-  export let params = {}
+
+  export let color: ColorVariant = 'primary';
+  export let large: boolean = false;
+  export let dismissable: boolean = false;
+  export let border: boolean = false;
+  export let href: string = '';
+  export let rounded: boolean = false;
+  export let transition = fade;
+  export let params = {};
 
   let badgeStatus: boolean = true;
 
   const colors = {
-    primary:
-      'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
+    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
     red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
     green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
-    yellow:
-      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
-    indigo:
-      'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
-    purple:
-      'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
     pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
     none: ''
   };
 
   const borderedColors = {
-    primary:
-      'bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400',
+    primary: 'bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-400 dark:border-gray-400',
     blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400 dark:border-blue-400',
     red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400 dark:border-red-400',
-    green:
-      'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400',
-    yellow:
-      'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300',
-    indigo:
-      'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400',
-    purple:
-      'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400 dark:border-purple-400',
+    green: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400 dark:border-purple-400',
     pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400 dark:border-pink-400',
     none: ''
   };
@@ -68,18 +58,10 @@
 
   const close = () => {
     badgeStatus = false;
-  }
-  const baseClass: string =
-    'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
+  };
+  const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
 
-  let badgeClass: string = twMerge(
-    baseClass,
-    large ? 'text-sm' : 'text-xs',
-    border ? `border ${borderedColors[color]}` : colors[color],
-    href && hoverColors[color],
-    rounded ? 'rounded-full' : 'rounded',
-    $$restProps.class
-  );
+  let badgeClass: string = twMerge(baseClass, large ? 'text-sm' : 'text-xs', border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? 'rounded-full' : 'rounded', $$restProps.class);
 </script>
 
 {#if badgeStatus}
@@ -101,8 +83,7 @@
           on:click={() => {
             badgeStatus = false;
             dispatcher('close');
-          }}
-        />
+          }} />
       </slot>
     {/if}
   </div>