fix: docs support

.gitignore

@@ -66,3 +66,6 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# Documentation
+docs

README.md

@@ -29,6 +29,10 @@
 
 Component and shared patterns for React Native apps using Carbon. Styles are based on the [Carbon Native Mobile](https://carbondesignsystem.com/designing/design-resources/#native-mobile) designs. Color (`g10` for light theme and `g100` for dark theme) and typography tokens are based on Carbon v11.
 
+## Documentation
+
+Documentation can be found [here](https://carbon-design-system.github.io/carbon-react-native/). This documentation is auto generated by the TypeScript files. To use the documentations you can find each component on the left side as a `Class`. Each component has a link to the example app code and the Props (`Component<ItemProps>`) which can be jumped to by clicking the ItemProps. Props will indicate all props this component supports with documentation. Links will jump to related to type declarations.
+
 ## Getting started
 
 To install `@carbon/react-native` in your project, you will need to run the following

package.json

@@ -30,7 +30,8 @@
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods",
     "example:bump": "node ./scripts/bump-example.js",
-    "postinstall": "carbon-telemetry collect --install"
+    "postinstall": "carbon-telemetry collect --install",
+    "docs": "typedoc"
   },
   "keywords": [
     "ibm",
@@ -72,6 +73,7 @@
     "react-native-svg": "^13.0.0",
     "react-native-webview": "^13.2.2",
     "release-it": "^16.1.0",
+    "typedoc": "^0.25.3",
     "typescript": "^5.1.6"
   },
   "resolutions": {

src/components/AcceptTerms/index.tsx

@@ -6,6 +6,7 @@ import { DocumentViewer, DocumentViewerSource } from '../DocumentViewer';
 import { Modal } from '../Modal';
 import { Text } from '../Text';
 
+/** Props for AcceptTerms component */
 export type AcceptTermsProps = {
   /** Title of text document */
   title: string;
@@ -38,6 +39,11 @@ export type AcceptTermsProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * AcceptTerms component for showing the accept legal terms flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/AcceptsTerms.tsx | Example code}
+ */
 export class AcceptTerms extends React.Component<AcceptTermsProps> {
   state = {
     showDisagree: false,

src/components/Accordion/index.tsx

@@ -6,6 +6,7 @@ import ChevronDownIcon from '@carbon/icons/es/chevron--down/20';
 import ChevronUpIcon from '@carbon/icons/es/chevron--up/20';
 import { Text, TextBreakModes } from '../Text';
 
+/** Props for Accordion component */
 export type AccordionProps = {
   /** Title to show for the accordion  */
   title: string;
@@ -27,6 +28,11 @@ export type AccordionProps = {
   children?: React.ReactNode;
 };
 
+/**
+ * Accordion component for showing the accept legal terms flow
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Accordion.tsx | Example code}
+ */
 export class Accordion extends React.Component<AccordionProps> {
   state = {
     open: false,

src/components/ActionSheet/index.tsx

@@ -8,6 +8,7 @@ import { Text } from '../Text';
 import { zIndexes } from '../../styles/z-index';
 import type { CarbonIcon } from '../../types/shared';
 
+/** Item to pass to ActionSheet */
 export type ActionSheetItem = {
   /** Name for button */
   text: string;
@@ -28,6 +29,7 @@ export type ActionSheetItem = {
   divider?: boolean;
 };
 
+/** Props for ActionSheet component */
 export type ActionSheetProps = {
   /** Title to show */
   title: string;
@@ -46,8 +48,11 @@ export type ActionSheetProps = {
 };
 
 /**
+ * ActionSheet component for the choice option at the bottom of a screen.
  * Render a popup (from bottom) to show menu options for when non Yes/No questions are needed.
  * Uses the OS ActionSheet if supported. Otherwise renders a custom one with similar styling.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ActionSheet.tsx | Example code}
  */
 export class ActionSheet extends React.Component<ActionSheetProps> {
   private get styles() {

src/components/BaseTextInputs/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PressableStateCallbackType, NativeSyntheticEvent, StyleProp, StyleSheet, TextInputFocusEventData, View, ViewStyle, TextInput as ReactTextInput, TextInputProps as ReactTextInputProps, Pressable, Platform } from 'react-native';
+import { PressableStateCallbackType, NativeSyntheticEvent, StyleProp, StyleSheet, TextInputFocusEventData, View, ViewStyle, TextInput as ReactTextInput, Pressable, Platform } from 'react-native';
 import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { getColor } from '../../styles/colors';
 import { Button } from '../Button';
-import { Text, TextBreakModes } from '../Text';
+import { Text } from '../Text';
 import ViewIcon from '@carbon/icons/es/view/20';
 import ViewOffIcon from '@carbon/icons/es/view--off/20';
 import SubtractIcon from '@carbon/icons/es/subtract/20';
@@ -13,9 +13,8 @@ import ErrorIcon from '@carbon/icons/es/warning--filled/20';
 import AddIcon from '@carbon/icons/es/add/20';
 import { defaultText } from '../../constants/defaultText';
 import { BodyCompact02, Body02 } from '../../styles/typography';
-import { Link, LinkProps } from '../Link';
-
-export type BaseTextInputTypes = 'text' | 'text-area' | 'password' | 'number' | 'date';
+import { Link } from '../Link';
+import { BaseTextInputTypes, TextInputProps } from '../../types/shared';
 
 /** Props for the internal base text input */
 type BaseTextInputProps = {
@@ -25,67 +24,15 @@ type BaseTextInputProps = {
   fullBleedCallback?: (focus: boolean, error: boolean) => void;
 };
 
-/** Shared props for Text, Password and TextArea */
-export type TextInputProps = {
-  /** Value of text (Controlled component) */
-  value: string;
-  /** Label string to use */
-  label?: string;
-  /** Helper string to use */
-  helperText?: string;
-  /** Check is invalid */
-  isInvalid?: (value: string) => boolean;
-  /** Error string to use. Set custom rules or return required text */
-  getErrorText?: (value: string) => string;
-  /** Warning string to use. This will show if NOT in error. */
-  warningText?: string;
-  /** Placeholder text to use */
-  placeholder?: string;
-  /** Indicate if required */
-  required?: boolean;
-  /** Indicate if disabled */
-  disabled?: boolean;
-  /** Label break mode */
-  labelBreakMode?: TextBreakModes;
-  /** Change event when text changed */
-  onChangeText: (value: string) => void;
-  /** Blur event when focus is lost */
-  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  /** Focus event when focus is gained */
-  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  /** Indicate if autoCorrect should be used (default is true) */
-  autoCorrect?: boolean;
-  /** Define auto cap rule (default is normally sentences) */
-  autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
-  /** Trigger ENTER event (consumer should validate if form is valid and submit if this is called) */
-  onSubmitEditing?: () => void;
-  /** Indicate if should be secured (password) */
-  secureTextEntry?: boolean;
-  /** Max length of field */
-  maxLength?: number;
-  /** Indicate if text box is used on layer */
-  light?: boolean;
-  /** minHeight for text area */
-  textAreaMinHeight?: number;
-  /** @remarks password only. Text to use for toggle password button (accessibility). Defaults to ENGLISH "Show/hide password" */
-  togglePasswordText?: string;
-  /** @remarks number only. Text to use for increment number button (accessibility). Defaults to ENGLISH "Increment" */
-  incrementNumberText?: string;
-  /** @remarks number only. Text to use for decrement number button (accessibility). Defaults to ENGLISH "Decrement" */
-  decrementNumberText?: string;
-  /** @remarks number only. Min and Max for numbers. If not set any number (including negative is valid) */
-  numberRules?: {
-    min?: number;
-    max?: number;
-  };
-  /** Link to render to right of label */
-  labelLink?: LinkProps;
-  /** Style to set on the item */
-  style?: StyleProp<ViewStyle>;
-  /** Direct props to set on the React Native component (including iOS and Android specific props). Helpful for fully customizing text input behavior. */
-  componentProps?: ReactTextInputProps;
-};
-
+/**
+ * Get the base styling for text inputs
+ *
+ * @param light - Indicate that light variant should be used
+ * @param hasLabelLink - Indicates that item has label with link
+ * @param fullBleed - Indicates that it should be full bleed style
+ *
+ * @returns React style item
+ */
 export const getTextInputStyle = (light?: boolean, hasLabelLink?: boolean, fullBleed?: boolean) => {
   // React Native on iOS
   const baseTextBox: any = {
@@ -214,6 +161,7 @@ export const getTextInputStyle = (light?: boolean, hasLabelLink?: boolean, fullB
 };
 
 /**
+ * @ignore
  * This is the base system for text input.
  * This allows a shared code base for all text input systems and validation rules
  * This component is not exported. It is used by `TextInput`, `TextArea` and `PasswordInput`.

src/components/BottomNavigationBar/index.tsx

@@ -6,6 +6,7 @@ import type { NavigationButton } from '../../types/navigation';
 import { Text } from '../Text';
 import { SemiBoldFont } from '../../styles/typography';
 
+/** Props for BottomNavigationBar component */
 export type BottomNavigationBarProps = {
   /** Navigation items to load */
   items: NavigationButton[];
@@ -15,6 +16,11 @@ export type BottomNavigationBarProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomNavigationBar component for rendering the bottom navigation bar
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomNavigationBar.tsx | Example code}
+ */
 export class BottomNavigationBar extends React.Component<BottomNavigationBarProps> {
   private get styles() {
     return StyleSheet.create({

src/components/BottomSafeAreaColorOverride/index.tsx

@@ -3,6 +3,10 @@ import { StyleSheet, View, Dimensions, EmitterSubscription } from 'react-native'
 import { zIndexes } from '../../styles/z-index';
 import { Overlay } from '../Overlay';
 
+/**
+ * @ignore
+ * Props for BottomSafeAreaColorOverride
+ */
 export type BottomSafeAreaColorOverrideProps = {
   /** Color to force the safe area bottom to be */
   color: string;
@@ -13,6 +17,7 @@ export type BottomSafeAreaColorOverrideProps = {
 };
 
 /**
+ * @ignore
  * This component is for setting a color to apply to bottom zone under safe areas.
  * This is used for specific flows who are full screen and need to override the bottom while not touching the top.
  * This component is not exported.

src/components/BottomToolbar/index.tsx

@@ -6,6 +6,7 @@ import type { ToolbarButton } from '../../types/navigation';
 import { Button } from '../Button';
 import { Link } from '../Link';
 
+/** Props for BottomToolbar component */
 export type BottomToolbarProps = {
   /** Toolbar items to load */
   items: ToolbarButton[];
@@ -15,6 +16,11 @@ export type BottomToolbarProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomToolbar component for rendering the bottom toolbar. This is similar to BottomNavigationBar but offers a call to action
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbar.tsx | Example code}
+ */
 export class BottomToolbar extends React.Component<BottomToolbarProps> {
   private get styles() {
     return StyleSheet.create({

src/components/BottomToolbarPrimaryAction/index.tsx

@@ -7,6 +7,7 @@ import { Button } from '../Button';
 import { Link } from '../Link';
 import type { CarbonIcon } from '../../types/shared';
 
+/** Props for BottomToolbarPrimaryAction component */
 export type BottomToolbarPrimaryActionProps = {
   /** Position of primary action (default is center) */
   position?: 'center' | 'right' | 'left';
@@ -30,6 +31,11 @@ export type BottomToolbarPrimaryActionProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * BottomToolbarPrimaryAction component for rendering the bottom toolbar with large primary action
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbarPrimaryAction.tsx | Example code}
+ */
 export class BottomToolbarPrimaryAction extends React.Component<BottomToolbarPrimaryActionProps> {
   private get styles() {
     return StyleSheet.create({

src/components/Button/index.tsx

@@ -5,6 +5,7 @@ import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../..
 import { getColor } from '../../styles/colors';
 import { Text, TextTypes } from '../Text';
 
+/** Props for Button component */
 export type ButtonProps = {
   /** Text to render (for iconOnlyMode use descriptive text) */
   text: string;
@@ -37,8 +38,10 @@ export type ButtonProps = {
 };
 
 /**
- * To not have a button be pressable 100% of screen format parent or pass style appropriately.
- * `alignSelf: 'flex-start'` is useful.
+ * Button component for rendering a button
+ * To not have a button be pressable 100% of screen format parent or pass style appropriately. `alignSelf: 'flex-start'` is useful.
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Button.tsx | Example code}
  */
 export class Button extends React.Component<ButtonProps> {
   private basicButton: StyleProp<ViewStyle> = {

src/components/Checkbox/index.tsx

@@ -16,6 +16,7 @@ export const checkboxRadioBaseStyle = {
   alignContent: 'flex-start' as const,
 };
 
+/** Props for Checkbox and Radio component */
 export type CheckboxRadioProps = {
   /** Text to render */
   label: string;
@@ -43,6 +44,11 @@ export type CheckboxRadioProps = {
   componentProps?: PressableProps;
 };
 
+/**
+ * Checkbox component for rendering a checkbox
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Checkbox.tsx | Example code}
+ */
 export class Checkbox extends React.Component<CheckboxRadioProps> {
   private get styles() {
     return StyleSheet.create({

src/components/ContentSwitcher/index.tsx

@@ -4,6 +4,7 @@ import { getColor } from '../../styles/colors';
 import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { Text, TextTypes } from '../Text';
 
+/** An item to pass to content switcher */
 export type SwitcherItem = {
   /** Text to render */
   text: string;
@@ -15,6 +16,7 @@ export type SwitcherItem = {
   data?: unknown;
 };
 
+/** Props for ContentSwitcher component */
 export type ContentSwitcherProps = {
   /** Items to render in the content switcher (should try and keep under 3. Anything larger gets hard to read on mobile) */
   items: SwitcherItem[];
@@ -28,6 +30,11 @@ export type ContentSwitcherProps = {
   componentProps?: ViewProps;
 };
 
+/**
+ * ContentSwitcher component for rendering the content switcher
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ContentSwitcher.tsx | Example code}
+ */
 export class ContentSwitcher extends React.Component<ContentSwitcherProps> {
   state = {
     currentIndex: 0,

src/components/DataTable/DataTable.tsx

@@ -2,15 +2,22 @@ import React from 'react';
 import { StyleProp, StyleSheet, ViewStyle, View, ViewProps } from 'react-native';
 import { styleReferenceBreaker } from '../../helpers';
 
+/** Props for DataTable component */
 export type DataTableProps = {
-  /** Content of the row. Should be list of <DataTableHeader /> or <DataTableRow. */
+  /** Content of the row. Should be list of DataTableHeader or DataTableRow. */
   children: React.ReactNode;
   /** Style to set on the item */
   style?: StyleProp<ViewStyle>;
   /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
   componentProps?: ViewProps;
 };
 
+/**
+ * DataTable component for rendering a data table.
+ * Children components should be DataTableRow, DataTableCell, DataTableHeader, DataTableHeaderSelected
+ *
+ * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
+ */
 export class DataTable extends React.Component<DataTableProps> {
   private get styles() {
     return StyleSheet.create({