chore: add prettier linter

2025-01-16 09:16:14 +09:00 · 2025-01-16 09:16:14 +09:00 · 05ff8493e4
commit 05ff8493e4
parent a22ea56b50
26 changed files with 416 additions and 288 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
--- a/eslint.config.js
+++ b/eslint.config.js
@ -3,6 +3,8 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

 export default tseslint.config(
  { ignores: ['dist'] },
@ -25,4 +27,6 @@ export default tseslint.config(
      ],
    },
  },
+  eslintConfigPrettier,
+  eslintPluginPrettierRecommended,
 )
--- a/package.json
+++ b/package.json
@ -32,9 +32,12 @@
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "globals": "^15.11.0",
+    "monaco-editor": "^0.52.2",
    "sass-embedded": "^1.80.4",
    "sharp": "^0.33.5",
    "typescript": "~5.6.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -13,7 +13,7 @@ importers:
        version: 5.1.1
      '@monaco-editor/react':
        specifier: ^4.6.0
-        version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@uidotdev/usehooks':
        specifier: ^2.4.1
        version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -69,6 +69,12 @@ importers:
      eslint:
        specifier: ^9.13.0
        version: 9.13.0
+      eslint-config-prettier:
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@9.13.0)
+      eslint-plugin-prettier:
+        specifier: ^5.2.2
+        version: 5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2)
      eslint-plugin-react-hooks:
        specifier: ^5.0.0
        version: 5.0.0(eslint@9.13.0)
@ -78,6 +84,9 @@ importers:
      globals:
        specifier: ^15.11.0
        version: 15.11.0
+      monaco-editor:
+        specifier: ^0.52.2
+        version: 0.52.2
      sass-embedded:
        specifier: ^1.80.4
        version: 1.80.4
@ -443,6 +452,10 @@ packages:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
    engines: {node: '>= 8'}

+  '@pkgr/core@0.1.1':
+    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
  '@rollup/rollup-android-arm-eabi@4.24.0':
    resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
    cpu: [arm]
@ -805,6 +818,26 @@ packages:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}

+  eslint-config-prettier@10.0.1:
+    resolution: {integrity: sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-plugin-prettier@5.2.2:
+    resolution: {integrity: sha512-1yI3/hf35wmlq66C8yOyrujQnel+v5l1Vop5Cl2I6ylyNTT1JbuUUnV3/41PzwTzcyDp/oF0jWE3HXvcH5AQOQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '*'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
  eslint-plugin-react-hooks@5.0.0:
    resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==}
    engines: {node: '>=10'}
@ -861,6 +894,9 @@ packages:
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
  fast-glob@3.3.2:
    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
    engines: {node: '>=8.6.0'}
@ -1028,8 +1064,8 @@ packages:
  moment@2.30.1:
    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}

-  monaco-editor@0.52.0:
-    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}

  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@ -1094,6 +1130,15 @@ packages:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}

+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@ -1330,6 +1375,10 @@ packages:
    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
    engines: {node: '>=10'}

+  synckit@0.9.2:
+    resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

@ -1655,15 +1704,15 @@ snapshots:
  '@img/sharp-win32-x64@0.33.5':
    optional: true

-  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.0)':
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.2)':
    dependencies:
-      monaco-editor: 0.52.0
+      monaco-editor: 0.52.2
      state-local: 1.0.7

-  '@monaco-editor/react@4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
-      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.0)
-      monaco-editor: 0.52.0
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      monaco-editor: 0.52.2
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

@ -1679,6 +1728,8 @@ snapshots:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.17.1

+  '@pkgr/core@0.1.1': {}
+
  '@rollup/rollup-android-arm-eabi@4.24.0':
    optional: true

@ -2017,6 +2068,19 @@ snapshots:

  escape-string-regexp@4.0.0: {}

+  eslint-config-prettier@10.0.1(eslint@9.13.0):
+    dependencies:
+      eslint: 9.13.0
+
+  eslint-plugin-prettier@5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2):
+    dependencies:
+      eslint: 9.13.0
+      prettier: 3.4.2
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.9.2
+    optionalDependencies:
+      eslint-config-prettier: 10.0.1(eslint@9.13.0)
+
  eslint-plugin-react-hooks@5.0.0(eslint@9.13.0):
    dependencies:
      eslint: 9.13.0
@ -2094,6 +2158,8 @@ snapshots:

  fast-deep-equal@3.1.3: {}

