Skip to content

Conversation

@georgewrmarshall
Copy link
Contributor

Description

This PR adds a new WalletHome example story based on the home page redesign to the Storybook React Native app to:

  • Showcase how various design system monorepo components can be combined in a real-world interface
  • Provide a comprehensive testing environment for:
    • Accessibility benchmarks and testing
    • Performance benchmarks and testing
    • Design and interaction testing
    • Design token color updates and testing
    • Animation testing
  • Allow engineers and designers to evaluate components in a realistic environment
  • Demonstrate proper component composition and responsive design patterns

Related issues

Part of: #654

Manual testing steps

  1. Run the Storybook React Native app (yarn storybook:ios)
  2. Navigate to "Examples/Wallet Home" in the sidebar
  3. Verify that the wallet home example appears correctly with all components rendered properly

Screenshots/Recordings

Before

N/A - New feature

After

after.mov

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

@georgewrmarshall georgewrmarshall self-assigned this May 24, 2025
@georgewrmarshall georgewrmarshall changed the title Fix/dsrn example screen fix: dsrn example wallet screen May 24, 2025
Comment on lines -4 to +5
'../../../packages/design-system-react-native/src/**/*.stories.@(js|jsx|ts|tsx)',
'../../../packages/design-system-react-native/src/**/!(temp-components)/*.stories.@(js|jsx|ts|tsx)',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating storybook react native to include stories from apps/storybook-react-native

} from "@storybook/react-native";

global.STORIES = [
{
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating storybook requires using yarn prestorybook

@georgewrmarshall georgewrmarshall force-pushed the fix/dsrn-example-screen branch from 5f68ee5 to a4449de Compare June 2, 2025 09:15
@github-actions
Copy link
Contributor

github-actions bot commented Jun 2, 2025

📖 Storybook Preview

@georgewrmarshall georgewrmarshall force-pushed the fix/dsrn-example-screen branch from a4449de to f1bdeaf Compare June 2, 2025 09:25
export type { AvatarAccountProps } from './AvatarAccount';

export { AvatarBase, AvatarBaseSize } from './AvatarBase';
export { AvatarBase, AvatarBaseSize, AvatarBaseShape } from './AvatarBase';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing AvatarBaseShape enum export

@github-actions
Copy link
Contributor

github-actions bot commented Jun 2, 2025

📖 Storybook Preview

Comment on lines +98 to +101
<View style={tw`flex-col items-center justify-center`}>
<Icon name={IconName.Bank} />
<Text fontWeight={FontWeight.Medium}>Buy/Sell</Text>
</View>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we had access to the content wrapping View via a prop object we could use that instead but this works

return (
<ScrollView style={tw`bg-background-default flex-1`}>
{/* Container */}
<View style={tw`bg-background-default w-full py-4`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to allow for bg-default and other shorthand design token classnames similar to react

@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 2, 2025 09:29
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner June 2, 2025 09:29
@github-actions
Copy link
Contributor

github-actions bot commented Jun 2, 2025

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit d033908 into main Jun 2, 2025
37 checks passed
@georgewrmarshall georgewrmarshall deleted the fix/dsrn-example-screen branch June 2, 2025 21:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants