fix: mantine charts example (#37)

This PR finally fixes all Mantine extensions and components used in the Mantine example and should resolve #20. Mantine Charts are working now using the alpha version of Recharts to be compatible with React 19 tracked in recharts/recharts#4558. Removes now unnecessary Vite `resolve.alias` workarounds. Also included are some UI updates on the example: using the original Mantine logo, fixing some typos and changing how CSS files are imported for each page instead of all CSS are imported in the layout.
lazarv · Sep 13, 2024 · 591e694 · 591e694
1 parent dd5be79
commit 591e694
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 145 deletions.
diff --git a/examples/mantine/package.json b/examples/mantine/package.json
@@ -26,6 +26,7 @@
     "@mantine/nprogress": "^7.12.2",
     "@mantine/spotlight": "^7.12.2",
     "@mantine/tiptap": "^7.12.2",
+    "@mantinex/mantine-logo": "^1.0.1",
     "@tabler/icons-react": "^3.16.0",
     "@tiptap/extension-highlight": "^2.6.6",
     "@tiptap/extension-link": "^2.6.6",
@@ -37,7 +38,7 @@
     "@tiptap/react": "^2.6.6",
     "@tiptap/starter-kit": "^2.6.6",
     "dayjs": "^1.11.13",
-    "recharts": "2"
+    "recharts": "2.13.0-alpha.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.5",

diff --git a/examples/mantine/react-server.config.mjs b/examples/mantine/react-server.config.mjs
@@ -1,7 +1,3 @@
-import { createRequire } from "node:module";
-
-const require = createRequire(import.meta.url);
-
 export default {
   root: "src/pages",
   public: "public",
@@ -10,18 +6,6 @@ export default {
   },
   resolve: {
     alias: [
-      {
-        find: "victory-vendor/d3-shape",
-        replacement: require
-          .resolve("victory-vendor/d3-shape")
-          .replace("/lib/", "/es/"),
-      },
-      {
-        find: "victory-vendor/d3-scale",
-        replacement: require
-          .resolve("victory-vendor/d3-scale")
-          .replace("/lib/", "/es/"),
-      },
       {
         find: "highlight.js",
         replacement: "highlight.js",

diff --git a/examples/mantine/src/components/AppLayout.tsx b/examples/mantine/src/components/AppLayout.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { Link } from "@lazarv/react-server/navigation";
-import { AppShell, Burger, Group, Title } from "@mantine/core";
+import { AppShell, Burger, Group } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { MantineLogo } from "@mantinex/mantine-logo";
+import { IconPlus } from "@tabler/icons-react";
 
 import AppLogo from "./AppLogo";
 import { MainNavigation } from "./MainNavigation";
@@ -31,8 +33,9 @@ export function AppLayout({
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
           <Link to="/" style={{ textDecoration: "none", color: "inherit" }}>
             <Group ml="lg">
-              <AppLogo height={"50px"} width={"50px"} />
-              <Title order={1}>Mantine</Title>
+              <AppLogo height={"32px"} width={"32px"} />
+              <IconPlus size={24} />
+              <MantineLogo size={32} />
             </Group>
           </Link>
         </Group>

diff --git a/examples/mantine/src/components/MainNavigation.tsx b/examples/mantine/src/components/MainNavigation.tsx
@@ -62,19 +62,19 @@ export function MainNavigation({ serverPathname }: { serverPathname: string }) {
       <NavLink
         component={Link}
         to="/navigationprogress"
-        label="Navigation Progress"
+        label="NavigationProgress"
         active={pathname === "/navigationprogress"}
       />
       <NavLink
         component={Link}
         to="/modalsmanager"
-        label="Modals Manager"
+        label="Modals manager"
         active={pathname === "/modalsmanager"}
       />
       <NavLink
         component={Link}
         to="/rte"
-        label="Rich Text Editor"
+        label="Rich text editor"
         active={pathname === "/rte"}
       />
     </>

diff --git a/examples/mantine/src/components/charts/LineChart/MyLineChart.tsx b/examples/mantine/src/components/charts/LineChart/MyLineChart.tsx
diff --git a/examples/mantine/src/pages/carousel.tsx b/examples/mantine/src/pages/carousel.tsx
@@ -1,3 +1,5 @@
+import "@mantine/carousel/styles.css";
+
 import MyCarousel from "../components/MyCarousel";
 
 export default async function CarouselsPage() {
@@ -14,8 +16,8 @@ export default async function CarouselsPage() {
 
 const getData = async () => {
   const data = {
-    title: "Ext / Carousels",
-    headline: "Extentions / Carousels",
+    title: "Ext / Carousel",
+    headline: "Extentions / Carousel",
   };
 
   return data;

diff --git a/examples/mantine/src/pages/charts.tsx b/examples/mantine/src/pages/charts.tsx
@@ -1,8 +1,9 @@
+import "@mantine/charts/styles.css";
+
 import { ClientOnly } from "@lazarv/react-server/client";
 
 import MyAreaChart from "../components/charts/AreaChart/MyAreaChart";
 import MyBarChart from "../components/charts/BarChart/MyBarChart";
-import MyLineChart from "../components/charts/LineChart/MyLineChart";
 
 export default async function ChartsPage() {
   const data = await getData();
@@ -19,11 +20,9 @@ export default async function ChartsPage() {
       </div>
       <div>
         <h2>Bar Chart</h2>
-        <MyBarChart />
-      </div>
-      <div>
-        <h2>Bar Chart</h2>
-        <MyLineChart />
+        <ClientOnly>
+          <MyBarChart />
+        </ClientOnly>
       </div>
     </div>
   );

diff --git a/examples/mantine/src/pages/code.tsx b/examples/mantine/src/pages/code.tsx
@@ -1,3 +1,5 @@
+import "@mantine/code-highlight/styles.css";
+
 import MyCodeHighlight from "../components/MyCodeHighlight";
 
 export default async function FormsPage() {
@@ -14,8 +16,8 @@ export default async function FormsPage() {
 
 const getData = async () => {
   const data = {
-    title: "Ext / CodeHighlight",
-    headline: "Extentions / CodeHighlight",
+    title: "Ext / Code Highlight",
+    headline: "Extentions / Code Highlight",
   };
 
   return data;

diff --git a/examples/mantine/src/pages/dates.tsx b/examples/mantine/src/pages/dates.tsx
@@ -1,3 +1,5 @@
+import "@mantine/dates/styles.css";
+
 import MyDates from "../components/MyDates";
 
 export default async function DatesPage() {
@@ -14,8 +16,8 @@ export default async function DatesPage() {
 
 const getData = async () => {
   const data = {
-    title: "Ext / Carousels",
-    headline: "Extentions / Carousels",
+    title: "Ext / Dates",
+    headline: "Extentions / Dates",
   };
 
   return data;

diff --git a/examples/mantine/src/pages/dropzone.tsx b/examples/mantine/src/pages/dropzone.tsx
@@ -14,8 +14,8 @@ export default async function DropzonesPage() {
 
 const getData = async () => {
   const data = {
-    title: "Ext / Dropzones",
-    headline: "Extentions / Dropzones",
+    title: "Ext / Dropzone",
+    headline: "Extentions / Dropzone",
   };
 
   return data;

diff --git a/examples/mantine/src/pages/index.tsx b/examples/mantine/src/pages/index.tsx
@@ -19,7 +19,12 @@ const getData = async () => {
   const data = {
     title: "@lazarv/react-server",
     headline: "Mantine UI example",
-    body: "This is an example of how to use @lazarv/react-server with Mantine UI.",
+    body: (
+      <>
+        This is an example of how to use <b>@lazarv/react-server</b> with{" "}
+        <b>Mantine UI.</b>
+      </>
+    ),
   };
 
   return data;

diff --git a/examples/mantine/src/pages/layout.tsx b/examples/mantine/src/pages/layout.tsx
@@ -1,12 +1,4 @@
 import "@mantine/core/styles.css";
-import "@mantine/dates/styles.css";
-import "@mantine/charts/styles.css";
-import "@mantine/code-highlight/styles.css";
-import "@mantine/notifications/styles.css";
-import "@mantine/nprogress/styles.css";
-import "@mantine/spotlight/styles.css";
-import "@mantine/carousel/styles.css";
-import "@mantine/tiptap/styles.css";
 
 import { usePathname } from "@lazarv/react-server";
 import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";

diff --git a/examples/mantine/src/pages/navigationprogress.tsx b/examples/mantine/src/pages/navigationprogress.tsx
@@ -1,3 +1,5 @@
+import "@mantine/nprogress/styles.css";
+
 import MyNavigationProgress from "../components/MyNavigationProgress";
 
 export default async function NavigationProgressesPage() {
@@ -14,8 +16,8 @@ export default async function NavigationProgressesPage() {
 
 const getData = async () => {
   const data = {
-    title: "Ext / NavigationsProgresses",
-    headline: "Extentions / NavigationsProgresses",
+    title: "Ext / NavigationProgress",
+    headline: "Extentions / NavigationProgress",
   };
 
   return data;

diff --git a/examples/mantine/src/pages/notification.tsx b/examples/mantine/src/pages/notification.tsx
@@ -1,3 +1,5 @@
+import "@mantine/notifications/styles.css";
+
 import MyNotification from "../components/MyNotification";
 
 export default async function NotificationsPage() {

diff --git a/examples/mantine/src/pages/rte.tsx b/examples/mantine/src/pages/rte.tsx
@@ -1,3 +1,5 @@
+import "@mantine/tiptap/styles.css";
+
 import MyRichTextEditor from "../components/MyRichTextEditor";
 
 export default async function RtePage() {

diff --git a/examples/mantine/src/pages/spotlight.tsx b/examples/mantine/src/pages/spotlight.tsx
@@ -1,3 +1,5 @@
+import "@mantine/spotlight/styles.css";
+
 import MySpotlight from "../components/MySpotlight";
 
 export default async function SpotlightsPage() {