[IOPLT-63] Adds spacers

src/components/contentWrapper/ContentWrapper.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { View } from "react-native";
+import type { IOAppMargin } from "../../core";
+import { IOVisualCostants } from "../../core/IOStyles";
+
+type IOContentWrapperProps = {
+    margin?: IOAppMargin;
+    children: React.ReactNode;
+};
+
+/**
+`ContentWrapper` is the main wrapper of the application. It automatically sets side margins,
+depending on the size value
+@param {IOContentWrapper} margin
+ */
+export const ContentWrapper = ({
+    margin = IOVisualCostants.appMarginDefault,
+    children
+}: IOContentWrapperProps) => (
+    <View
+        style={{
+            paddingHorizontal: margin
+        }}
+    >
+        {children}
+    </View>
+);

src/components/divider/Divider.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { View } from "react-native";
+import { IOColors, IOThemeContext } from "../../core";
+
+type DividerOrientation = "vertical" | "horizontal";
+
+type DividerProps = {
+    orientation: DividerOrientation;
+};
+
+const DEFAULT_BORDER_SIZE = 1;
+
+/**
+Native `Divider` component
+@param  {DividerOrientation} orientation
+ */
+const BaseDivider = React.memo(({ orientation }: DividerProps) => {
+    const theme = React.useContext(IOThemeContext);
+    const baseStyle = {
+        backgroundColor: IOColors[theme["divider-default"]],
+        ...(orientation === "vertical" ? { width: DEFAULT_BORDER_SIZE } : { height: DEFAULT_BORDER_SIZE })
+    };
+    return <View style={baseStyle} />;
+});
+
+/**
+Horizontal Divider component
+ */
+export const Divider = () => <BaseDivider orientation={"horizontal"} />;
+/**
+Vertical Divider component
+ */
+export const VDivider = () => <BaseDivider orientation={"vertical"} />;

src/components/spacer/Spacer.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { View } from "react-native";
+import { hexToRgba, IOColors, IOSpacer } from "../../core";
+
+export type SpacerOrientation = "vertical" | "horizontal";
+
+type BaseSpacerProps = {
+    orientation: SpacerOrientation;
+    size: IOSpacer;
+};
+
+type SpacerProps = {
+    size?: IOSpacer;
+};
+
+const DEFAULT_SIZE = 16;
+
+/* Debug Mode */
+const debugMode = false;
+const debugBg = hexToRgba(IOColors.red, 0.2);
+
+/**
+Native `Spacer` component
+@param  {SpacerOrientation} orientation 
+@param {IOSpacer} size
+ */
+const Spacer = ({ orientation, size }: BaseSpacerProps) => {
+    const style = React.useMemo(() => ({
+        ...(orientation === "vertical" && {
+            height: size
+        }),
+        ...(orientation === "horizontal" && {
+            width: size
+        }),
+        ...((debugMode as boolean) && {
+            backgroundColor: debugBg
+        })
+    }), [orientation, size]);
+
+    return <View style={style} />;
+};
+
+/**
+Horizontal spacer component
+@param {IOSpacer} size
+ */
+export const HSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
+    <Spacer orientation={"horizontal"} size={size} />
+);
+/**
+Vertical spacer component
+@param {IOSpacer} size
+ */
+export const VSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
+    <Spacer orientation={"vertical"} size={size} />
+);