ci: apply automated fixes

Author: autofix-ci[bot]

packages/devtools/src/context/devtools-store.ts

@@ -3,7 +3,12 @@ import type { TanStackDevtoolsPlugin } from './devtools-context'
 
 export type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
 type KeyboardKey = ModifierKey | (string & {})
-export const keyboardModifiers: Array<ModifierKey> = ['Alt', 'Control', 'Meta', 'Shift']
+export const keyboardModifiers: Array<ModifierKey> = [
+  'Alt',
+  'Control',
+  'Meta',
+  'Shift',
+]
 
 type TriggerPosition =
   | 'top-left'

packages/devtools/src/devtools.tsx

@@ -30,7 +30,7 @@ export default function DevTools() {
     setIsOpen(!open)
     setPersistOpen(!open)
   }
-  createEffect(() => { })
+  createEffect(() => {})
   // Used to resize the panel
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,
@@ -134,8 +134,12 @@ export default function DevTools() {
   })
   createEffect(() => {
     // we create all combinations of modifiers
-    const modifiers = settings().openHotkey.filter(key => keyboardModifiers.includes(key as any))
-    const nonModifiers = settings().openHotkey.filter(key => !keyboardModifiers.includes(key as any))
+    const modifiers = settings().openHotkey.filter((key) =>
+      keyboardModifiers.includes(key as any),
+    )
+    const nonModifiers = settings().openHotkey.filter(
+      (key) => !keyboardModifiers.includes(key as any),
+    )
 
     const allModifierCombinations = getAllPermutations(modifiers)
     console.log(allModifierCombinations, nonModifiers)
@@ -145,7 +149,6 @@ export default function DevTools() {
         toggleOpen()
       })
     }
-
   })
 
   return (

packages/devtools/src/styles/use-styles.ts

@@ -316,7 +316,7 @@ const stylesFactory = () => {
     settingsModifiers: css`
       display: flex;
       gap: 0.5rem;
-    `
+    `,
   }
 }
 

packages/devtools/src/tabs/settings-tab.tsx

@@ -1,4 +1,4 @@
-import { Show, createMemo, } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { uppercaseFirstLetter } from '../utils/sanitize'
@@ -9,19 +9,22 @@ export const SettingsTab = () => {
   const { setSettings, settings } = useDevtoolsSettings()
   const styles = useStyles()
   const hotkey = createMemo(() => settings().openHotkey)
-  const modifiers: Array<ModifierKey> = ["Control", "Alt", "Meta", "Shift"]
+  const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']
   const changeHotkey = (newHotkey: ModifierKey) => () => {
     if (hotkey().includes(newHotkey)) {
       return setSettings({
-        openHotkey: hotkey().filter(key => key !== newHotkey),
-      });
+        openHotkey: hotkey().filter((key) => key !== newHotkey),
+      })
     }
-    const existingModifiers = hotkey().filter(key => modifiers.includes(key as any));
-    const otherModifiers = hotkey().filter(key => !modifiers.includes(key as any));
+    const existingModifiers = hotkey().filter((key) =>
+      modifiers.includes(key as any),
+    )
+    const otherModifiers = hotkey().filter(
+      (key) => !modifiers.includes(key as any),
+    )
     setSettings({
       openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],
-    });
-
+    })
   }
   return (
     <div class={styles().settingsContainer}>
@@ -154,40 +157,57 @@ export const SettingsTab = () => {
         <div class={styles().settingsGroup}>
           <div class={styles().settingsModifiers}>
             <Show keyed when={hotkey()}>
-              <Button variant="success" onclick={changeHotkey("Shift")} outline={!hotkey().includes("Shift")}>
+              <Button
+                variant="success"
+                onclick={changeHotkey('Shift')}
+                outline={!hotkey().includes('Shift')}
+              >
                 Shift
               </Button>
-              <Button variant="success" onclick={changeHotkey("Alt")} outline={!hotkey().includes("Alt")}>
+              <Button
+                variant="success"
+                onclick={changeHotkey('Alt')}
+                outline={!hotkey().includes('Alt')}
+              >
                 Alt
               </Button>
-              <Button variant="success" onclick={changeHotkey("Meta")} outline={!hotkey().includes("Meta")}>
+              <Button
+                variant="success"
+                onclick={changeHotkey('Meta')}
+                outline={!hotkey().includes('Meta')}
+              >
                 Meta
               </Button>
-              <Button variant="success" onclick={changeHotkey("Control")} outline={!hotkey().includes("Control")}>
+              <Button
+                variant="success"
+                onclick={changeHotkey('Control')}
+                outline={!hotkey().includes('Control')}
+              >
                 Control
               </Button>
-
             </Show>
           </div>
-
           <Input
             label="Hotkey to open/close devtools"
             description="Use '+' to combine keys (e.g., 'A+B' or 'D')"
             placeholder="A"
-            value={hotkey().filter(key => !(["Shift", "Meta", "Alt", "Ctrl"].includes(key))).join('+')}
+            value={hotkey()
+              .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))
+              .join('+')}
             onChange={(e) =>
               setSettings({
                 openHotkey: [
-                  ...hotkey().filter(key => (["Shift", "Meta", "Alt", "Ctrl"].includes(key)))],
+                  ...hotkey().filter((key) =>
+                    ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),
+                  ),
+                ],
                 ...e
                   .split('+')
                   .map((key) => uppercaseFirstLetter(key))
                   .filter(Boolean),
-
               })
             }
           />
-
           Final shortcut is: {hotkey().join(' + ')}
         </div>
       </div>

packages/devtools/src/utils/sanitize.ts

@@ -11,20 +11,20 @@ export const uppercaseFirstLetter = (value: string) =>
   value.charAt(0).toUpperCase() + value.slice(1)
 
 export const getAllPermutations = <T extends any>(arr: Array<T>) => {
-  const res: Array<Array<T>> = [];
+  const res: Array<Array<T>> = []
 
   function permutate(arr: Array<T>, start: number) {
     if (start === arr.length - 1) {
-      res.push([...arr] as any);
-      return;
+      res.push([...arr] as any)
+      return
     }
     for (let i = start; i < arr.length; i++) {
-      [arr[start], arr[i]] = [arr[i]!, arr[start]!];
-      permutate(arr, start + 1);
-      [arr[start], arr[i]] = [arr[i]!, arr[start]];
+      ;[arr[start], arr[i]] = [arr[i]!, arr[start]!]
+      permutate(arr, start + 1)
+      ;[arr[start], arr[i]] = [arr[i]!, arr[start]]
     }
   }
   permutate(arr, 0)
 
-  return res;
-}
+  return res
+}