@pronto-tools-and-more/components 6.26.2 → 6.27.0

package/dist/main.js

@@ -119,23 +119,116 @@ var SearchLink = ({ message } = {}) => {
   return /* @__PURE__ */ React.createElement("div", { className: "SearchLink" }, /* @__PURE__ */ React.createElement(JsonComponent, { json }));
 };
 
+// src/parts/HasComplexChildren/HasComplexChildren.ts
+var isComplex = (child) => {
+  return typeof child !== "string";
+};
+var hasComplexChildren = (children) => {
+  return children.some(isComplex);
+};
+
+// src/parts/FakeNode/FakeNode.ts
+var fakeNode = {
+  type: "html",
+  tag: "div",
+  content: '<img src="x" onerror="globalThis.fixRender(this)" />'
+};
+
+// src/parts/CreateFakeSection/CreateFakeSection.ts
+var createFakeSection = (children) => {
+  return {
+    type: "section",
+    content: [fakeNode, ...children]
+  };
+};
+
+// src/parts/UnwrapComponent/UnwrapComponent.tsx
+var getComponentChildren = (element, componentProps) => {
+  if (componentProps && componentProps.children) {
+    if (typeof componentProps.children === "string") {
+      return [componentProps.children];
+    }
+    return componentProps.children;
+  }
+  if (element && element.children) {
+    if (typeof element.children === "string") {
+      return [element.children];
+    }
+    return element.children;
+  }
+  return [];
+};
+var getComponentProperties = (element) => {
+  const componentType = element.type;
+  const componentProps = element.props;
+  const componentChildren = getComponentChildren(element, componentProps);
+  return {
+    componentType,
+    componentProps,
+    componentChildren
+  };
+};
+var unwrapComponent = (element) => {
+  if (!element) {
+    return {
+      type: "html",
+      tag: "div",
+      content: `Unknown component`
+    };
+  }
+  if (typeof element === "string" || typeof element === "number" || typeof element === "boolean") {
+    return {
+      type: "html",
+      tag: "div",
+      content: `${element}`
+    };
+  }
+  const { componentChildren, componentProps, componentType } = getComponentProperties(element);
+  if (typeof componentType === "function") {
+    const vnode = componentType({
+      ...componentProps
+    });
+    const rendered = unwrapComponent(vnode);
+    return rendered;
+  }
+  if (typeof componentType === "string") {
+    const hasComplexChildren2 = hasComplexChildren(componentChildren);
+    const renderedChildren = hasComplexChildren2 ? componentChildren.map(unwrapComponent) : [];
+    const content = hasComplexChildren2 ? "" : componentChildren[0] || "";
+    const props = componentProps ? componentProps : {};
+    return createFakeSection([
+      {
+        type: "html",
+        tag: componentType,
+        content
+      },
+      ...renderedChildren
+    ]);
+  }
+  if (componentType) {
+    return {
+      type: "TODO"
+    };
+  }
+  return {};
+};
+
 // src/parts/SearchResults/SearchResults.tsx
