refactor(types): correctly handle camelCase

Author: alvarosabu

src/commands/types/generate/actions.test.ts

@@ -1,4 +1,4 @@
-import { generateStoryblokTypes, generateTypes, getComponentType } from './actions';
+import { generateStoryblokTypes, generateTypes, getComponentType, getStoryType } from './actions';
 import type { SpaceComponent, SpaceData } from '../../../commands/components/constants';
 import type { GenerateTypesOptions } from './constants';
 import { join, resolve } from 'node:path';
@@ -298,6 +298,33 @@ describe('getComponentType', () => {
   });
 });
 
+describe('getStoryType', () => {
+  it('should convert property names to the correct format', () => {
+    // Test cases for different property name formats
+    expect(getStoryType('my_property')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('my-property')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('myProperty')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('MyProperty')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('my property')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('my_property_name')).toBe('ISbStoryData<MyPropertyName>');
+  });
+
+  it('should handle special characters and numbers', () => {
+    expect(getStoryType('my_property_123')).toBe('ISbStoryData<MyProperty123>');
+    expect(getStoryType('my-property!')).toBe('ISbStoryData<MyProperty>');
+    expect(getStoryType('my_property@name')).toBe('ISbStoryData<MyPropertyName>');
+  });
+
+  it('should handle empty or single character properties', () => {
+    expect(getStoryType('')).toBe('ISbStoryData<>');
+    expect(getStoryType('a')).toBe('ISbStoryData<A>');
+  });
+
+  it('should handle prefix', () => {
+    expect(getStoryType('my_property', 'Custom')).toBe('ISbStoryData<CustomMyProperty>');
+  });
+});
+
 describe('component property type annotations', () => {
   it('should handle text property type', async () => {
     // Create a component with text property type

src/commands/types/generate/actions.ts

@@ -21,7 +21,7 @@ const DEFAULT_TYPEDEFS_HEADER = [
   '// DO NOT MODIFY THIS FILE BY HAND.',
 ];
 
-const getPropertyTypeAnnotation = (property: ComponentPropertySchema) => {
+const getPropertyTypeAnnotation = (property: ComponentPropertySchema, prefix?: string) => {
   // If a property type is one of the ones provided by Storyblok, return that type
   // Casting as string[] to avoid TS error on using Array.includes on different narrowed types
   if (Array.from(storyblokSchemas.keys()).includes(property.type as StoryblokPropertyType)) {
@@ -42,13 +42,13 @@ const getPropertyTypeAnnotation = (property: ComponentPropertySchema) => {
     if (property.filter_content_type) {
       if (typeof property.filter_content_type === 'string') {
         return {
-          tsType: `(${getStoryType(property.filter_content_type)} | string )${property.type === 'options' ? '[]' : ''}`,
+          tsType: `(${getStoryType(property.filter_content_type, prefix)} | string )${property.type === 'options' ? '[]' : ''}`,
         };
       }
 
       return {
         tsType: `(${property.filter_content_type
-          .map(type2 => getStoryType(type2))
+          .map(type2 => getStoryType(type2, prefix))
           // In this case property.type can be `option` or `options`. In case of `options` the type should be an array
           .join(' | ')} | string )${property.type === 'options' ? '[]' : ''}`,
       };
@@ -115,8 +115,8 @@ const getPropertyTypeAnnotation = (property: ComponentPropertySchema) => {
   }
 };
 
-export function getStoryType(property: string) {
-  return `${STORY_TYPE}<${capitalize(property)}>`;
+export function getStoryType(property: string, prefix?: string) {
+  return `${STORY_TYPE}<${prefix ?? ''}${capitalize(toCamelCase(property))}>`;
 }
 
 /**
@@ -167,7 +167,7 @@ const getComponentPropertiesTypeAnnotations = async (
 
     const propertyType = value.type;
     const propertyTypeAnnotation: JSONSchema = {
-      [key]: getPropertyTypeAnnotation(value as ComponentPropertySchema),
+      [key]: getPropertyTypeAnnotation(value as ComponentPropertySchema, options.typePrefix),
     };
 
     if (propertyType === 'custom' && customFieldsParser) {

src/utils/format.ts

@@ -4,9 +4,15 @@ export const toPascalCase = (str: string) => {
 
 export const toCamelCase = (str: string) => {
   return str
-    .replace(/(?:^|_)(\w)/g, (_, char) => char.toUpperCase())
+    // First replace snake_case
+    .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
     .replace(/_/g, '')
-    .replace(/^[A-Z]/, char => char.toLowerCase());
+    // Then replace kebab-case
+    .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+  // Capitalize letters after special characters
+    .replace(/[^a-z0-9]([a-z])/gi, (_, letter) => letter.toUpperCase())
+    // Remove special characters
+    .replace(/[^a-z0-9]/gi, '');
 };
 
 export const toSnakeCase = (str: string) => {