update lint and formatting

apps/storybook/.eslintignore → .eslintignore

@@ -1,8 +1,8 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
-/package
+**/build
+**/.svelte-kit
+**/package
 .env
 .env.*
 !.env.example

.prettierignore

@@ -1,8 +1,8 @@
 .DS_Store
 .svelte-kit
 node_modules
-/build
-/package
+**/build
+**/package
 .env
 .env.*
 !.env.example

apps/storybook/package.json

@@ -10,8 +10,8 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint",
-    "format": "eslint --fix"
+    "lint": "eslint src",
+    "format": "eslint src --fix"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",

apps/web/package.json

@@ -10,8 +10,8 @@
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint .",
-    "format": "eslint --fix",
+    "lint": "eslint src",
+    "format": "eslint src --fix",
     "test:integration": "playwright test",
     "test:unit": "vitest"
   },

apps/web/src/routes/+page.svelte

@@ -8,4 +8,6 @@
 <Button></Button>
 <Input placeholder="Input" />
 
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>
+  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+</p>

package.json

@@ -4,8 +4,8 @@
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "format": "turbo run format"
+    "lint": "turbo run --continue lint",
+    "format": "turbo run --continue format"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

packages/config/eslint/base.js

@@ -1,10 +1,21 @@
+// @ts-check
+
 const { defineConfig } = require('eslint-define-config')
 
 module.exports = defineConfig({
   root: true,
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'turbo'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'turbo',
+    'plugin:prettier/recommended',
+  ],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint/eslint-plugin', 'unused-imports', 'simple-import-sort'],
+  plugins: [
+    '@typescript-eslint/eslint-plugin',
+    'unused-imports',
+    'simple-import-sort',
+  ],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,

packages/config/eslint/svelte.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 const base = require('./base.js')
 const { defineConfig } = require('eslint-define-config')
 const eslintPluginSvelte = require('eslint-plugin-svelte')
@@ -6,7 +8,7 @@ const config = eslintPluginSvelte.configs['recommended']
 
 module.exports = defineConfig({
   ...base,
-  extends: [...base.extends, ...config.extends],
+  extends: [...(base.extends ?? []), ...config.extends],
   plugins: base.plugins,
   rules: {
     ...base.rules,
@@ -19,7 +21,7 @@ module.exports = defineConfig({
     ],
   },
   overrides: [
-    ...base.overrides,
+    ...(base.overrides ?? []),
     {
       files: ['*.svelte'],
       parser: 'svelte-eslint-parser',

packages/config/package.json

@@ -2,19 +2,24 @@
   "name": "@repo/config",
   "version": "2.0.0",
   "scripts": {
-    "lint": "eslint",
-    "format": "eslint --fix"
+    "lint": "eslint .",
+    "format": "eslint . --fix"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.0.3",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-svelte": "^2.39.0",
     "eslint-plugin-unused-imports": "^3.2.0",
+    "prettier": "^3.3.1",
     "prettier-plugin-svelte": "^3.2.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
   }
 }

packages/config/prettier/base.js

@@ -1,10 +1,11 @@
+// @ts-check
+
 /**
  * @type {import('prettier').Options}
  */
-module.exports = {
+const config = {
   semi: false,
   singleQuote: true,
-  printWidth: 100,
-  tabWidth: 2,
-  trailingComma: 'es5',
 }
+
+module.exports = config

packages/config/prettier/svelte.js

@@ -1,11 +1,15 @@
+// @ts-check
+
 const base = require('./base.js')
 
 /**
  * @type {import('prettier').Options}
  */
-module.exports = {
+const config = {
   ...base,
   svelteStrictMode: true,
   svelteAllowShorthand: true,
-  plugins: [...base.plugins, 'prettier-plugin-svelte'],
+  plugins: [...(base.plugins ?? []), 'prettier-plugin-svelte'],
 }
+
+module.exports = config

packages/ui/index.ts

@@ -1 +1 @@
-export {};
+export {}

packages/ui/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "format": "eslint --fix"
+    "format": "eslint . --fix"
   },
   "devDependencies": {
     "@repo/config": "workspace:^",

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

@@ -8,8 +8,10 @@ const buttonVariants = tv({
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      destructive:
+        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
       secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
       ghost: 'hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',

packages/ui/src/components/input/index.ts

@@ -3,6 +3,7 @@ import Root from './input.svelte'
 export type FormInputEvent<T extends Event = Event> = T & {
   currentTarget: EventTarget & HTMLInputElement
 }
+
 export type InputEvents = {
   blur: FormInputEvent<FocusEvent>
   change: FormInputEvent<Event>

packages/ui/src/utils.ts

@@ -1,62 +1,62 @@
-import { type ClassValue, clsx } from "clsx";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx'
+import { cubicOut } from 'svelte/easing'
+import type { TransitionConfig } from 'svelte/transition'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
 
 type FlyAndScaleParams = {
-  y?: number;
-  x?: number;
-  start?: number;
-  duration?: number;
-};
+  y?: number
+  x?: number
+  start?: number
+  duration?: number
+}
 
 export const flyAndScale = (
   node: Element,
   params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 },
 ): TransitionConfig => {
-  const style = getComputedStyle(node);
-  const transform = style.transform === "none" ? "" : style.transform;
+  const style = getComputedStyle(node)
+  const transform = style.transform === 'none' ? '' : style.transform
 
   const scaleConversion = (
     valueA: number,
     scaleA: [number, number],
     scaleB: [number, number],
   ) => {
-    const [minA, maxA] = scaleA;
-    const [minB, maxB] = scaleB;
+    const [minA, maxA] = scaleA
+    const [minB, maxB] = scaleB
 
-    const percentage = (valueA - minA) / (maxA - minA);
-    const valueB = percentage * (maxB - minB) + minB;
+    const percentage = (valueA - minA) / (maxA - minA)
+    const valueB = percentage * (maxB - minB) + minB
 
-    return valueB;
-  };
+    return valueB
+  }
 
   const styleToString = (
     style: Record<string, number | string | undefined>,
   ): string => {
     return Object.keys(style).reduce((str, key) => {
-      if (style[key] === undefined) return str;
-      return str + `${key}:${style[key]};`;
-    }, "");
-  };
+      if (style[key] === undefined) return str
+      return str + `${key}:${style[key]};`
+    }, '')
+  }
 
   return {
     duration: params.duration ?? 200,
     delay: 0,
     css: (t) => {
-      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
 
       return styleToString({
         transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
         opacity: t,
-      });
+      })
     },
     easing: cubicOut,
-  };
-};
+  }
+}