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(