From 710fb708c220bcca53dfb2fcc28308f293ae6a42 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <danielgcortes@gmail.com>
Date: Thu, 5 Dec 2024 11:38:16 -0700
Subject: [PATCH] Add Card component and asset row cards in balance page

---
 packages/mobile-app/app/(tabs)/balances.tsx   | 42 +++++++++--
 .../tackle-box/lib/components/Box/Box.tsx     | 15 +++-
 .../tackle-box/lib/components/Card/Card.tsx   | 72 +++++++++++++++++++
 .../tackle-box/lib/components/Stack/Stack.tsx |  7 +-
 packages/tackle-box/lib/index.ts              |  8 ++-
 5 files changed, 127 insertions(+), 17 deletions(-)
 create mode 100644 packages/tackle-box/lib/components/Card/Card.tsx

diff --git a/packages/mobile-app/app/(tabs)/balances.tsx b/packages/mobile-app/app/(tabs)/balances.tsx
index 6f4e202..c789a90 100644
--- a/packages/mobile-app/app/(tabs)/balances.tsx
+++ b/packages/mobile-app/app/(tabs)/balances.tsx
@@ -6,6 +6,7 @@ import {
   Tabs,
   Text,
   VStack,
+  Card,
 } from "@ironfish/tackle-box";
 import { SafeAreaGradient } from "@/components/SafeAreaGradient/SafeAreaGradient";
 
@@ -39,16 +40,13 @@ export default function Balances() {
             <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content value="assets">
-            <VStack>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
-              <Text>Assets</Text>
+            <VStack p={4} gap={4}>
+              <AssetRow />
+              <AssetRow />
             </VStack>
           </Tabs.Content>
           <Tabs.Content value="transactions">
-            <VStack>
+            <VStack p={4}>
               <Text>Transactions</Text>
               <Text>Transactions</Text>
               <Text>Transactions</Text>
@@ -75,3 +73,33 @@ function NavBar() {
     </HStack>
   );
 }