+  fast-diff@1.3.0: {}
+
  fast-glob@3.3.2:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -2232,7 +2298,7 @@ snapshots:

  moment@2.30.1: {}

-  monaco-editor@0.52.0: {}
+  monaco-editor@0.52.2: {}

  ms@2.1.3: {}

@ -2289,6 +2355,12 @@ snapshots:

  prelude-ls@1.2.1: {}

+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier@3.4.2: {}
+
  punycode@2.3.1: {}

  queue-microtask@1.2.3: {}
@ -2518,6 +2590,11 @@ snapshots:
    dependencies:
      has-flag: 4.0.0

+  synckit@0.9.2:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.8.0
+
  text-table@0.2.0: {}

  to-regex-range@5.0.1:
--- a/src/App/AppLayout/index.tsx
+++ b/src/App/AppLayout/index.tsx
@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode } from 'react'

 import style from './style.module.scss'

@ -6,7 +6,6 @@ interface AppLayoutProp {
  children?: ReactNode
 }

-export const AppLayout: FC<AppLayoutProp> = ({ children }) =>
-  <div className={style.container}>
-    {children}
-  </div>
+export const AppLayout: FC<AppLayoutProp> = ({ children }) => (
+  <div className={style.container}>{children}</div>
+)
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@ -1,11 +1,11 @@
-import { FC } from "react";
-import { AppLayout } from "./AppLayout";
-import { Editor } from "../Editor";
-import { TransformGrid } from "../TransformGrid";
+import { FC } from 'react'
+import { AppLayout } from './AppLayout'
+import { Editor } from '../Editor'
+import { TransformGrid } from '../TransformGrid'

-export const App: FC = () =>
+export const App: FC = () => (
  <AppLayout>
    <Editor />
    <TransformGrid />
  </AppLayout>
-  
+)
--- a/src/Components/Button.tsx
+++ b/src/Components/Button.tsx
@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'

 export const Button = styled.button`
  border: none;
--- a/src/Components/Input.tsx
+++ b/src/Components/Input.tsx
@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'

 export const Input = styled.input`
  background-color: transparent;
@ -12,7 +12,7 @@ export const Input = styled.input`

  width: 24px;

-  &[type=checkbox] {
+  &[type='checkbox'] {
    width: auto;
  }

--- a/src/Components/TextArea.tsx
+++ b/src/Components/TextArea.tsx
@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'

 export const TextArea = styled.textarea`
  border: none;
--- a/src/Editor/index.tsx
+++ b/src/Editor/index.tsx
@ -1,15 +1,16 @@
-import { createRef, FC, useEffect, useRef } from "react";
-import { Editor as MonacoEditor } from "@monaco-editor/react";
-import { useRecoilState } from "recoil";
-import { EditorValueState } from "../GlobalStates/EditorValueState";
-import { motion } from "framer-motion";
-import { VERSION } from "../version";
+import { createRef, FC, useEffect, useRef } from 'react'
+import { Editor as MonacoEditor } from '@monaco-editor/react'
+import { useRecoilState } from 'recoil'
+import { EditorValueState } from '../GlobalStates/EditorValueState'
+import { motion } from 'framer-motion'
+import { VERSION } from '../version'
+import { editor } from 'monaco-editor'

-import style from "./style.module.scss";
+import style from './style.module.scss'

 export const Editor: FC = () => {
  const [value, setValue] = useRecoilState(EditorValueState)
-  const ref = useRef<any>()
+  const ref = useRef<editor.IStandaloneCodeEditor>()
  const containerRef = createRef<HTMLDivElement>()

  useEffect(() => {
@ -20,11 +21,11 @@ export const Editor: FC = () => {
        const rect = containerRef.current?.getBoundingClientRect()
        ref.current?.layout({
          width: rect?.width ?? 0,
-          height: rect?.height ?? 0
+          height: rect?.height ?? 0,
        })
      })
    })
