diff --git a/packages/shared/src/api/channelContentConfig.ts b/packages/shared/src/api/channelContentConfig.ts index d512f9aacf..2e1234ea14 100644 --- a/packages/shared/src/api/channelContentConfig.ts +++ b/packages/shared/src/api/channelContentConfig.ts @@ -25,6 +25,8 @@ export enum PostContentRendererId { picto = 'tlon.r0.content.picto', audio = 'tlon.r0.content.audio', color = 'tlon.r0.content.color', + raw = 'tlon.r0.content.raw', + yell = 'tlon.r0.content.yell', } /** diff --git a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx index c5cc268a4d..51237108dc 100644 --- a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx +++ b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx @@ -192,6 +192,10 @@ function labelForContentRenderer(r: PostContentRendererId): string { return 'Audio'; case PostContentRendererId.color: return 'Color'; + case PostContentRendererId.raw: + return 'Raw'; + case PostContentRendererId.yell: + return 'Yell'; } } function labelForCollectionLayout(l: CollectionRendererId): string { @@ -233,6 +237,8 @@ const options = { PostContentRendererId.picto, PostContentRendererId.audio, PostContentRendererId.color, + PostContentRendererId.raw, + PostContentRendererId.yell, ].map((id) => ({ title: labelForContentRenderer(id), value: id, diff --git a/packages/ui/src/components/YellPost.tsx b/packages/ui/src/components/YellPost.tsx new file mode 100644 index 0000000000..479ae3bc09 --- /dev/null +++ b/packages/ui/src/components/YellPost.tsx @@ -0,0 +1,40 @@ +import { View } from 'tamagui'; + +import { RenderItemType } from '../contexts/componentsKits'; +import { ChatAuthorRow } from './AuthorRow'; +import { createContentRenderer } from './PostContent'; +import { usePostContent } from './PostContent/contentUtils'; +import { RawText, Text } from './TextV2'; + +export const YellPost: RenderItemType = (props) => { + const content = usePostContent(props.post); + + return ( + + {props.showAuthor && ( + + )} + + + ); +}; + +const YellContentRenderer = createContentRenderer({ + inlineRenderers: { + text: (props) => { + return ( + + {props.inline.text.toUpperCase()} + + ); + }, + }, +}); diff --git a/packages/ui/src/contexts/componentsKits.tsx b/packages/ui/src/contexts/componentsKits.tsx index 7fbf2410c6..a698b8f39b 100644 --- a/packages/ui/src/contexts/componentsKits.tsx +++ b/packages/ui/src/contexts/componentsKits.tsx @@ -11,9 +11,12 @@ import { AudioPost } from '../components/AudioPost'; import { PictoMessage } from '../components/Channel/PictoMessage'; import { ChatMessage } from '../components/ChatMessage'; import { ColorPost } from '../components/ColorPost'; +import { useContactName } from '../components/ContactNameV2'; import { StandaloneDrawingInput } from '../components/DrawingInput'; import { GalleryPost } from '../components/GalleryPost'; import { NotebookPost } from '../components/NotebookPost'; +import { Text } from '../components/TextV2'; +import { YellPost } from '../components/YellPost'; import { ChatInput, ColorInput, @@ -29,6 +32,7 @@ import { SingleCardPostCollection, } from '../components/postCollectionViews/CardsPostCollectionView'; import { ListPostCollection } from '../components/postCollectionViews/ListPostCollectionView'; +import { StrobePostCollectionView } from '../components/postCollectionViews/StrobePostCollectionView'; import { IPostCollectionView } from '../components/postCollectionViews/shared'; type RenderItemProps = { @@ -108,6 +112,15 @@ const BUILTIN_CONTENT_RENDERERS: { [id: string]: RenderItemType } = { [PostContentRendererId.picto]: PictoMessage, [PostContentRendererId.audio]: AudioPost, [PostContentRendererId.color]: ColorPost, + [PostContentRendererId.raw]: ({ post }) => { + const contactName = useContactName(post.author!.id); + return ( + + {contactName}: {JSON.stringify(post.content)} + + ); + }, + [PostContentRendererId.yell]: YellPost, }; const BUILTIN_DRAFT_INPUTS: { [id: string]: DraftInputRendererComponent } = { [DraftInputId.chat]: ChatInput, @@ -133,6 +146,7 @@ const BUILTIN_COLLECTION_RENDERERS: { [CollectionRendererId.cards]: CardsPostCollection, [CollectionRendererId.sign]: SingleCardPostCollection, [CollectionRendererId.boardroom]: BoardroomPostCollectionView, + [CollectionRendererId.strobe]: StrobePostCollectionView, }; export function ComponentsKitContextProvider({