refactor: item interactive to pressable

leather-io · Mar 18, 2024 · faa3a79 · faa3a79
1 parent 2190278
commit faa3a79
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 78 deletions.
diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { Spinner } from '@app/ui/components/spinner';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface AccountListItemLayoutProps {
   accountAddresses: ReactNode;
@@ -29,7 +29,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
   } = props;
 
   return (
-    <ItemInteractive
+    <Pressable
       data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
       key={`account-${index}`}
       onClick={onSelectAccount}
@@ -47,6 +47,6 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
         }
         captionLeft={accountAddresses}
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -5,9 +5,9 @@ import { createMoney } from '@shared/models/money.model';
 import { formatBalance } from '@app/common/format-balance';
 import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
 import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface Brc20TokenAssetItemLayoutProps {
   token: Brc20Token;
@@ -29,7 +29,7 @@ export function Brc20TokenAssetItemLayout({
       label="Not enough BTC in balance"
       side="top"
     >
-      <ItemInteractive onClick={onClick} my="space.02">
+      <Pressable onClick={onClick} my="space.02">
         <ItemLayout
           flagImg={<Brc20AvatarIcon />}
           titleLeft={token.ticker}
@@ -46,7 +46,7 @@ export function Brc20TokenAssetItemLayout({
             </BasicTooltip>
           }
         />
-      </ItemInteractive>
+      </Pressable>
     </BasicTooltip>
   );
 }
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -5,10 +5,10 @@ import { Flex, styled } from 'leather-styles/jsx';
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils';
 
@@ -36,7 +36,7 @@ export function CryptoCurrencyAssetItemLayout({
     parseCryptoCurrencyAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
+    <Pressable data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={icon}
         titleLeft={title}
@@ -69,6 +69,6 @@ export function CryptoCurrencyAssetItemLayout({
           )
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -3,9 +3,9 @@ import { styled } from 'leather-styles/jsx';
 import { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
 
 import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { parseStacksFungibleTokenAssetBalance } from './fungible-token-asset.utils';
 
@@ -21,7 +21,7 @@ export function StacksFungibleTokenAssetItemLayout({
     parseStacksFungibleTokenAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
+    <Pressable data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <StacksAssetAvatar
@@ -46,6 +46,6 @@ export function StacksFungibleTokenAssetItemLayout({
           </BasicTooltip>
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
@@ -26,7 +26,7 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    <ItemInteractive onClick={openTxLink} my="space.02">
+    <Pressable onClick={openTxLink} my="space.02">
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
@@ -46,6 +46,6 @@ export function TransactionItemLayout({
           )
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@app/ui/components/button/button';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemWithButtonsLayout } from '@app/ui/components/item/item-with-buttons.layout';
+import { ItemLayoutWithButtons } from '@app/ui/components/item-layout/item-layout-with-buttons';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable } from '@app/ui/pressable/pressable';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 interface ReceiveItemProps {
@@ -23,8 +23,8 @@ export function ReceiveItem({
 }: ReceiveItemProps) {
   if (!address) return null;
   return (
-    <ItemInteractive my="space.02">
-      <ItemWithButtonsLayout
+    <Pressable my="space.02">
+      <ItemLayoutWithButtons
         flagImg={icon}
         title={title}
         caption={truncateMiddle(address, 6)}
@@ -46,6 +46,6 @@ export function ReceiveItem({
           </>
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -4,8 +4,8 @@ import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
 import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
 import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { useAlexSdkBalanceAsFiat } from '../../hooks/use-alex-sdk-fiat-price';
 import { SwapAsset } from '../../hooks/use-swap-form';
@@ -23,11 +23,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
   const fallback = getAvatarFallback(asset.name);
 
   return (
-    <ItemInteractive
-      data-testid={SwapSelectors.ChooseAssetListItem}
-      onClick={onClick}
-      my="space.02"
-    >
+    <Pressable data-testid={SwapSelectors.ChooseAssetListItem} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <Avatar.Root>
@@ -40,6 +36,6 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
         titleRight={formatMoneyWithoutSymbol(asset.balance)}
         captionRight={balanceAsFiat}
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -5,9 +5,9 @@ import { css } from 'leather-styles/css';
 import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
 import { ChevronDownIcon } from '@app/ui/icons';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
 import { Flag } from '../flag/flag';
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
 
 export interface DropdownMenuItem {
   iconLeft?: ReactNode;
@@ -77,7 +77,7 @@ const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => (
   <styled.div className={dropdownItemStyles}>
     <RadixDropdownMenu.Item
       ref={ref}
-      className={css(itemBaseStyles, itemInteractiveStyles)}
+      className={css(pressableBaseStyles, pressableStyles)}
       {...props}
     />
   </styled.div>

diff --git a/...ponents/item/item-with-buttons.layout.tsx → .../item-layout/item-layout-with-buttons.tsx b/...ponents/item/item-with-buttons.layout.tsx → .../item-layout/item-layout-with-buttons.tsx
@@ -2,16 +2,17 @@ import { ReactNode } from 'react';
 
 import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { pressableCaptionStyles } from '@app/ui/pressable/pressable';
+
 import { Flag } from '../flag/flag';
-import { itemCaptionStyles } from './item-interactive';
 
 interface ItemWithButtonsLayoutProps {
   buttons: ReactNode;
   caption: string;
   flagImg: ReactNode;
   title: string;
 }
-export function ItemWithButtonsLayout({
+export function ItemLayoutWithButtons({
   buttons,
   caption,
   flagImg,
@@ -31,7 +32,7 @@ export function ItemWithButtonsLayout({
           <styled.span fontWeight={500} textStyle="label.02">
             {title}
           </styled.span>
-          <styled.span className={itemCaptionStyles} textStyle="caption.01">
+          <styled.span className={pressableCaptionStyles} textStyle="caption.01">
             {caption}
           </styled.span>
         </Stack>

diff --git a/src/app/ui/components/item/item.stories.tsx → ...nents/item-layout/item-layout.stories.tsx b/src/app/ui/components/item/item.stories.tsx → ...nents/item-layout/item-layout.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Box, Circle } from 'leather-styles/jsx';
 
-import { ItemLayout as Component } from './item.layout';
+import { ItemLayout as Component } from './item-layout';
 
 const meta: Meta<typeof Component> = {
   component: Component,

diff --git a/src/app/ui/components/item/item.layout.tsx → ...ui/components/item-layout/item-layout.tsx b/src/app/ui/components/item/item.layout.tsx → ...ui/components/item-layout/item-layout.tsx
@@ -2,10 +2,11 @@ import { ReactNode, isValidElement } from 'react';
 
 import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable';
+
 import { CheckmarkIcon } from '../../icons/checkmark-icon';
 import { ChevronUpIcon } from '../../icons/chevron-up-icon';
 import { Flag } from '../flag/flag';
-import { itemCaptionStyles, itemChevronStyles } from './item-interactive';
 
 interface ItemLayoutProps {
   captionLeft: ReactNode;
@@ -50,7 +51,7 @@ export function ItemLayout({
           {isValidElement(captionLeft) ? (
             captionLeft
           ) : (
-            <styled.span className={itemCaptionStyles} textStyle="caption.01">
+            <styled.span className={pressableCaptionStyles} textStyle="caption.01">
               {captionLeft}
             </styled.span>
           )}
@@ -67,13 +68,17 @@ export function ItemLayout({
             {isValidElement(captionRight) ? (
               captionRight
             ) : (
-              <styled.span className={itemCaptionStyles} textStyle="caption.02">
+              <styled.span className={pressableCaptionStyles} textStyle="caption.02">
                 {captionRight}
               </styled.span>
             )}
           </Stack>
           {showChevron && (
-            <ChevronUpIcon color={itemChevronStyles} transform="rotate(90deg)" variant="small" />
+            <ChevronUpIcon
+              color={pressableChevronStyles}
+              transform="rotate(90deg)"
+              variant="small"
+            />
           )}
         </HStack>
       </Flex>

diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
@@ -3,7 +3,7 @@ import { ReactNode, forwardRef } from 'react';
 import * as RadixSelect from '@radix-ui/react-select';
 import { css } from 'leather-styles/css';
 
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
 export interface SelectItem {
   iconLeft?: ReactNode;
@@ -74,7 +74,7 @@ const Label: typeof RadixSelect.Label = forwardRef((props, ref) => (
 ));
 
 const Item: typeof RadixSelect.Item = forwardRef((props, ref) => (
-  <RadixSelect.Item className={css(itemBaseStyles, itemInteractiveStyles)} ref={ref} {...props} />
+  <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
 ));
 
 const selectSeparatorStyles = css({

diff --git a/...ponents/item/item-interactive.stories.tsx → src/app/ui/pressable/pressable.stories.tsx b/...ponents/item/item-interactive.stories.tsx → src/app/ui/pressable/pressable.stories.tsx
@@ -4,16 +4,16 @@ import { styled } from 'leather-styles/jsx';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable as Component } from '@app/ui/pressable/pressable';
 
-import { Button } from '../button/button';
-import { ItemInteractive as Component } from './item-interactive';
-import { ItemWithButtonsLayout } from './item-with-buttons.layout';
-import { ItemLayout } from './item.layout';
+import { Button } from '../components/button/button';
+import { ItemLayout } from '../components/item-layout/item-layout';
+import { ItemLayoutWithButtons } from '../components/item-layout/item-layout-with-buttons';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'ItemInteractive',
+  title: 'Pressable',
   parameters: {
     controls: { include: [] },
   },
@@ -35,7 +35,7 @@ function ExampleInteractiveItemContent() {
   );
 }
 
-export const ItemInteractive: Story = {
+export const Pressable: Story = {
   parameters: {
     docs: {
       description: {
@@ -70,7 +70,7 @@ export const Disabled: Story = {
 export const WithButtons: Story = {
   args: {
     children: (
-      <ItemWithButtonsLayout
+      <ItemLayoutWithButtons
         flagImg={<BtcAvatarIcon />}
         title="Label"
         caption="Caption"