fix: update prettier and eslint configs

.eslintrc.cjs

@@ -1,24 +1,17 @@
-/** @type { import("eslint").Linter.Config } */
+/** @type { import('eslint').Linter.Config } */
 module.exports = {
 	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
 	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2020,
 		extraFileExtensions: ['.svelte']
 	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
+	extends: [
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/prettier',
+		'plugin:prettier/recommended'
+	],
 	rules: {
 		'no-unused-vars': 'off',
 		'@typescript-eslint/no-unused-vars': [

.prettierrc

@@ -4,6 +4,14 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"endOfLine": "lf",
+	"tabWidth": 4,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

README.md

@@ -4,9 +4,9 @@
 
 #### Requirements:
 
-- [Node 20](https://nodejs.org/)
-- [pnpm](https://pnpm.io/)
-- [dvalin-backend](https://github.com/dval-in/dvalin-backend)
+-   [Node 20](https://nodejs.org/)
+-   [pnpm](https://pnpm.io/)
+-   [dvalin-backend](https://github.com/dval-in/dvalin-backend)
 
 #### Steps:
 

package.json

@@ -51,6 +51,7 @@
 		"autoprefixer": "^10.4.16",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-svelte": "^2.35.1",
 		"husky": "^9.0.11",
 		"postcss": "^8.4.32",

src/lib/components/graphs/PullDistributionByMonth.svelte

@@ -63,7 +63,8 @@
 		);
 	};
 
-	const formatDateLabel = (d: string) => formatDate(d, PeriodType.MonthYear, { variant: 'short' });
+	const formatDateLabel = (d: string) =>
+		formatDate(d, PeriodType.MonthYear, { variant: 'short' });
 </script>
 
 <div class="h-[350px] w-full">
@@ -87,7 +88,12 @@
 	>
 		<Svg>
 			<Axis grid labelProps={{ class: 'fill-text' }} placement="left" rule />
-			<Axis format={formatDateLabel} labelProps={{ class: 'fill-text' }} placement="bottom" rule />
+			<Axis
+				format={formatDateLabel}
+				labelProps={{ class: 'fill-text' }}
+				placement="bottom"
+				rule
+			/>
 			<AreaStack let:data>
 				{#each data as seriesData}
 					<Area
@@ -97,7 +103,13 @@
 						fill={colorKeys.at(seriesData.key - 3)}
 						fill-opacity={0.5}
 					/>
-					<RectClipPath x={0} y={0} width={tooltip.data ? tooltip.x : width} {height} spring>
+					<RectClipPath
+						x={0}
+						y={0}
+						width={tooltip.data ? tooltip.x : width}
+						{height}
+						spring
+					>
 						<Area
 							data={seriesData}
 							y0={(d) => d[0]}
@@ -137,7 +149,10 @@
 			<div class="flex flex-col gap-2 justify-center items-start">
 				{#each keys as key}
 					<div class="flex gap-1 justify-center items-center">
-						<Icon path={mdiStar} class={`fill-[${colorKeys.at(Number.parseInt(key) - 3)}]`} />
+						<Icon
+							path={mdiStar}
+							class={`fill-[${colorKeys.at(Number.parseInt(key) - 3)}]`}
+						/>
 						<Text type="p">{key}: {data.data[key]}</Text>
 					</div>
 				{/each}

src/lib/components/layout/DefaultLayout.svelte

@@ -15,7 +15,9 @@
 		>
 			<Text class="text-primary" type="h1">{title}</Text>
 			{#if $$slots.titlebarActions}
-				<div class="flex max-sm:flex-col max-sm:flex-1 flex-row flex-wrap gap-2 justify-end">
+				<div
+					class="flex max-sm:flex-col max-sm:flex-1 flex-row flex-wrap gap-2 justify-end"
+				>
 					<slot name="titlebarActions" />
 				</div>
 			{/if}

src/lib/components/tables/banner-history-table/BannerHistoryTable.svelte

@@ -9,16 +9,16 @@
 		Row as TableRow
 	} from '$lib/components/ui/table';
 	import {
-		Root as PaginationRoot,
 		Content as PaginationContent,
+		Ellipsis as PaginationEllipsis,
 		Item as PaginationItem,
+		Link as PaginationLink,
 		NextButton as PaginationNextButton,
 		PrevButton as PaginationPrevButton,
-		Link as PaginationLink,
-		Ellipsis as PaginationEllipsis
+		Root as PaginationRoot
 	} from '$lib/components/ui/pagination';
 	import { readable } from 'svelte/store';
-	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
+	import { createRender, createTable, Render, Subscribe } from 'svelte-headless-table';
 	import {
 		mdiAccount,
 		mdiArrowDown,
@@ -110,7 +110,9 @@
 			accessor: 'type',
 			header: 'Type',
 			cell: ({ value }) => {
-				return createRender(Icon, { path: value === 'Character' ? mdiAccount : mdiSwordCross });
+				return createRender(Icon, {
+					path: value === 'Character' ? mdiAccount : mdiSwordCross
+				});
 			},
 			plugins: {
 				sort: {
@@ -120,7 +122,11 @@
 					fn: includeFilter,
 					initialFilterValue: [],
 					render: ({ filterValue, preFilteredValues }) =>
-						createRender(SelectFilter, { filterValue, title: 'Type', preFilteredValues })
+						createRender(SelectFilter, {
+							filterValue,
+							title: 'Type',
+							preFilteredValues
+						})
 				},
 				resize: {
 					initialWidth: 88
@@ -184,7 +190,12 @@
 				<Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
 					<TableRow {...rowAttrs}>
 						{#each headerRow.cells as cell (cell.id)}
-							<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
+							<Subscribe
+								attrs={cell.attrs()}
+								let:attrs
+								props={cell.props()}
+								let:props
+							>
 								<TableHead
 									{...attrs}
 									class={`px-0 ${cell.id === 'key' ? 'text-start' : 'text-center'}`}

src/lib/components/ui/badge/index.ts

@@ -1,12 +1,14 @@
 import { tv, type VariantProps } from 'tailwind-variants';
+
 export { default as Badge } from './badge.svelte';
 
 export const badgeVariants = tv({
 	base: 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 	variants: {
 		variant: {
 			default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
-			secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+			secondary:
+				'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
 			destructive:
 				'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
 			outline: 'text-foreground'

src/lib/components/ui/builds/defaultBuilds.json

@@ -9,7 +9,12 @@
 		"talentPriority": ["Elemental Skill", "Normal Attack", "ELemental Burst"],
 		"weapons": {
 			"signatureWeapon": "CinnabarSpindle",
-			"altWeapons": ["CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle"]
+			"altWeapons": [
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle"
+			]
 		},
 		"artifacts": {
 			"signatureSet": {
@@ -46,7 +51,12 @@
 		"talentPriority": ["Elemental Skill", "Normal Attack", "ELemental Burst"],
 		"weapons": {
 			"signatureWeapon": "CinnabarSpindle",
-			"altWeapons": ["CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle"]
+			"altWeapons": [
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle"
+			]
 		},
 		"artifacts": {
 			"signatureSet": {
@@ -83,7 +93,12 @@
 		"talentPriority": ["Elemental Skill", "Normal Attack", "ELemental Burst"],
 		"weapons": {
 			"signatureWeapon": "CinnabarSpindle",
-			"altWeapons": ["CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle", "CinnabarSpindle"]
+			"altWeapons": [
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle",
+				"CinnabarSpindle"
+			]
 		},
 		"artifacts": {
 			"signatureSet": {

src/lib/components/ui/button/index.ts

@@ -11,7 +11,8 @@ const buttonVariants = tv({
 				'justify-center bg-destructive text-destructive-foreground hover:bg-destructive/90',
 			outline:
 				'justify-center border border-text bg-neutral hover:bg-accent hover:text-accent-foreground',
-			secondary: 'justify-center bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			secondary:
+				'justify-center bg-secondary text-secondary-foreground hover:bg-secondary/80',
 			ghost: 'justify-center hover:bg-primary hover:text-accent-foreground',
 			link: 'justify-center text-primary underline-offset-4 hover:bg-fill/20',
 			sidebar: 'bg-tertiary text-text hover:bg-tertiaryHover w-full',

src/lib/components/ui/date-range-picker/DateRangePicker.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
-	import CalendarIcon from 'lucide-svelte/icons/calendar';
 	import type { DateRange } from 'bits-ui';
-	import {
-		CalendarDate,
-		DateFormatter,
-		getLocalTimeZone,
-		type DateValue
-	} from '@internationalized/date';
+	import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
 	import { cn } from '$lib/utils';
 	import { Button } from '$lib/components/ui/button';
 	import { RangeCalendar } from '$lib/components/ui/range-calendar';
-	import * as Popover from '$lib/components/ui/popover';
 
 	const df = new DateFormatter('en-US', {
 		dateStyle: 'medium'
@@ -25,7 +18,10 @@
 		<Popover.Trigger asChild let:builder>
 			<Button
 				builders={[builder]}
-				class={cn(' justify-start text-left font-normal', !value && 'text-muted-foreground')}
+				class={cn(
+					' justify-start text-left font-normal',
+					!value && 'text-muted-foreground'
+				)}
 				variant="ghost"
 			>
 				{#if value && value.start}