chore(example-app): ✨ add popups module, create tooltip component screen with examples

Author: Karthik-B-06

example/src/AppRoot.tsx

@@ -9,13 +9,14 @@ import {
   CheckboxScreen,
   MeterComponentScreen,
   SpinnerScreen,
-} from "./modules/primitives";
+  TooltipScreen,
+} from "./modules";
 
 const Drawer = createDrawerNavigator();
 
 const AppRoot = () => {
   return (
-    <Drawer.Navigator initialRouteName="AvatarScreen">
+    <Drawer.Navigator initialRouteName="TooltipScreen">
       <Drawer.Screen
         options={{ title: "Avatar" }}
         name="AvatarScreen"
@@ -51,6 +52,11 @@ const AppRoot = () => {
         name="MeterComponentScreen"
         component={MeterComponentScreen}
       />
+      <Drawer.Screen
+        options={{ title: "Tooltip" }}
+        name="TooltipScreen"
+        component={TooltipScreen}
+      />
     </Drawer.Navigator>
   );
 };

example/src/modules/index.ts

@@ -0,0 +1,2 @@
+export * from "./popups";
+export * from "./primitives";

example/src/modules/popups/TooltipScreen.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Clock,
+  Icon,
+  Tooltip,
+  useTheme,
+} from "@adaptui/react-native-tailwind";
+
+export const TooltipScreen = () => {
+  const tailwind = useTheme();
+  return (
+    <Box
+      style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
+    >
+      <Tooltip
+        hasArrow
+        placement="top"
+        trigger={
+          <Button
+            style={tailwind.style("my-1")}
+            prefix={<Icon icon={<Clock />} />}
+            themeColor="success"
+            size="sm"
+          >
+            Progress on Top
+          </Button>
+        }
+        content="2 out 3 tasks completed"
+      />
+      <Tooltip
+        hasArrow
+        placement="bottom"
+        trigger={
+          <Button
+            style={tailwind.style("my-1")}
+            prefix={<Icon icon={<Clock />} />}
+            themeColor="success"
+            variant="outline"
+            size="sm"
+          >
+            Progress on Bottom
+          </Button>
+        }
+        content="2 out 3 tasks completed"
+      />
+      <Tooltip
+        hasArrow
+        placement="left"
+        trigger={
+          <Button
+            style={tailwind.style("my-1")}
+            prefix={<Icon icon={<Clock />} />}
+            themeColor="success"
+            variant="subtle"
+            size="sm"
+          >
+            Progress on Left
+          </Button>
+        }
+        content="2 out 3 tasks completed"
+      />
+      <Tooltip
+        hasArrow
+        placement="right"
+        trigger={
+          <Button
+            style={tailwind.style("my-1")}
+            themeColor="success"
+            variant="ghost"
+            size="sm"
+          >
+            Progress on Right
+          </Button>
+        }
+        content="2 out 3 tasks completed"
+      />
+    </Box>
+  );
+};

example/src/modules/popups/index.ts

@@ -0,0 +1 @@
+export * from "./TooltipScreen";