Prettier

.vscode/settings.json

@@ -3,7 +3,7 @@
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"workbench.colorCustomizations": {
 		"titleBar.activeBackground": "#673ab7",

apps/app/src/app/(no-layout)/login/layout.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 
 export default function LoginPageLayout({ children }: { readonly children: ReactNode }) {
-	return <div className="flex min-h-full min-h-[100dvh] items-center bg-primary">{children}</div>;
+	return <div className="flex min-h-[100dvh] min-h-full items-center bg-primary">{children}</div>;
 }

apps/app/src/components/BaseModal/BaseModal.tsx

@@ -28,7 +28,7 @@ export const BaseModal = ({ isOpen, onClose, children, modalId }: BaseModalProps
 
 	return (
 		<Transition
-			className="fixed top-0 left-0 z-50 h-full w-full overflow-y-auto bg-black/50 sm:p-2"
+			className="fixed left-0 top-0 z-50 h-full w-full overflow-y-auto bg-black/50 sm:p-2"
 			onClick={onClose}
 			show={isOpen}
 			enter="transition-opacity duration-200"

apps/app/src/components/Footer.tsx

@@ -6,7 +6,7 @@ export const Footer = () => (
 	<footer className="bg-primary">
 		<Container className="flex flex-col items-center justify-center py-5 sm:justify-end">
 			<nav className="flex text-sm text-white">
-				<ul className="flex list-none flex-wrap justify-center gap-y-4 gap-x-7">
+				<ul className="flex list-none flex-wrap justify-center gap-x-7 gap-y-4">
 					<li>
 						<Link href="/jak-korzystac" className="transition-opacity hover:opacity-80">
 							Jak korzystać?

apps/app/src/components/Header/DarkModeSwitch.tsx

@@ -11,7 +11,7 @@ export const DarkModeSwitch = () => {
 				type="checkbox"
 				role="switch"
 				aria-label="Przełącz pomiędzy ciemnym i jasnym motywem"
-				className="relative h-6 w-10 cursor-pointer appearance-none rounded-full bg-violet-800 before:absolute before:top-1 before:left-1 before:h-[16px] before:w-[16px] before:rounded-full before:bg-white before:transition-all before:duration-200 dark:bg-violet-700 [&:checked]:before:left-[calc(100%-0.25rem)] [&:checked]:before:-translate-x-full"
+				className="relative h-6 w-10 cursor-pointer appearance-none rounded-full bg-violet-800 before:absolute before:left-1 before:top-1 before:h-[16px] before:w-[16px] before:rounded-full before:bg-white before:transition-all before:duration-200 dark:bg-violet-700 [&:checked]:before:left-[calc(100%-0.25rem)] [&:checked]:before:-translate-x-full"
 				checked={theme === "dark"}
 				onChange={() => changeTheme(theme === "dark" ? "light" : "dark")}
 			/>

apps/app/src/components/Header/HeaderNavigation.tsx

@@ -32,7 +32,7 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
 					isOpen ? "flex" : "hidden",
 				)}
 			>
-				<div className="mt-auto mb-auto flex flex-col items-center gap-10 sm:flex-row sm:gap-5">
+				<div className="mb-auto mt-auto flex flex-col items-center gap-10 sm:flex-row sm:gap-5">
 					<ul className="flex list-none flex-col items-center gap-10 text-center sm:flex-row sm:gap-5">
 						<li>
 							<ActiveNavigationLink href="/jak-korzystac" onClick={handleClickLink}>

apps/app/src/components/MarkdownContent.tsx

@@ -12,7 +12,7 @@ export const MarkdownContent = ({ source }: MarkdownContentProps) => {
 	return (
 		<div
 			itemProp="text"
-			className="question-content prose prose-sm min-w-0 max-w-full grow break-words px-2 prose-code:px-0 prose-pre:bg-transparent prose-pre:px-0 prose-pre:text-base dark:prose-invert md:prose-base md:prose-pre:text-base"
+			className="question-content prose prose-sm min-w-0 max-w-full grow break-words px-2 dark:prose-invert md:prose-base prose-code:px-0 prose-pre:bg-transparent prose-pre:px-0 prose-pre:text-base md:prose-pre:text-base"
 		>
 			<MDXRemote {...source} />
 		</div>

apps/app/src/components/QuestionsSidebar/QuestionsSidebar.tsx

@@ -32,7 +32,7 @@ export const QuestionsSidebar = () => {
 			<Button variant="brandingInverse" className="mt-auto sm:hidden" onClick={closeSidebar}>
 				Pokaż wyniki
 			</Button>
-			<CloseButton className="absolute top-1 right-1 sm:hidden" onClick={closeSidebar} />
+			<CloseButton className="absolute right-1 top-1 sm:hidden" onClick={closeSidebar} />
 		</aside>
 	);
 };

apps/app/src/components/StaticPageContainer.tsx

@@ -8,7 +8,7 @@ type StaticPageContainerProps = Readonly<{
 export const StaticPageContainer = ({ children }: StaticPageContainerProps) => (
 	<Container
 		as="article"
-		className="static-page-shadow prose my-3 scroll-mt-14 bg-white p-4 pb-16 text-neutral-800 dark:bg-white-dark dark:prose-invert dark:text-neutral-200 sm:p-8 sm:pb-16"
+		className="static-page-shadow prose my-3 scroll-mt-14 bg-white p-4 pb-16 text-neutral-800 dark:prose-invert dark:bg-white-dark dark:text-neutral-200 sm:p-8 sm:pb-16"
 		id="main-content"
 	>
 		{children}

apps/app/src/components/Tip.tsx

@@ -9,7 +9,7 @@ type TipProps = Readonly<{
 export const Tip = ({ className, children }: TipProps) => (
 	<div
 		className={twMerge(
-			"bg-stone-200 py-4 px-5 text-sm text-neutral-900 shadow-inner dark:bg-neutral-700 dark:text-neutral-200 sm:py-7 sm:px-14",
+			"bg-stone-200 px-5 py-4 text-sm text-neutral-900 shadow-inner dark:bg-neutral-700 dark:text-neutral-200 sm:px-14 sm:py-7",
 			className,
 		)}
 	>

apps/app/src/components/WysiwygEditor/WysiwygEditor.tsx

@@ -132,7 +132,7 @@ export const WysiwygEditor = memo(({ value, onChange }: WysiwygEditorProps) => {
 						fallback={
 							<Loading
 								label="Ładowanie podglądu…"
-								className="absolute top-0 left-1/2 -translate-x-1/2"
+								className="absolute left-1/2 top-0 -translate-x-1/2"
 							/>
 						}
 					>
@@ -141,13 +141,13 @@ export const WysiwygEditor = memo(({ value, onChange }: WysiwygEditorProps) => {
 				) : (
 					<textarea
 						aria-label="Wpisz treść pytania"
-						className="prose prose-sm relative z-10 h-full w-full max-w-full resize-none bg-white py-2 px-4 focus:outline-0 dark:bg-white-dark dark:prose-invert md:prose-base"
+						className="prose prose-sm relative z-10 h-full w-full max-w-full resize-none bg-white px-4 py-2 dark:prose-invert md:prose-base focus:outline-0 dark:bg-white-dark"
 						ref={textAreaRef}
 						value={value}
 						onChange={(event) => onChange(event.target.value)}
 					/>
 				)}
-				<Loading label="Ładowanie podglądu…" className="absolute top-0 left-1/2 -translate-x-1/2" />
+				<Loading label="Ładowanie podglądu…" className="absolute left-1/2 top-0 -translate-x-1/2" />
 			</div>
 		</div>
 	);

apps/app/src/styles/devfaq-theme.css

@@ -12,7 +12,7 @@ pre[class*="language-"] {
 }
 
 pre[class*="language-"] {
-	@apply my-[0.5em] mx-0 overflow-auto p-[2em];
+	@apply mx-0 my-[0.5em] overflow-auto p-[2em];
 }
 
 :not(pre) > code[class*="language-"],

package.json

@@ -29,9 +29,7 @@
 		"typescript": "4.9.4"
 	},
 	"engines": {
-		"npm": ">=7.0.0",
-		"pnpm": ">=7.11.0",
-		"node": ">=18.0.0 <19"
+		"node": "^20.0.0"
 	},
-	"packageManager": "pnpm@7.17.0"
+	"packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
 }