@alpaca-editor/core 1.0.0

package/src/config/types.ts

@@ -0,0 +1,263 @@
+import { ComponentType, ReactNode, Dispatch, SetStateAction } from "react";
+import { EditContextType } from "../editor/client/editContext";
+import { Command, CommandData } from "../editor/commands/commands";
+import { EditorWarningProps } from "../editor/EditorWarnings";
+import {
+  Field,
+  FieldButton,
+  FullItem,
+  ItemDescriptor,
+} from "../editor/pageModel";
+import {
+  InsertItemCommand,
+  ItemCommand,
+} from "../editor/commands/itemCommands";
+import { User } from "../types";
+import { WizardData, WizardPageModel } from "../page-wizard/PageWizard";
+import { Wizard } from "../page-wizard/PageWizard";
+import { DialogContextValue } from "../editor/client/DialogContext";
+
+export type RichTextEditorProfile = {
+  toolbar: {
+    groups: RichTextEditorToolbarGroup[];
+  };
+};
+
+export type ClientFieldButton = FieldButton & {
+  clientAction?: FieldAction;
+};
+
+export type FieldAction = ({
+  editContext,
+  dialogContext,
+}: FieldActionProps) => Promise<any> | void;
+
+export type FieldActionProps = {
+  editContext: EditContextType;
+  dialogContext: DialogContextValue;
+  field: Field;
+};
+
+export type RichTextEditorToolbarGroup = {
+  items: RichTextEditorToolbarItem[];
+};
+
+export type RichTextEditorToolbarItem = string | {};
+
+export type EditorClientBuilderProps = {
+  configuration: EditorConfiguration;
+  buildClient: (configuration: EditorConfiguration) => ReactNode;
+  user: User;
+};
+
+export type Panel = {
+  name: string;
+  title: string;
+  icon?: string | React.JSX.Element;
+  header?: ComponentType;
+  content: ReactNode;
+  initialSize: number;
+  noOverflow?: boolean;
+};
+
+export type PanelFactory = (editContext: EditContextType) => Panel;
+
+export type Sidebar = { panels: (Panel | PanelFactory)[]; title?: string };
+export type EditorView = {
+  name: string;
+  extends?: string;
+  title?: string;
+  icon?: string | React.JSX.Element;
+  defaultCenterPanelView?: ReactNode;
+  menuBar?: ReactNode;
+  leftSidebar?: Sidebar;
+  rightSidebar?: Sidebar;
+  hidden?: boolean;
+  primaryControls?: ReactNode;
+  secondaryControls?: ReactNode;
+  hideViewSelector?: boolean;
+};
+
+export type ViewPanel = {
+  name: string;
+  content: ReactNode;
+};
+
+export type MenuItem = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  items?: MenuItem[];
+  command?: (event: any) => Promise<void>;
+};
+
+export type EditorConfiguration = {
+  extensions: { [key: string]: unknown };
+  commands: {
+    renameItem: ItemCommand;
+    deleteItem: ItemCommand;
+    insertItem: InsertItemCommand;
+    publishItem: ItemCommand;
+    allItemCommands: ItemCommand[];
+    reviewcommands: Command<CommandData>[];
+  };
+  events: {
+    onUnauthorized?: () => void;
+  };
+  services: {
+    renderService: {
+      path?: string;
+    };
+    editorService: {
+      //baseUrl: string;
+    };
+    aiService: {
+      promptUrl: string;
+    };
+  };
+
+  editorWarnings: ComponentType<EditorWarningProps>[];
+  fieldTypes: {
+    [key: string]: FieldTypeConfiguration;
+  };
+  outline: {
+    width: number;
+  };
+  debounceFieldEditsInterval: number;
+  devices: Device[];
+  pageWizard: {
+    getWizards: (parentItem: ItemDescriptor) => Promise<Wizard[]>;
+    startWizardCommand: Command<{ wizard: Wizard; item: ItemDescriptor }>;
+    stepComponents: {
+      [key: string]: ComponentType<StepComponentProps>;
+    };
+  };
+
+  editor: {
+    defaultPanelSizes: [number, number];
+    dialogs: {
+      newPage: {
+        expandTreeNode?: string;
+      };
+    };
+    views: EditorView[];
+    actionsMenu?: {
+      itemsFactory: (editContext: EditContextType) => MenuItem[];
+    };
+    mainNavigation?: (MenuItem | Command<any>)[];
+    embedded?: boolean;
+    titlebar: ReactNode;
+    contentTree: {
+      contextMenu: {
+        factory: (props: {
+          items: FullItem[];
+          editContext: EditContextType;
+          commandCallback?: (command: ItemCommand, result: any) => void;
+        }) => Promise<MenuItem[] | undefined>;
+      };
+    };
+  };
+  controlCenter: {
+    groups: {
+      title: string;
+      icon: ReactNode;
+      panels: ControlCenterPanel[];
+    }[];
+  };
+
+  tours: {
+    default: Tour;
+    preview: Tour;
+  };
+  activeTour: string;
+};
+
+export type Tour = {
+  getSteps: (params: GetEditorTourStepsParams) => Record<string, TourStep>;
+};
+
+export type ControlCenterPanel = {
+  id: string;
+  title: string;
+  icon?: ReactNode;
+  content: ReactNode;
+};
+
+export type Device = {
+  name: string;
+  width: number | undefined;
+  height: number | undefined;
+};
+
+export type FieldTypeConfiguration = {
+  editor: React.ComponentType<any>;
+  buttons?: FieldButton[];
+  custom?: any;
+};
+
+export type TourButton = {
+  label: ReactNode;
+  onClick: () => void;
+  className?: string;
+};
+
+export type TourStep = {
+  title?: ReactNode;
+  description?: ReactNode;
+  focusElement?: string;
+  extendFocus?: number;
+  prepareAction?: () => Promise<void>;
+  action?: () => Promise<void>;
+  bubblePosition?: "left" | "right" | "bottom" | "top-right";
+  flipArrow?: boolean;
+  waitForUserInput?: () => Promise<string | void>;
+  buttons?: TourButton[];
+  nextStep?: string;
+  waitForElement?: string;
+  getPointTo?: () => DOMRect | undefined;
+  pointToElement?: string;
+};
+
+export type GetEditorTourStepsParams = {
+  editContext: EditContextType;
+  nextStep: (stepId: string) => void;
+  stopTour: () => void;
+  waitForElement: (
+    selector: string,
+    timeout?: number,
+  ) => Promise<DOMRect | undefined>;
+  waitForElementToDisappear: (selector: string) => Promise<void>;
+  setFocusRect: (rect: DOMRect) => void;
+  delay: (ms: number) => Promise<void>;
+  waitForInput: (
+    selector: string,
+    minNumberOfCharacters: number,
+  ) => Promise<void>;
+  simulateTyping: (
+    element: HTMLInputElement | HTMLTextAreaElement,
+    text: string,
+    interval?: number,
+  ) => Promise<void>;
+};
+
+export type TranslationStatus = {
+  itemId: string;
+  targetLanguage: string;
+  sourceLanguage: string;
+  status: string;
+  timestamp: string;
+  message?: string;
+};
+
+export interface StepComponentProps {
+  step: any;
+  data: WizardData;
+  setData: React.Dispatch<React.SetStateAction<WizardData>>;
+  wizard: Wizard;
+  parentItem?: ItemDescriptor;
+  setStepCompleted: (completed: boolean) => void;
+  internalState: any;
+  setInternalState: Dispatch<SetStateAction<any>>;
+  pageModel: WizardPageModel;
+  setPageModel: Dispatch<SetStateAction<WizardPageModel>>;
+}

