@pstdio/ui 0.0.3 → 0.0.4

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/components/ReferenceMenu/ReferenceMenuItem.tsx

@@ -1,50 +0,0 @@
-import { Flex, Text, Tooltip } from "@chakra-ui/react";
-
-interface ReferenceMenuItemProps {
-  id: string;
-  isSelected: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  primaryLabel: string;
-  secondaryLabel?: string;
-  setRefElement: (element: HTMLDivElement) => void;
-  tabIndex: number;
-}
-
-export function ReferenceMenuItem(props: ReferenceMenuItemProps) {
-  const { id, isSelected, onClick, onMouseEnter, setRefElement, secondaryLabel, primaryLabel, tabIndex = -1 } = props;
-
-  return (
-    <Flex
-      direction="column"
-      cursor="pointer"
-      gap="2xs"
-      padding="2xs"
-      paddingX="sm"
-      bg={isSelected ? "bg.muted" : "transparent"}
-      tabIndex={tabIndex}
-      ref={setRefElement}
-      role="option"
-      aria-selected={isSelected}
-      id={id}
-      onMouseEnter={onMouseEnter}
-      onClick={onClick}
-    >
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          <Text mt="1px" lineClamp={1} textOverflow="ellipsis" textStyle="label/M/regular">
-            {primaryLabel}
-          </Text>
-        </Tooltip.Trigger>
-        <Tooltip.Positioner>
-          <Tooltip.Content>{primaryLabel}</Tooltip.Content>
-        </Tooltip.Positioner>
-      </Tooltip.Root>
-      {secondaryLabel && (
-        <Text lineClamp={2} textOverflow="ellipsis" textStyle="label/S/regular" color="fg.muted">
-          {secondaryLabel}
-        </Text>
-      )}
-    </Flex>
-  );
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/constants.ts

@@ -1,3 +0,0 @@
-import type { MenuOptionGroup } from "./ReferenceMenuOption";
-
-export const menuSortOrder: MenuOptionGroup[] = ["table", "connector"];

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/hooks/useContextLookup.tsx

@@ -1,50 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import type { ReferenceMenuOption } from "../ReferenceMenuOption";
-
-const localFilter = (data: ReferenceMenuOption[], q: string) =>
-  data.filter((m) => m.name.replace(/ /g, "_").toLowerCase().includes(q.toLowerCase()));
-
-/**
- * Search across all resources and menu options
- *
- * @param queryString
- * @returns
- */
-export function useContextLookup(
-  queryString: string | null,
-  items: {
-    resourceId: string;
-    resourceType: "table" | "connector";
-    name: string;
-    description?: string;
-  }[] = [],
-) {
-  const [results, setResults] = useState<Array<ReferenceMenuOption>>([]);
-
-  const baseOptions: ReferenceMenuOption[] = useMemo(
-    () =>
-      items.map(
-        (res, index): ReferenceMenuOption => ({
-          id: res.resourceId,
-          key: res.resourceId,
-          index,
-          group: res.resourceType,
-          name: res.name,
-          description: res.description,
-          setRefElement: () => {},
-        }),
-      ),
-    [items],
-  );
-
-  useEffect(() => {
-    if (queryString == null || queryString === "") {
-      setResults(baseOptions);
-      return;
-    }
-
-    setResults(localFilter(baseOptions, queryString));
-  }, [queryString, baseOptions]);
-
-  return results;
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/utils/checkForTriggers.ts

@@ -1,45 +0,0 @@
-import type { MenuTextMatch } from "@lexical/react/LexicalTypeaheadMenuPlugin";
-
-const VALID_PUNCTUATION = "\\.\\-<>_:";
-const TRIGGERS = ["#"].join("");
-
-const VALID_CHARS = `[^${TRIGGERS}${VALID_PUNCTUATION}\\s]`;
-const VALID_JOINS = `(?:[${VALID_PUNCTUATION}]|)`;
-
-const LENGTH_LIMIT = 75;
-
-const TriggerRegex = new RegExp(`(^|\\s|\\()([${TRIGGERS}]((?:${VALID_CHARS}${VALID_JOINS}){0,${LENGTH_LIMIT}}))$`);
-
-const AliasRegex = new RegExp(`(^|\\s|\\()([${TRIGGERS}]((?:${VALID_CHARS}){0,${LENGTH_LIMIT}}))$`);
-
-/**
- * lexical will run this function on text nodes
- *
- * @param text
- * @param minMatchLength
- * @returns
- */
-export function checkForTriggers(text: string, minMatchLength: number): MenuTextMatch | null {
-  let match = TriggerRegex.exec(text);
-
-  if (match === null) {
-    match = AliasRegex.exec(text);
-  }
-
-  if (match !== null) {
-    // The strategy ignores leading whitespace but we need to know it's
-    // length to add it to the leadOffset
-    const maybeLeadingWhitespace = match[1];
-    const matchingString = match[3];
-
-    if (matchingString.length >= minMatchLength) {
-      return {
-        leadOffset: match.index + maybeLeadingWhitespace.length,
-        matchingString,
-        replaceableString: match[2],
-      };
-    }
-  }
-
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/ReferenceMenuPlugin/utils/getSortedMenuOptions.ts

@@ -1,20 +0,0 @@
-import { menuSortOrder } from "../constants";
-import type { MenuOptionGroup, ReferenceMenuOption } from "../ReferenceMenuOption";
-
-export const getSortedMenuOptions = (options: ReferenceMenuOption[]) => {
-  const sortedOptions = options
-    .sort((a, b) => menuSortOrder.indexOf(a.group) - menuSortOrder.indexOf(b.group))
-    .map((option, index) => ({ ...option, index }) as ReferenceMenuOption);
-
-  const groupedOptions = sortedOptions.reduce(
-    (acc, option) => {
-      const bucket = acc[option.group] ?? [];
-      bucket.push(option);
-      acc[option.group] = bucket;
-      return acc;
-    },
-    {} as Record<MenuOptionGroup, ReferenceMenuOption[]>,
-  );
-
-  return groupedOptions;
-};

package/src/components/rich-text/prompt-input/plugins/ReferencePlugin/ReferencePlugin.tsx

@@ -1,50 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import { COMMAND_PRIORITY_LOW, type LexicalNode } from "lexical";
-import { type PropsWithChildren, useEffect } from "react";
-import { INSERT_REFERENCE_COMMAND } from "../../commands";
-import { $createReferenceNode } from "./nodes/ReferenceNode/ReferenceNode";
-
-export const $insertExistingReference = (nodeToReplace: LexicalNode, resourceId: string, name: string) => {
-  const refNode = $createReferenceNode(resourceId, name);
-
-  if (nodeToReplace) {
-    nodeToReplace?.replace(refNode);
-    nodeToReplace.remove();
-    refNode.selectEnd();
-    return;
-  }
-};
-
-export function ReferencePlugin(
-  props: PropsWithChildren<{ onAddReference?: (resourceId: string, resourceType: "table" | "connector") => void }>,
-) {
-  const { onAddReference } = props;
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        INSERT_REFERENCE_COMMAND,
-        (event: {
-          resourceId: string;
-          resourceType: "table" | "connector";
-          name: string;
-          nodeToReplace: LexicalNode;
-        }) => {
-          const { resourceId, resourceType, name, nodeToReplace } = event;
-
-          editor.update(() => {
-            $insertExistingReference(nodeToReplace, resourceId, name);
-          });
-
-          onAddReference?.(resourceId, resourceType);
-          return true;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-  }, [editor, onAddReference]);
-
-  return null;
-}

package/src/components/rich-text/prompt-input/plugins/ReferencePlugin/nodes/ReferenceNode/ReferenceNode.tsx

@@ -1,107 +0,0 @@
-import { addClassNamesToElement } from "@lexical/utils";
-import {
-  type DOMExportOutput,
-  type EditorConfig,
-  type LexicalEditor,
-  type LexicalNode,
-  type NodeKey,
-  type SerializedTextNode,
-  type Spread,
-  TextNode,
-} from "lexical";
-
-type SerializedReferenceNode = Spread<
-  {
-    referenceId: string;
-    name: string;
-  },
-  SerializedTextNode
->;
-
-export class ReferenceNode extends TextNode {
-  __referenceId: string;
-  __name: string;
-
-  static getType(): string {
-    return "reference";
-  }
-
-  static clone(node: ReferenceNode): ReferenceNode {
-    return new ReferenceNode(node.__referenceId, node.__name, node.__key);
-  }
-
-  constructor(referenceId: string, name: string, key?: NodeKey) {
-    super(name, key);
-    this.__referenceId = referenceId;
-    this.__name = name;
-  }
-
-  isKeyboardSelectable(): boolean {
-    return false;
-  }
-
-  canBeEmpty(): boolean {
-    return false;
-  }
-
-  canInsertTextAfter(): boolean {
-    return false;
-  }
-
-  canInsertTextBefore(): boolean {
-    return false;
-  }
-
-  createDOM(config: EditorConfig): HTMLElement {
-    const span = document.createElement("span");
-    addClassNamesToElement(span, config.theme.reference);
-    span.setAttribute("data-reference-id", this.__referenceId);
-    span.setAttribute("data-name", this.__name);
-    span.textContent = `#${this.__name}`;
-    return span;
-  }
-
-  updateDOM(prevNode: ReferenceNode, dom: HTMLElement): boolean {
-    if (prevNode.__name !== this.__name || prevNode.__referenceId !== this.__referenceId) {
-      dom.setAttribute("data-reference-id", this.__referenceId);
-      dom.setAttribute("data-name", this.__name);
-      dom.textContent = `#${this.__name}`;
-    }
-
-    return false;
-  }
-
-  exportDOM(_editor: LexicalEditor): DOMExportOutput {
-    const el = document.createElement("span");
-    el.setAttribute("data-reference-id", this.__referenceId);
-    el.setAttribute("data-name", this.__name);
-    el.textContent = `#${this.__name}`;
-    return { element: el };
-  }
-
-  static importJSON(serializedNode: SerializedReferenceNode): ReferenceNode {
-    const node = new ReferenceNode(serializedNode.referenceId, serializedNode.name);
-    return node;
-  }
-
-  exportJSON(): SerializedReferenceNode {
-    return {
-      ...super.exportJSON(),
-      type: "reference",
-      referenceId: this.__referenceId,
-      name: this.__name,
-    };
-  }
-
-  getTextContent(): string {
-    return `#${this.__name}`;
-  }
-}
-
-export function $createReferenceNode(referenceId: string, name: string): ReferenceNode {
-  return new ReferenceNode(referenceId, name);
-}
-
-export function $isReferenceNode(node: LexicalNode | null | undefined): node is ReferenceNode {
-  return node instanceof ReferenceNode;
-}

package/src/components/rich-text/prompt-input/plugins/keyboard-shortcuts.ts

@@ -1,13 +0,0 @@
-type KeyDownLikeEvent = {
-  key: string;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  shiftKey: boolean;
-  altKey: boolean;
-};
-
-export const shouldSubmitOnEnter = (event: KeyDownLikeEvent) => {
-  if (event.key !== "Enter") return false;
-
-  return !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
-};

package/src/components/rich-text/prompt-input/prompt-input.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { PromptEditor, type ReferenceItem } from "./prompt-input";
-
-const sampleReferences: ReferenceItem[] = [
-  { resourceId: "table:users", resourceType: "table", name: "Users", description: "prod.users" },
-  { resourceId: "table:sessions", resourceType: "table", name: "Sessions", description: "prod.sessions_v2" },
-  {
-    resourceId: "connector:bigquery",
-    resourceType: "connector",
-    name: "BigQuery",
-    description: "Analytics",
-  },
-];
-
-const initialState = JSON.stringify(
-  {
-    root: {
-      children: [
-        {
-          children: [
-            {
-              detail: 0,
-              format: 0,
-              mode: "normal",
-              style: "",
-              text: "Type your query here or press / to add a reference.",
-              type: "text",
-              version: 1,
-            },
-          ],
-          direction: "ltr",
-          format: "",
-          indent: 0,
-          type: "paragraph",
-          version: 1,
-        },
-      ],
-      direction: "ltr",
-      format: "",
-      indent: 0,
-      type: "root",
-      version: 1,
-    },
-  },
-  null,
-  2,
-);
-
-const meta: Meta<typeof PromptEditor> = {
-  title: "Editors/PromptEditor",
-  component: PromptEditor,
-  parameters: {
-    layout: "padded",
-  },
-  args: {
-    defaultState: initialState,
-    debug: false,
-    isEditable: true,
-    references: sampleReferences,
-    onChange: (text: string) => console.log("onChange:", text),
-    onError: (error: Error) => console.error(error),
-    onAddReference: (resourceId: string, resourceType: ReferenceItem["resourceType"]) =>
-      console.log("reference added:", resourceId, resourceType),
-  },
-  argTypes: {
-    defaultState: {
-      control: "text",
-      description: "Serialized Lexical editor state (JSON string)",
-    },
-    isEditable: { control: "boolean" },
-    debug: { control: "boolean" },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PromptEditor>;
-
-export const Basic: Story = {};
-
-export const ReadOnly: Story = {
-  args: { isEditable: false },
-};
-
-export const DebugView: Story = {
-  args: { debug: true },
-};

package/src/components/rich-text/prompt-input/prompt-input.tsx

@@ -1,106 +0,0 @@
-import { Flex, Kbd, Text } from "@chakra-ui/react";
-import { MarkNode } from "@lexical/mark";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { $getRoot } from "lexical";
-import type { ReactElement } from "react";
-import { type ForwardRefRenderFunction, forwardRef, useRef } from "react";
-import { ContentEditable } from "../shared/components/content-editable";
-import ToggleEditablePlugin from "../shared/plugins/ToggleEditablePlugin";
-import { TreeViewPlugin } from "../shared/plugins/TreeViewPlugin/TreeViewPlugin";
-import { CommentPlugin } from "./plugins/CommentPlugin/CommentPlugin";
-import { CommentNode } from "./plugins/CommentPlugin/nodes/CommentNode/CommentNode";
-import { ImperativeAPIPlugin, type PromptEditorRef } from "./plugins/ImperativeAPIPlugin";
-import { KeyboardShortcutPlugin } from "./plugins/KeyboardShortcutPlugin";
-import { ReferenceMenuPlugin } from "./plugins/ReferenceMenuPlugin/ReferenceMenuPlugin";
-import { ReferenceNode } from "./plugins/ReferencePlugin/nodes/ReferenceNode/ReferenceNode";
-import { ReferencePlugin } from "./plugins/ReferencePlugin/ReferencePlugin";
-import theme from "./theme/prompt-input-theme";
-import { $getTextContent, getTextFromSerializedEditorState } from "./utils";
-
-export type ReferenceItem = {
-  resourceId: string;
-  resourceType: "table" | "connector";
-  name: string;
-  description?: string;
-};
-
-export interface PromptEditorProps {
-  defaultState: string;
-  debug?: boolean;
-  isEditable?: boolean;
-  placeholder?: ReactElement | ((isEditable: boolean) => ReactElement | null);
-  onChange?: (text: string, state: object) => void;
-  onError?: (error: Error) => void;
-  onSubmit?: () => void;
-  /** Dynamic list of references (tables, connectors) shown when typing # */
-  references?: ReferenceItem[];
-  /** Optional app callback when a reference is inserted */
-  onAddReference?: (resourceId: string, resourceType: "table" | "connector") => void;
-}
-
-const nodes = [CommentNode, MarkNode, ReferenceNode];
-
-export const BasePromptEditor: ForwardRefRenderFunction<PromptEditorRef, PromptEditorProps> = (props, ref) => {
-  const { defaultState, debug = false, isEditable = true, placeholder } = props;
-  const { onChange, onError = () => {}, onSubmit, references = [], onAddReference } = props;
-
-  const initialConfig = {
-    namespace: "PROMPT_EDITOR",
-    nodes,
-    editorState: defaultState,
-    editable: isEditable,
-    onError,
-    theme,
-  };
-
-  const previousTextRef = useRef<string>(getTextFromSerializedEditorState(defaultState));
-  const placeholderNode: ReactElement | ((isEditable: boolean) => ReactElement | null) = placeholder ?? (
-    <Text textStyle="label/M/regular" color="fg.subtle" pointerEvents="none" position="absolute" top="0">
-      Type your query here or press <Kbd color="fg.subtle">#</Kbd> to add a reference.
-    </Text>
-  );
-
-  return (
-    <Flex direction="column" justifyContent="space-between" width="100%" position="relative">
-      <LexicalComposer initialConfig={initialConfig}>
-        <HistoryPlugin />
-        <RichTextPlugin
-          contentEditable={<ContentEditable fullWidth />}
-          placeholder={placeholderNode}
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <OnChangePlugin
-          ignoreSelectionChange
-          ignoreHistoryMergeTagChange={false}
-          onChange={(editorState) => {
-            editorState.read(() => {
-              // handle comment blocks properly
-              const root = $getRoot();
-              const rawText = $getTextContent(root);
-
-              if (rawText !== previousTextRef.current) {
-                previousTextRef.current = rawText;
-                onChange?.(rawText, editorState.toJSON());
-              }
-            });
-          }}
-        />
-        <ImperativeAPIPlugin editorRef={ref} previousTextRef={previousTextRef} />
-        <ToggleEditablePlugin isEditable={isEditable} />
-        <CommentPlugin />
-        <KeyboardShortcutPlugin onSubmit={onSubmit} />
-        <ReferenceMenuPlugin items={references} />
-        <ReferencePlugin onAddReference={onAddReference} />
-        {debug ? <TreeViewPlugin /> : ""}
-      </LexicalComposer>
-    </Flex>
-  );
-};
-
-export const PromptEditor = forwardRef(BasePromptEditor);
-
-export type { PromptEditorRef } from "./plugins/ImperativeAPIPlugin";

package/src/components/rich-text/prompt-input/theme/prompt-input-theme.css

@@ -1,3 +0,0 @@
-.rich-text__p--no-margin {
-  margin: 0;
-}

package/src/components/rich-text/prompt-input/theme/prompt-input-theme.ts

@@ -1,11 +0,0 @@
-import type { EditorThemeClasses } from "lexical";
-import baseTheme from "../../theme/rich-text-theme";
-import "./prompt-input-theme.css";
-
-const promptInputTheme: EditorThemeClasses = {
-  ...baseTheme,
-  // Override paragraph class to remove margins specifically for prompt input
-  paragraph: "rich-text__p rich-text__p--no-margin",
-};
-
-export default promptInputTheme;