@alpaca-headless/alpaca-headless-nextjs 1.0.253 → 1.0.527

package/src/client-components/MultiComponentEditor.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { ComponentData } from "@alpaca-headless/alpaca-headless";
+
+import React, {
+  useState,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  Fragment,
+  useCallback,
+} from "react";
+
+interface MultiComponentEditorProps {
+  children: ReactNode;
+  component: ComponentData;
+  placeholderName: string;
+  thumbZoom?: number;
+  thumbWidth?: string;
+  thumbHeight?: string;
+}
+
+export function MultiComponentEditor({
+  children,
+  component,
+  placeholderName,
+  thumbZoom,
+  thumbWidth = "200px",
+  thumbHeight = "112px",
+}: MultiComponentEditorProps) {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const placeholder = component.placeholders.find(
+    (x) => x.name === placeholderName
+  );
+  if (!placeholder) return;
+  const components = placeholder.components;
+  if (!components) return;
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.type === "componentsSelected") {
+        setSelectedId(event.data.componentIds[0]);
+      }
+    },
+    [components]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const selectedIndex = components.findIndex(
+    (x: ComponentData) => x.id === selectedId
+  );
+
+  const childrenArray = React.Children.toArray(children) as ReactElement[];
+
+  const filteredChildren = childrenArray.filter(
+    (child) => child.type !== "script"
+  );
+
+  return (
+    <>
+      {filteredChildren[selectedIndex < 0 ? 0 : selectedIndex]}
+      <div className="a-editor-mce">
+        <script
+          data-placeholder-start={placeholder.key}
+          data-orientation="horizontal"
+        />
+        {filteredChildren.map((x, index) => thumbnail(x, index))}
+        <script data-placeholder-end={placeholder.key} />
+      </div>
+    </>
+  );
+
+  function thumbnail(x: React.ReactNode, index: number) {
+    const style: {
+      height?: string;
+      width?: string;
+      zoom?: number;
+      transform?: string;
+    } = {};
+
+    if (thumbHeight) {
+      style.height = thumbHeight;
+    }
+    if (thumbWidth) {
+      style.width = thumbWidth;
+    }
+
+    const componentArray = (x as any).props?.children;
+
+    const component = components![index];
+
+    return (
+      <Fragment key={index}>
+        <div
+          className={
+            "a-editor-mce-thumbnail" +
+            (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : "")
+          }
+          style={style}
+          onClick={() => {
+            selectComponents([components![index].id]);
+          }}
+        >
+          <script
+            data-component-start={component.id}
+            data-itemid={
+              component._editor?.linkedComponentItem?.id || component.id
+            }
+            data-layoutid={component._editor?.hostingPageItem?.id}
+          />
+          <div style={{ pointerEvents: "none", zoom: thumbZoom || 0.25 }}>
+            {componentArray.slice(1, -1)}
+          </div>
+          <script data-component-end={component.id} />
+        </div>
+        <div data-dropzone={components[index].id}></div>
+      </Fragment>
+    );
+  }
+}
+
+function selectComponents(componentIds: string[]) {
+  window.top?.window.postMessage(
+    { componentIds, type: "componentsSelected" },
+    "*"
+  );
+}

package/src/client-components/index.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export { MultiComponentEditor } from "./MultiComponentEditor";

package/src/handleBasicAuthRoute.ts

@@ -0,0 +1,62 @@
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+import { getApiHeaders } from ".";
+
+export async function handleBasicAuthRoute({
+  request,
+  mapHost,
+  renderOptions,
+  apiConfig,
+}: {
+  request: NextRequest;
+  mapHost: (host: string) => string;
+  renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
+}) {
+  const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+  const nextSearchParams: any = {};
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextSearchParams[key] = value;
+  }
+
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
+    path: request.nextUrl.pathname,
+    searchParams: nextSearchParams,
+    host: mapHost(request.headers.get("host") || ""),
+    renderOptions,
+    renderings: {},
+    apiConfig: config,
+  });
+
+  if (routeData.result.type === "redirect") {
+    return new Response(null, {
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
+      headers: {
+        Location: routeData.result.location,
+      },
+    });
+  }
+
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
+      return new Response(null, {
+        status: 401,
+        headers: {
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+        },
+      });
+    else
+      return new Response(null, {
+        status: 401,
+      });
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import { headers } from "next/headers";
+
+export { EditorIntegration } from "./EditorIntegration";
+
+export function getApiHeaders() {
+  const requestHeaders = headers();
+  const apiHeaders = new Headers();
+  apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+  apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+  return apiHeaders;
+}
+
+export { handleRequest } from "./middleware/handleRequest";
+
+export { proxy } from "./proxy";