+
+function AssetBadge() {
+  return (
+    <Box
+      bg="pink"
+      height={48}
+      width={48}
+      minHeight={48}
+      minWidth={48}
+      borderRadius="full"
+    />
+  );
+}
+
+function AssetRow() {
+  return (
+    <Card>
+      <HStack alignItems="center" gap={3}>
+        <AssetBadge />
+        <VStack>
+          <Text size="sm">$IRON</Text>
+          <Text size="sm" color="textSecondary">
+            100.55
+          </Text>
+        </VStack>
+        <Icon name="chevron-right" />
+      </HStack>
+    </Card>
+  );
+}
diff --git a/packages/tackle-box/lib/components/Box/Box.tsx b/packages/tackle-box/lib/components/Box/Box.tsx
index 0d25ac6..66f7e63 100644
--- a/packages/tackle-box/lib/components/Box/Box.tsx
+++ b/packages/tackle-box/lib/components/Box/Box.tsx
@@ -26,6 +26,7 @@ const styles = css.create({
     flexDirection: "column",
     alignItems: "stretch",
     justifyContent: "flex-start",
+    position: "relative",
   },
   backgroundColor: (color?: string) => ({
     backgroundColor: color,
@@ -34,6 +35,10 @@ const styles = css.create({
     height,
     width,
   }),
+  minDimensions: (minHeight?: UnitValue, minWidth?: UnitValue) => ({
+    minHeight,
+    minWidth,
+  }),
   margin: (
     top: UnitValue,
     right: UnitValue,
@@ -77,21 +82,26 @@ const styles = css.create({
 });
 
 export type BoxProps = BorderRadiusArgs &
-  BorderWidthArgs & {
+  BorderWidthArgs &
+  MarginPadding & {
     children?: ReactNode;
     height?: UnitValue;
     width?: UnitValue;
+    minHeight?: UnitValue;
+    minWidth?: UnitValue;
     bg?: Colors;
     borderColor?: Colors;
     borderWidth?: number;
     flexGrow?: number;
     style?: StyleObj;
-  } & MarginPadding;
+  };
 
 export function Box<TAsProp extends RSDElementTypes = "div">({
   children,
   height = "auto",
   width = "100%",
+  minHeight,
+  minWidth,
   bg,
   borderColor,
   borderRadius = 0,
@@ -176,6 +186,7 @@ export function Box<TAsProp extends RSDElementTypes = "div">({
       style={[
         styles.base,
         styles.dimensions(height, width),
+        styles.minDimensions(minHeight, minWidth),
         styles.margin(...margin),
         styles.padding(...padding),
         styles.borderRadius(borderRadiusValues),
diff --git a/packages/tackle-box/lib/components/Card/Card.tsx b/packages/tackle-box/lib/components/Card/Card.tsx
new file mode 100644
index 0000000..bdfde0a
--- /dev/null
+++ b/packages/tackle-box/lib/components/Card/Card.tsx
@@ -0,0 +1,72 @@
+import { PropsWithChildren } from "react";
+import { css } from "react-strict-dom";
+import { Box } from "@/components/Box/Box";
+import { MarginPadding } from "@/utils/useMarginPaddingValues";
+
+const style = css.create({
+  shadowWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  content: {
+    zIndex: 1,
+  },
+});
+
+type CardProps = PropsWithChildren<
+  MarginPadding & {
+    active?: boolean;
+  }
+>;
+
+export function Card({
+  children,
+  active,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p = 4,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+}: CardProps) {
+  return (
+    <Box m={m} mx={mx} my={my} mt={mt} mr={mr} mb={mb} ml={ml} pr={1} pb={1}>
+      <Box
+        borderRadius={4}
+        borderWidth={1}
+        borderColor="border"
+        p={p}
+        px={px}
+        py={py}
+        pt={pt}
+        pr={pr}
+        pb={pb}
+        pl={pl}
+        style={style.content}
+        bg="background"
+      >
+        {children}
+      </Box>
+      <Box style={style.shadowWrapper} pl={1} pt={1}>
+        <Box
+          borderRadius={4}
+          borderWidth={1}
+          borderColor="border"
+          flexGrow={1}
+          bg={active ? "backgroundInverse" : "background"}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/tackle-box/lib/components/Stack/Stack.tsx b/packages/tackle-box/lib/components/Stack/Stack.tsx
index 42ea9b1..3155dd3 100644
--- a/packages/tackle-box/lib/components/Stack/Stack.tsx
+++ b/packages/tackle-box/lib/components/Stack/Stack.tsx
@@ -22,14 +22,12 @@ const styles = css.create({
 
 type StackProps = BoxProps & {
   gap?: number;
-  spacing?: number;
   alignItems?: string;
   justifyContent?: string;
 };
 
 export function HStack({
   gap = 0,
-  spacing,
   alignItems = "stretch",
   justifyContent = "flex-start",
   children,
@@ -39,7 +37,7 @@ export function HStack({
     <Box
       style={[
         styles.horizontal,
-        styles.gap(applyBaseSpacing(spacing ?? gap)),
+        styles.gap(applyBaseSpacing(gap)),
         styles.align(alignItems),
         styles.justify(justifyContent),
       ]}
@@ -52,7 +50,6 @@ export function HStack({
 
 export function VStack({
   gap = 0,
-  spacing,
   alignItems = "stretch",
   justifyContent = "flex-start",
   children,
@@ -62,7 +59,7 @@ export function VStack({
     <Box
       style={[
         styles.vertical,
-        styles.gap(applyBaseSpacing(spacing ?? gap)),
+        styles.gap(applyBaseSpacing(gap)),
         styles.align(alignItems),
         styles.justify(justifyContent),
       ]}
diff --git a/packages/tackle-box/lib/index.ts b/packages/tackle-box/lib/index.ts
index 7dc2179..790fe7b 100644
--- a/packages/tackle-box/lib/index.ts
+++ b/packages/tackle-box/lib/index.ts
@@ -1,9 +1,11 @@
 export { Box } from "@/components/Box/Box";
 export { Button } from "@/components/Button/Button";
-export { IconButton } from "@/components/Button/IconButton";
+export { Card } from "@/components/Card/Card";
 export { HStack, VStack } from "@/components/Stack/Stack";
-export { Text } from "@/components/Text/Text";
-export { TextInput } from "@/components/TextInput/TextInput";
 export { Icon } from "@/components/Icon/Icon";
+export { IconButton } from "@/components/Button/IconButton";
 export { Tabs } from "@/components/Tabs/Tabs";
+export { Text } from "@/components/Text/Text";
+export { TextInput } from "@/components/TextInput/TextInput";
+
 export { css } from "react-strict-dom";