web/ui #1342
web/ui #1342
Conversation
🦋 Changeset detectedLatest commit: e9f30c5 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| export default { | ||
| content: [ | ||
| // Parses the classes of the UI components | ||
| './node_modules/@penumbra-zone/ui/**/*.js', | ||
| ], | ||
| }; |
There was a problem hiding this comment.
Info on how to consume the UI package externally. More on "why" here: prax-wallet/prax#45 (comment)
| "./components/ui/*": { | ||
| "default": "./dist/components/ui/*/index.js", | ||
| "types": "./dist/components/ui/*/index.d.ts" | ||
| }, |
There was a problem hiding this comment.
Now all components have their own directory and an index.tsx file – all imports should look like import {} from '@penumbra-zone/ui/components/ui/component-name.
I really wish to remove the components/ui part of the import but it would make the PR even bigger.
| @@ -4,7 +4,7 @@ import { ActionViewComponent } from './action-view'; | |||
| import { ViewBox, ViewSection } from './viewbox'; | |||
| import { getStakingTokenMetaData } from './registry'; | |||
| import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb'; | |||
| import { ValueViewComponent } from './value'; | |||
| import { ValueViewComponent } from '../value'; | |||
|
|
|||
| export const TransactionViewComponent = ({ txv }: { txv: TransactionView }) => { | |||
There was a problem hiding this comment.
TransactionViewComponent is the only transaction-related component that was used by both Minifront and Prax inside the monstrous tx directory. I extracted other components and cleaned the directory up a little
| type Story = StoryObj<typeof AssetIcon>; | ||
|
|
||
| const EXAMPLE_METADATA = new Metadata({ | ||
| base: 'upenumbra', | ||
| display: 'penumbra', | ||
| symbol: 'UM', | ||
| images: [ | ||
| { | ||
| svg: 'https://raw.githubusercontent.com/prax-wallet/registry/main/images/um.svg', | ||
| }, | ||
| ], | ||
| }); |
There was a problem hiding this comment.
Most of the components (still not all) have their meaningful Storybook stories
based on prax-wallet/prax#45 (comment), prax won't be externally consuming the ui package, so we should revert back to using |
# Conflicts: # apps/minifront/src/components/shared/selectors/balance-selector.tsx
|
@TalDerei Changed the package name back to repo/ui |
|
LGTM! I think this lays some really nice groundwork prax-wallet/prax#51 is a good follow-up |
The idea of this PR is to prepare the UI package for extraction different components to Minifront and Prax. Here's what's done: