@dxos/react-ui-thread 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/src/Thread/Thread.tsx

@@ -2,22 +2,26 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { ComponentPropsWithRef, forwardRef, PropsWithChildren } from 'react';
 
 import { Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../translations';
 import type { ThreadEntity } from '../types';
 
-// TODO(burdon): Why is this exported?
-export const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';
+// TODO(burdon): Avoid exporting fragments.
+export const threadLayout = 'w-full place-self-start grid grid-cols-[var(--dx-rail-size)_1fr]';
 
 //
 // Root
 //
 
-type ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };
+type ThreadRootProps = ThemedClassName<
+  PropsWithChildren<
+    ThreadEntity & { current?: boolean } & Pick<ComponentPropsWithRef<'div'>, 'onClickCapture' | 'onFocusCapture'>
+  >
+>;
 
 const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
   ({ current, children, classNames, ...props }, forwardedRef) => {
@@ -30,7 +34,7 @@ const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
         className={mx(
           threadLayout,
           hoverableFocusedWithinControls,
-          'bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]',
+          'bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]',
           classNames,
         )}
         ref={forwardedRef}
@@ -45,10 +49,10 @@ const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
 // Heading
 //
 
-type ThreadHeaderProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };
+type ThreadHeaderProps = PropsWithChildren<{ detached?: boolean }>;
 
 const ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(
-  ({ classNames, children, detached, ...props }, forwardedRef) => {
+  ({ children, detached, ...props }, forwardedRef) => {
     return (
       <>
         <div role='none' className='flex items-center justify-center text-description'>
@@ -59,10 +63,7 @@ const ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(
             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}
@@ -77,7 +78,7 @@ const ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(
 // Status
 //
 
-type ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+type ThreadStatusProps = ThemedClassName<PropsWithChildren> & {
   activity?: boolean;
 };
 
@@ -88,20 +89,20 @@ const ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(
       <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}
       >
         <Icon
           icon='ph--spinner--bold'
-          classNames='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'
+          classNames='w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow'
           data-visible={activity ? 'show' : 'hide'}
         />
-        <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>
     );
   },
@@ -113,4 +114,4 @@ export const Thread = {
   Status: ThreadStatus,
 };
 
-export type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, ThreadStatusProps };
+export type { ThreadRootProps, ThreadHeaderProps, ThreadStatusProps };

package/src/testing.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { Button, Icon } 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';
@@ -25,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()}
-          >
-            <Icon icon='ph--x--regular' />
-          </Button>
+          />
         )}
       </MessageHeading>
       <MessageBody>{text}</MessageBody>
@@ -49,7 +50,7 @@ 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>

package/src/translations.ts

@@ -4,22 +4,22 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-thread';
+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 ⏎',
       },
     },
   },

package/src/types.ts

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