opacacms 0.1.1 → 0.1.2

package/src/admin/ui/components/fields/index.tsx

@@ -1,371 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { ArrayField } from "./ArrayField";
-import { BlocksField } from "./BlocksField";
-import { BooleanField } from "./BooleanField";
-import { CollapsibleField } from "./CollapsibleField";
-import { DateField } from "./DateField";
-import { FileField } from "./FileField";
-import { GroupField } from "./GroupField";
-import { JoinField } from "./JoinField";
-import { NumberField } from "./NumberField";
-import { RadioField } from "./RadioField";
-import { RelationshipField } from "./RelationshipField";
-import { RowField } from "./RowField";
-import { RichTextEditor } from "./richtext-editor";
-import { SelectField } from "./SelectField";
-import { TabsField } from "./TabsField";
-import { TextAreaField } from "./TextAreaField";
-import { TextField } from "./TextField";
-import { capitalize } from "./utils";
-import { VirtualField } from "./VirtualField";
-
-export {
-  ArrayField,
-  BlocksField,
-  BooleanField,
-  CollapsibleField,
-  DateField,
-  FileField,
-  GroupField,
-  JoinField,
-  NumberField,
-  RadioField,
-  RelationshipField,
-  SelectField,
-  TabsField,
-  TextAreaField,
-  TextField,
-  VirtualField,
-};
-
-interface FieldRendererProps {
-  field: any; // Collection Field definition
-  value: any;
-  onChange: (val: any, secondaryVal?: any) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  error?: string;
-  parentData?: any;
-}
-
-const CustomFieldWrapper: React.FC<{
-  tagName: string;
-  field: any;
-  value: any;
-  onChange: (val: any) => void;
-  isDisabled: boolean;
-  isReadOnly: boolean;
-  error?: string;
-  parentData?: any;
-}> = ({ tagName, field, value, onChange, isDisabled, isReadOnly, error, parentData }) => {
-  const ref = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (el) {
-      // Pass complex data via object properties to the Web Component
-      (el as any).value = value;
-      (el as any).fieldConfig = field;
-      (el as any).error = error;
-      (el as any).parentData = parentData;
-
-      const handleCustomChange = (e: Event) => {
-        const detail = (e as CustomEvent).detail;
-        if (detail && "value" in detail) {
-          onChange(detail.value);
-        }
-      };
-
-      el.addEventListener("opacachange", handleCustomChange);
-      return () => {
-        el.removeEventListener("opacachange", handleCustomChange);
-      };
-    }
-  }, [value, field, onChange, error, parentData]);
-
-  return (
-    <div className="opaca-form-group">
-      <label htmlFor={field.name} className="opaca-label">
-        {field.label || (field.name ? capitalize(field.name) : undefined)}
-        {field.required && (
-          <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>
-        )}
-      </label>
-      {React.createElement(tagName, {
-        ref,
-        id: field.name,
-        "data-name": field.name,
-        "data-disabled": isDisabled ? "true" : undefined,
-        "data-readonly": isReadOnly ? "true" : undefined,
-        className: "opaca-custom-field",
-      })}
-      {error && <span className="opaca-field-error">{error}</span>}
-    </div>
-  );
-};
-
-export const FieldRenderer: React.FC<FieldRendererProps> = ({
-  field,
-  value,
-  onChange,
-  disabled,
-  readOnly,
-  error,
-  parentData,
-}) => {
-  const fieldAccess = field.name ? parentData?._access?.[field.name] || {} : {};
-
-  const isReadOnly =
-    readOnly ||
-    fieldAccess.readOnly ||
-    (typeof field.access?.readOnly === "boolean" ? field.access.readOnly : false);
-
-  const isDisabled =
-    disabled ||
-    fieldAccess.disabled ||
-    (typeof field.access?.disabled === "boolean" ? field.access.disabled : false) ||
-    isReadOnly;
-
-  const isHidden =
-    field.type === "slug" ||
-    fieldAccess.hidden ||
-    (typeof field.access?.hidden === "boolean" ? field.access.hidden : false);
-
-  if (isHidden) return null;
-
-  const commonProps = {
-    name: field.name,
-    label: field.label || (field.name ? capitalize(field.name) : undefined),
-    value,
-    onChange,
-    required: field.required,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    error,
-    placeholder: field.placeholder,
-  };
-
-  // 0. Handle Custom Field Components
-  // Since we are in a web/workers environment, the custom component
-  // needs to be resolved or looked up. For now, we assume it's a string identifier
-  // or that the user has provided a way to register them.
-  // In a real framework, this might use a Context or a registry.
-  // We'll add a placeholder or a simple dynamic lookup if possible.
-  if (field.admin?.components?.Field && typeof field.admin.components.Field === "string") {
-    return (
-      <CustomFieldWrapper
-        tagName={field.admin.components.Field}
-        field={field}
-        value={value}
-        onChange={onChange}
-        isDisabled={isDisabled}
-        isReadOnly={isReadOnly}
-        error={error}
-        parentData={parentData}
-      />
-    );
-  }
-
-  switch (field.type) {
-    case "text":
-      return <TextField {...commonProps} />;
-    case "virtual":
-      return <VirtualField name={commonProps.name} label={commonProps.label} value={value} />;
-    case "textarea":
-      return <TextAreaField {...commonProps} />;
-    case "number":
-      return <NumberField {...commonProps} />;
-    case "date":
-      return <DateField {...commonProps} />;
-    case "boolean":
-      return <BooleanField {...commonProps} />;
-    case "select":
-      return (
-        <SelectField {...commonProps} choices={field.choices || field.options?.choices || []} />
-      );
-    case "file":
-      return <FileField {...commonProps} options={field.options} bucket={field.bucket} />;
-    case "radio":
-      return (
-        <RadioField {...commonProps} choices={field.choices || field.options?.choices || []} />
-      );
-    case "row":
-      return (
-        <RowField
-          fields={field.fields || []}
-          parentData={parentData}
-          disabled={isDisabled}
-          readOnly={isReadOnly}
-          onChange={(name, val) => {
-            // Merge nested updates into parentData for layout fields
-            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
-              onChange({ ...parentData, [name]: val });
-            } else {
-              onChange(val);
-            }
-          }}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={f.name && v === undefined ? parentData?.[f.name] : v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={parentData}
-            />
-          )}
-        />
-      );
-
-    case "group":
-      return (
-        <GroupField
-          {...commonProps}
-          fields={field.fields || []}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={f.name && v === undefined ? parentData?.[f.name] : v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={value} // Pass group data as parentData
-            />
-          )}
-        />
-      );
-
-    case "tabs":
-      return (
-        <TabsField
-          {...commonProps}
-          tabs={field.tabs || []}
-          parentData={parentData}
-          onChange={(name, val) => {
-            // Merge nested updates into parentData for layout fields
-            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
-              onChange({ ...parentData, [name]: val });
-            } else {
-              onChange(val);
-            }
-          }}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={f.name && value === undefined ? parentData?.[f.name] : v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={parentData}
-            />
-          )}
-        />
-      );
-
-    case "collapsible":
-      return (
-        <CollapsibleField
-          {...commonProps}
-          fields={field.fields || []}
-          parentData={parentData}
-          options={field.options}
-          onChange={(name, val) => {
-            // Merge nested updates into parentData for layout fields
-            if (parentData && typeof parentData === "object" && !Array.isArray(parentData)) {
-              onChange({ ...parentData, [name]: val });
-            } else {
-              onChange(val);
-            }
-          }}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={parentData}
-            />
-          )}
-        />
-      );
-
-    case "blocks":
-      return (
-        <BlocksField
-          {...commonProps}
-          blocks={field.blocks || field.options?.blocks || []}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={v} // In blocks, the item itself is the parent data
-            />
-          )}
-        />
-      );
-    case "relationship":
-      return (
-        <RelationshipField
-          {...commonProps}
-          relationTo={field.relationTo || field.options?.relationTo}
-          displayField={field.displayField || field.options?.displayField}
-          hasMany={field.hasMany}
-        />
-      );
-    case "join":
-      return (
-        <JoinField {...commonProps} collection={field.collection || field.options?.collection} />
-      );
-    case "array":
-      return (
-        <ArrayField
-          {...commonProps}
-          fields={field.fields || []}
-          renderField={(f, v, subOnChange) => (
-            <FieldRenderer
-              field={f}
-              value={v}
-              onChange={subOnChange}
-              disabled={isDisabled}
-              readOnly={isReadOnly}
-              parentData={v}
-            />
-          )}
-        />
-      );
-    case "richtext":
-      return (
-        <div className="opaca-form-group">
-          <label htmlFor={field.name} className="opaca-label">
-            {field.label || (field.name ? capitalize(field.name) : undefined)}
-            {field.required && (
-              <span style={{ color: "var(--opaca-error)", marginLeft: "4px" }}>*</span>
-            )}
-          </label>
-          <RichTextEditor
-            value={value || ""}
-            onChange={onChange}
-            disabled={isDisabled} // Use isDisabled
-            readOnly={isReadOnly} // Use isReadOnly
-            defaultMode={field.options?.defaultMode}
-          />
-          {error && <span className="opaca-field-error">{error}</span>}
-        </div>
-      );
-    default:
-      console.warn("FieldRenderer: fallback to default for type:", field.type, field);
-      return (
-        <div className="opaca-form-group">
-          <label htmlFor={field.name} className="opaca-label">
-            {field.label || (field.name ? capitalize(field.name) : undefined)} (Unknown Type:{" "}
-            {field.type}) {/* Fixed label using capitalize */}
-          </label>
-          <input type="text" className="opaca-input" value={value || ""} readOnly disabled />
-        </div>
-      );
-  }
-};

