@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

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

@@ -1,6 +0,0 @@
-// Severity constants
-export const SEVERITY = {
-  ERROR: 'error',
-  WARNING: 'warning',
-  INFO: 'info',
-};

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -1,255 +0,0 @@
-/**
- * ValidationTabs Styles
- */
-
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.validation-tabs {
-  overflow-y: hidden;
-  width: 100%;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__tabs {
-    flex: 1;
-    
-    // Override CapTab styles for proper spacing
-    .cap-tab-v2 {
-      .ant-tabs-bar {
-        padding: 0.5rem 0.5rem;
-        background-color: $CAP_COLOR_05;
-      }
-      .ant-tabs-nav {
-        margin-bottom: 0;
-        
-        &::before {
-          border-bottom: none; // Remove bottom border
-        }
-      }
-
-      .ant-tabs-tab {
-        padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
-        margin-right: 0; // Remove margin, use padding instead
-        
-        color: $CAP_G03;
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1;
-        letter-spacing: 0;
-        background-color: $CAP_COLOR_05;
-        border-radius: 0.25rem;
-        border-bottom: none; // Remove bottom border
-        
-        & + .ant-tabs-tab {
-          margin-left: 1.5rem; // Add space between tabs
-        }
-        
-        &:hover {
-          color: $CAP_COLOR_05;
-          background-color: $CAP_COLOR_05;
-        }
-
-        &.ant-tabs-tab-active {
-          .ant-tabs-tab-btn {
-            color: $CAP_COLOR_05;
-            font-weight: 600;
-          }
-        }
-      }
-
-      .ant-tabs-ink-bar {
-        display: none; // Hide the ink bar (bottom border indicator)
-      }
-
-      .ant-tabs-content-holder {
-        padding-top: 0.25rem; // Reduced from 0.5rem
-        padding-bottom: 0; // No bottom padding
-      }
-    }
-  }
-
-  &__tab-label {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  &__tab-count {
-    color: inherit;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding-top: 0.5rem;
-    background-color: $CAP_COLOR_05;
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.9rem;
-    height: 2.3rem;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: $CAP_G03;
-    transition: all 0.2s ease;
-
-    // &:hover {
-    //   background-color: rgba($CAP_COLOR_05, 0.1);
-    //   color: $CAP_COLOR_05;
-    // }
-
-    .cap-icon-v2 {
-      font-size: 0.875rem;
-    }
-  }
-
-  &__content {
-    max-height: 15rem; // Limit height for many errors
-    overflow-y: auto;
-    padding-bottom: 0; // Remove bottom padding completely
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: 0.375rem;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $CAP_G06;
-      border-radius: 0.1875rem;
-
-      &:hover {
-        background-color: $CAP_G04;
-      }
-    }
-  }
-
-  &__item {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding: 0.5rem 0.5rem; // Reduced from 0.375rem
-    margin-bottom: 3px;
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0.25rem; // Minimal padding on last item
-    }
-
-    &--error {
-      .validation-tabs__icon--error {
-        color: $CAP_RED;
-      }
-    }
-
-    &--warning {
-      .validation-tabs__icon--warning {
-        color: $CAP_YELLOW;
-      }
-    }
-  }
-
-  &__item-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    padding-top: 0.125rem;
-  }
-
-  &__icon {
-    font-size: 0.875rem;
-
-    &--error {
-      color: $CAP_RED;
-    }
-
-    &--warning {
-      color: $CAP_YELLOW;
-    }
-  }
-
-  &__item-content {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 2;
-    color: $CAP_G01;
-  }
-
-  &__item-message {
-    color: $CAP_G01;
-  }
-
-  &__item-location {
-    color: $CAP_G03;
-    white-space: nowrap;
-  }
-
-  &__item-rule {
-    color: $CAP_G04;
-    font-family: monospace;
-    font-size: 0.6875rem;
-  }
-
-  &__item-navigate {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    width: 1.7rem;
-    height: 1.7rem;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: $CAP_G04;
-    transition: all 0.2s ease;
-
-    .anticon {
-      font-size: 1rem; // Increased icon size
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .validation-tabs {
-    padding: 0.375rem 0.5rem;
-
-    &__tabs {
-      .ant-tabs-tab {
-        margin-right: 1rem;
-        font-size: 0.8125rem;
-        background-color: $CAP_COLOR_05;
-      }
-    }
-
-    &__content {
-      max-height: 10rem;
-    }
-
-    &__item-content {
-      font-size: 0.6875rem;
-    }
-  }
-}

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

@@ -1,364 +0,0 @@
-/**
- * ValidationTabs Component
- *
- * Displays validation errors in a tabbed interface with 3 categories:
- * - HTML issues: General HTML/CSS validation errors and warnings
- * - Label issues: Tag syntax errors (open/close tags, attributes, brackets)
- * - Liquid issues: Liquid expression errors (shown when liquid content is detected, even if liquid feature is disabled)
- */
-
-import React, { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-
-// Cap UI Library
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-
-// Messages
-import messages from './messages';
-import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
-import { ISSUE_SOURCES, LABEL_ISSUE_PATTERNS } from '../../utils/validationConstants';
-
-// Styles
-import './_validationTabs.scss';
-import {StyledCapTab} from '../../../../v2Containers/MobilePushNew/style';
-
-/**
- * Categorize issues into HTML, Label, and Liquid categories
- */
-const categorizeIssues = (allIssues) => {
-  const htmlIssues = [];
-  const labelIssues = [];
-  const liquidIssues = [];
-
-  allIssues.forEach((issue) => {
-    const { source, rule, message } = issue;
-    const messageLower = (message || '').toLowerCase();
-    const ruleLower = (rule || '').toLowerCase();
-
-    // Check if it's a Liquid issue - ONLY by source, not by message content
-    // This prevents false positives where HTML errors mention liquid syntax
-    if (source === ISSUE_SOURCES.LIQUID) {
-      liquidIssues.push(issue);
-      return;
-    }
-
-    // Check if it's a Label (tag syntax) issue
-    const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
-      (pattern) => messageLower.includes(pattern.toLowerCase())
-        || ruleLower.includes(pattern.toLowerCase()),
-    );
-
-    if (isLabelIssue) {
-      labelIssues.push(issue);
-      return;
-    }
-
-    // Default to HTML issues
-    htmlIssues.push(issue);
-  });
-
-  return { htmlIssues, labelIssues, liquidIssues };
-};
-
-/**
- * Check if an issue is a blocking error (API error, Rule Group #1, or client-side Liquid validation errors)
- */
-const isBlockingError = (issue) => {
-  const { rule, source, severity } = issue || {};
-  // API errors are blocking
-  if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') {
-    return true;
-  }
-  // Client-side Liquid validation errors are blocking (genuine syntax errors)
-  if (source === 'liquid-validator' && severity === 'error') {
-    return true;
-  }
-  // Rule Group #1 errors are blocking
-  if (BLOCKING_ERROR_RULE_IDS.includes(rule)) {
-    return true;
-  }
-  return false;
-};
-
-/**
- * Get icon based on whether issue is blocking error or warning
- * Blocking errors use error-icon, warnings use alert-warning
- */
-const getSeverityIcon = (issue) => {
-  if (isBlockingError(issue)) {
-    return <CapIcon type="error-icon" className="validation-tabs__icon validation-tabs__icon--error" />;
-  }
-  // All other issues (warnings, non-blocking) use warning icon
-  return <CapIcon type="alert-warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
-};
-
-/**
- * ValidationTabContent - Renders the content for each tab
- */
-const ValidationTabContent = ({
-  issues,
-  onErrorClick,
-}) => {
-  if (!issues || issues.length === 0) {
-    return null;
-  }
-
-  const handleNavigateClick = (issue, e) => {
-    e.stopPropagation();
-    if (onErrorClick) {
-      // Always call onErrorClick to acknowledge the error (enables buttons)
-      // If line number exists, navigate to it; otherwise just acknowledge and focus editor
-      onErrorClick({
-        line: issue.line || 1, // Default to line 1 if no line number (for API errors)
-        column: issue.column || 1,
-        message: issue.message,
-        severity: issue.severity,
-      });
-    }
-  };
-
-  return (
-    <div className="validation-tabs__content">
-      {issues.map((issue, index) => {
-        const {
-          message, line, column,
-        } = issue;
-        const key = `${message}-${line}-${column}-${index}`;
-        const isBlocking = isBlockingError(issue);
-        const displaySeverity = isBlocking ? 'error' : 'warning';
-
-        return (
-          <div
-            key={key}
-            className={`validation-tabs__item validation-tabs__item--${displaySeverity}`}
-          >
-            <div className="validation-tabs__item-icon">
-              {getSeverityIcon(issue)}
-            </div>
-            <div className="validation-tabs__item-content">
-              <span className="validation-tabs__item-message">
-                {message}
-              </span>
-              {line && (
-                <span className="validation-tabs__item-location">
-                  <FormattedMessage
-                    {...messages.lineChar}
-                    values={{ line, char: column || 1 }}
-                  />
-                </span>
-              )}
-            </div>
-            {/* Always show redirection icon for errors (even API errors without line numbers) */}
-            {/* Clicking it acknowledges the error and enables buttons */}
-            <CapTooltip title={line ? `Line ${line}, Char ${column || 1}` : 'Click to acknowledge error and focus editor'}>
-              <button
-                type="button"
-                className="validation-tabs__item-navigate"
-                onClick={(e) => handleNavigateClick(issue, e)}
-                aria-label={line ? `Line ${line}, Char ${column || 1}` : 'Acknowledge error'}
-              >
-                <CapIcon type="redirection" />
-              </button>
-            </CapTooltip>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-ValidationTabContent.propTypes = {
-  issues: PropTypes.array,
-  onErrorClick: PropTypes.func,
-};
-
-ValidationTabContent.defaultProps = {
-  issues: [],
-  onErrorClick: null,
-};
-
-/**
- * ValidationTabs Component
- */
-const ValidationTabs = ({
-  intl,
-  validation,
-  onErrorClick,
-  onClose,
-  className,
-}) => {
-  const [activeKey, setActiveKey] = useState(null);
-
-  // Categorize issues
-  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => {
-    if (!validation) {
-      return { htmlIssues: [], labelIssues: [], liquidIssues: [] };
-    }
-
-    // Get all issues from validation
-    const allIssues = validation.getAllIssues ? validation.getAllIssues() : [];
-    const categorized = categorizeIssues(allIssues);
-    return categorized;
-  }, [validation]);
-
-  // Calculate counts
-  const htmlCount = htmlIssues.length;
-  const labelCount = labelIssues.length;
-  const liquidCount = liquidIssues.length;
-  // Include liquid issues in total count even when liquid is disabled
-  // This ensures liquid errors are shown when liquid content is detected but feature is disabled
-  const totalCount = htmlCount + labelCount + liquidCount;
-
-  // Set default active key when issues change
-  useMemo(() => {
-    if (htmlCount > 0 && !activeKey) {
-      setActiveKey('html');
-    } else if (labelCount > 0 && !activeKey) {
-      setActiveKey('label');
-    } else if (liquidCount > 0 && !activeKey) {
-      // Show liquid tab even when liquid is disabled if liquid content is detected
-      setActiveKey('liquid');
-    }
-  }, [htmlCount, labelCount, liquidCount, activeKey]);
-
-  // Don't render if no issues
-  if (totalCount === 0) {
-    return null;
-  }
-
-  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
-  const tabPanes = [];
-
-  if (htmlCount > 0) {
-    tabPanes.push({
-      key: 'html',
-      tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.htmlIssues)} (${htmlCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.htmlIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {htmlCount}
-              )
-            </span>
-          </span>
-        </CapTooltip>
-      ),
-      content: (
-        <ValidationTabContent
-          issues={htmlIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  if (labelCount > 0) {
-    tabPanes.push({
-      key: 'label',
-      tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.labelIssues)} (${labelCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.labelIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {labelCount}
-              )
-            </span>
-          </span>
-        </CapTooltip>
-      ),
-      content: (
-        <ValidationTabContent
-          issues={labelIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  // Show liquid issues tab even when liquid is disabled if liquid content is detected
-  // This allows users to see errors when they add liquid content but liquid feature is not enabled
-  if (liquidCount > 0) {
-    tabPanes.push({
-      key: 'liquid',
-      tab: (
-        <CapTooltip title={`${intl.formatMessage(messages.liquidIssues)} (${liquidCount})`}>
-          <span className="validation-tabs__tab-label">
-            <FormattedMessage {...messages.liquidIssues} />
-            <span className="validation-tabs__tab-count">
-              (
-              {liquidCount}
-              )
-            </span>
-          </span>
-        </CapTooltip>
-      ),
-      content: (
-        <ValidationTabContent
-          issues={liquidIssues}
-          onErrorClick={onErrorClick}
-          intl={intl}
-        />
-      ),
-    });
-  }
-
-  // Handle close
-  const handleClose = () => {
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  return (
-    <div className={`validation-tabs ${className || ''}`}>
-      <CapRow className="validation-tabs__header">
-        <StyledCapTab
-          className="validation-tabs__tabs"
-          activeKey={activeKey || (tabPanes[0]?.key)}
-          onChange={setActiveKey}
-          panes={tabPanes}
-        />
-        <CapRow className="validation-tabs__actions">
-          <CapTooltip title={intl.formatMessage(messages.closePanel)}>
-            <button
-              type="button"
-              className="validation-tabs__close"
-              onClick={handleClose}
-              aria-label={intl.formatMessage(messages.closePanel)}
-            >
-              <CapIcon type="close" />
-            </button>
-          </CapTooltip>
-        </CapRow>
-      </CapRow>
-    </div>
-  );
-};
-
-ValidationTabs.propTypes = {
-  intl: intlShape.isRequired,
-  validation: PropTypes.shape({
-    getAllIssues: PropTypes.func,
-  }),
-  onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-ValidationTabs.defaultProps = {
-  validation: null,
-  onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: false,
-  className: '',
-};
-
-export default injectIntl(ValidationTabs);

package/v2Components/HtmlEditor/components/ValidationTabs/messages.js

@@ -1,51 +0,0 @@
-/**
- * ValidationTabs Messages
- *
- * Internationalization messages for the ValidationTabs component
- */
-
-import { defineMessages } from 'react-intl';
-
-const scope = 'app.components.HtmlEditor.ValidationTabs';
-
-export default defineMessages({
-  // Tab labels
-  htmlIssues: {
-    id: `${scope}.htmlIssues`,
-    defaultMessage: 'HTML issues',
-  },
-  labelIssues: {
-    id: `${scope}.labelIssues`,
-    defaultMessage: 'Label issues',
-  },
-  liquidIssues: {
-    id: `${scope}.liquidIssues`,
-    defaultMessage: 'Liquid issues',
-  },
-
-  // Error item labels
-  syntaxError: {
-    id: `${scope}.syntaxError`,
-    defaultMessage: 'Syntax Error',
-  },
-  lineChar: {
-    id: `${scope}.lineChar`,
-    defaultMessage: 'Line {line}, Char {char}.',
-  },
-
-  // Tooltips
-  navigateToError: {
-    id: `${scope}.navigateToError`,
-    defaultMessage: 'Go to error location',
-  },
-  closePanel: {
-    id: `${scope}.closePanel`,
-    defaultMessage: 'Close validation panel',
-  },
-
-  // Liquid documentation
-  liquidDocumentation: {
-    id: `${scope}.liquidDocumentation`,
-    defaultMessage: 'Liquid documentation',
-  },
-});

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -1,40 +0,0 @@
-/**
- * Validation Constants
- *
- * Shared constants for validation issue categorization across HTML Editor components
- */
-
-// Issue sources for categorizing validation errors
-export const ISSUE_SOURCES = {
-  HTMLHINT: 'htmlhint',
-  CSS_VALIDATOR: 'css-validator',
-  CUSTOM: 'custom',
-  SECURITY: 'security',
-  LIQUID: 'liquid-validator',
-};
-
-// Label issue patterns - syntax errors related to tags
-// These patterns identify tag syntax errors (open/close tags, attributes, brackets)
-export const LABEL_ISSUE_PATTERNS = [
-  'tag must be paired',
-  'open tag match failed',
-  'closed tag match failed',
-  'unclosed',
-  'missing required',
-  'tag-pair',
-  'attr-value-not-empty',
-  'attr-no-duplication',
-  'tag-self-close',
-  'spec-char-escape',
-  'tagname-lowercase',
-  'attr-lowercase',
-  'src-not-empty',
-  'alt-require',
-];
-
-// Tab keys for error categorization
-export const ERROR_TAB_KEYS = {
-  HTML: 'html',
-  LABEL: 'label',
-  LIQUID: 'liquid',
-};