feat(*): docs and cleanup

Author: minheq

src/components/Avatar/Avatar.mdx

@@ -15,7 +15,7 @@ Display avatar image, with default for name initials
 <Playground>
   <Avatar
     source={{ uri: 'https://picsum.photos/200/200', width: 200, height: 200 }}
-    // Defaults to name if source is not provided
+    // Fallbacks to name if source is not provided
     name="Bill Gates"
     size="large"
   />

src/components/Inputs/TextInput.mdx

@@ -9,7 +9,7 @@ import { Box, State, Icon, TextInput } from '..';
 
 # TextInput
 
-Composes of React Native's `TextInput` component (i.e. you can pass its props). [See more details](https://facebook.github.io/react-native/docs/textinput)
+Composes React Native's `TextInput`
 
 ### Usage
 
@@ -18,23 +18,44 @@ Composes of React Native's `TextInput` component (i.e. you can pass its props).
     {({ state, setState }) => (
       <TextInput
         value={state.value}
-        placeholder="Add your own placeholder"
+        placeholder="TextInput"
         size="large"
-        isDisabled={false}
-        isInvalid={false}
-        textContentType="emailAddress" // Enables autofill
-        keyboardType="email-address"
         onChangeText={text => setState({ value: text })}
-        onSubmitEditing={e => console.log('Submit on enter')}
         leftIcon={<Icon name="menu" size={24} />}
-        rightIcon={undefined}
-        isClearable={true} // Mutually exclusive with rightIcon
+        isInvalid={false}
+        isClearable // Mutually exclusive with rightIcon
         onClear={() => console.log('Cleared!')} // Only triggered with `isClearable`
-        getStyles={(props, theme) => ({
-          inputStyle: {},
-          placeholderTextColor: theme.colors.text.muted,
-        })}
       />
     )}
   </State>
 </Playground>
+
+### Props
+
+<Props of={TextInput} />
+
+### Customization
+
+Using `getStyles` prop
+
+```tsx
+TextInputStyles {
+  inputStyle: TextStyle;
+  placeholderTextColor: string;
+  containerStyle: ViewStyle;
+  leftContainerStyle: ViewStyle;
+  rightContainerStyle: ViewStyle;
+}
+
+getStyles={(TextInputProps, Theme) => TextInputStyles}
+```
+
+Markup
+
+```tsx
+<View containerStyle>
+  <View leftContainerStyle>{leftIcon}</View>
+  <RNTextInput inputStyle placeholderTextColor />
+  <View rightContainerStyle>{rightIcon}</View>
+</View>
+```

src/components/Inputs/TextInput.styles.ts

@@ -1,41 +1,41 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
-import { ControlSize, Theme } from '../../theme/Theme';
+import { Theme } from '../../theme/Theme';
+import { TextInputProps } from './TextInput';
 
 export interface TextInputStyles {
   inputStyle: TextStyle;
-  focusedStyle: TextStyle;
   placeholderTextColor: string;
   containerStyle: ViewStyle;
   leftContainerStyle: ViewStyle;
   rightContainerStyle: ViewStyle;
 }
 
