feat: Added typesafety for component configs, added performance optim…

…izations and memoization, fixes issues with the pressable component

App.tsx

@@ -1,3 +1,4 @@
+import "./wdyr";
 import React from "react";
 import {
   useFonts,
@@ -22,6 +23,8 @@ import {
 } from "@expo-google-fonts/poppins";
 import { ThemeProvider } from "./src/theme/src/theme-context";
 import Screen from "./src/components/atoms/screen/screen";
+import Pressable from "./src/components/atoms/pressable/pressable";
+import ComponentCard from "./demo/components/component-card";
 import Text from "./src/components/atoms/text/text";
 import Icon from "./src/components/atoms/icon/icon";
 import Fade from "./src/components/atoms/fade/fade";
@@ -49,9 +52,16 @@ import ButtonGroup from "./src/components/molecules/button/button-group";
 import Box from "./src/components/atoms/box/box";
 import SkeletonText from "./src/components/atoms/skeleton/skeleton-text";
 import { MotiPressable } from "moti/interactions";
-import { Pressable } from "react-native";
-import { ResizeMode } from "expo-av";
+import {
+  FlatList,
+  LogBox,
+  SafeAreaView,
+  View,
+  Pressable as RNPressable,
+  Text as RNText,
+} from "react-native";
 import { NativeModules } from "react-native";
+import { useTheme } from "./src";
 
 if (__DEV__) {
   NativeModules.DevSettings.setIsDebuggingRemotely(true);
@@ -86,7 +96,111 @@ const App = () => {
   );
 };
 
+const componentList = [
+  {
+    label: "Box",
+    imageSrc: require("./demo/assets/box.png"),
+  },
+  {
+    label: "Center",
+    imageSrc: require("./demo/assets/center.png"),
+  },
+  {
+    label: "Screen",
+    imageSrc: require("./demo/assets/screen.png"),
+  },
+  {
+    label: "Spacer",
+    imageSrc: require("./demo/assets/spacer.png"),
+  },
+  {
+    label: "Stack",
+    imageSrc: require("./demo/assets/stack.png"),
+  },
+  {
+    label: "Divider",
+    imageSrc: require("./demo/assets/divider.png"),
+  },
+  {
+    label: "Text",
+    imageSrc: require("./demo/assets/text.png"),
+  },
+  {
+    label: "Icon",
+    imageSrc: require("./demo/assets/icon.png"),
+  },
+  {
+    label: "Image",
+    imageSrc: require("./demo/assets/image.png"),
+  },
+  {
+    label: "Avatar",
+    imageSrc: require("./demo/assets/avatar.png"),
+  },
+  {
+    label: "Video",
+    imageSrc: require("./demo/assets/video.png"),
+  },
+  {
+    label: "Pressable",
+    imageSrc: require("./demo/assets/pressable.png"),
+  },
+  {
+    label: "Button",
+    imageSrc: require("./demo/assets/button.png"),
+  },
+  {
+    label: "Icon Button",
+    imageSrc: require("./demo/assets/icon-button.png"),
+  },
+  {
+    label: "Text Link",
+    imageSrc: require("./demo/assets/text-link.png"),
+  },
+  {
+    label: "Input",
+    imageSrc: require("./demo/assets/input.png"),
+  },
+  {
+    label: "Switch",
+    imageSrc: require("./demo/assets/switch.png"),
+  },
+  {
+    label: "Textarea",
+    imageSrc: require("./demo/assets/textarea.png"),
+  },
+  {
+    label: "Checkbox",
+    imageSrc: require("./demo/assets/checkbox.png"),
+  },
+  {
+    label: "Radio",
+    imageSrc: require("./demo/assets/radio.png"),
+  },
+  {
+    label: "Spinner",
+    imageSrc: require("./demo/assets/spinner.png"),
+  },
+  {
+    label: "Skeleton",
+    imageSrc: require("./demo/assets/skeleton.png"),
+  },
+  {
+    label: "Badge",
+    imageSrc: require("./demo/assets/badge.png"),
+  },
+  {
+    label: "Progress",
+    imageSrc: require("./demo/assets/progress.png"),
+  },
+  {
+    label: "Transitions",
+    imageSrc: require("./demo/assets/transitions.png"),
+  },
+];
+
 const Index = () => {
+  const { colorMode, toggleColorMode } = useTheme();
   const [radioGroupValue, setRadioGroupValue] = React.useState("B");
   const [checkboxGroupValue, setCheckboxGroupValue] = React.useState(["B"]);
   const [checked, setChecked] = React.useState(false);
@@ -110,31 +224,75 @@ const Index = () => {
   }, [progress]);
 
   return (
-    <Screen>
-      <Stack>
-        <Switch
-          size="xs"
-          isChecked={checked}
-          onPress={() => setChecked(!checked)}
-        />
+    <Screen p="0" scrollable={false}>
+      <Stack direction="vertical" flex={1} spacing="0">
+        <Box
+          py="1.5"
+          flexDirection="row"
+          borderBottomWidth={1}
+          borderColor={{ light: "neutral.300", dark: "neutral.600" }}
+          justifyContent="space-between"
+          alignItems="center"
+          style={{
+            paddingHorizontal: 20,
+          }}
+        >
+          <Text fontWeight="semibold">Pearl UI - Showcase</Text>
+          <IconButton
+            size="s"
+            variant="ghost"
+            onPress={toggleColorMode}
+            icon={
+              <Icon
+                rawSize={15}
+                iconFamily="Feather"
+                iconName={colorMode === "light" ? "sun" : "moon"}
+              />
+            }
+          />
+        </Box>
 
-        <Switch
-          size="s"
-          isChecked={checked}
-          onPress={() => setChecked(!checked)}
+        <FlatList
+          data={componentList}
+          horizontal={false}
+          numColumns={2}
+          renderItem={({ item, index }) => (
+            <ComponentCard
+              label={item.label}
+              imageSrc={item.imageSrc}
+              transition={{
+                type: "timing",
+                duration: 50,
+                opacity: {
+                  type: "timing",
+                  duration: 200,
+                  delay: index * 100,
+                },
+                translateY: {
+                  type: "timing",
+                  duration: 200,
+                  delay: index * 100,
+                },
+              }}
+            />
+          )}
+          keyExtractor={(item) => item.label}
+          style={{ padding: 10 }}
         />
+      </Stack>
+    </Screen>
+  );
 
-        <Switch
-          size="m"
-          isChecked={checked}
-          onPress={() => setChecked(!checked)}
-        />
+  return (
+    <Screen>
+      {/* <Button>Save</Button>
+      <Stack>
+        <Spinner size="xs" />
+        <Spinner size="s" />
+        <Spinner size="m" />
+        <Spinner size="l" />
 
-        <Switch
-          size="l"
-          isChecked={checked}
-          onPress={() => setChecked(!checked)}
-        />
+        <Switch isChecked={checked} onPress={() => setChecked(!checked)} />
 
         <IconButton
           size="xs"
@@ -144,14 +302,28 @@ const Index = () => {
           Save
         </IconButton>
 
-        <Slide show={isOpen}>
+        <SlideFade show={isOpen}>
           <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">
-            <Text color="white">alskdnalskndalknsdad</Text>
+            <Text color="white" fontWeight="500">
+              alskdnalskndalknsdad
+            </Text>
           </Box>
-        </Slide>
-      </Stack>
+        </SlideFade>
+
+        <Stack direction="vertical">
+          <Text variant="h5">Controlled Checkbox group</Text>
+          <CheckBoxGroup
+            value={checkboxGroupValue}
+            onChange={(newVal) => setCheckboxGroupValue(newVal)}
+          >
+            <CheckBox value="A">A</CheckBox>
+            <CheckBox value="B">B</CheckBox>
+            <CheckBox value="C">C</CheckBox>
+          </CheckBoxGroup>
+        </Stack>
+      </Stack> */}
 
-      <Stack direction="vertical" spacing="6">
+      {/* <Stack direction="vertical" spacing="6">
         <Video
           w="100%"
           aspectRatio={16 / 9}
@@ -417,7 +589,7 @@ const Index = () => {
         <Input isFullWidth placeholder="Focused Input" autoFocus />
         <Input isFullWidth isDisabled placeholder="Disabled Input" />
         <Input isFullWidth placeholder="Error Input" isInvalid />
-      </Stack>
+      </Stack> */}
     </Screen>
   );
 };

