@wandelbots/wandelbots-js-react-components 2.42.0-pr.feature-seperate-timer.383.2e9936e → 2.42.0

package/dist/components/Timer/index.d.ts

@@ -1,19 +0,0 @@
-import type { TimerProps } from "./types";
-/**
- * A simple count-up timer component with visual progress indication
- *
- * Features:
- * - Count-up timer that tracks elapsed time
- * - Visual progress gauge that cycles every minute
- * - Two display variants: large circular gauge (default) or small icon with text
- * - Full timer control: start, pause, resume, reset functionality
- * - Support for starting with elapsed time (resume mid-session)
- * - Error state support: pauses timer and shows error styling
- * - Smooth progress animations with spring physics
- * - Fully localized with i18next
- * - Material-UI theming integration
- */
-export declare const Timer: (({ onTimerReady, autoStart, variant, compact, className, hasError, }: TimerProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Timer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAIzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,yEASX,UAAU;;CAoEhB,CAAA"}

package/dist/components/Timer/types.d.ts

@@ -1,36 +0,0 @@
-export interface TimerControls {
-    start: (elapsedSeconds?: number) => void;
-    pause: () => void;
-    resume: () => void;
-    reset: () => void;
-    isPaused: () => boolean;
-}
-export interface TimerProps {
-    /**
-     * Callback that receives the timer control functions
-     */
-    onTimerReady: (controls: TimerControls) => void;
-    /** Whether the timer should start automatically when initialized */
-    autoStart?: boolean;
-    /** Visual variant of the timer */
-    variant?: "default" | "small";
-    /** For small variant: whether to show compact display */
-    compact?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Whether the timer is in an error state (pauses timer and shows error styling) */
-    hasError?: boolean;
-}
-export interface TimerState {
-    elapsedTime: number;
-    isRunning: boolean;
-    isPausedState: boolean;
-    currentProgress: number;
-    wasRunningBeforeError: boolean;
-}
-export interface TimerAnimationState {
-    showPauseAnimation: boolean;
-    showErrorAnimation: boolean;
-    showMainText: boolean;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Timer/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;IAC/C,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAA;IAC3B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,YAAY,EAAE,OAAO,CAAA;CACtB"}

package/dist/components/Timer/useTimerAnimations.d.ts

@@ -1,11 +0,0 @@
-import type { TimerAnimationState } from "./types";
-export declare const useTimerAnimations: () => {
-    animationState: TimerAnimationState;
-    triggerPauseAnimation: () => void;
-    triggerErrorAnimation: () => void;
-    clearErrorAnimation: () => void;
-    triggerFadeTransition: () => void;
-    setInitialAnimationState: () => void;
-    cleanup: () => void;
-};
-//# sourceMappingURL=useTimerAnimations.d.ts.map

package/dist/components/Timer/useTimerAnimations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimerAnimations.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerAnimations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,eAAO,MAAM,kBAAkB;;;;;;;;CA0F9B,CAAA"}

package/dist/components/Timer/useTimerLogic.d.ts

@@ -1,20 +0,0 @@
-import type { TimerState } from "./types";
-interface UseTimerLogicProps {
-    autoStart: boolean;
-    hasError: boolean;
-    onPauseAnimation: () => void;
-    onErrorAnimation: () => void;
-    onClearErrorAnimation: () => void;
-}
-export declare const useTimerLogic: ({ autoStart, hasError, onPauseAnimation, onErrorAnimation, onClearErrorAnimation, }: UseTimerLogicProps) => {
-    timerState: TimerState;
-    controls: {
-        start: (elapsedSeconds?: number) => void;
-        pause: () => void;
-        resume: () => void;
-        reset: () => void;
-        isPaused: () => boolean;
-    };
-};
-export {};
-//# sourceMappingURL=useTimerLogic.d.ts.map

package/dist/components/Timer/useTimerLogic.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTimerLogic.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/useTimerLogic.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,kBAAkB;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,qBAAqB,EAAE,MAAM,IAAI,CAAA;CAClC;AAED,eAAO,MAAM,aAAa,GAAI,qFAM3B,kBAAkB;;;iCAyBA,MAAM;;;;;;CA0K1B,CAAA"}

package/dist/components/Timer/utils.d.ts

@@ -1,9 +0,0 @@
-/**
- * Formats time in seconds to MM:SS format
- */
-export declare const formatTime: (seconds: number) => string;
-/**
- * Calculates progress percentage for timer (minute-based cycles)
- */
-export declare const calculateTimerProgress: (elapsedTime: number) => number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/Timer/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Timer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,KAAG,MAI5C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM,KAAG,MAE5D,CAAA"}

package/src/components/Timer/Timer.ts

@@ -1,2 +0,0 @@
-export { Timer } from "./index"
-export type { TimerControls, TimerProps } from "./types"

package/src/components/Timer/TimerDefaultVariant.tsx

@@ -1,140 +0,0 @@
-import { Box, Fade, Typography } from "@mui/material"
-import { Gauge } from "@mui/x-charts"
-import { useTheme } from "@mui/material/styles"
-import { useTranslation } from "react-i18next"
-import type { TimerState, TimerAnimationState } from "./types"
-import { formatTime } from "./utils"
-
-interface TimerDefaultVariantProps {
-  timerState: TimerState
-  animationState: TimerAnimationState
-  hasError: boolean
-  className?: string
-}
-
-export const TimerDefaultVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  className,
-}: TimerDefaultVariantProps) => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  const { elapsedTime, currentProgress } = timerState
-  const { showErrorAnimation, showPauseAnimation, showMainText } = animationState
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        position: "relative",
-        width: 264,
-        height: 264,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Gauge
-        width={264}
-        height={264}
-        value={currentProgress}
-        valueMin={0}
-        valueMax={100}
-        innerRadius="85%"
-        outerRadius="100%"
-        margin={0}
-        skipAnimation={true}
-        text={() => ""}
-        sx={{
-          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-          transition: "opacity 0.5s ease-out",
-          [`& .MuiGauge-valueArc`]: {
-            fill: hasError
-              ? theme.palette.error.light
-              : theme.palette.success.main,
-            transition: "fill 0.5s ease-out",
-          },
-          [`& .MuiGauge-referenceArc`]: {
-            fill: "#171927",
-            stroke: "transparent",
-            strokeWidth: 0,
-            transition:
-              "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
-          },
-          [`& .MuiGauge-valueText`]: {
-            display: "none",
-          },
-          [`& .MuiGauge-text`]: {
-            display: "none",
-          },
-        }}
-      />
-
-      {/* Center content overlay */}
-      <Box
-        sx={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: 225,
-          height: 225,
-          borderRadius: "50%",
-          backgroundColor: "#292B3F",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          gap: 1,
-          transition: "background-color 0.5s ease-out",
-        }}
-      >
-        {/* Main display */}
-        <Box
-          sx={{
-            position: "relative",
-            height: "48px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: 0.5,
-          }}
-        >
-          {/* Error text */}
-          <Fade in={showMainText && hasError} timeout={200}>
-            <Typography
-              variant="h6"
-              sx={{
-                position: "absolute",
-                fontSize: "16px",
-                fontWeight: 500,
-                color: theme.palette.error.light,
-              }}
-            >
-              {t("timer.error")}
-            </Typography>
-          </Fade>
-
-          {/* Timer display */}
-          <Fade in={showMainText && !hasError} timeout={300}>
-            <Typography
-              variant="h1"
-              sx={{
-                position: "absolute",
-                fontSize: "48px",
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-                lineHeight: 1,
-                letterSpacing: "-0.5px",
-              }}
-            >
-              {formatTime(elapsedTime)}
-            </Typography>
-          </Fade>
-        </Box>
-      </Box>
-    </Box>
-  )
-}