package/src/middleware/handleRequest.ts

@@ -0,0 +1,62 @@
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+import { getApiHeaders } from "..";
+
+export async function handleRequest({
+  request,
+  mapHost,
+  renderOptions,
+  apiConfig,
+}: {
+  request: NextRequest;
+  mapHost: (host: string) => string;
+  renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
+}) {
+  const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+  const nextSearchParams: any = {};
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextSearchParams[key] = value;
+  }
+
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
+    path: request.nextUrl.pathname,
+    searchParams: nextSearchParams,
+    host: mapHost(request.headers.get("host") || ""),
+    renderOptions,
+    renderings: {},
+    apiConfig: config,
+  });
+
+  if (routeData.result.type === "redirect") {
+    return new Response(null, {
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
+      headers: {
+        Location: routeData.result.location,
+      },
+    });
+  }
+
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
+      return new Response(null, {
+        status: 401,
+        headers: {
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+        },
+      });
+    else
+      return new Response(null, {
+        status: 401,
+      });
+  }
+}

package/src/middleware/index.ts

@@ -0,0 +1 @@
+export * from "./handleRequest";

package/src/proxy/index.ts

@@ -0,0 +1,108 @@
+import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
+import { NextResponse } from "next/server";
+
+async function GET(
+  req: Request,
+  target: string
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+
+  const url: string =
+    target + reqUrl.pathname + "?" + reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.get(url, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+  });
+}
+
+async function POST(
+  req: Request
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+  const body = await req.text();
+
+  const url: string =
+    process.env.EDITOR_SERVICE_URL +
+    reqUrl.pathname +
+    "?" +
+    reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    "Content-Type": req.headers.get("Content-Type") || "",
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.post(url, body, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  const responseHeaders = getResponseHeaders(externalResponse);
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+    headers: responseHeaders,
+  });
+}
+
+const getResponseHeaders = (externalResponse: any) => {
+  const responseHeaders = new Headers();
+  responseHeaders.set(
+    "Content-Type",
+    externalResponse.headers["content-type"] || ""
+  );
+  responseHeaders.set(
+    "Set-Cookie",
+    externalResponse.headers["set-cookie"] || ""
+  );
+  return responseHeaders;
+};
+
+function nodeReadableToReadableStream(
+  nodeStream: NodeJS.ReadableStream
+): ReadableStream<Uint8Array> {
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      nodeStream.on("data", (chunk: Buffer) => {
+        controller.enqueue(new Uint8Array(chunk));
+      });
+
+      nodeStream.on("end", () => {
+        controller.close();
+      });
+
+      nodeStream.on("error", (err: Error) => {
+        controller.error(err);
+      });
+    },
+    pull() {},
+    cancel() {},
+  });
+}
+
+export const proxy = {
+  POST,
+  GET,
+};

package/src/useExposeRefreshFunction.ts

@@ -0,0 +1,45 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import uuid from "react-uuid";
+
+declare global {
+  interface Window {
+    requestRefresh?: (newUri?: string) => boolean;
+  }
+}
+
+const useExposeRefreshFunction = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [refreshStart, setRefreshStart] = useState<number>();
+
+  useEffect(() => {
+    // Expose the refresh function to the parent window
+    window.requestRefresh = (newUri?: string) => {
+      console.log("refresh requested", newUri);
+      if (!newUri) {
+        const uri = new URL(window.location.href);
+        uri.searchParams.set("edit_rev", uuid().toString());
+        newUri = uri.toString();
+      }
+
+      router.replace(newUri, { scroll: false });
+      setRefreshStart(performance.now());
+      return true; // Indicate the function executed successfully
+    };
+
+    // Optionally clean up when the component unmounts
+    return () => {
+      delete window.requestRefresh;
+    };
+  }, [router]);
+
+  useEffect(() => {
+    if (refreshStart)
+      console.log("Refresh complete", performance.now() - refreshStart!);
+  }, [searchParams]);
+
+  return null; // This hook doesn't render anything
+};
+
+export default useExposeRefreshFunction;

package/tailwind.config.js

@@ -1,29 +1,17 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-  prefix: "a-",
-  safelist: [
-    "a-bg-orange-400",
-    "a-bg-sky-400",
-    "a-border-orange-400",
-    "a-border-purple-400",
-    "a-border-sky-400",
-    "a-bg-purple-400",
-  ],
-  theme: {
-    extend: {
-      spacing: {
-        "3px": "3px",
-      },
-      zIndex: {
-        1000: "1000",
-      },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
+var config = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
     },
-  },
-  plugins: [],
+    plugins: [],
 };
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "lib": ["dom", "dom.iterable", "es2021"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}