@alpaca-editor/core 1.0.3942 → 1.0.3944

package/src/editor/services/translationService.ts

@@ -0,0 +1,21 @@
+import { TranslationStatus } from "../../config/types";
+import { LanguagesAndVersions } from "../../types";
+import { get, post } from "./serviceHelper";
+
+export async function requestTranslation({itemId, targetLanguage, sourceLanguage, sessionId, provider, metadata}: {itemId: string, targetLanguage: string, sourceLanguage: string, sessionId: string, provider: string, metadata: string} ) {
+  return await post<LanguagesAndVersions>(
+    "/alpaca/editor/translation/requestTranslation",
+    { itemId, targetLanguage, sourceLanguage, sessionId, provider, metadata }
+  );
+}
+
+
+export async function getTranslationStatus(itemId: string) {
+  return await get<TranslationStatus[]>(
+    `/alpaca/editor/translation/getTranslations?itemId=${itemId}`
+  );
+}
+
+export async function getTranslationProviders() {
+  return await get<string[]>(`/alpaca/editor/translation/providers`);
+}

package/src/editor/services-server/api.ts

@@ -0,0 +1,150 @@
+import "server-only";
+
+import { headers } from "next/headers";
+import axios, { AxiosRequestHeaders, AxiosResponse } from "axios";
+
+export type FetchOptions = {
+  tags?: string[];
+  revalidate?: number | false;
+};
+
+export type FetchResult = {
+  status: number;
+  error?: string;
+  data?: any;
+  headers: Headers;
+};
+
+export type ApiConfig = {
+  apiKey?: string;
+  headers?: Headers;
+};
+
+export async function apiGet(
+  route: string,
+  config?: ApiConfig
+): Promise<FetchResult> {
+  const url = process.env.LAYOUT_SERVICE_URL + route;
+
+  const requestHeaders: any = getRequestHeaders(config);
+
+  try {
+    const response: AxiosResponse = await axios.get(url, {
+      headers: requestHeaders,
+    });
+
+    return {
+      data: response.data,
+      status: response.status,
+      headers: convertAxiosHeaders(response.headers),
+    };
+  } catch (error: any) {
+    if (error.response) {
+      return {
+        status: error.response.status,
+        error: error.response.statusText,
+        headers: convertAxiosHeaders(error.response.headers),
+      };
+    } else {
+      return {
+        status: 500,
+        error: error.message,
+        headers: convertAxiosHeaders(error.response.headers),
+      };
+    }
+  }
+}
+
+function getRequestHeaders(config?: ApiConfig): AxiosRequestHeaders {
+  const requestHeaders: AxiosRequestHeaders = {} as AxiosRequestHeaders;
+
+  // Convert Headers (node-fetch) to AxiosRequestHeaders (plain object)
+  if (config?.headers) {
+    config.headers.forEach((value, key) => {
+      requestHeaders[key] = value;
+    });
+  }
+
+  // Set default headers
+  requestHeaders["Content-Type"] = "application/json";
+  requestHeaders["x-api-key"] = config?.apiKey ?? getApiKey();
+
+  return requestHeaders;
+}
+
+export async function apiPostObject(
+  route: string,
+  object: any,
+  config?: ApiConfig
+): Promise<FetchResult> {
+  const url = process.env.LAYOUT_SERVICE_URL + route;
+
+  const requestHeaders: any = getRequestHeaders(config);
+
+  const body = JSON.stringify(object);
+
+  try {
+    const response: AxiosResponse = await axios.post(url, body, {
+      headers: requestHeaders,
+    });
+
+    return {
+      data: response.data,
+      status: response.status,
+      headers: convertAxiosHeaders(response.headers),
+    };
+  } catch (error: any) {
+    if (error.errors) {
+      let message = "";
+      error.errors.forEach((error: any) => {
+        message += error.message + " ";
+      });
+
+      return {
+        status: 500,
+        error: message,
+        headers: new Headers(),
+      };
+    }
+    if (error.response) {
+      return {
+        status: error.response.status,
+        error: error.response.statusText,
+        headers: convertAxiosHeaders(error.response.headers),
+      };
+    } else {
+      return {
+        status: 500,
+        error: error.message,
+        headers: new Headers(),
+      };
+    }
+  }
+}
+
+export function getApiKey() {
+  const apiKey = process.env.ALPACA_HEADLESS_API_KEY || process.env.API_KEY;
+  if (!apiKey)
+    console.log(
+      "ERROR: Could not find API key environment variable: ALPACA_HEADLESS_API_KEY"
+    );
+  return apiKey;
+}
+
+function convertAxiosHeaders(headers: any): Headers {
+  const convertedHeaders = new Headers();
+  for (const key in headers) {
+    if (headers.hasOwnProperty(key)) {
+      convertedHeaders.set(key.toLowerCase(), headers[key]);
+    }
+  }
+  return convertedHeaders;
+}
+
+export async function getApiHeaders() {
+  const requestHeaders = await headers();
+  const apiHeaders = new Headers();
+  apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+  apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+  return apiHeaders;
+}

