Add some docs

Author: demchenkoalex

src/components/AttachmentButton/AttachmentButton.tsx

@@ -14,6 +14,7 @@ export interface AttachmentButtonAdditionalProps {
 }
 
 export interface AttachmentButtonProps extends AttachmentButtonAdditionalProps {
+  /** Callback for attachment button tap event */
   onPress?: () => void
 }
 

src/components/Chat/Chat.tsx

@@ -48,24 +48,56 @@ dayjs.extend(calendar)
 export type ChatTopLevelProps = InputTopLevelProps & MessageTopLevelProps
 
 export interface ChatProps extends ChatTopLevelProps {
+  /** If {@link ChatProps.dateFormat} and/or {@link ChatProps.timeFormat} is not enough to
+   * customize date headers in your case, use this to return an arbitrary
+   * string based on a `dateTime` of a particular message. Can be helpful to
+   * return "Today" if `dateTime` is today. IMPORTANT: this will replace
+   * all default date headers, so you must handle all cases yourself, like
+   * for example today, yesterday and before. Or you can just return the same
+   * date header for any message. */
   customDateHeaderText?: (dateTime: number) => string
+  /** Allows you to customize the date format. IMPORTANT: only for the date,
+   * do not return time here. @see {@link ChatProps.timeFormat} to customize the time format.
+   * @see {@link ChatProps.customDateHeaderText} for more customization. */
   dateFormat?: string
+  /** Disable automatic image preview on tap. */
   disableImageGallery?: boolean
+  /** Allows you to change what the user sees when there are no messages.
+   * `emptyChatPlaceholder` and `emptyChatPlaceholderTextStyle` are ignored
+   * in this case. */
   emptyState?: () => React.ReactNode
+  /** Use this to enable `LayoutAnimation`. Experimental on Android (same as React Native). */
   enableAnimation?: boolean
   flatListProps?: Partial<FlatListProps<MessageType.DerivedAny[]>>
   inputProps?: InputAdditionalProps
+  /** Used for pagination (infinite scroll) together with {@link ChatProps.onEndReached}.
+   * When true, indicates that there are no more pages to load and
+   * pagination will not be triggered. */
   isLastPage?: boolean
+  /** Override the default localized copy. */
   l10nOverride?: Partial<Record<keyof typeof l10n[keyof typeof l10n], string>>
   locale?: keyof typeof l10n
   messages: MessageType.Any[]
+  /** Used for pagination (infinite scroll). Called when user scrolls
+   * to the very end of the list (minus `onEndReachedThreshold`).
+   * See {@link ChatProps.flatListProps} to set it up. */
   onEndReached?: () => Promise<void>
+  /** Show user names for received messages. Useful for a group chat. Will be
+   * shown only on text messages. */
   showUserNames?: boolean
+  /** Chat theme. Implement {@link Theme} to create your own theme or use
+   * existing one, like the {@link defaultTheme}. */
   theme?: Theme
+  /**
+   * Allows you to customize the time format. IMPORTANT: only for the time,
+   * do not return date here. @see {@link ChatProps.dateFormat} to customize the date format.
+   * @see {@link ChatProps.customDateHeaderText} for more customization.
+   */
   timeFormat?: string
   user: User
 }
 
