@ikas/storefront-next 4.0.0-alpha.78 → 4.0.0-alpha.8

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@ikas/storefront-next",
-  "version": "4.0.0-alpha.78",
+  "version": "4.0.0-alpha.8",
   "description": "Next.js specific functions 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",
   "files": [
-    "./build"
+    "./src"
   ],
   "type": "module",
   "scripts": {
@@ -16,34 +16,33 @@
     "build": "rm -rf build && rollup -c"
   },
   "peerDependencies": {
-    "next": "12.2.0",
-    "@ikas/storefront-config": "^4.0.0-alpha.78",
-    "@ikas/storefront-providers": "^4.0.0-alpha.78",
-    "@ikas/storefront-models": "^4.0.0-alpha.78",
-    "@ikas/storefront-api": "^4.0.0-alpha.78",
-    "@ikas/storefront-assets": "^4.0.0-alpha.78",
+    "next": "canary",
+    "@ikas/storefront-config": "^4.0.0-alpha.8",
+    "@ikas/storefront-providers": "^4.0.0-alpha.8",
+    "@ikas/storefront-models": "^4.0.0-alpha.8",
+    "@ikas/storefront-api": "^4.0.0-alpha.8",
+    "@ikas/storefront-assets": "^4.0.0-alpha.8",
     "axios": "^0.21.0",
     "lodash": "^4.17.21",
     "archiver": "^5.3.0",
     "cors": "^2.8.5"
   },
   "devDependencies": {
-    "@ikas/storefront-cmd": "^4.0.0-alpha.78",
-    "@ikas/storefront-config": "^4.0.0-alpha.78",
-    "@ikas/storefront-providers": "^4.0.0-alpha.78",
-    "@ikas/storefront-models": "^4.0.0-alpha.78",
-    "@ikas/storefront-api": "^4.0.0-alpha.78",
-    "@ikas/storefront-assets": "^4.0.0-alpha.78",
+    "@ikas/storefront-cmd": "^4.0.0-alpha.8",
+    "@ikas/storefront-config": "^4.0.0-alpha.8",
+    "@ikas/storefront-providers": "^4.0.0-alpha.8",
+    "@ikas/storefront-models": "^4.0.0-alpha.8",
+    "@ikas/storefront-api": "^4.0.0-alpha.8",
+    "@ikas/storefront-assets": "^4.0.0-alpha.8",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "rollup-plugin-rename-node-modules": "^1.2.0",
     "@types/archiver": "^5.1.0",
     "@types/node": "^14.14.6",
     "@types/node-fetch": "^2.5.7",
     "@types/cors": "^2.8.9",
     "@types/lodash": "^4.14.168",
-    "next": "12.2.0",
+    "next": "canary",
     "prettier": "^2.2.1",
     "rollup": "^2.75.6",
     "rollup-plugin-terser": "^7.0.2",

package/src/api/getComponentDirs.ts

@@ -0,0 +1,39 @@
+import fs from "fs";
+import path from "path";
+import { NextApiRequest, NextApiResponse } from "next";
+import { corsMiddleware } from "./middleware";
+
+export const getComponentDirs = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  await corsMiddleware(req, res);
+  const componentDirNames: string[] = await getComponentDirNames();
+
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.json({
+    componentDirNames: componentDirNames.filter(
+      (name) => name !== "__generated__"
+    ),
+  });
+};
+
+export const config = {};
+
+function getComponentDirNames(): Promise<string[]> {
+  return new Promise((resolve, reject) => {
+    const componentsPath = path.join(process.cwd(), "src", "components");
+
+    fs.readdir(componentsPath, function (err, files) {
+      if (err) {
+        return reject(err);
+      }
+      resolve(
+        files.filter((file) =>
+          fs.lstatSync(path.join(componentsPath, file)).isDirectory()
+        )
+      );
+    });
+  });
+}

package/src/api/getTheme.ts

@@ -0,0 +1,22 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { corsMiddleware } from "./middleware";
+import { ThemeJsonGenerator } from "@ikas/storefront-cmd";
+
+export const getTheme = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    await corsMiddleware(req, res);
+    const theme = await ThemeJsonGenerator.getTheme();
+
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "application/json");
+    res.json({
+      theme: theme || {},
+    });
+  } catch (err) {
+    console.error(err);
+    res.statusCode = 500;
+    res.send(err);
+  }
+};
+
+export const config = {};

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

