Refactor/eslint operations

.gitignore

@@ -12,11 +12,9 @@ dist
 dist-ssr
 *.local
 *-lock.json
+pnpm-lock.yaml
 
 # Editor directories and files
-.vscode
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

.storybook/main.ts

@@ -1,19 +1,19 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: [
-        "@storybook/addon-onboarding",
-        "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "@storybook/addon-styling-webpack",
-    ],
-    framework: {
-        name: "@storybook/react-vite",
-        options: {},
-    },
-    staticDirs: ["../public"],
-    previewHead: (head) => `
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  previewHead: head => `
   ${head}
   ${`<link
       href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"

.storybook/manager.ts

@@ -1,6 +1,7 @@
 import { addons } from "@storybook/manager-api";
+
 import theme from "./theme";
 
 addons.setConfig({
-    theme: theme,
+  theme,
 });

.storybook/preview.css

@@ -27,4 +27,4 @@
 /* Style for the value column in the props panel */
 #storybook-panel-root .css-1wjen9k .css-1p3m7a8 {
   min-width: 300px !important;
-}
+}

.storybook/preview.tsx

@@ -1,102 +1,105 @@
-import React, { useState, useEffect } from "react";
+import type { Preview } from "@storybook/react";
+
 import "../src/style/main.css";
 import "@fontsource/inter";
+
 import "./preview.css";
 
-import type { Preview } from "@storybook/react";
+import React, { useEffect, useState } from "react";
 
 const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-            expanded: true,
-        },
-        layout: "fullscreen",
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      expanded: true,
     },
+    layout: "fullscreen",
+  },
 };
 
-const withJsonEditor = (Story, context) => {
-    const { args } = context;
-    const { oldValue, newValue } = args;
+function withJsonEditor(Story, context) {
+  const { args } = context;
+  const { oldValue, newValue } = args;
 
-    const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
-    const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
-    const [oldJsonError, setOldJsonError] = useState("");
-    const [newJsonError, setNewJsonError] = useState("");
-    const [parsedOldValue, setParsedOldValue] = useState(oldValue);
-    const [parsedNewValue, setParsedNewValue] = useState(newValue);
+  const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
+  const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
+  const [oldJsonError, setOldJsonError] = useState("");
+  const [newJsonError, setNewJsonError] = useState("");
+  const [parsedOldValue, setParsedOldValue] = useState(oldValue);
+  const [parsedNewValue, setParsedNewValue] = useState(newValue);
 
-    const validateJson = (jsonString: string) => {
-        try {
-            return { error: "", parsed: JSON.parse(jsonString) };
-        } catch (error) {
-            return { error: "Invalid JSON format", parsed: null };
-        }
-    };
+  const validateJson = (jsonString: string) => {
+    try {
+      return { error: "", parsed: JSON.parse(jsonString) };
+    }
+    catch {
+      return { error: "Invalid JSON format", parsed: null };
+    }
+  };
 
-    useEffect(() => {
-        const { error, parsed } = validateJson(oldJson);
-        setOldJsonError(error);
-        if (!error) {
-            setParsedOldValue(parsed);
-        }
-    }, [oldJson]);
+  useEffect(() => {
+    const { error, parsed } = validateJson(oldJson);
+    setOldJsonError(error);
+    if (!error) {
+      setParsedOldValue(parsed);
+    }
+  }, [oldJson]);
 
-    useEffect(() => {
-        const { error, parsed } = validateJson(newJson);
-        setNewJsonError(error);
-        if (!error) {
-            setParsedNewValue(parsed);
-        }
-    }, [newJson]);
+  useEffect(() => {
+    const { error, parsed } = validateJson(newJson);
+    setNewJsonError(error);
+    if (!error) {
+      setParsedNewValue(parsed);
+    }
+  }, [newJson]);
 
-    return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-            <div style={{ display: "flex", gap: "20px" }}>
-                <div style={{ flex: 1 }}>
-                    <h3>Old Value</h3>
-                    <textarea
-                        style={{
-                            width: "100%",
-                            height: "200px",
-                            padding: "10px",
-                            fontFamily: "monospace",
-                            backgroundColor: "#f5f5f5",
-                            border: oldJsonError ? "1px solid red" : "1px solid #ddd",
-                            borderRadius: "4px",
-                        }}
-                        value={oldJson}
-                        onChange={(e) => setOldJson(e.target.value)}
-                    />
-                    {oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
-                </div>
-                <div style={{ flex: 1 }}>
-                    <h3>New Value</h3>
-                    <textarea
-                        style={{
-                            width: "100%",
-                            height: "200px",
-                            padding: "10px",
-                            fontFamily: "monospace",
-                            backgroundColor: "#f5f5f5",
-                            border: newJsonError ? "1px solid red" : "1px solid #ddd",
-                            borderRadius: "4px",
-                        }}
-                        value={newJson}
-                        onChange={(e) => setNewJson(e.target.value)}
-                    />
-                    {newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
-                </div>
-            </div>
-            {!oldJsonError && !newJsonError && (
-                <Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
-            )}
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+      <div style={{ display: "flex", gap: "20px" }}>
+        <div style={{ flex: 1 }}>
+          <h3>Old Value</h3>
+          <textarea
+            style={{
+              width: "100%",
+              height: "200px",
+              padding: "10px",
+              fontFamily: "monospace",
+              backgroundColor: "#f5f5f5",
+              border: oldJsonError ? "1px solid red" : "1px solid #ddd",
+              borderRadius: "4px",
+            }}
+            value={oldJson}
+            onChange={e => setOldJson(e.target.value)}
+          />
+          {oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
         </div>
-    );
-};
+        <div style={{ flex: 1 }}>
+          <h3>New Value</h3>
+          <textarea
+            style={{
+              width: "100%",
+              height: "200px",
+              padding: "10px",
+              fontFamily: "monospace",
+              backgroundColor: "#f5f5f5",
+              border: newJsonError ? "1px solid red" : "1px solid #ddd",
+              borderRadius: "4px",
+            }}
+            value={newJson}
+            onChange={e => setNewJson(e.target.value)}
+          />
+          {newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
+        </div>
+      </div>
+      {!oldJsonError && !newJsonError && (
+        <Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
+      )}
+    </div>
+  );
+}
 
 export const decorators = [withJsonEditor];
 

.storybook/theme.ts

@@ -1,41 +1,41 @@
 import { create } from "@storybook/theming/create";
 
 export default create({
-    base: "light",
-    brandTitle: "Virtual React Json Diff",
-    brandUrl: "https://virtual-react-json-diff.netlify.app",
-    // brandImage: "./image.png",
-    brandTarget: "_self",
-    gridCellSize: 20,
+  base: "light",
+  brandTitle: "Virtual React Json Diff",
+  brandUrl: "https://virtual-react-json-diff.netlify.app",
+  // brandImage: "./image.png",
+  brandTarget: "_self",
+  gridCellSize: 20,
 
-    // Typography
-    fontBase: '"Open Sans", sans-serif',
-    fontCode: "monospace",
+  // Typography
+  fontBase: "\"Open Sans\", sans-serif",
+  fontCode: "monospace",
 
-    //
-    colorPrimary: "#3A10E5",
-    colorSecondary: "#585C6D",
+  //
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
 
-    // UI
-    appBg: "#ffffff",
-    appContentBg: "#ffffff",
-    appPreviewBg: "#ffffff",
-    appBorderColor: "#585C6D",
-    appBorderRadius: 4,
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#585C6D",
+  appBorderRadius: 4,
 
-    // Text colors
-    textColor: "#10162F",
-    textInverseColor: "#ffffff",
+  // Text colors
+  textColor: "#10162F",
+  textInverseColor: "#ffffff",
 
-    // Toolbar default and active colors
-    barTextColor: "#9E9E9E",
-    barSelectedColor: "#585C6D",
-    barHoverColor: "#585C6D",
-    barBg: "#ffffff",
+  // Toolbar default and active colors
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#585C6D",
+  barHoverColor: "#585C6D",
+  barBg: "#ffffff",
 
-    // Form colors
-    inputBg: "#ffffff",
-    inputBorder: "#10162F",
-    inputTextColor: "#10162F",
-    inputBorderRadius: 2,
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#10162F",
+  inputTextColor: "#10162F",
+  inputBorderRadius: 2,
 });

.vscode/settings.json

@@ -0,0 +1,52 @@
+{
+  "cSpell.words": ["Iconify", "persistor"],
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}