apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx (2)

73-74: Implementation matches requirements but could be more flexible.

The addition of character limits aligns with the PR objectives. However, consider the following improvements:

1. Make the limits configurable via props instead of hardcoding:

interface OpenQuestionFormProps {
+  headlineMaxLength?: number;
+  headlineMinLength?: number;
  // ... other props
}

// In component
<QuestionFormInput
  // ... other props
-  maxLength={50}
-  minLength={3}
+  maxLength={props.headlineMaxLength ?? 50}
+  minLength={props.headlineMinLength ?? 3}
/>

---

73-74: Enhance user experience with character limit feedback.

Users should be informed about the character limitations before hitting the limits.

Consider adding:

1. Character count display
2. Visual feedback when approaching limits
3. Clear validation messages

Would you like me to provide an example implementation of these UX enhancements?

packages/ui/components/QuestionFormInput/index.tsx (1)

Line range hint 1-658: Consider adding unit tests for character limitations.

The implementation of character limitations is a critical feature that should be thoroughly tested.

Would you like me to help create unit tests for:

• Minimum length validation
• Maximum length validation
• Error message display
• Initial state validation

Configuration used: CodeRabbit UI
Review profile: CHILL

Configuration used: CodeRabbit UI
Review profile: CHILL

Configuration used: CodeRabbit UI
Review profile: CHILL

packages/lib/survey/tests/__mock__/survey.mock.ts (1)

163-165: LGTM with a suggestion for test coverage.

The charLimit property is consistently implemented across all open text questions with appropriate structure. However, consider enhancing test coverage:

Consider adding test cases with charLimit.enabled: true and various character limit values to ensure the feature works correctly when enabled. For example:

 {
   id: "q1",
   type: TSurveyQuestionTypeEnum.OpenText,
   inputType: "text",
   headline: { default: "What is your favorite color?" },
   required: true,
   charLimit: {
-    enabled: false
+    enabled: true,
+    minCharacters: 3,
+    maxCharacters: 50
   },

Also applies to: 316-318, 344-346, 378-380, 442-444

Configuration used: CodeRabbit UI
Review profile: CHILL

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.ts (1)

Line range hint 54-439: Consider adding validation rules in templates

While the character limit infrastructure is in place, consider pre-configuring some templates with enabled character limits and reasonable defaults based on their specific use cases. For example:

• NPS feedback questions might benefit from a maximum limit to encourage concise feedback
• CSAT improvement suggestions could have a minimum limit to ensure meaningful responses

Example for NPS survey's second question:

   {
     id: createId(),
     type: TSurveyQuestionTypeEnum.OpenText,
     headline: { default: translate("nps_survey_question_2_headline", locale) },
     required: false,
     inputType: "text",
     charLimit: {
-      enabled: false,
+      enabled: true,
+      max: 500  // Set a reasonable maximum for detailed feedback
     },
   },

packages/lib/templates.ts (1)

OpenText questions need character limit configuration update

The implementation needs to be modified to include proper character limits. According to the type definition:

1. charLimit should be an object with:
   • enabled: true (to enable the limits)
   • min: 3 (minimum 3 characters)
   • max: 50 (maximum 50 characters)

The current implementation only sets enabled: false which effectively disables character limits. This should be updated to:

charLimit: {
  enabled: true,
  min: 3,
  max: 50
}

🔗 Analysis chain

Line range hint 1-6972: Verify the implementation aligns with requirements.

The current implementation adds the charLimit property with enabled: false to all OpenText questions. However, according to the PR objectives, there should be:

• A maximum length of 50 characters
• A minimum length of 3 characters

Let's verify if we need additional properties for min/max limits:

---

The search results reveal important context about character limits in the codebase:

1. The types definition in packages/types/surveys/types.ts shows that charLimit is an object that can have min and max properties
2. The OpenTextQuestion component in packages/surveys/src/components/questions/OpenTextQuestion.tsx implements these limits using minlength and maxlength HTML attributes
3. The UI in apps/web/app/(app)/(survey-editor)/.../OpenQuestionForm.tsx shows there's a toggle and inputs for setting character limits

Let's verify the exact type definition to understand the required structure:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if any OpenText questions have min/max character limits defined

# Search for charLimit configurations that might include min/max
rg -A 5 'charLimit:\s*{' 

# Search for any other character limit related configurations
rg -i 'char.*limit|min.*length|max.*length'

Length of output: 17809

---

Script:

#!/bin/bash
# Get the charLimit type definition
rg -A 10 'charLimit: z\.object' packages/types/surveys/types.ts

Length of output: 480

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Verify type definitions and their usage across the codebase

# Check if charLimit is properly typed in the schema
rg -p 'charLimit.*{' --type typescript

# Look for any type-related comments or TODOs
rg -p 'TODO.*type' --type typescript

# Check for any type assertion usage that might bypass type safety
rg -p 'as.*{.*charLimit' --type typescript

#!/bin/bash
# Search for charLimit type definitions and usage
rg -p "charLimit" --type ts

# Search for OpenText question type definitions
ast-grep --pattern 'type TSurveyQuestion = {
  $$$
  charLimit?: $_
  $$$
}'