@@ -1,11 +1,14 @@
-import * as GetComponentDirs from "./getComponentDirs";
-import * as GetTheme from "./getTheme";
-import * as UpdateTheme from "./updateTheme";
-import * as UploadTheme from "./uploadTheme";
-declare const IkasLocalThemeAPI: {
-    GetComponentDirs: typeof GetComponentDirs;
-    GetTheme: typeof GetTheme;
-    UpdateTheme: typeof UpdateTheme;
-    UploadTheme: typeof UploadTheme;
-};
-export { IkasLocalThemeAPI };
+// API
+import * as GetComponentDirs from "./getComponentDirs";
+import * as GetTheme from "./getTheme";
+import * as UpdateTheme from "./updateTheme";
+import * as UploadTheme from "./uploadTheme";
+
+const IkasLocalThemeAPI = {
+  GetComponentDirs,
+  GetTheme,
+  UpdateTheme,
+  UploadTheme,
+};
+
+export { IkasLocalThemeAPI };

package/src/api/middleware.ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import Cors from "cors";
+
+const cors = Cors();
+
+export function runMiddleware(
+  req: NextApiRequest,
+  res: NextApiResponse,
+  fn: any
+) {
+  return new Promise((resolve, reject) => {
+    fn(req, res, (result: any) => {
+      if (result instanceof Error) {
+        return reject(result);
+      }
+
+      return resolve(result);
+    });
+  });
+}
+
+export function corsMiddleware(req: NextApiRequest, res: NextApiResponse) {
+  return runMiddleware(req, res, cors);
+}

package/src/api/updateTheme.ts

@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { corsMiddleware } from "./middleware";
+import { ThemeJsonGenerator } from "@ikas/storefront-cmd";
+import { ComponentImportsGenerator } from "@ikas/storefront-cmd";
+import { PageGenerator } from "@ikas/storefront-cmd";
+import { APIGenerator } from "@ikas/storefront-cmd";
+import { CustomDataTypesGenerator } from "@ikas/storefront-cmd";
+
+export const updateTheme = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  await corsMiddleware(req, res);
+  const themeJson = req.body;
+
+  await ThemeJsonGenerator.generate(themeJson);
+  await ComponentImportsGenerator.generate(themeJson);
+  await PageGenerator.generate();
+  await APIGenerator.generate();
+  await CustomDataTypesGenerator.generate(themeJson);
+
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end();
+};
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "50mb",
+    },
+  },
+};

package/src/api/uploadTheme.ts

