From bd446892a3cdd669273fe5851cad1784c7e6a41e Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Mon, 30 Sep 2024 20:11:41 +0530 Subject: [PATCH 1/2] Adding key-value component --- .storybook/storybook.requires.js | 1 + app/components/UI/InfoRow/InfoRow.stories.tsx | 30 ++++++++++++++ app/components/UI/InfoRow/InfoRow.test.tsx | 11 +++++ app/components/UI/InfoRow/InfoRow.tsx | 30 ++++++++++++++ .../InfoRow/InfoSection/InfoSection.test.tsx | 18 +++++++++ .../UI/InfoRow/InfoSection/InfoSection.tsx | 18 +++++++++ .../__snapshots__/InfoSection.test.tsx.snap | 21 ++++++++++ .../UI/InfoRow/InfoSection/index.ts | 1 + .../UI/InfoRow/InfoSection/style.ts | 16 ++++++++ .../__snapshots__/InfoRow.test.tsx.snap | 40 +++++++++++++++++++ app/components/UI/InfoRow/index.ts | 1 + app/components/UI/InfoRow/style.ts | 28 +++++++++++++ .../Confirm/{index.tsx => index.ts} | 0 .../Confirm/{style.tsx => style.ts} | 0 .../components/Confirm/Title/Title.tsx | 7 +--- 15 files changed, 217 insertions(+), 5 deletions(-) create mode 100644 app/components/UI/InfoRow/InfoRow.stories.tsx create mode 100644 app/components/UI/InfoRow/InfoRow.test.tsx create mode 100644 app/components/UI/InfoRow/InfoRow.tsx create mode 100644 app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx create mode 100644 app/components/UI/InfoRow/InfoSection/InfoSection.tsx create mode 100644 app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap create mode 100644 app/components/UI/InfoRow/InfoSection/index.ts create mode 100644 app/components/UI/InfoRow/InfoSection/style.ts create mode 100644 app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap create mode 100644 app/components/UI/InfoRow/index.ts create mode 100644 app/components/UI/InfoRow/style.ts rename app/components/Views/confirmations/Confirm/{index.tsx => index.ts} (100%) rename app/components/Views/confirmations/Confirm/{style.tsx => style.ts} (100%) diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js index 3b26602e64d..31f1669fd92 100644 --- a/.storybook/storybook.requires.js +++ b/.storybook/storybook.requires.js @@ -123,6 +123,7 @@ const getStories = () => { "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"), "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"), "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"), + "./app/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/UI/InfoRow/InfoRow.stories.tsx"), }; }; diff --git a/app/components/UI/InfoRow/InfoRow.stories.tsx b/app/components/UI/InfoRow/InfoRow.stories.tsx new file mode 100644 index 00000000000..ebc368e8fd8 --- /dev/null +++ b/app/components/UI/InfoRow/InfoRow.stories.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { StyleProp, Text, TextStyle, View } from 'react-native'; + +import InfoRow from './InfoRow'; +import InfoSection from './InfoSection'; + +const style = { + container: { padding: 8 }, + title: { marginTop: 20, fontSize: 20, fontWeight: '700' }, +}; + +storiesOf('App Components / InfoRow', module) + .addDecorator((getStory) => getStory()) + .add('Default', () => ( + + }>Simple Info Row + + Value-Text + + }>Value wrapped + + + Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text + Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text + Value-Text Value-Text Value-Text Value-Text + + + + )); diff --git a/app/components/UI/InfoRow/InfoRow.test.tsx b/app/components/UI/InfoRow/InfoRow.test.tsx new file mode 100644 index 00000000000..96f1fc93ad2 --- /dev/null +++ b/app/components/UI/InfoRow/InfoRow.test.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react-native'; + +import InfoRow from './index'; + +describe('InfoRow', () => { + it('should match snapshot for simple text value', async () => { + const container = render(Value-Text); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/InfoRow/InfoRow.tsx b/app/components/UI/InfoRow/InfoRow.tsx new file mode 100644 index 00000000000..ddeff5c845b --- /dev/null +++ b/app/components/UI/InfoRow/InfoRow.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +import { useTheme } from '../../../util/theme'; +import createStyles from './style'; + +interface InfoRowProps { + label: string; + children: React.ReactNode | string; + tooltip?: string; +} + +const InfoRow = ({ label, children }: InfoRowProps) => { + const { colors } = useTheme(); + + const styles = createStyles(colors); + + return ( + + {label} + {typeof children === 'string' ? ( + {children} + ) : ( + children + )} + + ); +}; + +export default InfoRow; diff --git a/app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx b/app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx new file mode 100644 index 00000000000..b46df49d5d0 --- /dev/null +++ b/app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Text, View } from 'react-native'; +import { render } from '@testing-library/react-native'; + +import InfoSection from './index'; + +describe('InfoSection', () => { + it('should match snapshot for simple text value', async () => { + const container = render( + + + Test + + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/InfoRow/InfoSection/InfoSection.tsx b/app/components/UI/InfoRow/InfoSection/InfoSection.tsx new file mode 100644 index 00000000000..07c9e04c672 --- /dev/null +++ b/app/components/UI/InfoRow/InfoSection/InfoSection.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { View } from 'react-native'; + +import { useTheme } from '../../../../util/theme'; +import createStyles from './style'; + +interface InfoSectionProps { + children: React.ReactNode | string; +} + +const InfoSection = ({ children }: InfoSectionProps) => { + const { colors } = useTheme(); + const styles = createStyles(colors); + + return {children}; +}; + +export default InfoSection; diff --git a/app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap b/app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap new file mode 100644 index 00000000000..1e393db2e3b --- /dev/null +++ b/app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InfoSection should match snapshot for simple text value 1`] = ` + + + + Test + + + +`; diff --git a/app/components/UI/InfoRow/InfoSection/index.ts b/app/components/UI/InfoRow/InfoSection/index.ts new file mode 100644 index 00000000000..4a396fbea52 --- /dev/null +++ b/app/components/UI/InfoRow/InfoSection/index.ts @@ -0,0 +1 @@ +export { default } from './InfoSection'; diff --git a/app/components/UI/InfoRow/InfoSection/style.ts b/app/components/UI/InfoRow/InfoSection/style.ts new file mode 100644 index 00000000000..6c65859d747 --- /dev/null +++ b/app/components/UI/InfoRow/InfoSection/style.ts @@ -0,0 +1,16 @@ +import { StyleSheet } from 'react-native'; + +import { Colors } from '../../../../util/theme/models'; + +const createStyles = (colors: Colors) => + StyleSheet.create({ + container: { + backgroundColor: colors.background.default, + borderColor: colors.border.muted, + borderRadius: 8, + borderWidth: 1, + padding: 8, + }, + }); + +export default createStyles; diff --git a/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap b/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap new file mode 100644 index 00000000000..0e90ef092b9 --- /dev/null +++ b/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InfoRow should match snapshot for simple text value 1`] = ` + + + label-Key + + + Value-Text + + +`; diff --git a/app/components/UI/InfoRow/index.ts b/app/components/UI/InfoRow/index.ts new file mode 100644 index 00000000000..7e89d7763fe --- /dev/null +++ b/app/components/UI/InfoRow/index.ts @@ -0,0 +1 @@ +export { default } from './InfoRow'; diff --git a/app/components/UI/InfoRow/style.ts b/app/components/UI/InfoRow/style.ts new file mode 100644 index 00000000000..5a3756b5e52 --- /dev/null +++ b/app/components/UI/InfoRow/style.ts @@ -0,0 +1,28 @@ +import { StyleSheet } from 'react-native'; + +import { Colors } from '../../../util/theme/models'; +import { fontStyles } from '../../../styles/common'; + +const createStyles = (colors: Colors) => + StyleSheet.create({ + container: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + flexWrap: 'wrap', + padding: 8, + }, + label: { + color: colors.text.default, + ...fontStyles.bold, + fontSize: 14, + fontWeight: '500', + }, + value: { + color: colors.text.default, + ...fontStyles.normal, + fontSize: 14, + } + }); + +export default createStyles; diff --git a/app/components/Views/confirmations/Confirm/index.tsx b/app/components/Views/confirmations/Confirm/index.ts similarity index 100% rename from app/components/Views/confirmations/Confirm/index.tsx rename to app/components/Views/confirmations/Confirm/index.ts diff --git a/app/components/Views/confirmations/Confirm/style.tsx b/app/components/Views/confirmations/Confirm/style.ts similarity index 100% rename from app/components/Views/confirmations/Confirm/style.tsx rename to app/components/Views/confirmations/Confirm/style.ts diff --git a/app/components/Views/confirmations/components/Confirm/Title/Title.tsx b/app/components/Views/confirmations/components/Confirm/Title/Title.tsx index c674171f14b..3c51ffa5258 100644 --- a/app/components/Views/confirmations/components/Confirm/Title/Title.tsx +++ b/app/components/Views/confirmations/components/Confirm/Title/Title.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React from 'react'; import { Text, View } from 'react-native'; import { TransactionType } from '@metamask/transaction-controller'; @@ -20,11 +20,8 @@ const Title = () => { const { approvalRequest } = useApprovalRequest(); const { colors } = useTheme(); + const title = getTitle(approvalRequest?.type); const styles = createStyles(colors); - const title = useMemo( - () => getTitle(approvalRequest?.type), - [approvalRequest?.type], - ); return ( From a2d80d8610c616a9e5a2749406d91c702140c036 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Mon, 30 Sep 2024 21:04:16 +0530 Subject: [PATCH 2/2] update --- .../UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap | 5 ++++- app/components/UI/InfoRow/style.ts | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap b/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap index 0e90ef092b9..9eacf5d1d95 100644 --- a/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap +++ b/app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap @@ -8,7 +8,8 @@ exports[`InfoRow should match snapshot for simple text value 1`] = ` "flexDirection": "row", "flexWrap": "wrap", "justifyContent": "space-between", - "padding": 8, + "paddingBottom": 8, + "paddingHorizontal": 8, } } > @@ -19,6 +20,7 @@ exports[`InfoRow should match snapshot for simple text value 1`] = ` "fontFamily": "EuclidCircularB-Bold", "fontSize": 14, "fontWeight": "500", + "marginTop": 8, } } > @@ -31,6 +33,7 @@ exports[`InfoRow should match snapshot for simple text value 1`] = ` "fontFamily": "EuclidCircularB-Regular", "fontSize": 14, "fontWeight": "400", + "marginTop": 8, } } > diff --git a/app/components/UI/InfoRow/style.ts b/app/components/UI/InfoRow/style.ts index 5a3756b5e52..e7990c6c7ae 100644 --- a/app/components/UI/InfoRow/style.ts +++ b/app/components/UI/InfoRow/style.ts @@ -10,18 +10,21 @@ const createStyles = (colors: Colors) => flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap', - padding: 8, + paddingBottom: 8, + paddingHorizontal: 8, }, label: { color: colors.text.default, ...fontStyles.bold, fontSize: 14, fontWeight: '500', + marginTop: 8, }, value: { color: colors.text.default, ...fontStyles.normal, fontSize: 14, + marginTop: 8, } });