# Search for any type errors or warnings in comments
rg -p "(TODO|FIXME|NOTE).*type" --type ts

# Look for type assertions related to charLimit
rg -p "as.*charLimit" --type ts

#!/bin/bash
# Description: Verify that all OpenText questions have the charLimit property
# and that the types are properly defined

# Search for OpenText type questions to ensure all have charLimit property
ast-grep --pattern 'type: TSurveyQuestionTypeEnum.OpenText'

# Check if the TSurveyQuestionTypeEnum and related types are properly updated
rg -A 10 'interface.*OpenText.*{' 

#!/bin/bash
# Let's fix the regex and search patterns

# Search for OpenText type questions
rg "type: .*OpenText"

# Check interfaces and types related to OpenText
rg "interface.*OpenText"

# Search for charLimit property definitions
rg "charLimit.*enabled"

# Look for type definitions
fd "types?.ts" --exec cat {}

packages/js/index.html (1)

10-10: Consider using environment variables for configuration.

Hardcoding environment IDs directly in source files can lead to accidental commits of development configurations. Consider using environment variables or configuration files to manage these values.

packages/surveys/src/components/questions/open-text-question.tsx (2)

116-117: Add aria attributes for accessibility.

Consider adding aria attributes to improve accessibility when character limits are enabled:

 minlength={question.inputType === "text" ? question.charLimit?.min : undefined}
 maxlength={question.inputType === "text" ? question.charLimit?.max : undefined}
+aria-describedby={`${question.id}-char-limit`}

Also applies to: 140-141

---

144-149: Enhance character count UX.

The current implementation only shows the count when approaching the maximum. Consider:

1. Always showing the count when limits are enabled
2. Adding a more descriptive message when limit is reached

-{question.inputType === "text" && question.charLimit?.max !== undefined && (
+{question.inputType === "text" && question.charLimit?.enabled && (
   <span
+    id={`${question.id}-char-limit`}
     className={`fb-text-xs ${
       currentLength >= question.charLimit?.max 
-      ? "fb-text-red-500 font-semibold" 
+      ? "fb-text-red-500 font-semibold"
       : "text-neutral-400"}`}>
-    {currentLength}/{question.charLimit?.max}
+    {currentLength >= question.charLimit?.max
+      ? `Maximum ${question.charLimit.max} characters reached`
+      : `${currentLength}/${question.charLimit.max} characters`}
   </span>
 )}

Configuration used: CodeRabbit UI
Review profile: CHILL

Learnt from: DeepaPrasanna
PR: formbricks/formbricks#4047
File: packages/surveys/src/components/questions/OpenTextQuestion.tsx:136-137
Timestamp: 2024-11-12T04:24:22.684Z
Learning: In the `OpenTextQuestion` component, using camelCase `minLength` and `maxLength` attributes in React can cause undefined values to default to `0`, preventing user input. Therefore, it's acceptable to use lowercase `minlength` and `maxlength` attributes to avoid this issue.

Learnt from: DeepaPrasanna
PR: formbricks/formbricks#4047
File: packages/surveys/src/components/questions/OpenTextQuestion.tsx:113-114
Timestamp: 2024-11-12T04:24:22.684Z
Learning: When setting `minLength` and `maxLength` attributes in React components, passing `undefined` can result in them being set to `0`, which can prevent user input. Use conditional rendering to apply these attributes only when their values are defined.

#!/bin/bash
# Description: Verify the usage of new character limit translations
# Test: Search for character limit related keys in other language files and components
rg -g '!pt-BR.json' "character_limit_toggle"