package/src/admin/ui/components/fields/richtext-editor/index.tsx

@@ -1,211 +0,0 @@
-import { CodeNode } from "@lexical/code";
-import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { MarkNode } from "@lexical/mark";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import type { EditorState } from "lexical";
-import { useState } from "react";
-import { ImageNode } from "./nodes/ImageNode";
-import { ComponentPickerPlugin } from "./plugins/ComponentPickerPlugin";
-import { EditableSyncPlugin } from "./plugins/EditableSyncPlugin";
-import { NotionToolbarPlugin } from "./plugins/NotionToolbarPlugin";
-import { SimpleToolbarPlugin } from "./plugins/SimpleToolbarPlugin";
-import { ValueSyncPlugin } from "./plugins/ValueSyncPlugin";
-import "../../../styles/lexical.scss";
-
-export interface RichTextEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  defaultMode?: "simple" | "notion";
-  disabled?: boolean;
-  readOnly?: boolean;
-}
-
-const theme = {
-  ltr: "ltr",
-  rtl: "rtl",
-  placeholder: "editor-placeholder",
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5",
-    h6: "editor-heading-h6",
-  },
-  list: {
-    nested: {
-      listitem: "editor-nested-listitem",
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    listitem: "editor-listitem",
-    listitemChecked: "editor-listitem-checked",
-    listitemUnchecked: "editor-listitem-unchecked",
-  },
-  image: "editor-image",
-  link: "editor-link",
-  text: {
-    bold: "editor-text-bold",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code",
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable",
-  },
-};
-
-function Placeholder() {
-  return (
-    <div className="opaca-lexical-placeholder">Press "/" for commands, or start typing...</div>
-  );
-}
-
-export const normalizeEditorState = (value: unknown): string | undefined => {
-  if (!value) return undefined;
-
-  // already string
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    return trimmed.startsWith("{") ? trimmed : undefined;
-  }
-
-  // object → stringify
-  if (typeof value === "object") {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return undefined;
-    }
-  }
-
-  return undefined;
-};
-
-export function RichTextEditor({
-  value,
-  onChange,
-  defaultMode = "simple",
-  disabled,
-  readOnly,
-}: RichTextEditorProps) {
-  const [mode, setMode] = useState<"simple" | "notion">(defaultMode);
-  const isEditable = !disabled && !readOnly;
-
-  const initialConfig = {
-    namespace: "OpacaLexical",
-    theme,
-    editable: isEditable,
-    nodes: [
-      HeadingNode,
-      ListNode,
-      ListItemNode,
-      QuoteNode,
-      CodeNode,
-      LinkNode,
-      AutoLinkNode,
-      MarkNode,
-      ImageNode,
-    ],
-    onError: (error: Error) => {
-      console.error(error);
-    },
-    editorState: normalizeEditorState(value),
-  };
-
-  const handleOnChange = (editorState: EditorState) => {
-    // Only call onChange if we have actually serialized new content, otherwise we'll create infinite loops
-    // In Lexical, we generally stringify the JSON
-    const jsonString = JSON.stringify(editorState.toJSON());
-    onChange(jsonString);
-  };
-
-  return (
-    <div className="opaca-lexical-wrapper">
-      {isEditable && (
-        <div className="opaca-lexical-modes">
-          <button
-            type="button"
-            className={`opaca-btn ${mode === "simple" ? "opaca-btn-primary" : "opaca-btn-outline"}`}
-            onClick={() => setMode("simple")}
-          >
-            Simple
-          </button>
-          <button
-            type="button"
-            className={`opaca-btn ${mode === "notion" ? "opaca-btn-primary" : "opaca-btn-outline"}`}
-            onClick={() => setMode("notion")}
-          >
-            Notion-like
-          </button>
-        </div>
-      )}
-
-      <div className={`opaca-lexical-container mode-${mode} ${!isEditable ? "is-readonly" : ""}`}>
-        <LexicalComposer initialConfig={initialConfig}>
-          {mode === "simple" && isEditable && <SimpleToolbarPlugin />}
-          {mode === "notion" && isEditable && <NotionToolbarPlugin />}
-          <div className="opaca-lexical-editor-inner">
-            <RichTextPlugin
-              contentEditable={<ContentEditable className="opaca-lexical-content" />}
-              placeholder={<Placeholder />}
-              ErrorBoundary={LexicalErrorBoundary as any}
-            />
-            <OnChangePlugin onChange={handleOnChange} ignoreSelectionChange />
-            <ValueSyncPlugin value={value} />
-            <EditableSyncPlugin isEditable={isEditable} />
-            <HistoryPlugin />
-            <ListPlugin />
-            <LinkPlugin />
-            <ComponentPickerPlugin />
-          </div>
-        </LexicalComposer>
-      </div>
-    </div>
-  );
-}