From 657769845966e873e66e503a3d667564cc3b1f58 Mon Sep 17 00:00:00 2001 From: e560248 Date: Tue, 8 Apr 2025 12:54:07 +0200 Subject: [PATCH] add prettier setup --- .vscode/settings.json | 3 +- react-advanced-tag1/.prettierrc.mjs | 12 ++ react-advanced-tag1/package-lock.json | 17 ++ react-advanced-tag1/package.json | 6 +- react-advanced-tag1/src/App.css | 4 +- react-advanced-tag1/src/App.tsx | 29 +-- .../ComponentWrapper/ComponentWrapper.css | 12 +- .../ComponentWrapper/ComponentWrapper.tsx | 27 +-- .../src/common/components/Footer.test.tsx | 18 +- .../src/common/components/Footer.tsx | 14 +- .../common/components/Header/Navigation.tsx | 51 ++++-- .../src/common/components/Header/index.tsx | 18 +- .../src/common/components/Modal.css | 2 +- .../src/common/components/Modal.tsx | 35 ++-- .../exercises/EffectExercises/index.tsx | 42 ++--- .../exercises/HocExercise/DogImages.tsx | 25 ++- .../exercises/HocExercise/WithLoader.tsx | 66 +++---- .../exercises/HocExercise/dogimages.css | 2 +- .../exercises/MemoCallback/Search.tsx | 16 +- .../exercises/MemoCallback/index.test.tsx | 72 ++++---- .../exercises/MemoCallback/index.tsx | 50 +++-- .../exercises/RefExercise/index.tsx | 173 ++++++++++-------- .../components/exercises/UserEffect.tsx | 141 ++++++++------ .../components/exercises/UserOverview.tsx | 66 ++++--- .../src/common/components/globals/Heading.tsx | 16 +- .../src/common/hooks/useFetch.ts | 75 ++++---- .../src/common/hooks/useLocalStorage.ts | 74 ++++---- .../src/common/hooks/useMediaQuery.ts | 37 ++-- .../src/common/stores/counter-store.ts | 12 +- .../src/common/utils/shuffle.test.ts | 34 ++-- .../src/common/utils/shuffle.ts | 17 +- .../src/layouts/MainLayout.css | 59 +++--- .../src/layouts/MainLayout.tsx | 38 ++-- react-advanced-tag1/src/main.tsx | 2 +- .../src/pages/ComponentWrapperPage.tsx | 18 +- .../src/pages/EffectExercisesPage.tsx | 19 +- react-advanced-tag1/src/pages/FormsPage.tsx | 18 +- react-advanced-tag1/src/pages/HocPage.tsx | 7 +- react-advanced-tag1/src/pages/HomePage.tsx | 16 +- .../src/pages/MemoCallbackPage.tsx | 18 +- react-advanced-tag1/src/pages/ModalPage.tsx | 28 +-- react-advanced-tag1/src/pages/UsersPage.tsx | 22 +-- .../src/pages/ZustandCounterPage.tsx | 24 +-- 43 files changed, 781 insertions(+), 654 deletions(-) create mode 100644 react-advanced-tag1/.prettierrc.mjs diff --git a/.vscode/settings.json b/.vscode/settings.json index 56adebf..043e4c5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,5 +29,6 @@ }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "prettier.configPath": "react-advanced-tag1/.prettierrc.mjs" } diff --git a/react-advanced-tag1/.prettierrc.mjs b/react-advanced-tag1/.prettierrc.mjs new file mode 100644 index 0000000..202bd46 --- /dev/null +++ b/react-advanced-tag1/.prettierrc.mjs @@ -0,0 +1,12 @@ +/** + * @see https://prettier.io/docs/configuration + * @type {import("prettier").Config} + */ +const config = { + trailingComma: "es5", + tabWidth: 2, + semi: false, + singleQuote: true, +}; + +export default config; \ No newline at end of file diff --git a/react-advanced-tag1/package-lock.json b/react-advanced-tag1/package-lock.json index ec30ece..fae4452 100644 --- a/react-advanced-tag1/package-lock.json +++ b/react-advanced-tag1/package-lock.json @@ -27,6 +27,7 @@ "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", "jsdom": "^26.0.0", + "prettier": "3.5.3", "typescript": "~5.7.2", "typescript-eslint": "^8.24.1", "vite": "^6.2.0", @@ -4257,6 +4258,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-format": { "version": "27.5.1", "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/pretty-format/-/pretty-format-27.5.1.tgz", diff --git a/react-advanced-tag1/package.json b/react-advanced-tag1/package.json index 9bf392e..0d9f79d 100644 --- a/react-advanced-tag1/package.json +++ b/react-advanced-tag1/package.json @@ -13,7 +13,8 @@ "test:watch": "vitest --watch", "test:coverage": "vitest --coverage", "test:coverage:report": "vitest --coverage --reporter=html", - "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html" + "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html", + "prettier": "prettier ./src --write" }, "dependencies": { "react": "^19.0.0", @@ -35,9 +36,10 @@ "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", "jsdom": "^26.0.0", + "prettier": "3.5.3", "typescript": "~5.7.2", "typescript-eslint": "^8.24.1", "vite": "^6.2.0", "vitest": "^3.1.1" } -} +} \ No newline at end of file diff --git a/react-advanced-tag1/src/App.css b/react-advanced-tag1/src/App.css index 80815d6..57094a9 100644 --- a/react-advanced-tag1/src/App.css +++ b/react-advanced-tag1/src/App.css @@ -1,5 +1,3 @@ - - .logo { height: 6em; padding: 1.5em; @@ -36,7 +34,7 @@ color: #888; } -input[type="text"] { +input[type='text'] { border-radius: 6px; padding: 1rem 0.5rem; } diff --git a/react-advanced-tag1/src/App.tsx b/react-advanced-tag1/src/App.tsx index 8707ae1..e6f4c04 100644 --- a/react-advanced-tag1/src/App.tsx +++ b/react-advanced-tag1/src/App.tsx @@ -13,20 +13,21 @@ import ModalPage from './pages/ModalPage' import { HocPage } from './pages/HocPage' function App() { - - return - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + return ( + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ) } export default App diff --git a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css index d847ffb..b64230c 100644 --- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css +++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css @@ -10,10 +10,10 @@ } .component-content { - width: 100%; - max-width: 800px; - background-color: #888; - border-radius: 8px; - padding: 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 800px; + background-color: #888; + border-radius: 8px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } diff --git a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx index d27d829..6ec464b 100644 --- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx +++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx @@ -1,17 +1,18 @@ import './ComponentWrapper.css' interface ComponentWrapperProps { - title?: string; - children: React.ReactNode; + title?: string + children: React.ReactNode +} +export default function ComponentWrapper({ + children, + title, +}: ComponentWrapperProps): React.ReactElement { + console.log('ComponentWrapper rendered:', title) + return ( +
+ {title &&

{title}

} +
{children}
+
+ ) } -export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement { - console.log("ComponentWrapper rendered:", title); - return ( -
- {title &&

{title}

} -
- {children} -
-
- ); -} \ No newline at end of file diff --git a/react-advanced-tag1/src/common/components/Footer.test.tsx b/react-advanced-tag1/src/common/components/Footer.test.tsx index 55c05d0..a23653d 100644 --- a/react-advanced-tag1/src/common/components/Footer.test.tsx +++ b/react-advanced-tag1/src/common/components/Footer.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from "@testing-library/react"; -import Footer from "./Footer"; -import { describe, it, expect } from "vitest"; +import { render, screen } from '@testing-library/react' +import Footer from './Footer' +import { describe, it, expect } from 'vitest' -describe("Footer Component", () => { - it("should render the footer with correct content", () => { - render(