@ikas/storefront-cmd 4.0.0-alpha.49 → 4.0.0-alpha.50

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ikas/storefront-cmd",
-  "version": "4.0.0-alpha.49",
+  "version": "4.0.0-alpha.50",
   "description": "Command line tool for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
-  "main": "./build/index.js",
-  "module": "./build/index.js",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "sideEffects": false,
   "files": [
-    "./build"
+    "./src"
   ],
   "bin": {
     "ikas": "./build/ikas.cjs"
@@ -24,7 +24,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@ikas/storefront-models": "^4.0.0-alpha.49",
+    "@ikas/storefront-models": "^4.0.0-alpha.50",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "rollup-plugin-typescript2": "^0.32.1",
@@ -40,6 +40,6 @@
     "typescript-transform-paths": "^2.2.2"
   },
   "peerDependencies": {
-    "@ikas/storefront-models": "^4.0.0-alpha.49"
+    "@ikas/storefront-models": "^4.0.0-alpha.50"
   }
 }

package/{build/index.d.ts → src/index.ts}

@@ -1,3 +1,4 @@
-export * from "./scripts/generators";
-import * as ThemeBuild from "./scripts/theme-build";
-export { ThemeBuild };
+export * from "./scripts/generators";
+
+import * as ThemeBuild from "./scripts/theme-build";
+export { ThemeBuild };

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

@@ -0,0 +1,27 @@
+import path from "path";
+import { createFile, deleteDirContent } from "../../../utils/fs";
+
+import { APIInfo, API_INFO } from "./info";
+
+export class APIGenerator {
+  static async generate() {
+    const apiDir = path.join(process.cwd(), "src", "pages", "api");
+    await deleteDirContent(apiDir);
+
+    let isSuccess = true;
+
+    for (const info of API_INFO) {
+      isSuccess = isSuccess && (await APIGenerator.generateAPI(info));
+    }
+
+    return isSuccess;
+  }
+
+  static generateAPI(apiInfo: APIInfo) {
+    return createFile(
+      path.join(process.cwd(), "src", "pages", "api"),
+      apiInfo.fileName,
+      apiInfo.content
+    );
+  }
+}

package/src/scripts/generators/api/info.ts

@@ -0,0 +1,47 @@
+export const GET_COMPONENT_DIRS_API_CONTENT = `import { IkasLocalThemeAPI } from "@ikas/storefront-next";
+
+export default IkasLocalThemeAPI.GetComponentDirs.getComponentDirs;
+export const config = IkasLocalThemeAPI.GetComponentDirs.config;
+`;
+
+export const GET_THEME_API_CONTENT = `import { IkasLocalThemeAPI } from "@ikas/storefront-next";
+
+export default IkasLocalThemeAPI.GetTheme.getTheme;
+export const config = IkasLocalThemeAPI.GetTheme.config;
+`;
+
+export const UPDATE_THEME_API_CONTENT = `import { IkasLocalThemeAPI } from "@ikas/storefront-next";
+
+export default IkasLocalThemeAPI.UpdateTheme.updateTheme;
+export const config = IkasLocalThemeAPI.UpdateTheme.config;
+`;
+
+export const UPLOAD_THEME_API_CONTENT = `import { IkasLocalThemeAPI } from "@ikas/storefront-next";
+
+export default IkasLocalThemeAPI.UploadTheme.uploadTheme;
+export const config = IkasLocalThemeAPI.UploadTheme.config;
+`;
+
+export const API_INFO = [
+  {
+    content: GET_COMPONENT_DIRS_API_CONTENT,
+    fileName: "getComponentDirs.ts",
+  },
+  {
+    content: GET_THEME_API_CONTENT,
+    fileName: "getTheme.ts",
+  },
+  {
+    content: UPDATE_THEME_API_CONTENT,
+    fileName: "updateTheme.ts",
+  },
+  {
+    content: UPLOAD_THEME_API_CONTENT,
+    fileName: "uploadTheme.ts",
+  },
+];
+
+export type APIInfo = {
+  content: string;
+  fileName: string;
+};

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

