fix: optimize deps

examples/mantine/package.json

@@ -13,12 +13,38 @@
   "dependencies": {
     "@lazarv/react-server": "workspace:^",
     "@lazarv/react-server-router": "workspace:^",
+    "@mantine/carousel": "^7.12.2",
+    "@mantine/charts": "^7.12.2",
+    "@mantine/code-highlight": "^7.12.2",
     "@mantine/core": "^7.12.2",
-    "@mantine/hooks": "^7.12.2"
+    "@mantine/dates": "^7.12.2",
+    "@mantine/dropzone": "^7.12.2",
+    "@mantine/form": "^7.12.2",
+    "@mantine/hooks": "^7.12.2",
+    "@mantine/modals": "^7.12.2",
+    "@mantine/notifications": "^7.12.2",
+    "@mantine/nprogress": "^7.12.2",
+    "@mantine/spotlight": "^7.12.2",
+    "@mantine/tiptap": "^7.12.2",
+    "@tabler/icons-react": "^3.16.0",
+    "@tiptap/extension-highlight": "^2.6.6",
+    "@tiptap/extension-link": "^2.6.6",
+    "@tiptap/extension-subscript": "^2.6.6",
+    "@tiptap/extension-superscript": "^2.6.6",
+    "@tiptap/extension-text-align": "^2.6.6",
+    "@tiptap/extension-underline": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/react": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
+    "dayjs": "^1.11.13",
+    "recharts": "2"
   },
   "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "postcss": "^8.4.43",
     "postcss-preset-mantine": "^1.17.0",
-    "postcss-simple-vars": "^7.0.1"
+    "postcss-simple-vars": "^7.0.1",
+    "typescript": "^5.1.3"
   }
 }

examples/mantine/react-server.config.mjs

@@ -1,11 +1,33 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
 export default {
-  root: "app",
+  root: "src/pages",
   public: "public",
-  page: {
-    include: ["**/page.jsx"],
+  optimizeDeps: {
+    exclude: ["@mantine/core"],
   },
-  layout: {
-    include: ["**/layout.jsx"],
+  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",
+      },
+    ],
+    external: ["dayjs"],
   },
   build: {
     chunkSizeWarningLimit: 1000,

examples/mantine/src/components/Combox.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useState } from "react";
+
+import { Autocomplete } from "@mantine/core";
+
+export default function ComboBox() {
+  const [value, setValue] = useState<string>("");
+  return (
+    <>
+      <Autocomplete
+        value={value}
+        onChange={setValue}
+        label="Your favorite library"
+        placeholder="Pick value or enter anything"
+        data={["React", "Angular", "Vue", "Svelte"]}
+      />
+    </>
+  );
+}

examples/mantine/src/components/Counter.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@mantine/core";
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+      <div>Count: {count}</div>
+      <Button onClick={handleIncrement}>Increment</Button>
+    </section>
+  );
+};

examples/mantine/src/components/ModalsProvider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ModalsProvider } from "@mantine/modals";
+
+export default function ModalsProviderDemo({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ModalsProvider>{children}</ModalsProvider>;
+}

examples/mantine/src/components/MyCarousel.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Carousel } from "@mantine/carousel";
+
+const slideStyles = (backgroundColor: string) => ({
+  backgroundColor,
+  padding: 16,
+  color: "white",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export default function MyCarousel() {
+  return (
+    <Carousel withIndicators height={200}>
+      <Carousel.Slide style={slideStyles("red")}>
+        <h1>1</h1>
+      </Carousel.Slide>
+      <Carousel.Slide style={slideStyles("blue")}>
+        <h1>2</h1>
+      </Carousel.Slide>
+      <Carousel.Slide style={slideStyles("green")}>
+        <h1>3</h1>
+      </Carousel.Slide>
+      {/* ...other slides */}
+    </Carousel>
+  );
+}

examples/mantine/src/components/MyCodeHighlight.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { CodeHighlight } from "@mantine/code-highlight";
+
+const exampleCode = `
+// VisuallyHidden component source code
+
+import {
+  Box,
+  BoxProps,
+  StylesApiProps,
+  factory,
+  ElementProps,
+  useProps,
+  useStyles,
+  Factory,
+} from '../../core';
+import classes from './VisuallyHidden.module.css';
+
+export type VisuallyHiddenStylesNames = 'root';
+
+export interface VisuallyHiddenProps
+  extends BoxProps,
+    StylesApiProps<VisuallyHiddenFactory>,
+    ElementProps<'div'> {}
+
+export type VisuallyHiddenFactory = Factory<{
+  props: VisuallyHiddenProps;
+  ref: HTMLDivElement;
+  stylesNames: VisuallyHiddenStylesNames;
+}>;
+
+const defaultProps: Partial<VisuallyHiddenProps> = {};
+
+export const VisuallyHidden = factory<VisuallyHiddenFactory>((_props, ref) => {
+  const props = useProps('VisuallyHidden', defaultProps, _props);
+  const { classNames, className, style, styles, unstyled, vars, ...others } = props;
+
+  const getStyles = useStyles<VisuallyHiddenFactory>({
+    name: 'VisuallyHidden',
+    classes,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+  });
+
+  return <Box component="span" ref={ref} {...getStyles('root')} {...others} />;
+});
+
+VisuallyHidden.classes = classes;
+VisuallyHidden.displayName = '@mantine/core/VisuallyHidden';
+`;
+export default function MyCodeHighlight() {
+  return <CodeHighlight code={exampleCode} language="tsx" />;
+}

examples/mantine/src/components/MyDate.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useState } from "react";
+
+//import 'dayjs/locale/de';
+import { DateInput } from "@mantine/dates";
+
+export default function MyDate() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <DateInput
+      //locale="de"
+      value={value}
+      onChange={setValue}
+      label="Date input"
+      placeholder="Date input"
+    />
+  );
+}

