chore(componenta): rename Subtabs component to SubTabs

trezor · Dec 11, 2024 · 33b80f3 · 33b80f3
1 parent 8babbb5
commit 33b80f3
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 61 deletions.
diff --git a/...rc/components/Subtabs/Subtabs.stories.tsx → ...rc/components/SubTabs/SubTabs.stories.tsx b/...rc/components/Subtabs/Subtabs.stories.tsx → ...rc/components/SubTabs/SubTabs.stories.tsx
@@ -4,19 +4,19 @@ 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';
 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/...onents/src/components/Subtabs/Subtabs.tsx → ...onents/src/components/SubTabs/SubTabs.tsx b/...onents/src/components/Subtabs/Subtabs.tsx → ...onents/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
@@ -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/...ts/src/components/Subtabs/SubtabsItem.tsx → ...ts/src/components/SubTabs/SubTabsItem.tsx b/...ts/src/components/Subtabs/SubtabsItem.tsx → ...ts/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/...omponents/src/components/Subtabs/types.ts → ...omponents/src/components/SubTabs/types.ts b/...omponents/src/components/Subtabs/types.ts → ...omponents/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/...omponents/src/components/Subtabs/utils.ts → ...omponents/src/components/SubTabs/utils.ts b/...omponents/src/components/Subtabs/utils.ts → ...omponents/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
diff --git 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
@@ -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"