@dxos/react-ui-thread 0.6.9 → 0.6.10-main.3cfcc89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +6 -6
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/Message/Message.stories.d.ts +1 -1
- package/dist/types/src/Message/Message.stories.d.ts.map +1 -1
- package/dist/types/src/Thread/Comments.stories.d.ts +1 -1
- package/dist/types/src/Thread/Comments.stories.d.ts.map +1 -1
- package/dist/types/src/Thread/Thread.d.ts.map +1 -1
- package/dist/types/src/Thread/Thread.stories.d.ts +1 -1
- package/dist/types/src/Thread/Thread.stories.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/Message/Message.stories.tsx +1 -1
- package/src/Message/Message.tsx +3 -3
- package/src/Thread/Comments.stories.tsx +2 -2
- package/src/Thread/Thread.stories.tsx +1 -1
- package/src/Thread/Thread.tsx +6 -3
|
@@ -40,7 +40,7 @@ var Thread = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...pro
|
|
|
40
40
|
var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
41
41
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
42
42
|
role: "none",
|
|
43
|
-
className: "flex items-center justify-center
|
|
43
|
+
className: "flex items-center justify-center text-description"
|
|
44
44
|
}, /* @__PURE__ */ React.createElement(CaretDoubleRight, null)), /* @__PURE__ */ React.createElement("div", {
|
|
45
45
|
role: "none",
|
|
46
46
|
className: "flex items-center overflow-hidden"
|
|
@@ -48,7 +48,7 @@ var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, detached
|
|
|
48
48
|
role: "heading",
|
|
49
49
|
"data-testid": "thread.heading",
|
|
50
50
|
...props,
|
|
51
|
-
className: mx("mie-2
|
|
51
|
+
className: mx("mie-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
|
|
52
52
|
ref: forwardedRef
|
|
53
53
|
}, children)));
|
|
54
54
|
});
|
|
@@ -56,7 +56,7 @@ var ThreadFooter = /* @__PURE__ */ forwardRef(({ activity, classNames, children,
|
|
|
56
56
|
const { t } = useTranslation(translationKey);
|
|
57
57
|
return /* @__PURE__ */ React.createElement("div", {
|
|
58
58
|
...props,
|
|
59
|
-
className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs
|
|
59
|
+
className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description", classNames),
|
|
60
60
|
ref: forwardedRef
|
|
61
61
|
}, /* @__PURE__ */ React.createElement(Spinner, {
|
|
62
62
|
weight: "bold",
|
|
@@ -99,7 +99,7 @@ var MessageRoot = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorN
|
|
|
99
99
|
href: authorImgSrc
|
|
100
100
|
})), continues && /* @__PURE__ */ React2.createElement("div", {
|
|
101
101
|
role: "none",
|
|
102
|
-
className: "is-px grow
|
|
102
|
+
className: "is-px grow bg-bg-separator"
|
|
103
103
|
})), /* @__PURE__ */ React2.createElement("div", {
|
|
104
104
|
role: "none",
|
|
105
105
|
className: "plb-1 min-is-0"
|
|
@@ -122,14 +122,14 @@ var MessageHeading = ({ children, classNames, timestamp, authorName, ...props })
|
|
|
122
122
|
var MessageAuthorName = ({ authorName }) => {
|
|
123
123
|
const { t } = useTranslation2(translationKey);
|
|
124
124
|
return /* @__PURE__ */ React2.createElement(Avatar.Label, {
|
|
125
|
-
classNames: "block truncate text-sm
|
|
125
|
+
classNames: "block truncate text-sm text-subdued"
|
|
126
126
|
}, authorName ?? t("anonymous label"));
|
|
127
127
|
};
|
|
128
128
|
var MessageTime = ({ timestamp }) => {
|
|
129
129
|
const { dtLocale } = useTranslation2(translationKey);
|
|
130
130
|
const dt = timestamp ? new Date(timestamp) : void 0;
|
|
131
131
|
return /* @__PURE__ */ React2.createElement("time", {
|
|
132
|
-
className: "block
|
|
132
|
+
className: "block text-subdued text-xs pbe-0.5",
|
|
133
133
|
dateTime: dt?.toISOString()
|
|
134
134
|
}, dt ? formatDistanceToNow(dt, {
|
|
135
135
|
locale: dtLocale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'plugin name': 'Threads',\n 'thread title placeholder': 'New thread',\n 'thread title label': 'Title',\n 'delete thread label': 'Delete',\n 'create thread label': 'Create thread',\n 'message placeholder': 'Enter message...',\n 'comment placeholder': 'Enter comment...',\n 'settings standalone label': 'Enable standalone thread creation',\n 'anonymous label': 'Anonymous',\n 'enter to send message': 'Enter to add ⏎',\n },\n },\n },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDoubleRight, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n ({ current, children, classNames, ...props }, forwardedRef) => {\n return (\n <div\n role='group'\n data-testid='thread'\n {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n {...props}\n className={mx(\n threadLayout,\n hoverableFocusedWithinControls,\n 'plb-1.5 bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs first:border-bs-0 border-be',\n 'attention attention-within attention-current [--controls-opacity:0]',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n ({ classNames, children, detached, ...props }, forwardedRef) => {\n return (\n <>\n <div role='none' className='flex items-center justify-center
|
|
5
|
-
"mappings": ";AAIO,IAAMA,iBAAiB;AAE9B,IAAA,uBAAe;EACb;IACE,SAAS;MACP,CAACA,cAAAA,GAAiB;QAChB,eAAe;QACf,4BAA4B;QAC5B,sBAAsB;QACtB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,mBAAmB;QACnB,yBAAyB;MAC3B;IACF;EACF;;;;AClBF,SAASC,kBAAkBC,eAAe;AAC1C,OAAOC,SAA0DC,kBAAkB;AAEnF,SAA+BC,sBAAsB;AACrD,SAASC,sBAAsBC,gCAAgCC,UAAU;AAQlE,IAAMC,eAAe;AAErB,IAAMC,SAASC,2BACpB,CAAC,EAAEC,SAASC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AAC5C,SACE,sBAAA,cAACC,OAAAA;IACCC,MAAK;IACLC,eAAY;IACX,GAAIP,WAAW;MAAE,gBAAgB,OAAOA,YAAY,WAAWA,UAAU;IAAW;IACpF,GAAGG;IACJK,WAAWC,GACTZ,cACAa,gCACA,gHACA,uEACAR,UAAAA;IAEFS,KAAKP;KAEJH,QAAAA;AAGP,CAAA;AAKK,IAAMW,gBAAgBb,2BAC3B,CAAC,EAAEG,YAAYD,UAAUY,UAAU,GAAGV,MAAAA,GAASC,iBAAAA;AAC7C,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOE,WAAU;KACzB,sBAAA,cAACM,kBAAAA,IAAAA,CAAAA,GAEH,sBAAA,cAACT,OAAAA;IAAIC,MAAK;IAAOE,WAAU;KACzB,sBAAA,cAACO,KAAAA;IACCT,MAAK;IACLC,eAAY;IACX,GAAGJ;IACJK,WAAWC,
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'plugin name': 'Threads',\n 'thread title placeholder': 'New thread',\n 'thread title label': 'Title',\n 'delete thread label': 'Delete',\n 'create thread label': 'Create thread',\n 'message placeholder': 'Enter message...',\n 'comment placeholder': 'Enter comment...',\n 'settings standalone label': 'Enable standalone thread creation',\n 'anonymous label': 'Anonymous',\n 'enter to send message': 'Enter to add ⏎',\n },\n },\n },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDoubleRight, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n ({ current, children, classNames, ...props }, forwardedRef) => {\n return (\n <div\n role='group'\n data-testid='thread'\n {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n {...props}\n className={mx(\n threadLayout,\n hoverableFocusedWithinControls,\n 'plb-1.5 bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs first:border-bs-0 border-be',\n 'attention attention-within attention-current [--controls-opacity:0]',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n ({ classNames, children, detached, ...props }, forwardedRef) => {\n return (\n <>\n <div role='none' className='flex items-center justify-center text-description'>\n <CaretDoubleRight />\n </div>\n <div role='none' className='flex items-center overflow-hidden'>\n <p\n role='heading'\n data-testid='thread.heading'\n {...props}\n className={mx(\n 'mie-2 text-description font-medium truncate italic',\n detached && 'line-through decoration-1',\n )}\n ref={forwardedRef}\n >\n {children}\n </p>\n </div>\n </>\n );\n },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n ({ activity, classNames, children, ...props }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n return (\n <div\n {...props}\n className={mx(\n 'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description',\n classNames,\n )}\n ref={forwardedRef}\n >\n <Spinner\n weight='bold'\n data-visible={activity ? 'show' : 'hide'}\n className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n />\n <span className='truncate min-is-0' aria-live='polite'>\n {activity ? children : null}\n </span>\n <span className={mx('text-end', hoverableControlItem)}>{t('enter to send message')}</span>\n </div>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, forwardRef, type ComponentPropsWithoutRef } from 'react';\n\n// TODO(burdon): Remove dep.\nimport { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type UseTextEditorProps, keymap, listener, useTextEditor } from '@dxos/react-ui-editor';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\nimport { hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n MessageMetadata &\n Partial<{ continues: boolean }>;\n\nexport const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(\n (\n { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n forwardedRef,\n ) => {\n return (\n // Must wrap the message since Avatar.Label may be used in the content.\n <Avatar.Root size={avatarSize} hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}>\n <div\n role='none'\n data-testid='thread.message'\n {...rootProps}\n className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n ref={forwardedRef}\n >\n <div role='none' className='flex flex-col items-center gap-2 pbs-2'>\n <Avatar.Frame>\n <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />\n {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n </Avatar.Frame>\n {continues && <div role='none' className='is-px grow bg-bg-separator' />}\n </div>\n <div role='none' className='plb-1 min-is-0'>\n {children}\n </div>\n </div>\n </Avatar.Root>\n );\n },\n);\n\nexport type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &\n Pick<MessageMetadata, 'authorName' | 'timestamp'>;\n\nexport const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {\n return (\n <div role='none' {...props} className={mx('flex gap-2 items-start', classNames)}>\n <p className='grow'>\n <MessageAuthorName authorName={authorName} />\n {timestamp && <MessageTime timestamp={timestamp} />}\n </p>\n {children}\n </div>\n );\n};\n\nexport type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;\n\nexport const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {\n const { t } = useTranslation(translationKey);\n return (\n <Avatar.Label classNames='block truncate text-sm text-subdued'>{authorName ?? t('anonymous label')}</Avatar.Label>\n );\n};\n\nexport type MessageTimeProps = Pick<MessageMetadata, 'timestamp'>;\n\nexport const MessageTime = ({ timestamp }: MessageTimeProps) => {\n const { dtLocale } = useTranslation(translationKey);\n const dt = timestamp ? new Date(timestamp) : undefined;\n return (\n <time className='block text-subdued text-xs pbe-0.5' dateTime={dt?.toISOString()}>\n {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n </time>\n );\n};\n\nexport type MessageBodyProps = ComponentPropsWithoutRef<'p'>;\n\nexport const MessageBody = ({ children, ...props }: MessageBodyProps) => {\n return <p {...props}>{children}</p>;\n};\n\nexport type MessageTextboxProps = {\n disabled?: boolean;\n onSend?: () => void;\n onClear?: () => void;\n onEditorFocus?: () => void;\n} & MessageMetadata &\n UseTextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n {\n key: 'Enter',\n run: () => {\n if (onSend) {\n onSend();\n return true;\n } else {\n return false;\n }\n },\n },\n {\n // TODO(burdon): Other key bindings.\n key: 'Meta+Backspace',\n run: () => {\n if (onClear) {\n onClear();\n return true;\n } else {\n return false;\n }\n },\n },\n];\n\nexport const MessageTextbox = ({\n id,\n authorId,\n authorName,\n authorImgSrc,\n authorAvatarProps,\n disabled,\n extensions,\n onSend,\n onClear,\n onEditorFocus,\n ...editorProps\n}: MessageTextboxProps) => {\n const { parentRef, focusAttributes } = useTextEditor(\n () => ({\n id,\n extensions: [\n keymap.of(keyBindings({ onSend, onClear })),\n listener({\n onFocus: (focusing) => {\n if (focusing) {\n onEditorFocus?.();\n }\n },\n }),\n extensions,\n ].filter(isNotFalsy),\n ...editorProps,\n }),\n [id, extensions],\n );\n\n return (\n <MessageRoot {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n <div\n role='none'\n ref={parentRef}\n className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n {...focusAttributes}\n />\n </MessageRoot>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["translationKey", "CaretDoubleRight", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "CaretDoubleRight", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "formatDistanceToNow", "React", "forwardRef", "Avatar", "useTranslation", "keymap", "listener", "useTextEditor", "focusRing", "mx", "hexToEmoji", "hexToHue", "isNotFalsy", "avatarSize", "MessageRoot", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "size", "hue", "hexToHue", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "text", "emoji", "hexToEmoji", "Image", "href", "MessageHeading", "timestamp", "props", "p", "MessageAuthorName", "MessageTime", "t", "useTranslation", "translationKey", "Label", "dtLocale", "dt", "Date", "undefined", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "MessageBody", "keyBindings", "onSend", "onClear", "key", "run", "MessageTextbox", "id", "disabled", "extensions", "onEditorFocus", "editorProps", "parentRef", "focusAttributes", "useTextEditor", "keymap", "of", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "focusRing"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2337,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2337,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9806,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":16948,"imports":[{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":863,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":913,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15104},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["MessageAuthorName","MessageBody","MessageHeading","MessageRoot","MessageTextbox","MessageTime","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2598},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":4329},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":7944}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA+BxC,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAQ7E,OAAO,EAML,KAAK,KAAK,EAMX,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAqEhD,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B,CAAC;AAwHF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;gBAxHQ,kBAAkB;kBAChB,OAAO;kBACP,MAAM,IAAI;mBACT,MAAM,IAAI;;;mBAgPN,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,YAAY,mEAAmE,CAAC;AAE7F,eAAO,MAAM,MAAM,iGAqBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,YAAY,mEAAmE,CAAC;AAE7F,eAAO,MAAM,MAAM,iGAqBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,eAAO,MAAM,aAAa,8GAwBzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,uGAwBxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAoC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA2EzD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-thread",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.10-main.3cfcc89",
|
|
4
4
|
"description": "A set of components to use with threads, including comments and messages.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@radix-ui/react-primitive": "^1.0.2",
|
|
25
25
|
"date-fns": "^3.3.1",
|
|
26
|
-
"@dxos/react-ui": "0.6.
|
|
27
|
-
"@dxos/react-ui-
|
|
28
|
-
"@dxos/react-ui-
|
|
29
|
-
"@dxos/
|
|
30
|
-
"@dxos/
|
|
26
|
+
"@dxos/react-ui": "0.6.10-main.3cfcc89",
|
|
27
|
+
"@dxos/react-ui-mosaic": "0.6.10-main.3cfcc89",
|
|
28
|
+
"@dxos/react-ui-theme": "0.6.10-main.3cfcc89",
|
|
29
|
+
"@dxos/util": "0.6.10-main.3cfcc89",
|
|
30
|
+
"@dxos/react-ui-editor": "0.6.10-main.3cfcc89"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"react": "~18.2.0",
|
|
37
37
|
"react-dom": "~18.2.0",
|
|
38
38
|
"vite": "^5.3.4",
|
|
39
|
-
"@dxos/echo-db": "0.6.
|
|
40
|
-
"@dxos/echo-schema": "0.6.
|
|
41
|
-
"@dxos/
|
|
42
|
-
"@dxos/random": "0.6.
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
39
|
+
"@dxos/echo-db": "0.6.10-main.3cfcc89",
|
|
40
|
+
"@dxos/echo-schema": "0.6.10-main.3cfcc89",
|
|
41
|
+
"@dxos/keys": "0.6.10-main.3cfcc89",
|
|
42
|
+
"@dxos/random": "0.6.10-main.3cfcc89",
|
|
43
|
+
"@dxos/storybook-utils": "0.6.10-main.3cfcc89",
|
|
44
|
+
"@dxos/log": "0.6.10-main.3cfcc89"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@phosphor-icons/react": "^2.1.5",
|
package/src/Message/Message.tsx
CHANGED
|
@@ -40,7 +40,7 @@ export const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
|
|
|
40
40
|
<Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />
|
|
41
41
|
{authorImgSrc && <Avatar.Image href={authorImgSrc} />}
|
|
42
42
|
</Avatar.Frame>
|
|
43
|
-
{continues && <div role='none' className='is-px grow
|
|
43
|
+
{continues && <div role='none' className='is-px grow bg-bg-separator' />}
|
|
44
44
|
</div>
|
|
45
45
|
<div role='none' className='plb-1 min-is-0'>
|
|
46
46
|
{children}
|
|
@@ -71,7 +71,7 @@ export type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;
|
|
|
71
71
|
export const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {
|
|
72
72
|
const { t } = useTranslation(translationKey);
|
|
73
73
|
return (
|
|
74
|
-
<Avatar.Label classNames='block truncate text-sm
|
|
74
|
+
<Avatar.Label classNames='block truncate text-sm text-subdued'>{authorName ?? t('anonymous label')}</Avatar.Label>
|
|
75
75
|
);
|
|
76
76
|
};
|
|
77
77
|
|
|
@@ -81,7 +81,7 @@ export const MessageTime = ({ timestamp }: MessageTimeProps) => {
|
|
|
81
81
|
const { dtLocale } = useTranslation(translationKey);
|
|
82
82
|
const dt = timestamp ? new Date(timestamp) : undefined;
|
|
83
83
|
return (
|
|
84
|
-
<time className='block
|
|
84
|
+
<time className='block text-subdued text-xs pbe-0.5' dateTime={dt?.toISOString()}>
|
|
85
85
|
{dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}
|
|
86
86
|
</time>
|
|
87
87
|
);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@
|
|
5
|
+
import '@dxos-theme';
|
|
6
6
|
|
|
7
7
|
import { Check, Trash } from '@phosphor-icons/react';
|
|
8
8
|
import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -157,7 +157,7 @@ const StoryThread: FC<{
|
|
|
157
157
|
|
|
158
158
|
return (
|
|
159
159
|
<Thread current={selected} onClickCapture={onSelect}>
|
|
160
|
-
<div className='col-start-2 flex gap-1 text-xs
|
|
160
|
+
<div className='col-start-2 flex gap-1 text-xs text-description'>
|
|
161
161
|
<span>id:{thread.id.slice(0, 4)}</span>
|
|
162
162
|
<span>y:{thread.yPos}</span>
|
|
163
163
|
<span className='grow' />
|
package/src/Thread/Thread.tsx
CHANGED
|
@@ -45,7 +45,7 @@ export const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps
|
|
|
45
45
|
({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
46
46
|
return (
|
|
47
47
|
<>
|
|
48
|
-
<div role='none' className='flex items-center justify-center
|
|
48
|
+
<div role='none' className='flex items-center justify-center text-description'>
|
|
49
49
|
<CaretDoubleRight />
|
|
50
50
|
</div>
|
|
51
51
|
<div role='none' className='flex items-center overflow-hidden'>
|
|
@@ -53,7 +53,10 @@ export const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps
|
|
|
53
53
|
role='heading'
|
|
54
54
|
data-testid='thread.heading'
|
|
55
55
|
{...props}
|
|
56
|
-
className={mx(
|
|
56
|
+
className={mx(
|
|
57
|
+
'mie-2 text-description font-medium truncate italic',
|
|
58
|
+
detached && 'line-through decoration-1',
|
|
59
|
+
)}
|
|
57
60
|
ref={forwardedRef}
|
|
58
61
|
>
|
|
59
62
|
{children}
|
|
@@ -75,7 +78,7 @@ export const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(
|
|
|
75
78
|
<div
|
|
76
79
|
{...props}
|
|
77
80
|
className={mx(
|
|
78
|
-
'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs
|
|
81
|
+
'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description',
|
|
79
82
|
classNames,
|
|
80
83
|
)}
|
|
81
84
|
ref={forwardedRef}
|