@dxos/react-ui-thread 0.3.11-main.0e02eb0

package/src/Thread/Comments.stories.tsx

@@ -0,0 +1,368 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import { Check, Trash } from '@phosphor-icons/react';
+import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import { TextObject } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
+import { Button } from '@dxos/react-ui';
+import {
+  MarkdownEditor,
+  comments,
+  type CommentsOptions,
+  focusComment,
+  useComments,
+  type Comment,
+  type Range,
+  useTextModel,
+  type EditorView,
+  TextEditor,
+} from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Thread, ThreadFooter, ThreadHeading } from './Thread';
+import { Message, type MessageBlockProps, MessageTextbox } from '../Message';
+import translations from '../translations';
+import { type MessageEntity } from '../types';
+
+faker.seed(101);
+
+const authorId = PublicKey.random().toHex();
+
+//
+// Editor
+//
+
+const Editor: FC<{
+  item: { text: TextObject };
+  comments: Comment[];
+  selected?: string;
+  onCreateComment: CommentsOptions['onCreate'];
+  onDeleteComment: CommentsOptions['onDelete'];
+  onUpdateComment: CommentsOptions['onUpdate'];
+  onSelectComment: CommentsOptions['onSelect'];
+}> = ({
+  item,
+  selected: selectedValue,
+  comments: commentRanges,
+  onCreateComment,
+  onDeleteComment,
+  onUpdateComment,
+  onSelectComment,
+}) => {
+  const model = useTextModel({ text: item.text });
+  const view = useRef<EditorView>(null);
+  const [selected, setSelected] = useState<string>();
+  useEffect(() => {
+    if (!view.current?.hasFocus && selectedValue !== selected) {
+      setSelected(selectedValue);
+      if (selectedValue) {
+        focusComment(view.current!, selectedValue);
+      }
+    }
+  }, [selected, commentRanges, selectedValue]);
+
+  useComments(view.current, commentRanges);
+
+  const extensions = useMemo(() => {
+    return [
+      comments({
+        onCreate: onCreateComment,
+        onDelete: onDeleteComment,
+        onUpdate: onUpdateComment,
+        onSelect: onSelectComment,
+      }),
+    ];
+  }, []);
+
+  if (!model) {
+    return null;
+  }
+
+  // TODO(burdon): Highlight currently selected comment.
+  return <MarkdownEditor ref={view} model={model} extensions={extensions} />;
+};
+
+//
+// Comments thread
+//
+
+type StoryCommentThread = {
+  id: string;
+  cursor?: string;
+  range?: Range;
+  yPos?: number;
+  messages: MessageEntity<{ text: TextObject }>[];
+};
+
+const StoryMessageBlock = (props: MessageBlockProps<{ text: TextObject }>) => {
+  const model = useTextModel({ text: props.block.text });
+  return model ? <TextEditor model={model} slots={{ root: { className: 'col-span-3' } }} /> : null;
+};
+
+const StoryThread: FC<{
+  thread: StoryCommentThread;
+  selected: boolean;
+  onSelect: () => void;
+  onResolve: () => void;
+}> = ({ thread, selected, onSelect, onResolve }) => {
+  const [autoFocus, setAutoFocus] = useState(false);
+  const [item, setItem] = useState({ text: new TextObject() });
+  const model = useTextModel({ text: item.text });
+  const editorRef = useRef<EditorView>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (selected) {
+      containerRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      if (thread.messages.length === 0) {
+        setAutoFocus(true);
+      }
+    }
+  }, [selected]);
+
+  const handleCreateMessage = () => {
+    const text = model?.text().trim();
+    if (text?.length) {
+      thread.messages.push({
+        id: item.text.id,
+        authorId,
+        blocks: [{ text: item.text, timestamp: new Date().toISOString() }],
+      });
+      setItem({ text: new TextObject() });
+      setAutoFocus(true);
+    }
+  };
+
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <Thread current={selected} onClickCapture={onSelect}>
+      <div className='col-start-2 flex gap-1 text-xs fg-description'>
+        <span>id:{thread.id.slice(0, 4)}</span>
+        <span>y:{thread.yPos}</span>
+        <span className='grow' />
+        {!thread.cursor && <Trash />}
+      </div>
+      <ThreadHeading>
+        {thread.range?.from} &ndash; {thread.range?.to}
+      </ThreadHeading>
+
+      {thread.messages.map((message) => (
+        <Message<{ text: TextObject }> key={message.id} {...message} MessageBlockComponent={StoryMessageBlock} />
+      ))}
+
+      <div ref={containerRef} className='contents'>
+        <MessageTextbox
+          authorId={authorId}
+          ref={editorRef}
+          autoFocus={autoFocus}
+          onEditorFocus={onSelect}
+          model={model}
+          onSend={handleCreateMessage}
+        />
+        <ThreadFooter />
+        <Button variant='ghost' classNames='px-1' title='Resolve' onClick={onResolve}>
+          <Check />
+        </Button>
+      </div>
+    </Thread>
+  );
+};
+
+const Sidebar: FC<{
+  threads: StoryCommentThread[];
+  selected?: string;
+  onSelect: (thread: string) => void;
+  onResolve: (thread: string) => void;
+}> = ({ threads, selected, onSelect, onResolve }) => {
+  // Sort by y-position.
+  const sortedThreads = useMemo(() => {
+    const sorted = [...threads];
+    return sorted.sort(({ yPos: a = Infinity }, { yPos: b = Infinity }) => {
+      return a < b ? -1 : a > b ? 1 : 0;
+    });
+  }, [threads]);
+
+  return (
+    <>
+      {sortedThreads.map((thread) => (
+        <StoryThread
+          key={thread.id}
+          thread={thread}
+          selected={thread.id === selected}
+          onSelect={() => onSelect(thread.id)}
+          onResolve={() => onResolve(thread.id)}
+        />
+      ))}
+    </>
+  );
+};
+
+//
+// Story container.
+//
+
+type StoryProps = {
+  text?: string;
+  autoCreate?: boolean;
+};
+
+const Story = ({ text, autoCreate }: StoryProps) => {
+  const [item] = useState({ text: new TextObject(text) });
+  const [threads, setThreads] = useState<StoryCommentThread[]>([]);
+  const [selected, setSelected] = useState<string>();
+
+  const comments = useMemo<Comment[]>(() => threads.map(({ id, cursor }) => ({ id, cursor })), [threads]);
+
+  // Filter by visibility.
+  const visibleThreads = useMemo(() => threads.filter((thread) => thread.yPos !== undefined), [threads]);
+
+  const handleCreateComment: CommentsOptions['onCreate'] = (cursor, location) => {
+    const id = PublicKey.random().toHex();
+    log.info('create', { id: id.slice(0, 4), cursor });
+    setThreads((threads) => [
+      ...threads,
+      {
+        id,
+        cursor,
+        yPos: location ? Math.floor(location.top) : undefined,
+        messages: autoCreate
+          ? faker.helpers.multiple(
+              () => ({
+                id: PublicKey.random().toHex(),
+                authorId: PublicKey.random().toHex(),
+                blocks: [
+                  {
+                    timestamp: new Date().toISOString(),
+                    text: new TextObject(faker.lorem.sentence()),
+                  },
+                ],
+              }),
+              { count: { min: 1, max: 3 } },
+            )
+          : [],
+      },
+    ]);
+    setSelected(id); // TODO(burdon): Not required.
+    return id;
+  };
+
+  const handleDeleteComment: CommentsOptions['onDelete'] = (id) => {
+    log.info('delete', { id: id.slice(0, 4) });
+    setThreads((threads) =>
+      threads.map((thread) => {
+        if (thread.id === id) {
+          thread.cursor = undefined;
+        }
+
+        return thread;
+      }),
+    );
+
+    setSelected((selected) => (selected === id ? undefined : selected));
+  };
+
+  const handleUpdateComment: CommentsOptions['onUpdate'] = (id, cursor) => {
+    log.info('update', { id: id.slice(0, 4), cursor });
+    setThreads((threads) =>
+      threads.map((thread) => {
+        if (thread.id === id) {
+          thread.cursor = cursor;
+        }
+
+        return thread;
+      }),
+    );
+  };
+
+  const handleSelectComment: CommentsOptions['onSelect'] = ({ comments, selection: { current, closest } }) => {
+    log.info('select', { active: current?.slice(0, 4), closest: closest?.slice(0, 4) });
+    setThreads((threads) =>
+      threads.map((thread) => {
+        const comment = comments.find(({ comment }) => comment.id === thread.id);
+        if (comment) {
+          thread.yPos = comment.location ? Math.floor(comment.location.top) : undefined;
+          thread.range = { from: comment.range.from, to: comment.range.to };
+        }
+
+        return thread;
+      }),
+    );
+
+    setSelected(current ?? closest);
+  };
+
+  const handleSelectThread = (id: string) => {
+    setSelected(id);
+  };
+
+  const handleResolveThread = (id: string) => {
+    setThreads((threads) => [...threads.filter((thread) => thread.id !== id)]);
+    setSelected(undefined);
+  };
+
+  return (
+    <main className='fixed inset-0 grid grid-cols-[1fr_24rem]'>
+      <div role='none' className='max-bs-full overflow-y-auto p-4'>
+        <Editor
+          item={item}
+          selected={selected}
+          comments={comments}
+          onCreateComment={handleCreateComment}
+          onDeleteComment={handleDeleteComment}
+          onUpdateComment={handleUpdateComment}
+          onSelectComment={handleSelectComment}
+        />
+      </div>
+
+      <div role='none' className='max-bs-full overflow-y-auto p-4'>
+        <Sidebar
+          threads={visibleThreads}
+          selected={selected}
+          onSelect={handleSelectThread}
+          onResolve={handleResolveThread}
+        />
+      </div>
+    </main>
+  );
+};
+
+export default {
+  title: 'react-ui-thread/Comments',
+  component: StoryThread,
+  decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
+  parameters: { translations, layout: 'fullscreen' },
+};
+
+const str = (...lines: string[]) => lines.join('\n');
+
+const document = str(
+  '# Comments',
+  '',
+  str(...faker.helpers.multiple(() => [faker.lorem.paragraph({ min: 5, max: 10 }), ''], { count: 20 }).flat()),
+  '',
+);
+
+export const Default = {
+  args: {
+    text: document,
+  },
+};
+
+export const Testing = {
+  args: {
+    text: document,
+    autoCreate: true,
+  },
+};

package/src/Thread/Thread.stories.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { useInMemoryTextModel } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Thread, ThreadFooter } from './Thread';
+import { Message, MessageTextbox } from '../Message';
+import translations from '../translations';
+import { type MessageEntity } from '../types';
+
+const Story = () => {
+  const [pending, setPending] = useState(false);
+  const [identityKey1] = useState(PublicKey.random());
+  const [identityKey2] = useState(PublicKey.random());
+  const [messages] = useState<MessageEntity<{ id: string; text: string }>[]>([
+    {
+      id: 'm1',
+      authorId: identityKey1.toHex(),
+      blocks: [
+        {
+          id: 'b1',
+          timestamp: new Date().toISOString(),
+          text: 'hello',
+        },
+      ],
+    },
+    {
+      id: 'm2',
+      authorId: identityKey2.toHex(),
+      blocks: [
+        {
+          id: 'b2',
+          timestamp: new Date().toISOString(),
+          text: 'hi there',
+        },
+      ],
+    },
+  ]);
+  const nextMessageModel = useInMemoryTextModel({ id: 't1__next' });
+
+  // TODO(thure): Why does pressing Enter clear the text content?
+  //  Something to do with the in-memory text model perhaps?
+  const handleSend = () => {
+    setPending(true);
+    setTimeout(() => {
+      nextMessageModel.setContent('');
+      setPending(false);
+    }, 2_000);
+  };
+
+  return (
+    <Thread id='t1'>
+      {messages.map((message) => (
+        <Message key={message.id} {...message} />
+      ))}
+      <MessageTextbox disabled={pending} authorId={identityKey1.toHex()} onSend={handleSend} model={nextMessageModel} />
+      <ThreadFooter activity>Someone is typing</ThreadFooter>
+    </Thread>
+  );
+};
+
+export default {
+  title: 'react-ui-thread/Thread',
+  component: Thread,
+  render: Story,
+  decorators: [withTheme],
+  parameters: { translations },
+};
+
+export const Default = {};

