@capillarytech/creatives-library 8.0.207 → 8.0.209

package/v2Components/HtmlEditor/components/ValidationPanel/_validationPanel.scss

@@ -0,0 +1,311 @@
+/**
+ * ValidationPanel Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.validation-panel {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fff;
+
+  &--loading {
+    padding: 16px;
+    text-align: center;
+  }
+
+  &--clean {
+    padding: 16px;
+    text-align: center;
+    background: #f6ffed;
+    border-color: #b7eb8f;
+  }
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #666;
+    font-size: 14px;
+  }
+
+  &__clean {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #52c41a;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__summary {
+    display: flex;
+    gap: 16px;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-bottom: 1px solid #d9d9d9;
+    border-radius: 6px 6px 0 0;
+  }
+
+  &__summary-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #666;
+
+    &--security {
+      color: #ff4d4f;
+      font-weight: 500;
+    }
+
+    span:first-of-type {
+      font-weight: 600;
+      margin-left: 2px;
+    }
+  }
+
+  &__collapse {
+    .ant-collapse-item {
+      border: none;
+
+      &:last-child {
+        border-radius: 0 0 6px 6px;
+      }
+    }
+
+    .ant-collapse-header {
+      padding: 12px 16px !important;
+      align-items: center !important;
+    }
+
+    .ant-collapse-content {
+      border-top: 1px solid #f0f0f0;
+    }
+
+    .ant-collapse-content-box {
+      padding: 0;
+    }
+  }
+
+  &__panel {
+    &--error {
+      .ant-collapse-header {
+        background: #fff2f0;
+        border-left: 3px solid #ff4d4f;
+      }
+    }
+
+    &--warning {
+      .ant-collapse-header {
+        background: #fffbe6;
+        border-left: 3px solid #faad14;
+      }
+    }
+
+    &--info {
+      .ant-collapse-header {
+        background: #e6f7ff;
+        border-left: 3px solid #1890ff;
+      }
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+  }
+
+  &__issues {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  &__sanitization {
+    border-top: 1px solid #d9d9d9;
+    background: #f9f9f9;
+  }
+
+  &__sanitization-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    font-weight: 500;
+    color: #666;
+    font-size: 13px;
+  }
+
+  &__sanitization-list {
+    padding: 0 16px 12px;
+  }
+
+  &__sanitization-item {
+    padding: 4px 0;
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+}
+
+.validation-issue {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--error {
+    border-left: 2px solid #ff4d4f;
+  }
+
+  &--warning {
+    border-left: 2px solid #faad14;
+  }
+
+  &--info {
+    border-left: 2px solid #1890ff;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__message {
+    font-size: 13px;
+    line-height: 1.4;
+    color: #262626;
+    margin-bottom: 4px;
+    word-break: break-word;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 11px;
+    color: #8c8c8c;
+  }
+
+  &__location {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    background: #f5f5f5;
+    padding: 2px 6px;
+    border-radius: 3px;
+  }
+
+  &__rule {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    background: #e6f7ff;
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: #1890ff;
+  }
+
+  &__source {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: #f0f0f0;
+    padding: 2px 6px;
+    border-radius: 3px;
+  }
+}
+
+// Dark theme support for editor integration
+.html-editor-content .validation-panel {
+  border-color: #424242;
+  background: #2d2d2d;
+  color: #e0e0e0;
+
+  &__summary {
+    background: #3d3d3d;
+    border-color: #424242;
+  }
+
+  .validation-issue {
+    border-color: #424242;
+    color: #e0e0e0;
+
+    &:hover {
+      background: #3d3d3d;
+    }
+
+    &__message {
+      color: #e0e0e0;
+    }
+
+    &__location {
+      background: #424242;
+      color: #e0e0e0;
+    }
+
+    &__rule {
+      background: #1f1f1f;
+      color: #69c0ff;
+    }
+
+    &__source {
+      background: #424242;
+      color: #e0e0e0;
+    }
+  }
+
+  .ant-collapse-header {
+    background: #3d3d3d !important;
+    color: #e0e0e0 !important;
+  }
+
+  .ant-collapse-content {
+    background: #2d2d2d;
+    border-color: #424242;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .validation-panel {
+    &__summary {
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    &__issues {
+      max-height: 200px;
+    }
+  }
+
+  .validation-issue {
+    padding: 8px 12px;
+
+    &__meta {
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,297 @@
+/**
+ * ValidationPanel Component
+ * Displays validation errors, warnings, and security issues
+ */
+
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+// Import components individually to avoid undefined imports
+import Badge from 'antd/lib/badge';
+import Collapse from 'antd/lib/collapse';
+import Empty from 'antd/lib/empty';
+import Spin from 'antd/lib/spin';
+
+// Import icons individually
+import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
+import WarningOutlined from '@ant-design/icons/WarningOutlined';
+import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
+import BugOutlined from '@ant-design/icons/BugOutlined';
+import CodeOutlined from '@ant-design/icons/CodeOutlined';
+import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
+import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
+
+import messages from './messages';
+import './_validationPanel.scss';
+
+const { Panel } = Collapse;
+
+/**
+ * ValidationPanel Component
+ */
+const ValidationPanel = ({
+  validation,
+  isVisible = true,
+  onErrorClick,
+  showLineNumbers = true,
+  groupBySource = false,
+  variant = 'email'
+}) => {
+  const [activeKeys, setActiveKeys] = useState(['errors', 'warnings']);
+
+  // Group issues by type or source
+  const groupedIssues = useMemo(() => {
+    if (!validation) return {};
+
+    const allIssues = validation.getAllIssues();
+
+    if (groupBySource) {
+      return allIssues.reduce((groups, issue) => {
+        const source = issue.source || 'unknown';
+        if (!groups[source]) {
+          groups[source] = [];
+        }
+        groups[source].push(issue);
+        return groups;
+      }, {});
+    } else {
+      return {
+        errors: allIssues.filter(issue => issue.severity === 'error'),
+        warnings: allIssues.filter(issue => issue.severity === 'warning'),
+        info: allIssues.filter(issue => issue.severity === 'info')
+      };
+    }
+  }, [validation, groupBySource]);
+
+  // Get icon for issue type
+  const getIssueIcon = (severity, source) => {
+    if (source === 'security') {
+      return <ShieldOutlined style={{ color: '#ff4d4f' }} />;
+    }
+
+    switch (severity) {
+      case 'error':
+        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
+      case 'warning':
+        return <WarningOutlined style={{ color: '#faad14' }} />;
+      case 'info':
+        return <InfoCircleOutlined style={{ color: '#1890ff' }} />;
+      default:
+        return <BugOutlined style={{ color: '#666' }} />;
+    }
+  };
+
+  // Get source icon
+  const getSourceIcon = (source) => {
+    switch (source) {
+      case 'htmlhint':
+        return <CodeOutlined />;
+      case 'css-validator':
+        return <CodeOutlined />;
+      case 'security':
+        return <ShieldOutlined />;
+      case 'custom':
+        return <BugOutlined />;
+      default:
+        return <InfoCircleOutlined />;
+    }
+  };
+
+  // Handle issue click
+  const handleIssueClick = (issue) => {
+    if (onErrorClick && issue.line) {
+      onErrorClick({
+        line: issue.line,
+        column: issue.column || 1,
+        message: issue.message,
+        severity: issue.severity
+      });
+    }
+  };
+
+  // Render issue item
+  const renderIssue = (issue, index) => (
+    <div
+      key={index}
+      className={`validation-issue validation-issue--${issue.severity}`}
+      onClick={() => handleIssueClick(issue)}
+      role="button"
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleIssueClick(issue);
+        }
+      }}
+    >
+      <div className="validation-issue__icon">
+        {getIssueIcon(issue.severity, issue.source)}
+      </div>
+
+      <div className="validation-issue__content">
+        <div className="validation-issue__message">
+          {issue.message}
+        </div>
+
+        <div className="validation-issue__meta">
+          {showLineNumbers && issue.line && (
+            <span className="validation-issue__location">
+              <FormattedMessage {...messages.lineColumn} values={{
+                line: issue.line,
+                column: issue.column || 1
+              }} />
+            </span>
+          )}
+
+          {issue.rule && (
+            <span className="validation-issue__rule">
+              {issue.rule}
+            </span>
+          )}
+
+          {issue.source && (
+            <span className="validation-issue__source">
+              {getSourceIcon(issue.source)}
+              {issue.source}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // Render panel header with count
+  const renderPanelHeader = (title, count, severity) => (
+    <div className="validation-panel__header">
+      <span className="validation-panel__title">
+        {getIssueIcon(severity)}
+        <FormattedMessage {...title} />
+      </span>
+      {count > 0 && (
+        <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
+      )}
+    </div>
+  );
+
+  // Get severity color
+  const getSeverityColor = (severity) => {
+    switch (severity) {
+      case 'error': return '#ff4d4f';
+      case 'warning': return '#faad14';
+      case 'info': return '#1890ff';
+      default: return '#666';
+    }
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  // Show loading state
+  if (validation?.isValidating) {
+    return (
+      <div className="validation-panel validation-panel--loading">
+        <div className="validation-panel__loading">
+          <Spin size="small" />
+          <span><FormattedMessage {...messages.validating} /></span>
+        </div>
+      </div>
+    );
+  }
+
+  // Skip clean state - don't show "No validation issues found" message
+
+  // Render validation issues
+  return (
+    <div className="validation-panel">
+      <div className="validation-panel__summary">
+        <div className="validation-panel__summary-item">
+          <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
+          <span>{validation?.summary?.totalErrors || 0}</span>
+          <FormattedMessage {...messages.errors} />
+        </div>
+
+        <div className="validation-panel__summary-item">
+          <WarningOutlined style={{ color: '#faad14' }} />
+          <span>{validation?.summary?.totalWarnings || 0}</span>
+          <FormattedMessage {...messages.warnings} />
+        </div>
+
+        {validation?.summary?.hasSecurityIssues && (
+          <div className="validation-panel__summary-item validation-panel__summary-item--security">
+            <ShieldOutlined style={{ color: '#ff4d4f' }} />
+            <FormattedMessage {...messages.securityIssues} />
+          </div>
+        )}
+      </div>
+
+      <Collapse
+        activeKey={activeKeys}
+        onChange={setActiveKeys}
+        className="validation-panel__collapse"
+        ghost
+      >
+        {Object.entries(groupedIssues).map(([key, issues]) => {
+          if (!issues || issues.length === 0) return null;
+
+          const isSourceGroup = groupBySource;
+          const title = isSourceGroup
+            ? { id: `htmlEditor.validation.source.${key}`, defaultMessage: key }
+            : messages[key] || { id: `htmlEditor.validation.${key}`, defaultMessage: key };
+
+          const severity = isSourceGroup
+            ? (issues.find(i => i.severity === 'error') ? 'error' :
+               issues.find(i => i.severity === 'warning') ? 'warning' : 'info')
+            : key;
+
+          return (
+            <Panel
+              key={key}
+              header={renderPanelHeader(title, issues.length, severity)}
+              className={`validation-panel__panel validation-panel__panel--${severity}`}
+            >
+              <div className="validation-panel__issues">
+                {issues.length === 0 ? (
+                  <Empty
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                    description={<FormattedMessage {...messages.noIssuesOfType} />}
+                  />
+                ) : (
+                  issues.map((issue, index) => renderIssue(issue, index))
+                )}
+              </div>
+            </Panel>
+          );
+        })}
+      </Collapse>
+
+      {validation?.sanitizationWarnings?.length > 0 && (
+        <div className="validation-panel__sanitization">
+          <div className="validation-panel__sanitization-header">
+            <EyeInvisibleOutlined />
+            <FormattedMessage {...messages.sanitizationWarnings} />
+          </div>
+          <div className="validation-panel__sanitization-list">
+            {validation.sanitizationWarnings.map((warning, index) => (
+              <div key={index} className="validation-panel__sanitization-item">
+                {warning.message}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ValidationPanel.propTypes = {
+  validation: PropTypes.object,
+  isVisible: PropTypes.bool,
+  onErrorClick: PropTypes.func,
+  showLineNumbers: PropTypes.bool,
+  groupBySource: PropTypes.bool,
+  variant: PropTypes.oneOf(['email', 'inapp'])
+};
+
+export default ValidationPanel;

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

@@ -0,0 +1,57 @@
+/**
+ * ValidationPanel Messages
+ * Internationalization messages for the validation panel
+ */
+
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  errors: {
+    id: 'htmlEditor.validation.errors',
+    defaultMessage: 'Errors'
+  },
+  warnings: {
+    id: 'htmlEditor.validation.warnings',
+    defaultMessage: 'Warnings'
+  },
+  info: {
+    id: 'htmlEditor.validation.info',
+    defaultMessage: 'Info'
+  },
+  securityIssues: {
+    id: 'htmlEditor.validation.securityIssues',
+    defaultMessage: 'Security Issues'
+  },
+  noIssues: {
+    id: 'htmlEditor.validation.noIssues',
+    defaultMessage: 'No validation issues found'
+  },
+  noIssuesOfType: {
+    id: 'htmlEditor.validation.noIssuesOfType',
+    defaultMessage: 'No issues of this type'
+  },
+  validating: {
+    id: 'htmlEditor.validation.validating',
+    defaultMessage: 'Validating...'
+  },
+  lineColumn: {
+    id: 'htmlEditor.validation.lineColumn',
+    defaultMessage: 'Line {line}, Column {column}'
+  },
+  sanitizationWarnings: {
+    id: 'htmlEditor.validation.sanitizationWarnings',
+    defaultMessage: 'Content Sanitization Warnings'
+  },
+  htmlValidation: {
+    id: 'htmlEditor.validation.htmlValidation',
+    defaultMessage: 'HTML Validation'
+  },
+  cssValidation: {
+    id: 'htmlEditor.validation.cssValidation',
+    defaultMessage: 'CSS Validation'
+  },
+  securityValidation: {
+    id: 'htmlEditor.validation.securityValidation',
+    defaultMessage: 'Security Validation'
+  }
+});