@alpaca-editor/core 1.0.0

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@alpaca-editor/core",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./styles.css"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@turbo/gen": "^2.4.4",
+    "@types/node": "^22.13.9",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "eslint": "^9.22.0",
+    "typescript": "5.8.2"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
+    "@types/lodash": "^4.17.16",
+    "@uiw/react-md-editor": "^4.0.5",
+    "@uiw/react-textarea-code-editor": "^1.5.24",
+    "allotment": "^1.20.3",
+    "axios": "^1.6.7",
+    "geist": "^1.3.1",
+    "morphdom": "^2.7.4",
+    "postcss": "^8.5.3",
+    "primeicons": "^7.0.0",
+    "primereact": "10.9.1",
+    "quill": "^2.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-inspector": "^6.0.2",
+    "react-json-view-lite": "^2.4.1",
+    "react-quill-new": "^3.4.1",
+    "react-uuid": "^2.0.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.14",
+    "universal-cookie": "^8.0.0",
+    "use-debounce": "^10.0.4"
+  }
+}

package/src/client-components/api.ts

@@ -0,0 +1,6 @@
+export function selectComponents(componentIds: string[]) {
+  window.top?.window.postMessage(
+    { componentIds, type: "componentsSelected" },
+    "*"
+  );
+}

package/src/client-components/index.ts

@@ -0,0 +1,19 @@
+export { useEditContext } from "../editor/client/editContext";
+export { selectComponents } from "./api";
+export { getDefaultTourSteps } from "../tour/default-tour";
+export * from "../editor/field-types/DropLinkEditor";
+export * from "../editor/field-types/TreeListEditor";
+export * from "../editor/field-types/DropListEditor";
+export * from "../editor/field-types/AttachmentEditor";
+export * from "../editor/field-types/CheckboxEditor";
+export * from "../editor/field-types/LinkFieldEditor";
+export * from "../editor/field-types/PictureFieldEditor";
+export * from "../editor/field-types/RichTextEditor";
+export * from "../editor/field-types/SingleLineText";
+export * from "../editor/field-types/MultiLineText";
+export * from "../editor/field-types/RawEditor";
+export * from "../editor/field-types/RichTextEditor";
+export * from "../editor/field-types/InternalLinkFieldEditor";
+
+
+

package/src/components/ActionButton.tsx

@@ -0,0 +1,43 @@
+import { classNames } from "primereact/utils";
+import React from "react";
+
+interface ActionButtonProps {
+  isLoading: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  loadingText?: string;
+  children: React.ReactNode;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+}
+
+export const ActionButton: React.FC<ActionButtonProps> = ({
+  isLoading,
+  onClick,
+  disabled = false,
+  loadingText = "Loading...",
+  children,
+  type = "button",
+  className = "",
+}) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled || isLoading}
+      className={classNames(
+        "bg-canvas-pink text-white px-4 py-2 rounded-lg font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed border hover:border-canvas-pink hover:text-canvas-pink",
+        className
+      )}
+    >
+      {isLoading ? (
+        <div className="flex items-center gap-2 justify-center">
+          <div className="animate-spin mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
+          <div>{loadingText}</div>
+        </div>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};

package/src/components/Error.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { EditContextType } from "../editor/client/editContext";
+import { Component } from "../editor/pageModel";
+
+export function ErrorFallback() {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div role="alert">
+      <p>Something went wrong.</p>
+    </div>
+  );
+}
+
+export function ErrorFallbackWithDetails({
+  error,
+  component,
+  editContext,
+}: {
+  error: Error;
+  component: Component;
+  editContext?: EditContextType;
+}) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div
+      role="alert"
+      className="cursor-pointer"
+      onClick={(ev) => {
+        if (!editContext) return;
+        ev.stopPropagation();
+        ev.preventDefault();
+        editContext.select([component.id]);
+        if (!editContext.configuration.editor.views) return;
+        if (component.rendering) editContext.switchView("component-designer");
+      }}
+    >
+      <div className="text-xs bg-gray-100 p-3">
+        <div className="font-bold mb-1">Something went wrong</div>
+        <div>Component id: {component.id}</div>
+        <div>Component type: {component.type}</div>
+        {component.rendering && (
+          <div>Rendering id: {component.rendering.id}</div>
+        )}
+        <pre className="overflow-x-auto text-red-500 py-2">
+          {error.message} {error.stack}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+export async function AsyncComponent() {
+  return <ErrorFallback />;
+}