Merge pull request #447 from EasyBrizy/443-blocksAPI

443 blocks api

packages/core/src/types/templates.ts

@@ -62,6 +62,28 @@ export interface Style {
 }
 
 //#region DefaultKits
+export interface BlockWithThumbs extends Block {
+  thumbnailSrc: string;
+}
+
+export interface Categories {
+  id: Literal;
+  slug: string;
+  title: string;
+  hidden?: boolean;
+}
+
+export type Kit = {
+  categories: string;
+  pro: string;
+  theme: string;
+  slug: string;
+  thumbnail: string;
+  keywords: string;
+  thumbnailHeight: number;
+  thumbnailWidth: number;
+  blank?: string;
+};
 
 export interface Kits {
   blocks: Array<Block>;
@@ -79,17 +101,6 @@ export interface KitsWithThumbs extends Omit<Kits, "blocks"> {
   blocks: Array<BlockWithThumbs>;
 }
 
-export type Kit = {
-  categories: string;
-  pro: string;
-  theme: string;
-  slug: string;
-  thumbnail: string;
-  keywords: string;
-  thumbnailHeight: number;
-  thumbnailWidth: number;
-};
-
 export type KitType = {
   title: string;
   id: string;
@@ -113,6 +124,18 @@ export interface DefaultKits {
 
 //#region DefaultPopups
 
+export type APIPopup = {
+  id: string;
+  categories: string;
+  blank?: string;
+  order: number;
+  pro: string;
+  thumbnail: string;
+  thumbnailHeight: number;
+  thumbnailWidth: number;
+  title: string;
+};
+
 type PopupCategoryId = Symbol;
 
 interface PopupBlock {

packages/demo-nextjs/package.json

@@ -30,6 +30,7 @@
     "formik": "^2.4.6",
     "fp-utilities": "^1.1.4",
     "line-awesome": "^1.3.0",
+    "lodash": "^4.17.21",
     "mongoose": "^8.4.0",
     "next": "14.2.5",
     "nouislider": "^15.8.1",
@@ -50,6 +51,7 @@
     "@brizy/scripts": "^1.1.1",
     "@builder/core": "*",
     "@types/bootstrap": "^5.2.10",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

packages/demo-nextjs/src/components/Editor/contexts/converters.ts

@@ -0,0 +1,83 @@
+import { pipe } from "@brizy/readers";
+import { APIPopup, BlockWithThumbs, Categories, Kit, KitType } from "@builder/core/build/es/types/templates";
+import { flatten, uniq, upperFirst } from "lodash";
+
+type CatTypes = Kit | APIPopup;
+const PRO = "PRO";
+
+export const getUniqueKitCategories = (collections: CatTypes[]): Categories[] =>
+  pipe(
+    (collections: CatTypes[]) => collections.map((collection: CatTypes) => collection.categories),
+    (categories) => categories.map((category) => category.split(",")),
+    flatten,
+    (categories2) => categories2.map((category2) => category2.trim()),
+    uniq,
+    (allCats) => allCats.filter((cat) => cat && cat.length),
+    (cats) =>
+      cats.map((cat) => ({
+        title: upperFirst(cat),
+        slug: cat,
+        id: cat,
+      })),
+  )(collections);
+
+export const getUniqueKitTypes = (collections: Kit[]): KitType[] =>
+  pipe(
+    (collections: Kit[]) => collections.map((collection) => collection.theme),
+    (types) => types.map((type) => type.split(",")),
+    flatten,
+    (types2) => types2.map((type2) => type2.toLowerCase()),
+    uniq,
+    (allTypes) => allTypes.filter((type) => type && type.length),
+    (uni) =>
+      uni.map((u) => ({
+        title: upperFirst(u),
+        id: u,
+        name: u,
+        icon: u === "light" ? "nc-light" : "nc-dark",
+      })),
+  )(collections);
+
+export const convertToCategories = (obj: { slug: string; title: string }[]): Categories[] =>
+  obj.map((item) => ({
+    ...item,
+    id: item.title.toLowerCase(),
+  }));
+
+export const converterKit = (
+  kit: Kit[],
+  url: string,
+  kitId: string,
+): {
+  blocks: BlockWithThumbs[];
+  categories: Categories[];
+  types: KitType[];
+} => {
+  const categories = getUniqueKitCategories(kit);
+  const types = getUniqueKitTypes(kit);
+
+  const blocks: BlockWithThumbs[] = kit.map(
+    ({ slug, categories, pro, thumbnail, keywords, thumbnailWidth, thumbnailHeight, blank, theme }) => ({
+      id: slug,
+      cat: categories.split(",").map((item) => item.trim().toLowerCase()),
+      title: slug,
+      type: theme
+        .split(",")
+        .map((item) => item.trim())
+        .map((i1) => i1.toLowerCase()),
+      keywords: keywords ?? "",
+      thumbnailHeight,
+      thumbnailWidth,
+      thumbnailSrc: `${url}${thumbnail}`,
+      pro: pro === PRO,
+      kitId,
+      blank,
+    }),
+  );
+
+  return {
+    blocks,
+    categories,
+    types,
+  };
+};

packages/demo-nextjs/src/components/Editor/contexts/utils.ts

@@ -1,6 +1,7 @@
 import { getCollectionItemsIds } from "@/api/collections/collectionItems/getCollectionItemsIds";
 import { loadCollectionTypes } from "@/api/collections/collectionTypes/loadCollectionTypes";
 import { Response } from "@/api/types";
+import { convertToCategories, converterKit } from "@/components/Editor/contexts/converters";
 import { ConfigWithReference } from "@/components/Editor/contexts/types";
 import { asNewCategory, numCategoryToStringCategory, templateDetails } from "@/components/Editor/utils";
 import { replacePlaceholders } from "@/placeholders";
@@ -10,8 +11,6 @@ import { AddMediaData, AddMediaExtra } from "@builder/core/build/es/types/media"
 import {
   BlockWithThumbs,
   KitItem,
-  KitType,
-  Kits,
   KitsWithThumbs,
   Popup,
   StoryTemplate,
@@ -20,6 +19,8 @@ import {
 import { Dictionary } from "@builder/core/build/es/utils/types";
 
 const templates = "https://e-t-cloud.b-cdn.net/1.3.0";
+const newTemplates = "https://template-mk.b-cdn.net/api";
+const templatesImageUrl = "https://cloud-1de12d.b-cdn.net/media/iW=1024&iH=1024/";
 
 export const getApi = () => ({
   collectionTypes: {
@@ -50,65 +51,59 @@ export const getApi = () => ({
   defaultKits: {
     async getKits(res: Response<Array<KitItem>>, rej: Response<string>) {
       try {
-        const kits = await fetch(`${templates}/kits/meta.json`)
-          .then((r) => r.json())
-          .then((data) =>
-            data.map((kit: { id: string; name: string }) => ({
-              id: kit.id,
-              title: kit.name,
-            })),
-          );
+        const kits = await fetch(`${newTemplates}/get-kits`);
+
+        if (kits) {
+          const response = await kits.json();
+
+          const parsedKits = response.collections.map((item: { slug: string; title: string }) => ({
+            ...item,
+            id: item.slug,
+          }));
 
-        res(kits);
+          res(parsedKits);
+        }
       } catch (e) {
         rej("Failed to load Kits");
       }
     },
     async getMeta(res: Response<KitsWithThumbs>, rej: Response<string>, kit: KitItem) {
       try {
-        const kitsUrl = `${templates}/kits`;
-        const kits = await fetch(`${kitsUrl}/meta.json`).then((r) => r.json());
-
-        const _kit = kits.find((item: Kits) => item.id === kit.id);
+        const response = await fetch(`${newTemplates}/get-kit-collections-chunk?project_id=${kit.id}`);
 
-        enum Theme {
-          light = 0,
-          dark = 1,
-        }
+        if (response) {
+          const data = await response.json();
 
-        const blocks = _kit?.blocks.map(
-          ({ id, cat, pro, title, keywords, thumbnailWidth, thumbnailHeight, type, blank }: BlockWithThumbs) => ({
-            id,
-            cat: numCategoryToStringCategory({ cat, dict: _kit.categories }),
-            title,
-            type: [Theme[type]],
-            keywords,
-            thumbnailHeight,
-            thumbnailWidth,
-            thumbnailSrc: `${templates}/kits/thumbs/${id}.jpg`,
-            pro: pro ?? false,
-            kitId: kit.id,
-            blank,
-          }),
-        );
+          const { types, blocks } = converterKit(data.collections, templatesImageUrl, kit.id);
 
-        res({
-          id: kit.id,
-          blocks,
-          categories: asNewCategory(_kit.categories),
-          types: _kit.types as KitType[],
-          name: kit.title,
-          styles: _kit.styles,
-        });
+          res({
+            id: kit.id,
+            blocks,
+            categories: convertToCategories(data.categories),
+            types,
+            name: kit.title,
+            styles: [data.styles],
+          });
+        }
       } catch (e) {
         rej("Failed to load meta.json");
       }
     },
-    async getData(res: Response<Record<string, unknown>>, rej: Response<string>, kit: KitItem) {
-      const kitsUrl = `${templates}/kits`;
+    async getData(res: Response<Record<string, unknown>>, rej: Response<string>, kit: BlockWithThumbs) {
       try {
-        const data = await fetch(`${kitsUrl}/resolves/${kit.id}.json`).then((r) => r.json());
-        res(data);
+        const response = await fetch(`${newTemplates}/get-item?project_id=${kit.kitId}&page_slug=${kit.id}`, {
+          method: "GET",
+        });
+
+        if (response) {
+          const data = await response.json();
+
+          const collection = data.collection.pop();
+
+          const x = JSON.parse(collection.pageData).items.pop();
+
+          res(x);
+        }
       } catch (e) {
         rej("Failed to load resolves for selected DefaultTemplate");
       }