package/src/components/Timer/TimerSmallVariant.tsx

@@ -1,140 +0,0 @@
-import { Box, Typography } from "@mui/material"
-import { useTheme } from "@mui/material/styles"
-import { useTranslation } from "react-i18next"
-import type { TimerState, TimerAnimationState } from "./types"
-import { formatTime } from "./utils"
-
-interface TimerSmallVariantProps {
-  timerState: TimerState
-  animationState: TimerAnimationState
-  hasError: boolean
-  compact: boolean
-  className?: string
-}
-
-export const TimerSmallVariant = ({
-  timerState,
-  animationState,
-  hasError,
-  compact,
-  className,
-}: TimerSmallVariantProps) => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  const { elapsedTime, currentProgress } = timerState
-  const { showErrorAnimation, showPauseAnimation } = animationState
-
-  // Simple text-only mode for compact variant
-  if (compact) {
-    return (
-      <Box
-        className={className}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          m: 0,
-        }}
-      >
-        <Typography
-          variant="body2"
-          sx={{
-            color: hasError
-              ? theme.palette.error.light
-              : theme.palette.text.primary,
-            fontSize: "14px",
-            transition: "color 0.5s ease-out",
-          }}
-        >
-          {hasError ? t("timer.error") : formatTime(elapsedTime)}
-        </Typography>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      className={className}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        m: 0,
-        gap: 1,
-      }}
-    >
-      {/* Animated progress ring icon */}
-      <Box
-        sx={{
-          width: 20,
-          height: 20,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-          transition: "opacity 0.5s ease-out",
-        }}
-      >
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          style={{ transform: "rotate(-90deg)" }}
-          role="img"
-          aria-label="Timer progress"
-        >
-          <circle
-            cx="10"
-            cy="10"
-            r="8"
-            fill="none"
-            stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
-            }
-            strokeWidth="2"
-            opacity={0.3}
-            style={{
-              transition: "stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-            }}
-          />
-          <circle
-            cx="10"
-            cy="10"
-            r="8"
-            fill="none"
-            stroke={
-              hasError
-                ? theme.palette.error.light
-                : theme.palette.success.main
-            }
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeDasharray={`${2 * Math.PI * 8}`}
-            strokeDashoffset={`${2 * Math.PI * 8 * (1 - currentProgress / 100)}`}
-            style={{
-              transition:
-                "stroke-dashoffset 0.1s ease-out, stroke 0.8s ease-in-out, opacity 2s ease-in-out",
-            }}
-          />
-        </svg>
-      </Box>
-
-      {/* Timer text display */}
-      <Typography
-        variant="body2"
-        sx={{
-          color: hasError
-            ? theme.palette.error.light
-            : theme.palette.text.primary,
-          fontSize: "14px",
-          lineHeight: "normal",
-          letterSpacing: "normal",
-          transition:
-            "color 0.8s ease-in-out, font-size 0.3s ease-out, opacity 2s ease-in-out",
-        }}
-      >
-        {hasError ? t("timer.error") : formatTime(elapsedTime)}
-      </Typography>
-    </Box>
-  )
-}