package/src/Thread/Thread.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowBendLeftDown, DotsThreeOutline } from '@phosphor-icons/react';
+import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+
+import { translationKey } from '../translations';
+import type { ThreadEntity } from '../types';
+
+export type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
+  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };
+
+export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
+  ({ current, children, classNames, ...props }, forwardedRef) => {
+    return (
+      <div
+        role='group'
+        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}
+        {...props}
+        className={mx(
+          'is-full place-self-start grid grid-cols-[3rem_1fr] bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',
+          hoverableFocusedWithinControls,
+          classNames,
+        )}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
+
+export const ThreadHeading = forwardRef<HTMLDivElement, ThreadHeadingProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <div
+        role='heading'
+        {...props}
+        className={mx('col-span-2 grid grid-cols-subgrid fg-description font-medium', classNames)}
+        ref={forwardedRef}
+      >
+        <div role='none' className='grid place-items-end pie-3.5 fg-separator'>
+          <ArrowBendLeftDown />
+        </div>
+        <p>{children}</p>
+      </div>
+    );
+  },
+);
+
+export type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+  activity?: boolean;
+};
+
+export const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(
+  ({ activity, classNames, children, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <div
+        {...props}
+        className={mx('col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description', classNames)}
+        ref={forwardedRef}
+      >
+        <DotsThreeOutline
+          weight='fill'
+          data-visible={activity ? 'show' : 'hide'}
+          className='is-6 bs-4 invisible data-[visible=show]:visible'
+        />
+        <span className='truncate min-is-0' aria-live='polite'>
+          {activity ? children : null}
+        </span>
+        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>
+      </div>
+    );
+  },
+);

