freemium-survey-components 2.0.480 → 2.0.482

package/.github/workflows/pr-template-validation.yml

@@ -0,0 +1,368 @@
+name: PR Template Validation
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize]
+
+permissions:
+  pull-requests: write
+  issues: write
+  contents: read
+
+jobs:
+  validate-template:
+    runs-on: ['self-hosted', 'Linux']
+    name: Validate PR Template Sections
+
+    steps:
+      - name: Check if PR is from a bot
+        id: bot-check
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const pr = context.payload.pull_request;
+            const author = pr.user.login;
+            const authorType = pr.user.type;
+
+            console.log('=== Bot Detection ===');
+            console.log(`PR Author: ${author}`);
+            console.log(`Author Type: ${authorType}`);
+
+            const botUsers = [
+              'dependabot[bot]',
+              'dependabot-preview[bot]',
+              'renovate[bot]',
+              'github-actions[bot]',
+              'mergify[bot]',
+              'snyk-bot'
+            ];
+
+            const isBot =
+              botUsers.includes(author) ||
+              author.endsWith('[bot]') ||
+              authorType === 'Bot';
+
+            const isDependencyPR =
+              pr.title.toLowerCase().includes('bump') ||
+              pr.title.toLowerCase().includes('update dependencies') ||
+              pr.title.toLowerCase().includes('chore(deps)');
+
+            const shouldSkip = isBot || isDependencyPR;
+
+            console.log(`Is Bot: ${isBot}`);
+            console.log(`Is Dependency PR: ${isDependencyPR}`);
+            console.log(`Should Skip Validation: ${shouldSkip}`);
+
+            if (shouldSkip) {
+              console.log('⏭️ Skipping PR template validation for automated PR');
+
+              const botSkipMarker = '<!-- pr-bot-skip-marker -->';
+              const comments = await github.paginate(github.rest.issues.listComments, {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                per_page: 100
+              });
+
+              const existingComment = comments.find(c => c.body.includes(botSkipMarker));
+              if (!existingComment) {
+                await github.rest.issues.createComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: context.issue.number,
+                  body: `${botSkipMarker}\n🤖 **Automated PR Detected** - Skipping PR template validation.\n\nThis PR appears to be from a bot or automated process. Template validation is not required.`
+                });
+                console.log('Created bot skip comment');
+              } else {
+                console.log('Bot skip comment already exists, skipping duplicate');
+              }
+            }
+
+            return shouldSkip;
+
+      - name: Validate PR Template Completion
+        if: steps.bot-check.outputs.result != 'true'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.RUNWAYCI_GITHUB_PAT_TOKEN }}
+          script: |
+            const prBody = context.payload.pull_request.body || '';
+            const prTitle = context.payload.pull_request.title || '';
+            const errors = [];
+            const warnings = [];
+
+            console.log('=== Starting PR Template Validation ===');
+            console.log(`PR #${context.issue.number}: ${prTitle}`);
+
+            // 0. Validate PR Title (must match commit message format)
+            console.log('Checking PR Title format...');
+            const validTypes = ['feat', 'fix', 'chore', 'docs', 'refactor', 'test', 'perf', 'ci', 'build', 'style', 'revert'];
+            const titleRegex = /^(feat|fix|chore|docs|refactor|test|perf|ci|build|style|revert):\s*\[(MP-\d+|FS-\d+|FSURVEY-\d+|DEVREL-\d+|MISC|Docs)\]\s+\S.*$/;
+            const hasTitleFormat = titleRegex.test(prTitle);
+
+            if (!hasTitleFormat) {
+              errors.push(`**PR Title**: Invalid format. Required format: \`type: [TICKET-ID] description\`
+
+              **Valid types**: ${validTypes.join(', ')}
+              **Valid tickets**: MP-xxxx, FS-xxxx, FSURVEY-xxxx, DEVREL-xxxx, MISC, Docs
+
+              **Examples**:
+              - ✅ \`feat: [MP-12345] Add Matrix question variant\`
+              - ✅ \`feat: [FS-1000] Add Dropdown component\`
+              - ✅ \`feat: [FSURVEY-2024] Add survey rendering enhancement\`
+              - ✅ \`fix: [MISC] Fix Consent focus trap\`
+              - ✅ \`chore: [DEVREL-4720] Update dependencies\`
+              - ❌ \`Add matrix question\` (missing type and ticket)
+              - ❌ \`[MP-12345] Add feature\` (missing type prefix)
+
+              **Your title**: \`${prTitle}\``);
+            } else {
+              const titleMatch = prTitle.match(titleRegex);
+              console.log(`✓ PR Title format valid: ${titleMatch[1]} - ${titleMatch[2]}`);
+            }
+
+            // 1. Validate Type of Change (at least one checkbox selected)
+            console.log('Checking Type of Change...');
+            const typeRegex = /## Type of Change[\s\S]*?(?=##|$)/;
+            const typeSection = prBody.match(typeRegex)?.[0] || '';
+            const hasTypeSelected = /- \[x\]/i.test(typeSection);
+
+            if (!hasTypeSelected) {
+              errors.push('**Type of Change**: No type selected. Please check at least one box (Feature, Bugfix, Refactor, etc.).');
+            } else {
+              console.log('✓ Type of Change selected');
+            }
+
+            // 2. Validate Ticket Reference (must have valid ticket ID)
+            console.log('Checking Ticket Reference...');
+            const ticketRegex = /-\s*\*\*Ticket ID\*\*:\s*\[(MP-\d+|FS-\d+|FSURVEY-\d+|DEVREL-\d+|MISC|Docs)\]/;
+            const hasTicketId = ticketRegex.test(prBody);
+
+            if (!hasTicketId) {
+              errors.push('**Ticket Reference**: Missing or invalid ticket ID. Required format: `[MP-xxxx]`, `[FS-xxxx]`, `[FSURVEY-xxxx]`, `[DEVREL-xxxx]`, `[MISC]`, or `[Docs]`');
+            } else {
+              const ticketMatch = prBody.match(ticketRegex);
+              console.log(`✓ Ticket ID found: ${ticketMatch[1]}`);
+            }
+
+            // 3. Validate Changes Made (minimum 3 bullet points with content)
+            console.log('Checking Changes Made...');
+            const changesRegex = /## Changes Made[\s\S]*?(?=##|$)/;
+            const changesSection = prBody.match(changesRegex)?.[0] || '';
+            const changesBullets = (changesSection.match(/^-\s+.+$/gm) || [])
+              .map(line => line.replace(/^-\s+/, '').trim())
+              .filter(content =>
+                content.length > 0 &&
+                !/^Change\s+\d+:?\s*$/i.test(content)
+              );
+
+            if (changesBullets.length < 3) {
+              errors.push(`**Changes Made**: Insufficient items listed (found ${changesBullets.length}). Please provide at least 3 bullet points describing your changes.`);
+            } else {
+              console.log(`✓ Changes Made: ${changesBullets.length} item(s) listed (minimum 3 met)`);
+            }
+
+            // 4. Validate Affected Areas (at least one checkbox selected)
+            console.log('Checking Affected Areas...');
+            const affectedRegex = /## Affected Areas[\s\S]*?(?=##|$)/;
+            const affectedSection = prBody.match(affectedRegex)?.[0] || '';
+            const hasAreaSelected = /- \[x\]/i.test(affectedSection);
+
+            if (!hasAreaSelected) {
+              errors.push('**Affected Areas**: No area selected. Please check at least one affected area (Source, Build/Bundling, CI/CD, Dependencies).');
+            } else {
+              console.log('✓ Affected Areas selected');
+            }
+
+            // 5. Validate Breaking Changes (must select exactly one option)
+            console.log('Checking Breaking Changes...');
+            const breakingRegex = /## Breaking Changes[\s\S]*?(?=##|$)/;
+            const breakingSection = prBody.match(breakingRegex)?.[0] || '';
+            const breakingSelections = breakingSection.match(
+              /^- \[[xX]\]\s+(Yes,?\s+this PR introduces breaking changes|No breaking changes.*)$/gim
+            ) || [];
+            const hasBreakingSelection = breakingSelections.length === 1;
+
+            if (!hasBreakingSelection) {
+              errors.push('**Breaking Changes**: Select exactly one option (Yes or No).');
+            } else {
+              console.log('✓ Breaking Changes option selected');
+            }
+
+            // 6. If breaking changes = yes, require description
+            const hasBreakingYes = /^-\s*\[[xX]\]\s+Yes,?\s+this PR introduces breaking changes/im.test(breakingSection);
+            if (hasBreakingYes) {
+              console.log('Breaking changes detected, checking for description...');
+              const descriptionPart = breakingSection
+                .replace(/^## Breaking Changes.*$/m, '')
+                .replace(/^- \[[ xX]\]\s+Yes,?\s+this PR introduces breaking changes.*$/m, '')
+                .replace(/^- \[[ xX]\]\s+No breaking changes.*$/m, '')
+                .replace(/<!---[\s\S]*?-->/g, '')
+                .trim();
+              const hasDescription = descriptionPart.length > 50;
+
+              if (!hasDescription) {
+                errors.push('**Breaking Changes**: You selected "Yes" but did not describe the breaking changes. Please provide details and migration steps.');
+              } else {
+                console.log('✓ Breaking changes description provided');
+              }
+            }
+
+            // 7. Validate Testing section (test steps required)
+            console.log('Checking Testing section...');
+            const testingRegex = /## How Has This Been Tested\?[\s\S]*?(?=##|$)/;
+            const testingSection = prBody.match(testingRegex)?.[0] || '';
+            const testStepsContent = testingSection
+              .replace(/\*\*Test Steps:\*\*/g, '')
+              .replace(/<!---[\s\S]*?-->/g, '')
+              .trim();
+            const numberedSteps = testStepsContent.match(/^\d+\.\s+.+$/gm) || [];
+            const hasTestSteps = numberedSteps.some(
+              step => !/^\d+\.\s+Step\s+\d+\s*$/i.test(step.trim())
+            );
+
+            if (!hasTestSteps) {
+              warnings.push('**Testing**: Test steps are missing or contain only placeholders. Please describe how you tested your changes (steps 1, 2, 3...).');
+            } else {
+              console.log('✓ Test steps provided');
+            }
+
+            // 8. Validate SDET Guidance (must be filled)
+            console.log('Checking SDET Guidance...');
+            const sdetRegex = /## What should the SDET know\?[\s\S]*?(?=##|$)/;
+            const sdetSection = prBody.match(sdetRegex)?.[0] || '';
+            const sdetContent = sdetSection
+              .split('## What should the SDET know?')[1] || '';
+            const sdetCleanContent = sdetContent
+              .replace(/<!---[\s\S]*?-->/g, '')
+              .replace(/^-\s+Test\s+scenario\s+\d+:?\s*$/gim, '')
+              .replace(/^-\s+Edge\s+case(\s+to\s+check)?:?\s*$/gim, '')
+              .replace(/^-\s+Focus\s+area:?\s*$/gim, '')
+              .trim();
+            const hasSdetGuidance = sdetCleanContent.length > 30;
+
+            if (!hasSdetGuidance) {
+              warnings.push('**SDET Guidance**: Please provide testing guidance for the QA team (test scenarios, edge cases, focus areas).');
+            } else {
+              console.log('✓ SDET guidance provided');
+            }
+
+            // 9. Check Screenshots for UI changes
+            console.log('Checking for UI changes...');
+            const files = await github.paginate(github.rest.pulls.listFiles, {
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number,
+              per_page: 100
+            });
+
+            const uiFiles = files.filter(file =>
+              file.filename.endsWith('.tsx') &&
+              (
+                file.filename.startsWith('src/components/') ||
+                file.filename.startsWith('src/survey/') ||
+                file.filename.startsWith('src/stories/')
+              )
+            );
+
+            if (uiFiles.length > 0) {
+              console.log(`UI changes detected in ${uiFiles.length} files`);
+              const screenshotsRegex = /## Screenshots\/Videos[\s\S]*?(?=##|$)/;
+              const screenshotsSection = prBody.match(screenshotsRegex)?.[0] || '';
+              const hasScreenshots = /!\[.*?\]\(.*?\)|https?:\/\/\S+\.(png|jpg|jpeg|gif|mp4|webm|mov)(?:\?\S+)?|https?:\/\/github\.com\/user-attachments\/assets\/[^\s)]+/i.test(screenshotsSection);
+
+              if (!hasScreenshots) {
+                warnings.push(`**Screenshots/Videos**: UI changes detected in ${uiFiles.length} file(s) but no screenshots provided. Please consider adding before/after screenshots or a Storybook / Chromatic link.`);
+              } else {
+                console.log('✓ Screenshots provided for UI changes');
+              }
+            } else {
+              console.log('No UI changes detected');
+            }
+
+            // Generate validation report
+            console.log(`\nValidation Results: ${errors.length} errors, ${warnings.length} warnings`);
+
+            const docsRef = context.payload.pull_request.head.sha;
+            const repoUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}`;
+            const guideUrl = `${repoUrl}/blob/${docsRef}/.github/pr_validation_guide.md`;
+            const templateUrl = `${repoUrl}/blob/${docsRef}/.github/pull_request_template.md`;
+
+            const reportMarker = '<!-- pr-template-validation-report -->';
+            let comment = `${reportMarker}\n## 🔍 PR Template Validation Report\n\n`;
+
+            if (errors.length > 0) {
+              comment += '### ❌ Required Sections Missing\n\n';
+              comment += 'The following **required sections** must be completed:\n\n';
+              comment += errors.map(e => `- ${e}`).join('\n');
+              comment += '\n\n**⚠️ Action Required**: Please edit your PR description to include all required information.\n\n';
+              comment += `📖 **Verify against the rules:** [PR Validation Guide](${guideUrl})\n\n`;
+              comment += '---\n\n';
+            }
+
+            if (warnings.length > 0) {
+              comment += '### ⚠️ Recommended Improvements\n\n';
+              comment += 'Please consider adding:\n\n';
+              comment += warnings.map(w => `- ${w}`).join('\n');
+              comment += '\n\n---\n\n';
+            }
+
+            if (errors.length === 0 && warnings.length === 0) {
+              comment = `${reportMarker}\n## ✅ PR Template Complete\n\n`;
+              comment += 'All required sections are properly filled. Great job! 🎉\n';
+            }
+
+            // Add helpful footer
+            comment += '\n---\n\n';
+            comment += '<details>\n';
+            comment += '<summary>📋 PR Template Requirements</summary>\n\n';
+            comment += '**Required Sections:**\n';
+            comment += '- Type of Change (select at least one)\n';
+            comment += '- Ticket Reference (valid ticket ID)\n';
+            comment += '- Changes Made (minimum 3 items)\n';
+            comment += '- Affected Areas (select at least one)\n';
+            comment += '- Breaking Changes (select Yes/No)\n\n';
+            comment += '**Recommended Sections:**\n';
+            comment += '- Testing (test steps)\n';
+            comment += '- SDET Guidance (QA testing guidance)\n';
+            comment += '- Screenshots (if UI changes)\n\n';
+            comment += `📖 [PR Validation Guide](${guideUrl}) — full rules, examples, and troubleshooting\n`;
+            comment += `📝 [Pull Request Template](${templateUrl}) — the template structure\n`;
+            comment += '</details>\n';
+
+            // Post or update comment
+            const comments = await github.paginate(github.rest.issues.listComments, {
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              per_page: 100
+            });
+
+            const botComment = comments.find(c =>
+              c.body.includes(reportMarker)
+            );
+
+            if (botComment) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: botComment.id,
+                body: comment
+              });
+              console.log('Updated existing validation comment');
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: comment
+              });
+              console.log('Created new validation comment');
+            }
+
+            // Fail the check if there are errors (blocks merge with branch protection)
+            if (errors.length > 0) {
+              core.setFailed(`PR template validation failed: ${errors.length} required section(s) missing or incomplete`);
+            } else {
+              console.log('✅ PR template validation passed!');
+            }

