@alpaca-editor/core 1.0.0

package/src/editor/sidebar/Workbox.tsx

@@ -0,0 +1,209 @@
+import { useEditContext } from "../client/editContext";
+import { Tooltip } from "primereact/tooltip";
+import { Button } from "primereact/button";
+import { useRef, useState } from "react";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import { classNames } from "primereact/utils";
+
+import { SimpleTable } from "../ui/SimpleTable";
+import { WorkboxItem } from "../../types";
+
+export function Workbox() {
+  const [validationOverlayItem, setValidationOverlayItem] =
+    useState<WorkboxItem>();
+
+  const editContext = useEditContext();
+
+  const validationResult = editContext?.validationResult;
+
+  if (!editContext) return null;
+
+  const validationOverlay = useRef<OverlayPanel>(null);
+
+  const nameBodyTemplate = (wbItem: WorkboxItem) => {
+    const id = wbItem.item.id + wbItem.item.language + wbItem.item.version;
+    return (
+      <div className="flex gap-2 items-center">
+        {/* {(wbItem.lockedBy || wbItem.hasLock) && (
+          <>
+            <i
+              className={
+                `lock-tooltip-${id} ` +
+                "text-xs pi pi-lock cursor-pointer " +
+                (wbItem.hasLock ? "text-green-600" : "text-red-600")
+              }
+              onClick={() => {
+                unlockItems([wbItem.item]);
+              }}
+            />
+            <Tooltip
+              target={`.a-lock-tooltip-${id}`}
+              content={wbItem.lockedBy}
+            />
+          </>
+        )}
+        {!wbItem.lockedBy && !wbItem.hasLock && (
+          <i
+            className="text-xs pi pi-lock-open cursor-pointer"
+            onClick={() => {
+              lockItems([wbItem.item]);
+            }}
+          />
+        )} */}
+
+        <span
+          className={`name-tooltip-${id} break-all`}
+          style={{ position: "relative" }}
+        >
+          {wbItem.name}{" "}
+          <span className="text-gray-500">
+            ({wbItem.item.language}, {wbItem.item.version})
+          </span>
+          <Tooltip target={`.a-name-tooltip-${id}`} content={wbItem.path} />
+        </span>
+      </div>
+    );
+  };
+
+  const stateBodyTemplate = (item: WorkboxItem) => {
+    if (item.isPublishable) {
+      const targets = Object.keys(item.publishStatus);
+      return targets.map((x) => (
+        <div key={x}>
+          {targets.length > 1 && (
+            <>
+              <b>{x}</b>:
+            </>
+          )}
+          {item.publishStatus[x]}
+        </div>
+      ));
+    } else return item.workflowState;
+  };
+
+  const actionsBodyTemplate = (item: WorkboxItem) => {
+    return (
+      <div className="flex flex-wrap gap-1">
+        {!item.isFinalState &&
+          item.workflowCommands?.map((action) => {
+            return (
+              <Button
+                key={action.id}
+                label={action.name}
+                className="text-xs p-1"
+                onClick={() =>
+                  editContext.operations.executeWorkflowCommand(
+                    item.item,
+                    action.id
+                  )
+                }
+                size="small"
+              />
+            );
+          })}
+      </div>
+    );
+  };
+
+  const validationTemplate = (item: WorkboxItem) => {
+    const validator = validationResult?.find(
+      (x) =>
+        x.item.id === item.item.id &&
+        x.item.language === item.item.language &&
+        x.item.version === item.item.version
+    );
+    if (!validator || !validator.results.length) return null;
+    return (
+      <div
+        className={classNames(
+          "cursor-pointer",
+          getValidationErrorLevelClass(
+            validator.results.reduce(
+              (prev, curr) => Math.max(prev, curr.result),
+              0
+            )
+          )
+        )}
+        onClick={(ev) => {
+          setValidationOverlayItem(item);
+          validationOverlay.current?.toggle(ev);
+        }}
+      >
+        {validator.results.length}
+      </div>
+    );
+  };
+
+  if (!editContext.workboxItems) return null;
+
+  const overlayResult = validationResult?.find(
+    (x) =>
+      x.item.id === validationOverlayItem?.item.id &&
+      x.item.language === validationOverlayItem?.item.language &&
+      x.item.version === validationOverlayItem?.item.version
+  );
+
+  const getValidationErrorLevelClass = (level: number) => {
+    switch (level) {
+      case 0:
+        return "text-green-600";
+      case 1:
+        return "text-blue-600";
+      case 2:
+        return "text-yellow-600";
+      case 3:
+        return "text-orange-600";
+      case 4:
+      case 5:
+        return "text-red-600";
+    }
+  };
+
+  const columns = [
+    { body: nameBodyTemplate, header: "Item" },
+    { body: stateBodyTemplate, header: "State" },
+    { body: actionsBodyTemplate, header: "Actions" },
+    {
+      body: validationTemplate,
+      align: "center",
+      header: <i className="pi pi-check" />,
+    },
+  ];
+
+  return (
+    <>
+      <SimpleTable items={editContext.workboxItems} columns={columns} />
+      <OverlayPanel ref={validationOverlay}>
+        <table className="text-xs border-spacing-1 border-separate m-3">
+          <thead>
+            <tr>
+              <th className="text-left">Item</th>
+              <th className="text-left">Field</th>
+              <th className="text-left">Validator</th>
+              <th className="text-left">Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            {overlayResult &&
+              overlayResult.results.map((x) => (
+                <tr key={x.fieldId + x.itemId}>
+                  <td>{x.itemName}</td>
+                  <td>{x.fieldName}</td>
+                  <td>{x.validator}</td>
+                  <td
+                    className={classNames(
+                      "text-xs break-all max-w-48",
+                      getValidationErrorLevelClass(x.result)
+                    )}
+                  >
+                    {x.message}
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </OverlayPanel>
+    </>
+  );
+}

package/src/editor/ui/CenteredMessage.tsx

@@ -0,0 +1,7 @@
+export function CenteredMessage({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex justify-center items-center h-full text-gray-500">
+      {children}
+    </div>
+  );
+}

package/src/editor/ui/CopyToClipboardButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEditContext } from "../client/editContext";
+
+export function CopyToClipboardButton({ text }: { text: string }) {
+  const editContext = useEditContext();
+  const handleCopyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    editContext!.showToast({
+      summary: "Copied to clipboard",
+      severity: "success",
+    });
+  };
+
+  return (
+    <span
+      className="ml-1 cursor-pointer"
+      onClick={() => handleCopyToClipboard(text)}
+    >
+      <i className="pi pi-copy text-xs" />
+    </span>
+  );
+}

package/src/editor/ui/DialogButtons.tsx

@@ -0,0 +1,11 @@
+export default function DialogButtons({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-end gap-3 p-4 border-t">
+      {children}
+    </div>
+  );
+}