Unify types so it's not so confusing

src/components/Post/Embed/StandardSiteEmbed/StandardSiteMetaRow.tsx

@@ -1,6 +1,6 @@
 import {Fragment, type ReactNode} from 'react'
 import {View} from 'react-native'
-import {type AppBskyEmbedExternal, AtUri} from '@atproto/api'
+import {AtUri} from '@atproto/api'
 import {Trans, useLingui} from '@lingui/react/macro'
 
 import {makeProfileLink} from '#/lib/routes/links'
@@ -11,6 +11,7 @@ import {
   matchStandardSitePublisher,
   matchStandardSitePublisherByUri,
 } from '#/components/Post/Embed/StandardSiteEmbed/publishers'
+import type * as ssTypes from '#/components/Post/Embed/StandardSiteEmbed/types'
 import {
   isStandardSiteDocumentUri,
   isStandardSitePublicationUri,
@@ -19,14 +20,13 @@ import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 
 export function StandardSiteMetaRow({
-  preview,
   type = 'document',
+  preview,
   view,
-}: {
+}: ssTypes.CommonProps &
-  preview?: boolean
+  ssTypes.PreviewProps & {
     type?: 'document' | 'publication'
-  view: AppBskyEmbedExternal.ViewExternal
+  }) {
-}) {
   const ax = useAnalytics()
   const t = useTheme()
   const {t: l} = useLingui()

src/components/Post/Embed/StandardSiteEmbed/index.tsx

@@ -1,6 +1,6 @@
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
-import {type AppBskyEmbedExternal, AtUri} from '@atproto/api'
+import {AtUri} from '@atproto/api'
 import {plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
@@ -21,17 +21,12 @@ import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {matchStandardSitePublisher} from '#/components/Post/Embed/StandardSiteEmbed/publishers'
 import {StandardSiteMetaRow} from '#/components/Post/Embed/StandardSiteEmbed/StandardSiteMetaRow'
 import {StandardSiteThemeProvider} from '#/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider'
+import type * as ssTypes from '#/components/Post/Embed/StandardSiteEmbed/types'
 import {isStandardSitePublicationEmbed} from '#/components/Post/Embed/StandardSiteEmbed/utils'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {IS_NATIVE} from '#/env'
 
-export type ThemeColors = {
-  custom: boolean
-  accent: string
-  accentForeground: string
-}
-
 const PUBLICATION_AVATAR_STYLE = {
   borderRadius: a.rounded_sm.borderRadius,
 }
@@ -41,15 +36,11 @@ export const StandardSiteEmbed = ({
   view,
   onEmbedInteractionCallback,
   style,
-}: {
+}: ssTypes.CommonProps &
-  /**
+  ssTypes.PreviewProps &
-   * Indicates the card is showing the composer
+  ssTypes.PublicApiProps & {
-   */
-  preview?: boolean
-  view: AppBskyEmbedExternal.ViewExternal
-  onEmbedInteractionCallback?: () => void
     style?: StyleProp<ViewStyle>
-}) => {
+  }) => {
   const ax = useAnalytics()
   const {t: l, i18n} = useLingui()
   const t = useTheme()
@@ -61,7 +52,7 @@ export const StandardSiteEmbed = ({
     new AtUri(ref.uri).collection.startsWith('site.standard.'),
   )
   const isStandardPublication = isStandardSitePublicationEmbed(view)
-  let themeColors: ThemeColors = {
+  let themeColors: ssTypes.ThemeColors = {
     custom: false,
     accent: t.atoms.text.color,
     accentForeground: t.atoms.text_inverted.color,
@@ -289,15 +280,14 @@ export function PublicationCard({
   themeColors,
   style,
   onEmbedInteractionCallback,
-}: {
+}: ssTypes.CommonProps &
-  preview?: boolean
+  ssTypes.PreviewProps &
-  view: AppBskyEmbedExternal.ViewExternal
+  ssTypes.PublicApiProps & {
     onPress?: () => void
     onLongPress?: () => void
-  themeColors: ThemeColors
+    themeColors: ssTypes.ThemeColors
     style?: StyleProp<ViewStyle>
-  onEmbedInteractionCallback?: () => void
+  }) {
-}) {
   const t = useTheme()
   const {t: l} = useLingui()
   const {gtPhone} = useBreakpoints()
@@ -416,12 +406,11 @@ export function SubscribeButton({
   view,
   style,
   onEmbedInteractionCallback,
-}: {
+}: ssTypes.CommonProps &
-  preview?: boolean
+  ssTypes.PreviewProps &
-  view: AppBskyEmbedExternal.ViewExternal
+  ssTypes.PublicApiProps & {
     style?: StyleProp<ViewStyle>
-  onEmbedInteractionCallback?: () => void
+  }) {
-}) {
   const ax = useAnalytics()
   const {t: l} = useLingui()
   const playHaptic = useHaptics()
@@ -509,11 +498,10 @@ function PublicationIcon({
   view,
   size,
   themeColors,
-}: {
+}: ssTypes.CommonProps & {
-  view: AppBskyEmbedExternal.ViewExternal
   size: number
   interacted?: boolean
-  themeColors: ThemeColors
+  themeColors: ssTypes.ThemeColors
 }) {
   if (!view.source) return null
   return view.source?.icon ? (
@@ -557,15 +545,14 @@ export function PublicationFooter({
   onLongPress,
   interactedOuter,
   onEmbedInteractionCallback,
-}: {
+}: ssTypes.CommonProps &
-  preview?: boolean
+  ssTypes.PreviewProps &
-  view: AppBskyEmbedExternal.ViewExternal
+  ssTypes.PublicApiProps & {
-  themeColors: ThemeColors
+    themeColors: ssTypes.ThemeColors
     onPress?: () => void
     onLongPress?: () => void
     interactedOuter?: boolean
-  onEmbedInteractionCallback?: () => void
+  }) {
-}) {
   const t = useTheme()
   const {t: l} = useLingui()
   const {gtPhone} = useBreakpoints()

src/components/Post/Embed/StandardSiteEmbed/types.ts

@@ -0,0 +1,20 @@
+import {type AppBskyEmbedExternal} from '@atproto/api'
+
+export type CommonProps = {
+  view: AppBskyEmbedExternal.ViewExternal
+}
+
+export type PreviewProps = {
+  /**
+   * Indicates the card is showing the composer. Interactive elements should be
+   * disabled when this value is true.
+   */
+  preview?: boolean
+}
+
+export type PublicApiProps = {
+  /**
+   * Passed down from feed contexts etc, used to fire off interaction tracking
+   */
+  onEmbedInteractionCallback?: () => void
+}