Fixed and upgraded tests

Linkurious · Sep 13, 2024 · 77a2863 · 77a2863
1 parent d4c3c29
commit 77a2863
Show file tree

Hide file tree

Showing 17 changed files with 1,248 additions and 535 deletions.
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -2,16 +2,18 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import "./src/index.css";
 import App from "./src/App";
-import { GeistProvider, CssBaseline } from "@geist-ui/core";
+import "@mantine/core/styles.css";
+import { MantineProvider, createTheme } from "@mantine/core";
 
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 
+const theme = createTheme({});
+
 root.render(
   <React.StrictMode>
-    <GeistProvider>
-      <CssBaseline />
+    <MantineProvider theme={theme}>
       <App />
-    </GeistProvider>
+    </MantineProvider>
   </React.StrictMode>
 );
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -7,7 +7,7 @@ import OgmaLib, {
 } from "@linkurious/ogma";
 import { useEffect, useState, createRef, useCallback } from "react";
 // loading indicator
-import { Loading } from "@geist-ui/core";
+import { LoadingOverlay } from "@mantine/core";
 // for geo mode
 import * as L from "leaflet";
 // components
@@ -32,6 +32,7 @@ import { Controls } from "./components/Controls";
 import { MousePosition } from "./components/MousePosition";
 import { Logo } from "./components/Logo";
 import { UpdateGroupingButton } from "./components/UpdateGroupingButton";
+import "@mantine/core/styles.css";
 
 // to enable geo mode integration
 OgmaLib.libraries["leaflet"] = L;
@@ -96,7 +97,7 @@ export default function App() {
   }, []);
 
   // nothing to render yet
