feat: adds prettier to the repo

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+.gitkeep

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 4,
+  "trailingComma": "all",
+  "useTabs": false
+}

package.json

@@ -15,6 +15,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "prettier:check": "prettier --check src/**/*",
+    "prettier:write": "prettier --write src/**/*",
     "check:react-compiler": "node tools/check-react-compiler.mjs"
   },
   "dependencies": {
@@ -56,6 +59,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "playwright": "^1.58.2",
+    "prettier": "3.8.4",
     "storybook": "^10.2.8",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.55.0",

src/App.tsx

@@ -29,37 +29,53 @@ function App() {
                 <Route path="/ipc-permission" element={<IpcPermissionPage />} />
 
                 {/* Main launcher window */}
-                <Route path="/*" element={
-                    <CssVarsProvider defaultMode="dark" modeStorageKey="pudu-color-mode" theme={themeRegistry[themeId]}>
-                        <CssBaseline />
-                        <GlobalStyles styles={themeScrollbarRegistry[themeId]} />
-                        <FeedbackContextProvider>
-                            <UpdateContextProvider>
-                                <IpcContextProvider>
-                                <DiscordJoinContextProvider>
-                                    <ServersContextProvider>
-                                        <TtsStateContextProvider>
-                                            <TtsInstallerContextProvider>
-                                                <OnboardingContextProvider>
-                                                    <Routes>
-                                                        <Route element={<SideBarLayout />}>
-                                                            <Route path="/" element={<ServersPage />} />
-                                                            <Route path="/installations" element={<InstallationsPage />} />
-                                                            <Route path="/news" element={<NewsPage />} />
-                                                            <Route path="/preferences" element={<PreferencesPage />} />
-                                                            <Route path="*" element={<WorkInProgressLayout />} />
-                                                        </Route>
-                                                    </Routes>
-                                                </OnboardingContextProvider>
-                                            </TtsInstallerContextProvider>
-                                        </TtsStateContextProvider>
-                                    </ServersContextProvider>
-                                </DiscordJoinContextProvider>
-                                </IpcContextProvider>
-                            </UpdateContextProvider>
-                        </FeedbackContextProvider>
-                    </CssVarsProvider>
-                } />
+                <Route
+                    path="/*"
+                    element={
+                        <CssVarsProvider
+                            defaultMode="dark"
+                            modeStorageKey="pudu-color-mode"
+                            theme={themeRegistry[themeId]}
+                        >
+                            <CssBaseline />
+                            <GlobalStyles styles={themeScrollbarRegistry[themeId]} />
+                            <FeedbackContextProvider>
+                                <UpdateContextProvider>
+                                    <IpcContextProvider>
+                                        <DiscordJoinContextProvider>
+                                            <ServersContextProvider>
+                                                <TtsStateContextProvider>
+                                                    <TtsInstallerContextProvider>
+                                                        <OnboardingContextProvider>
+                                                            <Routes>
+                                                                <Route element={<SideBarLayout />}>
+                                                                    <Route path="/" element={<ServersPage />} />
+                                                                    <Route
+                                                                        path="/installations"
+                                                                        element={<InstallationsPage />}
+                                                                    />
+                                                                    <Route path="/news" element={<NewsPage />} />
+                                                                    <Route
+                                                                        path="/preferences"
+                                                                        element={<PreferencesPage />}
+                                                                    />
+                                                                    <Route
+                                                                        path="*"
+                                                                        element={<WorkInProgressLayout />}
+                                                                    />
+                                                                </Route>
+                                                            </Routes>
+                                                        </OnboardingContextProvider>
+                                                    </TtsInstallerContextProvider>
+                                                </TtsStateContextProvider>
+                                            </ServersContextProvider>
+                                        </DiscordJoinContextProvider>
+                                    </IpcContextProvider>
+                                </UpdateContextProvider>
+                            </FeedbackContextProvider>
+                        </CssVarsProvider>
+                    }
+                />
             </Routes>
         </BrowserRouter>
     );

src/components/atoms/news/ChangeEntry.stories.tsx

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import ChangeEntry from './ChangeEntry';
+import ChangeEntry from "./ChangeEntry";
 
 const meta = {
-  component: ChangeEntry,
+    component: ChangeEntry,
 } satisfies Meta<typeof ChangeEntry>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const New: Story = {
-  "args": {
-    "description": "Added something super awesome!",
-    "author": "John Doe",
-    "type": "NEW"
-  }
+    args: {
+        description: "Added something super awesome!",
+        author: "John Doe",
+        type: "NEW",
+    },
 };
 
 export const Fix: Story = {
-  "args": {
-    "description": "Fixed a bug where the application would crash on startup.",
-    "author": "John Doe",
-    "type": "FIX"
-  }
+    args: {
+        description: "Fixed a bug where the application would crash on startup.",
+        author: "John Doe",
+        type: "FIX",
+    },
 };
 
 export const Improvement: Story = {
-  "args": {
-    "description": "Improved performance of the application.",
-    "author": "John Doe",
-    "type": "IMPROVEMENT"
-  }
+    args: {
+        description: "Improved performance of the application.",
+        author: "John Doe",
+        type: "IMPROVEMENT",
+    },
 };
 export const Balance: Story = {
-  "args": {
-    "description": "Balanced gameplay mechanics.",
-    "author": "John Doe",
-    "type": "BALANCE"
-  }
-};
+    args: {
+        description: "Balanced gameplay mechanics.",
+        author: "John Doe",
+        type: "BALANCE",
+    },
+};

