@alpaca-editor/core 1.0.0

package/src/editor/sidebar/Performance.tsx

@@ -0,0 +1,53 @@
+import { useEditContext } from "../client/editContext";
+import { SimpleTable } from "../ui/SimpleTable";
+
+export function Performance() {
+  const context = useEditContext();
+  if (!context?.timings) return null;
+
+  const values = Object.keys(context.timings).map((key) => ({
+    key,
+    value: Math.round(context.timings[key]!),
+  }));
+
+  const columns = [
+    {
+      body: (entry: any) => {
+        if (
+          /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.test(
+            entry.key
+          )
+        ) {
+          const ids = entry.key
+            .split("_")
+            .filter((part: string) =>
+              /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/.test(
+                part
+              )
+            );
+          return (
+            <div
+              className="cursor-pointer"
+              onClick={() => context.select(ids)}
+            >
+              {entry.key}
+            </div>
+          );
+        }
+
+        return entry.key;
+      },
+      header: "Metric",
+    },
+    {
+      body: (entry: any) => entry.value,
+      header: "Time (ms)",
+    },
+  ];
+
+  return (
+    <div className="overflow-x-auto">
+      <SimpleTable items={values} columns={columns} />
+    </div>
+  );
+}

package/src/editor/sidebar/Sessions.tsx

@@ -0,0 +1,35 @@
+import { useEditContext } from "../client/editContext";
+import { EditSession } from "../../types";
+import { SimpleTable } from "../ui/SimpleTable";
+
+export function Sessions() {
+  var editContext = useEditContext();
+  if (!editContext) return null;
+  const sessions = editContext?.activeSessions;
+  const columns = [
+    { body: (session: EditSession) => session.user?.name, header: "User" },
+    {
+      body: (session: EditSession) => (
+        <a
+          href="#"
+          onClick={() => {
+            if (session.item) editContext?.loadItem(session.item);
+          }}
+        >
+          {session.item?.name}
+        </a>
+      ),
+      header: "Page",
+    },
+    {
+      body: (session: EditSession) => session.item?.language,
+      header: "Language",
+    },
+    {
+      body: (session: EditSession) => session.item?.version,
+      header: "Version",
+    },
+  ];
+
+  return <SimpleTable items={sessions} columns={columns} />;
+}

package/src/editor/sidebar/Sidebar.tsx

@@ -0,0 +1,20 @@
+import { useEditContext } from "../client/editContext";
+
+import { SidebarView } from "./SidebarView";
+
+export function Sidebar() {
+  var editContext = useEditContext();
+  if (!editContext) return null;
+
+  const view = editContext.view;
+
+  if (!view || !view.leftSidebar) return null;
+
+  return (
+    <SidebarView
+      sidebar={view.leftSidebar}
+      editContext={editContext}
+      active={true}
+    />
+  );
+}

package/src/editor/sidebar/SidebarView.tsx