demo/components/component-card.tsx

@@ -0,0 +1,50 @@
+import { ImageSourcePropType } from "react-native";
+import { Stack, Image, Text, Box, Pressable, PressableProps } from "../../src";
+
+type ComponentCardProps = PressableProps & {
+  label: string;
+  imageSrc: ImageSourcePropType;
+};
+
+const ComponentCard: React.FC<ComponentCardProps> = ({
+  label,
+  imageSrc,
+  ...props
+}) => {
+  return (
+    <Pressable
+      flex={1}
+      margin="2.5"
+      borderRadius="m"
+      borderWidth={1}
+      borderColor={{ light: "neutral.300", dark: "neutral.600" }}
+      bgColor={{ light: "white", dark: "neutral.700" }}
+      boxShadow="none"
+      from={{ opacity: 0, translateY: 10 }}
+      animate={{ opacity: 1, translateY: 0 }}
+      _pressed={{
+        borderColor: "primary.500",
+        boxShadow: "s",
+      }}
+      {...props}
+    >
+      <Stack spacing="0" borderRadius="m" overflow="hidden">
+        <Image
+          w="100%"
+          aspectRatio={1}
+          borderRadius="none"
+          borderTopLeftRadius="m"
+          borderTopRightRadius="m"
+          source={imageSrc}
+        />
+        <Box py="1.5" px="3">
+          <Text variant="h5" fontWeight="medium">
+            {label}
+          </Text>
+        </Box>
+      </Stack>
+    </Pressable>
+  );
+};
+
+export default ComponentCard;

