Skip to content

Commit ffef657

Browse files
utkuakyuzutkuakyuz
authored
feat: merge pull request from /eslint-operations
This pull request significantly refactors the project's development environment by introducing a new ESLint configuration based on Antfu's setup. The primary goal is to establish a consistent code formatting and quality standard. This involves removing obsolete files, adding new configuration for VS Code, and integrating pre-commit hooks to automatically fix linting issues.
2 parents 80b41b8 + 0aed5d0 commit ffef657

23 files changed

+1330
-1224
lines changed

‎.gitignore‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ dist
1212
dist-ssr
1313
*.local
1414
*-lock.json
15+
pnpm-lock.yaml
1516

1617
# Editor directories and files
17-
.vscode
18-
.vscode/*
19-
!.vscode/extensions.json
2018
.idea
2119
.DS_Store
2220
*.suo

‎.storybook/document.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎.storybook/main.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import type { StorybookConfig } from "@storybook/react-vite";
22

33
const config: StorybookConfig = {
4-
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5-
addons: [
6-
"@storybook/addon-onboarding",
7-
"@storybook/addon-essentials",
8-
"@storybook/addon-interactions",
9-
"@storybook/addon-styling-webpack",
10-
],
11-
framework: {
12-
name: "@storybook/react-vite",
13-
options: {},
14-
},
15-
staticDirs: ["../public"],
16-
previewHead: (head) => `
4+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5+
addons: [
6+
"@storybook/addon-onboarding",
7+
"@storybook/addon-essentials",
8+
"@storybook/addon-interactions",
9+
"@storybook/addon-styling-webpack",
10+
],
11+
framework: {
12+
name: "@storybook/react-vite",
13+
options: {},
14+
},
15+
staticDirs: ["../public"],
16+
previewHead: head => `
1717
${head}
1818
${`<link
1919
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‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { addons } from "@storybook/manager-api";
2+
23
import theme from "./theme";
34

45
addons.setConfig({
5-
theme: theme,
6+
theme,
67
});

‎.storybook/preview.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@
2727
/* Style for the value column in the props panel */
2828
#storybook-panel-root .css-1wjen9k .css-1p3m7a8 {
2929
min-width: 300px !important;
30-
}
30+
}

‎.storybook/preview.tsx‎

Lines changed: 87 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,105 @@
1-
import React, { useState, useEffect } from "react";
1+
import type { Preview } from "@storybook/react";
2+
23
import "../src/style/main.css";
34
import "@fontsource/inter";
5+
46
import "./preview.css";
57

6-
import type { Preview } from "@storybook/react";
8+
import React, { useEffect, useState } from "react";
79