@@ -0,0 +1,307 @@
+import fs from "fs";
+import path from "path";
+import archiver from "archiver";
+import { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+//@ts-ignore
+import CheckoutEN from "@ikas/storefront-assets/checkout/en.js";
+//@ts-ignore
+import CheckoutTR from "@ikas/storefront-assets/checkout/tr.js";
+
+import { corsMiddleware } from "./middleware";
+
+export const uploadTheme = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  await corsMiddleware(req, res);
+  try {
+    const theme = await getTheme();
+
+    const localization = await readLocalizationFiles();
+    const uploadUrl = await saveTheme(theme, localization);
+
+    if (typeof uploadUrl === "string") {
+      const zipDir = await archiveThemeCode();
+      const stat = fs.statSync(zipDir);
+      const success = await _uploadTheme(
+        uploadUrl,
+        fs.readFileSync(zipDir),
+        stat.size
+      );
+      console.log(success);
+      if (success) {
+        buildTheme();
+      }
+      deleteThemeZip(zipDir);
+    }
+
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "application/json");
+    res.json({ status: "ok" });
+  } catch (err) {
+    console.log(err);
+    res.statusCode = 400;
+    res.setHeader("Content-Type", "application/json");
+    res.json({ status: "failed" });
+  }
+};
+
+export const config = {};
+
+async function archiveThemeCode(): Promise<string> {
+  const themePath = path.join(process.cwd());
+
+  const filename = "theme.zip";
+  const dirname = path.join(process.cwd(), filename);
+  const output = fs.createWriteStream(dirname);
+  const archive = archiver("zip", {
+    zlib: {
+      level: 9,
+    },
+  });
+
+  archive.on("warning", function (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  });
+
+  archive.on("error", function (err) {
+    throw err;
+  });
+
+  archive.pipe(output);
+
+  const excludedDirs = ["node_modules", ".next", "out", ".git"];
+  const files = fs.readdirSync(themePath);
+
+  files.forEach((file) => {
+    const filePath = path.join(themePath, file);
+    const stat = fs.lstatSync(filePath);
+
+    if (stat.isDirectory()) {
+      if (excludedDirs.includes(file)) return;
+      archive.directory(filePath, file);
+    } else {
+      archive.file(filePath, { name: file });
+    }
+  });
+
+  await archive.finalize();
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(dirname);
+    }, 2000);
+  });
+}
+
+async function saveTheme(theme: any, localization: Record<string, any>) {
+  try {
+    const locales = Object.keys(localization);
+    const defaultLocale = locales.some((l) => l === "en") ? "en" : locales[0];
+    const config = await getStorefrontConfig();
+
+    const response = await axios({
+      method: "post",
+      url: process.env.NEXT_PUBLIC_UPLOAD_GQL_URL!,
+      headers: {
+        "x-api-key": config.apiKey,
+        "Content-Type": "application/json",
+      },
+      data: JSON.stringify({
+        query: /* GraphQL */ `
+          mutation saveTheme($saveThemeInput: SaveThemeInput!) {
+            saveTheme(input: $saveThemeInput) {
+              themeVersionId
+              uploadUrl
+            }
+          }
+        `,
+        variables: {
+          saveThemeInput: {
+            id: config.themeId,
+            themeJson: JSON.stringify(theme),
+            locales: Object.entries(localization).map(
+              ([locale, localeTranslations]) => ({
+                isDefaultLocale: locale === defaultLocale,
+                locale,
+                localeJson: JSON.stringify(localeTranslations),
+              })
+            ),
+          },
+        },
+      }),
+    });
+
+    // const response = await fetch(process.env.NEXT_PUBLIC_UPLOAD_GQL_URL!, {
+    //   method: "POST",
+    //   body: JSON.stringify({
+    //     query: /* GraphQL */ `
+    //       mutation saveTheme($saveThemeInput: SaveThemeInput!) {
+    //         saveTheme(input: $saveThemeInput) {
+    //           themeVersionId
+    //           uploadUrl
+    //         }
+    //       }
+    //     `,
+    //     variables: {
+    //       saveThemeInput: {
+    //         id: config.themeId,
+    //         themeJson: JSON.stringify(theme),
+    //         locales: Object.entries(localization).map(
+    //           ([locale, localeTranslations]) => ({
+    //             isDefaultLocale: locale === defaultLocale,
+    //             locale,
+    //             localeJson: JSON.stringify(localeTranslations),
+    //           })
+    //         ),
+    //       },
+    //     },
+    //   }),
+    //   headers: {
+    //     "x-api-key": config.apiKey,
+    //     "Content-Type": "application/json",
+    //   },
+    // });
+    const responseJSON = await response.data();
+
+    if (responseJSON.data && responseJSON.data.saveTheme) {
+      return responseJSON.data.saveTheme.uploadUrl as string;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+async function _uploadTheme(uploadUrl: string, file: Buffer, size: number) {
+  const config = {
+    headers: {
+      "Content-Type": "application/zip",
+      "Content-Length": size + "",
+    },
+  };
+
+  try {
+    const res = await axios.put(uploadUrl, file, config);
+    return res.status === 200;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+}
+
+async function buildTheme() {
+  try {
+    const config = await getStorefrontConfig();
+    const response = await fetch(process.env.NEXT_PUBLIC_UPLOAD_GQL_URL!, {
+      method: "POST",
+      body: JSON.stringify({
+        query: /* GraphQL */ `
+          mutation buildTheme($buildThemeThemeId: String!) {
+            buildTheme(themeId: $buildThemeThemeId)
+          }
+        `,
+        variables: {
+          buildThemeThemeId: config.themeId,
+        },
+      }),
+      headers: {
+        "x-api-key": config.apiKey,
+        "Content-Type": "application/json",
+      },
+    });
+    const responseJSON = await response.json();
+    console.log(responseJSON);
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+function getTheme(): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const themePath = path.join(process.cwd(), "src", "theme.json");
+    fs.readFile(themePath, function (err, file) {
+      if (err) {
+        return reject(err);
+      }
+      resolve(JSON.parse(file.toString()));
+    });
+  });
+}
+
+function getStorefrontConfig(): Promise<Record<string, any>> {
+  return new Promise((resolve, reject) => {
+    const themePath = path.join(process.cwd(), "config.json");
+    fs.readFile(themePath, function (err, file) {
+      if (err) {
+        return reject(err);
+      }
+      resolve(JSON.parse(file.toString()));
+    });
+  });
+}
+
+function deleteThemeZip(zipDir: string) {
+  fs.unlinkSync(zipDir);
+}
+
+function readLocalizationFiles(): Promise<Record<string, any>> {
+  return new Promise((resolve, reject) => {
+    const localesPath = path.join(process.cwd(), "public", "locales");
+    const stripExtension = (path: string) =>
+      path.length ? path.split(".")[0] : path;
+
+    fs.readdir(localesPath, function (err, files) {
+      if (err) {
+        return reject(err);
+      }
+
+      const localeDirs = files.filter((file) =>
+        fs.lstatSync(path.join(localesPath, file)).isDirectory()
+      );
+
+      const locales: Record<string, any> = {};
+      let hasError = false;
+
+      localeDirs.forEach((locale) => {
+        const localeDirPath = path.join(
+          process.cwd(),
+          "public",
+          "locales",
+          locale
+        );
+
+        locales[locale] = {};
+
+        try {
+          const localeFiles = fs.readdirSync(localeDirPath);
+          localeFiles.forEach((localeFile) => {
+            const file = fs.readFileSync(
+              path.join(process.cwd(), "public", "locales", locale, localeFile)
+            );
+
+            const strippedLocale = stripExtension(locale).toLowerCase();
+            const namespace = stripExtension(localeFile).toLowerCase();
+
+            locales[strippedLocale][namespace] = JSON.parse(file.toString());
+
+            if (strippedLocale === "tr") {
+              locales[strippedLocale]["checkout-page"] = CheckoutTR;
+            } else {
+              locales[strippedLocale]["checkout-page"] = CheckoutEN;
+            }
+          });
+        } catch (err) {
+          console.error(err);
+          hasError = true;
+        }
+      });
+
+      if (hasError) reject(null);
+      else resolve(locales);
+    });
+  });
+}

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

@@ -1,4 +1,4 @@
-export * from "./api";
-export * from "./pages";
-export * from "./provider/page-data-next";
-export { getGoogleFontHref } from "./utils/google-fonts";
+export * from "./api";
+export * from "./pages";
+export * from "./provider/page-data-next";
+export { getGoogleFontHref } from "./utils/google-fonts";

package/src/pages/404.tsx

@@ -0,0 +1,18 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const props = await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.NOT_FOUND
+  );
+
+  //@ts-ignore
+  if (props.notFound)
+    return {
+      props: {},
+      revalidate: 60,
+    };
+  else return props;
+};

package/src/pages/[slug]/index.tsx

@@ -0,0 +1,18 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(context, undefined, [
+    IkasThemeJsonPageType.BRAND,
+    IkasThemeJsonPageType.CATEGORY,
+    IkasThemeJsonPageType.PRODUCT,
+  ]);
+};

package/src/pages/account/addresses.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.ADDRESSES
+  );
+};

package/src/pages/account/favorite-products.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.FAVORITE_PRODUCTS
+  );
+};

package/src/pages/account/forgot-password.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.FORGOT_PASSWORD
+  );
+};

package/src/pages/account/index.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.ACCOUNT
+  );
+};

package/src/pages/account/login.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.LOGIN
+  );
+};

package/src/pages/account/orders/[id].tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetServerSideProps } from "next";
+import { IkasNextPageDataProvider } from "../../../provider/page-data-next";
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  return await IkasNextPageDataProvider.getServerSideProps(
+    context,
+    IkasThemeJsonPageType.ORDER_DETAIL
+  );
+};

package/src/pages/account/orders/index.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.ORDERS
+  );
+};

package/src/pages/account/raffles.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.RAFFLE_ACCOUNT
+  );
+};

package/src/pages/account/recover-password.tsx

@@ -0,0 +1,10 @@
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { GetStaticProps } from "next";
+import { IkasNextPageDataProvider } from "../../provider/page-data-next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemeJsonPageType.RECOVER_PASSWORD
+  );
+};