@dxos/react-ui-thread 0.8.3 → 0.8.4-main.f9ba587
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 +15 -12
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +268 -0
- package/dist/lib/node-esm/index.mjs.map +7 -0
- package/dist/lib/node-esm/meta.json +1 -0
- package/dist/types/src/Message/Message.stories.d.ts +14 -14
- package/dist/types/src/Thread/Comments.stories.d.ts +14 -14
- package/dist/types/src/Thread/Comments.stories.d.ts.map +1 -1
- package/dist/types/src/Thread/Thread.d.ts +10 -7
- package/dist/types/src/Thread/Thread.d.ts.map +1 -1
- package/dist/types/src/Thread/Thread.stories.d.ts +4 -26
- package/dist/types/src/Thread/Thread.stories.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/testing.d.ts +1 -2
- package/dist/types/src/testing.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +15 -16
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -14
- package/src/Message/Message.stories.tsx +7 -7
- package/src/Thread/Comments.stories.tsx +13 -15
- package/src/Thread/Thread.stories.tsx +15 -11
- package/src/Thread/Thread.tsx +29 -9
- package/src/index.ts +1 -1
- package/src/testing.tsx +1 -5
- package/src/translations.ts +5 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
//
|
|
2
|
-
var translationKey = "thread";
|
|
3
|
-
var
|
|
1
|
+
// src/translations.ts
|
|
2
|
+
var translationKey = "react-ui-thread";
|
|
3
|
+
var translations = [
|
|
4
4
|
{
|
|
5
5
|
"en-US": {
|
|
6
6
|
[translationKey]: {
|
|
@@ -19,14 +19,14 @@ var translations_default = [
|
|
|
19
19
|
}
|
|
20
20
|
];
|
|
21
21
|
|
|
22
|
-
//
|
|
22
|
+
// src/Thread/Thread.tsx
|
|
23
23
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
24
24
|
import { CaretDoubleRight, Spinner } from "@phosphor-icons/react";
|
|
25
25
|
import React, { forwardRef } from "react";
|
|
26
26
|
import { useTranslation } from "@dxos/react-ui";
|
|
27
27
|
import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
|
|
28
28
|
var threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
|
|
29
|
-
var
|
|
29
|
+
var ThreadRoot = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...props }, forwardedRef) => {
|
|
30
30
|
var _effect = _useSignals();
|
|
31
31
|
try {
|
|
32
32
|
return /* @__PURE__ */ React.createElement("div", {
|
|
@@ -36,14 +36,14 @@ var Thread = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...pro
|
|
|
36
36
|
"aria-current": typeof current === "string" ? current : "location"
|
|
37
37
|
},
|
|
38
38
|
...props,
|
|
39
|
-
className: mx(threadLayout, hoverableFocusedWithinControls, "
|
|
39
|
+
className: mx(threadLayout, hoverableFocusedWithinControls, "bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]", classNames),
|
|
40
40
|
ref: forwardedRef
|
|
41
41
|
}, children);
|
|
42
42
|
} finally {
|
|
43
43
|
_effect.f();
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
-
var
|
|
46
|
+
var ThreadHeader = /* @__PURE__ */ forwardRef(({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
47
47
|
var _effect = _useSignals();
|
|
48
48
|
try {
|
|
49
49
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
@@ -63,7 +63,7 @@ var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, detached
|
|
|
63
63
|
_effect.f();
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
|
-
var
|
|
66
|
+
var ThreadStatus = /* @__PURE__ */ forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
|
|
67
67
|
var _effect = _useSignals();
|
|
68
68
|
try {
|
|
69
69
|
const { t } = useTranslation(translationKey);
|
|
@@ -85,8 +85,13 @@ var ThreadFooter = /* @__PURE__ */ forwardRef(({ activity, classNames, children,
|
|
|
85
85
|
_effect.f();
|
|
86
86
|
}
|
|
87
87
|
});
|
|
88
|
+
var Thread = {
|
|
89
|
+
Root: ThreadRoot,
|
|
90
|
+
Header: ThreadHeader,
|
|
91
|
+
Status: ThreadStatus
|
|
92
|
+
};
|
|
88
93
|
|
|
89
|
-
//
|
|
94
|
+
// src/Message/Message.tsx
|
|
90
95
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
91
96
|
import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
|
|
92
97
|
import React2, { forwardRef as forwardRef2 } from "react";
|
|
@@ -255,9 +260,7 @@ export {
|
|
|
255
260
|
MessageTextbox,
|
|
256
261
|
MessageTime,
|
|
257
262
|
Thread,
|
|
258
|
-
ThreadFooter,
|
|
259
|
-
ThreadHeading,
|
|
260
263
|
threadLayout,
|
|
261
|
-
|
|
264
|
+
translations
|
|
262
265
|
};
|
|
263
266
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -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
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["translationKey", "CaretDoubleRight", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = 'react-ui-thread';\n\nexport const translations = [\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] as const satisfies Resource[];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDoubleRight, Spinner } from '@phosphor-icons/react';\nimport React, { 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\n// TODO(burdon): Why is this exported?\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\n//\n// Root\n//\n\ntype ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };\n\nconst ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(\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 'bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\n//\n// Heading\n//\n\ntype ThreadHeaderProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nconst ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(\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\n//\n// Status\n//\n\ntype ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n activity?: boolean;\n};\n\nconst ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(\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\nexport const Thread = {\n Root: ThreadRoot,\n Header: ThreadHeader,\n Status: ThreadStatus,\n};\n\nexport type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, ThreadStatusProps };\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>\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.Content\n size={avatarSize}\n hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}\n fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}\n {...(authorImgSrc && { imgSrc: authorImgSrc })}\n />\n {continues && <div role='none' className='is-px grow 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
|
+
"names": ["translationKey", "translations", "CaretDoubleRight", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "ThreadRoot", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeader", "detached", "CaretDoubleRight", "p", "ThreadStatus", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "Thread", "Root", "Header", "Status", "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", "div", "role", "data-testid", "className", "mx", "ref", "Content", "size", "hue", "hexToHue", "fallback", "emoji", "hexToEmoji", "imgSrc", "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":{"
|
|
1
|
+
{"inputs":{"src/translations.ts":{"bytes":2466,"imports":[],"format":"esm"},"src/Thread/Thread.tsx":{"bytes":10462,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Thread/index.ts":{"bytes":459,"imports":[{"path":"src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"src/Message/Message.tsx":{"bytes":17557,"imports":[{"path":"@preact-signals/safe-react/tracking","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},{"path":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Message/index.ts":{"bytes":461,"imports":[{"path":"src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"src/types.ts":{"bytes":898,"imports":[],"format":"esm"},"src/index.ts":{"bytes":876,"imports":[{"path":"src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15390},"dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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","threadLayout","translations"],"entryPoint":"src/index.ts","inputs":{"src/translations.ts":{"bytesInOutput":610},"src/Thread/Thread.tsx":{"bytesInOutput":2965},"src/Thread/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/Message/Message.tsx":{"bytesInOutput":4934},"src/Message/index.ts":{"bytesInOutput":0}},"bytes":8776}}}
|
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
|
+
|
|
3
|
+
// src/translations.ts
|
|
4
|
+
var translationKey = "react-ui-thread";
|
|
5
|
+
var translations = [
|
|
6
|
+
{
|
|
7
|
+
"en-US": {
|
|
8
|
+
[translationKey]: {
|
|
9
|
+
"plugin name": "Threads",
|
|
10
|
+
"thread title placeholder": "New thread",
|
|
11
|
+
"thread title label": "Title",
|
|
12
|
+
"delete thread label": "Delete",
|
|
13
|
+
"create thread label": "Create thread",
|
|
14
|
+
"message placeholder": "Enter message...",
|
|
15
|
+
"comment placeholder": "Enter comment...",
|
|
16
|
+
"settings standalone label": "Enable standalone thread creation",
|
|
17
|
+
"anonymous label": "Anonymous",
|
|
18
|
+
"enter to send message": "Enter to add \u23CE"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
// src/Thread/Thread.tsx
|
|
25
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
26
|
+
import { CaretDoubleRight, Spinner } from "@phosphor-icons/react";
|
|
27
|
+
import React, { forwardRef } from "react";
|
|
28
|
+
import { useTranslation } from "@dxos/react-ui";
|
|
29
|
+
import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
|
|
30
|
+
var threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
|
|
31
|
+
var ThreadRoot = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...props }, forwardedRef) => {
|
|
32
|
+
var _effect = _useSignals();
|
|
33
|
+
try {
|
|
34
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
35
|
+
role: "group",
|
|
36
|
+
"data-testid": "thread",
|
|
37
|
+
...current && {
|
|
38
|
+
"aria-current": typeof current === "string" ? current : "location"
|
|
39
|
+
},
|
|
40
|
+
...props,
|
|
41
|
+
className: mx(threadLayout, hoverableFocusedWithinControls, "bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]", classNames),
|
|
42
|
+
ref: forwardedRef
|
|
43
|
+
}, children);
|
|
44
|
+
} finally {
|
|
45
|
+
_effect.f();
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
var ThreadHeader = /* @__PURE__ */ forwardRef(({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
49
|
+
var _effect = _useSignals();
|
|
50
|
+
try {
|
|
51
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
52
|
+
role: "none",
|
|
53
|
+
className: "flex items-center justify-center text-description"
|
|
54
|
+
}, /* @__PURE__ */ React.createElement(CaretDoubleRight, null)), /* @__PURE__ */ React.createElement("div", {
|
|
55
|
+
role: "none",
|
|
56
|
+
className: "flex items-center overflow-hidden"
|
|
57
|
+
}, /* @__PURE__ */ React.createElement("p", {
|
|
58
|
+
role: "heading",
|
|
59
|
+
"data-testid": "thread.heading",
|
|
60
|
+
...props,
|
|
61
|
+
className: mx("mie-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
|
|
62
|
+
ref: forwardedRef
|
|
63
|
+
}, children)));
|
|
64
|
+
} finally {
|
|
65
|
+
_effect.f();
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
var ThreadStatus = /* @__PURE__ */ forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
|
|
69
|
+
var _effect = _useSignals();
|
|
70
|
+
try {
|
|
71
|
+
const { t } = useTranslation(translationKey);
|
|
72
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
73
|
+
...props,
|
|
74
|
+
className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description", classNames),
|
|
75
|
+
ref: forwardedRef
|
|
76
|
+
}, /* @__PURE__ */ React.createElement(Spinner, {
|
|
77
|
+
weight: "bold",
|
|
78
|
+
"data-visible": activity ? "show" : "hide",
|
|
79
|
+
className: "is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow"
|
|
80
|
+
}), /* @__PURE__ */ React.createElement("span", {
|
|
81
|
+
className: "truncate min-is-0",
|
|
82
|
+
"aria-live": "polite"
|
|
83
|
+
}, activity ? children : null), /* @__PURE__ */ React.createElement("span", {
|
|
84
|
+
className: mx("text-end", hoverableControlItem)
|
|
85
|
+
}, t("enter to send message")));
|
|
86
|
+
} finally {
|
|
87
|
+
_effect.f();
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
var Thread = {
|
|
91
|
+
Root: ThreadRoot,
|
|
92
|
+
Header: ThreadHeader,
|
|
93
|
+
Status: ThreadStatus
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
// src/Message/Message.tsx
|
|
97
|
+
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
98
|
+
import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
|
|
99
|
+
import React2, { forwardRef as forwardRef2 } from "react";
|
|
100
|
+
import { Avatar, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
101
|
+
import { keymap, listener, useTextEditor } from "@dxos/react-ui-editor";
|
|
102
|
+
import { focusRing, mx as mx2 } from "@dxos/react-ui-theme";
|
|
103
|
+
import { hexToEmoji, hexToHue, isNotFalsy } from "@dxos/util";
|
|
104
|
+
var avatarSize = 7;
|
|
105
|
+
var MessageRoot = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps }, forwardedRef) => {
|
|
106
|
+
var _effect = _useSignals2();
|
|
107
|
+
try {
|
|
108
|
+
return (
|
|
109
|
+
// Must wrap the message since Avatar.Label may be used in the content.
|
|
110
|
+
/* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement("div", {
|
|
111
|
+
role: "none",
|
|
112
|
+
"data-testid": "thread.message",
|
|
113
|
+
...rootProps,
|
|
114
|
+
className: mx2("grid grid-cols-subgrid col-span-2", classNames),
|
|
115
|
+
ref: forwardedRef
|
|
116
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
117
|
+
role: "none",
|
|
118
|
+
className: "flex flex-col items-center gap-2 pbs-2"
|
|
119
|
+
}, /* @__PURE__ */ React2.createElement(Avatar.Content, {
|
|
120
|
+
size: avatarSize,
|
|
121
|
+
hue: authorAvatarProps?.hue || hexToHue(authorId ?? "0"),
|
|
122
|
+
fallback: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0"),
|
|
123
|
+
...authorImgSrc && {
|
|
124
|
+
imgSrc: authorImgSrc
|
|
125
|
+
}
|
|
126
|
+
}), continues && /* @__PURE__ */ React2.createElement("div", {
|
|
127
|
+
role: "none",
|
|
128
|
+
className: "is-px grow bg-separator"
|
|
129
|
+
})), /* @__PURE__ */ React2.createElement("div", {
|
|
130
|
+
role: "none",
|
|
131
|
+
className: "plb-1 min-is-0"
|
|
132
|
+
}, children)))
|
|
133
|
+
);
|
|
134
|
+
} finally {
|
|
135
|
+
_effect.f();
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
var MessageHeading = ({ children, classNames, timestamp, authorName, ...props }) => {
|
|
139
|
+
var _effect = _useSignals2();
|
|
140
|
+
try {
|
|
141
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
142
|
+
role: "none",
|
|
143
|
+
...props,
|
|
144
|
+
className: mx2("flex gap-2 items-start", classNames)
|
|
145
|
+
}, /* @__PURE__ */ React2.createElement("p", {
|
|
146
|
+
className: "grow"
|
|
147
|
+
}, /* @__PURE__ */ React2.createElement(MessageAuthorName, {
|
|
148
|
+
authorName
|
|
149
|
+
}), timestamp && /* @__PURE__ */ React2.createElement(MessageTime, {
|
|
150
|
+
timestamp
|
|
151
|
+
})), children);
|
|
152
|
+
} finally {
|
|
153
|
+
_effect.f();
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
var MessageAuthorName = ({ authorName }) => {
|
|
157
|
+
var _effect = _useSignals2();
|
|
158
|
+
try {
|
|
159
|
+
const { t } = useTranslation2(translationKey);
|
|
160
|
+
return /* @__PURE__ */ React2.createElement(Avatar.Label, {
|
|
161
|
+
classNames: "block truncate text-sm text-subdued"
|
|
162
|
+
}, authorName ?? t("anonymous label"));
|
|
163
|
+
} finally {
|
|
164
|
+
_effect.f();
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
var MessageTime = ({ timestamp }) => {
|
|
168
|
+
var _effect = _useSignals2();
|
|
169
|
+
try {
|
|
170
|
+
const { dtLocale } = useTranslation2(translationKey);
|
|
171
|
+
const dt = timestamp ? new Date(timestamp) : void 0;
|
|
172
|
+
return /* @__PURE__ */ React2.createElement("time", {
|
|
173
|
+
className: "block text-subdued text-xs pbe-0.5",
|
|
174
|
+
dateTime: dt?.toISOString()
|
|
175
|
+
}, dt ? formatDistanceToNow(dt, {
|
|
176
|
+
locale: dtLocale,
|
|
177
|
+
addSuffix: true
|
|
178
|
+
}) : "");
|
|
179
|
+
} finally {
|
|
180
|
+
_effect.f();
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
var MessageBody = ({ children, ...props }) => {
|
|
184
|
+
var _effect = _useSignals2();
|
|
185
|
+
try {
|
|
186
|
+
return /* @__PURE__ */ React2.createElement("p", props, children);
|
|
187
|
+
} finally {
|
|
188
|
+
_effect.f();
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
var keyBindings = ({ onSend, onClear }) => [
|
|
192
|
+
{
|
|
193
|
+
key: "Enter",
|
|
194
|
+
run: () => {
|
|
195
|
+
if (onSend) {
|
|
196
|
+
onSend();
|
|
197
|
+
return true;
|
|
198
|
+
} else {
|
|
199
|
+
return false;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
// TODO(burdon): Other key bindings.
|
|
205
|
+
key: "Meta+Backspace",
|
|
206
|
+
run: () => {
|
|
207
|
+
if (onClear) {
|
|
208
|
+
onClear();
|
|
209
|
+
return true;
|
|
210
|
+
} else {
|
|
211
|
+
return false;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
];
|
|
216
|
+
var MessageTextbox = ({ id, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions, onSend, onClear, onEditorFocus, ...editorProps }) => {
|
|
217
|
+
var _effect = _useSignals2();
|
|
218
|
+
try {
|
|
219
|
+
const { parentRef, focusAttributes } = useTextEditor(() => ({
|
|
220
|
+
id,
|
|
221
|
+
extensions: [
|
|
222
|
+
keymap.of(keyBindings({
|
|
223
|
+
onSend,
|
|
224
|
+
onClear
|
|
225
|
+
})),
|
|
226
|
+
listener({
|
|
227
|
+
onFocus: (focusing) => {
|
|
228
|
+
if (focusing) {
|
|
229
|
+
onEditorFocus?.();
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}),
|
|
233
|
+
extensions
|
|
234
|
+
].filter(isNotFalsy),
|
|
235
|
+
...editorProps
|
|
236
|
+
}), [
|
|
237
|
+
id,
|
|
238
|
+
extensions
|
|
239
|
+
]);
|
|
240
|
+
return /* @__PURE__ */ React2.createElement(MessageRoot, {
|
|
241
|
+
id,
|
|
242
|
+
authorId,
|
|
243
|
+
authorName,
|
|
244
|
+
authorImgSrc,
|
|
245
|
+
authorAvatarProps,
|
|
246
|
+
continues: false
|
|
247
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
248
|
+
role: "none",
|
|
249
|
+
ref: parentRef,
|
|
250
|
+
className: mx2("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50"),
|
|
251
|
+
...focusAttributes
|
|
252
|
+
}));
|
|
253
|
+
} finally {
|
|
254
|
+
_effect.f();
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
export {
|
|
258
|
+
MessageAuthorName,
|
|
259
|
+
MessageBody,
|
|
260
|
+
MessageHeading,
|
|
261
|
+
MessageRoot,
|
|
262
|
+
MessageTextbox,
|
|
263
|
+
MessageTime,
|
|
264
|
+
Thread,
|
|
265
|
+
threadLayout,
|
|
266
|
+
translations
|
|
267
|
+
};
|
|
268
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = 'react-ui-thread';\n\nexport const translations = [\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] as const satisfies Resource[];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDoubleRight, Spinner } from '@phosphor-icons/react';\nimport React, { 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\n// TODO(burdon): Why is this exported?\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\n//\n// Root\n//\n\ntype ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };\n\nconst ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(\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 'bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\n//\n// Heading\n//\n\ntype ThreadHeaderProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nconst ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(\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\n//\n// Status\n//\n\ntype ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n activity?: boolean;\n};\n\nconst ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(\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\nexport const Thread = {\n Root: ThreadRoot,\n Header: ThreadHeader,\n Status: ThreadStatus,\n};\n\nexport type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, ThreadStatusProps };\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>\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.Content\n size={avatarSize}\n hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}\n fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}\n {...(authorImgSrc && { imgSrc: authorImgSrc })}\n />\n {continues && <div role='none' className='is-px grow 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
|
+
"names": ["translationKey", "translations", "CaretDoubleRight", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "ThreadRoot", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeader", "detached", "CaretDoubleRight", "p", "ThreadStatus", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "Thread", "Root", "Header", "Status", "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", "div", "role", "data-testid", "className", "mx", "ref", "Content", "size", "hue", "hexToHue", "fallback", "emoji", "hexToEmoji", "imgSrc", "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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"inputs":{"src/translations.ts":{"bytes":2466,"imports":[],"format":"esm"},"src/Thread/Thread.tsx":{"bytes":10462,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Thread/index.ts":{"bytes":459,"imports":[{"path":"src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"src/Message/Message.tsx":{"bytes":17557,"imports":[{"path":"@preact-signals/safe-react/tracking","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},{"path":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Message/index.ts":{"bytes":461,"imports":[{"path":"src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"src/types.ts":{"bytes":898,"imports":[],"format":"esm"},"src/index.ts":{"bytes":876,"imports":[{"path":"src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15392},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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","threadLayout","translations"],"entryPoint":"src/index.ts","inputs":{"src/translations.ts":{"bytesInOutput":610},"src/Thread/Thread.tsx":{"bytesInOutput":2965},"src/Thread/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/Message/Message.tsx":{"bytesInOutput":4934},"src/Message/index.ts":{"bytesInOutput":0}},"bytes":8869}}}
|
|
@@ -6,22 +6,22 @@ declare const _default: {
|
|
|
6
6
|
render: () => React.JSX.Element;
|
|
7
7
|
decorators: import("@storybook/react").Decorator[];
|
|
8
8
|
parameters: {
|
|
9
|
-
translations: {
|
|
10
|
-
'en-US': {
|
|
11
|
-
thread: {
|
|
12
|
-
'plugin name':
|
|
13
|
-
'thread title placeholder':
|
|
14
|
-
'thread title label':
|
|
15
|
-
'delete thread label':
|
|
16
|
-
'create thread label':
|
|
17
|
-
'message placeholder':
|
|
18
|
-
'comment placeholder':
|
|
19
|
-
'settings standalone label':
|
|
20
|
-
'anonymous label':
|
|
21
|
-
'enter to send message':
|
|
9
|
+
translations: [{
|
|
10
|
+
readonly 'en-US': {
|
|
11
|
+
readonly "react-ui-thread": {
|
|
12
|
+
readonly 'plugin name': "Threads";
|
|
13
|
+
readonly 'thread title placeholder': "New thread";
|
|
14
|
+
readonly 'thread title label': "Title";
|
|
15
|
+
readonly 'delete thread label': "Delete";
|
|
16
|
+
readonly 'create thread label': "Create thread";
|
|
17
|
+
readonly 'message placeholder': "Enter message...";
|
|
18
|
+
readonly 'comment placeholder': "Enter comment...";
|
|
19
|
+
readonly 'settings standalone label': "Enable standalone thread creation";
|
|
20
|
+
readonly 'anonymous label': "Anonymous";
|
|
21
|
+
readonly 'enter to send message': "Enter to add ⏎";
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
|
-
}
|
|
24
|
+
}];
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
export default _default;
|
|
@@ -24,22 +24,22 @@ declare const _default: {
|
|
|
24
24
|
decorators: import("@storybook/react").Decorator[];
|
|
25
25
|
render: (args: StoryProps) => React.JSX.Element;
|
|
26
26
|
parameters: {
|
|
27
|
-
translations: {
|
|
28
|
-
'en-US': {
|
|
29
|
-
thread: {
|
|
30
|
-
'plugin name':
|
|
31
|
-
'thread title placeholder':
|
|
32
|
-
'thread title label':
|
|
33
|
-
'delete thread label':
|
|
34
|
-
'create thread label':
|
|
35
|
-
'message placeholder':
|
|
36
|
-
'comment placeholder':
|
|
37
|
-
'settings standalone label':
|
|
38
|
-
'anonymous label':
|
|
39
|
-
'enter to send message':
|
|
27
|
+
translations: [{
|
|
28
|
+
readonly 'en-US': {
|
|
29
|
+
readonly "react-ui-thread": {
|
|
30
|
+
readonly 'plugin name': "Threads";
|
|
31
|
+
readonly 'thread title placeholder': "New thread";
|
|
32
|
+
readonly 'thread title label': "Title";
|
|
33
|
+
readonly 'delete thread label': "Delete";
|
|
34
|
+
readonly 'create thread label': "Create thread";
|
|
35
|
+
readonly 'message placeholder': "Enter message...";
|
|
36
|
+
readonly 'comment placeholder': "Enter comment...";
|
|
37
|
+
readonly 'settings standalone label': "Enable standalone thread creation";
|
|
38
|
+
readonly 'anonymous label': "Anonymous";
|
|
39
|
+
readonly 'enter to send message': "Enter to add ⏎";
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
|
-
}
|
|
42
|
+
}];
|
|
43
43
|
layout: string;
|
|
44
44
|
};
|
|
45
45
|
};
|
|
@@ -1 +1 @@
|
|
|
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;AAS7E,OAAO,EAGL,KAAK,KAAK,EASX,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;
|
|
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;AAS7E,OAAO,EAGL,KAAK,KAAK,EASX,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;AAIF,eAAO,MAAM,OAAO;;;;CASnB,CAAC"}
|