@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ui/SimpleTable.tsx

@@ -1,60 +0,0 @@
-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="text-surface min-w-full table-auto text-left text-xs font-light">
-      <thead className="border-b border-neutral-200 font-medium">
-        <tr>
-          {columns.map((col, index) => (
-            <th key={index} className="px-1.5 py-1.5">
-              {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("p-2", col.className)} key={index}>
-                {col.body(item)}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

package/src/editor/ui/SimpleTabs.tsx

@@ -1,55 +0,0 @@
-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-1 md: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

@@ -1,7 +0,0 @@
-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

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

package/src/editor/ui/Splitter.tsx

@@ -1,314 +0,0 @@
-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;
-  hidden?: boolean;
-};
-
-interface SplitterProps {
-  panels: SplitterPanel[];
-  localStorageKey?: string;
-  expandLabel?: React.ReactNode;
-  growablePanelIndex?: number; // Index of the panel that grows/shrinks
-  direction?: "horizontal" | "vertical"; // New prop for direction
-}
-
-type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
-type PanelSizes = { [name: string]: number | "auto" };
-
-export const Splitter: React.FC<SplitterProps> = ({
-  panels,
-  localStorageKey = "splitter-sizes",
-  expandLabel = "Expand",
-  direction = "horizontal", // Default to horizontal for backward compatibility
-}) => {
-  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 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 = () => {
-    const isHorizontal = direction === "horizontal";
-
-    return (
-      <div
-        onClick={!isResizing ? toggleLastPanelCollapse : undefined}
-        className="flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white"
-        style={{
-          writingMode: isHorizontal ? "vertical-rl" : "horizontal-tb",
-          userSelect: "none",
-        }}
-      >
-        {expandLabel}
-      </div>
-    );
-  };
-
-  const getSplitter = (index: number) => {
-    const isHorizontal = direction === "horizontal";
-
-    const handleDragStart = (clientX: number, clientY: number) => {
-      const isHorizontal = direction === "horizontal";
-      const startCoord = isHorizontal ? clientX : clientY;
-      const initialSizes = panelSizes ? { ...panelSizes } : {};
-
-      const panelElement = panelRefs.current[index];
-      const nextPanelElement = panelRefs.current[index + 1];
-
-      if (!panelElement || !nextPanelElement) {
-        return;
-      }
-
-      const panelSize = isHorizontal
-        ? panelElement.offsetWidth
-        : panelElement.offsetHeight;
-      const nextPanelSize = isHorizontal
-        ? nextPanelElement.offsetWidth
-        : nextPanelElement.offsetHeight;
-
-      setIsResizing(true);
-
-      let isDragging = true;
-
-      const handleMove = (moveClientX: number, moveClientY: number) => {
-        if (!isDragging) return;
-
-        const currentCoord = isHorizontal ? moveClientX : moveClientY;
-        const delta = currentCoord - startCoord;
-        const newPanelSize = panelSize + delta;
-        const newNextPanelSize = nextPanelSize - delta;
-
-        const minPanelSize = 50;
-
-        // Check if the next panel (which could be the last panel) should be collapsed
-        const isNextPanelLast = index + 1 === panels.length - 1;
-        const isNextPanelCollapsible = panels[index + 1]?.collapsible;
-
-        if (
-          newNextPanelSize < minPanelSize &&
-          isNextPanelLast &&
-          isNextPanelCollapsible
-        ) {
-          // Auto-collapse the last panel when it reaches minimum size
-          setIsLastPanelCollapsed(true);
-          return;
-        }
-
-        if (newPanelSize < minPanelSize || newNextPanelSize < minPanelSize) {
-          return;
-        }
-
-        const updatedSizes: PanelSizes = { ...initialSizes };
-        updatedSizes[panels[index]!.name] = newPanelSize;
-        updatedSizes[panels[index + 1]!.name] = newNextPanelSize;
-        setPanelSizes(updatedSizes);
-      };
-
-      const handleEnd = () => {
-        isDragging = false;
-        setIsResizing(false);
-
-        // Remove all event listeners
-        window.removeEventListener("mousemove", onMouseMove);
-        window.removeEventListener("mouseup", onMouseUp);
-        window.removeEventListener("touchmove", onTouchMove);
-        window.removeEventListener("touchend", onTouchEnd);
-      };
-
-      const onMouseMove = (moveEvent: MouseEvent) => {
-        handleMove(moveEvent.clientX, moveEvent.clientY);
-      };
-
-      const onMouseUp = () => {
-        handleEnd();
-      };
-
-      const onTouchMove = (moveEvent: TouchEvent) => {
-        if (moveEvent.touches.length === 1) {
-          const touch = moveEvent.touches[0];
-          if (touch) {
-            handleMove(touch.clientX, touch.clientY);
-          }
-        }
-      };
-
-      const onTouchEnd = () => {
-        handleEnd();
-      };
-
-      // Add both mouse and touch event listeners
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener("mouseup", onMouseUp);
-      window.addEventListener("touchmove", onTouchMove, { passive: false });
-      window.addEventListener("touchend", onTouchEnd);
-    };
-
-    if (lastPanelCollapsible && isLastPanelCollapsed && isLastResizer(index)) {
-      return getExpandButton();
-    }
-
-    return (
-      <div
-        className={`relative flex ${
-          isHorizontal
-            ? "h-full w-[12px] cursor-ew-resize md:w-[4px]"
-            : "h-[12px] w-full cursor-ns-resize md:h-[12px]"
-        } shrink-0 items-center justify-center bg-gray-300 select-none hover:bg-gray-400`}
-        style={{
-          touchAction: "none",
-          minHeight: isHorizontal ? undefined : "12px",
-          minWidth: isHorizontal ? "4px" : undefined,
-          boxSizing: "border-box",
-          userSelect: "none",
-          zIndex: 9999, // Ensure we're above any nested splitters
-        }}
-        onDoubleClick={
-          isLastResizer(index) ? toggleLastPanelCollapse : undefined
-        }
-        onMouseDown={(event) => {
-          handleDragStart(event.clientX, event.clientY);
-        }}
-        onTouchStart={(event) => {
-          if (event.touches.length === 1) {
-            const touch = event.touches[0];
-            if (touch) {
-              handleDragStart(touch.clientX, touch.clientY);
-            }
-          }
-        }}
-      >
-        {/* Visual indicator line for mobile splitters */}
-        <div
-          className={`${
-            isHorizontal
-              ? "h-8 w-[2px] bg-gray-500 md:hidden"
-              : "h-[2px] w-8 bg-gray-500 md:hidden"
-          }`}
-        />
-      </div>
-    );
-  };
-
-  return (
-    <div
-      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-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: direction === "horizontal" ? 0 : undefined,
-              minHeight: direction === "vertical" ? 0 : undefined,
-              display:
-                (panel.collapsible &&
-                  isLastPanelCollapsed &&
-                  index === totalPanels - 1) ||
-                panel.hidden
-                  ? "none"
-                  : "block",
-            }}
-          >
-            {panel.content}
-          </div>
-          {index < panels.length - 1 &&
-            !panels[index]?.hidden &&
-            !panels[index + 1]?.hidden &&
-            getSplitter(index)}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};

package/src/editor/ui/StackedPanels.tsx

@@ -1,134 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/editor/utils/insertOptions.ts

@@ -1,69 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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,
-        }),
-      });
-      },
-    },
-  );
-};