feat(badge): added a Badge component and an HOC component to add badg…

…es to other components

App.tsx

@@ -36,8 +36,8 @@ const App = () => {
 
   return (
     <ThemeProvider defaultColorMode="light" haveFontsLoaded={haveFontsLoaded}>
-      {/* <Storybook /> */}
-      <Screen
+      <Storybook />
+      {/* <Screen
         onPullToRefresh={() => {
           console.log("Hello");
         }}
@@ -89,7 +89,7 @@ const App = () => {
         <Button mt="xl" isFullWidth onPress={() => console.log(2)}>
           Login
         </Button>
-      </Screen>
+      </Screen> */}
     </ThemeProvider>
   );
 };

src/components/Atoms/Avatar/Avatar.tsx

@@ -19,7 +19,7 @@ type AvatarProps = ImageProps & {
 const Avatar: React.FC<AvatarProps> = ({ children, ...rest }) => {
   const props = useMolecularComponentConfig("Avatar", rest, {
     size: rest.size,
-    variant: rest.size,
+    variant: rest.variant,
   });
 
   return <Box></Box>;

src/components/Atoms/Badge/Badge.config.ts

@@ -0,0 +1,80 @@
+export default {
+  parts: ["root", "text"],
+  baseStyle: {
+    root: {
+      borderRadius: "full",
+    },
+    text: {
+      color: "neutral.50",
+    },
+  },
+  sizes: {
+    s: {
+      root: {
+        w: 20,
+        h: 20,
+      },
+      text: {
+        variant: "btn4",
+      },
+    },
+    m: {
+      root: {
+        w: 25,
+        h: 25,
+      },
+      text: {
+        variant: "btn4",
+      },
+    },
+    l: {
+      root: {
+        w: 30,
+        h: 30,
+      },
+      text: {
+        variant: "btn3",
+      },
+    },
+    xl: {
+      root: {
+        w: 35,
+        h: 35,
+      },
+      text: {
+        variant: "btn3",
+      },
+    },
+  },
+  variants: {
+    primary: {
+      root: {
+        backgroundColor: "primary.500",
+      },
+    },
+    success: {
+      root: {
+        backgroundColor: "success.500",
+      },
+    },
+    warning: {
+      root: {
+        backgroundColor: "warning.500",
+      },
+    },
+    info: {
+      root: {
+        backgroundColor: "info.500",
+      },
+    },
+    error: {
+      root: {
+        backgroundColor: "danger.500",
+      },
+    },
+  },
+  defaults: {
+    size: "m",
+    variant: "primary",
+  },
+};

src/components/Atoms/Badge/Badge.spec.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import Badge from "./Badge";
+import { ThemeProvider } from "../../../theme/src/themeContext";
+import Icon, { IconProps } from "../Icon/Icon";
+import { withBadge } from "./withBadge";
+
+jest.useFakeTimers();
+
+describe("Atoms/Badge", () => {
+  it("passes the snapshot test for different sizes", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Badge size="s">2</Badge>
+        <Badge size="m">2</Badge>
+        <Badge size="l">2</Badge>
+        <Badge size="xl">2</Badge>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("passes the snapshot test for different variants", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Badge variant="primary"></Badge>
+        <Badge variant="success"></Badge>
+        <Badge variant="warning">2</Badge>
+        <Badge variant="info">2</Badge>
+        <Badge variant="error">2</Badge>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("passes the snapshot test for different values types", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Badge>23</Badge>
+
+        <Badge>{2}+</Badge>
+
+        <Badge>
+          <Icon
+            iconFamily="Entypo"
+            iconName="edit"
+            color="neutral.50"
+            size="s"
+          ></Icon>
+        </Badge>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("withBadge HOC works as expected", () => {
+    const Wrapper = () => {
+      const BadgedIcon = withBadge<IconProps>(28, {
+        placement: "topRight",
+        size: "s",
+      })(Icon);
+
+      const BadgedIconTwo = withBadge<IconProps>(
+        <Icon iconFamily="Ionicons" iconName="pencil" size="s" color="white" />,
+        {
+          placement: "bottomRight",
+          size: "m",
+        }
+      )(Icon);
+
+      return (
+        <>
+          <BadgedIcon
+            iconFamily="FontAwesome"
+            iconName="inbox"
+            size="xl"
+            mb="l"
+          ></BadgedIcon>
+
+          <BadgedIconTwo
+            iconFamily="FontAwesome"
+            iconName="inbox"
+            size="xl"
+          ></BadgedIconTwo>
+        </>
+      );
+    };
+
+    const root = render(
+      <ThemeProvider>
+        <Wrapper />
+      </ThemeProvider>
+    );
+
+    const tree = root.toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(root.getByText("28")).toBeTruthy();
+  });
+});