@alpaca-editor/core 1.0.0

package/src/editor/ui/SimpleTable.tsx

@@ -0,0 +1,63 @@
+import { classNames } from "primereact/utils";
+
+export function SimpleTable<T>({
+  items,
+  columns,
+  onRowHover,
+  onRowClick,
+  rowClassName,
+}: {
+  items: T[];
+  columns: {
+    header: React.ReactNode;
+    body: (item: T) => React.ReactNode;
+    className?: string;
+  }[];
+
+  onRowClick?: (data: {
+    item: T;
+    event: React.MouseEvent<HTMLTableRowElement>;
+  }) => void;
+  onRowHover?: (item: T | undefined) => void;
+  rowClassName?: (item: T) => string;
+}) {
+  return (
+    <table className="table-auto min-w-full text-left text-xs font-light text-surface">
+      <thead className="border-b border-neutral-200 font-medium">
+        <tr>
+          {columns.map((col, index) => (
+            <th key={index} className="px-2 py-3">
+              {col.header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, index) => (
+          <tr
+            className={classNames(
+              "border-b border-neutral-200",
+              onRowClick ? "cursor-pointer hover:bg-neutral-100" : "",
+              rowClassName ? rowClassName(item) : ""
+            )}
+            onClick={(ev) => {
+              if (onRowClick) onRowClick({ item, event: ev });
+            }}
+            onMouseOver={() => onRowHover?.(item)}
+            onMouseLeave={() => onRowHover?.(undefined)}
+            key={index}
+          >
+            {columns.map((col, index) => (
+              <td
+                className={classNames("px-2 py-2", col.className)}
+                key={index}
+              >
+                {col.body(item)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/editor/ui/SimpleTabs.tsx

@@ -0,0 +1,55 @@
+import { twMerge } from "tailwind-merge";
+
+export type Tab = {
+  label: string;
+  content: React.ReactNode;
+  id: string;
+  testId?: string;
+};
+
+export function SimpleTabs({
+  tabs,
+  setActiveTab,
+  activeTab,
+  className,
+}: {
+  tabs: Tab[];
+  setActiveTab: (index: number) => void;
+  activeTab: number;
+  className?: string;
+}) {
+  if (activeTab > tabs.length - 1) {
+    activeTab = 0;
+  }
+
+  if (activeTab < 0) {
+    activeTab = 0;
+  }
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <>
+      <div className={twMerge("flex gap-4 pb-3", className)}>
+        {tabs.map((tab, index) => (
+          <button
+            id={tab.id}
+            className={activeTab === index ? "active-tab" : "cursor-pointer"}
+            key={tab.id}
+            data-testid={tab.testId}
+            onClick={() => setActiveTab(index)}
+            style={{
+              fontWeight: index === activeTab ? "bold" : "normal",
+              borderBottom: index === activeTab ? "3px solid black" : "none",
+              marginBottom: index === activeTab ? "0" : "3px",
+              color: index === activeTab ? "black" : "gray",
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {tabs[activeTab]?.content}
+    </>
+  );
+}

package/src/editor/ui/SimpleToolbar.tsx

@@ -0,0 +1,7 @@
+export function SimpleToolbar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex gap-2 p-2 items-center bg-gray-50 rounded-md border-b border-gray-200 text-gray-500 text-sm">
+      {children}
+    </div>
+  );
+}

package/src/editor/ui/Spinner.tsx

@@ -0,0 +1,7 @@
+export function Spinner({
+  size = "4xl",
+}: {
+  size?: "2xl" | "3xl" | "4xl" | "5xl";
+}) {
+  return <i className={`pi pi-cog pi-spin text-${size} text-gray-600`}></i>;
+}

package/src/editor/ui/Splitter.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { flushSync } from "react-dom";
+export type SplitterPanel = {
+  defaultSize: number | "auto";
+  name: string;
+  content: React.ReactNode;
+  collapsible?: boolean;
+};
+
+interface SplitterProps {
+  panels: SplitterPanel[];
+  localStorageKey?: string;
+  expandLabel?: React.ReactNode;
+  growablePanelIndex?: number; // Index of the panel that grows/shrinks
+}
+
+type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
+type PanelSizes = { [name: string]: number | "auto" };
+
+export const Splitter: React.FC<SplitterProps> = ({
+  panels,
+  localStorageKey = "splitter-sizes",
+  expandLabel = "Expand",
+}) => {
+  const totalPanels = panels.length;
+
+  const [panelSizes, setPanelSizes] = useState<PanelSizes | null>(() => {
+    // Load sizes from local storage on initial render
+    const storedSizes = localStorage.getItem(localStorageKey);
+    if (storedSizes) {
+      try {
+        const parsedSizes = JSON.parse(storedSizes);
+        return (parsedSizes as StoredSizes).panels;
+      } catch (error) {
+        return null; // Or fallback to default if parsing fails
+      }
+    }
+    return null; // No stored sizes, initial render will handle defaults
+  });
+
+  const panelRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const splitterRef = useRef<HTMLDivElement | null>(null);
+  const lastPanelCollapsible = panels[panels.length - 1]?.collapsible;
+
+  const [isLastPanelCollapsed, setIsLastPanelCollapsed] = useState(() => {
+    const storedSizes = localStorage.getItem(localStorageKey);
+    if (storedSizes) {
+      const parsedSizes = JSON.parse(storedSizes);
+      return (parsedSizes as StoredSizes).lastCollapsed;
+    }
+    return true;
+  });
+
+  const [isResizing, setIsResizing] = useState(false);
+
+  useEffect(() => {
+    if (!panelSizes && splitterRef.current) {
+      const initialSizes: PanelSizes = {};
+
+      panels.forEach((panel) => {
+        initialSizes[panel.name] = panel.defaultSize;
+      });
+
+      setPanelSizes(initialSizes);
+    }
+  }, [panels]);
+
+  useEffect(() => {
+    if (panelSizes) {
+      const storedSizes: StoredSizes = {
+        panels: panelSizes,
+        lastCollapsed: isLastPanelCollapsed ?? false,
+      };
+      localStorage.setItem(localStorageKey, JSON.stringify(storedSizes));
+    }
+  }, [panelSizes, localStorageKey, isLastPanelCollapsed]);
+
+  const toggleLastPanelCollapse = () => {
+    if (lastPanelCollapsible) {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          setIsLastPanelCollapsed((prev) => !prev);
+        });
+      });
+    }
+  };
+
+  const handleResize = useCallback(
+    (index: number, event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const iframes = splitterRef.current?.querySelectorAll("iframe");
+      iframes?.forEach((iframe) => {
+        iframe.classList.add("pointer-events-none");
+      });
+
+      const startX = event.clientX;
+      // create a copy with the panel name
+      const initialSizes = panelSizes ? { ...panelSizes } : {};
+
+      const panelElement = panelRefs.current[index];
+      const nextPanelElement = panelRefs.current[index + 1];
+
+      if (!panelElement || !nextPanelElement || !splitterRef.current) {
+        return;
+      }
+
+      const panelWidth = panelElement.offsetWidth;
+      const nextPanelWidth = nextPanelElement.offsetWidth;
+
+      setIsResizing(true);
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const delta = moveEvent.clientX - startX;
+        const newPanelWidth = panelWidth + delta;
+        const newNextPanelWidth = nextPanelWidth - delta;
+
+        const minPanelWidth = 50;
+        const minNextPanelWidth = 50;
+
+        if (
+          newNextPanelWidth < minPanelWidth &&
+          index == panels.length - 2 &&
+          lastPanelCollapsible
+        ) {
+          setIsLastPanelCollapsed(true);
+          setPanelSizes(initialSizes);
+        }
+
+        if (
+          newPanelWidth < minPanelWidth ||
+          newNextPanelWidth < minNextPanelWidth
+        ) {
+          return;
+        }
+
+        const updatedSizes: PanelSizes = { ...initialSizes };
+        updatedSizes[panels[index]!.name] = newPanelWidth;
+        updatedSizes[panels[index + 1]!.name] = newNextPanelWidth;
+        setPanelSizes(updatedSizes);
+      };
+
+      const onMouseUp = () => {
+        setTimeout(() => {
+          setIsResizing(false);
+        }, 100);
+        iframes?.forEach((iframe) => {
+          iframe.classList.remove("pointer-events-none");
+        });
+
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp, true);
+      };
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp, true);
+    },
+    [panels, panelSizes]
+  );
+
+  const isLastResizer = (index: number) => index === panels.length - 2;
+
+  const getFlexBasis = (index: number): string => {
+    if (!panelSizes) return "1fr"; // Or a default like "1fr"
+
+    const panelName = panels[index]!.name;
+    const size =
+      index === panels.length - 1 &&
+      isLastPanelCollapsed &&
+      lastPanelCollapsible
+        ? 0
+        : panelSizes[panelName] || panels[index]!.defaultSize;
+
+    if (typeof size === "number") {
+      return `${size}px`;
+    } else if (size === "auto") {
+      return "auto";
+    }
+
+    return "1fr"; //default
+  };
+
+  const getExpandButton = () => {
+    return (
+      <div
+        onClick={!isResizing ? toggleLastPanelCollapse : undefined}
+        className="select-none p-1 bg-gray-200  flex items-center justify-center text-gray-500  hover:bg-blue-700 hover:text-white cursor-pointer"
+        style={{ writingMode: "vertical-rl", userSelect: "none" }}
+      >
+        {expandLabel}
+      </div>
+    );
+  };
+
+  const getSplitter = (index: number) => {
+    if (lastPanelCollapsible && isLastPanelCollapsed && isLastResizer(index)) {
+      return getExpandButton();
+    }
+
+    return (
+      <div
+        className={
+          " bg-gray-200 cursor-ew-resize select-none flex items-center justify-center hover:bg-blue-700  w-[4px] relative z-1000"
+        }
+        onDoubleClick={
+          isLastResizer(index) ? toggleLastPanelCollapse : undefined
+        }
+        onMouseDown={(event) => {
+          handleResize(index, event);
+        }}
+      ></div>
+    );
+  };
+
+  return (
+    <div
+      className="flex w-full h-full overflow-hidden"
+      ref={splitterRef}
+    >
+      {panels.map((panel, index) => (
+        <React.Fragment key={panel.name}>
+          <div
+            ref={(el) => {
+              panelRefs.current[index] = el;
+            }}
+            className="relative"
+            style={{
+              flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(
+                index
+              )}`,
+              minWidth: 0,
+              display:
+                panel.collapsible &&
+                isLastPanelCollapsed &&
+                index === totalPanels - 1
+                  ? "none"
+                  : "block",
+            }}
+          >
+            {panel.content}
+          </div>
+          {index < panels.length - 1 && getSplitter(index)}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

package/src/editor/ui/StackedPanels.tsx

@@ -0,0 +1,134 @@
+import "allotment/dist/style.css";
+import { Allotment, AllotmentHandle } from "allotment";
+
+import { useEffect, useRef, useState } from "react";
+
+import { classNames } from "primereact/utils";
+import { Panel } from "../../config/types";
+
+export function StackedPanels({ panels }: { panels: Panel[] }) {
+  const splitter = useRef<AllotmentHandle>(null);
+
+  const [sizes, setSizes] = useState<number[]>([]);
+  const [preferredSizes, setPreferredSizes] = useState<number[] | undefined>(
+    undefined
+  );
+  const [panelsExpanded, setPanelsExpanded] = useState<boolean[]>([]);
+  const [sizeToSet, setSizeToSet] = useState<number[] | undefined>();
+
+  const panelHeaderSize = 30;
+  const toggle = (panelIndex: number) => {
+    const newSize = panelsExpanded[panelIndex]
+      ? panelHeaderSize
+      : (preferredSizes || sizes)[panelIndex];
+
+    resizePanel(panelIndex, newSize);
+
+    setPanelsExpanded((x) => {
+      const newState = [...x];
+      newState[panelIndex] = !newState[panelIndex];
+      return newState;
+    });
+  };
+
+  useEffect(() => {
+    setPanelsExpanded(panels.map(() => true));
+    setPreferredSizes(() => panels.map((x) => x.initialSize));
+  }, [panels]);
+
+  const resizePanel = (panelIndex: number, newSize: number) => {
+    const totalSize = sizes.reduce((a, b) => a + b, 0);
+    const totalOther = totalSize - sizes[panelIndex];
+    const tmpSizes = [...sizes];
+    tmpSizes[panelIndex] = newSize;
+    const percentages = tmpSizes.map((x) => x / totalOther);
+    percentages[panelIndex] = 0;
+    const remaining = totalSize - newSize;
+    const newSizes = percentages.map((x) => x * remaining);
+    newSizes[panelIndex] = newSize;
+    setSizes(newSizes);
+
+    setSizeToSet(newSizes);
+  };
+
+  useEffect(() => {
+    if (sizeToSet) splitter.current?.resize(sizeToSet);
+  }, [sizeToSet]);
+
+  const getHeader = (panel: any, index: number) => {
+    if (panel.header) return panel.header({ panel, index });
+
+    return (
+      <div
+        className={classNames(
+          "p-1.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer",
+          panelsExpanded[index] ? "border-b" : ""
+        )}
+        onClick={() => toggle(index)}
+      >
+        {panel.icon &&
+          (typeof panel.icon === "string" ? (
+            <i className={classNames(panel.icon, "pi mr-1.5")}></i>
+          ) : (
+            <div className="w-4 h-4 mr-1.5">{panel.icon}</div>
+          ))}
+        <div className="mr-auto">{panel.title}</div>
+        <i
+          className={classNames(
+            panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down",
+            "pi  text-sm"
+          )}
+        ></i>
+      </div>
+    );
+  };
+
+  const initalSizes = panels.map((x) => x.initialSize);
+
+  return (
+    <Allotment
+      vertical={true}
+      snap={true}
+      ref={splitter}
+      defaultSizes={initalSizes}
+      onChange={(s) => {
+        if (sizes.join(",") != s.join(",")) setSizes(s);
+
+        const newPreferred = [...(preferredSizes || s)];
+        s.forEach((x, i) => {
+          if (x > panelHeaderSize) newPreferred[i] = x;
+        });
+
+        setPreferredSizes(newPreferred);
+      }}
+    >
+      {panels.map((panel, index) => (
+        <Allotment.Pane
+          key={index}
+          //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
+          maxSize={
+            panelsExpanded.length <= index || panelsExpanded[index]
+              ? 10000
+              : panelHeaderSize
+          }
+        >
+          <div className="flex flex-col h-full">
+            {getHeader(panel, index)}
+            {panelsExpanded[index] && (
+              <div className="overflow-hidden relative flex-1">
+                <div
+                  className={classNames(
+                    "inset-0 absolute",
+                    panel.noOverflow ? "" : "overflow-y-auto"
+                  )}
+                >
+                  {panel.content}
+                </div>
+              </div>
+            )}
+          </div>
+        </Allotment.Pane>
+      ))}
+    </Allotment>
+  );
+}

package/src/editor/ui/Toolbar.tsx

@@ -0,0 +1,7 @@
+export function Toolbar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-gray-50 flex gap-1 p-0.5 border-b items-center">
+      {children}
+    </div>
+  );
+}

package/src/editor/utils/id-helper.ts

@@ -0,0 +1,3 @@
+export function cleanId(id?: string) {
+  if (id) return id.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
+}

package/src/editor/utils/insertOptions.ts

@@ -0,0 +1,69 @@
+import { InsertOption } from "../../types";
+import { EditContextType } from "../client/editContext";
+import { getComponentById } from "../componentTreeHelper";
+import { Page, Placeholder } from "../pageModel";
+
+export function getInsertOptionsForCurrentSelection(
+  editContext: EditContextType
+): InsertOption[] {
+  const page = editContext.page;
+
+  if (!page) return [];
+
+  const insertingPlaceholderKeys = [editContext.selectedForInsertion]
+    .map((x) => getComponentById(x, editContext.page!))
+    .filter((x) => x)
+    .reduce(
+      (a, x) => a.concat(x!.placeholders?.map((y: Placeholder) => y.key) || []),
+      [] as string[]
+    );
+
+  const selectedPlaceholderKeys = [
+    //...selection.filter((x) => x.indexOf("_") > 0),
+    ...insertingPlaceholderKeys,
+  ];
+
+  function collectInsertOptions(
+    page: Page,
+    placeholderKeys: string[]
+  ): InsertOption[] {
+    const insertOptionsMap: Map<string, InsertOption> = new Map();
+
+    function traverse(placeholders: Placeholder[]) {
+      for (const placeholder of placeholders) {
+        if (
+          placeholder &&
+          (placeholderKeys.length === 0 ||
+            placeholderKeys.includes(placeholder.key))
+        ) {
+          for (const option of placeholder.insertOptions) {
+            insertOptionsMap.set(option.typeId, option);
+          }
+        }
+        for (const component of placeholder.components) {
+          if (component.placeholders) traverse(component.placeholders);
+        }
+      }
+    }
+
+    traverse(page.rootComponent.placeholders);
+
+    // Convert the map back into an array of objects
+    const insertOptionsArray: InsertOption[] = Array.from(
+      insertOptionsMap.values()
+    );
+
+    insertOptionsArray.sort((a, b) => a.name.localeCompare(b.name));
+
+    return insertOptionsArray;
+  }
+
+  const currentInsertOptions = page
+    ? collectInsertOptions(page, selectedPlaceholderKeys)
+    : [];
+
+
+ // console.log(currentInsertOptions, selectedPlaceholderKeys, page);  
+
+  return currentInsertOptions;
+}

package/src/editor/utils/itemutils.ts

@@ -0,0 +1,29 @@
+import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
+import { Language } from "../pageModel";
+import { EditContextType } from "../client/editContext";
+
+export const confirmCreateVersion = (
+  editContext: EditContextType,
+  language: Language
+) => {
+    editContext.confirm({
+        message:
+          "This page has no version in language " +
+          language.name +
+          " (" +
+          language.languageCode +
+          "). Do you want to create a new version?",
+        header: "Create Language Version?",
+        icon: "pi pi-exclamation-triangle",
+    acceptLabel: "Yes, create version",
+    rejectLabel: "No",
+    accept: async () => {
+      await editContext?.executeCommand({
+        command: getCreateAndSwitchToNewVersionCommand({
+          language: language.languageCode,
+        }),
+      });
+      },
+    },
+  );
+};

package/src/editor/utils/useMemoDebug.ts

@@ -0,0 +1,28 @@
+import { useMemo, useRef } from "react";
+
+// Generic type for the return value of the memoized factory
+export function useMemoWithDebug<T>(factory: () => T, dependencies: any[]): T {
+  const previousDependenciesRef = useRef<any[]>([]);
+
+  const hasChanged = dependencies.some((dep, index) => {
+    return dep !== previousDependenciesRef.current[index];
+  });
+
+  if (hasChanged) {
+    dependencies.forEach((dep, index) => {
+      if (dep !== previousDependenciesRef.current[index]) {
+        console.log(
+          `Dependency at index ${index} changed:`,
+          "\nPrevious:",
+          previousDependenciesRef.current[index],
+          "\nCurrent:",
+          dep
+        );
+      }
+    });
+  }
+
+  previousDependenciesRef.current = dependencies;
+
+  return useMemo(factory, dependencies);
+}