-  if (loading) return <Loading />;
+  if (loading) return <LoadingOverlay zIndex={400} />;
 
   return (
     <div className="App">

diff --git a/demo/src/components/Controls.tsx b/demo/src/components/Controls.tsx
@@ -1,6 +1,14 @@
 import { useState } from "react";
-import { Drawer, Text, Button, Toggle, Slider, Spacer } from "@geist-ui/core";
-import { Menu as MenuIcon, X as XIcon } from "@geist-ui/icons";
+import {
+  Drawer,
+  Text,
+  Title,
+  Switch as Toggle,
+  Slider,
+  ActionIcon,
+  Space,
+} from "@mantine/core";
+import { Menu as MenuIcon } from "react-feather";
 
 interface ControlsProps {
   toggleNodeGrouping: (value: boolean) => void;
@@ -25,84 +33,90 @@ export function Controls({
 }: ControlsProps) {
   //const ogma = useOgma();
   const [drawerShown, setDrawerShown] = useState(false);
+  const [nodeSize, setNodeSizeLocal] = useState(5);
+  const [edgeWidth, setEdgeWidthLocal] = useState(0.25);
   return (
     <>
       <div className="control-buttons">
-        <Button
-          onClick={() => setDrawerShown(!drawerShown)}
-          icon={<MenuIcon />}
-          w="28px"
-          h="28px"
-          px={0.5}
-          title="Show controls"
-          auto
-        />
+        {!drawerShown && (
+          <ActionIcon
+            onClick={() => setDrawerShown(!drawerShown)}
+            w="28px"
+            h="28px"
+            px={0.5}
+            title="Show controls"
+            variant="outline"
+          >
+            <MenuIcon />
+          </ActionIcon>
+        )}
       </div>
       <Drawer
-        visible={drawerShown}
+        opened={drawerShown}
         onClose={() => setDrawerShown(false)}
-        placement="right"
+        position="right"
         className="controls"
       >
-        <Drawer.Title>
-          <Text>Controls</Text>
-          <Button
+        <Title order={2}>Controls</Title>
+        <Space h="xl" />
+        {/* <Button
             onClick={() => setDrawerShown(!drawerShown)}
             icon={<XIcon />}
             auto
-            type="abort"
+            variant="outline"
             px={0.5}
+          /> */}
+        <div className="controls-section">
+          <Toggle
+            checked={nodeGrouping}
+            onChange={() => toggleNodeGrouping(!nodeGrouping)}
+            label="Node grouping"
+          />
+        </div>
+        <div className="controls-section">
+          <Text>Node size</Text>
+          <Slider
+            value={nodeSize}
+            max={50}
+            min={1}
+            step={0.25}
+            onClickCapture={(evt) => evt.stopPropagation()}
+            onChange={(value) => {
+              setNodeSize(value);
+              setNodeSizeLocal(value);
+            }}
+            label="Node size"
+          />
+        </div>
+        <Space />
+        <div className="controls-section">
+          <Text>Edge width</Text>
+          <Slider
+            value={edgeWidth}
+            max={5}
+            min={0.05}
+            step={0.25}
+            onClickCapture={(evt) => evt.stopPropagation()}
+            onChange={(value) => {
+              setEdgeWidth(value);
+              setEdgeWidthLocal(value);
+            }}
+          />
+        </div>
+        <div className="controls-section">
+          <Toggle
+            checked={outlines}
+            onChange={() => setOutlines(!outlines)}
+            label="Node outlines"
+          />
+        </div>
+        <div className="controls-section">
+          <Toggle
+            checked={geoEnabled}
+            onChange={() => setGeoEnabled(!geoEnabled)}
+            label="Geo mode"
           />
-        </Drawer.Title>
-        <Drawer.Content>
-          <div className="controls-section">
-            <Toggle
-              checked={nodeGrouping}
-              onChange={() => toggleNodeGrouping(!nodeGrouping)}
-            />
-            <span className="controls-section-label">Node grouping</span>
-          </div>
-          <Spacer h={1} />
-          <div className="controls-section">
-            <Text>Node size</Text>
-            <Slider
-              initialValue={5}
-              max={50}
-              min={1}
-              step={0.25}
-              onClickCapture={(evt) => evt.stopPropagation()}
-              onChange={setNodeSize}
-            />
-          </div>
-          <Spacer h={1} />
-          <div className="controls-section">
-            <Text>Edge width</Text>
-            <Slider
-              initialValue={0.25}
-              max={5}
-              min={0.05}
-              step={0.5}
-              onClickCapture={(evt) => evt.stopPropagation()}
-              onChange={setEdgeWidth}
-            />
-          </div>
-          <Spacer h={1} />
-          <div className="controls-section">
-            <Toggle
-              checked={outlines}
-              onChange={() => setOutlines(!outlines)}
-            />
-            <span className="controls-section-label">Node outlines</span>
-          </div>
-          <Spacer h={1} />
-          <div className="controls-section">
-            <Toggle
-              checked={geoEnabled}
-              onChange={() => setGeoEnabled(!geoEnabled)}
-            />
-            <span className="controls-section-label">Geo mode</span>
-          </div>
-        </Drawer.Content>
+        </div>
       </Drawer>
     </>
   );

diff --git a/demo/src/components/Logo.tsx b/demo/src/components/Logo.tsx
@@ -1,21 +1,23 @@
-import { Button, Spacer, Link } from "@geist-ui/core";
-import { Github as GithubIcon } from "@geist-ui/icons";
+import { Space, ActionIcon } from "@mantine/core";
+import { GitHub as GithubIcon } from "react-feather";
 import { Icon as ReactIcon } from "./ReactIcon";
 
 export const Logo = () => {
   return (
     <div className="Logo">
-      Ogma + <ReactIcon /> React <Spacer inline />
-      <Link href="https://github.com/linkurious/ogma-react">
-        <Button
-          icon={<GithubIcon />}
+      Ogma + <ReactIcon width={18} height={18} className="ReactIcon" /> React
+      <Space w="md" />
+      <a href="https://github.com/linkurious/ogma-react" target="_blank">
+        <ActionIcon
+          variant="outline"
           w="28px"
           h="28px"
           px={0.5}
           title="Go to code"
-          auto
-        />
-      </Link>
+        >
+          <GithubIcon />
+        </ActionIcon>
+      </a>
     </div>
   );
 };
diff --git a/demo/src/components/ReactIcon.tsx b/demo/src/components/ReactIcon.tsx
@@ -1,10 +1,11 @@
-export const Icon = ({ width = 12, height = 12 }) => (
+export const Icon = ({ width = 12, height = 12, ...props }) => (
   <svg
     width={width}
     height={height}
     role="img"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       fill="currentColor"

diff --git a/demo/src/index.css b/demo/src/index.css
@@ -33,6 +33,7 @@ code {
   top: 15px;
   left: 15px;
   z-index: 401;
+  display: flex;
 }
 
 :root {
@@ -78,7 +79,8 @@ code {
   height: 0;
   border-style: solid;
   border-width: 6px 7px 6px 0;
-  border-color: transparent var(--overlay-background-color) transparent transparent;
+  border-color: transparent var(--overlay-background-color) transparent
+    transparent;
   position: absolute;
   left: 50%;
   top: auto;
@@ -146,19 +148,22 @@ code {
 
 .control-buttons {
   position: absolute;
-  z-index: 401;
+  z-index: 400;
   right: 20px;
   top: 20px;
 }
 
-.controls .controls-section-label {
-  padding-left: 1em;
-  vertical-align: middle;
+.controls-section {
+  margin-bottom: 2em;
 }
 
 #button {
   position: absolute;
   left: 10px;
   top: 10px;
   z-index: 401;
-}
+}
+
+.ReactIcon {
+  margin: 3px;
+}