docs: updated Screen docs to reflect new props, scrollability, and pu…

…ll-to-refresh

App.tsx

@@ -37,7 +37,11 @@ const App = () => {
   return (
     <ThemeProvider defaultColorMode="light" haveFontsLoaded={haveFontsLoaded}>
       {/* <Storybook /> */}
-      <Screen>
+      <Screen
+        onPullToRefresh={() => {
+          console.log("Hello");
+        }}
+      >
         <Input
           isFullWidth
           placeholder="Enter Email"

documentationwebsite/docs/components/forms/CheckBox.mdx

@@ -7,6 +7,11 @@ The `CheckBox` component is used in forms when a user needs to select multiple v
 
 ## Import
 
+Pearl UI exports 2 checkbox-related components:
+
+1. `CheckBox`: A single checkbox which can be checked and unchecked.
+2. `CheckBoxGroup`: A wrapper which stacks multiple CheckBox components together and provides a central place to control their state.
+
 ```jsx
 import { CheckBox, CheckBoxGroup } from "pearl-ui";
 ```
@@ -291,7 +296,6 @@ export default {
     box: {
       p: "hairline",
       shape: "square",
-      borderWidth: 1,
       borderColor: "neutral.300",
       checkedBackgroundColor: "primary.500",
       errorBorderColor: "danger.500",

documentationwebsite/docs/components/forms/Radio.mdx

@@ -7,6 +7,11 @@ The `Radio` component is used when only one choice may be selected in a series o
 
 ## Import
 
+Pearl UI exports 2 radio-related components:
+
+1. `Radio`: A single radio which can be selected.
+2. `RadioGroup`: A wrapper which stacks multiple Radio components together and provides a central place to control their state.
+
 ```jsx
 import { Radio, RadioGroup } from "pearl-ui";
 ```

documentationwebsite/docs/components/layout/Screen.mdx

@@ -21,6 +21,39 @@ import { Screen } from "pearl-ui";
 <Screen>This is the screen</Screen>
 ```
 
+### Scrolling behaviour
+
+More often than not the contents inside your screen would exceed the device height, thus `Screen` allows you to add scrolling support to all your screens using the `scrollable` prop. By default, it's value is set to `true`.
+
+```jsx
+<Screen scrollable={true}>This is a scrollable screen</Screen>
+
+<Screen scrollable={false}>This is a static screen</Screen>
+```
+
+### Pull to Refresh
+
+The pull-to-refresh (or swipe-to-refresh) pattern lets a user pull down on a list of data using touch in order to retrieve more data.
+
+This can be added using the `onPullToRefresh` prop which expects a function/Promise which should be executed if a pull-to-refresh action has occured.
+
+_(Note: The screen needs to scrollable to allow this behaviour to work on iOS devices)_.
+
+```tsx
+<Screen
+  onPullToRefresh={() => {
+    new Promise<void>((res, rej) =>
+      setTimeout(() => {
+        console.log("I got executed!");
+        res();
+      }, 2000)
+    );
+  }}
+>
+  Pull me!
+</Screen>
+```
+
 ## Example
 
 import Snack from "../../../src/components/ExpoSnack";
@@ -55,16 +88,37 @@ import TabItem from "@theme/TabItem";
 
 ### Additional props
 
-| Name    | Required | Type                                            | Default | Description               |
-| ------- | -------- | ----------------------------------------------- | ------- | ------------------------- |
-| size    | false    | <t>PearlTheme.components.Screen["sizes"]</t>    |         | The size of the screen    |
-| variant | false    | <t>PearlTheme.components.Screen["variants"]</t> |         | The variant of the screen |
+`Screen` also composes a [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view), there it supports all of it's props excluding:
+
+- `refresh`
+- `scrollEnabled`
+- `showsHorizontalScrollIndicator`
+- `showsVerticalScrollIndicator`
+
+Finally, the following additional props are supported as well:
+
+| Name                           | Required | Type                                            | Default     | Description                                                                               |
+| ------------------------------ | -------- | ----------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| size                           | false    | <t>PearlTheme.components.Screen["sizes"]</t>    |             | The size of the screen.                                                                   |
+| variant                        | false    | <t>PearlTheme.components.Screen["variants"]</t> |             | The variant of the screen.                                                                |
+| scrollable                     | false    | <t>boolean</t>                                  | `true`      | Whether the screen is scrollable.                                                         |
+| showScrollBar                  | false    | <t>boolean</t>                                  | `false`     | Whether to show the vertical scrollbar if the Screen is scrollable.                       |
+| onPullToRefresh                | false    | <t>Function</t>                                 |             | Method to execute when a pull-to-refresh action is performed.                             |
+| refreshIndicatorColors         | false    | <t>string[]</t>                                 |             | The colors (at least one) that will be used to draw the refresh indicator (Android only). |
+| refreshProgressBackgroundColor | false    | <t>string</t>                                   |             | Progress view top offset.                                                                 |
+| refreshProgressViewOffset      | false    | <t>number</t>                                   | `0`         | The background color of the refresh indicator.                                            |
+| refreshIndicatorSize           | false    | <t>"default" \| "large"</t>                     | `"default"` | Size of the refresh indicator (Android only).                                             |
+| refreshTintColor               | false    | <t>string</t>                                   | `"default"` | The color of the refresh indicator (iOS only).                                            |
+| refreshTitle                   | false    | <t>string</t>                                   | `"default"` | The title displayed under the refresh indicator (iOS only).                               |
+| refreshTitleColor              | false    | <t>string</t>                                   | `"default"` | The color of the refresh indicator title (iOS only).                                      |
 
 ## Default Component Style
 
 ```js
 export default {
   baseStyle: {
+    scrollable: true,
+    showScrollBar: false,
     backgroundColor: {
       light: "neutral.50",
       dark: "neutral.800",

src/components/Atoms/Avatar/Avatar.config.ts

@@ -0,0 +1,5 @@
+export default {
+  parts: ["root", "image", "text"],
+  baseStyle: {},
+  defaults: {},
+};

src/components/Atoms/Avatar/Avatar.spec.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import Avatar from "./Avatar";
+import { ThemeProvider } from "../../../theme/src/themeContext";
+
+jest.useFakeTimers();
+
+describe("Atoms/Divider", () => {
+  it("passes the snapshot test in light mode", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Avatar source={{}} />
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Atoms/Avatar/Avatar.story.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import Screen from "../Screen/Screen";
+import Avatar from "./Avatar";
+
+storiesOf("Avatar", module)
+  .addDecorator((getStory) => <Screen>{getStory()}</Screen>)
+  .add("Main", () => (
+    <>
+      {/* <Divider />
+      <Divider mt="l" length="50%" />
+
+      <Divider mt="l" orientation="vertical" length={20} bg="violet" /> */}
+    </>
+  ));

src/components/Atoms/Avatar/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useMolecularComponentConfig } from "../../../hooks/useMolecularComponentConfig";
+import Box from "../../Atoms/Box/Box";
+import { ImageProps } from "../../Molecules/Image/Image";
+
+type AvatarProps = ImageProps & {
+  /** The size of the avatar */
+  size?: string;
+  /** The variant of the avatar */
+  variant?: string;
+};
+
+// TODO: Add main user image render
+// TODO: Add icon fallback based on user name
+// TODO: Add support for custom fallback icon
+// TODO: Add icon badge to avatar
+
+/** The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon. */
+const Avatar: React.FC<AvatarProps> = ({ children, ...rest }) => {
+  const props = useMolecularComponentConfig("Avatar", rest, {
+    size: rest.size,
+    variant: rest.size,
+  });
+
+  return <Box></Box>;
+};
+
+export default Avatar;

src/components/Atoms/Avatar/__snapshots__/Divider.spec.tsx.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Divider passes the snapshot test for different length modes 1`] = `
+Array [
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#1A2138",
+          "display": "flex",
+        },
+        Object {
+          "height": 1,
+          "width": "50%",
+        },
+      ]
+    }
+  />,
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ee82ee",
+          "display": "flex",
+        },
+        Object {
+          "height": 20,
+          "width": 1,
+        },
+      ]
+    }
+  />,
+]
+`;
+
+exports[`Atoms/Divider passes the snapshot test in dark mode 1`] = `
+Array [
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#1A2138",
+          "display": "flex",
+        },
+        Object {
+          "height": 1,
+          "width": "100%",
+        },
+      ]
+    }
+  />,
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#1A2138",
+          "display": "flex",
+        },
+        Object {
+          "height": "100%",
+          "width": 1,
+        },
+      ]
+    }
+  />,
+]
+`;
+
+exports[`Atoms/Divider passes the snapshot test in light mode 1`] = `
+Array [
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#E4E9F2",
+          "display": "flex",
+        },
+        Object {
+          "height": 1,
+          "width": "100%",
+        },
+      ]
+    }
+  />,
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#E4E9F2",
+          "display": "flex",
+        },
+        Object {
+          "height": "100%",
+          "width": 1,
+        },
+      ]
+    }
+  />,
+]
+`;

src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap

@@ -2,8 +2,10 @@
 
 exports[`Atoms/Box passes the snapshot test 1`] = `
 <View
