@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Components/HtmlEditor/components/InAppPreviewPane/__tests__/DeviceFrame.test.js

@@ -9,13 +9,13 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { DEVICE_TYPES } from '../../../constants';
 
-// Import after mocking
-import DeviceFrame from '../DeviceFrame';
-
 // Mock the entire DeviceFrame module to bypass image import issues
 jest.mock('../../../../assets/Android.png', () => 'mocked-android-frame.png');
 jest.mock('../../../../assets/iOS.png', () => 'mocked-ios-frame.png');
 
+// Import after mocking
+import DeviceFrame from '../DeviceFrame';
+
 describe('DeviceFrame', () => {
   describe('Basic Rendering', () => {
     it('renders without crashing', () => {
@@ -26,7 +26,7 @@ describe('DeviceFrame', () => {
     it('renders with default props', () => {
       const { container } = render(<DeviceFrame />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('device-frame');
       expect(frame).toHaveClass('device-frame--android'); // Default device
     });
@@ -37,7 +37,7 @@ describe('DeviceFrame', () => {
           <div data-testid="child-content">Test Content</div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('child-content')).toBeInTheDocument();
       expect(screen.getByTestId('child-content')).toHaveTextContent('Test Content');
     });
@@ -50,7 +50,7 @@ describe('DeviceFrame', () => {
           <div data-testid="child-3">Child 3</div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('child-1')).toBeInTheDocument();
       expect(screen.getByTestId('child-2')).toBeInTheDocument();
       expect(screen.getByTestId('child-3')).toBeInTheDocument();
@@ -61,7 +61,7 @@ describe('DeviceFrame', () => {
     it('renders Android frame correctly', () => {
       const { container } = render(<DeviceFrame device={DEVICE_TYPES.ANDROID} />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('device-frame--android');
       expect(frame.style.backgroundImage).toBeTruthy();
       expect(frame.style.backgroundImage).toMatch(/url\(/);
@@ -70,7 +70,7 @@ describe('DeviceFrame', () => {
     it('renders iOS frame correctly', () => {
       const { container } = render(<DeviceFrame device={DEVICE_TYPES.IOS} />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('device-frame--ios');
       expect(frame.style.backgroundImage).toBeTruthy();
       expect(frame.style.backgroundImage).toMatch(/url\(/);
@@ -79,7 +79,7 @@ describe('DeviceFrame', () => {
     it('defaults to Android when no device specified', () => {
       const { container } = render(<DeviceFrame />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('device-frame--android');
       expect(frame.style.backgroundImage).toBeTruthy();
       expect(frame.style.backgroundImage).toMatch(/url\(/);
@@ -102,7 +102,7 @@ describe('DeviceFrame', () => {
     it('applies correct dimensions', () => {
       const { container } = render(<DeviceFrame />);
       const frame = container.firstChild;
-
+      
       expect(frame.style.width).toBe('450px');
       expect(frame.style.height).toBe('920px');
     });
@@ -117,7 +117,7 @@ describe('DeviceFrame', () => {
         <DeviceFrame device={DEVICE_TYPES.IOS} />
       );
       const iosFrame = iosContainer.firstChild;
-
+      
       expect(androidFrame.style.width).toBe(iosFrame.style.width);
       expect(androidFrame.style.height).toBe(iosFrame.style.height);
     });
@@ -125,7 +125,7 @@ describe('DeviceFrame', () => {
     it('applies background styles correctly', () => {
       const { container } = render(<DeviceFrame />);
       const frame = container.firstChild;
-
+      
       expect(frame.style.position).toBe('relative');
       expect(frame.style.display).toBe('inline-block');
       expect(frame.style.backgroundRepeat).toBe('no-repeat');
@@ -133,10 +133,19 @@ describe('DeviceFrame', () => {
       expect(frame.style.backgroundSize).toBe('contain');
     });
 
+    it('applies drop-shadow filter', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame.style.filter).toContain('drop-shadow');
+      expect(frame.style.filter).toContain('brightness');
+      expect(frame.style.filter).toContain('contrast');
+    });
+
     it('sets correct background image for Android', () => {
       const { container } = render(<DeviceFrame device={DEVICE_TYPES.ANDROID} />);
       const frame = container.firstChild;
-
+      
       // Verify background image is set (actual mock value may vary)
       expect(frame.style.backgroundImage).toBeTruthy();
       expect(frame.style.backgroundImage).toMatch(/^url\(.+\)$/);
@@ -145,7 +154,7 @@ describe('DeviceFrame', () => {
     it('sets correct background image for iOS', () => {
       const { container } = render(<DeviceFrame device={DEVICE_TYPES.IOS} />);
       const frame = container.firstChild;
-
+      
       // Verify background image is set (actual mock value may vary)
       expect(frame.style.backgroundImage).toBeTruthy();
       expect(frame.style.backgroundImage).toMatch(/^url\(.+\)$/);
@@ -156,7 +165,7 @@ describe('DeviceFrame', () => {
     it('accepts and applies custom className', () => {
       const { container } = render(<DeviceFrame className="custom-frame" />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('custom-frame');
       expect(frame).toHaveClass('device-frame'); // Base class still present
     });
@@ -166,7 +175,7 @@ describe('DeviceFrame', () => {
         <DeviceFrame className="custom-class another-class" />
       );
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('custom-class');
       expect(frame).toHaveClass('another-class');
       expect(frame).toHaveClass('device-frame');
@@ -177,7 +186,7 @@ describe('DeviceFrame', () => {
         <DeviceFrame data-testid="custom-frame" aria-label="Device Preview" />
       );
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveAttribute('data-testid', 'custom-frame');
       expect(frame).toHaveAttribute('aria-label', 'Device Preview');
     });
@@ -186,7 +195,7 @@ describe('DeviceFrame', () => {
       const handleClick = jest.fn();
       const { container } = render(<DeviceFrame onClick={handleClick} />);
       const frame = container.firstChild;
-
+      
       frame.click();
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
@@ -195,7 +204,7 @@ describe('DeviceFrame', () => {
       const customStyle = { border: '2px solid red' };
       const { container } = render(<DeviceFrame style={customStyle} />);
       const frame = container.firstChild;
-
+      
       // Note: inline styles from props override component styles
       expect(frame.style.border).toBe('2px solid red');
     });
@@ -261,7 +270,7 @@ describe('DeviceFrame', () => {
     it('renders with empty string className', () => {
       const { container } = render(<DeviceFrame className="" />);
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveClass('device-frame');
     });
 
@@ -274,7 +283,7 @@ describe('DeviceFrame', () => {
           </>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('fragment-child-1')).toBeInTheDocument();
       expect(screen.getByTestId('fragment-child-2')).toBeInTheDocument();
     });
@@ -289,7 +298,7 @@ describe('DeviceFrame', () => {
           </div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('nested-child')).toBeInTheDocument();
     });
   });
@@ -297,7 +306,7 @@ describe('DeviceFrame', () => {
   describe('Component Structure', () => {
     it('renders a single root div element', () => {
       const { container } = render(<DeviceFrame />);
-
+      
       expect(container.firstChild.tagName).toBe('DIV');
       expect(container.children).toHaveLength(1);
     });
@@ -307,8 +316,8 @@ describe('DeviceFrame', () => {
         <DeviceFrame device={DEVICE_TYPES.ANDROID} className="custom" />
       );
       const androidFrame = androidContainer.firstChild;
-
-      const classes = androidFrame.className.split(' ').filter((c) => c);
+      
+      const classes = androidFrame.className.split(' ').filter(c => c);
       expect(classes).toContain('device-frame');
       expect(classes).toContain('device-frame--android');
       expect(classes).toContain('custom');
@@ -317,7 +326,7 @@ describe('DeviceFrame', () => {
     it('applies styles as inline styles object', () => {
       const { container } = render(<DeviceFrame />);
       const frame = container.firstChild;
-
+      
       // Verify style is an object
       expect(typeof frame.style).toBe('object');
       expect(frame.style).not.toBeNull();
@@ -334,7 +343,7 @@ describe('DeviceFrame', () => {
         />
       );
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveAttribute('role', 'img');
       expect(frame).toHaveAttribute('aria-label', 'Mobile Device Preview');
       expect(frame).toHaveAttribute('aria-describedby', 'device-description');
@@ -349,7 +358,7 @@ describe('DeviceFrame', () => {
         />
       );
       const frame = container.firstChild;
-
+      
       expect(frame).toHaveAttribute('data-device', 'android');
       expect(frame).toHaveAttribute('data-testid', 'device-frame');
       expect(frame).toHaveAttribute('data-analytics', 'preview-frame');
@@ -369,7 +378,7 @@ describe('DeviceFrame', () => {
           </div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('preview-iframe')).toBeInTheDocument();
     });
 
@@ -379,16 +388,16 @@ describe('DeviceFrame', () => {
           <div data-testid="content">Content</div>
         </DeviceFrame>
       );
-
+      
       expect(container.firstChild).toHaveClass('device-frame--android');
       expect(screen.getByTestId('content')).toBeInTheDocument();
-
+      
       rerender(
         <DeviceFrame device={DEVICE_TYPES.IOS}>
           <div data-testid="content">Content</div>
         </DeviceFrame>
       );
-
+      
       expect(container.firstChild).toHaveClass('device-frame--ios');
       expect(screen.getByTestId('content')).toBeInTheDocument();
     });
@@ -399,16 +408,17 @@ describe('DeviceFrame', () => {
           <div data-testid="dynamic-content">Initial</div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('dynamic-content')).toHaveTextContent('Initial');
-
+      
       rerender(
         <DeviceFrame>
           <div data-testid="dynamic-content">Updated</div>
         </DeviceFrame>
       );
-
+      
       expect(screen.getByTestId('dynamic-content')).toHaveTextContent('Updated');
     });
   });
 });
+

package/v2Components/HtmlEditor/components/InAppPreviewPane/_inAppPreviewPane.scss

@@ -24,7 +24,7 @@ $empty-state-meta-opacity: 0.7;
 .inapp-preview-pane {
   height: 100%;
   position: relative;
-  background-color: $CAP_G07;
+  background-color: $CAP_G08;
   background-image: radial-gradient(circle at 50% 50%, rgba($CAP_WHITE, 0.1) 0%, transparent 70%);
   display: flex;
   flex-direction: column;
@@ -123,9 +123,11 @@ $empty-state-meta-opacity: 0.7;
 .device-frame {
   position: relative;
   display: inline-block;
+  filter: drop-shadow(0 0.75rem 3rem rgba($CAP_G01, 0.25));
   transition: all 0.3s ease-in-out;
 
   &:hover {
+    filter: drop-shadow(0 1rem 3.5rem rgba($CAP_G01, 0.3));
     transform: translateY(-0.125rem);
   }
 

package/v2Components/HtmlEditor/components/InAppPreviewPane/constants.js

@@ -6,55 +6,55 @@ export const LAYOUT_TYPES = {
   MODAL: 'POPUP',
   HEADER: 'HEADER',
   FOOTER: 'FOOTER',
-  FULLSCREEN: 'FULLSCREEN',
+  FULLSCREEN: 'FULLSCREEN'
 };
 
 export const LAYOUT_OPTIONS = [
   {
     value: LAYOUT_TYPES.MODAL,
     label: 'Modal',
-    description: 'Content displayed in center like a modal dialog',
+    description: 'Content displayed in center like a modal dialog'
   },
   {
     value: LAYOUT_TYPES.HEADER,
     label: 'Top Banner',
-    description: 'Content displayed at the top of the screen',
+    description: 'Content displayed at the top of the screen'
   },
   {
     value: LAYOUT_TYPES.FOOTER,
     label: 'Bottom Banner',
-    description: 'Content displayed at the bottom of the screen',
+    description: 'Content displayed at the bottom of the screen'
   },
   {
     value: LAYOUT_TYPES.FULLSCREEN,
     label: 'Fullscreen',
-    description: 'Content covers the entire screen',
-  },
+    description: 'Content covers the entire screen'
+  }
 ];
 
 export const COMPONENT_SIZES = ['small', 'middle', 'large'];
 
 export const DEVICE_FRAMES = {
   ANDROID: 'android-frame.svg',
-  IOS: 'ios-frame.svg',
+  IOS: 'ios-frame.svg'
 };
 
 // Screen area dimensions within device frames (accounting for PNG bezels)
 export const DEVICE_SCREEN_AREAS = {
   IOS: {
     // iOS screen area within 450x920 frame - accurate values for PNG asset
-    top: '85px', // Top bezel including notch area
-    left: '35px', // Side bezel width
-    width: '380px', // Actual screen width within bezels
-    height: '710px', // Actual screen height within bezels
+    top: '85px',     // Top bezel including notch area
+    left: '35px',    // Side bezel width
+    width: '380px',  // Actual screen width within bezels
+    height: '710px'  // Actual screen height within bezels
   },
   ANDROID: {
     // Android screen area within 450x920 frame - accurate values for PNG asset
-    top: '85px', // Top bezel including status bar
-    left: '35px', // Side bezel width (same as iOS for consistency)
-    width: '380px', // Actual screen width within bezels
-    height: '710px', // Actual screen height within bezels
-  },
+    top: '85px',     // Top bezel including status bar
+    left: '35px',    // Side bezel width (same as iOS for consistency)
+    width: '380px',  // Actual screen width within bezels
+    height: '710px'  // Actual screen height within bezels
+  }
 };
 
 // Content positioning configurations within the screen area (not the full frame)
@@ -63,42 +63,42 @@ export const LAYOUT_POSITIONS = {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: '85%', // Reduced to ensure content stays within screen
-    height: '55%', // Reduced to ensure content stays within screen
+    width: '85%',      // Reduced to ensure content stays within screen
+    height: '55%',     // Reduced to ensure content stays within screen
     maxWidth: '320px', // Adjusted for screen area
     maxHeight: '380px',
-    minHeight: '180px',
+    minHeight: '180px'
   },
   [LAYOUT_TYPES.HEADER]: {
-    top: '2%', // More margin from top of screen
+    top: '2%',         // More margin from top of screen
     left: '50%',
     transform: 'translateX(-50%)',
-    width: '90%', // Reduced to stay within screen bounds
+    width: '90%',      // Reduced to stay within screen bounds
     height: '22%',
     maxHeight: '160px',
-    minHeight: '100px',
+    minHeight: '100px'
   },
   [LAYOUT_TYPES.FOOTER]: {
-    bottom: '2%', // More margin from bottom of screen
+    bottom: '2%',      // More margin from bottom of screen
     left: '50%',
     transform: 'translateX(-50%)',
-    width: '90%', // Reduced to stay within screen bounds
+    width: '90%',      // Reduced to stay within screen bounds
     height: '22%',
     maxHeight: '160px',
-    minHeight: '100px',
+    minHeight: '100px'
   },
   [LAYOUT_TYPES.FULLSCREEN]: {
-    top: '2%', // Small margin to account for screen bounds
+    top: '2%',         // Small margin to account for screen bounds
     left: '2%',
-    width: '96%', // Slightly smaller to ensure it stays within screen
-    height: '96%',
-  },
+    width: '96%',      // Slightly smaller to ensure it stays within screen
+    height: '96%'
+  }
 };
 
 // Scroll position multipliers for adaptive scrolling in InAppPreviewPane
 export const SCROLL_POSITION_MULTIPLIERS = {
-  [LAYOUT_TYPES.HEADER]: 0.0, // Top of screen
-  [LAYOUT_TYPES.FOOTER]: 1.0, // Bottom of screen
-  [LAYOUT_TYPES.MODAL]: 0.4, // Center-ish position
-  [LAYOUT_TYPES.FULLSCREEN]: 0.3, // Slightly above center
+  [LAYOUT_TYPES.HEADER]: 0.0,      // Top of screen
+  [LAYOUT_TYPES.FOOTER]: 1.0,      // Bottom of screen
+  [LAYOUT_TYPES.MODAL]: 0.4,       // Center-ish position
+  [LAYOUT_TYPES.FULLSCREEN]: 0.3   // Slightly above center
 };

package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js

@@ -2,9 +2,7 @@
  * InAppPreviewPane - Complete InApp preview with device frames and dynamic positioning
  */
 
-import React, {
-  useMemo, useRef, useEffect, useCallback,
-} from 'react';
+import React, { useMemo, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 
@@ -18,6 +16,7 @@ import ContentOverlay from './ContentOverlay';
 import { useEditorContext } from '../common/EditorContext';
 
 // Constants
+import { DEVICE_TYPES } from '../../constants';
 import { LAYOUT_TYPES, SCROLL_POSITION_MULTIPLIERS } from './constants';
 
 // Styles
@@ -28,14 +27,14 @@ const InAppPreviewPane = ({
   className = '',
   isFullscreenMode = false,
   isModalContext = false,
-  layoutType: propLayoutType = LAYOUT_TYPES.MODAL,
+  layoutType: propLayoutType = LAYOUT_TYPES.MODAL
 }) => {
   const {
     content,
     activeDevice,
     getDeviceContent,
     layoutType: contextLayoutType,
-    isFullscreenMode: contextIsFullscreenMode,
+    isFullscreenMode: contextIsFullscreenMode
   } = useEditorContext();
 
   // Refs for adaptive scrolling
@@ -84,7 +83,7 @@ const InAppPreviewPane = ({
         requestAnimationFrame(() => {
           container.scrollTo({
             top: targetScrollTop,
-            behavior: 'smooth',
+            behavior: 'smooth'
           });
         });
       } catch (error) {
@@ -174,7 +173,7 @@ InAppPreviewPane.propTypes = {
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
   isModalContext: PropTypes.bool,
-  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES)),
+  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES))
 };
 
 export default injectIntl(InAppPreviewPane);

package/v2Components/HtmlEditor/components/PreviewPane/_previewPane.scss

@@ -14,8 +14,8 @@
 
   &__mode-controls {
     position: absolute;
-    top: 1.5rem;
-    right: 2rem;
+    top: 0.5rem;
+    right: 0.5rem;
     z-index: 10;
     background-color: $CAP_G07;
     border-radius: 0.5rem;
@@ -59,7 +59,7 @@
 
           &:hover,
           &.preview-mode-group__btn--active {
-            background-color: $CAP_WHITE;
+            background-color: rgba($CAP_WHITE, 0.5);
           }
         }
       }
@@ -191,6 +191,9 @@
     height: calc(100% - 2rem);
     color: $CAP_G10;
     text-align: center;
+    background-color: $CAP_WHITE;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
     margin: 0;
     width: 100%;
 

package/v2Components/HtmlEditor/components/PreviewPane/index.js

@@ -55,7 +55,7 @@ const PreviewPane = ({
   className = '',
   isFullscreenMode = false,
   isModalContext = false,
-  layoutType = LAYOUT_TYPES.MODAL,
+  layoutType = LAYOUT_TYPES.MODAL
 }) => {
   const { content, layout, variant } = useEditorContext();
 
@@ -124,11 +124,13 @@ const PreviewPane = ({
   }, [combinedContent]);
 
   // Cleanup blob URL on unmount
-  useEffect(() => () => {
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
-    }
+  useEffect(() => {
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
   }, []);
 
   // Generate CSS classes based on view mode
@@ -171,11 +173,10 @@ const PreviewPane = ({
   const renderEmptyState = () => (
     <div className="preview-empty">
       <div className="empty-content">
+        <div className="empty-icon">📝</div>
         <p>{intl.formatMessage(messages.startTypingHtml)}</p>
         <p className="preview-mode-info">
-          {intl.formatMessage(messages.previewMode)}
-:
-          {
+          {intl.formatMessage(messages.previewMode)}: {
             viewMode === PREVIEW_MODES.DESKTOP
               ? intl.formatMessage(messages.desktop)
               : viewMode === PREVIEW_MODES.MOBILE
@@ -222,7 +223,7 @@ PreviewPane.propTypes = {
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
   isModalContext: PropTypes.bool,
-  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES)),
+  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES))
 };
 
 export default injectIntl(PreviewPane);

package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss

@@ -161,7 +161,7 @@
 
   // Dragging state styling
   &--dragging &__splitter {
-    background-color: map-get($CAP_SECONDARY, base);
+    background-color: map-get($CAP_PRIMARY, base);
   }
 
   &--dragging &__splitter-line {