@dxos/react-ui-thread 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/Thread/Thread.stories.tsx

@@ -2,22 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useRef, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { createBasicExtensions, createThemeExtensions } from '@dxos/react-ui-editor';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/ui-theme';
+
+import { translations } from '#translations';
 
-import { Thread, ThreadFooter } from './Thread';
 import { MessageRoot, MessageTextbox } from '../Message';
-import { ThreadStoryContainer, MessageStoryText, type MessageEntity } from '../testing';
-import translations from '../translations';
+import { type MessageEntity, MessageStoryText } from '../testing';
+import { Thread } from './Thread';
 
-faker.seed(1);
+random.seed(1);
 
 const DefaultStory = () => {
   const [pending, setPending] = useState(false);
@@ -28,7 +28,7 @@ const DefaultStory = () => {
       id: `m${i + 1}`,
       timestamp: new Date().toISOString(),
       authorId: [identityKey1.toHex(), identityKey2.toHex()][i % 2],
-      text: faker.lorem.paragraph(),
+      text: random.lorem.paragraph(),
     })),
   );
 
@@ -59,13 +59,14 @@ const DefaultStory = () => {
   };
 
   return (
-    <ThreadStoryContainer>
-      <Thread id='t1'>
+    <div className='mx-auto w-96 overflow-y-auto'>
+      <Thread.Root id='t1'>
         {messages.map((message) => (
           <MessageRoot key={message.id} classNames={[hoverableControls, hoverableFocusedWithinControls]} {...message}>
             <MessageStoryText {...message} text={message.text} onDelete={() => console.log('delete')} />
           </MessageRoot>
         ))}
+
         <MessageTextbox
           id={String(_count)}
           authorId={identityKey1.toHex()}
@@ -73,18 +74,26 @@ const DefaultStory = () => {
           extensions={extensions}
           onSend={handleSend}
         />
-        <ThreadFooter activity>Processing...</ThreadFooter>
-      </Thread>
-    </ThreadStoryContainer>
+
+        <Thread.Status activity>Processing...</Thread.Status>
+      </Thread.Root>
+    </div>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-thread/Thread',
-  component: Thread,
+  component: Thread.Root,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof Thread.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

package/src/Thread/Thread.tsx

@@ -2,20 +2,29 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDoubleRight, Spinner } from '@phosphor-icons/react';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { ComponentPropsWithRef, forwardRef, PropsWithChildren } from 'react';
 
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../translations';
 import type { ThreadEntity } from '../types';
 
-export type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };
+// TODO(burdon): Avoid exporting fragments.
+export const threadLayout = 'w-full place-self-start grid grid-cols-[var(--dx-rail-size)_1fr]';
+
+//
+// Root
+//
 
-export const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';
+type ThreadRootProps = ThemedClassName<
+  PropsWithChildren<
+    ThreadEntity & { current?: boolean } & Pick<ComponentPropsWithRef<'div'>, 'onClickCapture' | 'onFocusCapture'>
+  >
+>;
 
-export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
+const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
   ({ current, children, classNames, ...props }, forwardedRef) => {
     return (
       <div
@@ -26,8 +35,7 @@ export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
         className={mx(
           threadLayout,
           hoverableFocusedWithinControls,
-          'pbs-2 pbe-4 bg-[var(--surface-bg)] border-separator first:border-bs-0 border-be',
-          'current-related attention-surface [--controls-opacity:0]',
+          'bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]',
           classNames,
         )}
         ref={forwardedRef}
@@ -38,24 +46,25 @@ export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
   },
 );
 
-export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };
+//
+// Heading
+//
+
+type ThreadHeaderProps = PropsWithChildren<{ detached?: boolean }>;
 