+  onLayout={[Function]}
   style={
     Object {
+      "borderRadius": undefined,
       "display": "flex",
     }
   }

src/components/Atoms/Center/__snapshots__/Center.spec.tsx.snap

@@ -2,9 +2,11 @@
 
 exports[`Atoms/Center passes the snapshot test 1`] = `
 <View
+  onLayout={[Function]}
   style={
     Object {
       "alignItems": "center",
+      "borderRadius": undefined,
       "display": "flex",
       "justifyContent": "center",
     }

src/components/Atoms/Divider/Divider.tsx

@@ -3,7 +3,7 @@ import { useAtomicComponentConfig } from "../../../hooks/useAtomicComponentConfi
 import { View } from "react-native";
 import { BoxProps } from "../../Atoms/Box/Box";
 
-type DividerProps = BoxProps & {
+export type DividerProps = BoxProps & {
   /** The size of the divider */
   size?: string;
   /** The variant of the divider */

src/components/Atoms/Icon/Icon.tsx

@@ -42,7 +42,7 @@ const iconStyleFunctions = [
   visible,
 ] as StyleFunctionContainer[];
 
-type IconProps = ColorProps &
+export type IconProps = ColorProps &
   BackgroundColorProps &
   SpacingProps &
   LayoutProps &
@@ -92,6 +92,8 @@ const iconFamilyMapping = {
   Zocial,
 };
 
+// TODO: Add icon badge with color and content props
+
 /** he `Icon` component can used to add Expo Icons to your app and customize them using style props. */
 const Icon: React.FC<IconProps> = ({
   iconFamily,