src/components/atoms/news/ChangeEntry.tsx

@@ -4,7 +4,6 @@ import { AutoAwesome, Balance, Build, QuestionMark, RocketLaunch } from "@mui/ic
 
 type ChangeTypeContrained = "FIX" | "NEW" | "IMPROVEMENT" | "BALANCE";
 
-
 export default function ChangeEntry(props: Change) {
     const { description, author, type } = props;
     const changeType = type as ChangeTypeContrained;
@@ -31,10 +30,14 @@ export default function ChangeEntry(props: Change) {
                     {getIconByType()}
                 </Tooltip>
                 <Stack>
-                    <Typography level="body-md" sx={{ color: "primary.plainColor" }}>{description}</Typography>
-                    <Typography level="body-xs" sx={{ color: "text.primary" }}>By {author}</Typography>
+                    <Typography level="body-md" sx={{ color: "primary.plainColor" }}>
+                        {description}
+                    </Typography>
+                    <Typography level="body-xs" sx={{ color: "text.primary" }}>
+                        By {author}
+                    </Typography>
                 </Stack>
             </Stack>
-        </Card >
+        </Card>
     );
-}
+}

src/components/atoms/preferences/PreferenceFieldLabel.stories.tsx

@@ -33,4 +33,3 @@ export const WithoutTooltip: Story = {
         label: "Installation path",
     },
 };
-

src/components/atoms/servers/ServerFact.tsx

@@ -10,15 +10,8 @@ export default function ServerFact(props: ServerFactProps) {
     const { icon, value } = props;
 
     return (
-        <Stack
-            direction="row"
-            spacing={0.5}
-            alignItems="center"
-            sx={{ "--Icon-fontSize": "var(--joy-fontSize-lg)" }}
-        >
-            <Box sx={{ display: "flex", alignItems: "center", color: "text.tertiary" }}>
-                {icon}
-            </Box>
+        <Stack direction="row" spacing={0.5} alignItems="center" sx={{ "--Icon-fontSize": "var(--joy-fontSize-lg)" }}>
+            <Box sx={{ display: "flex", alignItems: "center", color: "text.tertiary" }}>{icon}</Box>
             <Typography level="body-sm" sx={{ color: "text.secondary" }} noWrap title={value}>
                 {value}
             </Typography>

src/components/atoms/update/VersionBadge.tsx

@@ -17,10 +17,7 @@ export default function VersionBadge(props: VersionBadgeProps) {
                 Version
             </Typography>
             <Stack direction="row" alignItems="center" spacing={1.5}>
-                <Typography
-                    level="body-sm"
-                    sx={{ color: "text.secondary", fontFamily: "monospace" }}
-                >
+                <Typography level="body-sm" sx={{ color: "text.secondary", fontFamily: "monospace" }}>
                     {currentVersion}
                 </Typography>
                 <Box
@@ -30,7 +27,8 @@ export default function VersionBadge(props: VersionBadgeProps) {
                         width: 28,
                         height: 2,
                         borderRadius: 1,
-                        background: "linear-gradient(90deg, var(--joy-palette-neutral-600), var(--joy-palette-primary-400))",
+                        background:
+                            "linear-gradient(90deg, var(--joy-palette-neutral-600), var(--joy-palette-primary-400))",
                     }}
                 />
                 <Typography

src/components/demo/ThemeDemoLayout.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import ThemeDemoLayout from './ThemeDemoLayout';
+import ThemeDemoLayout from "./ThemeDemoLayout";
 
 const meta = {
-  component: ThemeDemoLayout,
+    component: ThemeDemoLayout,
 } satisfies Meta<typeof ThemeDemoLayout>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {};