heartraite 1.0.18 → 1.0.19

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useTypewriter";

package/dist/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTypewriter"), exports);

package/dist/hooks/useTypewriter.d.ts

@@ -0,0 +1,12 @@
+interface UseTypewriterOptions {
+    text: string;
+    typingSpeed?: number;
+    initialDelay?: number;
+    blinkingSpeed?: number;
+}
+export declare const useTypewriter: ({ text, typingSpeed, initialDelay, blinkingSpeed, }: UseTypewriterOptions) => {
+    displayedText: string;
+    showDot: boolean;
+    isComplete: boolean;
+};
+export {};

package/dist/hooks/useTypewriter.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTypewriter = void 0;
+const react_1 = require("react");
+const useTypewriter = ({ text, typingSpeed = 50, initialDelay = 1000, blinkingSpeed = 500, }) => {
+    const [isComplete, setIsComplete] = (0, react_1.useState)(false);
+    const [displayedText, setDisplayedText] = (0, react_1.useState)("");
+    const [showDot, setShowDot] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!text || text.length === 0) {
+            setDisplayedText(""); // No text to display
+            setIsComplete(true); // Mark typing as complete immediately
+            setShowDot(false); // No blinking dot for empty text
+            return; // Exit early if text is empty
+        }
+        let blinkingInterval = null;
+        let typingTimeout = null;
+        // Initialize state
+        setDisplayedText(""); // Clear the displayed text
+        setShowDot(true); // Start with a blinking dot
+        setIsComplete(false); // Reset completion flag
+        // Start blinking dot effect
+        blinkingInterval = setInterval(() => {
+            setShowDot((prev) => !prev);
+        }, blinkingSpeed);
+        // Start typing after the initial delay
+        typingTimeout = setTimeout(() => {
+            if (blinkingInterval) {
+                clearInterval(blinkingInterval); // Stop blinking before typing
+                setShowDot(false); // Hide blinking dot
+            }
+            // Typing effect
+            let currentIndex = 0;
+            const typeNextChar = () => {
+                if (currentIndex < text.length) {
+                    const charToAdd = text[currentIndex];
+                    setDisplayedText((prev) => prev + charToAdd); // Append character
+                    currentIndex++;
+                    setTimeout(typeNextChar, typingSpeed); // Schedule next character
+                }
+                else {
+                    setIsComplete(true); // Mark as complete
+                }
+            };
+            // Trigger the first character manually
+            setDisplayedText(text.charAt(0));
+            currentIndex = 1;
+            // Schedule the rest of the characters
+            setTimeout(typeNextChar, typingSpeed);
+        }, initialDelay);
+        // Cleanup on unmount or dependencies change
+        return () => {
+            if (blinkingInterval)
+                clearInterval(blinkingInterval);
+            if (typingTimeout)
+                clearTimeout(typingTimeout);
+        };
+    }, [text, typingSpeed, initialDelay, blinkingSpeed]);
+    return { displayedText, showDot, isComplete };
+};
+exports.useTypewriter = useTypewriter;

package/dist/hooks/useTypewriter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useTypewriter.test.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const useTypewriter_1 = require("./useTypewriter");
+jest.useFakeTimers();
+describe("useTypewriter", () => {
+    const sampleText = "Hello, world!";
+    const defaultOptions = {
+        text: sampleText,
+        typingSpeed: 50,
+        initialDelay: 500,
+        blinkingSpeed: 300,
+    };
+    it("should start with an empty displayedText", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, useTypewriter_1.useTypewriter)(defaultOptions));
+        expect(result.current.displayedText).toBe("");
+        expect(result.current.isComplete).toBe(false);
+        expect(result.current.showDot).toBe(true);
+    });
+    it("should handle empty text input gracefully", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, useTypewriter_1.useTypewriter)({ ...defaultOptions, text: "" }));
+        // Assert initial state for empty text input
+        expect(result.current.displayedText).toBe(""); // Should be an empty string
+        expect(result.current.isComplete).toBe(true); // Typing is complete immediately
+        expect(result.current.showDot).toBe(false); // No blinking dot
+    });
+    it("should display the correct text after typing is complete", async () => {
+        const text = "Du beskriver dig själv som en person som värderar kroppstyper, engagemang, kompetens i livet.";
+        const { result } = (0, react_1.renderHook)(() => (0, useTypewriter_1.useTypewriter)({
+            ...defaultOptions,
+            text,
+        }));
+        // Simulate the initial delay (before typing starts)
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(defaultOptions.initialDelay);
+        });
+        // Simulate the full typing duration (based on the text length and typing speed)
+        const totalTypingTime = text.length * defaultOptions.typingSpeed;
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(totalTypingTime);
+        });
+        // Assert that after typing is complete, the correct text is displayed
+        expect(result.current.displayedText).toBe(text);
+        expect(result.current.isComplete).toBe(true);
+        expect(result.current.showDot).toBe(false); // No more blinking dot
+    });
+    it("should respect typing speed and initial delay", () => {
+        const customOptions = {
+            ...defaultOptions,
+            typingSpeed: 100,
+            initialDelay: 1000,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, useTypewriter_1.useTypewriter)(customOptions));
+        // Before initial delay
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(900);
+        });
+        expect(result.current.displayedText).toBe("");
+        expect(result.current.isComplete).toBe(false);
+        // After initial delay
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(100);
+        });
+        expect(result.current.displayedText).toBe(sampleText.charAt(0));
+        // Verify typing speed
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(customOptions.typingSpeed);
+        });
+        expect(result.current.displayedText).toBe(sampleText.slice(0, 2));
+    });
+});

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from "./constants";
 export * from "./enum";
 export * from "./firebase";
 export * from "./types";
+export * from "./hooks";

package/dist/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./constants"), exports);
 __exportStar(require("./enum"), exports);
 __exportStar(require("./firebase"), exports);
 __exportStar(require("./types"), exports);
+__exportStar(require("./hooks"), exports);

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: "ts-jest", // Use ts-jest preset to handle TypeScript
+  testEnvironment: "jest-environment-jsdom", // Use jsdom for React tests
+  moduleFileExtensions: ["js", "jsx", "ts", "tsx"], // Support for js, jsx, ts, tsx files
+  testMatch: [
+    "**/*.test.[jt]s?(x)", // Match any .test.js, .test.ts, .test.jsx, .test.tsx files
+  ],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"], // Collect coverage for all files except d.ts
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heartraite",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Heartraite npm package for common functionality",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,12 +20,24 @@
     "url": "https://github.com/agottfredsson/heartraite-npm/issues"
   },
   "homepage": "https://github.com/agottfredsson/heartraite-npm#readme",
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "peerDependencies": {
     "firebase": "^11.0.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.9.0",
-    "typescript": "^5.6.3",
-    "firebase": "^11.0.1"
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "firebase": "^11.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.3"
   }
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useTypewriter";

package/src/hooks/useTypewriter.test.ts

@@ -0,0 +1,86 @@
+import { renderHook, act } from "@testing-library/react";
+import { useTypewriter } from "./useTypewriter";
+
+jest.useFakeTimers();
+
+describe("useTypewriter", () => {
+  const sampleText = "Hello, world!";
+  const defaultOptions = {
+    text: sampleText,
+    typingSpeed: 50,
+    initialDelay: 500,
+    blinkingSpeed: 300,
+  };
+
+  it("should start with an empty displayedText", () => {
+    const { result } = renderHook(() => useTypewriter(defaultOptions));
+    expect(result.current.displayedText).toBe("");
+    expect(result.current.isComplete).toBe(false);
+    expect(result.current.showDot).toBe(true);
+  });
+  it("should handle empty text input gracefully", () => {
+    const { result } = renderHook(() =>
+      useTypewriter({ ...defaultOptions, text: "" })
+    );
+
+    // Assert initial state for empty text input
+    expect(result.current.displayedText).toBe(""); // Should be an empty string
+    expect(result.current.isComplete).toBe(true); // Typing is complete immediately
+    expect(result.current.showDot).toBe(false); // No blinking dot
+  });
+
+  it("should display the correct text after typing is complete", async () => {
+    const text =
+      "Du beskriver dig själv som en person som värderar kroppstyper, engagemang, kompetens i livet.";
+
+    const { result } = renderHook(() =>
+      useTypewriter({
+        ...defaultOptions,
+        text,
+      })
+    );
+
+    // Simulate the initial delay (before typing starts)
+    act(() => {
+      jest.advanceTimersByTime(defaultOptions.initialDelay);
+    });
+
+    // Simulate the full typing duration (based on the text length and typing speed)
+    const totalTypingTime = text.length * defaultOptions.typingSpeed;
+    act(() => {
+      jest.advanceTimersByTime(totalTypingTime);
+    });
+
+    // Assert that after typing is complete, the correct text is displayed
+    expect(result.current.displayedText).toBe(text);
+    expect(result.current.isComplete).toBe(true);
+    expect(result.current.showDot).toBe(false); // No more blinking dot
+  });
+  it("should respect typing speed and initial delay", () => {
+    const customOptions = {
+      ...defaultOptions,
+      typingSpeed: 100,
+      initialDelay: 1000,
+    };
+    const { result } = renderHook(() => useTypewriter(customOptions));
+
+    // Before initial delay
+    act(() => {
+      jest.advanceTimersByTime(900);
+    });
+    expect(result.current.displayedText).toBe("");
+    expect(result.current.isComplete).toBe(false);
+
+    // After initial delay
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    expect(result.current.displayedText).toBe(sampleText.charAt(0));
+
+    // Verify typing speed
+    act(() => {
+      jest.advanceTimersByTime(customOptions.typingSpeed);
+    });
+    expect(result.current.displayedText).toBe(sampleText.slice(0, 2));
+  });
+});

package/src/hooks/useTypewriter.ts

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+
+interface UseTypewriterOptions {
+  text: string;
+  typingSpeed?: number; // Time in ms between each character
+  initialDelay?: number; // Time in ms before typing starts
+  blinkingSpeed?: number; // Time in ms for the blinking dot toggle
+}
+
+export const useTypewriter = ({
+  text,
+  typingSpeed = 50,
+  initialDelay = 1000,
+  blinkingSpeed = 500,
+}: UseTypewriterOptions) => {
+  const [isComplete, setIsComplete] = useState(false);
+  const [displayedText, setDisplayedText] = useState("");
+  const [showDot, setShowDot] = useState(false);
+
+  useEffect(() => {
+    if (!text || text.length === 0) {
+      setDisplayedText(""); // No text to display
+      setIsComplete(true); // Mark typing as complete immediately
+      setShowDot(false); // No blinking dot for empty text
+      return; // Exit early if text is empty
+    }
+
+    let blinkingInterval: NodeJS.Timeout | null = null;
+    let typingTimeout: NodeJS.Timeout | null = null;
+
+    // Initialize state
+    setDisplayedText(""); // Clear the displayed text
+    setShowDot(true); // Start with a blinking dot
+    setIsComplete(false); // Reset completion flag
+
+    // Start blinking dot effect
+    blinkingInterval = setInterval(() => {
+      setShowDot((prev) => !prev);
+    }, blinkingSpeed);
+
+    // Start typing after the initial delay
+    typingTimeout = setTimeout(() => {
+      if (blinkingInterval) {
+        clearInterval(blinkingInterval); // Stop blinking before typing
+        setShowDot(false); // Hide blinking dot
+      }
+
+      // Typing effect
+      let currentIndex = 0;
+
+      const typeNextChar = () => {
+        if (currentIndex < text.length) {
+          const charToAdd = text[currentIndex];
+          setDisplayedText((prev) => prev + charToAdd); // Append character
+          currentIndex++;
+          setTimeout(typeNextChar, typingSpeed); // Schedule next character
+        } else {
+          setIsComplete(true); // Mark as complete
+        }
+      };
+
+      // Trigger the first character manually
+      setDisplayedText(text.charAt(0));
+      currentIndex = 1;
+
+      // Schedule the rest of the characters
+      setTimeout(typeNextChar, typingSpeed);
+    }, initialDelay);
+
+    // Cleanup on unmount or dependencies change
+    return () => {
+      if (blinkingInterval) clearInterval(blinkingInterval);
+      if (typingTimeout) clearTimeout(typingTimeout);
+    };
+  }, [text, typingSpeed, initialDelay, blinkingSpeed]);
+
+  return { displayedText, showDot, isComplete };
+};

package/src/index.ts

@@ -2,3 +2,4 @@ export * from "./constants";
 export * from "./enum";
 export * from "./firebase";
 export * from "./types";
+export * from "./hooks";