Merge pull request #68 from sushobhit-lt/DOT-1974

handle customViewport validations

Author: pinanks

commands/utils/validate.js

@@ -127,6 +127,8 @@ function validateConfig(configFile) {
         validateConfigBrowsers(storybookConfig.browsers);
         resolutions = storybookConfig.resolutions || storybookConfig.viewports
         storybookConfig.resolutions = validateConfigResolutions(resolutions);
+        storybookConfig.viewports = storybookConfig.resolutions;
+        validateCustomViewPorts(storybookConfig.customViewports)
     } catch (error) {
         console.log(`[smartui] Error: Invalid config, ${error.message}`);
         process.exit(constants.ERROR_CATCHALL);
@@ -174,10 +176,16 @@ function validateConfigResolutions(resolutions) {
         }
         let width = element[0];
         let height = element[1];
-        if (typeof width != 'number' || width < MIN_RESOLUTION_WIDTH || width > MAX_RESOLUTION_WIDTH) {
+        if (typeof width != 'number') {
+            width = Number(width);
+        }
+        if (typeof height != 'number') {
+            height = Number(height);
+        }
+        if (width && width < MIN_RESOLUTION_WIDTH || width > MAX_RESOLUTION_WIDTH) {
             throw new ValidationError(`width must be > ${MIN_RESOLUTION_WIDTH}, < ${MAX_RESOLUTION_WIDTH}`);
         }
-        if (height && (typeof height != 'number' || height < MIN_RESOLUTION_WIDTH || height > MAX_RESOLUTION_WIDTH)) {
+        if (height & ( height < MIN_RESOLUTION_WIDTH || height > MAX_RESOLUTION_WIDTH)) {
             throw new ValidationError(`height must be > ${MIN_RESOLUTION_HEIGHT}, < ${MAX_RESOLUTION_HEIGHT}`);
         }
         res.push([width, height || 0]);
@@ -186,6 +194,42 @@ function validateConfigResolutions(resolutions) {
     return res
 }
 
+
+function validateCustomViewPorts(customViewports) {
+    if (!Array.isArray(customViewports)) {
+        return
+    }
+    if (customViewports && customViewports.length == 0) {
+        return
+    }
+    customViewports.forEach(element => {
+        if (!Array.isArray(element.stories) || element.stories == 0) {
+            throw new ValidationError('Missing `stories` in customViewports config. please check the config file');
+        }
+        if(!element.styles || !element.styles?.width ){
+            throw new ValidationError('Missing `styles` in customViewports key. Please check the config file');
+        }
+
+        let width = element.styles.width;
+        let height = element.styles.height;
+        if (width && typeof width != 'number') {
+            width = Number(width);
+        }
+        if (height && typeof height != 'number') {
+            height = Number(height);
+        }
+        if (width && width < MIN_RESOLUTION_WIDTH || width > MAX_RESOLUTION_WIDTH) {
+            throw new ValidationError(`customViewports.styles width must be > ${MIN_RESOLUTION_WIDTH}, < ${MAX_RESOLUTION_WIDTH}`);
+        }
+        if (height & ( height < MIN_RESOLUTION_WIDTH || height > MAX_RESOLUTION_WIDTH)) {
+            throw new ValidationError(`customViewports.styles height must be > ${MIN_RESOLUTION_HEIGHT}, < ${MAX_RESOLUTION_HEIGHT}`);
+        }
+        element.styles.width = width;
+        element.styles.height = height;
+    });
+    return
+}
+
 module.exports = { 
     ValidationError,
     validateProjectToken,
@@ -194,5 +238,6 @@ module.exports = {
     validateLatestBuild,
     validateConfig,
     validateConfigBrowsers,
-    validateConfigResolutions
+    validateConfigResolutions,
+    validateCustomViewPorts
 };