-  }, [])
+  }, [containerRef])

  return (
    <motion.div
@ -32,33 +33,37 @@ export const Editor: FC = () => {
      ref={containerRef}
      transition={{ delay: 1.5 }}
      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}>
+      animate={{ opacity: 1 }}
+    >
      <MonacoEditor
        loading={<></>}
        value={value}
        language="yaml"
-        onMount={(v) => ref.current = v}
+        onMount={(v) => (ref.current = v)}
        onChange={(v) => setValue(v ?? '')}
        options={{
          automaticLayout: true,
          lineNumbersMinChars: 3,
          minimap: { enabled: false },
-          theme: "vs-dark",
+          theme: 'vs-dark',
          fontSize: 24,
          fontFamily: 'JetBrains Mono Variable',
          fontLigatures: true,
-          wordWrap: "on",
+          wordWrap: 'on',
          mouseWheelZoom: true,
          smoothScrolling: true,
          cursorSmoothCaretAnimation: 'on',
          cursorBlinking: 'smooth',
-          cursorStyle: 'line'
+          cursorStyle: 'line',
        }}
-        theme="vs-dark" />
+        theme="vs-dark"
+      />

      <div className={style.credit}>
        <div className={style.creditstr}>
-          <p><b>The PTOOLS</b></p>
+          <p>
+            <b>The PTOOLS</b>
+          </p>
          <p>v2-{VERSION}</p>
          <p>&copy; Minhyeok Park</p>
        </div>
--- a/src/GlobalStates/EditorValueState.ts
+++ b/src/GlobalStates/EditorValueState.ts
@ -1,8 +1,12 @@
-import { atom } from "recoil";
+import { atom } from 'recoil'

 export const EditorValueState = atom({
  key: 'editor_value',
-  default: JSON.stringify({
-    Hello: 'world!'
-  }, null, 2)
+  default: JSON.stringify(
+    {
+      Hello: 'world!',
+    },
+    null,
+    2,
+  ),
 })
--- a/src/LandingAnimation/index.tsx
+++ b/src/LandingAnimation/index.tsx
@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from 'react'
 import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion'

 import style from './style.module.scss'
@ -7,7 +7,7 @@ import Suika from '../Assets/favicon.webp'
 export const LandingAnimation: FC = () => {
  const [isVisible, setVisible] = useState(true)
  const exitAnimation: TargetAndTransition = {
-    opacity: 0
+    opacity: 0,
  }

  useEffect(() => {
--- a/src/TransformGrid/index.tsx
+++ b/src/TransformGrid/index.tsx
@ -1,22 +1,21 @@
-import { FC } from "react";
-import { motion } from "framer-motion";
+import { FC } from 'react'
+import { motion } from 'framer-motion'

 import style from './style.module.scss'
-import { TransformGridItem } from "../TransformGridItem";
-import { transforms, wrapTransform } from "../Transforms/Transform";
+import { TransformGridItem } from '../TransformGridItem'
+import { transforms, wrapTransform } from '../Transforms/Transform'

-export const TransformGrid: FC = () =>
+export const TransformGrid: FC = () => (
  <ul className={style.grid}>
-    {transforms.map((transform, i) =>
+    {transforms.map((transform, i) => (
      <motion.li
        key={i}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
-        transition={{ delay: i * 0.1 + 1.5 }} >
-
-        <TransformGridItem
-          transform={wrapTransform(transform)}/>
-
+        transition={{ delay: i * 0.1 + 1.5 }}
+      >
+        <TransformGridItem transform={wrapTransform(transform)} />
      </motion.li>
-    )}
+    ))}
  </ul>
+)
--- a/src/TransformGridItem/index.tsx
+++ b/src/TransformGridItem/index.tsx
@ -1,22 +1,25 @@
-import { ChangeEvent, FC, useEffect, useState } from "react";
+// src/components/TransformGridItem.tsx
+
+import { ChangeEvent, FC, useEffect, useState } from 'react'
 import style from './style.module.scss'
-import { Button } from "../Components/Button";
-import { Input } from "../Components/Input";
-import { TextArea } from "../Components/TextArea";
-import clsx from "clsx";
-import { useRecoilState } from "recoil";
-import { EditorValueState } from "../GlobalStates/EditorValueState";
+import { Button } from '../Components/Button'
+import { Input } from '../Components/Input'
+// Remove TextArea import as it's no longer used
+import clsx from 'clsx'
+import { useRecoilState } from 'recoil'
+import { EditorValueState } from '../GlobalStates/EditorValueState'
 import {
  TransformCheckboxOption,
  TransformIntboxOption,
  TransformRadioOption,
  TransformTextboxOption,
  WrappedTransform,
-  WrappedTransformResult
-} from "../Transforms/Transform";
-import { useLocalStorage } from "@uidotdev/usehooks";
-import { AnimatePresence, motion } from "framer-motion";
+  WrappedTransformResult,
+} from '../Transforms/Transform'
+import { useLocalStorage } from '@uidotdev/usehooks'
+import { AnimatePresence, motion } from 'framer-motion'
 import { Tooltip } from 'react-tooltip'
+import { TextArea } from '../Components/TextArea'

 interface TransformGridItemProp {
  transform: WrappedTransform
@ -25,10 +28,13 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
  const [value, setValue] = useRecoilState(EditorValueState)
  const [options, setOptions] = useState(transform.options)
-  const [closedToggle, setClosedToggle] = useLocalStorage(`transform_closed__${transform.name}`, false)
+  const [closedToggle, setClosedToggle] = useLocalStorage(
+    `transform_closed__${transform.name}`,
+    false,
+  )
  const [result, setResult] = useState<WrappedTransformResult>({
    error: false,
-    value: ''
+    value: '',
  })

  const previewDisabled = value.length > 30000
@ -41,101 +47,101 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
        setResult(result)
        return result
      })
+      .catch((error) => {
+        setResult({ error: true, value: error.toString() })
+        return { error: true, value: error.toString() }
+      })

-  // trigger transform when value, option or closed state changed
+  // Trigger transform when value, option or closed state changes
  useEffect(() => {
-    if (previewDisabled)
-      return
+    if (previewDisabled) return

-    triggerTransform()
-  }, [value, options, closed])
+    transform
+      .fn(value, options)
+      .then(setResult.bind(this))
+      .catch((error) => setResult({ error: true, value: error.toString() }))
+  }, [value, options, closed, previewDisabled, transform])

