react-robot-vacuum 1.0.2 → 1.0.4

package/README.md

@@ -1,20 +1,8 @@
 # 🤖 React Robot Vacuum
 
-An animated React component featuring an autonomous robot vacuum that cleans your page by collecting dirt particles. Built with TypeScript, React 19, and CSS Modules.
+An animated React component featuring an autonomous robot vacuum that cleans your page by collecting dirt particles. Built with TypeScript, React and CSS
 
-![Robot Vacuum Demo](https://via.placeholder.com/800x400?text=Robot+Vacuum+Demo)
-
-## ✨ Features
-
-- 🎯 **Autonomous Navigation** - Robot intelligently navigates to dirt particles
-- 🔄 **Smooth Animations** - Realistic acceleration, rotation, and movement
-- ⏸️ **Window Focus Detection** - Automatically pauses when tab is inactive
-- 🎮 **Imperative Control** - Start, stop, and reset via ref
-- 📢 **Lifecycle Callbacks** - Track cleaning progress with events
-- ⚙️ **Fully Customizable** - Props for size, position, speed, and more
-- 💪 **TypeScript** - Full type safety with exported interfaces
-- 🎨 **CSS Modules** - Scoped styling, no conflicts
-- ⚡ **React 17/18/19** - Compatible with all modern React versions
+![Robot Vacuum Demo](https://codesandbox.io/p/sandbox/react-robot-vacuum-4xlm7j)
 
 ## 📦 Installation
 
@@ -87,86 +75,9 @@ function App() {
 - **`startCleaning()`** - Manually start the cleaning process
 - **`reset()`** - Reset robot to dock and generate new dirt
 
-### Types
-
-```tsx
-export interface RobotVacuumRef {
-  startCleaning: () => void;
-  reset: () => void;
-}
-
-export interface RobotVacuumProps {
-  readonly numberOfDirtBits?: number;
-  readonly minSpeed?: number;
-  readonly speedFactor?: number;
-  readonly rotationDuration?: number;
-  readonly autoStart?: boolean;
-  readonly onCleaningStart?: () => void;
-  readonly onCleaningComplete?: () => void;
-  readonly onDirtCollected?: (collected: number, total: number) => void;
-}
-```
-
-## 🎨 Examples
-
-### Manual Control with Callbacks
-
-```tsx
-import { useRef, useState } from "react";
-import { RobotVacuum, RobotVacuumRef } from "react-robot-vacuum";
-
-function App() {
-  const robotRef = useRef<RobotVacuumRef>(null);
-  const [progress, setProgress] = useState("0/0");
-  const [status, setStatus] = useState("Ready");
-
-  return (
-    <div>
-      <RobotVacuum
-        ref={robotRef}
-        autoStart={false}
-        numberOfDirtBits={10}
-        onCleaningStart={() => setStatus("Cleaning...")}
-        onDirtCollected={(collected, total) => {
-          setProgress(`${collected}/${total}`);
-        }}
-        onCleaningComplete={() => setStatus("Complete!")}
-      />
-      
-      <div style={{ position: "fixed", top: 20, right: 20 }}>
-        <p>Status: {status}</p>
-        <p>Progress: {progress}</p>
-        <button onClick={() => robotRef.current?.startCleaning()}>
-          Start
-        </button>
-        <button onClick={() => robotRef.current?.reset()}>
-          Reset
-        </button>
-      </div>
-    </div>
-  );
-}
-```
-
-### Slow and Methodical Cleaning
-
-```tsx
-import { RobotVacuum } from "react-robot-vacuum";
-
-function App() {
-  return (
-    <RobotVacuum
-      minSpeed={1.5}
-      speedFactor={50}
-      rotationDuration={1.2}
-    />
-  );
-}
-```
-
 ## 🎮 Live Demo
 
-Try it on [CodeSandbox](https://codesandbox.io/s/react-robot-vacuum-demo)
+Try it on [CodeSandbox](https://codesandbox.io/p/sandbox/react-robot-vacuum-4xlm7j)
 
 ## 🛠️ Development
 
@@ -186,7 +97,7 @@ npm run lint
 
 ## 📄 License
 
-MIT © [Your Name]
+MIT © ZhanmuTW
 
 ## 🤝 Contributing
 

package/dist/index.js

@@ -21,17 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  RobotVacuum: () => RobotVacuum_default2
+  RobotVacuum: () => RobotVacuum_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/RobotVacuum/RobotVacuum.tsx
 var import_react = require("react");
-
-// src/RobotVacuum/RobotVacuum.module.css
-var RobotVacuum_default = {};
-
-// src/RobotVacuum/RobotVacuum.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Robotv2 = (0, import_react.forwardRef)(
   ({
@@ -248,50 +243,186 @@ var Robotv2 = (0, import_react.forwardRef)(
         cleanAndReturn();
       }
     }, [dirtPositions, robotState, isDocumentVisible, autoStart]);
-    (0, import_react.useEffect)(() => {
-      const robotElement = robotRef.current;
-      if (!robotElement) return;
-      robotElement.classList.remove(
-        RobotVacuum_default.idle,
-        RobotVacuum_default.cleaning,
-        RobotVacuum_default.returning
-      );
-      robotElement.classList.add(RobotVacuum_default[robotState]);
-    }, [robotState]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: backgroundRef, className: RobotVacuum_default.container, children: [
-      dirtPositions.map(
-        (dirt, index) => !dirt.collected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: RobotVacuum_default.dirt,
-            style: { left: `${dirt.x}px`, top: `${dirt.y}px` },
-            role: "presentation",
-            "aria-label": "dirt particle"
-          },
-          `dirt-${index}`
-        ) : null
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: RobotVacuum_default.dock, role: "presentation", "aria-label": "dock" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          ref: robotRef,
-          className: RobotVacuum_default.robot,
-          role: "presentation",
-          "aria-label": "robot vacuum",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${RobotVacuum_default.wheel} ${RobotVacuum_default.left}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${RobotVacuum_default.wheel} ${RobotVacuum_default.right}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${RobotVacuum_default.sensor} ${RobotVacuum_default.left}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${RobotVacuum_default.sensor} ${RobotVacuum_default.right}` })
-          ]
-        }
-      )
-    ] });
+    const getIndicatorStyle = () => {
+      const baseStyle = {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        boxShadow: "inset 0 1px 2px rgba(0, 0, 0, 0.3)"
+      };
+      if (robotState === "idle") {
+        return {
+          ...baseStyle,
+          backgroundColor: "#c0c0c0",
+          boxShadow: "0 0 15px rgba(255, 255, 255, 0.9)"
+        };
+      } else if (robotState === "cleaning") {
+        return {
+          ...baseStyle,
+          backgroundColor: "#00ff00"
+        };
+      } else {
+        return {
+          ...baseStyle,
+          backgroundColor: "orange"
+        };
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: backgroundRef,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          top: 0,
+          left: 0
+        },
+        children: [
+          dirtPositions.map(
+            (dirt, index) => !dirt.collected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  zIndex: 100,
+                  width: "5px",
+                  height: "5px",
+                  backgroundColor: "#fff",
+                  border: "1px solid black",
+                  left: `${dirt.x}px`,
+                  top: `${dirt.y}px`
+                },
+                role: "presentation",
+                "aria-label": "dirt particle"
+              },
+              `dirt-${index}`
+            ) : null
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "5px",
+                left: "25px",
+                transform: "translateX(-50%)",
+                width: "20px",
+                height: "20px",
+                backgroundColor: "#333",
+                borderRadius: "10px",
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              role: "presentation",
+              "aria-label": "dock",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "-5px",
+                    top: "-5px",
+                    width: "30px",
+                    height: "10px",
+                    backgroundColor: "#333",
+                    borderRadius: "5px 5px 0 0"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ref: robotRef,
+              style: {
+                visibility: "hidden",
+                position: "absolute",
+                zIndex: 100,
+                width: "25px",
+                height: "25px",
+                backgroundColor: "#333",
+                borderRadius: "50%",
+                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)"
+              },
+              role: "presentation",
+              "aria-label": "robot vacuum",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: getIndicatorStyle() }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "2px",
+                      height: "7px",
+                      backgroundColor: "#444",
+                      borderRadius: "1px",
+                      top: "calc(50% - 4px)",
+                      left: "-1px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "2px",
+                      height: "7px",
+                      backgroundColor: "#444",
+                      borderRadius: "1px",
+                      top: "calc(50% - 4px)",
+                      right: "-1px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "4px",
+                      height: "4px",
+                      backgroundColor: "#444",
+                      borderRadius: "50%",
+                      top: "3px",
+                      left: "3px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "4px",
+                      height: "4px",
+                      backgroundColor: "#444",
+                      borderRadius: "50%",
+                      top: "3px",
+                      right: "3px"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Robotv2.displayName = "Robotv2";
-var RobotVacuum_default2 = Robotv2;
+var RobotVacuum_default = Robotv2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   RobotVacuum

package/dist/index.mjs

@@ -8,11 +8,6 @@ import {
   useRef,
   useState
 } from "react";
-
-// src/RobotVacuum/RobotVacuum.module.css
-var RobotVacuum_default = {};
-
-// src/RobotVacuum/RobotVacuum.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Robotv2 = forwardRef(
   ({
@@ -229,50 +224,186 @@ var Robotv2 = forwardRef(
         cleanAndReturn();
       }
     }, [dirtPositions, robotState, isDocumentVisible, autoStart]);
-    useEffect(() => {
-      const robotElement = robotRef.current;
-      if (!robotElement) return;
-      robotElement.classList.remove(
-        RobotVacuum_default.idle,
-        RobotVacuum_default.cleaning,
-        RobotVacuum_default.returning
-      );
-      robotElement.classList.add(RobotVacuum_default[robotState]);
-    }, [robotState]);
-    return /* @__PURE__ */ jsxs("div", { ref: backgroundRef, className: RobotVacuum_default.container, children: [
-      dirtPositions.map(
-        (dirt, index) => !dirt.collected ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: RobotVacuum_default.dirt,
-            style: { left: `${dirt.x}px`, top: `${dirt.y}px` },
-            role: "presentation",
-            "aria-label": "dirt particle"
-          },
-          `dirt-${index}`
-        ) : null
-      ),
-      /* @__PURE__ */ jsx("div", { className: RobotVacuum_default.dock, role: "presentation", "aria-label": "dock" }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: robotRef,
-          className: RobotVacuum_default.robot,
-          role: "presentation",
-          "aria-label": "robot vacuum",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: `${RobotVacuum_default.wheel} ${RobotVacuum_default.left}` }),
-            /* @__PURE__ */ jsx("div", { className: `${RobotVacuum_default.wheel} ${RobotVacuum_default.right}` }),
-            /* @__PURE__ */ jsx("div", { className: `${RobotVacuum_default.sensor} ${RobotVacuum_default.left}` }),
-            /* @__PURE__ */ jsx("div", { className: `${RobotVacuum_default.sensor} ${RobotVacuum_default.right}` })
-          ]
-        }
-      )
-    ] });
+    const getIndicatorStyle = () => {
+      const baseStyle = {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        boxShadow: "inset 0 1px 2px rgba(0, 0, 0, 0.3)"
+      };
+      if (robotState === "idle") {
+        return {
+          ...baseStyle,
+          backgroundColor: "#c0c0c0",
+          boxShadow: "0 0 15px rgba(255, 255, 255, 0.9)"
+        };
+      } else if (robotState === "cleaning") {
+        return {
+          ...baseStyle,
+          backgroundColor: "#00ff00"
+        };
+      } else {
+        return {
+          ...baseStyle,
+          backgroundColor: "orange"
+        };
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: backgroundRef,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          top: 0,
+          left: 0
+        },
+        children: [
+          dirtPositions.map(
+            (dirt, index) => !dirt.collected ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  zIndex: 100,
+                  width: "5px",
+                  height: "5px",
+                  backgroundColor: "#fff",
+                  border: "1px solid black",
+                  left: `${dirt.x}px`,
+                  top: `${dirt.y}px`
+                },
+                role: "presentation",
+                "aria-label": "dirt particle"
+              },
+              `dirt-${index}`
+            ) : null
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "5px",
+                left: "25px",
+                transform: "translateX(-50%)",
+                width: "20px",
+                height: "20px",
+                backgroundColor: "#333",
+                borderRadius: "10px",
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              role: "presentation",
+              "aria-label": "dock",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "-5px",
+                    top: "-5px",
+                    width: "30px",
+                    height: "10px",
+                    backgroundColor: "#333",
+                    borderRadius: "5px 5px 0 0"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: robotRef,
+              style: {
+                visibility: "hidden",
+                position: "absolute",
+                zIndex: 100,
+                width: "25px",
+                height: "25px",
+                backgroundColor: "#333",
+                borderRadius: "50%",
+                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)"
+              },
+              role: "presentation",
+              "aria-label": "robot vacuum",
+              children: [
+                /* @__PURE__ */ jsx("div", { style: getIndicatorStyle() }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "2px",
+                      height: "7px",
+                      backgroundColor: "#444",
+                      borderRadius: "1px",
+                      top: "calc(50% - 4px)",
+                      left: "-1px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "2px",
+                      height: "7px",
+                      backgroundColor: "#444",
+                      borderRadius: "1px",
+                      top: "calc(50% - 4px)",
+                      right: "-1px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "4px",
+                      height: "4px",
+                      backgroundColor: "#444",
+                      borderRadius: "50%",
+                      top: "3px",
+                      left: "3px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      width: "4px",
+                      height: "4px",
+                      backgroundColor: "#444",
+                      borderRadius: "50%",
+                      top: "3px",
+                      right: "3px"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Robotv2.displayName = "Robotv2";
-var RobotVacuum_default2 = Robotv2;
+var RobotVacuum_default = Robotv2;
 export {
-  RobotVacuum_default2 as RobotVacuum
+  RobotVacuum_default as RobotVacuum
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-robot-vacuum",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "An animated React component featuring a robot vacuum that autonomously cleans your page by collecting dirt particles",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,16 +10,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    },
-    "./styles.css": "./dist/RobotVacuum.module.css",
-    "./dist/RobotVacuum.module.css": "./dist/RobotVacuum.module.css"
+    }
   },
   "files": [
     "dist",
     "README.md"
   ],
   "scripts": {
-    "build": "tsup && cp src/RobotVacuum/RobotVacuum.module.css dist/",
+    "build": "tsup",
     "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
     "vite:dev": "vite",
     "vite:build": "vite build",
@@ -69,6 +67,6 @@
     "vite": "^7.3.0"
   },
   "dependencies": {
-    "react-robot-vacuum": "^1.0.0"
+    "react-robot-vacuum": "^1.0.2"
   }
 }