package/src/components/Timer/index.tsx

@@ -1,101 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { useEffect } from "react"
-import { externalizeComponent } from "../../externalizeComponent"
-import { TimerDefaultVariant } from "./TimerDefaultVariant"
-import { TimerSmallVariant } from "./TimerSmallVariant"
-import type { TimerProps } from "./types"
-import { useTimerAnimations } from "./useTimerAnimations"
-import { useTimerLogic } from "./useTimerLogic"
-
-/**
- * A simple count-up timer component with visual progress indication
- *
- * Features:
- * - Count-up timer that tracks elapsed time
- * - Visual progress gauge that cycles every minute
- * - Two display variants: large circular gauge (default) or small icon with text
- * - Full timer control: start, pause, resume, reset functionality
- * - Support for starting with elapsed time (resume mid-session)
- * - Error state support: pauses timer and shows error styling
- * - Smooth progress animations with spring physics
- * - Fully localized with i18next
- * - Material-UI theming integration
- */
-export const Timer = externalizeComponent(
-  observer(
-    ({
-      onTimerReady,
-      autoStart = true,
-      variant = "default",
-      compact = false,
-      className,
-      hasError = false,
-    }: TimerProps) => {
-      // Initialize animation hooks
-      const {
-        animationState,
-        triggerPauseAnimation,
-        triggerErrorAnimation,
-        clearErrorAnimation,
-        setInitialAnimationState,
-        cleanup,
-      } = useTimerAnimations()
-
-      // Initialize timer logic
-      const { timerState, controls } = useTimerLogic({
-        autoStart,
-        hasError,
-        onPauseAnimation: triggerPauseAnimation,
-        onErrorAnimation: triggerErrorAnimation,
-        onClearErrorAnimation: clearErrorAnimation,
-      })
-
-      // Set initial animation state
-      useEffect(() => {
-        setInitialAnimationState()
-      }, [setInitialAnimationState])
-
-      // Provide controls to parent component
-      useEffect(() => {
-        let isMounted = true
-        const timeoutId = setTimeout(() => {
-          if (isMounted) {
-            onTimerReady(controls)
-          }
-        }, 0)
-
-        return () => {
-          isMounted = false
-          clearTimeout(timeoutId)
-        }
-      }, [onTimerReady, controls])
-
-      // Cleanup on unmount
-      useEffect(() => {
-        return cleanup
-      }, [cleanup])
-
-      // Render appropriate variant
-      if (variant === "small") {
-        return (
-          <TimerSmallVariant
-            timerState={timerState}
-            animationState={animationState}
-            hasError={hasError}
-            compact={compact}
-            className={className}
-          />
-        )
-      }
-
-      return (
-        <TimerDefaultVariant
-          timerState={timerState}
-          animationState={animationState}
-          hasError={hasError}
-          className={className}
-        />
-      )
-    },
-  ),
-)

package/src/components/Timer/types.ts

@@ -1,38 +0,0 @@
-export interface TimerControls {
-  start: (elapsedSeconds?: number) => void
-  pause: () => void
-  resume: () => void
-  reset: () => void
-  isPaused: () => boolean
-}
-
-export interface TimerProps {
-  /**
-   * Callback that receives the timer control functions
-   */
-  onTimerReady: (controls: TimerControls) => void
-  /** Whether the timer should start automatically when initialized */
-  autoStart?: boolean
-  /** Visual variant of the timer */
-  variant?: "default" | "small"
-  /** For small variant: whether to show compact display */
-  compact?: boolean
-  /** Additional CSS classes */
-  className?: string
-  /** Whether the timer is in an error state (pauses timer and shows error styling) */
-  hasError?: boolean
-}
-
-export interface TimerState {
-  elapsedTime: number
-  isRunning: boolean
-  isPausedState: boolean
-  currentProgress: number
-  wasRunningBeforeError: boolean
-}
-
-export interface TimerAnimationState {
-  showPauseAnimation: boolean
-  showErrorAnimation: boolean
-  showMainText: boolean
-}

package/src/components/Timer/useTimerAnimations.ts

@@ -1,94 +0,0 @@
-import { useCallback, useRef, useState } from "react"
-import type { TimerAnimationState } from "./types"
-
-export const useTimerAnimations = () => {
-  const [animationState, setAnimationState] = useState<TimerAnimationState>({
-    showPauseAnimation: false,
-    showErrorAnimation: false,
-    showMainText: true,
-  })
-
-  // Refs for managing timeouts
-  const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const fadeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  const triggerPauseAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showPauseAnimation: true }))
-
-    if (pauseAnimationTimeoutRef.current) {
-      clearTimeout(pauseAnimationTimeoutRef.current)
-    }
-
-    pauseAnimationTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({ ...prev, showPauseAnimation: false }))
-    }, 800)
-  }, [])
-
-  const triggerErrorAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showErrorAnimation: true }))
-
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-
-    errorAnimationTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
-    }, 600)
-  }, [])
-
-  const clearErrorAnimation = useCallback(() => {
-    setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-  }, [])
-
-  const triggerFadeTransition = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showMainText: false,
-    }))
-
-    if (fadeTimeoutRef.current) {
-      clearTimeout(fadeTimeoutRef.current)
-    }
-
-    fadeTimeoutRef.current = setTimeout(() => {
-      setAnimationState((prev) => ({
-        ...prev,
-        showMainText: true,
-      }))
-    }, 200)
-  }, [])
-
-  const setInitialAnimationState = useCallback(() => {
-    setAnimationState((prev) => ({
-      ...prev,
-      showMainText: true,
-    }))
-  }, [])
-
-  // Cleanup function
-  const cleanup = useCallback(() => {
-    if (pauseAnimationTimeoutRef.current) {
-      clearTimeout(pauseAnimationTimeoutRef.current)
-    }
-    if (errorAnimationTimeoutRef.current) {
-      clearTimeout(errorAnimationTimeoutRef.current)
-    }
-    if (fadeTimeoutRef.current) {
-      clearTimeout(fadeTimeoutRef.current)
-    }
-  }, [])
-
-  return {
-    animationState,
-    triggerPauseAnimation,
-    triggerErrorAnimation,
-    clearErrorAnimation,
-    triggerFadeTransition,
-    setInitialAnimationState,
-    cleanup,
-  }
-}