chore: Fixed the directory naming issue in Git

src/components/atoms/box/__snapshots__/Box.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Box passes the basic snapshot test 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={{}}
+    animatedStyle={
+      {
+        "value": {},
+      }
+    }
+    collapsable={false}
+    style={{}}
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  >
+    asdasd
+  </View>
+</View>
+`;

src/components/atoms/box/box.spec.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Box from "./box";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider } from "../../../theme/src/theme-context";
+
+jest.useFakeTimers();
+
+describe("Atoms/Box", () => {
+  it("passes the basic snapshot test", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Box>asdasd</Box>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/atoms/box/box.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+import { pearl } from "../../../pearl";
+
+/**
+ * Box is the most abstract component on top of which all other Pearl UI components are built.
+ * By default, it renders a <View> element.
+ */
+const Box = pearl<ViewProps>(View, {
+  componentName: "Box",
+  type: "basic",
+  animatable: true,
+});
+
+// The props that the Box component accepts.
+export type BoxProps = React.ComponentProps<typeof Box>;
+
+Box.displayName = "Box";
+
+// Export the Box component as the default export.
+export default Box;

src/components/atoms/center/__snapshots__/Center.spec.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Center passes the snapshot test 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  >
+    This is centered
+  </View>
+</View>
+`;

src/components/atoms/center/center.spec.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import Center from "./center";
+import { ThemeProvider } from "../../../theme/src/theme-context";
+
+jest.useFakeTimers();
+
+describe("Atoms/Center", () => {
+  it("passes the snapshot test", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Center>This is centered</Center>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/atoms/center/center.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Box, { BoxProps } from "../box/box";
+
+/**
+ * A layout component that centers its child within itself across both axes
+ */
+const Center = React.memo(
+  React.forwardRef(({ children, ...rest }: BoxProps, ref: any) => {
+    return (
+      <Box {...rest} ref={ref} alignItems="center" justifyContent="center">
+        {children}
+      </Box>
+    );
+  })
+);
+
+Center.displayName = "Center";
+
+export default Center;

src/components/atoms/divider/__snapshots__/Divider.spec.tsx.snap

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Divider passes the snapshot test for different length modes 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "backgroundColor": "#58617A",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#58617A",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#58617A",
+        "height": 1,
+        "width": "50%",
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+  <View
+    animate={
+      {
+        "backgroundColor": "#ee82ee",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#ee82ee",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#ee82ee",
+        "height": 20,
+        "width": 1,
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+</View>
+`;
+
+exports[`Atoms/Divider passes the snapshot test in dark mode 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "backgroundColor": "#58617A",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#58617A",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#58617A",
+        "height": 1,
+        "width": "100%",
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+  <View
+    animate={
+      {
+        "backgroundColor": "#58617A",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#58617A",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#58617A",
+        "height": "100%",
+        "width": 1,
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+</View>
+`;
+
+exports[`Atoms/Divider passes the snapshot test in light mode 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "backgroundColor": "#E4E9F2",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#E4E9F2",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#E4E9F2",
+        "height": 1,
+        "width": "100%",
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+  <View
+    animate={
+      {
+        "backgroundColor": "#E4E9F2",
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#E4E9F2",
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#E4E9F2",
+        "height": "100%",
+        "width": 1,
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  />
+</View>
+`;

src/components/atoms/divider/divider.config.ts

@@ -0,0 +1,16 @@
+import { AtomicComponentConfig } from "../../../theme/src/types";
+import { DividerProps } from "./divider";
+
+const DividerConfig: AtomicComponentConfig<DividerProps> = {
+  baseStyle: {
+    orientation: "horizontal",
+    bgColor: {
+      light: "neutral.300",
+      dark: "neutral.600",
+    },
+    thickness: 1,
+    length: "100%",
+  },
+};
+
+export default DividerConfig;