From 33b80f35321a9925ac64b981df7d5b1c16f56cf8 Mon Sep 17 00:00:00 2001
From: Adam Havel <adam.havel@protonmail.com>
Date: Wed, 11 Dec 2024 10:42:00 +0100
Subject: [PATCH] chore(componenta): rename Subtabs component to SubTabs

---
 .../SubTabs.stories.tsx}                      | 22 ++++++++--------
 .../Subtabs.tsx => SubTabs/SubTabs.tsx}       | 26 +++++++++----------
 .../src/components/SubTabs/SubTabsContext.tsx | 18 +++++++++++++
 .../SubTabsItem.tsx}                          | 10 +++----
 .../components/{Subtabs => SubTabs}/types.ts  |  2 +-
 .../components/{Subtabs => SubTabs}/utils.ts  | 10 +++----
 .../src/components/Subtabs/SubtabsContext.tsx | 18 -------------
 packages/components/src/index.ts              |  2 +-
 .../views/wallet/tokens/TokensNavigation.tsx  | 14 +++++-----
 9 files changed, 61 insertions(+), 61 deletions(-)
 rename packages/components/src/components/{Subtabs/Subtabs.stories.tsx => SubTabs/SubTabs.stories.tsx} (87%)
 rename packages/components/src/components/{Subtabs/Subtabs.tsx => SubTabs/SubTabs.tsx} (58%)
 create mode 100644 packages/components/src/components/SubTabs/SubTabsContext.tsx
 rename packages/components/src/components/{Subtabs/SubtabsItem.tsx => SubTabs/SubTabsItem.tsx} (91%)
 rename packages/components/src/components/{Subtabs => SubTabs}/types.ts (65%)
 rename packages/components/src/components/{Subtabs => SubTabs}/utils.ts (50%)
 delete mode 100644 packages/components/src/components/Subtabs/SubtabsContext.tsx

diff --git a/packages/components/src/components/Subtabs/Subtabs.stories.tsx b/packages/components/src/components/SubTabs/SubTabs.stories.tsx
similarity index 87%
rename from packages/components/src/components/Subtabs/Subtabs.stories.tsx
rename to packages/components/src/components/SubTabs/SubTabs.stories.tsx
index 5e23e966a0d..55201d47b9a 100644
--- a/packages/components/src/components/Subtabs/Subtabs.stories.tsx
+++ b/packages/components/src/components/SubTabs/SubTabs.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { spacings } from '@trezor/theme';
 
-import { Subtabs as SubtabsComponent, SubtabsProps, allowedSubtabsFrameProps } from './Subtabs';
+import { SubTabs as SubTabsComponent, SubTabsProps, allowedSubTabsFrameProps } from './SubTabs';
 import { subtabsSizes } from './types';
 import { Column } from '../Flex/Flex';
 import { IconName } from '../Icon/Icon';
@@ -12,11 +12,11 @@ import { getFramePropsStory } from '../../utils/frameProps';
 import { variables } from '../../config';
 
 const meta: Meta = {
-    title: 'Subtabs',
+    title: 'SubTabs',
 } as Meta;
 export default meta;
 