-  // reset error state when option changed
+  // Reset error state when options change
  useEffect(() => {
-    if (!previewDisabled)
-      return
+    if (!previewDisabled) return

    setResult({
      error: false,
-      value: ''
+      value: '',
    })
-  }, [options])
+  }, [options, previewDisabled])

-  // forcely disable preview when value is longer than 30,000 chars
+  // Force disable preview when value is longer than 30,000 chars
  useEffect(() => {
    if (previewDisabled) {
      setResult({
        error: false,
-        value: ''
+        value: '',
      })
      return
    }

-    triggerTransform()
-  }, [value])
+    transform
+      .fn(value, options)
+      .then(setResult.bind(this))
+      .catch((error) => setResult({ error: true, value: error.toString() }))
+  }, [value, previewDisabled, transform, options])

  const onCheckboxOptionChanged =
    (option: TransformCheckboxOption) =>
    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.checked,
+      })

-    options.set(option.key, {
-      ...option,
-      value: event.target.checked
-    })
-
-    setOptions(new Map(options))
-  }
-
+      setOptions(new Map(options))
+    }

  const onTextboxOptionChanged =
    (option: TransformTextboxOption) =>
    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.value,
+      })

-    options.set(option.key, {
-      ...option,
-      value: event.target.value
-    })
-
-    setOptions(new Map(options))
-  }
+      setOptions(new Map(options))
+    }

  const onIntboxOptionChanged =
    (option: TransformIntboxOption) =>
    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: parseInt(event.target.value),
+      })

-    options.set(option.key, {
-      ...option,
-      value: parseInt(event.target.value)
-    })
-
-    setOptions(new Map(options))
-  }
+      setOptions(new Map(options))
+    }

  const onRadioOptionChanged =
    (option: TransformRadioOption) =>
    (event: ChangeEvent<HTMLInputElement>) => {
+      options.set(option.key, {
+        ...option,
+        value: event.target.value,
+      })

-    options.set(option.key, {
-      ...option,
-      value: event.target.value
-    })
-
-    setOptions(new Map(options))
-  }
+      setOptions(new Map(options))
+    }

  const onForwardButtonPressed = async () => {
-    const result =
-      await triggerTransform()
+    const result = await triggerTransform()

-    if (result.error)
-      return
+    if (result.error) return

    setValue(result.value)
  }

  const onLabelClicked = async () => {
-    if (previewDisabled)
-      return
+    if (previewDisabled) return

    setClosedToggle(!closed)
  }
@ -144,22 +150,23 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
    <div className={clsx(style.item, closed && style.closed)}>
      <div className={style.toolbar}>
        <div data-tooltip-id={`${transform.name}-tooltip`}>
-          <Button
-            disabled={result.error}
-            onClick={onForwardButtonPressed}>
-
+          <Button disabled={result.error} onClick={onForwardButtonPressed}>
            &lt;&lt;&lt;
          </Button>
        </div>

