@wix/zero-config-implementation 1.28.0 → 1.30.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.28.0",
+  "version": "1.30.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -83,5 +83,5 @@
       ]
     }
   },
-  "falconPackageHash": "b9b7aa47b7618d7b031628208f9fb26661e34ddb5fe300679306084e"
+  "falconPackageHash": "7c40209d1126d0b860d10bc39a13660c52b5a97620afd671085c8c41"
 }

package/src/converters/utils.test.ts

@@ -13,4 +13,37 @@ describe('formatDisplayName', () => {
   it('formats camelCase', () => {
     expect(formatDisplayName('camelCaseExample')).toBe('Camel Case Example')
   })
+
+  it('returns name unchanged when exactly 50 characters', () => {
+    // 10 words of 4 chars + 9 spaces = 49 chars; add one more char to hit 50
+    const input = 'Word One Two Three Four Five Six Seven Eight Nine'
+    expect(input.length).toBe(49)
+    expect(formatDisplayName(input)).toBe(input)
+  })
+
+  it('drops leading words when formatted name exceeds 50 characters', () => {
+    // capitalCase('myVeryLongComponentWithAnExtremelyLongDisplayName')
+    // => "My Very Long Component With An Extremely Long Display Name" (58 chars)
+    // Drop "My" => 55 chars, drop "Very" => "Long Component With An Extremely Long Display Name" (50 chars)
+    expect(formatDisplayName('myVeryLongComponentWithAnExtremelyLongDisplayName')).toBe(
+      'Long Component With An Extremely Long Display Name',
+    )
+  })
+
+  it('drops leading words and result is less than 50 characters', () => {
+    // capitalCase('myComponentWithAVeryShortAndLongEnoughName')
+    // => "My Component With A Very Short And Long Enough Name" (51 chars)
+    // Drop "My" => "Component With A Very Short And Long Enough Name" (48 chars) < 50
+    const result = formatDisplayName('myComponentWithAVeryShortAndLongEnoughName')
+    expect(result).toBe('Component With A Very Short And Long Enough Name')
+    expect(result.length).toBe(48)
+  })
+
+  it('truncates at 50 characters when a single word exceeds the limit', () => {
+    // capitalCase of 51 repeated 'a' characters is a single word starting with uppercase
+    const longSingleWord = 'a'.repeat(51)
+    const expected = `A${'a'.repeat(49)}` // 50 chars total
+    expect(formatDisplayName(longSingleWord)).toBe(expected)
+    expect(formatDisplayName(longSingleWord).length).toBe(50)
+  })
 })

package/src/converters/utils.ts

@@ -8,10 +8,14 @@ const DISPLAY_NAME_OVERRIDES = {
   a11y: 'Accessibility',
 } as const
 
+const DISPLAY_NAME_MAX_LENGTH = 50
+
 /**
  * Formats any string format to Title Case display name
  * Handles: kebab-case, camelCase, PascalCase, snake_case, SCREAMING_SNAKE_CASE, and mixed formats
  *
+ * If the result exceeds 50 characters, leading words are dropped (end words are more specific).
+ *
  * Examples:
  *   "input-field-weight" -> "Input Field Weight"
  *   "camelCaseExample" -> "Camel Case Example"
@@ -20,10 +24,20 @@ const DISPLAY_NAME_OVERRIDES = {
  *   "SCREAMING_SNAKE_CASE" -> "Screaming Snake Case"
  *   "mixed-format_example" -> "Mixed Format Example"
  *   "a11y" -> "Accessibility"
+ *   "myVeryLongComponentWithAnExtremelyLongDisplayName" -> "With An Extremely Long Display Name"
  */
 export function formatDisplayName(input: string): string {
   if (input in DISPLAY_NAME_OVERRIDES) {
     return DISPLAY_NAME_OVERRIDES[input as keyof typeof DISPLAY_NAME_OVERRIDES]
   }
-  return capitalCase(input, { keepSpecialCharacters: false })
+  const formatted = capitalCase(input, { keepSpecialCharacters: false })
+  if (formatted.length <= DISPLAY_NAME_MAX_LENGTH) {
+    return formatted
+  }
+  const words = formatted.split(' ')
+  while (words.length > 1 && words.join(' ').length > DISPLAY_NAME_MAX_LENGTH) {
+    words.shift()
+  }
+  const result = words.join(' ')
+  return result.slice(0, DISPLAY_NAME_MAX_LENGTH)
 }