Include all Incubator.TextField internal components in docs

Author: ethanshar

src/incubator/TextField/AccessoryButton.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import Button, {ButtonPropTypes} from '../../components/button';
 
-export default (props: ButtonPropTypes) => {
+const AccessoryButton = (props: ButtonPropTypes) => {
   return (
     <Button link grey10 activeOpacity={props.onPress ? 0.6 : 1} {...props} />
   );
 };
+
+AccessoryButton.displayName = 'Incubator.TextField';
+export default AccessoryButton;

src/incubator/TextField/CharCounter.tsx

@@ -5,12 +5,18 @@ import Text from '../../components/text';
 import FieldContext from './FieldContext';
 
 export interface CharCounterProps {
+  /**
+   * Should show a character counter (works only with maxLength)
+   */
   showCharCounter?: boolean;
   maxLength?: number;
+  /**
+   * Pass custom style to character counter text
+   */
   charCounterStyle?: TextStyle;
 }
 
-export default ({maxLength, charCounterStyle}: CharCounterProps) => {
+const CharCounter = ({maxLength, charCounterStyle}: CharCounterProps) => {
   const {value} = useContext(FieldContext);
 
   if (_.isUndefined(maxLength)) {
@@ -30,3 +36,6 @@ const styles = StyleSheet.create({
     textAlign: 'right'
   }
 });
+
+CharCounter.displayName = 'Incubator.TextField';
+export default CharCounter;

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -16,14 +16,23 @@ import Text from '../../components/text';
 import FieldContext from './FieldContext';
 
 export interface FloatingPlaceholderProps {
+  /**
+   * The placeholder for the field
+   */
   placeholder?: string;
+  /**
+   * The floating placeholder color
+   */
   floatingPlaceholderColor?: ColorType;
+  /**
+   * Custom style to pass to the floating placeholder
+   */
   floatingPlaceholderStyle?: TextStyle;
 }
 
 const FLOATING_PLACEHOLDER_SCALE = 0.875;
 
-export default ({placeholder, floatingPlaceholderColor = Colors.grey40, floatingPlaceholderStyle}: FloatingPlaceholderProps) => {
+const FloatingPlaceholder = ({placeholder, floatingPlaceholderColor = Colors.grey40, floatingPlaceholderStyle}: FloatingPlaceholderProps) => {
   const context = useContext(FieldContext);
   const [placeholderOffset, setPlaceholderOffset] = useState({
     top: 0,
@@ -97,3 +106,6 @@ function interpolateValue(
     outputRange
   });
 }
+
+FloatingPlaceholder.displayName = 'Incubator.TextField';
+export default FloatingPlaceholder;

src/incubator/TextField/Input.tsx

@@ -5,6 +5,9 @@ import {Constants} from '../../helpers'
 import FieldContext from './FieldContext';
 
 export interface InputProps extends TextInputProps, React.ComponentPropsWithRef<typeof TextInput> {
+  /**
+   * A hint text to display when focusing the field
+   */
   hint?: string;
 }
 
@@ -23,7 +26,6 @@ const Input = ({style, hint, forwardedRef, ...props}: InputProps & ForwardRefInj
   );
 };
 
-export default Input;
 
 const styles = StyleSheet.create({
   input: {
@@ -40,3 +42,6 @@ const styles = StyleSheet.create({
     })
   }
 });
+
+Input.displayName = 'Incubator.TextField';
+export default Input;

src/incubator/TextField/Label.tsx

@@ -7,14 +7,26 @@ import {getColorByState} from './Presenter';
 import FieldContext from './FieldContext';
 
 export interface LabelProps {
+  /**
+   * Field label
+   */
   label?: string;
+  /**
+   * Field label color. Either a string or color by state map ({default, focus, error, disabled})
+   */
   labelColor?: ColorType;
+  /**
+   * Custom style for the field label
+   */
   labelStyle?: TextStyle;
+  /**
+   * Pass extra props to the label Text element
+   */
   labelProps?: TextPropTypes;
   validationMessagePosition?: ValidationMessagePosition;
 }
 
-export default ({
+const Label = ({
   label,
   labelColor = Colors.grey10,
   labelStyle,
@@ -41,3 +53,6 @@ export default ({
 
   return null;
 };
+
+Label.displayName = 'Incubator.TextField';
+export default Label;

src/incubator/TextField/ValidationMessage.tsx

@@ -4,7 +4,13 @@ import Text from '../../components/text';
 import FieldContext from './FieldContext';
 
 export interface ValidationMessageProps {
+  /**
+   * Should support showing validation error message
+   */
   enableErrors?: boolean;
+  /**
+   * The validation message to display when field is invalid (depends on validate)
+   */
   validationMessage?: string;
   validationMessageStyle?: TextStyle;
   retainSpace?: boolean;

src/incubator/TextField/index.tsx

@@ -30,12 +30,33 @@ interface TextFieldProps
     FieldStateProps,
     ValidationMessageProps,
     Omit<CharCounterProps, 'maxLength'> {
+  /**
+   * Pass to render a leading button/icon
+   */
   leadingButton?: ButtonPropTypes;
+  /**
+   * Pass to render a trailing button/icon
+   */
   trailingButton?: ButtonPropTypes;
+  /**
+   * Pass to add floating placeholder support
+   */
   floatingPlaceholder?: boolean;
+  /**
+   * Custom style for the floating placeholder
+   */
   floatingPlaceholderStyle?: TextStyle;
+  /**
+   * The position of the validation message (top/bottom) 
+   */
   validationMessagePosition?: ValidationMessagePosition;
+  /**
+   * Internal style for the field container
+   */
   fieldStyle?: ViewStyle;
+  /**
+   * Container style of the whole component
+   */
   containerStyle?: ViewStyle;
 }
 
@@ -48,6 +69,12 @@ interface StaticMembers {
   validationMessagePositions: typeof ValidationMessagePosition;
 }
 
+/**
+ * @description: TextField component with validation and customization API
+ * @extends: TextInput
+ * @extendslink: https://reactnative.dev/docs/textinput
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx
+ */
 const TextField = (
   {
     // General

src/incubator/TextField/withFieldState.tsx

@@ -25,6 +25,9 @@ export interface FieldStateProps extends TextInputProps {
   validateOnStart?: boolean;
   validateOnChange?: boolean;
   validateOnBlur?: boolean;
+  /**
+   * A single or multiple validator. Can be a string (required, email) or custom function.
+   */
   validate?: Validator | Validator[];
 }