fix(cli): sanitize filenames when saving components and datasources (#235)

- Add @sindresorhus/slugify dependency for filename sanitization
- Implement sanitizeFilename utility function that converts strings to
URL-friendly slugs
- Update component and datasource pull actions to use sanitized
filenames for separate file saves
- Add comprehensive tests for the new sanitizeFilename function
- Fixes issues with components/datasources containing special characters
like "/" in their names

 fixes #225

Author: imranolas

packages/cli/package.json

@@ -45,6 +45,7 @@
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "dotenv": "^16.5.0",
+    "filenamify": "^6.0.0",
     "json-schema-to-typescript": "^15.0.4",
     "minimatch": "^10.0.3",
     "octokit": "^5.0.3",

packages/cli/src/commands/components/pull/actions.ts

@@ -1,7 +1,7 @@
 import { handleAPIError, handleFileSystemError } from '../../../utils';
 import type { SpaceComponent, SpaceComponentGroup, SpaceComponentInternalTag, SpaceComponentPreset, SpaceComponentsData } from '../constants';
 import { join, resolve } from 'node:path';
-import { resolvePath, saveToFile } from '../../../utils/filesystem';
+import { resolvePath, sanitizeFilename, saveToFile } from '../../../utils/filesystem';
 import type { SaveComponentsOptions } from './constants';
 import { mapiClient } from '../../../api';
 // Components
@@ -99,13 +99,14 @@ export const saveComponentsToFiles = async (
     if (separateFiles) {
       // Save in separate files without nested structure
       for (const component of components) {
-        const componentFilePath = join(resolvedPath, suffix ? `${component.name}.${suffix}.json` : `${component.name}.json`);
+        const sanitizedName = sanitizeFilename(component.name);
+        const componentFilePath = join(resolvedPath, suffix ? `${sanitizedName}.${suffix}.json` : `${sanitizedName}.json`);
         await saveToFile(componentFilePath, JSON.stringify(component, null, 2));
 
         // Find and save associated presets
         const componentPresets = presets.filter(preset => preset.component_id === component.id);
         if (componentPresets.length > 0) {
-          const presetsFilePath = join(resolvedPath, suffix ? `${component.name}.presets.${suffix}.json` : `${component.name}.presets.json`);
+          const presetsFilePath = join(resolvedPath, suffix ? `${sanitizedName}.presets.${suffix}.json` : `${sanitizedName}.presets.json`);
           await saveToFile(presetsFilePath, JSON.stringify(componentPresets, null, 2));
         }
         // Always save groups in a consolidated file

packages/cli/src/commands/datasources/pull/actions.ts

@@ -1,7 +1,7 @@
 import { handleAPIError, handleFileSystemError } from '../../../utils';
 import { mapiClient } from '../../../api';
 import { join, resolve } from 'node:path';
-import { resolvePath, saveToFile } from '../../../utils/filesystem';
+import { resolvePath, sanitizeFilename, saveToFile } from '../../../utils/filesystem';
 import type { SpaceDatasource, SpaceDatasourceEntry } from '../constants';
 import type { SaveDatasourcesOptions } from './constants';
 
@@ -83,7 +83,8 @@ export const saveDatasourcesToFiles = async (
     if (separateFiles) {
       // Save in separate files without nested structure
       for (const datasource of datasources) {
-        const datasourceFilePath = join(resolvedPath, suffix ? `${datasource.name}.${suffix}.json` : `${datasource.name}.json`);
+        const sanitizedName = sanitizeFilename(datasource.name);
+        const datasourceFilePath = join(resolvedPath, suffix ? `${sanitizedName}.${suffix}.json` : `${sanitizedName}.json`);
         await saveToFile(datasourceFilePath, JSON.stringify(datasource, null, 2));
       }
       return;

packages/cli/src/utils/filesystem.test.ts

@@ -1,5 +1,6 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { vol } from 'memfs';
-import { getComponentNameFromFilename, getStoryblokGlobalPath, resolvePath, saveToFile } from './filesystem';
+import { getComponentNameFromFilename, getStoryblokGlobalPath, resolvePath, sanitizeFilename, saveToFile } from './filesystem';
 import { join, resolve } from 'node:path';
 
 // tell vitest to use fs mock from __mocks__ folder
@@ -170,4 +171,13 @@ describe('filesystem utils', async () => {
       expect(getComponentNameFromFilename('/path/to/my_component.js')).toBe('/path/to/my_component');
     });
   });
+
+  describe('sanitizeFilename', () => {
+    it('should convert strings to URL-friendly slugs', () => {
+      expect(sanitizeFilename('Country / Currency')).toBe('Country _ Currency');
+      expect(sanitizeFilename('path/to/file')).toBe('path_to_file');
+      expect(sanitizeFilename('My Component Name')).toBe('My Component Name');
+      expect(sanitizeFilename('Special@Characters!')).toBe('Special@Characters!');
+    });
+  });
 });

packages/cli/src/utils/filesystem.ts

@@ -2,6 +2,7 @@ import { join, parse, resolve } from 'node:path';
 import { mkdir, readFile as readFileImpl, writeFile } from 'node:fs/promises';
 import { handleFileSystemError } from './error/filesystem-error';
 import type { FileReaderResult } from '../types';
+import filenamify from 'filenamify';
 
 export interface FileOptions {
   mode?: number;
@@ -66,6 +67,18 @@ export const getComponentNameFromFilename = (filename: string): string => {
   return filename.replace(/\.js$/, '');
 };
 
+/**
+ * Sanitizes a string to be safe for use as a filename by removing/replacing problematic characters
+ * https://github.com/parshap/node-sanitize-filename/blob/master/index.js
+ * @param filename - The filename to sanitize
+ * @returns A safe filename string
+ */
+export const sanitizeFilename = (filename: string): string => {
+  return filenamify(filename, {
+    replacement: '_',
+  });
+};
+
 export async function readJsonFile<T>(filePath: string): Promise<FileReaderResult<T>> {
   try {
     const content = (await readFile(filePath)).toString();