package/src/editor/services-server/graphQL.ts

@@ -0,0 +1,106 @@
+import { ApiConfig, apiGet, apiPostObject } from "../services-server/api";
+
+export type ExecuteGraphQLParams = {
+  query: string;
+  tags?: string[];
+  host?: string;
+  path?: string;
+  language?: string;
+  mode?: string;
+  itemId?: string;
+  version?: number;
+  revalidate?: number;
+  siteName?: string;
+  sessionId?: string;
+  schema?: string;
+  apiConfig?: ApiConfig;
+};
+
+export async function executeGraphQLQuery({
+  query,
+  host,
+  path,
+  language,
+  mode,
+  itemId,
+  version,
+  // tags,
+  // revalidate,
+  siteName,
+  schema,
+  sessionId,
+  apiConfig,
+}: ExecuteGraphQLParams) {
+  let url = "/alpaca/headless/graphql";
+
+  if (sessionId) url += "?sessionId=" + sessionId;
+
+  //console.log(`GraphQL query:`, query);
+
+  const request: {
+    Host?: string;
+    Path?: string;
+    ItemId?: string;
+    Language?: string;
+    Version?: number;
+    Mode?: string;
+    Query: string;
+    SiteName?: string;
+    Schema?: string;
+  } = {
+    Query: query,
+    Host: host,
+    Path: path,
+    ItemId: itemId,
+    Language: language,
+    Version: version,
+    Mode: mode,
+    SiteName: siteName,
+    Schema: schema,
+  };
+
+  //TODO: cache:
+
+  const response = await apiPostObject(url, request, apiConfig);
+
+  if (response.status !== 200) {
+    return { status: response.status, errors: getErrors(response) };
+  }
+
+  if (response.data?.errors) {
+    return {
+      status: 400,
+      errors: response.data?.errors,
+    };
+  }
+
+  return {
+    data: response.data?.data,
+    status: response.status,
+    errors: getErrors(response),
+  };
+}
+
+function getErrors(response: any) {
+  if (response.data?.errors) return response.data?.errors;
+  if (response.error) return [{ message: response.error }];
+  return undefined;
+}
+
+export async function getGraphQLSchema({
+  id,
+  apiConfig,
+}: {
+  id: string;
+  apiConfig: ApiConfig;
+}) {
+  let url = "/alpaca/headless/graphql/schema?id=" + id;
+
+  const response = await apiGet(url, apiConfig);
+
+  if (response.status !== 200) {
+    return { status: response.status, error: response.error };
+  }
+
+  return response.data;
+}

package/src/editor/sidebar/ComponentPalette.tsx