+/** Entry component, represents the complete chat */
 export const Chat = ({
   customDateHeaderText,
   dateFormat,

src/components/ImageMessage/ImageMessage.tsx

@@ -7,9 +7,14 @@ import styles from './styles'
 
 export interface ImageMessageProps {
   message: MessageType.DerivedImage
+  /** Maximum message width */
   messageWidth: number
 }
 
+/** Image message component. Supports different
+ * aspect ratios, renders blurred image as a background which is visible
+ * if the image is narrow, renders image in form of a file if aspect
+ * ratio is very small or very big. */
 export const ImageMessage = ({ message, messageWidth }: ImageMessageProps) => {
   const theme = React.useContext(ThemeContext)
   const user = React.useContext(UserContext)

src/components/Input/Input.tsx

@@ -15,9 +15,18 @@ import { SendButton } from '../SendButton'
 import styles from './styles'
 
 export interface InputTopLevelProps {
+  /** Whether attachment is uploading. Will replace attachment button with a
+   * {@link CircularActivityIndicator}. Since we don't have libraries for
+   * managing media in dependencies we have no way of knowing if
+   * something is uploading so you need to set this manually. */
   isAttachmentUploading?: boolean
+  /** @see {@link AttachmentButtonProps.onPress} */
   onAttachmentPress?: () => void
+  /** Will be called on {@link SendButton} tap. Has {@link MessageType.PartialText} which can
+   * be transformed to {@link MessageType.Text} and added to the messages list. */
   onSendPress: (message: MessageType.PartialText) => void
+  /** Controls the visibility behavior of the {@link SendButton} based on the
+   * `TextInput` state. Defaults to `editing`. */
   sendButtonVisibilityMode?: 'always' | 'editing'
   textInputProps?: TextInputProps
 }
@@ -29,6 +38,8 @@ export interface InputAdditionalProps {
 
 export type InputProps = InputTopLevelProps & InputAdditionalProps
 
+/** Bottom bar input component with a text input, attachment and
+ * send buttons inside. By default hides send button when text input is empty. */
 export const Input = ({
   attachmentButtonProps,
   attachmentCircularActivityIndicatorProps,

src/components/Message/Message.tsx

@@ -16,24 +16,31 @@ import { TextMessage, TextMessageTopLevelProps } from '../TextMessage'
 import styles from './styles'
 
 export interface MessageTopLevelProps extends TextMessageTopLevelProps {
+  /** Called when user makes a long press on any message */
   onMessageLongPress?: (message: MessageType.Any) => void
+  /** Called when user taps on any message */
   onMessagePress?: (message: MessageType.Any) => void
+  /** Render a custom message inside predefined bubble */
   renderCustomMessage?: (
     message: MessageType.Custom,
     messageWidth: number
   ) => React.ReactNode
+  /** Render a file message inside predefined bubble */
   renderFileMessage?: (
     message: MessageType.File,
     messageWidth: number
   ) => React.ReactNode
+  /** Render an image message inside predefined bubble */
   renderImageMessage?: (
     message: MessageType.Image,
     messageWidth: number
   ) => React.ReactNode
+  /** Render a text message inside predefined bubble */
   renderTextMessage?: (
     message: MessageType.Text,
     messageWidth: number
   ) => React.ReactNode
+  /** Show user avatars for received messages. Useful for a group chat. */
   showUserAvatars?: boolean
 }
 
@@ -47,6 +54,9 @@ export interface MessageProps extends MessageTopLevelProps {
   showStatus: boolean
 }
 
+/** Base component for all message types in the chat. Renders bubbles around
+ * messages and status. Sets maximum width for a message for
+ * a nice look on larger screens. */
 export const Message = React.memo(
   ({
     enableAnimation,

src/components/SendButton/SendButton.tsx

@@ -14,6 +14,7 @@ export interface SendButtonPropsAdditionalProps {
 }
 
 export interface SendButtonProps extends SendButtonPropsAdditionalProps {
+  /** Callback for send button tap event */
   onPress: () => void
 }
 

src/components/TextMessage/TextMessage.tsx

@@ -12,13 +12,15 @@ import { getUserName, ThemeContext, UserContext } from '../../utils'
 import styles from './styles'
 
 export interface TextMessageTopLevelProps {
+  /** @see {@link LinkPreviewProps.onPreviewDataFetched} */
   onPreviewDataFetched?: ({
     message,
     previewData,
   }: {
     message: MessageType.DerivedText
     previewData: PreviewData
   }) => void
+  /** Enables link (URL) preview */
   usePreviewData?: boolean
 }
 

src/l10n.ts

@@ -1,3 +1,4 @@
+/** Base chat l10n containing all required properties to provide localized copy. */
 export const l10n = {
   en: {
     attachmentButtonAccessibilityLabel: 'Send media',

src/theme.ts

@@ -4,7 +4,7 @@ import { Theme } from './types'
 
 // For internal usage only. Use values from theme itself.
 
-/** See {@link ThemeColors.userAvatarNameColors} */
+/** @see {@link ThemeColors.userAvatarNameColors} */
 export const COLORS: ColorValue[] = [
   '#ff6767',
   '#66e0da',
@@ -45,6 +45,7 @@ const SECONDARY = '#f5f5f7'
 /** Secondary dark */
 const SECONDARY_DARK = '#2b2250'
 
+/** Default chat theme which implements {@link Theme} */
 export const defaultTheme: Theme = {
   borders: {
     inputBorderRadius: 20,
@@ -155,6 +156,7 @@ export const defaultTheme: Theme = {
   },
 }
 
+/** Dark chat theme which implements {@link Theme} */
 export const darkTheme: Theme = {
   ...defaultTheme,
   colors: {

src/types.ts

@@ -111,6 +111,8 @@ export interface Size {
   width: number
 }
 
+/** Base chat theme containing all required properties to make a theme.
+ * Implement this interface if you want to create a custom theme. */
 export interface Theme {
   borders: ThemeBorders
   colors: ThemeColors