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

packages/components/package.json

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

packages/components/src/index.ts

@@ -12,7 +12,6 @@ export * from './components/AssetShareIndicator/AssetShareIndicator';
 export { AssetLogo, type AssetLogoProps } 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';
@@ -59,7 +57,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/package.json

@@ -25,6 +25,7 @@
  "dependencies": {
  "@headlessui/react": "^1.7.17",
  "@trezor/components": "workspace:*",
+ "@trezor/product-components": "workspace:*",
  "@trezor/theme": "workspace:*",
  "@vitejs/plugin-react": "^3.0.1",
  "clsx": "^2.1.1",

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-explorer-theme/tsconfig.json

@@ -12,6 +12,7 @@
  },
  "references": [
  { "path": "../components" },
+ { "path": "../product-components" },
  { "path": "../theme" }
  ]
 }

packages/connect-ui/package.json

@@ -19,6 +19,7 @@
  "@trezor/connect-common": "workspace:*",
  "@trezor/dom-utils": "workspace:*",
  "@trezor/env-utils": "workspace:*",
+ "@trezor/product-components": "workspace:*",
  "@trezor/react-utils": "workspace:*",
  "@trezor/theme": "workspace:*",
  "@trezor/urls": "workspace:*",

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

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

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/connect-ui/tsconfig.json

@@ -11,6 +11,7 @@
  { "path": "../connect-common" },
  { "path": "../dom-utils" },
  { "path": "../env-utils" },
+ { "path": "../product-components" },
  { "path": "../react-utils" },
  { "path": "../theme" },
  { "path": "../urls" },

packages/product-components/package.json

@@ -22,13 +22,16 @@
  "@trezor/connect": "workspace:*",
  "@trezor/dom-utils": "workspace:*",
  "@trezor/env-utils": "workspace:*",
+ "@trezor/product-components": "workspace:*",
  "@trezor/react-utils": "workspace:*",
  "@trezor/theme": "workspace:*",
  "@trezor/utils": "workspace:*",
  "framer-motion": "^11.0.3",
  "react": "18.2.0",
  "react-intl": "^6.6.8",
- "styled-components": "^6.1.8"
+ "react-svg": "^16.1.33",
+ "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 '../RotateDeviceImage/RotateDeviceImage';
 
 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

@@ -5,3 +5,6 @@ export {
 export { PassphraseTypeCard } from './components/PassphraseTypeCard/PassphraseTypeCard';
 export { ConfirmOnDevice } from './components/ConfirmOnDevice/ConfirmOnDevice';
 export { mapTrezorModelToIcon } from './utils/mapTrezorModelToIcon';
+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';
 import { selectDeviceLabelOrName } from '@suite-common/wallet-core';
 import { useSelector } from 'src/hooks/suite';

packages/suite/src/components/suite/layouts/WelcomeLayout/WelcomeLayout.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import {
- TrezorLogo,
  Button,
  variables,
  SVG_IMAGES,
@@ -29,6 +28,7 @@ import { MAX_ONBOARDING_WIDTH } from 'src/constants/suite/layout';
 import { NavSettings } from './NavSettings';
 import { Elevation, mapElevationToBackground, spacingsPx } from '@trezor/theme';
 import { TrafficLightOffset } from '../../TrafficLightOffset';
+import { TrezorLogo } from '@trezor/product-components';
 
 const MessageContainer = styled.div`
  margin: ${spacingsPx.xxs} ${spacingsPx.xs} ${spacingsPx.xs};

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';
 

yarn.lock

@@ -11148,7 +11148,6 @@ __metadata:
  stylelint: "npm:^16.2.1"
  stylelint-config-standard: "npm:^36.0.0"
  typescript-styled-plugin: "npm:^0.18.3"
- zxcvbn: "npm:^4.4.2"
  languageName: unknown
  linkType: soft
 
@@ -11182,6 +11181,7 @@ __metadata:
  "@tailwindcss/nesting": "npm:^0.0.0-insiders.565cd3e"
  "@testing-library/react": "npm:^14.0.0"
  "@trezor/components": "workspace:*"
+ "@trezor/product-components": "workspace:*"
  "@trezor/theme": "workspace:*"
  "@types/flexsearch": "npm:^0.7.3"
  "@types/git-url-parse": "npm:^9.0.1"
@@ -11374,6 +11374,7 @@ __metadata:
  "@trezor/connect-common": "workspace:*"
  "@trezor/dom-utils": "workspace:*"
  "@trezor/env-utils": "workspace:*"
+ "@trezor/product-components": "workspace:*"
  "@trezor/react-utils": "workspace:*"
  "@trezor/theme": "workspace:*"
  "@trezor/urls": "workspace:*"
@@ -11575,17 +11576,20 @@ __metadata:
  "@trezor/connect": "workspace:*"
  "@trezor/dom-utils": "workspace:*"
  "@trezor/env-utils": "workspace:*"
+ "@trezor/product-components": "workspace:*"
  "@trezor/react-utils": "workspace:*"
  "@trezor/theme": "workspace:*"
  "@trezor/utils": "workspace:*"
  "@types/react": "npm:18.2.79"
  framer-motion: "npm:^11.0.3"
  react: "npm:18.2.0"
  react-intl: "npm:^6.6.8"
+ react-svg: "npm:^16.1.33"
  storybook: "npm:^7.6.13"
  styled-components: "npm:^6.1.8"
  stylelint: "npm:^16.2.1"
  typescript-styled-plugin: "npm:^0.18.3"
+ zxcvbn: "npm:^4.4.2"
  languageName: unknown
  linkType: soft