examples/mantine/src/components/MyDropzone.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Group, rem, Text } from "@mantine/core";
+import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from "@mantine/dropzone";
+import { IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+
+export default function MyDropzone(props: Partial<DropzoneProps>) {
+  return (
+    <Dropzone
+      onDrop={(files) => console.log("accepted files", files)}
+      onReject={(files) => console.log("rejected files", files)}
+      maxSize={5 * 1024 ** 2}
+      accept={IMAGE_MIME_TYPE}
+      {...props}
+    >
+      <Group
+        justify="center"
+        gap="xl"
+        mih={220}
+        style={{ pointerEvents: "none" }}
+      >
+        <Dropzone.Accept>
+          <IconUpload
+            style={{
+              width: rem(52),
+              height: rem(52),
+              color: "var(--mantine-color-blue-6)",
+            }}
+            stroke={1.5}
+          />
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <IconX
+            style={{
+              width: rem(52),
+              height: rem(52),
+              color: "var(--mantine-color-red-6)",
+            }}
+            stroke={1.5}
+          />
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconPhoto
+            style={{
+              width: rem(52),
+              height: rem(52),
+              color: "var(--mantine-color-dimmed)",
+            }}
+            stroke={1.5}
+          />
+        </Dropzone.Idle>
+
+        <div>
+          <Text size="xl" inline>
+            Drag images here or click to select files
+          </Text>
+          <Text size="sm" c="dimmed" inline mt={7}>
+            Attach as many files as you like, each file should not exceed 5mb
+          </Text>
+        </div>
+      </Group>
+    </Dropzone>
+  );
+}

examples/mantine/src/components/MyModal.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Button, Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+
+export default function MyModal() {
+  const openModal = () =>
+    modals.openConfirmModal({
+      title: "Please confirm your action",
+      children: (
+        <Text size="sm">
+          This action is so important that you are required to confirm it with a
+          modal. Please click one of these buttons to proceed.
+        </Text>
+      ),
+      labels: { confirm: "Confirm", cancel: "Cancel" },
+      onCancel: () => console.log("Cancel"),
+      onConfirm: () => console.log("Confirmed"),
+    });
+
+  return <Button onClick={openModal}>Open confirm modal</Button>;
+}

examples/mantine/src/components/MyNavigationProgress.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { Button, Group } from "@mantine/core";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+
+export default function MyNavigationProgress() {
+  return (
+    <>
+      <NavigationProgress />
+      <Group justify="center">
+        <Button onClick={() => nprogress.start()}>Start</Button>
+        <Button onClick={() => nprogress.stop()}>Stop</Button>
+        <Button onClick={() => nprogress.increment()}>Increment</Button>
+        <Button onClick={() => nprogress.decrement()}>Decrement</Button>
+        <Button onClick={() => nprogress.set(50)}>Set 50%</Button>
+        <Button onClick={() => nprogress.reset()}>Reset</Button>
+        <Button onClick={() => nprogress.complete()}>Complete</Button>
+      </Group>
+    </>
+  );
+}