add raw and yell content types

tloncorp · Oct 25, 2024 · 0965f8b · 0965f8b
1 parent a37de92
commit 0965f8b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 (
+    <View width="100%" paddingBottom="$m">
+      {props.showAuthor && (
+        <ChatAuthorRow
+          padding="$l"
+          paddingBottom="$s"
+          author={props.post.author}
+          authorId={props.post.authorId}
+        />
+      )}
+      <YellContentRenderer
+        content={content}
+        isNotice={props.post.type === 'notice'}
+      />
+    </View>
+  );
+};
+
+const YellContentRenderer = createContentRenderer({
+  inlineRenderers: {
+    text: (props) => {
+      return (
+        <RawText fontSize={44} lineHeight={44} fontWeight={'500'}>
+          {props.inline.text.toUpperCase()}
+        </RawText>
+      );
+    },
+  },
+});
diff --git 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 (
+      <Text>
+        {contactName}: {JSON.stringify(post.content)}
+      </Text>
+    );
+  },
+  [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({