810
const preview: Preview = {
9-
parameters: {
10-
controls: {
11-
matchers: {
12-
color: /(background|color)$/i,
13-
date: /Date$/i,
14-
},
15-
expanded: true,
16-
},
17-
layout: "fullscreen",
11+
parameters: {
12+
controls: {
13+
matchers: {
14+
color: /(background|color)$/i,
15+
date: /Date$/i,
16+
},
17+
expanded: true,
1818
},
19+
layout: "fullscreen",
20+
},
1921
};
2022

21-
const withJsonEditor = (Story, context) => {
22-
const { args } = context;
23-
const { oldValue, newValue } = args;
23+
function withJsonEditor(Story, context) {
24+
const { args } = context;
25+
const { oldValue, newValue } = args;
2426

25-
const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
26-
const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
27-
const [oldJsonError, setOldJsonError] = useState("");
28-
const [newJsonError, setNewJsonError] = useState("");
29-
const [parsedOldValue, setParsedOldValue] = useState(oldValue);
30-
const [parsedNewValue, setParsedNewValue] = useState(newValue);
27+
const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
28+
const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
29+
const [oldJsonError, setOldJsonError] = useState("");
30+
const [newJsonError, setNewJsonError] = useState("");
31+
const [parsedOldValue, setParsedOldValue] = useState(oldValue);
32+
const [parsedNewValue, setParsedNewValue] = useState(newValue);
3133

32-
const validateJson = (jsonString: string) => {
33-
try {
34-
return { error: "", parsed: JSON.parse(jsonString) };
35-
} catch (error) {
36-
return { error: "Invalid JSON format", parsed: null };
37-
}
38-
};
34+
const validateJson = (jsonString: string) => {
35+
try {
36+
return { error: "", parsed: JSON.parse(jsonString) };
37+
}
38+
catch {
39+
return { error: "Invalid JSON format", parsed: null };
40+
}
41+
};
3942

40-
useEffect(() => {
41-
const { error, parsed } = validateJson(oldJson);
42-
setOldJsonError(error);
43-
if (!error) {
44-
setParsedOldValue(parsed);
45-
}
46-
}, [oldJson]);
43+
useEffect(() => {
44+
const { error, parsed } = validateJson(oldJson);
45+
setOldJsonError(error);
46+
if (!error) {
47+
setParsedOldValue(parsed);
48+
}
49+
}, [oldJson]);
4750

48-
useEffect(() => {
49-
const { error, parsed } = validateJson(newJson);
50-
setNewJsonError(error);
51-
if (!error) {
52-
setParsedNewValue(parsed);
53-
}
54-
}, [newJson]);
51+
useEffect(() => {
52+
const { error, parsed } = validateJson(newJson);
53+
setNewJsonError(error);
54+
if (!error) {
55+
setParsedNewValue(parsed);
56+
}
57+
}, [newJson]);
5558

56-
return (
57-
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
58-
<div style={{ display: "flex", gap: "20px" }}>
59-
<div style={{ flex: 1 }}>
60-
<h3>Old Value</h3>
61-
<textarea
62-
style={{
63-
width: "100%",
64-
height: "200px",
65-
padding: "10px",
66-
fontFamily: "monospace",
67-
backgroundColor: "#f5f5f5",
68-
border: oldJsonError ? "1px solid red" : "1px solid #ddd",
69-
borderRadius: "4px",
70-
}}
71-
value={oldJson}
72-
onChange={(e) => setOldJson(e.target.value)}
73-
/>
74-
{oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
75-
</div>
76-
<div style={{ flex: 1 }}>
77-
<h3>New Value</h3>
78-
<textarea
79-
style={{
80-
width: "100%",
81-
height: "200px",
82-
padding: "10px",
83-
fontFamily: "monospace",
84-
backgroundColor: "#f5f5f5",
85-
border: newJsonError ? "1px solid red" : "1px solid #ddd",
86-
borderRadius: "4px",
87-
}}
88-
value={newJson}
89-
onChange={(e) => setNewJson(e.target.value)}
90-
/>
91-
{newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
92-
</div>
93-
</div>
94-
{!oldJsonError && !newJsonError && (
95-
<Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
96-
)}
59+
return (
60+
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
61+
<div style={{ display: "flex", gap: "20px" }}>
62+
<div style={{ flex: 1 }}>
63+
<h3>Old Value</h3>
64+
<textarea
65+
style={{
66+
width: "100%",
67+
height: "200px",
68+
padding: "10px",
69+
fontFamily: "monospace",
70+
backgroundColor: "#f5f5f5",
71+
border: oldJsonError ? "1px solid red" : "1px solid #ddd",
72+
borderRadius: "4px",
73+
}}
74+
value={oldJson}
75+
onChange={e => setOldJson(e.target.value)}
76+
/>
77+
{oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
9778
</div>
98-
);
99-
};
79+
<div style={{ flex: 1 }}>
80+
<h3>New Value</h3>
81+
<textarea
82+
style={{
83+
width: "100%",
84+
height: "200px",
85+
padding: "10px",
86+
fontFamily: "monospace",
87+
backgroundColor: "#f5f5f5",
88+
border: newJsonError ? "1px solid red" : "1px solid #ddd",
89+
borderRadius: "4px",
90+
}}
91+
value={newJson}
92+
onChange={e => setNewJson(e.target.value)}
93+
/>
94+
{newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
95+
</div>
96+
</div>
97+
{!oldJsonError && !newJsonError && (
98+
<Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
99+
)}
100+
</div>
101+
);
102+
}
100103

101104
export const decorators = [withJsonEditor];
102105

‎.storybook/theme.ts‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
import { create } from "@storybook/theming/create";
22

33
export default create({
4-
base: "light",
5-
brandTitle: "Virtual React Json Diff",
6-
brandUrl: "https://virtual-react-json-diff.netlify.app",
7-
// brandImage: "./image.png",
8-
brandTarget: "_self",
9-
gridCellSize: 20,
4+
base: "light",
5+
brandTitle: "Virtual React Json Diff",
6+
brandUrl: "https://virtual-react-json-diff.netlify.app",
7+
// brandImage: "./image.png",
8+
brandTarget: "_self",
9+
gridCellSize: 20,
1010

11-
// Typography
12-
fontBase: '"Open Sans", sans-serif',
13-
fontCode: "monospace",
11+
// Typography
12+
fontBase: "\"Open Sans\", sans-serif",
13+
fontCode: "monospace",
1414

15-
//
16-
colorPrimary: "#3A10E5",
17-
colorSecondary: "#585C6D",
15+
//
16+
colorPrimary: "#3A10E5",
17+
colorSecondary: "#585C6D",
1818

19-
// UI
20-
appBg: "#ffffff",
21-
appContentBg: "#ffffff",
22-
appPreviewBg: "#ffffff",
23-
appBorderColor: "#585C6D",
24-
appBorderRadius: 4,
19+
// UI
20+
appBg: "#ffffff",
21+
appContentBg: "#ffffff",
22+
appPreviewBg: "#ffffff",
23+
appBorderColor: "#585C6D",
24+
appBorderRadius: 4,
2525

26-
// Text colors
27-
textColor: "#10162F",
28-
textInverseColor: "#ffffff",
26+
// Text colors
27+
textColor: "#10162F",
28+
textInverseColor: "#ffffff",
2929

30-
// Toolbar default and active colors
31-
barTextColor: "#9E9E9E",
32-
barSelectedColor: "#585C6D",
33-
barHoverColor: "#585C6D",
34-
barBg: "#ffffff",
30+
// Toolbar default and active colors
31+
barTextColor: "#9E9E9E",
32+
barSelectedColor: "#585C6D",
33+
barHoverColor: "#585C6D",
34+
barBg: "#ffffff",
3535

36-
// Form colors
37-
inputBg: "#ffffff",
38-
inputBorder: "#10162F",
39-
inputTextColor: "#10162F",
40-
inputBorderRadius: 2,
36+
// Form colors
37+
inputBg: "#ffffff",
38+
inputBorder: "#10162F",
39+
inputTextColor: "#10162F",
40+
inputBorderRadius: 2,
4141
});

‎.vscode/settings.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"cSpell.words": ["Iconify", "persistor"],
3+
// Disable the default formatter, use eslint instead
4+
"prettier.enable": false,
5+
"editor.formatOnSave": false,
6+
7+
// Auto fix
8+
"editor.codeActionsOnSave": {
9+
"source.fixAll.eslint": "explicit",
10+
"source.organizeImports": "never"
11+
},
12+
13+
// Silent the stylistic rules in you IDE, but still auto fix them
14+
"eslint.rules.customizations": [
15+
{ "rule": "style/*", "severity": "off", "fixable": true },
16+
{ "rule": "format/*", "severity": "off", "fixable": true },
17+
{ "rule": "*-indent", "severity": "off", "fixable": true },
18+
{ "rule": "*-spacing", "severity": "off", "fixable": true },
19+
{ "rule": "*-spaces", "severity": "off", "fixable": true },
20+
{ "rule": "*-order", "severity": "off", "fixable": true },
21+
{ "rule": "*-dangle", "severity": "off", "fixable": true },
22+
{ "rule": "*-newline", "severity": "off", "fixable": true },
23+
{ "rule": "*quotes", "severity": "off", "fixable": true },
24+
{ "rule": "*semi", "severity": "off", "fixable": true }
25+
],
26+
27+
// Enable eslint for all supported languages
28+
"eslint.validate": [
29+
"javascript",
30+
"javascriptreact",
31+
"typescript",
32+
"typescriptreact",
33+
"vue",
34+
"html",
35+
"markdown",
36+
"json",
37+
"json5",
38+
"jsonc",
39+
"yaml",
40+
"toml",
41+
"xml",
42+
"gql",
43+
"graphql",
44+
"astro",
45+
"svelte",
46+
"css",
47+
"less",
48+
"scss",
49+
"pcss",
50+
"postcss"
51+
]
52+
}

0 commit comments

Comments
 (0)