feat(packages): borrow page add new borrow button (#287)

Author: jeremy-babylonlabs

packages/babylon-core-ui/src/components/BorrowCard/BorrowCard.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BorrowCard } from "./BorrowCard";
+
+const meta: Meta<typeof BorrowCard> = {
+  title: "Components/Cards/BorrowCard",
+  component: BorrowCard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A card component for creating new borrow positions in the vault application.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onNewBorrow: () => console.log("New borrow clicked"),
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    title: "Start Borrowing",
+    description: "Create your first borrow position to get started",
+    onNewBorrow: () => alert("Borrow flow started"),
+  },
+};
+
+export const WithCustomStyling: Story = {
+  args: {
+    className: "border-2 border-primary-light",
+    onNewBorrow: () => console.log("Custom styled borrow"),
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    title: "New Vault Borrow",
+    description: "Click the plus button to create a new borrow position",
+    onNewBorrow: () => {
+      console.log("Borrow action triggered!");
+      alert("This would open the borrow modal");
+    },
+  },
+};
+

packages/babylon-core-ui/src/components/BorrowCard/BorrowCard.tsx

@@ -0,0 +1,49 @@
+import { Card } from "../Card";
+import { IconButton } from "../Button";
+import { PlusIcon } from "../Icons";
+
+/**
+ * BorrowCard component for initiating new borrow positions
+ * 
+ * @example
+ * ```tsx
+ * <BorrowCard 
+ *   onNewBorrow={() => handleBorrow()} 
+ *   title=""
+ *   description=""
+ * />
+ * ```
+ */
+export interface BorrowCardProps {
+  onNewBorrow?: () => void;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export function BorrowCard({
+  onNewBorrow,
+  title = "",
+  description = "",
+  className
+}: BorrowCardProps) {
+  return (
+    <Card className={className}>
+      <div className="flex flex-col items-center justify-center gap-4 py-8">
+        <IconButton 
+          variant="outlined" 
+          size="large" 
+          onClick={onNewBorrow}
+          aria-label="Create new borrow"
+        >
+          <PlusIcon />
+        </IconButton>
+        <div className="text-center">
+          <h3 className="text-lg font-medium text-accent-primary">{title}</h3>
+          <p className="text-sm text-accent-secondary">{description}</p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+

packages/babylon-core-ui/src/components/BorrowCard/index.tsx

@@ -0,0 +1,3 @@
+export { BorrowCard } from "./BorrowCard";
+export type { BorrowCardProps } from "./BorrowCard";
+

packages/babylon-core-ui/src/components/Icons/PlusIcon.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PlusIcon } from "./common/PlusIcon";
+
+const meta: Meta<typeof PlusIcon> = {
+  title: "Components/Icons/PlusIcon",
+  component: PlusIcon,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "number", min: 8, max: 48, step: 2 },
+      defaultValue: 14,
+    },
+    variant: {
+      control: "select",
+      options: ["default", "primary", "secondary", "error", "success", "accent-primary", "accent-secondary"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 14,
+    variant: "default",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 24,
+    variant: "primary",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <PlusIcon variant="default" />
+      <PlusIcon variant="primary" />
+      <PlusIcon variant="secondary" />
+      <PlusIcon variant="error" />
+      <PlusIcon variant="success" />
+      <PlusIcon variant="accent-primary" />
+      <PlusIcon variant="accent-secondary" />
+    </div>
+  ),
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <PlusIcon size={12} />
+      <PlusIcon size={14} />
+      <PlusIcon size={20} />
+      <PlusIcon size={24} />
+      <PlusIcon size={32} />
+    </div>
+  ),
+};
+

packages/babylon-core-ui/src/components/Icons/common/PlusIcon.tsx

@@ -0,0 +1,27 @@
+import { IconProps, iconColorVariants } from "../index";
+import { twJoin } from "tailwind-merge";
+
+export const PlusIcon = ({
+  className = "",
+  size = 14,
+  variant = "default",
+  color
+}: IconProps) => {
+  const colorClass = color || iconColorVariants[variant];
+
+  return (
+    <svg
+      style={{ width: size, height: size }}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twJoin("transition-opacity duration-200", colorClass, className)}
+    >
+      <path 
+        d="M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+

packages/babylon-core-ui/src/components/Icons/index.ts

@@ -34,6 +34,7 @@ export { CloseIcon } from "./common/CloseIcon";
 export { WarningIcon } from "./common/WarningIcon";
 export { CollapseIcon } from "./common/CollapseIcon";
 export { OpenIcon } from "./common/OpenIcon";
+export { PlusIcon } from "./common/PlusIcon";
 export { ChevronLeftIcon } from "./common/ChevronLeftIcon";
 export { BugReportIcon } from "./common/BugReportIcon";
 export { ThemeIcon } from "./common/ThemeIcon";

packages/babylon-core-ui/src/components/index.ts

@@ -2,5 +2,6 @@ export { Copy } from './Copy';
 export { Toggle } from './Toggle';
 export { DisplayHash } from './DisplayHash';
 export * from './Avatar';
+export * from './BorrowCard';
 export * from './Text';
 

packages/babylon-core-ui/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./components/Card";
 export * from "./components/Toggle";
 export * from "./components/List";
 export * from "./components/Badge";
+export * from "./components/BorrowCard";
 export * from "./components/SubSection";
 export * from "./components/CounterButton";
 export * from "./components/Menu";

routes/vault/src/VaultLayout.tsx

@@ -1,7 +1,9 @@
+import { Borrow } from "./components/ui";
+
 export default function VaultLayout() {
   return (
     <div className="container mx-auto flex max-w-[760px] flex-1 flex-col gap-12 px-4">
-     
+      <Borrow />
     </div>
   );
 }

routes/vault/src/components/ui/Borrow.tsx

@@ -0,0 +1,15 @@
+import { BorrowCard } from "@babylonlabs-io/core-ui";
+
+export function Borrow() {
+
+  const handleNewBorrow = () => {
+    console.log("New borrow clicked");
+  };
+
+  return (
+    <div className="container mx-auto flex max-w-[760px] flex-1 flex-col gap-8 px-4 py-8">
+      <BorrowCard onNewBorrow={handleNewBorrow} />
+    </div>
+  );
+}
+