Chore: migrate styles to macaron (#17)

https://macaron.js.org/

.gitignore

@@ -16,8 +16,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

package.json

@@ -14,11 +14,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@macaron-css/core": "^1.5.2",
+    "@macaron-css/solid": "^1.5.3",
     "@techstark/opencv-js": "^4.9.0-release.3",
     "potpack": "^2.0.0",
     "solid-js": "^1.8.15"
   },
   "devDependencies": {
+    "@macaron-css/vite": "^1.5.1",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "eslint": "^8.57.0",
     "eslint-plugin-solid": "^0.14.0",

src/App.tsx

@@ -1,13 +1,65 @@
+import { styled } from "@macaron-css/solid";
 import { Show } from "solid-js";
-import "./App.css";
 import { Editor, EditorToolbar } from "./Editor";
 import { Region } from "./Region";
 import { Texture, TextureToolbar } from "./Texture";
 import { createDnd, createResize } from "./hooks";
 import { AppStoreProvider, useAppStore } from "./store";
 
+// default export because of lazy loading in <Loader>
 export default App;
 
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    width: "100%",
+    height: "100vh",
+  },
+});
+
+const RegionBorder = styled("div", {
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    textAlign: "center",
+    background: "whitesmoke",
+    cursor: "col-resize",
+    border: "1px solid lightgrey",
+    borderWidth: "0 1px",
+  },
+});
+
+const RegionBorderHandler = styled("div", {
+  base: {
+    width: "4px",
+    height: "10%",
+    minHeight: "30px",
+    background: "darkgray",
+    outline: "1px solid darkgray",
+  },
+});
+
+const ImageDrop = styled("div", {
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100vh",
+    zIndex: 99,
+    opacity: 0.95,
+    backgroundColor: "gray",
+    color: "black",
+    fontSize: "3rem",
+    pointerEvents: "none",
+  },
+});
+
 function App() {
   return (
     <AppStoreProvider>
@@ -24,8 +76,7 @@ function TextureRipper() {
   const resize = createResize();
 
   return (
-    <div
-      class="app"
+    <Container
       onDrop={dnd.onDrop}
       onDragEnter={dnd.onDragEnter}
       onDragOver={dnd.onDragOver}
@@ -41,14 +92,13 @@ function TextureRipper() {
           <Editor />
         </Region>
 
-        <div
-          class="region-border"
+        <RegionBorder
           onMouseDown={resize.activate}
           onMouseUp={resize.deactivate}
           onDblClick={resize.reset}
         >
-          <div class="region-border-handle" />
-        </div>
+          <RegionBorderHandler />
+        </RegionBorder>
 
         <Region
           toolbar={<TextureToolbar />}
@@ -60,9 +110,9 @@ function TextureRipper() {
       </Show>
 
       <Show when={dnd.isDragOver()}>
-        <div class="image-drop">Drop image here to upload</div>
+        <ImageDrop>Drop image here to upload</ImageDrop>
       </Show>
-    </div>
+    </Container>
   );
 }
 

src/Editor.tsx

@@ -1,28 +1,63 @@
+import { styled } from "@macaron-css/solid";
 import { createMemo, createSignal, For, onMount, Show } from "solid-js";
-import "./Editor.css";
 import { Header } from "./Header";
-import { Help } from './Help';
+import { Help } from "./Help";
 import { useRegionContext } from "./Region";
 import { useAppStore } from "./store";
 import { type Point as PointId, type Quad } from "./store/editor";
 import { v } from "./vector";
 
 type Point = { x: number; y: number };
 
+const Container = styled("div", {
+  base: {
+    userSelect: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    border: "1px solid white",
+  },
+});
+
+const Canvas = styled("svg", {
+  base: {
+    userSelect: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    border: "1px solid white",
+  },
+});
+
+const Toolbar = styled("div", {
+  base: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "whitesmoke",
+    padding: "5px 10px",
+    width: "100%",
+    whiteSpace: "nowrap",
+  },
+});
+
 export function Editor() {
   const [store] = useAppStore().file;
 
   // image reference is pointing at the same img element,
   // but we must retrigger each time the image is loaded
-  const [imageRef, setImageRef] = createSignal<HTMLImageElement | undefined>(undefined, { equals: false });
+  const [imageRef, setImageRef] = createSignal<HTMLImageElement | undefined>(
+    undefined,
+    { equals: false }
+  );
 
   return (
-    <div class="editor-canvas">
+    <Container>
       <ImageBackground src={store.url} onLoadRef={setImageRef} />
       <Show when={imageRef()}>
         <DrawingBoard imageRef={imageRef()!} />
       </Show>
-    </div>
+    </Container>
   );
 }
 
@@ -35,7 +70,7 @@ export function EditorToolbar() {
   const move = useRegionContext();
 
   return (
-    <div class="editor-toolbar">
+    <Toolbar>
       <div>
         Size: {width()} x {height()} Current: {move.current().x},{" "}
         {move.current().y} Origin: {move.origin().x}, {move.origin().y}
@@ -44,7 +79,7 @@ export function EditorToolbar() {
         <Help />
         <Header />
       </div>
-    </div>
+    </Toolbar>
   );
 }
 
@@ -123,9 +158,8 @@ function DrawingBoard(props: { imageRef: HTMLImageElement }) {
   onMount(() => svgRef()!.focus());
 
   return (
-    <svg
+    <Canvas
       ref={setSvgRef}
-      class="editor-canvas"
       viewBox={viewBox()}
       style={style()}
       onClick={onClick}
@@ -159,7 +193,7 @@ function DrawingBoard(props: { imageRef: HTMLImageElement }) {
       <Show when={points().length === 3}>
         <Line from={bottom()} to={top()} withTip={true} color="darkred" />
       </Show>
-    </svg>
+    </Canvas>
   );
 }
 

src/Header.tsx

@@ -1,5 +1,14 @@
+import { styled } from "@macaron-css/solid";
 import { createSignal } from "solid-js";
 
+const Title = styled("span", {
+  base: {
+    fontSize: "1.2rem",
+    userSelect: "none",
+    width: "fit-content",
+  },
+});
+
 export function Header() {
   const titles = [
     { icon: "🧦👜", text: "Sockbag" },
@@ -21,13 +30,12 @@ export function Header() {
   }
 
   return (
-    <span
-      class="app-title"
+    <Title
       title={`${title().text} Texture Ripper`}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       {title().icon}
-    </span>
+    </Title>
   );
 }