feat: List component (#111)

Author: 0xDazzer

.changeset/brave-lamps-remain.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+List component

package-lock.json

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MdOutlineInfo } from "react-icons/md";
+
+import { List } from "./List";
+import { ListItem } from "./components/ListItem";
+
+const meta: Meta<typeof List> = {
+  component: List,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    orientation: "horizontal",
+    children: [
+      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" />,
+      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" />,
+      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" suffix={<MdOutlineInfo size={24} />} />,
+    ],
+  },
+};

src/components/List/List.stories.tsx

@@ -0,0 +1,30 @@
+import { type PropsWithChildren, Children, cloneElement, isValidElement, ReactElement } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { type ListItemProps, ListItem } from "./components/ListItem";
+
+export interface ListProps {
+  className?: string;
+  orientation: "horizontal" | "vertical";
+  children: ReactElement<ListItemProps, typeof ListItem> | ReactElement<ListItemProps, typeof ListItem>[];
+}
+
+const STYLES = {
+  horizontal: "flex py-3",
+  vertical: "px-4",
+};
+
+const ROW_ORIENTATION = {
+  horizontal: "vertical",
+  vertical: "horizontal",
+} as const;
+
+export function List({ className, orientation = "vertical", children }: PropsWithChildren<ListProps>) {
+  return (
+    <div className={twMerge("rounded border border-secondary-strokeLight", STYLES[orientation], className)}>
+      {Children.map(children, (item) =>
+        isValidElement(item) ? cloneElement(item, { orientation: ROW_ORIENTATION[orientation] }) : item,
+      )}
+    </div>
+  );
+}

src/components/List/List.tsx

@@ -0,0 +1,36 @@
+import { twMerge } from "tailwind-merge";
+
+import { Text } from "@/components/Text";
+
+export interface ListItemProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+  title: string | JSX.Element;
+  value: string | JSX.Element;
+  suffix?: JSX.Element;
+}
+
+const STYLES = {
+  horizontal: "flex-row items-center justify-between border-b border-secondary-strokeLight last-of-type:border-0 py-4",
+  vertical: "flex-1 flex-col items-start justify-start gap-1.5 px-6 border-r border-secondary-strokeLight",
+};
+
+const VALUE_STYLES = {
+  horizontal: "flex item-center gap-1",
+  vertical: "flex items-center justify-between w-full",
+};
+
+export function ListItem({ className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
+  return (
+    <div className={twMerge("flex", STYLES[orientation], className)}>
+      <Text as="div" className="text-accent-secondary" variant={orientation === "horizontal" ? "body1" : "body2"}>
+        {title}
+      </Text>
+
+      <Text as="div" className={twMerge("text-accent-primary", VALUE_STYLES[orientation])} variant="body1">
+        {value}
+        {suffix}
+      </Text>
+    </div>
+  );
+}

src/components/List/components/ListItem.tsx

@@ -0,0 +1,2 @@
+export * from "./List";
+export * from "./components/ListItem";

src/components/List/index.ts

@@ -14,6 +14,7 @@ export * from "./components/Table";
 export * from "./components/Popover";
 export * from "./components/Card";
 export * from "./components/Toggle";
+export * from "./components/List";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";