-var SearchResults = () => {
+var SearchResults = ({
+  SearchResult
+}) => {
+  const searchResult = {
+    description: "abc",
+    label: "abc",
+    readtime: "",
+    title: "$context.title",
+    imageSrc: ""
+  };
+  const unwrapped = unwrapComponent(
+    /* @__PURE__ */ React.createElement(SearchResult, { item: searchResult })
+  );
   const json = {
-    content: {
-      type: "search-result",
-      pageHitExcerptMessage: "test",
-      coverHeight: "FIXED",
-      tapPageHit: {
-        type: "openContent"
-      },
-      tapCover: {
-        type: "openContent"
-      },
-      class: "issue-card issue-card--overline-in-page-hit-excerpt-message",
-      template: "feed",
-      renderProperties: ["authors"]
-    },
+    content: unwrapped,
     dataSource: {
       phrase: "$context.phrase",
       type: "search-result",

package/dist/parts/CreateFakeSection/CreateFakeSection.d.ts

@@ -0,0 +1,4 @@
+export declare const createFakeSection: (children: any) => {
+    type: string;
+    content: any[];
+};

package/dist/parts/FakeNode/FakeNode.d.ts

@@ -0,0 +1,5 @@
+export declare const fakeNode: {
+    type: string;
+    tag: string;
+    content: string;
+};

package/dist/parts/HasComplexChildren/HasComplexChildren.d.ts

@@ -0,0 +1 @@
+export declare const hasComplexChildren: (children: any) => any;

package/dist/parts/ISearchResult/ISearchResult.d.ts

@@ -0,0 +1,7 @@
+export interface ISearchResult {
+    readonly label: string;
+    readonly readtime: string;
+    readonly title: string;
+    readonly description: string;
+    readonly imageSrc: string;
+}

package/dist/parts/ISearchResultComponent/ISearchResultComponent.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { ISearchResult } from "../ISearchResult/ISearchResult.tsx";
+export interface ISearchResultComponent {
+    ({ item }: {
+        item: ISearchResult;
+    }): React.ReactNode;
+}

package/dist/parts/SearchResults/SearchResults.d.ts

@@ -1 +1,4 @@
-export declare const SearchResults: () => import("react").JSX.Element;
+import type { ISearchResultComponent } from "../ISearchResultComponent/ISearchResultComponent.tsx";
+export declare const SearchResults: ({ SearchResult, }: {
+    SearchResult: ISearchResultComponent;
+}) => import("react").JSX.Element;

package/dist/parts/UnwrapComponent/UnwrapComponent.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export declare const createElement: (tag: any, props: any, ...children: any[]) => {
+    tag: any;
+    props: any;
+    children: any[];
+};
+export declare const unwrapComponent: (element: React.ReactNode) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/components",
-  "version": "6.26.2",
+  "version": "6.27.0",
   "description": "",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/src/parts/CreateFakeSection/CreateFakeSection.ts

@@ -0,0 +1,8 @@
+import * as FakeNode from "../FakeNode/FakeNode.ts";
+
+export const createFakeSection = (children) => {
+  return {
+    type: "section",
+    content: [FakeNode.fakeNode, ...children],
+  };
+};

package/src/parts/FakeNode/FakeNode.ts

@@ -0,0 +1,6 @@
+// fake node (to allow using normal html)
+export const fakeNode = {
+  type: "html",
+  tag: "div",
+  content: '<img src="x" onerror="globalThis.fixRender(this)" />',
+};

package/src/parts/HasComplexChildren/HasComplexChildren.ts

@@ -0,0 +1,7 @@
+const isComplex = (child) => {
+  return typeof child !== "string";
+};
+
+export const hasComplexChildren = (children) => {
+  return children.some(isComplex);
+};

package/src/parts/ISearchResult/ISearchResult.tsx

@@ -0,0 +1,7 @@
+export interface ISearchResult {
+  readonly label: string;
+  readonly readtime: string;
+  readonly title: string;
+  readonly description: string;
+  readonly imageSrc: string;
+}

package/src/parts/ISearchResultComponent/ISearchResultComponent.tsx

@@ -0,0 +1,6 @@
+import type React from "react";
+import type { ISearchResult } from "../ISearchResult/ISearchResult.tsx";
+
+export interface ISearchResultComponent {
+  ({ item }: { item: ISearchResult }): React.ReactNode;
+}

package/src/parts/SearchResults/SearchResults.tsx

@@ -1,21 +1,25 @@
+import { ISearchResult } from "../ISearchResult/ISearchResult.tsx";
+import type { ISearchResultComponent } from "../ISearchResultComponent/ISearchResultComponent.tsx";
 import { JsonComponent } from "../JsonComponent/JsonComponent.tsx";
+import * as UnwrapComponent from "../UnwrapComponent/UnwrapComponent.tsx";
 
-export const SearchResults = () => {
+export const SearchResults = ({
+  SearchResult,
+}: {
+  SearchResult: ISearchResultComponent;
+}) => {
+  const searchResult: ISearchResult = {
+    description: "abc",
+    label: "abc",
+    readtime: "",
+    title: "$context.title",
+    imageSrc: "",
+  };
+  const unwrapped = UnwrapComponent.unwrapComponent(
+    <SearchResult item={searchResult} />
+  );
   const json = {
-    content: {
-      type: "search-result",
-      pageHitExcerptMessage: "test",
-      coverHeight: "FIXED",
-      tapPageHit: {
-        type: "openContent",
-      },
-      tapCover: {
-        type: "openContent",
-      },
-      class: "issue-card issue-card--overline-in-page-hit-excerpt-message",
-      template: "feed",
-      renderProperties: ["authors"],
-    },
+    content: unwrapped,
     dataSource: {
       phrase: "$context.phrase",
       type: "search-result",

package/src/parts/UnwrapComponent/UnwrapComponent.tsx

@@ -0,0 +1,98 @@
+import type React from "react";
+import * as HasComplexChildren from "../HasComplexChildren/HasComplexChildren.ts";
+import * as CreateFakeSection from "../CreateFakeSection/CreateFakeSection.ts";
+
+export const createElement = (tag, props, ...children) => {
+  return {
+    tag,
+    props,
+    children,
+  };
+};
+
+const getComponentChildren = (element: any, componentProps: any) => {
+  if (componentProps && componentProps.children) {
+    if (typeof componentProps.children === "string") {
+      return [componentProps.children];
+    }
+    return componentProps.children;
+  }
+  if (element && element.children) {
+    if (typeof element.children === "string") {
+      return [element.children];
+    }
+    return element.children;
+  }
+  return [];
+};
+
+const getComponentProperties = (element: any) => {
+  // @ts-ignore
+  const componentType = element.type;
+  // @ts-ignore
+  const componentProps = element.props;
+  //@ts-ignore
+  const componentChildren = getComponentChildren(element, componentProps);
+  return {
+    componentType,
+    componentProps,
+    componentChildren,
+  };
+};
+
+export const unwrapComponent = (element: React.ReactNode) => {
+  if (!element) {
+    return {
+      type: "html",
+      tag: "div",
+      content: `Unknown component`,
+    };
+  }
+  if (
+    typeof element === "string" ||
+    typeof element === "number" ||
+    typeof element === "boolean"
+  ) {
+    return {
+      type: "html",
+      tag: "div",
+      content: `${element}`,
+    };
+  }
+
+  const { componentChildren, componentProps, componentType } =
+    getComponentProperties(element);
+
+  if (typeof componentType === "function") {
+    const vnode = componentType({
+      ...componentProps,
+    });
+    const rendered = unwrapComponent(vnode);
+    return rendered;
+  }
+
+  if (typeof componentType === "string") {
+    const hasComplexChildren =
+      HasComplexChildren.hasComplexChildren(componentChildren);
+    const renderedChildren = hasComplexChildren
+      ? componentChildren.map(unwrapComponent)
+      : [];
+    const content = hasComplexChildren ? "" : componentChildren[0] || "";
+    const props = componentProps ? componentProps : {};
+
+    return CreateFakeSection.createFakeSection([
+      {
+        type: "html",
+        tag: componentType,
+        content,
+      },
+      ...renderedChildren,
+    ]);
+  }
+  if (componentType) {
+    return {
+      type: "TODO",
+    };
+  }
+  return {};
+};