refactor(suite): Move suite-related components outside of DS (#13612)

chore(suite): Add storybook for suite-related components to @trezor/suite refactor(suite): Create new package @trezor/suite-components
trezor · Aug 13, 2024 · f536d29 · f536d29
1 parent 95d3d90
commit f536d29
Show file tree

Hide file tree

Showing 70 changed files with 365 additions and 128 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<UIVariant, 'primary' | 'warning' | 'destructive' | 'info'>;

diff --git 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
@@ -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<HTMLDivElement>['onMouseEnter'];
         onMouseLeave?: HTMLAttributes<HTMLDivElement>['onMouseLeave'];
@@ -112,7 +112,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardProps & { paddingType: Padd
                 $paddingType={paddingType}
                 $isClickable={Boolean(onClick)}
                 onClick={onClick}
-                {...withAccessabilityProps({ tabIndex })}
+                {...withAccessibilityProps({ tabIndex })}
                 {...rest}
             >
                 <ElevationContext baseElevation={elevation}>{children}</ElevationContext>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx 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<RotateDeviceImageProps> = {
+    args: {
+        deviceModel: DeviceModelInternal.T3B1,
+        deviceColor: undefined,
+        animationHeight: undefined,
+        animationWidth: undefined,
+    },
+    argTypes: {
+        deviceModel: {
+            options: DeviceModelInternal,
+            control: {
+                type: 'select',
+            },
+        },
+        deviceColor: {
+            type: 'string',
+        },
+    },
+};
diff --git a/...nts/ConfirmOnDevice/RotateDeviceImage.tsx → ...s/RotateDeviceImage/RotateDeviceImage.tsx b/...nts/ConfirmOnDevice/RotateDeviceImage.tsx → ...s/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
@@ -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
@@ -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
@@ -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
@@ -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<FrameProps, (typeof allowedButtonFrameProps)[number]>;

diff --git a/packages/components/src/components/common/accessabilityProps.tsx b/packages/components/src/components/common/accessabilityProps.tsx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -10,7 +10,7 @@ const Wrapper = styled.div`
     color: ${({ theme }) => theme.textDefault};
 `;
 
-const StoryWrapper = (story: any) => (
+export const StoryWrapper = (story: any) => (
     <>
         <ThemeProvider theme={intermediaryTheme.light}>
             <Wrapper>{story.children}</Wrapper>
@@ -42,10 +42,8 @@ const Col = styled.div<StoryColumnProps>`
     }
 `;
 
-const StoryColumn = ({ minWidth, maxWidth, children }: StoryColumnProps) => (
+export const StoryColumn = ({ minWidth, maxWidth, children }: StoryColumnProps) => (
     <Col minWidth={minWidth || 250} maxWidth={maxWidth || 500}>
         {children}
     </Col>
 );
-
-export { StoryWrapper, StoryColumn };