-        <Tooltip className={style.error} id={`${transform.name}-tooltip`} place="bottom">
+        <Tooltip
+          className={style.error}
+          id={`${transform.name}-tooltip`}
+          place="bottom"
+        >
          {previewDisabled && result.error && result.value}
        </Tooltip>

        <h2
          onClick={onLabelClicked}
-          className={clsx(style.name, previewDisabled && style.previewDisabled)}>
-
+          className={clsx(style.name, previewDisabled && style.previewDisabled)}
+        >
          {transform.name}
        </h2>

@ -173,8 +180,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                <Input
                  checked={option.value}
                  onChange={onCheckboxOptionChanged(option)}
-                  type="checkbox" />
-              </label>))}
+                  type="checkbox"
+                />
+              </label>
+            ))}

          {[...options.values()]
            ?.filter((v) => v.type === 'TEXTBOX')
@ -185,9 +194,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                <Input
                  value={option.value}
                  onChange={onTextboxOptionChanged(option)}
-                  type="text" />
-              </label>))}
-
+                  type="text"
+                />
+              </label>
+            ))}

          {[...options.values()]
            ?.filter((v) => v.type === 'INTBOX')
@ -199,9 +209,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                  min={1}
                  value={option.value}
                  onChange={onIntboxOptionChanged(option)}
-                  type="number" />
-              </label>))}
-
+                  type="number"
+                />
+              </label>
+            ))}

          {[...options.values()]
            ?.filter((v) => v.type === 'RADIO')
@ -209,7 +220,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
              <div
                key={i}
                onChange={onRadioOptionChanged(option)}
-                className={style.optionItem}>
+                className={style.optionItem}
+              >
                {option.radios.map((radio, i2) => (
                  <label key={i2}>
                    <p>{radio.label ?? radio.value}:</p>
@ -219,28 +231,31 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                      name={option.key}
                      defaultChecked={radio.value === option.value}
                      value={radio.value}
-                      type="radio" />
+                      type="radio"
+                    />
                  </label>
                ))}
-
-              </div>))}
+              </div>
+            ))}
        </div>
      </div>

      <AnimatePresence>
-        {!closed &&
+        {!closed && (
          <motion.div
            initial={{ height: 0 }}
            animate={{ height: 200 }}
            exit={{ height: 0 }}
-            className={style.output}>
+            className={style.output}
+          >
            <TextArea
              readOnly
              value={result.value}
              placeholder="(empty)"
-              className={clsx(result.error && style.error)} />
+              className={clsx(result.error && style.error)}
+            />
          </motion.div>
-        }
+        )}
      </AnimatePresence>
    </div>
  )
--- a/src/Transforms/Base64Transforms.ts
+++ b/src/Transforms/Base64Transforms.ts
@ -1,11 +1,11 @@
-import { Transform } from "./Transform";
+import { Transform } from './Transform'

 export const Base64DecodeTransform: Transform = {
  name: 'base64d',
-  fn: async (v) => atob(v)
+  fn: async (v) => atob(v),
 }

 export const Base64EncodeTransform: Transform = {
  name: 'base64e',
-  fn: async (v) => btoa(v)
+  fn: async (v) => btoa(v),
 }
--- a/src/Transforms/DatetimeTransforms.ts
+++ b/src/Transforms/DatetimeTransforms.ts
@ -1,6 +1,6 @@
-import { Transform } from "./Transform";
+import { Transform } from './Transform'
 import { strptime } from 'strtime'
-import moment from "moment";
+import moment from 'moment'

 export const DatetimeTransform: Transform = {
  name: 'datetime',
@ -20,31 +20,28 @@ export const DatetimeTransform: Transform = {

        throw new Error('Unknown Format')
      })
-      .map((date) => JSON.stringify({
-        year: date.getFullYear(),
-        month: date.getMonth() + 1,
-        date: date.getDate(),
-        hour: date.getHours(),
-        minute: date.getMinutes(),
-        second: date.getSeconds(),
-        milli: date.getMilliseconds()
-      }))
+      .map((date) =>
+        JSON.stringify({
+          year: date.getFullYear(),
+          month: date.getMonth() + 1,
+          date: date.getDate(),
+          hour: date.getHours(),
+          minute: date.getMinutes(),
+          second: date.getSeconds(),
+          milli: date.getMilliseconds(),
+        }),
+      )
      .join('\n')

-    return [
-      expression,
-      samples,
-      parsedSamples
-    ].join('\n\n')
+    return [expression, samples, parsedSamples].join('\n\n')
  },

