chore: add pages to storybook

src/app/pages/home/components/account-actions.tsx

@@ -14,8 +14,8 @@ import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
 import { PlusIcon } from '@app/ui/components/icons/plus-icon';
 import { SwapIcon } from '@app/ui/components/icons/swap-icon';
+import { ActionButton } from '@app/ui/components/layout/card/account/action-button';
 
-import { ActionButton } from './action-button';
 import { SendButton } from './send-button';
 
 export function AccountActions(props: FlexProps) {

src/app/pages/home/components/account-area.tsx

@@ -1,6 +1,4 @@
-import { memo } from 'react';
-
-import { HStack, HstackProps, Stack } from 'leather-styles/jsx';
+import { HStack, Stack } from 'leather-styles/jsx';
 
 import { CurrentAccountAvatar } from '@app/features/current-account/current-account-avatar';
 import { CurrentAccountName } from '@app/features/current-account/current-account-name';
@@ -9,13 +7,13 @@ import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/s
 
 import { AccountTotalBalance } from '../../../components/account-total-balance';
 
-export const CurrentAccount = memo((props: HstackProps) => {
+export function CurrentAccount() {
   const currentAccount = useCurrentStacksAccount();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-
   if (!currentAccount) return null;
+
   return (
-    <HStack gap="space.03" alignItems="center" {...props}>
+    <HStack gap="space.03" alignItems="center">
       <CurrentAccountAvatar />
       <Stack overflow="hidden" display="block" alignItems="flex-start" gap="space.03">
         <CurrentAccountName />
@@ -25,4 +23,4 @@ export const CurrentAccount = memo((props: HstackProps) => {
       </Stack>
     </HStack>
   );
-});
+}

src/app/pages/home/components/send-button.tsx

@@ -14,8 +14,7 @@ import {
 } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
-
-import { ActionButton } from './action-button';
+import { ActionButton } from '@app/ui/components/layout/card/account/action-button';
 
 function SendButtonSuspense() {
   const navigate = useNavigate();

src/app/ui/components/icons/accessible-icon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';
+
+type Props = AccessibleIconPrimitive.AccessibleIconProps;
+
+export default function AccessibleIcon(props: Props): React.ReactElement {
+  return <AccessibleIconPrimitive.Root {...props} />;
+}

src/app/ui/components/layout/card/account/account.card.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from '@storybook/react';
+import { Flex } from 'leather-styles/jsx';
+
+import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
+import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { PlusIcon } from '@app/ui/components/icons/plus-icon';
+import { SwapIcon } from '@app/ui/components/icons/swap-icon';
+import { ActionButton } from '@app/ui/components/layout/card/account/action-button';
+
+import { AccountCard as Component } from './account.card';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Layout/AccountCard',
+};
+
+export default meta;
+
+export function AccountCard() {
+  return (
+    <Component name="leather.btc" balance="$1,000" onClickTrigger={() => null}>
+      <Flex justify="space-between">
+        <ActionButton icon={<ArrowUpIcon />} label="Send" />
+        <ActionButton icon={<ArrowDownIcon />} label="Receive" />
+        <ActionButton icon={<PlusIcon />} label="Buy" />
+        <ActionButton icon={<SwapIcon />} label="Swap" />
+      </Flex>
+    </Component>
+  );
+}

src/app/ui/components/layout/card/account/account.card.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { Box, Divider, Flex, styled } from 'leather-styles/jsx';
+
+import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon';
+import { Link } from '@app/ui/components/link/link';
+
+interface AccountCardProps {
+  name: string;
+  balance: string;
+  children: ReactNode;
+  onClickTrigger(): void;
+}
+
+export function AccountCard({ name, balance, children, onClickTrigger }: AccountCardProps) {
+  return (
+    <Flex
+      direction="column"
+      bgColor={{ base: 'ink.2', sm: 'unset' }}
+      rounded="sm"
+      px={{ base: 'space.05', sm: '0' }}
+      pt={{ base: 'space.05', sm: 'space.06' }}
+      pb={{ base: 'space.02', sm: 'space.06' }}
+    >
+      <Link
+        _before={{ bg: 'transparent' }}
+        _hover={{ color: 'accent.action-primary-hover' }}
+        data-testid={SettingsSelectors.SwitchAccountTrigger}
+        onClick={onClickTrigger}
+      >
+        <Flex>
+          <styled.p data-testid={SettingsSelectors.CurrentAccountDisplayName} textStyle="label.01">
+            {name}
+          </styled.p>
+          <Box mt="space.01" ml="space.02">
+            <ChevronDownIcon />
+          </Box>
+        </Flex>
+      </Link>
+      <Flex flexDir={{ base: 'column', md: 'row' }} justify="space-between" alignItems="center">
+        <styled.h1 textStyle="heading.02" mb="space.05" mt="space.04">
+          {balance}
+        </styled.h1>
+        <Divider
+          position="relative"
+          color="accent.border-default"
+          right="space.05"
+          width="calc(100% + 48px)"
+          mb="space.02"
+          hideFrom="sm"
+        />
+
+        {children}
+      </Flex>
+    </Flex>
+  );
+}

src/app/ui/components/layout/card/account/action-button.tsx

@@ -0,0 +1,24 @@
+import { Box, Flex, styled } from 'leather-styles/jsx';
+
+import { Button } from '@app/ui/components/button/button';
+import AccessibleIcon from '@app/ui/components/icons/accessible-icon';
+
+interface ActionButtonProps extends React.ComponentProps<typeof Button> {
+  icon: React.ReactNode;
+  label: string;
+}
+
+export function ActionButton({ icon, label, ...rest }: ActionButtonProps) {
+  return (
+    <Button variant="ghost" key={label} width={['1/4', '', 'unset']} textStyle="label.03" {...rest}>
+      <Flex gap="space.02" direction="column" align="center">
+        <AccessibleIcon label={label}>
+          <Box height="16px" width="16px">
+            {icon}
+          </Box>
+        </AccessibleIcon>
+        <styled.span px="space.02">{label}</styled.span>
+      </Flex>
+    </Button>
+  );
+}

src/app/ui/components/layout/page/home.layout.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta } from '@storybook/react';
+import { Box, Flex, Stack } from 'leather-styles/jsx';
+
+import { RouteUrls } from '@shared/route-urls';
+
+import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
+import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { PlusIcon } from '@app/ui/components/icons/plus-icon';
+import { SwapIcon } from '@app/ui/components/icons/swap-icon';
+import { ActionButton } from '@app/ui/components/layout/card/account/action-button';
+import { Tabs } from '@app/ui/components/tabs/tabs';
+
+import { HomeLayout as Component } from './home.layout';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Pages/Home',
+};
+
+export default meta;
+
+export function HomeLayout() {
+  return (
+    <Component
+      name="leather.btc"
+      balance="$1,000"
+      onClickTrigger={() => null}
+      accountActions={
+        // TODO don't repeat this, compose story
+        <Flex justify="space-between">
+          <ActionButton icon={<ArrowUpIcon />} label="Send" />
+          <ActionButton icon={<ArrowDownIcon />} label="Receive" />
+          <ActionButton icon={<PlusIcon />} label="Buy" />
+          <ActionButton icon={<SwapIcon />} label="Swap" />
+        </Flex>
+      }
+    >
+      <Stack flexGrow={1} mt="space.05" gap="space.06">
+        <Tabs.Root>
+          <Tabs.List>
+            <Tabs.Trigger data-testid="tab-assets" value={RouteUrls.Home}>
+              Assets
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              data-testid="tab-activity"
+              value={`${RouteUrls.Home}${RouteUrls.Activity}`}
+            >
+              Activity
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs.Root>
+        <Box width="100%" height="400px" backgroundColor="lightModeRed.300" />
+      </Stack>
+    </Component>
+  );
+}

src/app/ui/components/layout/page/home.layout.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Stack } from 'leather-styles/jsx';
 
