@donotdev/components 0.0.2 → 0.0.3

package/dist/atomic/Tooltip/index.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/Tooltip/index.tsx
 /**
  * @fileoverview Tooltip component
  * @description Accessible tooltip component built on Radix UI primitives.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -20,6 +20,11 @@ import { useRef, useState, useEffect } from 'react';
  * 2. CSS `--tooltip-side` property (set by container like Sidebar)
  * 3. Radix auto-positioning (default)
  *
+ * SSR Safety:
+ * During SSR/static generation (Next.js prerendering), TooltipProvider may not
+ * be available. This component gracefully degrades by rendering just children
+ * during SSR, then hydrating with full tooltip functionality on client.
+ *
  * @example
  * ```css
  * .sidebar { --tooltip-side: right; }
@@ -32,6 +37,12 @@ import { useRef, useState, useEffect } from 'react';
 const Tooltip = ({ content, children, side, align = 'center', delayDuration = 300, variant, }) => {
     const triggerRef = useRef(null);
     const [computedSide, setComputedSide] = useState(side);
+    // SSR safety: Track if component has mounted on client
+    // During SSR/static generation, render just children to avoid TooltipProvider dependency
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
     // Read CSS custom property after mount (CSR only, SSR-safe)
     // Priority: CSS --tooltip-side > explicit side prop > Radix auto
     useEffect(() => {
@@ -53,6 +64,12 @@ const Tooltip = ({ content, children, side, align = 'center', delayDuration = 30
         // No side specified - Radix will auto-position
         setComputedSide(undefined);
     }, [side]);
+    // During SSR/static generation, render just children
+    // This prevents TooltipProvider requirement during prerendering
+    // After hydration, full tooltip functionality is available
+    if (!isMounted) {
+        return _jsx(_Fragment, { children: children });
+    }
     const variantAttrs = getVariantDataAttrs({
         variant: variant !== FLOATING_VARIANT.DEFAULT ? variant : undefined,
     });

package/dist/atomic/VideoPlayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAiED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CA6GlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAiED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CA+IlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/atomic/VideoPlayer/index.js

@@ -14,6 +14,7 @@ import { useTranslation } from '@donotdev/core';
 import { cn } from '../../utils/helpers';
 import Button, { BUTTON_VARIANT } from '../Button';
 import Dialog from '../Dialog';
+import Spinner from '../Spinner';
 /**
  * Constructs embed URL from VideoConfig or returns string URL as-is
  *
@@ -136,6 +137,7 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
     const { t } = useTranslation(['dndev']);
     const [isOpen, setIsOpen] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
+    const [iframeReady, setIframeReady] = useState(false);
     const embedUrl = getEmbedUrl(url, autoplay);
     const thumbnailUrl = thumbnail || getThumbnailUrl(url);
     // Lazy-load iframe when modal opens
@@ -144,11 +146,15 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
             setIsLoaded(true);
         }
     }, [isOpen, isLoaded]);
-    const videoFrame = (_jsx("iframe", { src: isLoaded ? embedUrl : '', title: title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: allowFullscreen, className: cn('dndev-video-frame', className), style: { aspectRatio } }));
+    // Reset iframe ready state when video changes
+    useEffect(() => {
+        setIframeReady(false);
+    }, [embedUrl]);
+    const videoFrame = (_jsx("iframe", { src: isLoaded ? embedUrl : '', title: title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: allowFullscreen, className: cn('dndev-video-frame', className), style: { aspectRatio }, onLoad: () => setIframeReady(true) }));
     // Inline video (no modal) - lazy-load on click
     if (!modal) {
+        // Not clicked yet - show thumbnail only
         if (!isLoaded) {
-            // Show thumbnail facade
             if (thumbnailUrl) {
                 return (_jsxs("button", { type: "button", onClick: () => setIsLoaded(true), onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
@@ -157,11 +163,15 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
                         }
                     }, className: cn('dndev-video-thumbnail', className), style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: eager ? 'eager' : 'lazy', fetchPriority: eager ? 'high' : 'low', decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
             }
-            // No thumbnail available - show button
+            // No thumbnail - show button
             return (_jsx(Button, { icon: Play, onClick: () => setIsLoaded(true), className: className, children: t('video.watchVideo', 'Watch Video') }));
         }
-        // Show iframe after click
-        return (_jsx("div", { className: cn('dndev-video-container', className), children: videoFrame }));
+        // Clicked - show iframe with thumbnail overlay until iframe loads
+        return (_jsxs("div", { className: cn('dndev-video-container', className), style: { aspectRatio, position: 'relative' }, children: [videoFrame, !iframeReady && thumbnailUrl && (_jsxs("div", { className: "dndev-video-thumbnail dndev-video-loading-overlay", style: {
+                        position: 'absolute',
+                        inset: 0,
+                        pointerEvents: 'none',
+                    }, children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay dndev-video-loading", children: _jsx(Spinner, { "aria-label": t('video.loading', 'Loading video') }) })] }))] }));
     }
     // Modal mode - lazy-load iframe when modal opens
     const defaultTrigger = thumbnailUrl ? (_jsxs("button", { type: "button", className: "dndev-video-thumbnail", style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: eager ? 'eager' : 'lazy', fetchPriority: eager ? 'high' : 'low', decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] })) : (_jsx(Button, { icon: Play, children: t('video.watchVideo', 'Watch Video') }));

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @fileoverview Components package
  * @description UI component library for DoNotDev framework
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */