MetaMask / MetaMask/metamask-design-system
Reorganize our demo assets for DSR
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
We need to reorganize our demo assets in the design system to better reflect real-world usage and improve maintainability. This involves two main changes:
1. Moving demo image assets from the component library packages to Storybook applications
2. Replacing Web2 example favicons with Web3 dApp examples that better represent MetaMask's ecosystem
This reorganization will reduce library bloat, prevent potential conflicts, and provide more relevant examples for developers.
### **Technical Details**
Asset Relocation:
- Move all demo images from component library packages to `apps/storybook-react/images/`
- Update all `.stories.tsx` files to reference new asset locations
- Ensure proper static asset configuration in Storybook
Web3 Asset Updates:
- Replace existing Web2 favicon examples (Google, Slack, Zoom) with Web3 dApp icons:
- Uniswap
- OpenSea
- Aave
- ENS
- 1inch
- Organize assets into clear categories:
- `/images/favicons/` - dApp favicons
- `/images/network-icons/` - blockchain networks
- `/images/token-icons/` - cryptocurrency tokens
### **Acceptance Criteria**
- [ ] All demo assets are moved from component library packages to Storybook applications
- [ ] No image assets remain in the component library packages
- [ ] All `.stories.tsx` files are updated to reference new asset locations
- [ ] Storybook configuration is updated to properly serve static assets
- [ ] Web2 favicon examples are replaced with Web3 dApp examples
- [ ] All components using these assets (AvatarFavicon, AvatarNetwork, etc.) work correctly in Storybook
- [ ] Documentation is updated to reflect new asset locations and usage
- [ ] Bundle size of component library is reduced due to removal of demo assets
### **References**
- Related PR discussion: https://github.com/MetaMask/metamask-design-system/pull/558#pullrequestreview-2774497137
- Components affected:
- AvatarFavicon
- AvatarNetwork
- AvatarToken
- AvatarGroup
Contributor guide
Assessment
This issue has not been assessed yet.