@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,235 @@
+import path from "path";
+import { createFile, deleteDirContent } from "../../../utils/fs";
+import { IkasTheme } from "../../../models/theme/theme";
+
+export default class ComponentImportsGenerator {
+  static generate(themeJson: IkasTheme) {
+    deleteDirContent(
+      path.join(process.cwd(), "src", "components", "__generated__")
+    );
+
+    return (
+      ComponentImportsGenerator.generateAllComponentImportsFile(themeJson) &&
+      ComponentImportsGenerator.generateAllComponentImportsFileForEditor(
+        themeJson
+      )
+    );
+  }
+
+  //   static generateAllPageComponentImportsFiles(themeJson: IkasTheme) {
+  //     let isSuccess = true;
+
+  //     for (const pageInfo of PAGE_INFO) {
+  //       const themeHasPage = themeJson.pages.some((page) =>
+  //         pageInfo.pageTypes.includes(page.type)
+  //       );
+  //       if (themeHasPage) {
+  //         isSuccess =
+  //           isSuccess &&
+  //           ComponentImportsGenerator.generatePageComponentImportsFileWithInfo(
+  //             pageInfo,
+  //             themeJson
+  //           );
+  //       }
+  //     }
+
+  //     return isSuccess;
+  //   }
+
+  //   static generatePageComponentImportsFileWithInfo(
+  //     pageInfo: PageInfo,
+  //     themeJson: IkasTheme
+  //   ) {
+  //     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 ComponentImportsGenerator.generateComponentImportsFile(
+  //         componentsInPage,
+  //         pageInfo
+  //       );
+  //     } catch (err) {
+  //       console.error(err);
+  //       return false;
+  //     }
+  //   }
+
+  //   static generatePageComponentImportsFileWithType(
+  //     pageType: IkasThemePageType,
+  //     themeJson: IkasTheme
+  //   ) {
+  //     if (pageType === IkasThemePageType.CHECKOUT) return;
+
+  //     try {
+  //       const pageInfo = PAGE_INFO.find((pi) => pi.pageTypes.includes(pageType));
+  //       if (pageInfo) {
+  //         return ComponentImportsGenerator.generatePageComponentImportsFileWithInfo(
+  //           pageInfo,
+  //           themeJson
+  //         );
+  //       }
+  //     } catch (err) {
+  //       console.error(err);
+  //     }
+
+  //     return false;
+  //   }
+
+  //   static generateComponentImportsFile(
+  //     components: IkasThemeComponent[],
+  //     pageInfo: PageInfo
+  //   ) {
+  //     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(process.cwd(), "src", "components", "__generated__", "pages"),
+  //         pageInfo.path,
+  //         fileStr
+  //       );
+  //     } catch (err) {
+  //       console.error(err);
+  //       return false;
+  //     }
+  //   }
+
+  static generateAllComponentImportsFileForEditor(themeJson: IkasTheme) {
+    try {
+      let fileStr = `import dynamic from "next/dynamic";\r\n`;
+      fileStr += `import { IkasEditorComponentLoader } from "@ikas/storefront/src/components/page-editor/loader";\r\n`;
+      fileStr += "\r\n";
+      fileStr += `const loader = { loading: () => <IkasEditorComponentLoader /> };\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}"), loader);\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(
+        process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      );
+
+      return createFile(generatedFolderPath, "editor.tsx", fileStr);
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static generateAllComponentImportsFile(themeJson: IkasTheme) {
+    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(
+        process.cwd(),
+        "src",
+        "components",
+        "__generated__"
+      );
+
+      return createFile(generatedFolderPath, "index.tsx", fileStr);
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+export const DEPENDENCIES = {
+  next: "11.1.2",
+  react: "17.0.2",
+  "react-dom": "17.0.2",
+  mobx: "^6.1.3",
+  "mobx-react-lite": "^3.1.5",
+  "next-transpile-modules": "^9.0.0",
+};
+
+export const DEV_DEPENDENCIES = {
+  "@types/node": "^14.14.6",
+  "@types/react": "^16.9.55",
+  "@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 SCRIPTS = {
+  upgradeDependencies: "yarn upgrade @ikas/storefront",
+  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
+  },
+  "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"]);
+
+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;
+    }
+    return config;
+  },
+};
+
+module.exports = withTM(config);`;
+
+export const DEV_ENV = `NEXT_PUBLIC_ENV=local
+NEXT_PUBLIC_BASE_URL=https://api.myikas.dev
+NEXT_PUBLIC_IMG_HOST=cdn.myikas.dev
+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
+NEXT_PUBLIC_IMG_HOST=cdn.myikas.com
+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
+`;

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

@@ -0,0 +1,93 @@
+import fs from "fs-extra";
+import path from "path";
+import { sortObject } from "../../../utils";
+import { createFile } from "../../../utils/fs";
+import {
+  TS_CONFIG,
+  NEXT_CONFIG,
+  DEPENDENCIES,
+  DEV_DEPENDENCIES,
+  SCRIPTS,
+  DEV_ENV,
+  PROD_ENV,
+} from "./content";
+
+export type ENV = "dev" | "prod";
+
+export default class ConfigGenerator {
+  static generate(env: ENV) {
+    return (
+      ConfigGenerator.generateTsConfig() &&
+      ConfigGenerator.generateNextConfig() &&
+      ConfigGenerator.generatePackageJson() &&
+      ConfigGenerator.generateEnv(env)
+    );
+  }
+
+  static generateTsConfig() {
+    return createFile(process.cwd(), "tsconfig.json", TS_CONFIG);
+  }
+
+  static generateNextConfig() {
+    return createFile(process.cwd(), "next.config.js", NEXT_CONFIG);
+  }
+
+  static generatePackageJson() {
+    try {
+      const packageJsonPath = path.join(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,
+          };
+        }
+
+        return createFile(
+          packageJsonPath,
+          "",
+          JSON.stringify(packageJson, null, 2)
+        );
+      }
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static generateEnv(env: ENV) {
+    const envFileContent = env === "dev" ? DEV_ENV : PROD_ENV;
+    return createFile(process.cwd(), ".env", envFileContent);
+  }
+}

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

@@ -0,0 +1,95 @@
+import path from "path";
+import { IkasThemePageType } from "../../../models/theme/page";
+import { createFile, deleteDirContent } from "../../../utils/fs";
+import {
+  PageInfo,
+  PAGE_INFO,
+  CHECKOUT_PAGE_CONTENT,
+  EDITOR_PAGE_CONTENT,
+} from "./info";
+
+export default class PageGenerator {
+  static generate() {
+    const pagesDir = path.join(process.cwd(), "src", "pages");
+    deleteDirContent(pagesDir, ["_app.tsx", "_document.tsx", "api"]);
+
+    let pagesGenerateSuccess = true;
+    for (const pageInfo of PAGE_INFO) {
+      pagesGenerateSuccess =
+        pagesGenerateSuccess && PageGenerator.generatePageWithInfo(pageInfo);
+    }
+
+    const checkoutPageInfo = PAGE_INFO.find((pi) => pi.isCheckout);
+    const editorPageInfo = PAGE_INFO.find((pi) => pi.isEditor);
+
+    const checkoutPageGenerateSuccess = checkoutPageInfo
+      ? PageGenerator.generatePageWithInfo(checkoutPageInfo)
+      : false;
+    const editorPageGenerateSuccess = editorPageInfo
+      ? PageGenerator.generatePageWithInfo(editorPageInfo)
+      : false;
+
+    return (
+      pagesGenerateSuccess &&
+      checkoutPageGenerateSuccess &&
+      editorPageGenerateSuccess
+    );
+  }
+
+  static generatePageWithInfo(pageInfo: PageInfo) {
+    try {
+      let fileStr = "";
+
+      if (pageInfo.isCheckout) {
+        fileStr = CHECKOUT_PAGE_CONTENT;
+      } else if (pageInfo.isEditor) {
+        fileStr = EDITOR_PAGE_CONTENT;
+      } else {
+        const pageComponentImportStr = `import { ${pageInfo.pageComponentName} } from "@ikas/storefront";\r\n`;
+        const componentsImportStr = `import Components from "src/components/__generated__/index";\r\n`;
+
+        const pageComponentStr = `
+const PageComponent = ${pageInfo.pageComponentName}.default;
+
+const Page = (props: any) => {
+  return <PageComponent components={Components} {...props} />;
+};
+
+export default Page;\r\n`;
+
+        const getStaticPathsStr = pageInfo.isDynamicSSG
+          ? `export const getStaticPaths = ${pageInfo.pageComponentName}.getStaticPaths;\r\n`
+          : "";
+
+        const dataFetchingStr = pageInfo.isSSR
+          ? `export const getServerSideProps = ${pageInfo.pageComponentName}.getServerSideProps;\r\n`
+          : `export const getStaticProps = ${pageInfo.pageComponentName}.getStaticProps;\r\n`;
+
+        fileStr =
+          pageComponentImportStr +
+          componentsImportStr +
+          pageComponentStr +
+          getStaticPathsStr +
+          dataFetchingStr;
+      }
+
+      return createFile(
+        path.join(process.cwd(), "src", "pages"),
+        pageInfo.path,
+        fileStr
+      );
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }
+
+  static generatePageWithType(pageType: IkasThemePageType) {
+    const pageInfo = PAGE_INFO.find((pi) => pi.pageTypes.includes(pageType));
+    if (pageInfo) {
+      return PageGenerator.generatePageWithInfo(pageInfo);
+    }
+
+    return false;
+  }
+}

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

@@ -0,0 +1,156 @@
+import { IkasThemePageType } from "../../../models/theme/page";
+
+export type PageInfo = {
+  path: string;
+  pageComponentName: string;
+  pageTypes: IkasThemePageType[];
+  isDynamicSSG?: boolean;
+  isSSR?: boolean;
+  isEditor?: boolean;
+  isCheckout?: boolean;
+};
+
+export const CHECKOUT_COMPONENT_ID = "checkout";
+
+export const PAGE_INFO: PageInfo[] = [
+  {
+    path: "[slug]/index.tsx",
+    pageComponentName: "SlugPage",
+    pageTypes: [
+      IkasThemePageType.PRODUCT,
+      IkasThemePageType.CATEGORY,
+      IkasThemePageType.BRAND,
+    ],
+    isDynamicSSG: true,
+  },
+  {
+    path: "account/orders/[id].tsx",
+    pageComponentName: "OrderDetailPage",
+    pageTypes: [IkasThemePageType.ORDER_DETAIL],
+    isSSR: true,
+  },
+  {
+    path: "account/orders/index.tsx",
+    pageComponentName: "OrdersPage",
+    pageTypes: [IkasThemePageType.ORDERS],
+  },
+  {
+    path: "account/addresses.tsx",
+    pageComponentName: "AddressesPage",
+    pageTypes: [IkasThemePageType.ADDRESSES],
+  },
+  {
+    path: "account/favorite-products.tsx",
+    pageComponentName: "FavoriteProductsPage",
+    pageTypes: [IkasThemePageType.FAVORITE_PRODUCTS],
+  },
+  {
+    path: "account/forgot-password.tsx",
+    pageComponentName: "ForgotPasswordPage",
+    pageTypes: [IkasThemePageType.FORGOT_PASSWORD],
+  },
+  {
+    path: "account/index.tsx",
+    pageComponentName: "AccountPage",
+    pageTypes: [IkasThemePageType.ACCOUNT],
+  },
+  {
+    path: "account/login.tsx",
+    pageComponentName: "LoginPage",
+    pageTypes: [IkasThemePageType.LOGIN],
+  },
+  {
+    path: "account/raffles.tsx",
+    pageComponentName: "AccountRafflesPage",
+    pageTypes: [IkasThemePageType.RAFFLE_ACCOUNT],
+  },
+  {
+    path: "account/recover-password.tsx",
+    pageComponentName: "RecoverPasswordPage",
+    pageTypes: [IkasThemePageType.RECOVER_PASSWORD],
+  },
+  {
+    path: "account/register.tsx",
+    pageComponentName: "RegisterPage",
+    pageTypes: [IkasThemePageType.REGISTER],
+  },
+  {
+    path: "blog/[slug].tsx",
+    pageComponentName: "BlogSlugPage",
+    pageTypes: [IkasThemePageType.BLOG, IkasThemePageType.BLOG_CATEGORY],
+    isDynamicSSG: true,
+  },
+  {
+    path: "blog/index.tsx",
+    pageComponentName: "BlogPage",
+    pageTypes: [IkasThemePageType.BLOG_INDEX],
+  },
+  {
+    path: "pages/[slug].tsx",
+    pageComponentName: "CustomPage",
+    pageTypes: [IkasThemePageType.CUSTOM],
+    isDynamicSSG: true,
+  },
+  {
+    path: "raffle/[slug].tsx",
+    pageComponentName: "RafflePage",
+    pageTypes: [IkasThemePageType.RAFFLE_DETAIL],
+    isDynamicSSG: true,
+  },
+  {
+    path: "raffle/index.tsx",
+    pageComponentName: "RafflesPage",
+    pageTypes: [IkasThemePageType.RAFFLE],
+  },
+  {
+    path: "404.tsx",
+    pageComponentName: "NotFoundPage",
+    pageTypes: [IkasThemePageType.NOT_FOUND],
+  },
+  {
+    path: "cart.tsx",
+    pageComponentName: "CartPage",
+    pageTypes: [IkasThemePageType.CART],
+  },
+  {
+    path: "index.tsx",
+    pageComponentName: "IndexPage",
+    pageTypes: [IkasThemePageType.INDEX],
+  },
+  {
+    path: "search.tsx",
+    pageComponentName: "SearchPage",
+    pageTypes: [IkasThemePageType.SEARCH],
+  },
+  {
+    path: "checkout.tsx",
+    pageComponentName: "CheckoutPage",
+    pageTypes: [],
+    isCheckout: true,
+  },
+  {
+    path: "editor.tsx",
+    pageComponentName: "EditorPage",
+    pageTypes: [],
+    isEditor: true,
+  },
+];
+
+export const CHECKOUT_PAGE_CONTENT = `import { CheckoutPage } from "@ikas/storefront";
+
+export default CheckoutPage.default;
+export const getStaticProps = CheckoutPage.getStaticProps;
+`;
+
+export const EDITOR_PAGE_CONTENT = `import { EditorPage } from "@ikas/storefront";
+import Components from "../components/__generated__/editor";
+
+const PageComponent = EditorPage.default;
+
+const Page = (props: any) => {
+  return <PageComponent components={Components} {...props} />;
+};
+
+export default Page;
+export const getStaticProps = EditorPage.getStaticProps;
+`;