@@ -0,0 +1,161 @@
+import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
+import { ArrowDownIcon } from "../ui/Icons";
+
+import { getAbsoluteIconUrl } from "../utils";
+import { classNames } from "primereact/utils";
+import { InsertOption } from "../../types";
+
+import { useEditContext } from "../client/editContext";
+import { InputText } from "primereact/inputtext";
+import { useState, useRef } from "react";
+
+export function ComponentPalette({}: {}) {
+  const editContext = useEditContext()!;
+  const [filter, setFilter] = useState("");
+  const filterRef = useRef<HTMLInputElement>(null);
+
+  const insertOptions = getInsertOptionsForCurrentSelection(editContext);
+
+  const insertOptionsByGroup = insertOptions.reduce(
+    (acc, value) => {
+      const group = value.group || "Other";
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(value);
+      return acc;
+    },
+    {} as { [key: string]: InsertOption[] },
+  );
+
+  return (
+    <div className="tour-component-palette relative flex h-full flex-col">
+      <div className="p-4">
+        <div className="relative flex items-center">
+          <input
+            ref={filterRef}
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
+            placeholder="Filter..."
+          />
+          {!filter && (
+            <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
+          )}
+          {filter && (
+            <i
+              className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
+              onClick={() => setFilter("")}
+            />
+          )}
+        </div>
+      </div>
+      <div className="relative flex-1">
+        <div className="absolute inset-0 overflow-y-auto">
+          {Object.keys(insertOptionsByGroup)
+            .sort()
+            .map((group, index) => {
+              const options = insertOptionsByGroup[group]!.filter(
+                (x) => !x.isHidden,
+              ).filter(
+                (x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1,
+              );
+              if (options.length === 0) return;
+              return (
+                <div
+                  className={classNames(
+                    "m-4",
+                    index > 0 ? "border-t border-gray-200" : "",
+                  )}
+                  key={group}
+                >
+                  <div className="mt-2 mb-3 flex items-center gap-2 text-xs font-bold">
+                    <ArrowDownIcon /> {group}
+                  </div>
+                  <div className="grid grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))] gap-4">
+                    {options.map((option) => {
+                      function handleDragStart(
+                        event: React.DragEvent<HTMLDivElement>,
+                      ): void {
+                        editContext?.dragStart({
+                          type: "template",
+                          typeId: option.typeId,
+                          name: option.name,
+                        });
+                        event.stopPropagation();
+                      }
+
+                      function handleDragEnd(): void {
+                        editContext!.dragEnd();
+                        editContext!.setSelectedForInsertion("");
+                      }
+
+                      const isDraggable = !option.isInvalid;
+
+                      return (
+                        <div
+                          id={"insert-component-" + option.typeId}
+                          onClick={() => {
+                            editContext!.setSelectedForInsertion(option.typeId);
+                          }}
+                          draggable={isDraggable}
+                          onDragStart={handleDragStart}
+                          onDragEnd={handleDragEnd}
+                          className={classNames(
+                            "relative flex flex-col items-center gap-2 rounded border border-gray-200 p-2 text-center text-xs break-all",
+                            isDraggable ? "cursor-grab" : "",
+                            editContext.selectedForInsertion === option.typeId
+                              ? "border-sky-500"
+                              : "",
+                          )}
+                          key={option.typeId}
+                          data-testid="insert-component-option"
+                        >
+                          {option.svg && (
+                            <div
+                              className="h-8 w-8"
+                              dangerouslySetInnerHTML={{ __html: option.svg }}
+                            ></div>
+                          )}
+                          {!option.svg && (
+                            <img
+                              src={getAbsoluteIconUrl(option.icon)}
+                              width="32"
+                              height="32"
+                            ></img>
+                          )}
+
+                          <div className="text-xs">
+                            {option.name
+                              .split(new RegExp(`(${filter})`, "i"))
+                              .map((part: string, i: number) =>
+                                part.toLowerCase() === filter.toLowerCase() &&
+                                part ? (
+                                  <u className="font-bold" key={i}>
+                                    {part}
+                                  </u>
+                                ) : (
+                                  part && <span key={i}>{part}</span>
+                                ),
+                              )}
+                          </div>
+
+                          {option.isInvalid && (
+                            <i
+                              className="pi pi-exclamation-triangle absolute top-0 right-0 text-red-500"
+                              title={option.message}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+}