fix(type): generate single and multi options fields types correctly (#210)

* fix(type):  generate single and multi options fields types correctly

* 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

@@ -1,6 +1,6 @@
 import { compile, type JSONSchema } from 'json-schema-to-typescript';
 import type { SpaceComponent, SpaceData } from '../../../commands/components/constants';
-import { __dirname, handleError, handleFileSystemError, toCamelCase, toPascalCase } from '../../../utils';
+import { __dirname, capitalize, handleError, handleFileSystemError, toCamelCase, toPascalCase } from '../../../utils';
 import type { GenerateTypesOptions } from './constants';
 import type { StoryblokPropertyType } from '../../../types/storyblok';
 import { storyblokSchemas } from '../../../utils/storyblok-schemas';
@@ -15,20 +15,20 @@ export interface ComponentGroupsAndNamesObject {
 }
 
 // Constants
+const STORY_TYPE = 'ISbStoryData';
 const DEFAULT_TYPEDEFS_HEADER = [
   '// This file was generated by the storyblok CLI.',
   '// 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)) {
     return { type: property.type };
   }
-
   // Initialize property type as any (fallback type)
-  // const type: string | string[] = 'any';
+  let type: string | string[] = 'unknown';
 
   const options = property.options && property.options.length > 0 ? property.options.map((item: { value: string }) => item.value) : [];
 
@@ -37,6 +37,67 @@ const getPropertyTypeAnnotation = (property: ComponentPropertySchema) => {
     options.unshift('');
   }
 
+  if (property.source === 'internal_stories') {
+    // Only if there is a filter_content_type, we can return a proper type
+    if (property.filter_content_type) {
+      if (typeof property.filter_content_type === 'string') {
+        return {
+          tsType: `(${getStoryType(property.filter_content_type, prefix)} | string )${property.type === 'options' ? '[]' : ''}`,
+        };
+      }
+
+      return {
+        tsType: `(${property.filter_content_type
+          .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' ? '[]' : ''}`,
+      };
+    }
+  }
+
+  if (
+    // If there is no `source` and there are options, the data source is the component itself
+    // TODO: check if this is an old behaviour (shouldn't this be handled as an "internal" source?)
+    (options.length > 0 && !property.source)
+    || property.source === 'internal_languages'
+    || property.source === 'external'
+  ) {
+    type = 'string';
+  }
+
+  if (property.source === 'internal') {
+    type = ['number', 'string'];
+  }
+
+  if (property.type === 'option') {
+    if (options.length > 0) {
+      return {
+        type,
+        enum: options,
+      };
+    }
+
+    return {
+      type,
+    };
+  }
+
+  if (property.type === 'options') {
+    if (options.length > 0) {
+      return {
+        type: 'array',
+        items: {
+          enum: options,
+        },
+      };
+    }
+
+    return {
+      type: 'array',
+      items: { type },
+    };
+  }
+
   switch (property.type) {
     case 'bloks':
       return { type: 'array' };
@@ -54,6 +115,10 @@ const getPropertyTypeAnnotation = (property: ComponentPropertySchema) => {
   }
 };
 
+export function getStoryType(property: string, prefix?: string) {
+  return `${STORY_TYPE}<${prefix ?? ''}${capitalize(toCamelCase(property))}>`;
+}
+
 /**
  * Generates a TypeScript type name for a component
  * @param componentName - The name of the component
@@ -102,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) => {
@@ -15,6 +21,10 @@ export const toSnakeCase = (str: string) => {
     .replace(/^_/, '');
 };
 
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
 export function maskToken(token: string): string {
   // Show only the first 4 characters and replace the rest with asterisks
   if (token.length <= 4) {