-import { AccountInfoCard } from '@app/pages/home/components/account-info-card';
+import { AccountCard } from '@app/ui/components/layout/card/account/account.card';
 import { FULLPAGE_MAX_WIDTH } from '@app/ui/constants';
 
-type HomeLayoutProps = Record<'currentAccount' | 'children', React.ReactNode>;
-export function HomeLayout({ children }: HomeLayoutProps) {
+interface HomeLayoutProps {
+  name: string;
+  balance: string;
+  children: ReactNode;
+  onClickTrigger(): void;
+  accountActions: ReactNode;
+}
+
+export function HomeLayout({
+  name,
+  balance,
+  children,
+  onClickTrigger,
+  accountActions,
+}: HomeLayoutProps) {
   return (
     <Stack alignItems="center" width="100%" mx={['', 'space.04']}>
       <Stack
@@ -18,7 +31,9 @@ export function HomeLayout({ children }: HomeLayoutProps) {
         backgroundColor="ink.1"
         borderRadius="lg"
       >
-        <AccountInfoCard />
+        <AccountCard name={name} balance={balance} onClickTrigger={onClickTrigger}>
+          {accountActions}
+        </AccountCard>
         {children}
       </Stack>
     </Stack>

src/app/ui/components/layout/page/two-column.layout.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+import { Box } from 'leather-styles/jsx';
+
+import { TwoColumnLayout as Component } from './two-column.layout';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Layout/TwoColumnLayout',
+};
+
+export default meta;
+
+export function TwoColumnLayout() {
+  return (
+    <Component title={<>Hello world</>} content={<p>lorem ipsum </p>} action={<>some action</>}>
+      <Box width="100%" height="600px" backgroundColor="lightModeRed.300" />
+    </Component>
+  );
+}