package/lib/bundle.css

@@ -4937,8 +4937,10 @@ div.surveyserv-widget-container.compact-container-style .fsc-radio-group button.
 }
 .facebook-wrapper .fb-question-container {
   align-self: flex-start;
+  box-sizing: border-box;
+  width: max-content;
   max-width: 90%;
-  min-width: 150px;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   pointer-events: none;
@@ -5086,16 +5088,44 @@ div.surveyserv-widget-container.compact-container-style .fsc-radio-group button.
   hyphens: auto;
 }
 .facebook-wrapper .choices {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-top: 0px;
   list-style-type: none;
   padding: 0;
+  min-width: 0;
+  width: 100%;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
 }
+.facebook-wrapper .choices .ellipsis-wrapper {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+.facebook-wrapper .choices .star-rating-wrapper {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.facebook-wrapper .choices .star-rating-wrapper .star-rating-label {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+}
 .facebook-wrapper .choices svg:not(#star) {
   width: 25px;
   height: 25px;
@@ -5113,10 +5143,9 @@ div.surveyserv-widget-container.compact-container-style .fsc-radio-group button.
   padding-right: 15px;
 }
 .facebook-wrapper .choices.boolean-choices:has(.choice:nth-child(2):last-child) {
-  flex-direction: row;
+  flex-direction: column;
 }
 .facebook-wrapper .choices.boolean-choices:has(.choice:nth-child(2):last-child) .boolean-choice {
-  width: calc(80% - 16px);
   border-radius: 8px;
 }
 .facebook-wrapper .choices.boolean-choices .boolean-choice {
@@ -5127,15 +5156,19 @@ div.surveyserv-widget-container.compact-container-style .fsc-radio-group button.
   font-weight: 500;
   gap: 8px;
   width: 100%;
-  padding: 6px 4px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 6px;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
+  height: 32px;
 }
 .facebook-wrapper .choices.dropdown-choices {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   padding: 0 12px;
   gap: 8px;
 }
@@ -5143,23 +5176,27 @@ div.surveyserv-widget-container.compact-container-style .fsc-radio-group button.
   border-radius: 8px;
   padding: 2px;
   display: flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   text-align: center;
   align-items: center;
   background-color: #e2e5ea !important;
 }
-.facebook-wrapper .choices.dropdown-choices .dropdown-choice:first-child {
-  grid-column: span 2;
-}
 .facebook-wrapper .choices.dropdown-choices .dropdown-choice button {
   font-size: 14px;
   font-weight: 500;
   gap: 8px;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   padding: 6px;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
+  height: 32px;
 }
 .facebook-wrapper .choices.dropdown-choices .dropdown-choice button .fb-star-rating-wrapper {
   align-items: center;