@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/config/types.ts

@@ -1,286 +0,0 @@
-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,
-  ItemCommandData,
-  MoveCopyItemsCommand,
-  LocalizeItemCommand,
-} from "../editor/commands/itemCommands";
-import { User } from "../types";
-import {
-  WizardData,
-  WizardPageModel,
-  WizardStep,
-} from "../page-wizard/PageWizard";
-import { Wizard } from "../page-wizard/PageWizard";
-
-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;
-  visible?: (editContext: EditContextType) => boolean;
-  beforeClose?: (editContext: EditContextType) => Promise<boolean>;
-  headerTitle?: (editContext: EditContextType) => string;
-};
-
-export type ViewPanel = {
-  name: string;
-  content: ReactNode;
-};
-
-export type MenuItem = {
-  id: string;
-  label?: string;
-  icon?: ReactNode;
-  items?: MenuItem[];
-  command?: (event: any) => Promise<void>;
-  disabled?: boolean;
-  separator?: boolean;
-};
-
-export type MenuItemGroup = {
-  id: string;
-  label?: string;
-  items: MenuItem[];
-};
-
-export type EditorConfiguration = {
-  extensions: { [key: string]: unknown };
-  commands: {
-    localizeItem: LocalizeItemCommand;
-    renameItem: ItemCommand;
-    deleteItem: ItemCommand;
-    insertItem: InsertItemCommand;
-    publishItem: ItemCommand;
-    allItemCommands: Command<ItemCommandData>[];
-    reviewcommands: Command<CommandData>[];
-    moveItems: MoveCopyItemsCommand;
-    copyItems: MoveCopyItemsCommand;
-  };
-  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) => MenuItemGroup[];
-    };
-    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: WizardStep;
-
-  data: WizardData;
-  setData: React.Dispatch<React.SetStateAction<WizardData>>;
-  wizard: Wizard;
-  parentItem?: ItemDescriptor;
-  setStepCompleted: (completed: boolean) => void;
-  setBeforeNextCallback?: (callback: (() => Promise<boolean>) | null) => void;
-
-  internalState: any;
-  setInternalState: Dispatch<SetStateAction<any>>;
-  pageModel: WizardPageModel;
-  setPageModel: Dispatch<SetStateAction<WizardPageModel>>;
-}

package/src/editor/ComponentInfo.tsx

@@ -1,90 +0,0 @@
-"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>();
-  const [dataSourceItem, setDataSourceItem] = 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]);
-
-  useEffect(() => {
-    async function loadDataSourceItem() {
-      if (!component?.datasourceItem) {
-        setDataSourceItem(undefined);
-        return;
-      }
-      const item = await editContext!.itemsRepository.getItem(
-        component.datasourceItem,
-      );
-      setDataSourceItem(item);
-    }
-    loadDataSourceItem();
-  }, [component.datasourceItem]);
-
-  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>
-        {dataSourceItem?.path} ({dataSourceItem?.id})
-      </div>
-    </>
-  ) : null;
-
-  return (
-    <div>
-      <h2 className="text-l my-2 px-3 py-3 font-bold">{component.name}</h2>
-      <Section title="Info">
-        <div className="grid grid-cols-[min-content_1fr] gap-3 bg-gray-100 text-xs">
-          <div className="font-bold">ID:</div>
-          <div className="flex items-center gap-1">
-            {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>{dataSourceItem?.translations?.join(", ")}</div>
-          {hostingPageItem}
-          {linkedComponent}
-        </div>
-      </Section>
-    </div>
-  );
-}

package/src/editor/ConfirmationDialog.tsx

@@ -1,103 +0,0 @@
-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?: React.ReactNode;
-  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}
-        footer={dialogFooter}
-        onHide={handleCancel}
-        className="md:max-w-50vw"
-      >
-        <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;