-export interface TextInputStylesProps {
-  size: ControlSize;
-  isDisabled: boolean;
-  isInvalid: boolean;
-  numberOfLines?: number;
-  hasLeftIcon: boolean;
-  hasRightIcon: boolean;
-}
-
 export type GetTextInputStyles = (
-  textInputStylesProps: TextInputStylesProps,
+  props: TextInputProps,
   theme: Theme,
 ) => TextInputStyles;
 
 export const getTextInputStyles: GetTextInputStyles = (
-  { size, isDisabled, isInvalid, numberOfLines, hasLeftIcon, hasRightIcon },
+  {
+    size = 'medium',
+    isClearable = false,
+    isDisabled = false,
+    isInvalid = false,
+    numberOfLines,
+    leftIcon,
+    rightIcon,
+  },
   theme,
 ) => {
+  const hasLeftIcon = !!leftIcon;
+  const hasRightIcon = !!(rightIcon || isClearable);
   const controlHeight = theme.controlHeights[size];
 
   return {
     containerStyle: {
       position: 'relative',
     },
-    focusedStyle: {},
     inputStyle: {
       backgroundColor: theme.colors.background.content,
       borderColor: theme.colors.border.default,

src/components/Inputs/TextInput.tsx

@@ -17,15 +17,48 @@ import {
 } from './TextInput.styles';
 
 export interface TextInputProps extends RNTextInputProps {
-  children?: React.ReactNode;
-  innerRef?: React.Ref<RNTextInput>;
+  /**
+   * Size of the text input.
+   * @default medium
+   */
   size?: ControlSize;
+
+  /**
+   * When true, text input is disabled
+   */
   isDisabled?: boolean;
+
+  /**
+   * When true, text input will be highlighted as invalid
+   */
   isInvalid?: boolean;
+
+  /**
+   * Icon placed on the left side
+   */
   leftIcon?: React.ReactNode;
+
+  /**
+   * Icon placed on the left side
+   */
   rightIcon?: React.ReactNode;
+
+  /**
+   * Called when clear icon is pressed.
+   */
   onClear?: () => void;
+
+  /**
+   * When true, when value is not empty, a clear icon is displayed
+   */
   isClearable?: boolean;
+
+  /** Use `ref` instead */
+  innerRef?: React.Ref<RNTextInput>;
+
+  /**
+   * Callback to get element styles.
+   */
   getStyles?: ReplaceReturnType<
     GetTextInputStyles,
     DeepPartial<TextInputStyles>
@@ -36,11 +69,10 @@ const TextInputBase = (props: TextInputProps) => {
   const {
     getStyles,
     innerRef,
-    isClearable,
+    isClearable = false,
     isDisabled = false,
     isInvalid = false,
     leftIcon,
-    numberOfLines,
     onClear = () => {
       return;
     },
@@ -62,30 +94,19 @@ const TextInputBase = (props: TextInputProps) => {
     containerStyle,
     leftContainerStyle,
     rightContainerStyle,
-  } = mergeStyles(getTextInputStyles, getStyles)(
-    {
-      hasLeftIcon: !!leftIcon,
-      hasRightIcon: !!(rightIcon || isClearable),
-      isDisabled,
-      isInvalid,
-      numberOfLines,
-      size,
-    },
-    theme,
-  );
+  } = mergeStyles(getTextInputStyles, getStyles)(props, theme);
 
   return (
     <View style={containerStyle}>
       {leftIcon && <View style={leftContainerStyle}>{leftIcon}</View>}
       {/*
-      // @ts-ignore: name prop being passed */}
+      // @ts-ignore: name prop being passed for web */}
       <RNTextInput
         ref={innerRef}
         style={inputStyle}
         editable={!isDisabled}
         placeholderTextColor={placeholderTextColorProp || placeholderTextColor}
         name={textContentType}
-        numberOfLines={numberOfLines}
         value={value}
         onChangeText={onChangeText}
         textContentType={textContentType}

src/components/KitchenSink/KitchenSink.tsx

@@ -88,7 +88,7 @@ export const KitchenSink = () => {
             width: 200,
             height: 200,
           }}
-          // Defaults to name if source is not provided
+          // Fallbacks to name if source is not provided
           name="Bill Gates"
           size="large"
         />
@@ -373,22 +373,13 @@ export const KitchenSink = () => {
           {({ state, setState }) => (
             <TextInput
               value={state.value}
-              placeholder="Add your own placeholder"
+              placeholder="TextInput"
               size="large"
-              isDisabled={false}
-              isInvalid={false}
-              textContentType="emailAddress" // Enables autofill
-              keyboardType="email-address"
               onChangeText={text => setState({ value: text })}
-              onSubmitEditing={e => console.log('Submit on enter')}
               leftIcon={<Icon name="menu" size={24} />}
-              rightIcon={undefined}
-              isClearable={true} // Mutually exclusive with rightIcon
+              isInvalid={false}
+              isClearable // Mutually exclusive with rightIcon
               onClear={() => console.log('Cleared!')} // Only triggered with `isClearable`
-              getStyles={(props, theme) => ({
-                inputStyle: {},
-                placeholderTextColor: theme.colors.text.muted,
-              })}
             />
           )}
         </State>
@@ -977,23 +968,11 @@ export const KitchenSink = () => {
           {({ state, setState }) => (
             <Tabs
               activeTabIndex={state.activeTabIndex}
-              onChange={index => setState({ activeTabIndex: index })}
-              getStyles={(props, theme) => ({
-                containerStyle: {},
-              })}
+              onTabPress={index => setState({ activeTabIndex: index })}
             >
-              {new Array(4).fill(0).map((v, i) => {
-                if (i === 0) {
-                  return (
-                    <Tab
-                      key={0}
-                      title="Custom"
-                      onPress={() => setState({ activeTabIndex: 0 })}
-                    />
-                  );
-                }
-                return <Tab key={i} title={`Tab ${i + 1}`} />;
-              })}
+              {new Array(4).fill(0).map((v, i) => (
+                <Tab key={i} title={`Tab ${i + 1}`} />
+              ))}
             </Tabs>
           )}
         </State>
@@ -1006,84 +985,23 @@ export const KitchenSink = () => {
       </Box>
 
       <Playground>
-        <ToastProvider
-          getStyles={(props, theme) => ({
-            containerStyle: {},
-          })}
-        >
+        <ToastProvider>
           <ToastContext.Consumer>
             {({ notify }) => (
               <Button
-                onPress={() => {
+                onPress={() =>
                   notify({
                     title: 'Title',
                     description: 'Description',
-                    component: null, // A React Component that overrides title and description
-                    offset: 16,
-                    duration: 3000,
-                    // ...Alert props e.g. getStyles
-                  });
-                }}
-                title="Use"
+                  })
+                }
+                title="Open toast"
               />
             )}
           </ToastContext.Consumer>
         </ToastProvider>
       </Playground>
 
-      <Playground>
-        <ToastProvider>
-          <ToastContext.Consumer>
-            {({ notify }) => (
-              <>
-                <Button
-                  onPress={() =>
-                    notify({
-                      title: 'Title',
-                      description: 'Description',
-                    })
-                  }
-                  title="Open default toast"
-                />
-                <Button
-                  onPress={() =>
-                    notify({
-                      description: 'Description',
-                      intent: 'success',
-                      title: 'Title',
-                    })
-                  }
-                  color="primary"
-                  title="Open success toast"
-                />
-                <Button
-                  onPress={() =>
-                    notify({
-                      description: 'Description',
-                      intent: 'danger',
-                      title: 'Title',
-                    })
-                  }
-                  color="danger"
-                  title="Open danger toast"
-                />
-                <Button
-                  onPress={() =>
-                    notify({
-                      description: 'Description',
-                      intent: 'warning',
-                      title: 'Title',
-                    })
-                  }
-                  color="secondary"
-                  title="Open warning toast"
-                />
-              </>
-            )}
-          </ToastContext.Consumer>
-        </ToastProvider>
-      </Playground>
-
       <Box paddingTop={96}>
         <Heading size="xxxlarge" weight="500">
           Heading

src/components/Layout/Container.mdx

@@ -11,7 +11,7 @@ import { Box, Container, LayoutProvider, Text } from '..';
 
 `Container` centers the content with a max-width of defined by Layout (varies depending on screen size)
 
-Recommended usage with `Row and Column` to provide Grid margin
+Refer to `Layout` docs for setup
 
 ### Usage