refactor(ds): Move related components to product-components

packages/components/package.json

@@ -44,7 +44,6 @@
         "react-svg": "^16.1.33",
         "react-use": "^17.5.0",
         "styled-components": "^6.1.8",
-        "zxcvbn": "^4.4.2"
     },
     "devDependencies": {
         "@storybook/addon-actions": "^7.6.13",

packages/components/src/index.ts

@@ -12,7 +12,6 @@ export * from './components/AssetShareIndicator/AssetShareIndicator';
 export * from './components/AssetLogo/AssetLogo';
 export * from './components/CoinLogo/CoinLogo';
 export * from './components/Flag/Flag';
-export * from './components/TrezorLogo/TrezorLogo';
 export * from './components/AutoScalingInput/AutoScalingInput';
 export * from './components/Badge/Badge';
 export * from './components/buttons/Button/Button';
@@ -27,7 +26,6 @@ export {
     CollapsibleBox,
     type CollapsibleBoxProps,
 } from './components/CollapsibleBox/CollapsibleBox';
-export * from './components/RotateDeviceImage/RotateDeviceImage';
 export * from './components/DataAnalytics';
 export * from './components/Divider/Divider';
 export * from './components/Dropdown/Dropdown';
@@ -57,7 +55,6 @@ export * from './components/modals/Modal/Backdrop';
 export * from './components/modals/Modal/Modal';
 export * from './components/NewModal/NewModal';
 export * from './components/Note/Note';
-export * from './components/PasswordStrengthIndicator/PasswordStrengthIndicator';
 export * from './components/ResizableBox/ResizableBox';
 export * from './components/skeletons/SkeletonCircle';
 export * from './components/skeletons/SkeletonRectangle';

packages/connect-explorer-theme/src/components/navbar.tsx

@@ -8,7 +8,8 @@ import { ArrowRightIcon, MenuIcon } from 'nextra/icons';
 import type { Item, MenuItem, PageItem } from 'nextra/normalize-pages';
 
 import { Elevation, borders, mapElevationToBackground, spacingsPx } from '@trezor/theme';
-import { TrezorLogo, useElevation } from '@trezor/components';
+import { useElevation } from '@trezor/components';
+import { TrezorLogo } from '@trezor/product-components';
 
 import { useConfig, useMenu } from '../contexts';
 import { renderComponent } from '../utils';

packages/connect-ui/package.json

@@ -14,6 +14,7 @@
     "dependencies": {
         "@suite-common/validators": "workspace:*",
         "@trezor/components": "workspace:*",
+        "@trezor/product-components": "workspace:*",
         "@trezor/connect": "workspace:*",
         "@trezor/connect-analytics": "workspace:*",
         "@trezor/connect-common": "workspace:*",

packages/connect-ui/src/components/Passphrase/PassphraseTypeCard.tsx

@@ -16,11 +16,10 @@ import {
     Input,
     Tooltip,
     TooltipProps,
-    PasswordStrengthIndicator,
     motionAnimation,
     Icon,
 } from '@trezor/components';
-
+import { PasswordStrengthIndicator } from '@trezor/product-components';
 import { WalletType } from './types';
 
 type WrapperProps = {

packages/connect-ui/src/components/Passphrase/PassphraseTypeCardContent.tsx

@@ -5,16 +5,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 
 import { isAndroid } from '@trezor/env-utils';
-import {
-    Card,
-    Column,
-    Row,
-    Input,
-    Button,
-    motionAnimation,
-    PasswordStrengthIndicator,
-    Icon,
-} from '@trezor/components';
+import { Card, Column, Row, Input, Button, motionAnimation, Icon } from '@trezor/components';
+import { PasswordStrengthIndicator } from '@trezor/product-components';
 import { spacings, spacingsPx, typography } from '@trezor/theme';
 import { useKeyPress } from '@trezor/react-utils';
 

packages/product-components/package.json

@@ -19,6 +19,7 @@
     "dependencies": {
         "@suite-common/validators": "workspace:*",
         "@trezor/components": "workspace:*",
+        "@trezor/product-components": "workspace:*",
         "@trezor/connect": "workspace:*",
         "@trezor/dom-utils": "workspace:*",
         "@trezor/env-utils": "workspace:*",
@@ -28,7 +29,8 @@
         "framer-motion": "^11.0.3",
         "react": "18.2.0",
         "react-intl": "^6.6.8",
-        "styled-components": "^6.1.8"
+        "styled-components": "^6.1.8",
+        "zxcvbn": "^4.4.2"
     },
     "devDependencies": {
         "@storybook/addon-actions": "^7.6.13",

packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx

@@ -10,7 +10,7 @@ import {
     typography,
 } from '@trezor/theme';
 import { useElevation } from '@trezor/components';
-import { RotateDeviceImage } from '@trezor/components';
+import { RotateDeviceImage } from '@trezor/product-components';
 
 const Column = styled.div`
     display: flex;

packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx

@@ -1,16 +1,8 @@
 import { isAndroid } from '@trezor/env-utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FormattedMessage, useIntl } from 'react-intl';
-import {
-    Card,
-    PasswordStrengthIndicator,
-    Column,
-    Row,
-    Input,
-    Button,
-    motionAnimation,
-    Icon,
-} from '@trezor/components';
+import { Card, Column, Row, Input, Button, motionAnimation, Icon } from '@trezor/components';
+import { PasswordStrengthIndicator } from '../PasswordStrengthIndicator/PasswordStrengthIndicator';
 import styled, { useTheme } from 'styled-components';
 import { spacings, spacingsPx, typography } from '@trezor/theme';
 import { useKeyPress } from '@trezor/react-utils';

packages/components/src/components/RotateDeviceImage/RotateDeviceImage.tsx → packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DeviceAnimation } from '../animations/DeviceAnimation';
+import { DeviceAnimation } from '@trezor/components';
 import { DeviceModelInternal } from '@trezor/connect';
-import { Image } from '../Image/Image';
+import { Image } from '@trezor/components';
 import styled from 'styled-components';
 
 export type RotateDeviceImageProps = {

packages/components/src/components/TrezorLogo/TrezorLogo.stories.tsx → packages/product-components/src/components/TrezorLogo/TrezorLogo.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { TrezorLogo as TrezorLogoComponent, TrezorLogoProps } from '../../index';
+import { TrezorLogoProps, TrezorLogo as TrezorLogoComponent } from './TrezorLogo';
 
 const meta: Meta = {
     title: 'TrezorLogo',

packages/components/src/components/TrezorLogo/trezorLogos.stories.tsx → packages/product-components/src/components/TrezorLogo/trezorLogos.stories.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Meta, StoryObj } from '@storybook/react';
-import { TrezorLogo } from '../../index';
-import { StoryColumn } from '../../support/Story';
+import { TrezorLogo } from './TrezorLogo';
+import { StoryColumn } from '@trezor/components';
 
 interface WrapperProps {
     isDark?: boolean;
@@ -16,7 +16,7 @@ const LogoWrapper = styled.div<WrapperProps>`
 `;
 
 const meta: Meta = {
-    title: 'TrezorLogos',
+    title: 'TrezorLogo',
 } as Meta;
 export default meta;
 

packages/product-components/src/components/TrezorLogo/trezorLogos.ts

@@ -0,0 +1,8 @@
+export const LOGOS: { [key: string]: any } = {
+    HORIZONTAL: require('../../../../components/src/images/trezor_logo_horizontal.svg'),
+    VERTICAL: require('../../../../components/src/images/trezor_logo_vertical.svg'),
+    SYMBOL: require('../../../../components/src/images/trezor_logo_symbol.svg'),
+    SUITE: require('../../../../components/src/images/trezor_logo_suite.svg'),
+    SUITE_SQUARE: require('../../../../components/src/images/trezor_logo_suite_square.svg'),
+    SUITE_COMPACT: require('../../../../components/src/images/trezor_logo_suite_compact.svg'),
+};

packages/product-components/src/index.ts

@@ -1,2 +1,5 @@
 export { PassphraseTypeCard } from './components/PassphraseTypeCard/PassphraseTypeCard';
 export { ConfirmOnDevice } from './components/ConfirmOnDevice/ConfirmOnDevice';
+export { RotateDeviceImage } from './components/RotateDeviceImage/RotateDeviceImage';
+export { TrezorLogo } from './components/TrezorLogo/TrezorLogo';
+export { PasswordStrengthIndicator } from './components/PasswordStrengthIndicator/PasswordStrengthIndicator';

packages/suite/src/components/onboarding/OnboardingLayout.tsx

@@ -1,7 +1,8 @@
 import { useMemo, ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { TrezorLogo, Button, variables } from '@trezor/components';
+import { Button, variables } from '@trezor/components';
+import { TrezorLogo } from '@trezor/product-components';
 import { TREZOR_SUPPORT_URL } from '@trezor/urls';
 import { TrezorLink, Translation } from 'src/components/suite';
 import { OnboardingProgressBar } from 'src/components/onboarding';

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx

@@ -5,7 +5,7 @@ import { DeviceDetail } from 'src/views/suite/SwitchDevice/DeviceItem/DeviceDeta
 import { MouseEventHandler } from 'react';
 import { TrezorDevice } from 'src/types/suite';
 import { spacingsPx } from '@trezor/theme';
-import { RotateDeviceImage } from '@trezor/components';
+import { RotateDeviceImage } from '@trezor/product-components';
 import { DeviceStatusText } from 'src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText';
 
 type DeviceStatusProps = {

packages/suite/src/views/wallet/coinmarket/common/ConfirmedOnTrezor.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { TrezorDevice } from '@suite-common/suite-types';
-import { RotateDeviceImage, variables } from '@trezor/components';
+import { variables } from '@trezor/components';
+import { RotateDeviceImage } from '@trezor/product-components';
 import { Translation } from 'src/components/suite';
 import styled from 'styled-components';