-export const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(
-  ({ classNames, children, detached, ...props }, forwardedRef) => {
+const ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(
+  ({ children, detached, ...props }, forwardedRef) => {
     return (
       <>
         <div role='none' className='flex items-center justify-center text-description'>
-          <CaretDoubleRight />
+          <Icon icon='ph--caret-double-right--regular' />
         </div>
         <div role='none' className='flex items-center overflow-hidden'>
           <p
             role='heading'
             data-testid='thread.heading'
             {...props}
-            className={mx(
-              'mie-2 text-description font-medium truncate italic',
-              detached && 'line-through decoration-1',
-            )}
+            className={mx('me-2 text-description font-medium truncate italic', detached && 'line-through decoration-1')}
             ref={forwardedRef}
           >
             {children}
@@ -66,32 +75,44 @@ export const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps
   },
 );
 
-export type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+//
+// Status
+//
+
+type ThreadStatusProps = ThemedClassName<PropsWithChildren> & {
   activity?: boolean;
 };
 
-export const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(
+const ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(
   ({ 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] pb-2 pie-2 text-xs text-description',
+          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description',
           classNames,
         )}
         ref={forwardedRef}
       >
-        <Spinner
-          weight='bold'
+        <Icon
+          icon='ph--spinner--bold'
+          classNames='w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow'
           data-visible={activity ? 'show' : 'hide'}
-          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'
         />
-        <span className='truncate min-is-0' aria-live='polite'>
+        <span className='truncate min-w-0' aria-live='polite'>
           {activity ? children : null}
         </span>
-        <span className={mx('text-end', hoverableControlItem)}>{t('enter to send message')}</span>
+        <span className={mx('text-end', hoverableControlItem)}>{t('enter-to-send.message')}</span>
       </div>
     );
   },
 );
+
+export const Thread = {
+  Root: ThreadRoot,
+  Header: ThreadHeader,
+  Status: ThreadStatus,
+};
+
+export type { ThreadRootProps, ThreadHeaderProps, ThreadStatusProps };

package/src/index.ts

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import translations from './translations';
-
 export * from './Thread';
 export * from './Message';
-export * from './types';
-export { translations };
+export type * from './types';

package/src/testing.tsx

@@ -2,11 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { X } from '@phosphor-icons/react';
-import React, { type PropsWithChildren } from 'react';
+import React from 'react';
 
-import { Button } from '@dxos/react-ui';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { IconButton } from '@dxos/react-ui';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
 import { MessageBody, MessageHeading } from './Message';
 import { type MessageMetadata } from './types';
@@ -26,13 +25,14 @@ export const MessageStoryText = ({ text, onDelete, authorName, timestamp }: Mess
     <>
       <MessageHeading authorName={authorName} timestamp={timestamp}>
         {onDelete && (
-          <Button
+          <IconButton
+            icon='ph--x--regular'
+            iconOnly
+            label='Delete'
             variant='ghost'
-            classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}
+            classNames={['p-1.5 min-h-0 me-1 items-start transition-opacity', hoverableControlItem]}
             onClick={() => onDelete()}
-          >
-            <X />
-          </Button>
+          />
         )}
       </MessageHeading>
       <MessageBody>{text}</MessageBody>
@@ -50,13 +50,9 @@ export const MessageStoryBlock = <PartValue,>({ part }: MessagePartProps<PartVal
       role='none'
       className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}
     >
-      <pre className='font-mono max-is-full overflow-x-auto col-span-3'>
+      <pre className='font-mono max-w-full overflow-x-auto col-span-3'>
         <code>{JSON.stringify(part, undefined, 2)}</code>
       </pre>
     </div>
   );
 };
-
-export const ThreadStoryContainer = ({ children }: PropsWithChildren) => {
-  return <div className={mx('bg-white dark:bg-black mli-auto is-96 overflow-y-auto')}>{children}</div>;
-};

package/src/translations.ts

@@ -2,23 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'thread';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = '@dxos/react-ui-thread';
+
+export const translations = [
   {
     '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 ⏎',
+        '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 ⏎',
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/types.ts

@@ -16,6 +16,7 @@ export type MessageMetadata = {
 };
 
 export type ThreadEntity = {
+  id?: string;
   topicId?: string;
   topicTitle?: string;
 };