fake-current-time 0.2.0 → 0.3.0

package/README.md

@@ -68,25 +68,15 @@ startTransition(() => {
 ### UI Component
 
 ```typescript
-import { setOffset, clearOffset } from "fake-current-time/browser";
+import { FakeTimeController } from "fake-current-time/react";
 
 // Restrict access to this page in production (e.g., via routing or middleware)
-export function TimeControl() {
-  return (
-    <div>
-      <p>Current: {new Date().toString()}</p>
-      {/* setOffset saves to cookie and reloads the page */}
-      <button onClick={() => setOffset({ days: 1 })}>+1 Day</button>
-      <button onClick={() => setOffset({ days: -1 })}>-1 Day</button>
-      <button onClick={() => setOffset({ months: 3, days: 7 })}>+3 Months +7 Days</button>
-      {/* clearOffset removes cookie and reloads the page */}
-      <button onClick={clearOffset}>Reset</button>
-    </div>
-  );
+export function TimeControlPage() {
+  return <FakeTimeController />;
 }
 ```
 
-`setOffset` accepts: `years`, `months`, `days`, `hours`, `minutes`, `seconds`, `milliseconds`
+![FakeTimeController UI](./ui.png)
 
 ### Accessing the Original Date
 

package/dist/browser.js

@@ -1,32 +1,10 @@
 import {
-  COOKIE_NAME,
-  encodeOffset,
-  parseOffsetFromCookie
-} from "./chunk-Z7IHRBMK.js";
-import {
-  setupDateProxy
-} from "./chunk-XDOQVLFM.js";
-
-// src/browser.ts
-var initialized = false;
-function setup() {
-  if (initialized) {
-    return;
-  }
-  setupDateProxy(getOffset);
-  initialized = true;
-}
-function setOffset(offset) {
-  document.cookie = `${COOKIE_NAME}=${encodeOffset(offset)}; path=/`;
-  location.reload();
-}
-function clearOffset() {
-  document.cookie = `${COOKIE_NAME}=; path=/; max-age=0`;
-  location.reload();
-}
-function getOffset() {
-  return parseOffsetFromCookie(document.cookie);
-}
+  clearOffset,
+  setOffset,
+  setup
+} from "./chunk-2QPID2IG.js";
+import "./chunk-Z7IHRBMK.js";
+import "./chunk-XDOQVLFM.js";
 export {
   clearOffset,
   setOffset,

package/dist/chunk-2QPID2IG.js

@@ -0,0 +1,35 @@
+import {
+  COOKIE_NAME,
+  encodeOffset,
+  parseOffsetFromCookie
+} from "./chunk-Z7IHRBMK.js";
+import {
+  setupDateProxy
+} from "./chunk-XDOQVLFM.js";
+
+// src/browser.ts
+var initialized = false;
+function setup() {
+  if (initialized) {
+    return;
+  }
+  setupDateProxy(getOffset);
+  initialized = true;
+}
+function setOffset(offset) {
+  document.cookie = `${COOKIE_NAME}=${encodeOffset(offset)}; path=/`;
+  location.reload();
+}
+function clearOffset() {
+  document.cookie = `${COOKIE_NAME}=; path=/; max-age=0`;
+  location.reload();
+}
+function getOffset() {
+  return parseOffsetFromCookie(document.cookie);
+}
+
+export {
+  setup,
+  setOffset,
+  clearOffset
+};

package/dist/react.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+
+declare function FakeTimeController(): JSX.Element;
+
+export { FakeTimeController };

package/dist/react.js

@@ -0,0 +1,265 @@
+import {
+  clearOffset,
+  setOffset
+} from "./chunk-2QPID2IG.js";
+import {
+  parseOffsetFromCookie
+} from "./chunk-Z7IHRBMK.js";
+import {
+  OriginalDate
+} from "./chunk-XDOQVLFM.js";
+
+// src/react.tsx
+import { useEffect, useState } from "react";
+
+// src/react.styles.ts
+var timeDisplayContainer = {
+  marginBottom: "16px",
+  padding: "12px",
+  borderRadius: "4px",
+  border: "1px solid #e0e0e0"
+};
+var timeDisplayValue = {
+  fontSize: "20px",
+  fontFamily: "monospace"
+};
+var buttonBase = {
+  flex: 1,
+  padding: "10px 16px",
+  border: "none",
+  borderRadius: "4px",
+  fontSize: "14px",
+  fontWeight: "500",
+  cursor: "pointer"
+};
+var styles = {
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px",
+    padding: "16px",
+    border: "1px solid #ccc",
+    borderRadius: "8px",
+    backgroundColor: "#f9f9f9",
+    maxWidth: "400px"
+  },
+  header: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    margin: "0 0 12px 0",
+    fontSize: "16px",
+    fontWeight: "600",
+    color: "#333"
+  },
+  timeDisplay: {
+    current: {
+      container: { ...timeDisplayContainer, backgroundColor: "#fff" },
+      value: { ...timeDisplayValue, color: "#333" }
+    },
+    real: {
+      container: { ...timeDisplayContainer, backgroundColor: "#f5f5f5" },
+      value: { ...timeDisplayValue, color: "#666" }
+    },
+    label: {
+      fontSize: "12px",
+      color: "#666",
+      marginBottom: "4px"
+    }
+  },
+  offset: {
+    container: {
+      marginBottom: "16px",
+      padding: "8px 12px",
+      backgroundColor: "#e8f4fd",
+      borderRadius: "4px",
+      fontSize: "13px"
+    },
+    label: {
+      fontWeight: "600",
+      color: "#555"
+    },
+    value: {
+      marginLeft: "8px",
+      color: "#1a73e8"
+    }
+  },
+  form: {
+    fieldGroup: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: "12px",
+      marginBottom: "16px"
+    },
+    field: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    label: {
+      fontSize: "12px",
+      color: "#666",
+      marginBottom: "4px"
+    },
+    input: {
+      padding: "8px",
+      border: "1px solid #ddd",
+      borderRadius: "4px",
+      fontSize: "14px",
+      width: "100%",
+      boxSizing: "border-box"
+    }
+  },
+  buttons: {
+    group: {
+      display: "flex",
+      gap: "8px"
+    },
+    apply: { ...buttonBase, backgroundColor: "#1a73e8", color: "#fff" },
+    clear: { ...buttonBase, backgroundColor: "#f1f3f4", color: "#333" }
+  }
+};
+
+// src/react.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELDS = [
+  "years",
+  "months",
+  "days",
+  "hours",
+  "minutes",
+  "seconds"
+];
+var FIELD_LABELS = {
+  years: "Years",
+  months: "Months",
+  days: "Days",
+  hours: "Hours",
+  minutes: "Minutes",
+  seconds: "Seconds"
+};
+function getCurrentOffset() {
+  if (typeof document === "undefined") {
+    return void 0;
+  }
+  return parseOffsetFromCookie(document.cookie);
+}
+function formatCurrentOffset(offset) {
+  if (!offset) {
+    return "None";
+  }
+  const parts = [];
+  for (const field of FIELDS) {
+    const value = offset[field];
+    if (value !== void 0 && value !== 0) {
+      const sign = value > 0 ? "+" : "";
+      parts.push(`${sign}${value} ${field}`);
+    }
+  }
+  if (offset.milliseconds !== void 0 && offset.milliseconds !== 0) {
+    const sign = offset.milliseconds > 0 ? "+" : "";
+    parts.push(`${sign}${offset.milliseconds} milliseconds`);
+  }
+  return parts.length > 0 ? parts.join(", ") : "None";
+}
+function FakeTimeController() {
+  const [values, setValues] = useState({
+    years: "",
+    months: "",
+    days: "",
+    hours: "",
+    minutes: "",
+    seconds: ""
+  });
+  const [currentTime, setCurrentTime] = useState(null);
+  const [realTime, setRealTime] = useState(null);
+  useEffect(() => {
+    setCurrentTime(/* @__PURE__ */ new Date());
+    setRealTime(new OriginalDate());
+    const interval = setInterval(() => {
+      setCurrentTime(/* @__PURE__ */ new Date());
+      setRealTime(new OriginalDate());
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  const currentOffset = getCurrentOffset();
+  const handleFieldChange = (e) => {
+    const { name, value } = e.target;
+    setValues((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleApply = () => {
+    const offset = {};
+    for (const field of FIELDS) {
+      const value = values[field];
+      if (value !== "") {
+        const num = Number.parseInt(value, 10);
+        if (!Number.isNaN(num) && num !== 0) {
+          offset[field] = num;
+        }
+      }
+    }
+    if (Object.keys(offset).length > 0) {
+      setOffset(offset);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx("h3", { style: styles.header, children: "Fake Time Controller" }),
+    /* @__PURE__ */ jsx(
+      TimeDisplay,
+      {
+        label: "Current Time (with offset applied)",
+        time: currentTime
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimeDisplay,
+      {
+        label: "Real Time (original)",
+        time: realTime,
+        variant: "real"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: styles.offset.container, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.offset.label, children: "Current offset:" }),
+      /* @__PURE__ */ jsx("span", { style: styles.offset.value, children: formatCurrentOffset(currentOffset) })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { action: handleApply, children: [
+      /* @__PURE__ */ jsx("div", { style: styles.form.fieldGroup, children: FIELDS.map((field) => /* @__PURE__ */ jsxs("label", { style: styles.form.field, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.form.label, children: FIELD_LABELS[field] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            name: field,
+            value: values[field],
+            onChange: handleFieldChange,
+            placeholder: "0",
+            style: styles.form.input
+          }
+        )
+      ] }, field)) }),
+      /* @__PURE__ */ jsxs("div", { style: styles.buttons.group, children: [
+        /* @__PURE__ */ jsx("button", { type: "submit", style: styles.buttons.apply, children: "Apply" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: clearOffset,
+            style: styles.buttons.clear,
+            children: "Clear"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function TimeDisplay({
+  label,
+  time,
+  variant = "current"
+}) {
+  const variantStyles = styles.timeDisplay[variant];
+  return /* @__PURE__ */ jsxs("div", { style: variantStyles.container, children: [
+    /* @__PURE__ */ jsx("div", { style: styles.timeDisplay.label, children: label }),
+    /* @__PURE__ */ jsx("div", { style: variantStyles.value, children: time?.toLocaleString() ?? "-" })
+  ] });
+}
+export {
+  FakeTimeController
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fake-current-time",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Manipulate current time in your application for development and staging environments",
   "keywords": [
     "time",
@@ -31,6 +31,18 @@
     "./browser": {
       "types": "./dist/browser.d.ts",
       "default": "./dist/browser.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -38,8 +50,11 @@
     "provenance": true
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.7",
+    "@biomejs/biome": "2.3.8",
     "@types/node": "^24.10.1",
+    "@types/react": "^19.2.10",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vitest": "^4.0.3"