@ikas/storefront-cmd 4.0.0-alpha.10

package/src/scripts/generators/types/index.ts

@@ -0,0 +1,526 @@
+import {
+  IkasThemeJson,
+  IkasThemeJsonComponent,
+  IkasThemeJsonComponentProp,
+  IkasThemeJsonComponentPropType,
+  IkasThemeJsonCustomData,
+} from "@ikas/storefront-models";
+import path from "path";
+import { createFile, deleteDirContent } from "../../../utils/fs";
+import _uniq from "lodash/uniq";
+
+type File = {
+  content: string;
+  imports: string[];
+  internalCustomDatas: IkasThemeJsonCustomData[];
+};
+
+export class CustomDataTypesGenerator {
+  static async generate(themeJson: IkasThemeJson, workingDir?: string) {
+    await deleteDirContent(
+      path.join(
+        workingDir || process.cwd(),
+        "src",
+        "components",
+        "__generated__",
+        "types"
+      )
+    );
+    const file: File = {
+      content: "",
+      imports: [],
+      internalCustomDatas: [],
+    };
+
+    try {
+      themeJson.customData.forEach((customData) => {
+        CustomDataTypesGenerator.generateAllCustomDataTypes(
+          customData,
+          file,
+          themeJson
+        );
+      });
+
+      let lengthBefore = 0;
+      let lengthAfter = 0;
+
+      do {
+        lengthBefore = file.internalCustomDatas.length;
+        file.internalCustomDatas.forEach((customData) => {
+          CustomDataTypesGenerator.generateAllCustomDataTypes(
+            customData,
+            file,
+            themeJson
+          );
+        });
+        lengthAfter = file.internalCustomDatas.length;
+
+        if (lengthAfter !== lengthBefore) {
+          file.internalCustomDatas = file.internalCustomDatas.splice(
+            lengthBefore,
+            lengthAfter
+          );
+        }
+      } while (lengthBefore !== lengthAfter);
+
+      await PropTypeGenarator.generate(themeJson, file);
+
+      const generatedFolderPath = path.join(
+        workingDir || process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      );
+
+      file.imports = _uniq(file.imports);
+      let importStr = `import {\r\n`;
+      file.imports.forEach((i) => {
+        importStr += `\t${i},\r\n`;
+      });
+      importStr += `} from "@ikas/storefront"\r\n\r\n`;
+
+      const finalFile = importStr + file.content;
+
+      return await createFile(generatedFolderPath, "types.ts", finalFile);
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  }
+
+  static generateAllCustomDataTypes(
+    customData: IkasThemeJsonCustomData,
+    file: File,
+    themeJson: IkasThemeJson
+  ) {
+    const isEnum = customData.type === IkasThemeJsonComponentPropType.ENUM;
+    const exportTypeStr = `export ${
+      isEnum ? "enum" : "type"
+    } ${CustomDataTypesGenerator.generateTypeName(customData)}${
+      isEnum ? "" : " = "
+    }{ \r\n`;
+
+    const closeExportTypeStr = `};\r\n\r\n`;
+
+    if (
+      (customData.type === IkasThemeJsonComponentPropType.DYNAMIC_LIST ||
+        customData.type === IkasThemeJsonComponentPropType.STATIC_LIST) &&
+      customData.nestedData
+    ) {
+      CustomDataTypesGenerator.generateAllCustomDataTypes(
+        customData.nestedData[0],
+        file,
+        themeJson
+      );
+    } else if (
+      customData.type === IkasThemeJsonComponentPropType.ENUM &&
+      !!customData.enumOptions
+    ) {
+      file.content += exportTypeStr;
+      customData.enumOptions.forEach((enumOption) => {
+        let leftValue = enumOption.value;
+
+        if (enumOption.value && !isNaN(parseInt(enumOption.value))) {
+          leftValue = "_" + enumOption.value;
+        }
+
+        file.content += `\t"${leftValue}" = "${enumOption?.value}",`;
+        file.content += `\r\n`;
+      });
+      file.content += closeExportTypeStr;
+    } else {
+      file.content += exportTypeStr;
+      if (!!customData.nestedData) {
+        customData.nestedData.forEach((nestedData) => {
+          CustomDataTypesGenerator.genenateCustomDataType(
+            nestedData,
+            file,
+            themeJson
+          );
+          file.content += `\r\n`;
+        });
+      }
+
+      file.content += closeExportTypeStr;
+    }
+  }
+
+  static genenateCustomDataType(
+    customData: IkasThemeJsonCustomData,
+    file: File,
+    themeJson: IkasThemeJson
+  ) {
+    const type = CustomDataTypesGenerator.getType(customData, file, themeJson);
+
+    if (customData.key && customData.key[0].match(/^\d/)) {
+      customData.key = "_" + customData.key;
+    }
+
+    file.content += `\t${customData.key}${
+      !customData.isRequired ? "?" : ""
+    }: ${type}${
+      [
+        IkasThemeJsonComponentPropType.DYNAMIC_LIST,
+        IkasThemeJsonComponentPropType.STATIC_LIST,
+      ].includes(customData.type)
+        ? "[]"
+        : ""
+    }${customData.type === IkasThemeJsonComponentPropType.ENUM ? "," : ";"}`;
+  }
+
+  static getType(
+    customData: IkasThemeJsonCustomData,
+    file: File,
+    themeJson: IkasThemeJson
+  ) {
+    let type = "";
+    switch (customData.type) {
+      case IkasThemeJsonComponentPropType.TEXT:
+      case IkasThemeJsonComponentPropType.RICH_TEXT:
+      case IkasThemeJsonComponentPropType.COLOR:
+        type = "string";
+        break;
+      case IkasThemeJsonComponentPropType.BOOLEAN:
+        type = "boolean";
+        break;
+      case IkasThemeJsonComponentPropType.IMAGE:
+        type = "IkasImage";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.IMAGE_LIST:
+        type = "IkasImage[]";
+        file.imports.push("IkasImage");
+        break;
+      case IkasThemeJsonComponentPropType.LINK:
+        type = "IkasNavigationLink";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.LIST_OF_LINK:
+        type = "IkasNavigationLink[]";
+        file.imports.push("IkasNavigationLink");
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
+        type = "IkasProduct";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_LIST:
+        type = "IkasProductList";
+        file.imports.push("IkasProductList");
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
+        type = "IkasProductAttribute";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        type = "IkasProductAttribute[]";
+        file.imports.push("IkasProductAttribute");
+        break;
+
+      case IkasThemeJsonComponentPropType.BRAND:
+        type = "IkasBrand";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BRAND_LIST:
+        type = "IkasBrandList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CATEGORY:
+        type = "IkasCategory";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CATEGORY_LIST:
+        type = "IkasCategoryList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CUSTOM:
+        const cd = themeJson.customData.find(
+          (cd) => cd.id === customData.customDataId
+        );
+        if (cd) type = CustomDataTypesGenerator.generateTypeName(cd);
+        break;
+      case IkasThemeJsonComponentPropType.COMPONENT:
+        type = "IkasComponentRenderer";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.COMPONENT_LIST:
+        type = "IkasComponentRenderer[]";
+        file.imports.push("IkasComponentRenderer");
+        break;
+      case IkasThemeJsonComponentPropType.BLOG:
+        type = "IkasBlog";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_LIST:
+        type = "IkasBlogList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
+        type = "IkasBlogCategory";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY_LIST:
+        type = "IkasBlogCategoryList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.RAFFLE:
+        type = "IkasRaffle";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.RAFFLE_LIST:
+        type = "IkasRaffleList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.SLIDER:
+        type = "IkasSlider";
+        file.imports.push(type);
+        break;
+
+      case IkasThemeJsonComponentPropType.ENUM:
+        type = CustomDataTypesGenerator.generateTypeName(customData);
+        if (!file.content.includes(`export enum ${type}`)) {
+          file.internalCustomDatas.push(customData);
+        }
+        break;
+      case IkasThemeJsonComponentPropType.OBJECT:
+        type = CustomDataTypesGenerator.generateTypeName(customData);
+        break;
+      case IkasThemeJsonComponentPropType.DYNAMIC_LIST:
+      case IkasThemeJsonComponentPropType.STATIC_LIST:
+        if (customData.nestedData) {
+          if (
+            customData.nestedData[0].type ===
+              IkasThemeJsonComponentPropType.OBJECT ||
+            customData.nestedData[0].type ===
+              IkasThemeJsonComponentPropType.ENUM
+          ) {
+            type = CustomDataTypesGenerator.generateTypeName(
+              customData.nestedData[0]
+            );
+            if (!file.content.includes(`export type ${type}`)) {
+              file.internalCustomDatas.push(customData.nestedData[0]);
+            }
+          } else {
+            type = CustomDataTypesGenerator.getType(
+              customData.nestedData[0],
+              file,
+              themeJson
+            );
+          }
+        }
+
+        break;
+      default:
+        break;
+    }
+    return type;
+  }
+
+  static generateTypeName(customData: IkasThemeJsonCustomData) {
+    if (customData.typescriptName) return customData.typescriptName;
+
+    let displayName = customData.name || "";
+    displayName = displayName.replace(/\s/g, ""); // removes whitespace
+    displayName = displayName.replace(/\W/g, ""); // removes non-alphabetic characters
+
+    if (displayName[0].match(/^\d/)) displayName = "_" + displayName; // if first char is a number add (_)
+    if (customData.type === IkasThemeJsonComponentPropType.ENUM)
+      displayName += "Enum";
+
+    return displayName;
+  }
+}
+
+export class PropTypeGenarator {
+  static async generate(themeJson: IkasThemeJson, file: File) {
+    const components = themeJson.components;
+    components.forEach((component) => {
+      if (component.props.length > 0 && component.id !== "checkout") {
+        file.content += `export type ${PropTypeGenarator.generatePropTypeName(
+          component
+        )}Props = {\n`;
+        component.props.forEach((prop) => {
+          file.content += `\t${prop.name}: ${PropTypeGenarator.getType(
+            prop,
+            themeJson,
+            file
+          )};\n`;
+        });
+
+        file.content += `};\r\n\r\n`;
+      }
+    });
+  }
+
+  static getType(
+    prop: IkasThemeJsonComponentProp,
+    themeJson: IkasThemeJson,
+    file: File
+  ) {
+    let type = "";
+    switch (prop.type) {
+      case IkasThemeJsonComponentPropType.TEXT:
+      case IkasThemeJsonComponentPropType.RICH_TEXT:
+      case IkasThemeJsonComponentPropType.COLOR:
+        type = "string";
+        break;
+      case IkasThemeJsonComponentPropType.BOOLEAN:
+        type = "boolean";
+        break;
+      case IkasThemeJsonComponentPropType.IMAGE:
+        type = "IkasImage";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.IMAGE_LIST:
+        type = "IkasImage[]";
+        file.imports.push("IkasImage");
+        break;
+      case IkasThemeJsonComponentPropType.LINK:
+        type = "IkasNavigationLink";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.LIST_OF_LINK:
+        type = "IkasNavigationLink[]";
+        file.imports.push("IkasNavigationLink");
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_DETAIL:
+        type = "IkasProduct";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_LIST:
+        type = "IkasProductList";
+        file.imports.push("IkasProductList");
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE:
+        type = "IkasProductAttribute";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.PRODUCT_ATTRIBUTE_LIST:
+        type = "IkasProductAttribute[]";
+        file.imports.push("IkasProductAttribute");
+        break;
+
+      case IkasThemeJsonComponentPropType.BRAND:
+        type = "IkasBrand";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BRAND_LIST:
+        type = "IkasBrandList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CATEGORY:
+        type = "IkasCategory";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CATEGORY_LIST:
+        type = "IkasCategoryList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.CUSTOM:
+        const cd = themeJson.customData.find(
+          (cd) => cd.id === prop.customDataId
+        );
+
+        if (cd) {
+          type = CustomDataTypesGenerator.getType(cd, file, themeJson);
+          if (
+            cd.type === IkasThemeJsonComponentPropType.DYNAMIC_LIST ||
+            cd.type === IkasThemeJsonComponentPropType.STATIC_LIST
+          ) {
+            type += "[]";
+          }
+        }
+        break;
+      case IkasThemeJsonComponentPropType.COMPONENT:
+        type = "IkasComponentRenderer";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.COMPONENT_LIST:
+        type = "IkasComponentRenderer[]";
+        file.imports.push("IkasComponentRenderer");
+        break;
+      case IkasThemeJsonComponentPropType.BLOG:
+        type = "IkasBlog";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_LIST:
+        type = "IkasBlogList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY:
+        type = "IkasBlogCategory";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.BLOG_CATEGORY_LIST:
+        type = "IkasBlogCategoryList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.RAFFLE:
+        type = "IkasRaffle";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.RAFFLE_LIST:
+        type = "IkasRaffleList";
+        file.imports.push(type);
+        break;
+      case IkasThemeJsonComponentPropType.SLIDER:
+        type = "IkasSlider";
+        file.imports.push(type);
+        break;
+
+      // case IkasThemeJsonComponentPropType.ENUM:
+      //   const enumCd = themeJson.customData.find(
+      //     (cd) => cd.id === prop.customDataId
+      //   );
+      //   if (enumCd) type = CustomDataTypesGenerator.generateTypeName(enumCd);
+      //   break;
+      // case IkasThemeJsonComponentPropType.DYNAMIC_LIST:
+      // case IkasThemeJsonComponentPropType.STATIC_LIST:
+      //   const listCD = themeJson.customData.find(
+      //     (cd) => cd.id === prop.customDataId
+      //   );
+      //   if (listCD?.nestedData) {
+      //     if (
+      //       listCD.nestedData[0].type === IkasThemeJsonComponentPropType.OBJECT ||
+      //       listCD.nestedData[0].type === IkasThemeJsonComponentPropType.ENUM
+      //     ) {
+      //       type = CustomDataTypesGenerator.generateTypeName(
+      //         listCD.nestedData[0]
+      //       );
+      //       if (!file.content.includes(`export type ${type}`)) {
+      //         file.internalCustomDatas.push(listCD.nestedData[0]);
+      //       }
+      //     } else {
+      //       type = CustomDataTypesGenerator.getType(
+      //         listCD.nestedData[0],
+      //         file,
+      //         themeJson
+      //       );
+      //     }
+      //     console.log("nesteddata custom type", type);
+      //   }
+
+      //   break;
+      default:
+        break;
+    }
+
+    return type;
+  }
+
+  static generatePropTypeName(component: IkasThemeJsonComponent) {
+    if (component.displayName === "") return;
+
+    const propName = component.dir || "";
+    const pieces = propName.split("-");
+    let _propName = "";
+
+    pieces.forEach(
+      (piece, index) =>
+        (_propName += piece.charAt(0).toUpperCase() + piece.slice(1))
+    );
+
+    if (_propName[0].match(/^\d/)) _propName = "_" + _propName;
+
+    return _propName;
+  }
+}

package/src/scripts/ikas.ts

@@ -0,0 +1,45 @@
+import commandLineArgs from "command-line-args";
+import { APIGenerator } from "./generators/api";
+import { ConfigGenerator, ENV } from "./generators/config";
+import { ThemeJsonGenerator } from "./generators/theme";
+import { ComponentImportsGenerator } from "./generators/components";
+import { PageGenerator } from "./generators/pages";
+import { CustomDataTypesGenerator } from "./generators/types";
+
+async function run() {
+  const optionDefinitions = [
+    { name: "generate", alias: "g", type: Boolean },
+    { name: "dev", alias: "d", type: Boolean },
+  ];
+
+  const options = commandLineArgs(optionDefinitions);
+
+  if (options.generate) {
+    const isDev = !!options.dev;
+    const isSuccess = await generate(isDev ? "dev" : "prod");
+
+    if (isSuccess) {
+      console.log("Project files generated successfully!");
+    } else {
+      console.log("Project files generate failed!");
+    }
+  }
+}
+
+async function generate(env: ENV) {
+  let themeJson = await ThemeJsonGenerator.getTheme();
+
+  if (!themeJson) await ThemeJsonGenerator.generateInitialThemeJsonFile();
+  themeJson = await ThemeJsonGenerator.getTheme();
+
+  return (
+    (await ThemeJsonGenerator.generate(themeJson)) &&
+    (await ComponentImportsGenerator.generate(themeJson)) &&
+    (await PageGenerator.generate()) &&
+    (await APIGenerator.generate()) &&
+    (await ConfigGenerator.generate(env)) &&
+    (await CustomDataTypesGenerator.generate(themeJson))
+  );
+}
+
+run();

package/src/scripts/theme-build/index.ts

@@ -0,0 +1,99 @@
+import { IkasThemeJson, IkasThemeJsonPage } from "@ikas/storefront-models";
+import _cloneDeep from "lodash/cloneDeep";
+import {
+  ComponentImportsGenerator,
+  ConfigGenerator,
+  CustomDataTypesGenerator,
+  PageGenerator,
+} from "../generators";
+
+export function shouldDeploy(
+  oldThemeJson: IkasThemeJson,
+  newThemeJson: IkasThemeJson
+) {
+  if (
+    oldThemeJson.pages.some(
+      (page) => !newThemeJson.pages.find((p) => p.id === page.id)
+    ) ||
+    newThemeJson.pages.some(
+      (page) => !oldThemeJson.pages.find((p) => p.id === page.id)
+    )
+  )
+    return true;
+
+  return oldThemeJson.pages.some((page) => {
+    const comparedPage = newThemeJson.pages.find((p) => p.id === page.id);
+
+    const allOldPageComponents = page.components;
+    if (page.specifications?.length) {
+      page.specifications.forEach((specification) => {
+        allOldPageComponents.push(...specification.components);
+      });
+    }
+
+    const allNewPageComponents = comparedPage?.components || [];
+    if (comparedPage?.specifications?.length) {
+      comparedPage.specifications.forEach((specification) => {
+        allNewPageComponents.push(...specification.components);
+      });
+    }
+
+    const addedPageComponents = allOldPageComponents.filter(
+      (pageComponent) =>
+        !allNewPageComponents.find(
+          (compagedPageComponent) =>
+            pageComponent.componentId === compagedPageComponent.componentId
+        )
+    );
+
+    const deletedPageComponents = allNewPageComponents.filter(
+      (pageComponent) =>
+        !allOldPageComponents.find(
+          (compagedPageComponent) =>
+            pageComponent.componentId === compagedPageComponent.componentId
+        )
+    );
+
+    return !!addedPageComponents.length || !!deletedPageComponents.length;
+  });
+}
+
+export async function generate(
+  themeJsonList: IkasThemeJson[],
+  workingDir: string
+) {
+  const _themeJsonList = _cloneDeep(themeJsonList);
+  const themeJson: IkasThemeJson = {
+    components: [],
+    pages: [],
+    customData: [],
+    name: "",
+    settings: {} as any,
+  };
+
+  themeJson.components = _themeJsonList[0].components;
+  themeJson.customData = _themeJsonList[0].customData;
+
+  _themeJsonList.forEach((_themeJson) => {
+    _themeJson.pages.forEach((_page) => {
+      const existingPage = themeJson.pages.find((p) => p.type === _page.type);
+
+      const page: IkasThemeJsonPage = existingPage || _page;
+      page.components.push(..._page.components);
+
+      if (!page.specifications) page.specifications = [];
+      page.specifications.push(...(_page.specifications || []));
+
+      if (!existingPage) {
+        themeJson.pages.push(page);
+      }
+    });
+  });
+
+  return (
+    (await ComponentImportsGenerator.generate(themeJson, workingDir)) &&
+    (await PageGenerator.generate(workingDir)) &&
+    (await CustomDataTypesGenerator.generate(themeJson, workingDir)) &&
+    (await ConfigGenerator.generate("prod", workingDir))
+  );
+}