documentation/docs/components/feedback/Skeleton.mdx → docs/docs/components/feedback/Skeleton.mdx

@@ -98,6 +98,7 @@ The `Skeleton` component supports the following style props:
 
 - [backgroundColor](../../core-features/style-props#color-and-background-color) (Only `backgroundColor` props are supported, not the `color` prop)
 - [layout](../../core-features/style-props#layout)
+- [transform](../../core-features/style-props#transform)
 - [position](../../core-features/style-props#position)
 - [opacity and visiblity](../../core-features/style-props#opacity-and-visibility)
 - [margin and padding](../../core-features/style-props#margin-and-padding)

documentation/docs/components/feedback/Spinner.mdx → docs/docs/components/feedback/Spinner.mdx

@@ -122,6 +122,7 @@ The `Spinner` component supports these style properties:
 - [color](../../core-features/style-props#color-and-background-color) (Only the `color` prop is supported, not the `backgroundColor` props)
 - [margin and padding](../../core-features/style-props#margin-and-padding)
 - [layout](../../core-features/style-props#layout)
+- [transform](../../core-features/style-props#transform)
 - [position](../../core-features/style-props#position)
 
 ### Additional Properties
@@ -136,3 +137,5 @@ The `Spinner` component also supports these additional properties:
 | `isExpanded`        | No       | <t>boolean</t>                                                                                         | `false`      | Determines if the Spinner spans the parent container and centers the spinner within.              |
 | `colorScheme`       | No       | <t>PearlTheme["palette"]</t>                                                                           | `"primary""` | Sets the active color palette of the spinner.                                                     |
 | `animationDuration` | No       | <t>number</t>                                                                                          | `1200`       | Sets the animation duration in milliseconds.                                                      |
+| `rawSize`           | No       | <t>number</t>                                                                                          | `20`         | Adjusts the size of the spinner.                                                                  |
+| `sizeMultiplier`    | No       | <t>number</t>                                                                                          | `1`          | Adjusts the size of the spinner relative to its container.                                        |

documentation/docs/components/forms/Pressable.mdx → docs/docs/components/forms/Pressable.mdx

@@ -12,7 +12,7 @@ import SourceButton from "../../../src/components/SourceButton/SourceButton";
   />
 </div>
 
-The `Pressable` component is a wrapper around the [React Native Pressable](https://reactnative.dev/docs/pressable) component. It is designed to incorporate Pearl style props, making it a versatile tool for creating interactive components such as buttons, links, and more.
+The `Pressable` is a functional component use to make interactive elements such as buttons, links, and more.
 
 ## Importing the Component
 

documentation/docs/components/layout/Box.mdx → docs/docs/components/layout/Box.mdx

@@ -48,6 +48,7 @@ The `Box` component supports the following style props:
 
 - [backgroundColor](../../core-features/style-props#color-and-background-color) (Note: Only `backgroundColor` props are supported, not the `color` prop)
 - [layout](../../core-features/style-props#layout)
+- [transform](../../core-features/style-props#transform)
 - [position](../../core-features/style-props#position)
 - [opacity and visibility](../../core-features/style-props#opacity-and-visibility)
 - [margin and padding](../../core-features/style-props#margin-and-padding)

documentation/docs/components/layout/Divider.mdx → docs/docs/components/layout/Divider.mdx

@@ -77,6 +77,7 @@ The `Divider` component supports the following style props:
 
 - [backgroundColor](../../core-features/style-props#color-and-background-color) (Only `backgroundColor` props are supported, not the `color` prop)
 - [layout](../../core-features/style-props#layout)
+- [transform](../../core-features/style-props#transform)
 - [position](../../core-features/style-props#position)
 - [opacity and visiblity](../../core-features/style-props#opacity-and-visibility)
 - [margin and padding](../../core-features/style-props#margin-and-padding)

documentation/docs/components/media/Icon.mdx → docs/docs/components/media/Icon.mdx

@@ -86,6 +86,7 @@ The `Icon` component supports the following style props:
 - [color and backgroundColor](../../core-features/style-props#color-and-background-color)
 - [margin and padding](../../core-features/style-props#margin-and-padding)
 - [layout](../../core-features/style-props#layout)
+- [transform](../../core-features/style-props#transform)
 - [opacity and visibility](../../core-features/style-props#opacity-and-visibility)
 
 ### Animation Properties

documentation/docs/components/media/Image.mdx → docs/docs/components/media/Image.mdx

@@ -251,7 +251,7 @@ Apart from the properties listed below, the `Image` component also inherits all
 | `isCached`                  | No       | <t>boolean</t>                                                                              | `true`      | Determines if a remote image should be cached.                                                    |
 | `loaderType`                | No       | <t>"progressive" \| "spinner"</t>                                                           | `"spinner"` | Specifies the type of loader to display until the image is fully loaded.                          |
 | `previewSource`             | No       | <t>[ImageSource](https://reactnative.dev/docs/image#imagesource)</t>                        |             | Specifies the source of the placeholder image while the remote image is loading.                  |
-| `previewColor`              | No       | <t>string</t>                                                                               |             | Defines the color of the image container while the remote image is loading.                       |
+| `previewColor`              | No       | <t>PearlTheme["palette"]</t>                                                                |             | Defines the color of the image container while the remote image is loading.                       |
 | `overlayTransitionDuration` | No       | <t>number</t>                                                                               | `300`       | Specifies the duration (in ms) for the progressive loading overlay to fade after the image loads. |
 | `imageDownloadOptions`      | No       | <t>[DownloadOptions](https://docs.expo.dev/versions/latest/sdk/filesystem/#arguments-8)</t> | {}          | Configures the download options when fetching the remote image.                                   |
 | `tint`                      | No       | <t>"dark" \| "light" \| "default"</t>                                                       | `"dark"`    | Specifies the tint of the progressive loading overlay.                                            |