web/ui

.changeset/rude-taxis-raise.md

@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/ui': major
+'node-status': patch
+'minifront': patch
+---
+
+UI: refactor the package to provide better and more clear exports. Includes a readme with setting up the UI package and more storybook stories.

apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx

@@ -1,7 +1,7 @@
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { asValueView } from '@penumbra-zone/getters/equivalent-value';
 import { getDisplayDenomFromView, getEquivalentValues } from '@penumbra-zone/getters/value-view';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 
 export const EquivalentValues = ({ valueView }: { valueView?: ValueView }) => {
   const equivalentValuesAsValueViews = (getEquivalentValues.optional()(valueView) ?? []).map(

apps/minifront/src/components/dashboard/assets-table/index.tsx

@@ -1,5 +1,4 @@
-import { AddressIcon } from '@repo/ui/components/ui/address-icon';
-import { AddressComponent } from '@repo/ui/components/ui/address-component';
+import { AddressComponent, AddressIcon } from '@repo/ui/components/ui/address';
 import {
   Table,
   TableBody,
@@ -8,7 +7,7 @@ import {
   TableHeader,
   TableRow,
 } from '@repo/ui/components/ui/table';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { EquivalentValues } from './equivalent-values';
 import { Fragment } from 'react';
 import { shouldDisplay } from './helpers';

apps/minifront/src/components/header/header.tsx

@@ -1,4 +1,4 @@
-import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status/condensed';
+import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status';
 import { TestnetBanner } from '@repo/ui/components/ui/testnet-banner';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';

apps/minifront/src/components/send/receive.tsx

@@ -1,4 +1,4 @@
-import { SelectAccount } from '@repo/ui/components/ui/select-account';
+import { SelectAccount } from '@repo/ui/components/ui/select';
 import { getAddrByIndex } from '../../fetchers/address';
 
 export const Receive = () => {

apps/minifront/src/components/shared/gas-fee.tsx

@@ -4,7 +4,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1/fee_pb';
 import { SegmentedPicker, SegmentedPickerOption } from '@repo/ui/components/ui/segmented-picker';
 import { InputBlock } from './input-block';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import {
   Metadata,
   ValueView,

apps/minifront/src/components/shared/selectors/asset-selector.tsx

@@ -1,10 +1,10 @@
 import { Dialog, DialogClose, DialogContent, DialogHeader } from '@repo/ui/components/ui/dialog';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 import {
   Metadata,
   ValueView,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { useEffect, useId, useMemo, useState } from 'react';
 import { IconInput } from '@repo/ui/components/ui/icon-input';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';

apps/minifront/src/components/shared/selectors/balance-item.tsx

@@ -4,8 +4,8 @@ import { getMetadataFromBalancesResponseOptional } from '@penumbra-zone/getters/
 import { useMemo } from 'react';
 import { DialogClose } from '@repo/ui/components/ui/dialog';
 import { cn } from '@repo/ui/lib/utils';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 
 interface BalanceItemProps {
   asset: BalanceOrMetadata;

apps/minifront/src/components/shared/selectors/balance-selector.tsx

@@ -2,7 +2,7 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { useId, useState } from 'react';
 import { IconInput } from '@repo/ui/components/ui/icon-input';
 import { Dialog, DialogContent, DialogHeader } from '@repo/ui/components/ui/dialog';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { Box } from '@repo/ui/components/ui/box';
 import { motion } from 'framer-motion';

apps/minifront/src/components/staking/account/delegation-value-view/index.tsx

@@ -1,6 +1,6 @@
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { ValidatorInfoComponent } from './validator-info-component';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { StakingActions } from './staking-actions';
 import { memo, useMemo } from 'react';
 import {

apps/minifront/src/components/staking/account/delegation-value-view/validator-info-component.tsx

@@ -13,7 +13,7 @@ import {
 } from '@penumbra-zone/getters/validator-info';
 import { calculateCommissionAsPercentage } from '@penumbra-zone/types/staking';
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 
 /**
  * Renders a single `ValidatorInfo`: its name and identity key,

apps/minifront/src/components/staking/account/header/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@repo/ui/components/ui/button';
 import { Card, CardContent } from '@repo/ui/components/ui/card';
 import { AccountSwitcher } from '@repo/ui/components/ui/account-switcher';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { Stat } from './stat';
 import { AllSlices } from '../../../../state';
 import { UnbondingTokens } from './unbonding-tokens';

apps/minifront/src/components/staking/account/header/unbonding-tokens.tsx

@@ -9,7 +9,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from '@repo/ui/components/ui/tooltip';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { ReactNode } from 'react';
 import { zeroValueView } from '../../../../utils/zero-value-view';
 

apps/minifront/src/components/swap/auction-list/filters.tsx

@@ -1,7 +1,7 @@
 import { ListFilter } from 'lucide-react';
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
-import { PopoverMenu, PopoverMenuItem } from '@repo/ui/components/ui/popover-menu';
+import { PopoverMenu, PopoverMenuItem } from '@repo/ui/components/ui/popover';
 import type { Filter as TFilter } from '../../../state/swap/dutch-auction';
 
 const filtersSelector = (state: AllSlices) => ({

apps/minifront/src/components/swap/swap-form/simulate-swap-result/index.tsx

@@ -1,4 +1,4 @@
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { PriceImpact } from './price-impact';
 import { motion } from 'framer-motion';
 import { SimulateSwapResult as TSimulateSwapResult } from '../../../../state/swap';

apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx

@@ -4,7 +4,7 @@ import {
   Metadata,
   ValueView,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { ArrowDown, ArrowUp } from 'lucide-react';
 
 export const Traces = ({

apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx

@@ -5,7 +5,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { SwapExecution_Trace } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { Price } from './price';
 
 const getValueView = (metadataByAssetId: Record<string, Metadata>, { amount, assetId }: Value) =>

apps/minifront/src/components/swap/unclaimed-swaps.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 import { AllSlices } from '../../state';
 import { useUnclaimedSwaps } from '../../state/unclaimed-swaps';
 import { getSwapRecordCommitment } from '@penumbra-zone/getters/swap-record';

apps/minifront/src/components/tx-details/tx-viewer.tsx

@@ -1,5 +1,5 @@
 import { JsonViewer } from '@repo/ui/components/ui/json-viewer';
-import { TransactionViewComponent } from '@repo/ui/components/ui/tx/view/transaction';
+import { TransactionViewComponent } from '@repo/ui/components/ui/tx';
 import { TransactionInfo } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { useState } from 'react';

packages/ui/components/ui/account-switcher.test.tsx → packages/ui/components/ui/account-switcher/account-switcher.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { AccountSwitcher } from './account-switcher';
+import { AccountSwitcher } from '.';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('<AccountSwitcher />', () => {

packages/ui/components/ui/account-switcher.tsx → packages/ui/components/ui/account-switcher/index.tsx

@@ -1,8 +1,8 @@
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { Input } from './input';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Input } from '../input';
 
 const MAX_INDEX = 2 ** 32;
 

packages/ui/components/ui/address-view/address-view.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddressViewComponent } from '.';
+import {
+  Address,
+  AddressIndex,
+  AddressView,
+  AddressView_Decoded,
+} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
+import { addressFromBech32m } from '@penumbra-zone/bech32m/penumbra';
+
+const meta: Meta<typeof AddressViewComponent> = {
+  component: AddressViewComponent,
+  title: 'AddressViewComponent',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressViewComponent>;
+
+const EXAMPLE_VIEW = new AddressView({
+  addressView: {
+    case: 'decoded',
+
+    value: new AddressView_Decoded({
+      address: new Address({ inner: new Uint8Array(80) }),
+      index: new AddressIndex({
+        account: 0,
+        randomizer: new Uint8Array([0, 0, 0]),
+      }),
+    }),
+  },
+});
+
+const EXAMPLE_VIEW_OPAQUE = new AddressView({
+  addressView: {
+    case: 'opaque',
+    value: {
+      address: addressFromBech32m(
+        'penumbra1e8k5cyds484dxvapeamwveh5khqv4jsvyvaf5wwxaaccgfghm229qw03pcar3ryy8smptevstycch0qk3uu0rgkvtjpxy3cu3rjd0agawqtlz6erev28a6sg69u7cxy0t02nd4',
+      ),
+    },
+  },
+});
+
+export const Decoded: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+  },
+};
+
+export const Copiable: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+    copyable: true,
+  },
+};
+
+export const Opaque: Story = {
+  args: {
+    view: EXAMPLE_VIEW_OPAQUE,
+  },
+};

packages/ui/components/ui/tx/view/address-view.test.tsx → packages/ui/components/ui/address-view/address-view.test.tsx

@@ -4,7 +4,7 @@ import {
   AddressView,
   AddressView_Decoded,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { AddressViewComponent } from './address-view';
+import { AddressViewComponent } from '.';
 import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 

packages/ui/components/ui/tx/view/address-view.tsx → packages/ui/components/ui/address-view/index.tsx

@@ -1,7 +1,7 @@
-import { AddressIcon } from '../../address-icon';
+import { AddressIcon } from '../address/address-icon';
 import { AddressView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { CopyToClipboardIconButton } from '../../copy-to-clipboard-icon-button';
-import { AddressComponent } from '../../address-component';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
+import { AddressComponent } from '../address/address-component';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
 interface AddressViewProps {

packages/ui/components/ui/address-component.tsx → packages/ui/components/ui/address/address-component.tsx

@@ -1,7 +1,7 @@
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressComponentProps {
+export interface AddressComponentProps {
   address: Address;
   ephemeral?: boolean;
 }

packages/ui/components/ui/address-icon.tsx → packages/ui/components/ui/address/address-icon.tsx

@@ -1,8 +1,8 @@
-import { Identicon } from './identicon';
+import { Identicon } from '../identicon';
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressIconProps {
+export interface AddressIconProps {
   address: Address;
   size: number;
 }

packages/ui/components/ui/address/index.tsx

@@ -0,0 +1,2 @@
+export { AddressIcon, type AddressIconProps } from './address-icon';
+export { AddressComponent, type AddressComponentProps } from './address-component';

packages/ui/components/ui/asset-icon/asset-icon.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetIcon } from '.';
+import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+
+const meta: Meta<typeof AssetIcon> = {
+  component: AssetIcon,
+  title: 'AssetIcon',
+  tags: ['autodocs'],
+};
+export default meta;
+
+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',
+    },
+  ],
+});
+
+export const Small: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'xs',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'lg',
+  },
+};

packages/ui/components/ui/tx/view/asset-icon/index.tsx → packages/ui/components/ui/asset-icon/index.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { Identicon } from '../../../identicon';
-import { cn } from '../../../../../lib/utils';
+import { Identicon } from '../identicon';
+import { cn } from '../../../lib/utils';
 import { DelegationTokenIcon } from './delegation-token-icon';
 import { getDisplay } from '@penumbra-zone/getters/metadata';
 import { assetPatterns } from '@penumbra-zone/types/assets';

packages/ui/components/ui/auction-id-component.tsx → packages/ui/components/ui/auction-id-component/index.tsx

@@ -1,4 +1,4 @@
-import { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
 import { useMemo } from 'react';
 import { AuctionId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
 import { bech32mAuctionId, PENUMBRA_BECH32M_AUCTION_PREFIX } from '@penumbra-zone/bech32m/pauctid';

packages/ui/components/ui/avatar/avatar.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar, AvatarImage } from '.';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  title: 'Avatar',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+const EXAMPLE_URL =
+  'https://images.unsplash.com/photo-1473830394358-91588751b241?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+export const Full: Story = {
+  args: {},
+  render: args => {
+    return (
+      <Avatar {...args}>
+        <AvatarImage src={EXAMPLE_URL} />
+      </Avatar>
+    );
+  },
+};

packages/ui/components/ui/avatar.tsx → packages/ui/components/ui/avatar/index.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,