package/src/Thread/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Thread';

package/src/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import translations from './translations';
+
+export * from './Thread';
+export * from './Message';
+export * from './types';
+export { translations };

package/src/translations.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const translationKey = 'thread';
+
+export default [
+  {
+    'en-US': {
+      [translationKey]: {
+        'plugin name': 'Threads',
+        'thread title placeholder': 'New thread',
+        'thread title label': 'Title',
+        'delete thread label': 'Delete',
+        'create thread label': 'Create thread',
+        'message placeholder': 'Enter message...',
+        'comment placeholder': 'Enter comment...',
+        'settings standalone label': 'Enable standalone thread creation',
+        'anonymous label': 'Anonymous',
+        'enter to send message': 'Enter to add ⏎',
+      },
+    },
+  },
+];

package/src/types.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { AvatarStatus } from '@dxos/react-ui';
+
+export type MessageMetadata = {
+  id: string;
+  authorId: string;
+  authorName?: string;
+  authorImgSrc?: string;
+  authorStatus?: AvatarStatus;
+};
+
+export type MessageEntityBlock<BlockValue> = BlockValue & {
+  timestamp?: string;
+};
+
+export type MessageEntity<BlockValue> = MessageMetadata & {
+  blocks: MessageEntityBlock<BlockValue>[];
+};
+
+export type ThreadEntity = {
+  topicId?: string;
+  topicTitle?: string;
+};