-  options: [{
-    type: 'RADIO',
-    key: 'f',
-    value: 'c',
-    radios: [
-      { value: 'c' },
-      { value: 'java' }
-    ]
-  }]
+  options: [
+    {
+      type: 'RADIO',
+      key: 'f',
+      value: 'c',
+      radios: [{ value: 'c' }, { value: 'java' }],
+    },
+  ],
 }
--- a/src/Transforms/GzipCompressTransform.ts
+++ b/src/Transforms/GzipCompressTransform.ts
@ -1,5 +1,5 @@
 // GzipCompressTransform.ts
-import { Transform } from "./Transform"
+import { Transform } from './Transform'

 /**
 * Compresses a string using Gzip and encodes the result in Base64.
@ -8,8 +8,10 @@ import { Transform } from "./Transform"
 */
 const compressGzip = async (input: string): Promise<string> => {
  // Check if CompressionStream is supported
-  if (typeof CompressionStream === "undefined") {
-    throw new Error("CompressionStream API is not supported in this environment.")
+  if (typeof CompressionStream === 'undefined') {
+    throw new Error(
+      'CompressionStream API is not supported in this environment.',
+    )
  }

  // Encode the input string to a Uint8Array
@ -21,11 +23,11 @@ const compressGzip = async (input: string): Promise<string> => {
    start(controller) {
      controller.enqueue(encoded)
      controller.close()
-    }
+    },
  })

  // Create a CompressionStream for Gzip
-  const compressionStream = new CompressionStream("gzip")
+  const compressionStream = new CompressionStream('gzip')

  // Pipe the readable stream through the compression stream
  const compressedStream = readable.pipeThrough(compressionStream)