package/src/editor/ComponentInfo.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Component, FullItem } from "./pageModel";
+import { CopyToClipboardButton } from "./ui/CopyToClipboardButton";
+import { Section } from "./ui/Section";
+import { useEditContext } from "./client/editContext";
+
+export function ComponentInfo({ component }: { component: Component | null }) {
+  if (!component) return null;
+
+  const editContext = useEditContext();
+
+  const [layoutItem, setLayoutItem] = useState<FullItem>();
+
+  useEffect(() => {
+    if (!component.layoutId) {
+      setLayoutItem(undefined);
+      return;
+    }
+    editContext!.itemsRepository
+      .getItem({
+        id: component.layoutId,
+        language: editContext!.currentItemDescriptor!.language,
+        version: 0,
+      })
+      .then(setLayoutItem);
+  }, [component.layoutId]);
+
+  const hostingPageItem = layoutItem ? (
+    <>
+      <div className="font-bold">Source:</div>
+      <div>
+        {layoutItem.path} ID: {layoutItem.id}
+      </div>
+    </>
+  ) : null;
+
+  const linkedComponent = component.datasourceItem ? (
+    <>
+      <div className="font-bold">Source:</div>
+      <div>
+        {component.datasourceItem.path} ({component.datasourceItem.id})
+      </div>
+    </>
+  ) : null;
+
+  return (
+    <div>
+      <h2 className="py-3 px-3 text-l font-bold my-2">
+        {component.name}
+      </h2>
+      <Section title="Info">
+        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100">
+          <div className="font-bold">ID:</div>
+          <div>
+            {component.id} <CopyToClipboardButton text={component.id} />
+          </div>
+          <div className="font-bold">Template</div>
+          <div>
+            ({component.datasourceItem?.templateId}
+            {component.datasourceItem && (
+              <CopyToClipboardButton
+                text={component.datasourceItem.templateId}
+              />
+            )}
+            )
+          </div>
+          <div className="font-bold">Languages</div>
+          <div>{component.datasourceItem?.translations?.join(", ")}</div>
+          {hostingPageItem}
+          {linkedComponent}
+        </div>
+      </Section>
+    </div>
+  );
+}

