@alpaca-editor/core 1.0.0

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,146 @@
+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="h-full relative tour-component-palette">
+      <div className="overflow-y-auto absolute inset-0">
+        <div className="p-4">
+          <InputText
+            ref={filterRef}
+            className="w-full text-sm"
+            placeholder="Filter components"
+            onChange={(e) => setFilter(e.target.value)}
+          />
+        </div>
+        {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="text-xs font-bold mt-2 mb-3 flex items-center gap-2">
+                  <ArrowDownIcon /> {group}
+                </div>
+                <div className="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))]">
+                  {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(
+                          "p-2 border border-gray-200 flex items-center flex-col gap-2 text-center text-xs relative rounded break-all ",
+                          isDraggable ? "cursor-grab" : "",
+                          editContext.selectedForInsertion === option.typeId
+                            ? "border-sky-500"
+                            : ""
+                        )}
+                        key={option.typeId}
+                        data-testid="insert-component-option"
+                      >
+                        {option.svg && (
+                          <div
+                            className="w-8 h-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 text-red-500 absolute top-0 right-0"
+                            title={option.message}
+                          />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}