@ -64,7 +66,7 @@ const compressGzip = async (input: string): Promise<string> => {
 * @returns The Base64-encoded string.
 */
 const arrayBufferToBase64 = (buffer: Uint8Array): string => {
-  let binary = ""
+  let binary = ''
  for (let i = 0; i < buffer.length; i++) {
    binary += String.fromCharCode(buffer[i])
  }
@ -76,5 +78,5 @@ export const GzipCompressTransform: Transform = {

  fn: (v: string) => compressGzip(v),

-  options: [] // Add any options if needed
+  options: [], // Add any options if needed
 }
--- a/src/Transforms/GzipTransform.ts
+++ b/src/Transforms/GzipTransform.ts
@ -1,4 +1,4 @@
-import { Transform } from "./Transform"
+import { Transform } from './Transform'

 const decompressGzip = async (base64: string) => {
  const byteCharacters = atob(base64)
@ -7,10 +7,9 @@ const decompressGzip = async (base64: string) => {
  for (let i = 0; i < byteCharacters.length; i++)
    byteNumbers[i] = byteCharacters.charCodeAt(i)

-  const decompressedStream =
-    new Blob([new Uint8Array(byteNumbers)])
-      .stream()
-      .pipeThrough(new DecompressionStream("gzip"))
+  const decompressedStream = new Blob([new Uint8Array(byteNumbers)])
+    .stream()
+    .pipeThrough(new DecompressionStream('gzip'))

  return await new Response(decompressedStream).text()
 }
@ -18,6 +17,5 @@ const decompressGzip = async (base64: string) => {
 export const GzipDecompressTransform: Transform = {
  name: 'gzipd',

-  fn: (v) => decompressGzip(v)
+  fn: (v) => decompressGzip(v),
 }
-
--- a/src/Transforms/JSONTransforms.ts
+++ b/src/Transforms/JSONTransforms.ts
@ -1,39 +1,50 @@
 import JSON5 from 'json5'
-import { Transform } from "./Transform";
+import { Transform } from './Transform'

 export const JSONBeautifyTransform: Transform = {
  name: 'jsonbtf',

  fn: async (v, o) =>
    o.get('multiline')?.value === true
-      ? JSON.stringify(JSON5.parse(v), null, o.get('tab')?.value as number ?? 2)
-      : v.split('\n').map((v2) => JSON.stringify(JSON5.parse(v2), null, o.get('tab')?.value as number ?? 2)).join('\n'),
+      ? JSON.stringify(
+          JSON5.parse(v),
+          null,
+          (o.get('tab')?.value as number) ?? 2,
+        )
+      : v
+          .split('\n')
+          .map((v2) =>
+            JSON.stringify(
+              JSON5.parse(v2),
+              null,
+              (o.get('tab')?.value as number) ?? 2,
+            ),
+          )
+          .join('\n'),

  options: [
    {
      type: 'CHECKBOX',
-      key: 'multiline'
+      key: 'multiline',
    },
    {
      type: 'INTBOX',
      key: 'tab',
-      value: 2
-    }
-  ]
+      value: 2,
+    },
+  ],
 }

 export const JSONSimplifyTransform: Transform = {
  name: 'jsonsmp',

-  fn: async (v) =>
-    JSON.stringify(JSON5.parse(v))
+  fn: async (v) => JSON.stringify(JSON5.parse(v)),
 }

 export const JSONEscapeTransform: Transform = {
  name: 'jsonesc',

-  fn: async (v) =>
-    JSON.stringify(v)
+  fn: async (v) => JSON.stringify(v),
 }

 export const JSONUnescapeTransform: Transform = {
@ -42,9 +53,8 @@ export const JSONUnescapeTransform: Transform = {
  fn: async (v) => {
    const result = JSON5.parse(v)

-    if (typeof result !== 'string')
-      throw new Error('Not JSON escaped')
+    if (typeof result !== 'string') throw new Error('Not JSON escaped')

    return result
-  } 
+  },
 }
--- a/src/Transforms/RegexpTransform.ts
+++ b/src/Transforms/RegexpTransform.ts
@ -1,4 +1,4 @@
-import { Transform } from "./Transform";
+import { Transform } from './Transform'

 export const RegexpTransform: Transform = {
  name: 'regexp',
@ -8,14 +8,9 @@ export const RegexpTransform: Transform = {

    const parsedSamples = samples
      .split('\n')
-      .map((sample) =>
-        JSON.stringify(regexp.exec(sample)?.groups))
+      .map((sample) => JSON.stringify(regexp.exec(sample)?.groups))
      .join('\n')

-    return [
-      expression,
-      samples,
-      parsedSamples
-    ].join('\n\n')
-  }
+    return [expression, samples, parsedSamples].join('\n\n')
+  },
 }
--- a/src/Transforms/Transform.ts
+++ b/src/Transforms/Transform.ts
@ -1,39 +1,46 @@
-import { Base64DecodeTransform, Base64EncodeTransform } from "./Base64Transforms"
-import { DatetimeTransform } from "./DatetimeTransforms"
-import { GzipCompressTransform } from "./GzipCompressTransform"
-import { GzipDecompressTransform } from "./GzipTransform"
-import { JSONBeautifyTransform, JSONEscapeTransform, JSONSimplifyTransform, JSONUnescapeTransform } from "./JSONTransforms"
-import { RegexpTransform } from "./RegexpTransform"
-import { URIDecodeTransform, URIEncodeTransform } from "./URITransforms"
-import { JSON2YAMLTransform, YAML2JSONTransform } from "./YAMLTransforms"
+import {
+  Base64DecodeTransform,
+  Base64EncodeTransform,
+} from './Base64Transforms'
+import { DatetimeTransform } from './DatetimeTransforms'
+import { GzipCompressTransform } from './GzipCompressTransform'
+import { GzipDecompressTransform } from './GzipTransform'
+import {
+  JSONBeautifyTransform,
+  JSONEscapeTransform,
+  JSONSimplifyTransform,
+  JSONUnescapeTransform,
+} from './JSONTransforms'
+import { RegexpTransform } from './RegexpTransform'
+import { URIDecodeTransform, URIEncodeTransform } from './URITransforms'
+import { JSON2YAMLTransform, YAML2JSONTransform } from './YAMLTransforms'

 export interface TransformCheckboxOption {
-  type: 'CHECKBOX',
-  key: string,
-  label?: string,
+  type: 'CHECKBOX'
+  key: string
+  label?: string
  value?: boolean
 }

-
 export interface TransformTextboxOption {
-  type: 'TEXTBOX',
-  key: string,
-  label?: string,
+  type: 'TEXTBOX'
+  key: string
+  label?: string
  value?: string
 }

 export interface TransformIntboxOption {
-  type: 'INTBOX',
-  key: string,
-  label?: string,
+  type: 'INTBOX'
+  key: string
+  label?: string
  value?: number
 }

 export interface TransformRadioOption {
-  type: 'RADIO',
-  key: string,
-  label?: string,
-  value?: string,
+  type: 'RADIO'
+  key: string
+  label?: string
+  value?: string
  radios: {
    label?: string
    value: string
@ -41,8 +48,10 @@ export interface TransformRadioOption {
 }

 export type TransformOption =
-  TransformCheckboxOption | TransformTextboxOption |
-  TransformIntboxOption | TransformRadioOption
+  | TransformCheckboxOption
+  | TransformTextboxOption
+  | TransformIntboxOption
+  | TransformRadioOption

 export interface Transform {
  name: string
@ -56,10 +65,12 @@ export interface WrappedTransformResult {
 }

 export interface WrappedTransform extends Omit<Transform, 'fn' | 'options'> {
-  wrapped: true,
+  wrapped: true

-  fn: (value: string, options: Map<string, TransformOption>) =>
-    Promise<WrappedTransformResult>,
+  fn: (
+    value: string,
+    options: Map<string, TransformOption>,
+  ) => Promise<WrappedTransformResult>

  options: Map<string, TransformOption>
 }
@ -68,16 +79,15 @@ export const wrapTransform = (transform: Transform): WrappedTransform => ({
  ...transform,

  fn: async (...args) =>
-    await transform.fn(...args)
-      .then((value) =>
-        ({ error: false, value: value.toString() }))
-      .catch((error) =>
-        ({ error: true, value: error.toString() })),
+    await transform
+      .fn(...args)
+      .then((value) => ({ error: false, value: value.toString() }))
+      .catch((error) => ({ error: true, value: error.toString() })),

  options: new Map<string, TransformOption>(
-    (transform.options ?? []).map((v) => [v.key, v])
+    (transform.options ?? []).map((v) => [v.key, v]),
  ),
-  wrapped: true
+  wrapped: true,
 })

 export const transforms: Transform[] = [
@ -94,5 +104,5 @@ export const transforms: Transform[] = [
  JSON2YAMLTransform,
  YAML2JSONTransform,
  GzipCompressTransform,
-  GzipDecompressTransform
+  GzipDecompressTransform,
 ]
--- a/src/Transforms/URITransforms.ts
+++ b/src/Transforms/URITransforms.ts
@ -1,29 +1,29 @@
-import { Transform } from "./Transform";
+import { Transform } from './Transform'

 export const URIDecodeTransform: Transform = {
  name: 'urid',

  fn: async (v, o) =>
-    o.get('cmp')?.value === true
-      ? decodeURIComponent(v)
-      : decodeURI(v),
+    o.get('cmp')?.value === true ? decodeURIComponent(v) : decodeURI(v),

-  options: [{
-    type: 'CHECKBOX',
-    key: 'cmp'
-  }]
+  options: [
+    {
+      type: 'CHECKBOX',
+      key: 'cmp',
+    },
+  ],
 }

 export const URIEncodeTransform: Transform = {
  name: 'urie',

  fn: async (v, o) =>
-    o.get('cmp')?.value === true
-      ? encodeURIComponent(v)
-      : encodeURI(v),
+    o.get('cmp')?.value === true ? encodeURIComponent(v) : encodeURI(v),

-  options: [{
-    type: 'CHECKBOX',
-    key: 'cmp'
-  }]
+  options: [
+    {
+      type: 'CHECKBOX',
+      key: 'cmp',
+    },
+  ],
 }
--- a/src/Transforms/YAMLTransforms.ts
+++ b/src/Transforms/YAMLTransforms.ts
@ -1,17 +1,15 @@
-import { Transform } from "./Transform";
+import { Transform } from './Transform'
 import YAML from 'yaml'
 import JSON5 from 'json5'

 export const YAML2JSONTransform: Transform = {
  name: 'yaml2json',

-  fn: async (v) =>
-    JSON.stringify(YAML.parse(v))
+  fn: async (v) => JSON.stringify(YAML.parse(v)),
 }

 export const JSON2YAMLTransform: Transform = {
  name: 'json2yaml',

-  fn: async (v) =>
-    YAML.stringify(JSON5.parse(v))
+  fn: async (v) => YAML.stringify(JSON5.parse(v)),
 }
--- a/src/main.css
+++ b/src/main.css
@ -21,3 +21,8 @@ input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
 }
+
+*::selection {
+  color: #212121;
+  background-color: #ff1696;
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -1,5 +1,6 @@
 /// <reference types="vite/client" />

 module 'strtime' {
-  function strptime (string, string): Date
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function strptime(string, string): Date
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -7,8 +7,8 @@ export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
-        api: 'modern-compiler' // or "modern"
-      }
-    }
-  }
+        api: 'modern-compiler', // or "modern"
+      },
+    },
+  },
 })