package/src/editor/ConfirmationDialog.tsx

@@ -0,0 +1,103 @@
+import { useState, forwardRef, useImperativeHandle } from "react";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+
+export type ConfirmationDialogProps = {};
+
+export type ConfirmationProps = {
+  message: React.ReactNode;
+  acceptIcon?: string;
+  rejectIcon?: string;
+  header?: React.ReactNode;
+  acceptLabel?: string;
+  rejectLabel?: string;
+  icon?: string;
+  accept: () => void;
+  reject?: () => void;
+  showCancel?: boolean;
+  showAccept?: boolean;
+};
+
+export interface ConfirmationDialogHandle {
+  confirm: (props: ConfirmationProps) => void;
+}
+
+const ConfirmationDialog = forwardRef<
+  ConfirmationDialogHandle,
+  ConfirmationDialogProps
+>((_props, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  const [props, setProps] = useState<ConfirmationProps>();
+
+  const showAccept = props?.accept === undefined ? true : props.accept;
+
+  useImperativeHandle(ref, () => ({
+    confirm: (props: ConfirmationProps) => {
+      setVisible(true);
+      setProps(props);
+    },
+  }));
+
+  const handleAccept = () => {
+    props?.accept();
+    setVisible(false);
+  };
+
+  const handleReject = () => {
+    if (props?.reject) props.reject();
+    setVisible(false);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  const dialogFooter = (
+    <div>
+      {showAccept && (
+        <Button
+          label={props?.acceptLabel || "Yes"}
+          icon={props?.acceptIcon || "pi pi-check"}
+          onClick={handleAccept}
+          className="p-button-text"
+        />
+      )}
+      {props?.rejectLabel && (
+        <Button
+          label={props?.rejectLabel}
+          icon={props?.rejectIcon || "pi pi-times"}
+          onClick={handleReject}
+          className="p-button-text"
+        />
+      )}
+      {props?.showCancel && (
+        <Button
+          label="Cancel"
+          icon="pi pi-ban"
+          onClick={handleCancel}
+          className="p-button-text"
+        />
+      )}
+    </div>
+  );
+
+  return (
+    visible && (
+      <Dialog
+        header={props?.header || "Confirm"}
+        visible={visible}
+        style={{ maxWidth: "50vw" }}
+        footer={dialogFooter}
+        onHide={handleCancel}
+      >
+        <div className="flex items-center gap-2 p-3">
+          {props?.icon && <i className={props.icon + " text-3xl"}></i>}
+          {props?.message}
+        </div>
+      </Dialog>
+    )
+  );
+});
+
+export default ConfirmationDialog;