@@ -0,0 +1,270 @@
+import path from "path";
+import { createFile, deleteDirContent } from "../../../utils/fs";
+import {
+  IkasThemeJson,
+  IkasThemeJsonComponent,
+  IkasThemeJsonPageType,
+} from "@ikas/storefront-models";
+import { CHECKOUT_COMPONENT_ID, PageInfo, PAGE_INFO } from "../pages/info";
+import { findAllByKey } from "../../../utils/helper";
+
+export class ComponentImportsGenerator {
+  static async generate(themeJson: IkasThemeJson, workingDir?: string) {
+    await deleteDirContent(
+      path.join(
+        workingDir || process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      )
+    );
+
+    return (
+      (await ComponentImportsGenerator.generateAllPageComponentImportsFiles(
+        themeJson,
+        workingDir
+      )) &&
+      (await ComponentImportsGenerator.generateAllComponentImportsFileForEditor(
+        themeJson,
+        workingDir
+      ))
+    );
+  }
+
+  static async generateAllPageComponentImportsFiles(
+    themeJson: IkasThemeJson,
+    workingDir?: string
+  ) {
+    let isSuccess = true;
+
+    for (const pageInfo of PAGE_INFO) {
+      // const themeHasPage = themeJson.pages.some((page) =>
+      //   pageInfo.pageTypes.includes(page.type)
+      // );
+      // if (themeHasPage) {
+      // }
+      isSuccess =
+        isSuccess &&
+        (await ComponentImportsGenerator.generatePageComponentImportsFileWithInfo(
+          pageInfo,
+          themeJson,
+          workingDir
+        ));
+    }
+
+    return isSuccess;
+  }
+
+  static async generatePageComponentImportsFileWithInfo(
+    pageInfo: PageInfo,
+    themeJson: IkasThemeJson,
+    workingDir?: string
+  ) {
+    if (pageInfo.isCheckout || pageInfo.isEditor) return true;
+
+    try {
+      const components = themeJson.components;
+      const componentIds: string[] = [];
+
+      pageInfo.pageTypes.forEach((pageType) => {
+        const pages = themeJson.pages.filter((page) => page.type === pageType);
+
+        if (pages.length) {
+          pages.forEach((page) => {
+            const allPageComponents = page.components;
+            if (page.specifications?.length) {
+              page.specifications.forEach((specification) => {
+                allPageComponents.push(...specification.components);
+              });
+            }
+
+            componentIds.push(...allPageComponents.map((c) => c.componentId));
+
+            allPageComponents.forEach((pageComponent) => {
+              const component = components.find(
+                (c) => c.id === pageComponent.componentId
+              );
+              if (!component) return;
+
+              const nestedComponentIds = findAllByKey(
+                pageComponent.propValues,
+                "componentId"
+              ) as Array<any>;
+
+              componentIds.push(...nestedComponentIds);
+            });
+          });
+        }
+      });
+
+      const componentsInPage = components.filter(
+        (c) => componentIds.includes(c.id) && c.id !== CHECKOUT_COMPONENT_ID
+      );
+
+      return await ComponentImportsGenerator.generateComponentImportsFile(
+        componentsInPage,
+        pageInfo,
+        workingDir
+      );
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static generatePageComponentImportsFileWithType(
+    pageType: IkasThemeJsonPageType,
+    themeJson: IkasThemeJson,
+    workingDir?: string
+  ) {
+    if (pageType === IkasThemeJsonPageType.CHECKOUT) return;
+
+    try {
+      const pageInfo = PAGE_INFO.find((pi) => pi.pageTypes.includes(pageType));
+      if (pageInfo) {
+        return ComponentImportsGenerator.generatePageComponentImportsFileWithInfo(
+          pageInfo,
+          themeJson,
+          workingDir
+        );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    return false;
+  }
+
+  static generateComponentImportsFile(
+    components: IkasThemeJsonComponent[],
+    pageInfo: PageInfo,
+    workingDir?: string
+  ) {
+    try {
+      let fileStr = "";
+
+      components
+        .filter((c: any) => c.id !== "checkout")
+        .forEach((component: any, index: number) => {
+          fileStr += `import Component${index} from "src/components/${component.dir}";\r\n`;
+        });
+
+      fileStr += `
+  const Components = {
+    ${components.map(
+      (component: any, index: number) => `"${component.id}": Component${index}`
+    )}
+  };
+  `;
+
+      fileStr += "\r\n";
+      fileStr += "export default Components;";
+
+      return createFile(
+        path.join(
+          workingDir || process.cwd(),
+          "src",
+          "components",
+          "__generated__",
+          "pages"
+        ),
+        pageInfo.path.replace("tsx", "ts"),
+        fileStr
+      );
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static async generateAllComponentImportsFileForEditor(
+    themeJson: IkasThemeJson,
+    workingDir?: string
+  ) {
+    try {
+      let fileStr = `import dynamic from "next/dynamic";\r\n`;
+      fileStr += `import { IkasEditorComponentLoader } from "@ikas/storefront";\r\n`;
+      fileStr += "\r\n";
+      fileStr += "\r\n";
+
+      const components = themeJson.components.filter(
+        (tc: any) => tc.id !== "checkout"
+      );
+
+      // Component imports
+      components
+        .filter((c: any) => c.id !== "checkout")
+        .forEach((component: any, index: number) => {
+          fileStr += `const Component${index} = dynamic(() => import("../${component.dir}"), { loading: () => <IkasEditorComponentLoader /> });\r\n`;
+        });
+
+      fileStr += "\r\n";
+      fileStr += `
+const Components = {
+  ${components.map(
+    (component: any, index: number) => `"${component.id}": Component${index}`
+  )}
+};
+`;
+
+      fileStr += "\r\n";
+      fileStr += "export default Components;";
+
+      const generatedFolderPath = path.join(
+        workingDir || process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      );
+
+      return await createFile(generatedFolderPath, "editor.tsx", fileStr);
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static async generateAllComponentImportsFile(
+    themeJson: IkasThemeJson,
+    workingDir?: string
+  ) {
+    try {
+      let fileStr = ``;
+
+      const components = themeJson.components.filter(
+        (tc: any) => tc.id !== "checkout"
+      );
+
+      // Component imports
+      components
+        .filter((c: any) => c.id !== "checkout")
+        .forEach((component: any, index: number) => {
+          fileStr += `import Component${index} from "../${component.dir}";\r\n`;
+        });
+
+      fileStr += "\r\n";
+      fileStr += `
+const Components = {
+  ${components.map(
+    (component: any, index: number) => `"${component.id}": Component${index}`
+  )}
+};
+`;
+
+      fileStr += "\r\n";
+      fileStr += "export default Components;";
+
+      const generatedFolderPath = path.join(
+        workingDir || process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      );
+
+      return await createFile(generatedFolderPath, "index.tsx", fileStr);
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+}

package/src/scripts/generators/config/content.ts

@@ -0,0 +1,170 @@
+export const DEPENDENCIES = {
+  next: "12.2.0",
+  react: "17.0.2",
+  "react-dom": "17.0.2",
+  mobx: "^6.1.3",
+  axios: "^0.26.0",
+  lodash: "^4.17.20",
+  archiver: "^5.3.0",
+  cors: "^2.8.5",
+  "html-react-parser": "^1.4.0",
+  "mobx-react-lite": "^3.1.5",
+  "next-transpile-modules": "^9.0.0",
+  "@ikas/storefront": "^4.0.0-alpha.48",
+  "@ikas/storefront-api": "^4.0.0-alpha.48",
+  "@ikas/storefront-assets": "^4.0.0-alpha.48",
+  "@ikas/storefront-cmd": "^4.0.0-alpha.48",
+  "@ikas/storefront-config": "^4.0.0-alpha.48",
+  "@ikas/storefront-model-functions": "^4.0.0-alpha.48",
+  "@ikas/storefront-models": "^4.0.0-alpha.48",
+  "@ikas/storefront-next": "^4.0.0-alpha.48",
+  "@ikas/storefront-providers": "^4.0.0-alpha.48",
+};
+
+export const DEV_DEPENDENCIES = {
+  "@types/node": "^14.14.6",
+  "@types/react": "^17.0.2",
+  "@types/react-dom": "^17.0.2",
+  "@types/cors": "^2.8.9",
+  "@types/archiver": "^5.1.0",
+  "@typescript-eslint/eslint-plugin": "^2.10.0",
+  "@typescript-eslint/parser": "^2.10.0",
+  eslint: "^6.6.0",
+  "eslint-config-react-app": "^5.2.1",
+  "eslint-loader": "3.0.3",
+  "eslint-plugin-flowtype": "4.6.0",
+  "eslint-plugin-import": "2.20.1",
+  "eslint-plugin-jsx-a11y": "6.2.3",
+  "eslint-plugin-react": "7.19.0",
+  "eslint-plugin-react-hooks": "^1.6.1",
+  sass: "^1.43.4",
+  typescript: "^4.5.2",
+};
+
+export const RESOLUTIONS = {
+  "@types/react": "17.0.2",
+  "@types/react-dom": "17.0.2",
+};
+
+export const SCRIPTS = {
+  upgradeDependencies:
+    "yarn upgrade @ikas/storefront @ikas/storefront-api @ikas/storefront-assets @ikas/storefront-cmd @ikas/storefront-config @ikas/storefront-model-functions @ikas/storefront-models @ikas/storefront-next @ikas/storefront-providers",
+  dev: "next dev -p 3333",
+  build: "next build",
+  start: "next start",
+  generate: "ikas --generate",
+  "prettier:all": "npx prettier@^2.1 './**/src/**/*.(ts|tsx|css|scss)' --write",
+};
+
+export const TS_CONFIG = `{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "useUnknownInCatchVariables": false,
+    "incremental": true
+  },
+  "typeRoots": [
+    "./node_modules/@types"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/typings/global.d.ts",
+  ],
+  "exclude": [
+    "node_modules",
+    "./src/pages/api",
+  ]
+}`;
+
+export const NEXT_CONFIG = `const withTM = require("next-transpile-modules")([
+  "@ikas/storefront",
+  "@ikas/storefront-api",
+  "@ikas/storefront-assets",
+  "@ikas/storefront-cmd",
+  "@ikas/storefront-config",
+  "@ikas/storefront-model-functions",
+  "@ikas/storefront-models",
+  "@ikas/storefront-next",
+  "@ikas/storefront-providers",
+]);
+
+const config = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+    localeDetection: false,
+  },
+  basePath: process.env.NEXTJS_BASE_PATH || "",
+
+  images: {
+    deviceSizes: [
+      180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2560, 3840,
+    ],
+  },
+
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+      config.resolve.fallback.net = false;
+      config.resolve.fallback.encoding = false;
+      config.resolve.fallback.crypto = false;
+      config.resolve.fallback.assert = false;
+      config.resolve.fallback.stream = false;
+      config.module.rules = [
+        ...config.module.rules,
+        {
+          test: /@ikas/i,
+          sideEffects: false,
+        },
+      ];
+    }
+    return config;
+  },
+};
+
+module.exports = withTM(config);`;
+
+export const DEV_ENV = `NEXT_PUBLIC_ENV=local
+NEXT_PUBLIC_BASE_URL=https://api.myikas.dev/api/sf
+NEXT_PUBLIC_IMG_BASE_URL=https://cdn.myikas.dev/
+NEXT_PUBLIC_UPLOAD_GQL_URL=https://api.myikas.dev/api/admin/graphql
+NEXT_PUBLIC_GQL_URL=https://api.myikas.dev/api/sf/graphql
+`;
+
+export const PROD_ENV = `NEXT_PUBLIC_ENV=local
+NEXT_PUBLIC_BASE_URL=https://api.myikas.com/api/sf
+NEXT_PUBLIC_IMG_BASE_URL=https://cdn.myikas.com/
+NEXT_PUBLIC_UPLOAD_GQL_URL=https://api.myikas.com/api/admin/graphql
+NEXT_PUBLIC_GQL_URL=https://api.myikas.com/api/sf/graphql
+`;
+
+export const BABEL_RC = `{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": { "throwIfNamespace": false },
+      }
+    ]
+  ],
+  "plugins": []
+}`;

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

@@ -0,0 +1,113 @@
+import path from "path";
+import fs from "fs";
+import { sortObject } from "../../../utils/helper";
+import { createFile } from "../../../utils/fs";
+import {
+  TS_CONFIG,
+  BABEL_RC,
+  NEXT_CONFIG,
+  DEPENDENCIES,
+  DEV_DEPENDENCIES,
+  RESOLUTIONS,
+  SCRIPTS,
+  DEV_ENV,
+  PROD_ENV,
+} from "./content";
+
+export type ENV = "dev" | "prod";
+
+export class ConfigGenerator {
+  static async generate(env: ENV, workingDir?: string) {
+    return (
+      (await ConfigGenerator.generateTsConfig(workingDir)) &&
+      (await ConfigGenerator.generateBabelRc(workingDir)) &&
+      (await ConfigGenerator.generateNextConfig(workingDir)) &&
+      (await ConfigGenerator.generatePackageJson(workingDir)) &&
+      (await ConfigGenerator.generateEnv(env, workingDir))
+    );
+  }
+
+  static generateTsConfig(workingDir?: string) {
+    return createFile(workingDir || process.cwd(), "tsconfig.json", TS_CONFIG);
+  }
+
+  static generateBabelRc(workingDir?: string) {
+    return createFile(workingDir || process.cwd(), ".babelrc", BABEL_RC);
+  }
+
+  static generateNextConfig(workingDir?: string) {
+    return createFile(
+      workingDir || process.cwd(),
+      "next.config.js",
+      NEXT_CONFIG
+    );
+  }
+
+  static async generatePackageJson(workingDir?: string) {
+    try {
+      // const fs = await import("fs-extra");
+      const packageJsonPath = path.join(
+        workingDir || process.cwd(),
+        "package.json"
+      );
+      const packageJsonBuffer = fs.readFileSync(packageJsonPath);
+
+      if (packageJsonBuffer.length) {
+        const packageJson = JSON.parse(packageJsonBuffer.toString());
+
+        const setDependencies = (type: "dev" | "normal") => {
+          const dependencies = type === "dev" ? DEV_DEPENDENCIES : DEPENDENCIES;
+          const dependenciesKey =
+            type === "dev" ? "devDependencies" : "dependencies";
+
+          if (
+            !packageJson[dependenciesKey] ||
+            typeof packageJson[dependenciesKey] !== "object"
+          ) {
+            packageJson[dependenciesKey] = dependencies;
+          } else {
+            packageJson[dependenciesKey] = {
+              ...packageJson[dependenciesKey],
+              ...dependencies,
+            };
+          }
+
+          const orderedDependencies = sortObject(packageJson[dependenciesKey]);
+
+          packageJson[dependenciesKey] = orderedDependencies;
+        };
+
+        setDependencies("dev");
+        setDependencies("normal");
+
+        if (!packageJson.scripts || typeof packageJson.scripts !== "object") {
+          packageJson.scripts = SCRIPTS;
+        } else {
+          packageJson.scripts = {
+            ...packageJson.scripts,
+            ...SCRIPTS,
+          };
+        }
+
+        packageJson.resolutions = {
+          ...packageJson.resolutions,
+          ...RESOLUTIONS,
+        };
+
+        return await createFile(
+          packageJsonPath,
+          "",
+          JSON.stringify(packageJson, null, 2)
+        );
+      }
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static generateEnv(env: ENV, workingDir?: string) {
+    const envFileContent = env === "dev" ? DEV_ENV : PROD_ENV;
+    return createFile(workingDir || process.cwd(), ".env", envFileContent);
+  }
+}

package/{build/scripts/generators/index.d.ts → src/scripts/generators/index.ts}

@@ -1,6 +1,6 @@
-export * from "./api";
-export * from "./components";
-export * from "./config";
-export * from "./pages";
-export * from "./theme";
-export * from "./types";
+export * from "./api";
+export * from "./components";
+export * from "./config";
+export * from "./pages";
+export * from "./theme";
+export * from "./types";