@@ -0,0 +1,150 @@
+import "allotment/dist/style.css";
+import { Allotment, AllotmentHandle } from "allotment";
+
+import { useEffect, useRef, useState } from "react";
+import { EditContextType } from "../client/editContext";
+import { classNames } from "primereact/utils";
+import { Sidebar } from "../../config/types";
+
+export function SidebarView({
+  sidebar,
+  editContext,
+  active,
+}: {
+  sidebar: Sidebar;
+  editContext: EditContextType;
+  active: boolean;
+}) {
+  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 = 40;
+  const toggle = (panelIndex: number) => {
+    const newSize = panelsExpanded[panelIndex]
+      ? panelHeaderSize
+      : (preferredSizes || sizes)[panelIndex];
+
+    if (newSize) resizePanel(panelIndex, newSize);
+
+    setPanelsExpanded((x) => {
+      const newState = [...x];
+      newState[panelIndex] = !newState[panelIndex];
+      return newState;
+    });
+  };
+
+  const resolvedPanels = sidebar.panels.map((x) => {
+    if (typeof x === "function") {
+      return x(editContext!);
+    }
+    return x;
+  });
+
+  useEffect(() => {
+    setPanelsExpanded(sidebar.panels.map(() => true));
+    setPreferredSizes(() => resolvedPanels.map((x) => x.initialSize));
+  }, [sidebar]);
+
+  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-2.5 bg-gray-50 uppercase text-gray-500 text-xs flex justify items-center cursor-pointer relative",
+          panelsExpanded[index] ? "border-b border-gray-200" : ""
+        )}
+        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-2">{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 = resolvedPanels.map((x) => x.initialSize);
+
+  return (
+    <Allotment
+      vertical={true}
+      snap={true}
+      className={!active ? "hidden h-full" : "h-full"}
+      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);
+      }}
+    >
+      {resolvedPanels.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/sidebar/Translations.tsx

@@ -0,0 +1,276 @@
+import { Button } from "primereact/button";
+import { useEditContext } from "../client/editContext";
+import { Language } from "../pageModel";
+import { SimpleTable } from "../ui/SimpleTable";
+import {
+  getTranslationStatus,
+  requestTranslation,
+  getTranslationProviders,
+} from "../services/translationService";
+import { useEffect, useState } from "react";
+import { TranslationStatus } from "../../config/types";
+
+import { ProgressBar } from "primereact/progressbar";
+import { Checkbox } from "primereact/checkbox";
+import { confirmCreateVersion } from "../utils/itemutils";
+import { Dropdown } from "primereact/dropdown";
+
+export function Translation() {
+  const editContext = useEditContext();
+  const [translationStatus, setTranslationStatus] = useState<
+    TranslationStatus[] | null
+  >(null);
+  const [translationProviders, setTranslationProviders] = useState<
+    string[] | null
+  >(null);
+
+  const [translationProvider, setTranslationProvider] = useState<string | null>(
+    localStorage.getItem("editor.translationProvider") || null
+  );
+
+  if (!editContext) return null;
+
+  useEffect(() => {
+    if (translationProvider) {
+      localStorage.setItem("editor.translationProvider", translationProvider);
+    }
+  }, [translationProvider]);
+
+  const languages = editContext?.itemLanguages || [];
+
+  type TranslationProgress = {
+    progress: number;
+    message: string;
+  };
+
+  const [translationProgress, setTranslationProgress] = useState<
+    Map<string, TranslationProgress>
+  >(new Map());
+
+  const item = editContext.contentEditorItem;
+  const [checkedLanguages, setCheckedLanguages] = useState<string[]>([]);
+
+  const selectLanguage = (language: Language) => {
+    if (!item) return;
+    if (!language.versions) {
+      confirmCreateVersion(editContext, language);
+      return;
+    }
+
+    editContext.loadItem({
+      ...item.descriptor,
+      language: language.languageCode,
+      version: 0,
+    });
+  };
+
+  const languageName = (language: Language) => {
+    return (
+      <div
+        key={language.languageCode}
+        className=" flex gap-2"
+        onClick={() => selectLanguage(language)}
+      >
+        <img src={language.icon} className="h-5" /> {language.name}
+      </div>
+    );
+  };
+
+  const translate = async (languageCode: string) => {
+    if (!item) return;
+
+    const status = translationStatus?.find(
+      (x) => x.targetLanguage === languageCode
+    );
+
+    if (!status) return;
+
+    if (status.sourceLanguage === languageCode) return;
+
+    setTranslationProgress((p) => {
+      p.set(languageCode, { progress: 0, message: "" });
+      return new Map(p);
+    });
+    await requestTranslation({
+      itemId: item.descriptor.id,
+      targetLanguage: languageCode,
+      sourceLanguage: status.sourceLanguage,
+      sessionId: editContext.sessionId,
+      provider: translationProvider || "",
+    });
+    loadTranslationStatus();
+  };
+
+  const loadTranslationStatus = async () => {
+    if (!item) return;
+    const status = await getTranslationStatus(item.descriptor.id);
+    setTranslationStatus(status.data || []);
+  };
+
+  const loadTranslationProviders = async () => {
+    const providers = await getTranslationProviders();
+    setTranslationProviders(providers.data || []);
+    if (!translationProvider) {
+      setTranslationProvider(providers.data?.[0] || null);
+    }
+  };
+
+  const createVersions = async () => {
+    if (!item) return;
+    checkedLanguages.forEach((language) => {
+      editContext.operations.createVersion({
+        id: item.descriptor.id,
+        language: language,
+        version: 0,
+      });
+    });
+  };
+
+  useEffect(() => {
+    loadTranslationStatus();
+    setTranslationProgress(new Map());
+  }, [editContext.currentItemDescriptor?.id]);
+
+  useEffect(() => {
+    loadTranslationProviders();
+  }, []);
+
+  useEffect(() => {
+    const removeSocketMessageListener = editContext.addSocketMessageListener(
+      (message) => {
+        if (
+          message.type === "translation-started" ||
+          message.type === "translation-finished" ||
+          message.type === "translation-error"
+        ) {
+          if (message.payload.itemId === item?.descriptor.id) {
+            loadTranslationStatus();
+          }
+        }
+
+        if (message.type === "translation-progress") {
+          if (message.payload.itemId === item?.descriptor.id) {
+            setTranslationProgress((p) => {
+              p.set(message.payload.language, message.payload);
+              return new Map(p);
+            });
+          }
+        }
+      }
+    );
+    return removeSocketMessageListener;
+  }, [editContext, setTranslationProgress]);
+
+  const languageData = languages.map((x) => ({
+    ...x,
+    translationStatus: translationStatus?.find(
+      (y) => y.targetLanguage === x.languageCode
+    ),
+    translationProgress: translationProgress.get(x.languageCode),
+  }));
+
+  languageData.sort((a, b) => {
+    // Sort languages with 0 versions to bottom
+    if (a.versions === 0 && b.versions > 0) return 1;
+    if (b.versions === 0 && a.versions > 0) return -1;
+
+    // Sort by name for languages that both have versions or both don't
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <div className="flex p-3 gap-2 justify-end items-center w-full bg-gray-50 flex-wrap">
+        <Dropdown
+          options={translationProviders || []}
+          onChange={(e) => setTranslationProvider(e.value)}
+          value={translationProvider}
+        />
+        <Button
+          size="small"
+          icon="pi pi-sparkles"
+          onClick={() => {
+            checkedLanguages.forEach((x) => translate(x));
+            setCheckedLanguages([]);
+          }}
+          disabled={checkedLanguages.length === 0}
+          label="Translate"
+        />
+        <Button
+          size="small"
+          icon="pi pi-plus"
+          onClick={() => {
+            createVersions();
+            setCheckedLanguages([]);
+          }}
+          disabled={checkedLanguages.length === 0}
+          label="Create Versions"
+        />
+      </div>
+      <div className="flex-1 relative">
+        <div className="overflow-y-auto absolute inset-0">
+          <SimpleTable
+            columns={[
+              {
+                header: "",
+                body: (x) => (
+                  <div onClick={(e) => e.stopPropagation()}>
+                    <Checkbox
+                      checked={checkedLanguages.includes(x.languageCode)}
+                      onChange={(ev) => {
+                        setCheckedLanguages(
+                          ev.checked
+                            ? [...checkedLanguages, x.languageCode]
+                            : checkedLanguages.filter(
+                                (y) => y !== x.languageCode
+                              )
+                        );
+                      }}
+                    />
+                  </div>
+                ),
+              },
+              { header: "Language", body: languageName },
+              { header: "Ver.", body: (x) => x.versions.toString() },
+              {
+                header: "Src",
+                body: (x) => x.translationStatus?.sourceLanguage,
+              },
+              {
+                header: "Status",
+                body: (x) => (
+                  <div className="flex items-center gap-2">
+                    {x.translationStatus?.status === "In Progress" && (
+                      <div className="w-full relative">
+                        <ProgressBar
+                          style={{ height: "20px" }}
+                          value={(x.translationProgress?.progress || 0) * 100}
+                          showValue={false}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center text-white">
+                          {x.translationProgress?.message}
+                        </div>
+                      </div>
+                    )}
+                    {x.translationStatus?.status !== "In Progress" && (
+                      <div title={x.translationStatus?.message}>
+                        {x.translationStatus?.status || "Not started"}
+                      </div>
+                    )}
+                  </div>
+                ),
+              },
+            ]}
+            items={languageData}
+            onRowClick={(data) => selectLanguage(data.item)}
+            rowClassName={(item) =>
+              item.languageCode == editContext.currentItemDescriptor?.language
+                ? "bg-neutral-100"
+                : ""
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/sidebar/Validation.tsx

@@ -0,0 +1,102 @@
+import { ProgressSpinner } from "primereact/progressspinner";
+import { SingleValidatorResult } from "../../types";
+import { useEditContext } from "../client/editContext";
+import { SimpleTable } from "../ui/SimpleTable";
+
+type SingleResult = SingleValidatorResult & {
+  language: string;
+  version: number;
+};
+
+export function Validation() {
+  const editContext = useEditContext();
+  const validationResults = editContext?.validationResult?.flatMap((x) =>
+    x.results.map((y) => ({
+      ...y,
+      language: x.item.language,
+      version: x.item.version,
+    }))
+  );
+
+  if (!validationResults) return null;
+
+  const nameBodyTemplate = (validationResult: SingleResult) => {
+    const id =
+      validationResult.itemId +
+      validationResult.language +
+      validationResult.version;
+    return (
+      <div className="flex gap-2 items-center">
+        <span
+          className={`name-tooltip-${id} break-all`}
+          style={{ position: "relative" }}
+        >
+          {validationResult.itemName}{" "}
+          <span className="text-gray-500">
+            ({validationResult.language}, {validationResult.itemName})
+          </span>
+        </span>
+      </div>
+    );
+  };
+
+  const validationTemplate = (validationResult: SingleResult) => {
+    return <div>{validationResult.message}</div>;
+  };
+
+  const columns = [
+    { body: nameBodyTemplate, header: "Item" },
+    {
+      body: validationTemplate,
+      align: "center",
+      header: <i className="pi pi-check" />,
+    },
+  ];
+
+  if (validationResults.length === 0) {
+    return (
+      <div className="text-gray-600 text-sm text-center p-4">
+        No validation results
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {editContext?.validating && (
+        <div className="text-center p-3">
+          <ProgressSpinner style={{ width: "20px", height: "20px" }} />
+        </div>
+      )}
+      {!editContext?.validating && (
+        <SimpleTable
+          items={validationResults}
+          columns={columns}
+          onRowClick={async (data) => {
+            const itemDescriptor = {
+              id: data.item.itemId,
+              language: data.item.language,
+              version: data.item.version,
+            };
+            const item = await editContext?.itemsRepository.getItem(
+              itemDescriptor
+            );
+            if (!item || !editContext) return;
+            editContext.setCenterPanelView(
+              editContext.configuration.editor.views.find(
+                (x) => x.name === "content-editor"
+              )?.defaultCenterPanelView
+            );
+            editContext.setFocusedField(
+              {
+                item: itemDescriptor,
+                fieldId: data.item.fieldId,
+              },
+              true
+            );
+          }}
+        ></SimpleTable>
+      )}
+    </div>
+  );
+}

package/src/editor/sidebar/ViewSelector.tsx

@@ -0,0 +1,49 @@
+import { classNames } from "primereact/utils";
+
+import { useEditContext } from "../client/editContext";
+
+export function ViewSelector() {
+  const editContext = useEditContext();
+
+  const views =
+    editContext?.configuration.editor.views.filter((x) => !x.hidden) ?? [];
+
+  return (
+    <div className="shadow-right-soft z-10 flex w-11 max-w-11 flex-col gap-1 bg-gray-100">
+      {views
+        .filter((x) => x.icon)
+        .map((x, i) => (
+          <div
+            title={x.title}
+            key={i}
+            className={classNames(
+              editContext?.viewName == x.name
+                ? "active text-gray-900"
+                : "text-gray-400 hover:text-gray-900",
+              "cursor-pointer p-3",
+            )}
+            data-sidebarview-name={x.name}
+            onClick={() => editContext?.switchView(x.name)}
+          >
+            {typeof x.icon === "string" ? (
+              <i
+                className={classNames(x.icon)}
+                style={{ fontSize: "1.25rem" }}
+              />
+            ) : (
+              x.icon
+            )}
+          </div>
+        ))}
+      {/* <div
+        title="Tour"
+        className={
+          "text-gray-400 hover:text-gray-900 cursor-pointer p-3"
+        }
+        onClick={() => editContext!.startTour()}
+      >
+        <i className="pi pi-question-circle text-xl" />
+      </div> */}
+    </div>
+  );
+}