-const SubtabsApp = (props: Partial<SubtabsProps>) => {
+const SubTabsApp = (props: Partial<SubTabsProps>) => {
     const [selectedTab, setSelectedTab] = useState(0);
 
     const items = ['Lorem', 'Ipsum', 'Dolor Sit', 'Amet'].map((title, index) => ({
@@ -84,28 +84,28 @@ const SubtabsApp = (props: Partial<SubtabsProps>) => {
 
     return (
         <Column gap={spacings.md}>
-            <SubtabsComponent activeItemId={items[selectedTab].id} {...props}>
+            <SubTabsComponent activeItemId={items[selectedTab].id} {...props}>
                 {items.map(item => (
-                    <SubtabsComponent.Item key={item.id} {...item}>
+                    <SubTabsComponent.Item key={item.id} {...item}>
                         {item.title}
-                    </SubtabsComponent.Item>
+                    </SubTabsComponent.Item>
                 ))}
-            </SubtabsComponent>
+            </SubTabsComponent>
             {getContent()}
         </Column>
     );
 };
 
-export const Subtabs: StoryObj = {
+export const SubTabs: StoryObj = {
     render: props => {
-        return <SubtabsApp {...props} />;
+        return <SubTabsApp {...props} />;
     },
     args: {
-        ...getFramePropsStory(allowedSubtabsFrameProps).args,
+        ...getFramePropsStory(allowedSubTabsFrameProps).args,
         size: 'medium',
     },
     argTypes: {
-        ...getFramePropsStory(allowedSubtabsFrameProps).argTypes,
+        ...getFramePropsStory(allowedSubTabsFrameProps).argTypes,
         size: {
             control: {
                 type: 'select',
diff --git a/packages/components/src/components/Subtabs/Subtabs.tsx b/packages/components/src/components/SubTabs/SubTabs.tsx
similarity index 58%
rename from packages/components/src/components/Subtabs/Subtabs.tsx
rename to packages/components/src/components/SubTabs/SubTabs.tsx
index 1f4745b4d04..2fe8236d1ce 100644
--- a/packages/components/src/components/Subtabs/Subtabs.tsx
+++ b/packages/components/src/components/SubTabs/SubTabs.tsx
@@ -12,37 +12,37 @@ import {
     withFrameProps,
 } from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
-import { SubtabsContext } from './SubtabsContext';
-import { SubtabsItem } from './SubtabsItem';
-import { SubtabsSize } from './types';
+import { SubTabsContext } from './SubTabsContext';
+import { SubTabsItem } from './SubTabsItem';
+import { SubTabsSize } from './types';
 
-export const allowedSubtabsFrameProps = ['margin'] as const satisfies FramePropsKeys[];
-type AllowedFrameProps = Pick<FrameProps, (typeof allowedSubtabsFrameProps)[number]>;
+export const allowedSubTabsFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedSubTabsFrameProps)[number]>;
 
 const Container = styled.div<TransientProps<AllowedFrameProps>>`
     ${withFrameProps}
 `;
 
-export type SubtabsProps = AllowedFrameProps & {
+export type SubTabsProps = AllowedFrameProps & {
     children: ReactNode;
-    size?: SubtabsSize;
+    size?: SubTabsSize;
     activeItemId?: string;
 };
 
-const Subtabs = ({ activeItemId, size = 'medium', children, ...rest }: SubtabsProps) => {
-    const frameProps = pickAndPrepareFrameProps(rest, allowedSubtabsFrameProps);
+const SubTabs = ({ activeItemId, size = 'medium', children, ...rest }: SubTabsProps) => {
+    const frameProps = pickAndPrepareFrameProps(rest, allowedSubTabsFrameProps);
 
     return (
-        <SubtabsContext.Provider value={{ activeItemId, size }}>
+        <SubTabsContext.Provider value={{ activeItemId, size }}>
             <Container {...frameProps}>
                 <Row alignItems="stretch" gap={spacings.xxs}>
                     {children}
                 </Row>
             </Container>
-        </SubtabsContext.Provider>
+        </SubTabsContext.Provider>
     );
 };
 
-Subtabs.Item = SubtabsItem;
+SubTabs.Item = SubTabsItem;
 
-export { Subtabs };
+export { SubTabs };
diff --git a/packages/components/src/components/SubTabs/SubTabsContext.tsx b/packages/components/src/components/SubTabs/SubTabsContext.tsx
new file mode 100644
index 00000000000..ceba82b65f3
--- /dev/null
+++ b/packages/components/src/components/SubTabs/SubTabsContext.tsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+import { SubTabsSize } from './types';
+
+export const SubTabsContext = createContext<{
+    activeItemId?: string;
+    size: SubTabsSize;
+}>({ size: 'medium' });
+
+export const useSubTabsContext = () => {
+    const context = useContext(SubTabsContext);
+
+    if (!context) {
+        throw new Error('useSubTabsContext must be used within a SubTabsContext');
+    }
+
+    return context;
+};
diff --git a/packages/components/src/components/Subtabs/SubtabsItem.tsx b/packages/components/src/components/SubTabs/SubTabsItem.tsx
similarity index 91%
rename from packages/components/src/components/Subtabs/SubtabsItem.tsx
rename to packages/components/src/components/SubTabs/SubTabsItem.tsx
index b2b41d82c82..60047dba36a 100644
--- a/packages/components/src/components/Subtabs/SubtabsItem.tsx
+++ b/packages/components/src/components/SubTabs/SubTabsItem.tsx
@@ -5,7 +5,7 @@ import { borders, spacings, mapElevationToBackground, Elevation } from '@trezor/
 import { Row } from '../Flex/Flex';
 import { Text } from '../typography/Text/Text';
 import { Icon, IconName } from '../Icon/Icon';
-import { useSubtabsContext } from './SubtabsContext';
+import { useSubTabsContext } from './SubTabsContext';
 import { mapSizeToTypography, mapSizeToIconSize } from './utils';
 import { useElevation } from '../ElevationContext/ElevationContext';
 
@@ -33,7 +33,7 @@ const Item = styled.div<{ $isActive: boolean; $elevation: Elevation }>`
         `}
 `;
 
-export type SubtabsItemProps = {
+export type SubTabsItemProps = {
     id: string;
     onClick: () => void;
     iconName?: IconName;
@@ -42,15 +42,15 @@ export type SubtabsItemProps = {
     'data-testid'?: string;
 };
 
-export const SubtabsItem = ({
+export const SubTabsItem = ({
     id,
     onClick,
     iconName,
     count = 0,
     'data-testid': dataTestId,
     children,
-}: SubtabsItemProps) => {
-    const { activeItemId, size } = useSubtabsContext();
+}: SubTabsItemProps) => {
+    const { activeItemId, size } = useSubTabsContext();
     const { elevation } = useElevation();
     const isActive = id === activeItemId;
 
diff --git a/packages/components/src/components/Subtabs/types.ts b/packages/components/src/components/SubTabs/types.ts
similarity index 65%
rename from packages/components/src/components/Subtabs/types.ts
rename to packages/components/src/components/SubTabs/types.ts
index 9290c43d5e5..66b8ff3cde5 100644
--- a/packages/components/src/components/Subtabs/types.ts
+++ b/packages/components/src/components/SubTabs/types.ts
@@ -1,4 +1,4 @@
 import { UISize } from '../../config/types';
 
 export const subtabsSizes = ['large', 'medium', 'small'] as const;
-export type SubtabsSize = Extract<UISize, (typeof subtabsSizes)[number]>;
+export type SubTabsSize = Extract<UISize, (typeof subtabsSizes)[number]>;
diff --git a/packages/components/src/components/Subtabs/utils.ts b/packages/components/src/components/SubTabs/utils.ts
similarity index 50%
rename from packages/components/src/components/Subtabs/utils.ts
rename to packages/components/src/components/SubTabs/utils.ts
index 2a4ac4bd538..affc54c193c 100644
--- a/packages/components/src/components/Subtabs/utils.ts
+++ b/packages/components/src/components/SubTabs/utils.ts
@@ -1,9 +1,9 @@
 import { TypographyStyle } from '@trezor/theme';
 
-import { SubtabsSize } from './types';
+import { SubTabsSize } from './types';
 
-export const mapSizeToTypography = (size: SubtabsSize): TypographyStyle => {
-    const typographyStyleMap: Record<SubtabsSize, TypographyStyle> = {
+export const mapSizeToTypography = (size: SubTabsSize): TypographyStyle => {
+    const typographyStyleMap: Record<SubTabsSize, TypographyStyle> = {
         large: 'body',
         medium: 'hint',
         small: 'label',
@@ -12,8 +12,8 @@ export const mapSizeToTypography = (size: SubtabsSize): TypographyStyle => {
     return typographyStyleMap[size];
 };
 
-export const mapSizeToIconSize = (size: SubtabsSize): number => {
-    const iconSizeMap: Record<SubtabsSize, number> = {
+export const mapSizeToIconSize = (size: SubTabsSize): number => {
+    const iconSizeMap: Record<SubTabsSize, number> = {
         large: 22,
         medium: 20,
         small: 18,
diff --git a/packages/components/src/components/Subtabs/SubtabsContext.tsx b/packages/components/src/components/Subtabs/SubtabsContext.tsx
deleted file mode 100644
index c748d44cead..00000000000
--- a/packages/components/src/components/Subtabs/SubtabsContext.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import { SubtabsSize } from './types';
-
-export const SubtabsContext = createContext<{
-    activeItemId?: string;
-    size: SubtabsSize;
-}>({ size: 'medium' });
-
-export const useSubtabsContext = () => {
-    const context = useContext(SubtabsContext);
-
-    if (!context) {
-        throw new Error('useSubtabsContext must be used within a SubtabsContext');
-    }
-
-    return context;
-};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5fc9ff46a47..2c6b485f642 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -85,7 +85,7 @@ export * from './components/typography/TruncateWithTooltip/TruncateWithTooltip';
 export * from './components/Banner/Banner';
 export { Table, type TableProps } from './components/Table/Table';
 export { Tabs, type TabsProps } from './components/Tabs/Tabs';
-export { Subtabs, type SubtabsProps } from './components/Subtabs/Subtabs';
+export { SubTabs, type SubTabsProps } from './components/SubTabs/SubTabs';
 export { VirtualizedList } from './components/VirtualizedList/VirtualizedList';
 export { List, type ListProps } from './components/List/List';
 export { StoryColumn, StoryWrapper } from './support/Story';
diff --git a/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx b/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx
index ac5225c87ee..20d6ea23968 100644
--- a/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx
+++ b/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx
@@ -3,7 +3,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
 import { selectCoinDefinitions } from '@suite-common/token-definitions';
 import { spacings } from '@trezor/theme';
-import { IconButton, Row, Subtabs } from '@trezor/components';
+import { IconButton, Row, SubTabs } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { Route } from '@suite-common/suite-types';
 
@@ -64,24 +64,24 @@ export const TokensNavigation = ({
 
     return (
         <Row alignItems="center" justifyContent="space-between" margin={{ bottom: spacings.md }}>
-            <Subtabs activeItemId={routeName} size="medium">
-                <Subtabs.Item
+            <SubTabs activeItemId={routeName} size="medium">
+                <SubTabs.Item
                     id="wallet-tokens"
                     iconName="tokens"
                     onClick={goToRoute('wallet-tokens')}
                     count={tokens.shownWithBalance.length}
                 >
                     <Translation id="TR_NAV_TOKENS" />
-                </Subtabs.Item>
-                <Subtabs.Item
+                </SubTabs.Item>
+                <SubTabs.Item
                     id="wallet-tokens-hidden"
                     iconName="hide"
                     onClick={goToRoute('wallet-tokens-hidden')}
                     count={tokens.hiddenWithBalance.length}
                 >
                     <Translation id="TR_HIDDEN" />
-                </Subtabs.Item>
-            </Subtabs>
+                </SubTabs.Item>
+            </SubTabs>
             <Row>
                 <SearchAction
                     tooltipText="TR_TOKENS_SEARCH_TOOLTIP"