diff --git a/.eslintrc.js b/.eslintrc.js index 25a465dac7a..98febd5adcc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -295,6 +295,7 @@ module.exports = { 'packages/analytics/**/*', 'packages/blockchain-link/**/*', 'packages/components/**/*', + 'packages/product-components/**/*', 'packages/connect/**/*', 'packages/connect-common/**/*', 'packages/connect-explorer/**/*', diff --git a/package.json b/package.json index dc61d5dbc5f..5d3d1f8b1b4 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "eslint --fix", "git add" ], - "packages/{suite,suite-web,suite-desktop-ui,connect-explorer,connect-popup,connect-ui,components}/**/*.{ts,tsx}": [ + "packages/{suite,suite-web,suite-desktop-ui,connect-explorer,connect-popup,connect-ui,components,product-components}/**/*.{ts,tsx}": [ "stylelint --fix", "git add" ] diff --git a/packages/components/.storybook/theme.js b/packages/components/.storybook/theme.js index ee382f60ad7..3b857ccf19c 100644 --- a/packages/components/.storybook/theme.js +++ b/packages/components/.storybook/theme.js @@ -3,5 +3,5 @@ import { create } from '@storybook/theming/create'; export default create({ base: 'light', fontBase: 'TT Satoshi', - brandTitle: 'Trezor Components', + brandTitle: 'Design System', }); diff --git a/packages/components/src/components/Badge/Badge.stories.tsx b/packages/components/src/components/Badge/Badge.stories.tsx index ce1057ad129..3ad81e84327 100644 --- a/packages/components/src/components/Badge/Badge.stories.tsx +++ b/packages/components/src/components/Badge/Badge.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Badge as BadgeComponent, BadgeProps, allowedBadgeFrameProps } from './Badge'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const meta: Meta = { title: 'Misc/Badge', diff --git a/packages/components/src/components/Badge/Badge.tsx b/packages/components/src/components/Badge/Badge.tsx index 75b56f070f8..cbe3fcd38e8 100644 --- a/packages/components/src/components/Badge/Badge.tsx +++ b/packages/components/src/components/Badge/Badge.tsx @@ -5,7 +5,7 @@ import { Icon } from '@suite-common/icons/src/webComponents'; import { borders, Color, CSSColor, spacings, spacingsPx, typography } from '@trezor/theme'; import { focusStyleTransition, getFocusShadowStyle } from '../../utils/utils'; import type { UISize, UIVariant } from '../../config/types'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { TransientProps } from '../../utils/transientProps'; export const allowedBadgeFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/components/Box/Box.stories.tsx b/packages/components/src/components/Box/Box.stories.tsx index b4dee866414..957d369abea 100644 --- a/packages/components/src/components/Box/Box.stories.tsx +++ b/packages/components/src/components/Box/Box.stories.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import { Meta, StoryObj } from '@storybook/react'; import { allowedBoxFrameProps, Box as BoxComponent } from './Box'; import { FONT_WEIGHT } from '../../config/variables'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const Text = styled.div` font-weight: ${FONT_WEIGHT.DEMI_BOLD}; diff --git a/packages/components/src/components/Box/Box.tsx b/packages/components/src/components/Box/Box.tsx index 7a9439bac6a..fe9aea5e082 100644 --- a/packages/components/src/components/Box/Box.tsx +++ b/packages/components/src/components/Box/Box.tsx @@ -11,7 +11,7 @@ import { } from '@trezor/theme'; import { ElevationContext, useElevation } from '../ElevationContext/ElevationContext'; import { UIVariant } from '../../config/types'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { TransientProps, makePropsTransient } from '../../utils/transientProps'; type BoxVariant = Extract; diff --git a/packages/components/src/components/Card/Card.stories.tsx b/packages/components/src/components/Card/Card.stories.tsx index 509fef1ed05..3b770318802 100644 --- a/packages/components/src/components/Card/Card.stories.tsx +++ b/packages/components/src/components/Card/Card.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Card as CardComponent, allowedCardFrameProps } from './Card'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const meta: Meta = { title: 'Misc/Card', diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx index 06654ae1411..ae59f315470 100644 --- a/packages/components/src/components/Card/Card.tsx +++ b/packages/components/src/components/Card/Card.tsx @@ -2,9 +2,9 @@ import { forwardRef, HTMLAttributes, ReactNode } from 'react'; import styled, { css } from 'styled-components'; import { borders, Elevation, mapElevationToBackground, spacingsPx } from '@trezor/theme'; import { ElevationContext, useElevation } from '../ElevationContext/ElevationContext'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../../components/common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { makePropsTransient, TransientProps } from '../../utils/transientProps'; -import { AccessabilityProps, withAccessabilityProps } from '../common/accessabilityProps'; +import { AccessibilityProps, withAccessibilityProps } from '../../utils/accessibilityProps'; type PaddingType = 'small' | 'none' | 'normal'; @@ -90,7 +90,7 @@ const CardContainer = styled.div< `; export type CardProps = AllowedFrameProps & - AccessabilityProps & { + AccessibilityProps & { paddingType?: PaddingType; onMouseEnter?: HTMLAttributes['onMouseEnter']; onMouseLeave?: HTMLAttributes['onMouseLeave']; @@ -112,7 +112,7 @@ const CardComponent = forwardRef {children} diff --git a/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx b/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx index 3cf7d59446d..da0167f0343 100644 --- a/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx +++ b/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx @@ -6,7 +6,7 @@ import { allowedCollapsibleBoxFrameProps, } from './CollapsibleBox'; import { action } from '@storybook/addon-actions'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const Content = styled.div` width: 200px; diff --git a/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx b/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx index db6ea087d0f..9ac0d49c8f1 100644 --- a/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx +++ b/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx @@ -12,7 +12,7 @@ import { import { Icon } from '@suite-common/icons/src/webComponents'; import { motionEasing } from '../../config/motion'; import { ElevationUp, useElevation } from './../ElevationContext/ElevationContext'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { TransientProps } from '../../utils/transientProps'; export const allowedCollapsibleBoxFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/components/Divider/Divider.stories.tsx b/packages/components/src/components/Divider/Divider.stories.tsx index fb8eb171e29..3b5ccf65982 100644 --- a/packages/components/src/components/Divider/Divider.stories.tsx +++ b/packages/components/src/components/Divider/Divider.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { Divider as DividerComponent, allowedDividerFrameProps } from './Divider'; import styled from 'styled-components'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const Container = styled.div` width: 200px; diff --git a/packages/components/src/components/Divider/Divider.tsx b/packages/components/src/components/Divider/Divider.tsx index 7501b35075f..d388843b52c 100644 --- a/packages/components/src/components/Divider/Divider.tsx +++ b/packages/components/src/components/Divider/Divider.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Color, Elevation, mapElevationToBorder, spacings } from '@trezor/theme'; import { useElevation } from '../ElevationContext/ElevationContext'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { TransientProps } from '../../utils/transientProps'; export const allowedDividerFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/components/Flex/Flex.stories.tsx b/packages/components/src/components/Flex/Flex.stories.tsx index fc3fee4cc9e..5a2512e8df6 100644 --- a/packages/components/src/components/Flex/Flex.stories.tsx +++ b/packages/components/src/components/Flex/Flex.stories.tsx @@ -10,7 +10,7 @@ import { } from './Flex'; import { spacings } from '@trezor/theme'; import styled from 'styled-components'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const Container = styled.div` width: 100%; diff --git a/packages/components/src/components/Flex/Flex.tsx b/packages/components/src/components/Flex/Flex.tsx index ca0d1a5b8fb..6b9d5f577c4 100644 --- a/packages/components/src/components/Flex/Flex.tsx +++ b/packages/components/src/components/Flex/Flex.tsx @@ -1,6 +1,6 @@ import { SpacingValues } from '@trezor/theme'; import styled from 'styled-components'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { makePropsTransient, TransientProps } from '../../utils/transientProps'; export const allowedFlexFrameProps: FramePropsKeys[] = ['margin', 'width', 'height']; diff --git a/packages/components/src/components/Passphrase/EnterOnTrezorButton.tsx b/packages/components/src/components/Passphrase/EnterOnTrezorButton.tsx deleted file mode 100644 index 60122911cdb..00000000000 --- a/packages/components/src/components/Passphrase/EnterOnTrezorButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { FormattedMessage } from 'react-intl'; -import styled, { useTheme } from 'styled-components'; -import { Image } from '../Image/Image'; -import { DeviceModelInternal } from '@trezor/connect'; -import { Card } from '../Card/Card'; -import { Icon } from '../assets/Icon/Icon'; -import { Text } from '../typography/Text/Text'; -import { spacings } from '@trezor/theme'; -import { Row } from '../Flex/Flex'; - -const Flex = styled.div` - flex: 1; -`; - -interface EnterOnTrezorButtonProps { - submit: (value: string, passphraseOnDevice?: boolean) => void; - value: string; - deviceModel?: DeviceModelInternal; -} - -export const EnterOnTrezorButton = ({ submit, value, deviceModel }: EnterOnTrezorButtonProps) => { - const theme = useTheme(); - - return ( - submit(value, true)} - data-testid="@passphrase/enter-on-device-button" - > - - {deviceModel && Trezor} - - - - - - - - - ); -}; diff --git a/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx b/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx new file mode 100644 index 00000000000..e2a7f4d02fb --- /dev/null +++ b/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx @@ -0,0 +1,32 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { + RotateDeviceImage as RotateDeviceImageComponent, + RotateDeviceImageProps, +} from './RotateDeviceImage'; +import { DeviceModelInternal } from '@trezor/connect'; + +const meta: Meta = { + title: 'Misc/RotateDeviceImage', + component: RotateDeviceImageComponent, +} as Meta; +export default meta; + +export const RotateDeviceImage: StoryObj = { + args: { + deviceModel: DeviceModelInternal.T3B1, + deviceColor: undefined, + animationHeight: undefined, + animationWidth: undefined, + }, + argTypes: { + deviceModel: { + options: DeviceModelInternal, + control: { + type: 'select', + }, + }, + deviceColor: { + type: 'string', + }, + }, +}; diff --git a/packages/components/src/components/ConfirmOnDevice/RotateDeviceImage.tsx b/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.tsx similarity index 94% rename from packages/components/src/components/ConfirmOnDevice/RotateDeviceImage.tsx rename to packages/components/src/components/RotateDeviceImage/RotateDeviceImage.tsx index c560089426e..94ec3e8d657 100644 --- a/packages/components/src/components/ConfirmOnDevice/RotateDeviceImage.tsx +++ b/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.tsx @@ -4,13 +4,13 @@ import { DeviceModelInternal } from '@trezor/connect'; import { Image } from '../Image/Image'; import styled from 'styled-components'; -interface DeviceImageProps { +export type RotateDeviceImageProps = { deviceModel?: DeviceModelInternal; deviceColor?: number; className?: string; animationHeight?: string; animationWidth?: string; -} +}; const StyledImage = styled(Image)` /* do not apply the darkening filter in dark mode on device images */ @@ -23,7 +23,7 @@ export const RotateDeviceImage = ({ className, animationHeight, animationWidth, -}: DeviceImageProps) => { +}: RotateDeviceImageProps) => { if (!deviceModel) { return null; } diff --git a/packages/components/src/components/Warning/Warning.stories.tsx b/packages/components/src/components/Warning/Warning.stories.tsx index 42c2e0cbc5b..b0edfdebec3 100644 --- a/packages/components/src/components/Warning/Warning.stories.tsx +++ b/packages/components/src/components/Warning/Warning.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { Warning as WarningComponent, WarningProps, variables, Row } from '../../index'; import { allowedWarningFrameProps } from './Warning'; import styled from 'styled-components'; -import { getFramePropsStory } from '../common/frameProps'; +import { getFramePropsStory } from '../../utils/frameProps'; const Wrapper = styled.div` display: flex; diff --git a/packages/components/src/components/Warning/Warning.tsx b/packages/components/src/components/Warning/Warning.tsx index 68aae45c79a..486de2a84c8 100755 --- a/packages/components/src/components/Warning/Warning.tsx +++ b/packages/components/src/components/Warning/Warning.tsx @@ -5,7 +5,7 @@ import { Icon, IconType } from '../assets/Icon/Icon'; import { variables } from '../../config'; import { Elevation, borders, spacingsPx, typography, spacings } from '@trezor/theme'; import { Row, TransientProps, useElevation } from '../..'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; import { WarningContext } from './WarningContext'; import { WarningButton } from './WarningButton'; import { WarningVariant } from './types'; diff --git a/packages/components/src/components/buttons/Button/Button.stories.tsx b/packages/components/src/components/buttons/Button/Button.stories.tsx index ead60b57aec..57c5b1c6b64 100644 --- a/packages/components/src/components/buttons/Button/Button.stories.tsx +++ b/packages/components/src/components/buttons/Button/Button.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { allowedButtonFrameProps, Button as ButtonComponent, ButtonProps } from './Button'; -import { getFramePropsStory } from '../../common/frameProps'; +import { getFramePropsStory } from '../../../utils/frameProps'; import { variables } from '../../../config'; const meta: Meta = { diff --git a/packages/components/src/components/buttons/Button/Button.tsx b/packages/components/src/components/buttons/Button/Button.tsx index c41268cc275..e604eb86f4f 100644 --- a/packages/components/src/components/buttons/Button/Button.tsx +++ b/packages/components/src/components/buttons/Button/Button.tsx @@ -15,7 +15,7 @@ import { import { focusStyleTransition, getFocusShadowStyle } from '../../../utils/utils'; import { useElevation } from '../../ElevationContext/ElevationContext'; import { makePropsTransient, TransientProps } from '../../../utils/transientProps'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../../utils/frameProps'; export const allowedButtonFrameProps: FramePropsKeys[] = ['margin']; type AllowedFrameProps = Pick; diff --git a/packages/components/src/components/common/accessabilityProps.tsx b/packages/components/src/components/common/accessabilityProps.tsx deleted file mode 100644 index a174161bcda..00000000000 --- a/packages/components/src/components/common/accessabilityProps.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export type AccessabilityProps = { - tabIndex?: number; -}; - -export const withAccessabilityProps = ({ tabIndex }: AccessabilityProps) => { - return { tabIndex }; -}; diff --git a/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx b/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx index 27de257c2b2..75a74661c67 100644 --- a/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx +++ b/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx @@ -6,7 +6,7 @@ import { CheckboxProps, allowedCheckboxFrameProps, } from './Checkbox'; -import { getFramePropsStory } from '../../common/frameProps'; +import { getFramePropsStory } from '../../../utils/frameProps'; const meta: Meta = { title: 'Form/Checkbox', diff --git a/packages/components/src/components/form/Checkbox/Checkbox.tsx b/packages/components/src/components/form/Checkbox/Checkbox.tsx index 0f6f1b38dd6..62d90504281 100755 --- a/packages/components/src/components/form/Checkbox/Checkbox.tsx +++ b/packages/components/src/components/form/Checkbox/Checkbox.tsx @@ -6,7 +6,7 @@ import { KEYBOARD_CODE } from '../../../constants/keyboardEvents'; import { Icon } from '../../assets/Icon/Icon'; import { getFocusShadowStyle } from '../../../utils/utils'; import { UIHorizontalAlignment, UIVariant } from '../../../config/types'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../../utils/frameProps'; import { makePropsTransient, TransientProps } from '../../../utils/transientProps'; export const allowedCheckboxFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/components/loaders/Spinner/Spinner.stories.tsx b/packages/components/src/components/loaders/Spinner/Spinner.stories.tsx index 12813400926..978f5cde809 100644 --- a/packages/components/src/components/loaders/Spinner/Spinner.stories.tsx +++ b/packages/components/src/components/loaders/Spinner/Spinner.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Spinner as SpinnerComponent, SpinnerProps, allowedSpinnerFrameProps } from './Spinner'; -import { getFramePropsStory } from '../../common/frameProps'; +import { getFramePropsStory } from '../../../utils/frameProps'; const meta: Meta = { title: 'Loaders/Spinner', diff --git a/packages/components/src/components/loaders/Spinner/Spinner.tsx b/packages/components/src/components/loaders/Spinner/Spinner.tsx index c1fcaf56c70..3518987f2e1 100644 --- a/packages/components/src/components/loaders/Spinner/Spinner.tsx +++ b/packages/components/src/components/loaders/Spinner/Spinner.tsx @@ -5,7 +5,7 @@ import animationStart from './animationData/refresh-spinner-start.json'; import animationMiddle from './animationData/refresh-spinner-middle.json'; import animationEnd from './animationData/refresh-spinner-end-success.json'; import animationWarn from './animationData/refresh-spinner-end-warning.json'; -import { withFrameProps, FrameProps, FramePropsKeys } from '../../common/frameProps'; +import { withFrameProps, FrameProps, FramePropsKeys } from '../../../utils/frameProps'; import { TransientProps } from '../../../utils/transientProps'; export const allowedSpinnerFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/components/typography/Heading/Heading.stories.tsx b/packages/components/src/components/typography/Heading/Heading.stories.tsx index 74ef05e7cfc..75cfca19a4c 100644 --- a/packages/components/src/components/typography/Heading/Heading.stories.tsx +++ b/packages/components/src/components/typography/Heading/Heading.stories.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Meta, StoryObj } from '@storybook/react'; import { H1, H2, H3, allowedHeadingFrameProps } from './Heading'; -import { getFramePropsStory } from '../../common/frameProps'; +import { getFramePropsStory } from '../../../utils/frameProps'; const Wrapper = styled.div` display: flex; diff --git a/packages/components/src/components/typography/Heading/Heading.tsx b/packages/components/src/components/typography/Heading/Heading.tsx index bdc9c2e777d..e2ce38692e5 100644 --- a/packages/components/src/components/typography/Heading/Heading.tsx +++ b/packages/components/src/components/typography/Heading/Heading.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Color, TypographyStyle, typography } from '@trezor/theme'; -import { FrameProps, FramePropsKeys, withFrameProps } from '../../common/frameProps'; +import { FrameProps, FramePropsKeys, withFrameProps } from '../../../utils/frameProps'; import { makePropsTransient, TransientProps } from '../../../utils/transientProps'; export const allowedHeadingFrameProps: FramePropsKeys[] = ['margin']; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index ef9f36eb9a0..3113ff9fd7b 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -24,8 +24,7 @@ export * from './components/buttons/TextButton/TextButton'; export * from './components/buttons/TooltipButton/TooltipButton'; export * from './components/Card/Card'; export * from './components/CollapsibleBox/CollapsibleBox'; -export * from './components/ConfirmOnDevice/ConfirmOnDevice'; -export * from './components/ConfirmOnDevice/RotateDeviceImage'; +export * from './components/RotateDeviceImage/RotateDeviceImage'; export * from './components/DataAnalytics'; export * from './components/Divider/Divider'; export * from './components/Dropdown/Dropdown'; @@ -54,7 +53,6 @@ export * from './components/modals/Modal/Backdrop'; export * from './components/modals/Modal/Modal'; export * from './components/Note/Note'; export * from './components/PasswordStrengthIndicator/PasswordStrengthIndicator'; -export * from './components/Passphrase/PassphraseTypeCard'; export * from './components/ResizableBox/ResizableBox'; export * from './components/skeletons/SkeletonCircle'; export * from './components/skeletons/SkeletonRectangle'; @@ -70,6 +68,7 @@ export * from './components/typography/Paragraph/Paragraph'; export * from './components/typography/Text/Text'; export * from './components/typography/TruncateWithTooltip/TruncateWithTooltip'; export * from './components/Warning/Warning'; +export { StoryColumn, StoryWrapper } from './support/Story'; export * from './constants/keyboardEvents'; diff --git a/packages/components/src/support/Story.tsx b/packages/components/src/support/Story.tsx index 60044403a0c..ab437b298a7 100644 --- a/packages/components/src/support/Story.tsx +++ b/packages/components/src/support/Story.tsx @@ -10,7 +10,7 @@ const Wrapper = styled.div` color: ${({ theme }) => theme.textDefault}; `; -const StoryWrapper = (story: any) => ( +export const StoryWrapper = (story: any) => ( <> {story.children} @@ -42,10 +42,8 @@ const Col = styled.div` } `; -const StoryColumn = ({ minWidth, maxWidth, children }: StoryColumnProps) => ( +export const StoryColumn = ({ minWidth, maxWidth, children }: StoryColumnProps) => ( {children} ); - -export { StoryWrapper, StoryColumn }; diff --git a/packages/components/src/utils/accessibilityProps.tsx b/packages/components/src/utils/accessibilityProps.tsx new file mode 100644 index 00000000000..d3a85a32308 --- /dev/null +++ b/packages/components/src/utils/accessibilityProps.tsx @@ -0,0 +1,7 @@ +export type AccessibilityProps = { + tabIndex?: number; +}; + +export const withAccessibilityProps = ({ tabIndex }: AccessibilityProps) => { + return { tabIndex }; +}; diff --git a/packages/components/src/components/common/frameProps.tsx b/packages/components/src/utils/frameProps.tsx similarity index 97% rename from packages/components/src/components/common/frameProps.tsx rename to packages/components/src/utils/frameProps.tsx index 415847d0baf..4d611af5c96 100644 --- a/packages/components/src/components/common/frameProps.tsx +++ b/packages/components/src/utils/frameProps.tsx @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import { TransientProps } from '../../utils/transientProps'; +import { TransientProps } from './transientProps'; import { SpacingValues } from '@trezor/theme'; type Margin = { diff --git a/packages/connect-ui/src/components/Passphrase/PassphraseTypeCard.tsx b/packages/connect-ui/src/components/Passphrase/PassphraseTypeCard.tsx index f459a61ce83..f4e2694216d 100644 --- a/packages/connect-ui/src/components/Passphrase/PassphraseTypeCard.tsx +++ b/packages/connect-ui/src/components/Passphrase/PassphraseTypeCard.tsx @@ -21,7 +21,7 @@ import { motionAnimation, } from '@trezor/components'; -type WalletType = 'standard' | 'hidden'; +import { WalletType } from './types'; type WrapperProps = { $type: WalletType; diff --git a/packages/product-components/.storybook/main.js b/packages/product-components/.storybook/main.js new file mode 100644 index 00000000000..681db99f95d --- /dev/null +++ b/packages/product-components/.storybook/main.js @@ -0,0 +1,31 @@ +import { dirname, join } from 'path'; + +module.exports = { + stories: ['../src/**/*.stories.*'], + logLevel: 'debug', + addons: [ + getAbsolutePath('@storybook/addon-links'), + getAbsolutePath('@storybook/addon-controls'), + getAbsolutePath('@storybook/addon-viewport'), + getAbsolutePath('@storybook/addon-actions'), + ], + staticDirs: ['../public', { from: '../../suite-data/files', to: '/static' }], + framework: { + name: getAbsolutePath('@storybook/react-webpack5'), + options: {}, + }, + babel: async options => { + options.presets.push('@babel/preset-typescript'); + return options; + }, + features: { + storyStoreV7: false, // Remove this line when storiesOf is not used anymore + }, +}; +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))); +} diff --git a/packages/product-components/.storybook/manager-head.html b/packages/product-components/.storybook/manager-head.html new file mode 100644 index 00000000000..61847d549e2 --- /dev/null +++ b/packages/product-components/.storybook/manager-head.html @@ -0,0 +1,2 @@ + + diff --git a/packages/product-components/.storybook/manager.js b/packages/product-components/.storybook/manager.js new file mode 100644 index 00000000000..17b478d55a6 --- /dev/null +++ b/packages/product-components/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import theme from './theme'; + +addons.setConfig({ + theme: theme, +}); diff --git a/packages/product-components/.storybook/preview-head.html b/packages/product-components/.storybook/preview-head.html new file mode 100644 index 00000000000..61847d549e2 --- /dev/null +++ b/packages/product-components/.storybook/preview-head.html @@ -0,0 +1,2 @@ + + diff --git a/packages/product-components/.storybook/preview.js b/packages/product-components/.storybook/preview.js new file mode 100644 index 00000000000..0aff7876c5e --- /dev/null +++ b/packages/product-components/.storybook/preview.js @@ -0,0 +1,22 @@ +import { StoryWrapper } from '@trezor/components'; + +export const decorators = [ + (Story, context) => + context?.parameters?.noWrapper ? ( + + ) : ( + + + + ), +]; +export const parameters = { + options: { + showPanel: true, + showInfo: true, + panelPosition: 'right', + }, + theme: { + base: 'light', + }, +}; diff --git a/packages/product-components/.storybook/theme.js b/packages/product-components/.storybook/theme.js new file mode 100644 index 00000000000..6e73ee71658 --- /dev/null +++ b/packages/product-components/.storybook/theme.js @@ -0,0 +1,7 @@ +import { create } from '@storybook/theming/create'; + +export default create({ + base: 'light', + fontBase: 'TT Satoshi', + brandTitle: 'Product Components', +}); diff --git a/packages/product-components/CHANGELOG.md b/packages/product-components/CHANGELOG.md new file mode 100644 index 00000000000..825c32f0d03 --- /dev/null +++ b/packages/product-components/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/packages/product-components/LICENSE.md b/packages/product-components/LICENSE.md new file mode 100644 index 00000000000..1bebd9dc53b --- /dev/null +++ b/packages/product-components/LICENSE.md @@ -0,0 +1,50 @@ +# TREZOR REFERENCE SOURCE LICENSE (T-RSL) + +This license governs use of the accompanying software. If you use the software, +you accept this license. If you do not accept the license, do not use the +software. + +## 1. Definitions + +The terms "reproduce," "reproduction" and "distribution" have the same meaning +here as under U.S. copyright law. + +"You" means the licensee of the software. + +"Your company" means the company you worked for when you downloaded the +software. + +"Reference use" means use of the software within your company as a reference, +in read only form, for the sole purposes of debugging your products, +maintaining your products, or enhancing the interoperability of your products +with the software, and specifically excludes the right to distribute the +software outside of your company. + +"Licensed patents" means any Licensor patent claims which read directly on the +software as distributed by the Licensor under this license. + +## 2. Grant of Rights + +(A) Copyright Grant - Subject to the terms of this license, the Licensor grants +you a non-transferable, non-exclusive, worldwide, royalty-free copyright +license to reproduce the software for reference use. + +(B) Patent Grant - Subject to the terms of this license, the Licensor grants +you a non-transferable, non-exclusive, worldwide, royalty-free patent license +under licensed patents for reference use. + +## 3. Limitations + +(A) No Trademark License - This license does not grant you any rights to use +the Licensor's name, logo, or trademarks. + +(B) If you begin patent litigation against the Licensor over patents that you +think may apply to the software (including a cross-claim or counterclaim in +a lawsuit), your license to the software ends automatically. + +(C) The software is licensed "as-is." You bear the risk of using it. The +Licensor gives no express warranties, guarantees or conditions. You may have +additional consumer rights under your local laws which this license cannot +change. To the extent permitted under your local laws, the Licensor excludes +the implied warranties of merchantability, fitness for a particular purpose and +non-infringement. diff --git a/packages/product-components/README.md b/packages/product-components/README.md new file mode 100644 index 00000000000..36f2aeb33b1 --- /dev/null +++ b/packages/product-components/README.md @@ -0,0 +1,9 @@ +# @trezor/product-components + +This repository contains components, images and hooks that are product specific (usually related to Suite or Connect). It shouldn't contain basic primitive components. They should be placed in `@trezor/components` package. + +## Storybook + +Each component can be inspected separately in [Storybook](https://storybook.js.org/). Stories are deployed automatically by a nightly pipeline via `storybook-build` command to https://suite.corp.sldev.cz/product-components/develop. To see your local changes, run Storybook locally: + +`yarn workspace @trezor/product-components storybook` diff --git a/packages/product-components/package.json b/packages/product-components/package.json new file mode 100644 index 00000000000..67f4c602a01 --- /dev/null +++ b/packages/product-components/package.json @@ -0,0 +1,47 @@ +{ + "name": "@trezor/product-components", + "version": "1.0.0", + "private": true, + "main": "src/index", + "author": "SatoshiLabs s.r.o.", + "license": "SEE LICENSE IN LICENSE.md", + "sideEffects": false, + "scripts": { + "lint": "yarn lint:js && yarn lint:styles", + "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'", + "lint:styles": "npx stylelint './src/**/*{.ts,.tsx}' --cache --config ../../.stylelintrc", + "lint-fix": "npx eslint ./src --fix", + "type-check": "yarn g:tsc --build tsconfig.json", + "type-check:watch": "yarn type-check -- --watch", + "storybook": "storybook dev -p 9004 -c .storybook", + "storybook-build": "storybook build -c .storybook -o .build-storybook" + }, + "dependencies": { + "@suite-common/validators": "workspace:*", + "@trezor/components": "workspace:*", + "@trezor/connect": "workspace:*", + "@trezor/dom-utils": "workspace:*", + "@trezor/env-utils": "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" + }, + "devDependencies": { + "@storybook/addon-actions": "^7.6.13", + "@storybook/addon-controls": "^7.6.13", + "@storybook/addon-links": "^7.6.13", + "@storybook/addon-viewport": "^7.6.13", + "@storybook/addons": "^7.6.13", + "@storybook/client-api": "^7.6.13", + "@storybook/react": "^7.6.13", + "@storybook/react-webpack5": "^7.6.13", + "@types/react": "18.2.79", + "storybook": "^7.6.13", + "stylelint": "^16.2.1", + "typescript-styled-plugin": "^0.18.3" + } +} diff --git a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx similarity index 97% rename from packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx rename to packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx index 7b20681ddf0..483f80d0585 100644 --- a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx +++ b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryFn } from '@storybook/react'; import { DeviceModelInternal } from '@trezor/connect'; import { ConfirmOnDevice as ConfirmOnDeviceComponent } from './ConfirmOnDevice'; -import { StoryColumn } from '../../support/Story'; +import { StoryColumn } from '@trezor/components'; const meta: Meta = { - title: 'Misc/ConfirmOnDevice', + title: 'ConfirmOnDevice', parameters: { options: { showPanel: false, diff --git a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx similarity index 96% rename from packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx rename to packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx index 8c7a37010ef..5cc4ccadd88 100644 --- a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx +++ b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx @@ -3,7 +3,7 @@ import styled, { css, keyframes } from 'styled-components'; import { DeviceModelInternal } from '@trezor/connect'; import { borders, spacingsPx } from '@trezor/theme'; -import { ElevationUp } from '../ElevationContext/ElevationContext'; +import { ElevationUp } from '@trezor/components'; import { ConfirmOnDeviceContent } from './ConfirmOnDeviceContent'; enum AnimationDirection { diff --git a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx similarity index 96% rename from packages/components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx rename to packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx index bc490150a7f..c6f0a3ac8b8 100644 --- a/packages/components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx +++ b/packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; import styled, { css, useTheme } from 'styled-components'; -import { Icon } from '../assets/Icon/Icon'; +import { Icon } from '@trezor/components'; import { DeviceModelInternal } from '@trezor/connect'; import { Elevation, @@ -9,8 +9,8 @@ import { spacingsPx, typography, } from '@trezor/theme'; -import { useElevation } from '../ElevationContext/ElevationContext'; -import { RotateDeviceImage } from './RotateDeviceImage'; +import { useElevation } from '@trezor/components'; +import { RotateDeviceImage } from '@trezor/components'; const Column = styled.div` display: flex; diff --git a/packages/connect-ui/src/components/Passphrase/EnterOnTrezorButton.tsx b/packages/product-components/src/components/PassphraseTypeCard/EnterOnTrezorButton.tsx similarity index 93% rename from packages/connect-ui/src/components/Passphrase/EnterOnTrezorButton.tsx rename to packages/product-components/src/components/PassphraseTypeCard/EnterOnTrezorButton.tsx index 181f157d537..783ca8f3b12 100644 --- a/packages/connect-ui/src/components/Passphrase/EnterOnTrezorButton.tsx +++ b/packages/product-components/src/components/PassphraseTypeCard/EnterOnTrezorButton.tsx @@ -1,11 +1,8 @@ -import React from 'react'; import { FormattedMessage } from 'react-intl'; - import styled, { useTheme } from 'styled-components'; - -import { spacings } from '@trezor/theme'; +import { Image, Card, Icon, Text, Row } from '@trezor/components'; import { DeviceModelInternal } from '@trezor/connect'; -import { Card, Icon, Row, Text, Image } from '@trezor/components'; +import { spacings } from '@trezor/theme'; const Flex = styled.div` flex: 1; diff --git a/packages/components/src/components/Passphrase/PassphraseTypeCard.stories.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.stories.tsx similarity index 96% rename from packages/components/src/components/Passphrase/PassphraseTypeCard.stories.tsx rename to packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.stories.tsx index 7883b19cfe3..4de9375d95d 100644 --- a/packages/components/src/components/Passphrase/PassphraseTypeCard.stories.tsx +++ b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.stories.tsx @@ -6,7 +6,7 @@ import { import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Loaders/PassphraseTypeCard', + title: 'PassphraseTypeCard', decorators: [ (Story: React.FC) => ( diff --git a/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.tsx similarity index 99% rename from packages/components/src/components/Passphrase/PassphraseTypeCard.tsx rename to packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.tsx index 4d82a172c57..404376f712e 100644 --- a/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx +++ b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCard.tsx @@ -3,16 +3,16 @@ import { AnimatePresence } from 'framer-motion'; import { useKeyPress } from '@trezor/react-utils'; import { setCaretPosition } from '@trezor/dom-utils'; import styled, { css } from 'styled-components'; -import { borders, spacingsPx } from '@trezor/theme'; import { countBytesInString } from '@trezor/utils'; import { formInputsMaxLength } from '@suite-common/validators'; -import { TooltipProps } from '../Tooltip/Tooltip'; +import { TooltipProps } from '@trezor/components'; import { EnterOnTrezorButton } from './EnterOnTrezorButton'; import { DeviceModelInternal } from '@trezor/connect'; import { PassphraseTypeCardHeading } from './PassphraseTypeCardHeading'; import { WalletType } from './types'; import { PassphraseTypeCardContent } from './PassphraseTypeCardContent'; import { DOT } from './consts'; +import { borders, spacingsPx } from '@trezor/theme'; type WrapperProps = { $type: WalletType; diff --git a/packages/components/src/components/Passphrase/PassphraseTypeCardContent.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx similarity index 94% rename from packages/components/src/components/Passphrase/PassphraseTypeCardContent.tsx rename to packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx index 7b21eaba801..ebe1c06c896 100644 --- a/packages/components/src/components/Passphrase/PassphraseTypeCardContent.tsx +++ b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx @@ -1,19 +1,22 @@ import { isAndroid } from '@trezor/env-utils'; import { AnimatePresence, motion } from 'framer-motion'; import { FormattedMessage, useIntl } from 'react-intl'; -import { Card } from '../Card/Card'; -import { Column, Row } from '../Flex/Flex'; -import { PasswordStrengthIndicator } from '../PasswordStrengthIndicator/PasswordStrengthIndicator'; +import { + Card, + PasswordStrengthIndicator, + Column, + Row, + Icon, + Input, + Button, + motionAnimation, +} from '@trezor/components'; import styled, { useTheme } from 'styled-components'; -import { Input } from '../form/Input/Input'; import { spacings, spacingsPx, typography } from '@trezor/theme'; import { useKeyPress } from '@trezor/react-utils'; import { ChangeEvent, MutableRefObject, ReactNode, RefObject } from 'react'; -import { Button } from '../buttons/Button/Button'; import { WalletType } from './types'; import { DOT } from './consts'; -import { Icon } from '../assets/Icon/Icon'; -import { motion as motionConfig } from '../../config'; const PassphraseInput = styled(Input)` input { @@ -187,7 +190,7 @@ export const PassphraseTypeCardContent = ({ {/* Submit button */} {/* Visible in standalone modal for creating a passphrase wallet or after a click also in modal for selecting wallet type */} {(singleColModal || hiddenWalletTouched) && ( - + ` diff --git a/packages/components/src/components/Passphrase/consts.ts b/packages/product-components/src/components/PassphraseTypeCard/consts.ts similarity index 100% rename from packages/components/src/components/Passphrase/consts.ts rename to packages/product-components/src/components/PassphraseTypeCard/consts.ts diff --git a/packages/components/src/components/Passphrase/types.ts b/packages/product-components/src/components/PassphraseTypeCard/types.ts similarity index 100% rename from packages/components/src/components/Passphrase/types.ts rename to packages/product-components/src/components/PassphraseTypeCard/types.ts diff --git a/packages/product-components/src/index.ts b/packages/product-components/src/index.ts new file mode 100644 index 00000000000..588d91df7e4 --- /dev/null +++ b/packages/product-components/src/index.ts @@ -0,0 +1,2 @@ +export { PassphraseTypeCard } from './components/PassphraseTypeCard/PassphraseTypeCard'; +export { ConfirmOnDevice } from './components/ConfirmOnDevice/ConfirmOnDevice'; diff --git a/packages/product-components/styled.d.ts b/packages/product-components/styled.d.ts new file mode 100644 index 00000000000..ff56311cfb2 --- /dev/null +++ b/packages/product-components/styled.d.ts @@ -0,0 +1,8 @@ +// import original module declarations +import 'styled-components'; +import { BoxShadows, Colors } from '@trezor/theme'; +import { SuiteThemeColors } from './src/config/colors'; + +declare module 'styled-components' { + export interface DefaultTheme extends SuiteThemeColors, Colors, BoxShadows {} +} diff --git a/packages/product-components/tsconfig.json b/packages/product-components/tsconfig.json new file mode 100644 index 00000000000..40ef68619cb --- /dev/null +++ b/packages/product-components/tsconfig.json @@ -0,0 +1,27 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "paths": { + "@trezor/theme": [ + "./packages/theme/src/*" + ] + }, + "plugins": [ + { "name": "typescript-styled-plugin" } + ], + "outDir": "./libDev" + }, + "include": [".", "**/*.json"], + "references": [ + { + "path": "../../suite-common/validators" + }, + { "path": "../components" }, + { "path": "../connect" }, + { "path": "../dom-utils" }, + { "path": "../env-utils" }, + { "path": "../react-utils" }, + { "path": "../theme" }, + { "path": "../utils" } + ] +} diff --git a/packages/suite/package.json b/packages/suite/package.json index 19536fe756c..e4599319f10 100644 --- a/packages/suite/package.json +++ b/packages/suite/package.json @@ -68,6 +68,7 @@ "@trezor/dom-utils": "workspace:*", "@trezor/env-utils": "workspace:*", "@trezor/ipc-proxy": "workspace:*", + "@trezor/product-components": "workspace:*", "@trezor/react-utils": "workspace:*", "@trezor/styles": "workspace:*", "@trezor/suite-analytics": "workspace:*", diff --git a/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx b/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx index fe2ac4bef85..69e6df023b8 100644 --- a/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx +++ b/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx @@ -3,12 +3,13 @@ import styled, { css } from 'styled-components'; import * as semver from 'semver'; import { pickByDeviceModel, getFirmwareVersion } from '@trezor/device-utils'; -import { H2, Button, ConfirmOnDevice, variables, DeviceAnimation } from '@trezor/components'; +import { H2, Button, variables, DeviceAnimation } from '@trezor/components'; import { DEVICE, Device, DeviceModelInternal, UI } from '@trezor/connect'; import { Modal, Translation, WebUsbButton } from 'src/components/suite'; import { DeviceConfirmImage } from 'src/components/suite/DeviceConfirmImage'; import { useDevice, useFirmware } from 'src/hooks/suite'; import { AbortButton } from 'src/components/suite/modals/AbortButton'; +import { ConfirmOnDevice } from '@trezor/product-components'; const StyledModal = styled(Modal)` width: 580px; diff --git a/packages/suite/src/components/onboarding/OnboardingStepBox.tsx b/packages/suite/src/components/onboarding/OnboardingStepBox.tsx index d1169dfd20c..f7796064afa 100644 --- a/packages/suite/src/components/onboarding/OnboardingStepBox.tsx +++ b/packages/suite/src/components/onboarding/OnboardingStepBox.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; import TrezorConnect from '@trezor/connect'; -import { ConfirmOnDevice, Backdrop } from '@trezor/components'; +import { Backdrop } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { useIntl } from 'react-intl'; import messages from 'src/support/messages'; @@ -11,6 +11,7 @@ import { } from './CollapsibleOnboardingCard'; import { TrezorDevice } from '@suite-common/suite-types'; import { spacingsPx, zIndices } from '@trezor/theme'; +import { ConfirmOnDevice } from '@trezor/product-components'; const WrapperWrapper = styled.div` z-index: ${zIndices.onboardingForeground}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx index bdf06c90cbd..b2cd25892a9 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx @@ -2,7 +2,7 @@ import { useEffect, ReactNode } from 'react'; import styled from 'styled-components'; import { notificationsActions } from '@suite-common/toast-notifications'; -import { Button, ConfirmOnDevice, ModalProps, Tooltip, variables } from '@trezor/components'; +import { Button, ModalProps, Tooltip, variables } from '@trezor/components'; import { copyToClipboard } from '@trezor/dom-utils'; import { selectDevice } from '@suite-common/wallet-core'; import { selectIsActionAbortable } from 'src/reducers/suite/suiteReducer'; @@ -17,6 +17,7 @@ import { TransactionReviewOutputElement } from '../TransactionReviewModal/Transa import { Account } from '@suite-common/wallet-types'; import { borders, palette } from '@trezor/theme'; import { getNetworkFeatures } from '@suite-common/wallet-config'; +import { ConfirmOnDevice } from '@trezor/product-components'; const Wrapper = styled.div` display: flex; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmFingerprintModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmFingerprintModal.tsx index 3959853115b..8c2b356bc7d 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmFingerprintModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmFingerprintModal.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import { ConfirmOnDevice } from '@trezor/components'; import { Translation, Modal, ModalProps } from 'src/components/suite'; import { TrezorDevice } from 'src/types/suite'; import { Fingerprint } from 'src/components/firmware'; +import { ConfirmOnDevice } from '@trezor/product-components'; const StyledModal = styled(Modal)` width: 360px; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DevicePromptModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DevicePromptModal.tsx index c719d9b1d88..66f52973e84 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DevicePromptModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/DevicePromptModal.tsx @@ -4,11 +4,7 @@ import { useIntl } from 'react-intl'; import styled from 'styled-components'; import TrezorConnect from '@trezor/connect'; -import { - ConfirmOnDevice, - Modal as TrezorModal, - ModalProps as TrezorModalProps, -} from '@trezor/components'; +import { Modal as TrezorModal, ModalProps as TrezorModalProps } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { selectIsActionAbortable } from 'src/reducers/suite/suiteReducer'; import { useSelector } from 'src/hooks/suite/useSelector'; @@ -17,6 +13,7 @@ import { useDevice } from 'src/hooks/suite'; import { useModalTarget } from 'src/support/suite/ModalContext'; import { ModalEnvironment } from '../../ModalEnvironment'; import { Modal } from '../../Modal/Modal'; +import { ConfirmOnDevice } from '@trezor/product-components'; const StyledTrezorModal = styled(TrezorModal)` ${Modal.Header} { diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx index 195010ea33d..9b42d5beafb 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx @@ -1,6 +1,6 @@ import { useCallback } from 'react'; -import { PassphraseTypeCard, Text } from '@trezor/components'; +import { Text } from '@trezor/components'; import { selectIsDiscoveryAuthConfirmationRequired, onPassphraseSubmit, @@ -18,6 +18,7 @@ import { PassphraseHeading } from './PassphraseHeading'; import TrezorConnect from '@trezor/connect'; import { spacingsPx } from '@trezor/theme'; import styled from 'styled-components'; +import { PassphraseTypeCard } from '@trezor/product-components'; const MarginContainer = styled.div` margin: 0 ${spacingsPx.sm}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx index 36e75b40be2..9a201e25a80 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx @@ -1,9 +1,10 @@ -import { Warning, PassphraseTypeCard, Text } from '@trezor/components'; +import { Warning, Text } from '@trezor/components'; import { Translation } from 'src/components/suite/Translation'; import { PassphraseHeading } from './PassphraseHeading'; import { OpenGuideFromTooltip } from 'src/components/guide'; import { selectDeviceModel } from '@suite-common/wallet-core'; import { useSelector } from 'src/hooks/suite'; +import { PassphraseTypeCard } from '../../../../../../../product-components/src/components/PassphraseTypeCard/PassphraseTypeCard'; type PassphraseWalletConfirmationStep3Props = { onDeviceOffer: boolean; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx index 0584889338e..3f4c8e7d789 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import styled from 'styled-components'; -import { ConfirmOnDevice, variables } from '@trezor/components'; +import { variables } from '@trezor/components'; import { Deferred } from '@trezor/utils'; import { DeviceRootState, @@ -21,6 +21,7 @@ import { TransactionReviewSummary } from './TransactionReviewSummary'; import { TransactionReviewOutputList } from './TransactionReviewOutputList/TransactionReviewOutputList'; import { TransactionReviewEvmExplanation } from './TransactionReviewEvmExplanation'; import { getTxStakeNameByDataHex } from '@suite-common/suite-utils'; +import { ConfirmOnDevice } from '@trezor/product-components'; const StyledModal = styled(Modal)` ${Modal.Body} { diff --git a/packages/suite/src/views/firmware/FirmwareModal.tsx b/packages/suite/src/views/firmware/FirmwareModal.tsx index 2509e5c84b6..b081575a532 100644 --- a/packages/suite/src/views/firmware/FirmwareModal.tsx +++ b/packages/suite/src/views/firmware/FirmwareModal.tsx @@ -2,7 +2,7 @@ import { ReactElement } from 'react'; import styled from 'styled-components'; import { acquireDevice, selectDevice } from '@suite-common/wallet-core'; -import { ConfirmOnDevice, variables } from '@trezor/components'; +import { variables } from '@trezor/components'; import { closeModalApp } from 'src/actions/suite/routerActions'; import { CheckSeedStep, FirmwareCloseButton, FirmwareInstallation } from 'src/components/firmware'; @@ -10,6 +10,7 @@ import { Translation, Modal, PrerequisitesGuide } from 'src/components/suite'; import { OnboardingStepBox } from 'src/components/onboarding'; import { useDispatch, useFirmware, useSelector } from 'src/hooks/suite'; import { TranslationKey } from '@suite-common/intl-types'; +import { ConfirmOnDevice } from '@trezor/product-components'; const Wrapper = styled.div<{ $isWithTopPadding: boolean }>` display: flex; diff --git a/packages/suite/tsconfig.json b/packages/suite/tsconfig.json index 80c01341e1d..caca9428921 100644 --- a/packages/suite/tsconfig.json +++ b/packages/suite/tsconfig.json @@ -96,6 +96,7 @@ { "path": "../dom-utils" }, { "path": "../env-utils" }, { "path": "../ipc-proxy" }, + { "path": "../product-components" }, { "path": "../react-utils" }, { "path": "../styles" }, { "path": "../suite-analytics" }, diff --git a/tsconfig.json b/tsconfig.json index 8bb33c5fa57..9a570429a17 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -149,6 +149,7 @@ { "path": "packages/env-utils" }, { "path": "packages/ipc-proxy" }, { "path": "packages/node-utils" }, + { "path": "packages/product-components" }, { "path": "packages/protobuf" }, { "path": "packages/protocol" }, { "path": "packages/react-native-usb" }, diff --git a/yarn.lock b/yarn.lock index 6446e5cd8fb..073b0243290 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11096,6 +11096,37 @@ __metadata: languageName: unknown linkType: soft +"@trezor/product-components@workspace:*, @trezor/product-components@workspace:packages/product-components": + version: 0.0.0-use.local + resolution: "@trezor/product-components@workspace:packages/product-components" + dependencies: + "@storybook/addon-actions": "npm:^7.6.13" + "@storybook/addon-controls": "npm:^7.6.13" + "@storybook/addon-links": "npm:^7.6.13" + "@storybook/addon-viewport": "npm:^7.6.13" + "@storybook/addons": "npm:^7.6.13" + "@storybook/client-api": "npm:^7.6.13" + "@storybook/react": "npm:^7.6.13" + "@storybook/react-webpack5": "npm:^7.6.13" + "@suite-common/validators": "workspace:*" + "@trezor/components": "workspace:*" + "@trezor/connect": "workspace:*" + "@trezor/dom-utils": "workspace:*" + "@trezor/env-utils": "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" + storybook: "npm:^7.6.13" + styled-components: "npm:^6.1.8" + stylelint: "npm:^16.2.1" + typescript-styled-plugin: "npm:^0.18.3" + languageName: unknown + linkType: soft + "@trezor/protobuf@workspace:*, @trezor/protobuf@workspace:^, @trezor/protobuf@workspace:packages/protobuf": version: 0.0.0-use.local resolution: "@trezor/protobuf@workspace:packages/protobuf" @@ -11494,6 +11525,7 @@ __metadata: "@trezor/dom-utils": "workspace:*" "@trezor/env-utils": "workspace:*" "@trezor/ipc-proxy": "workspace:*" + "@trezor/product-components": "workspace:*" "@trezor/react-utils": "workspace:*" "@trezor/styles": "workspace:*" "@trezor/suite-analytics": "workspace:*"