feat(ui): #1703: publish UI library (#1733)

* feat(ui): #1703: update UI package configs to prepare it for publishing

* fix(ui): #1703: fix linting

* chore: add changeset

* feat(ui): #1703: add `dev:pack` command support

* docs(ui): #1703: update readme

.changeset/big-pianos-destroy.md

@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/ui': major
+'node-status': patch
+'minifront': patch
+---
+
+Prepare UI package for publishing to NPM

apps/minifront/package.json

@@ -31,14 +31,14 @@
     "@penumbra-zone/protobuf": "workspace:*",
     "@penumbra-zone/transport-dom": "workspace:*",
     "@penumbra-zone/types": "workspace:*",
+    "@penumbra-zone/ui": "workspace:*",
     "@penumbra-zone/zquery": "workspace:*",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-portal": "^1.0.4",
     "@remix-run/router": "^1.16.1",
-    "@repo/ui": "workspace:*",
     "@tanstack/react-query": "4.36.1",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.1.2",

apps/minifront/postcss.config.js

@@ -1 +1 @@
-export { default } from '@repo/ui/postcss.config.js';
+export { default } from '@penumbra-zone/ui/postcss.config.js';

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

@@ -1,7 +1,7 @@
 import { ValueView } from '@penumbra-zone/protobuf/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/value';
+import { ValueViewComponent } from '@penumbra-zone/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,15 +1,15 @@
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
-import { AddressComponent, AddressIcon } from '@repo/ui/components/ui/address';
-import { Button } from '@repo/ui/components/ui/button';
+import { AddressComponent, AddressIcon } from '@penumbra-zone/ui/components/ui/address';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from '@repo/ui/components/ui/table';
-import { ValueViewComponent } from '@repo/ui/components/ui/value';
+} from '@penumbra-zone/ui/components/ui/table';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
 import { EquivalentValues } from './equivalent-values';
 import { Fragment } from 'react';
 import { PagePath } from '../../metadata/paths';

apps/minifront/src/components/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@repo/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { dashboardTabs, dashboardTabsHelper } from './constants';
 import { Outlet } from 'react-router-dom';
 import { EduInfoCard } from '../shared/edu-panels/edu-info-card';

apps/minifront/src/components/dashboard/transaction-table.tsx

@@ -5,7 +5,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@repo/ui/components/ui/table';
+} from '@penumbra-zone/ui/components/ui/table';
 import { Link } from 'react-router-dom';
 import { shorten } from '@penumbra-zone/types/string';
 import { memo } from 'react';

apps/minifront/src/components/extension-not-connected.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@repo/ui/components/ui/button';
-import { Toaster } from '@repo/ui/components/ui/toaster';
-import { SplashPage } from '@repo/ui/components/ui/splash-page';
-import { errorToast, warningToast } from '@repo/ui/lib/toast/presets';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
+import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
+import { errorToast, warningToast } from '@penumbra-zone/ui/lib/toast/presets';
 import { HeadTag } from './metadata/head-tag';
 
 import { useState } from 'react';

apps/minifront/src/components/extension-not-installed.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@repo/ui/components/ui/button';
-import { SplashPage } from '@repo/ui/components/ui/splash-page';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
 import { HeadTag } from './metadata/head-tag';
 
 const CHROME_EXTENSION_ID = 'lkpmkhpnhknhmibgnmmhdhgdilepfghe';

apps/minifront/src/components/extension-transport-disconnected.tsx

@@ -1,6 +1,6 @@
-import { SplashPage } from '@repo/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
 import { HeadTag } from './metadata/head-tag';
-import { Button } from '@repo/ui/components/ui/button';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
 
 export const ExtensionTransportDisconnected = () => {
   return (

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

@@ -1,6 +1,6 @@
-import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status';
-import { IncompatibleBrowserBanner } from '@repo/ui/components/ui/incompatible-browser-banner';
-import { TestnetBanner } from '@repo/ui/components/ui/testnet-banner';
+import { CondensedBlockSyncStatus } from '@penumbra-zone/ui/components/ui/block-sync-status';
+import { IncompatibleBrowserBanner } from '@penumbra-zone/ui/components/ui/incompatible-browser-banner';
+import { TestnetBanner } from '@penumbra-zone/ui/components/ui/testnet-banner';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getChainId } from '../../fetchers/chain-id';

apps/minifront/src/components/header/menu/desktop-nav.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { usePagePath } from '../../../fetchers/page-path';
 import { dashboardLink, headerLinks } from '../constants';

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

@@ -1,4 +1,4 @@
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import { DesktopNav } from './desktop-nav';
 import { MobileNav } from './mobile-nav';
 import { ProviderMenu } from './provider';

apps/minifront/src/components/header/menu/mobile-nav.tsx

@@ -1,4 +1,9 @@
-import { Sheet, SheetContent, SheetHeader, SheetTrigger } from '@repo/ui/components/ui/sheet';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from '@penumbra-zone/ui/components/ui/sheet';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import { headerLinks } from '../constants';
 import { Link } from 'react-router-dom';

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

@@ -1,4 +1,4 @@
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { getChainId } from '../../../fetchers/chain-id';
 import { useEffect, useState } from 'react';

apps/minifront/src/components/header/menu/tablet-nav.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { usePagePath } from '../../../fetchers/page-path';
 import { dashboardLink, headerLinks } from '../constants';

apps/minifront/src/components/ibc/ibc-in/assets-table.tsx

@@ -8,9 +8,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@repo/ui/components/ui/table';
-import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar';
-import { Identicon } from '@repo/ui/components/ui/identicon';
+} from '@penumbra-zone/ui/components/ui/table';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
 import { LineWave } from 'react-loader-spinner';
 
 export const AssetsTable = () => {

apps/minifront/src/components/ibc/ibc-in/chain-dropdown.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useManager } from '@cosmos-kit/react';
-import { Popover, PopoverContent, PopoverTrigger } from '@repo/ui/components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@penumbra-zone/ui/components/ui/popover';
 import { ChevronsUpDown } from 'lucide-react';
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from '@repo/ui/components/ui/command';
-import { Button } from '@repo/ui/components/ui/button';
+} from '@penumbra-zone/ui/components/ui/command';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
 import { ibcInSelector } from '../../../state/ibc-in';
 import { useStore } from '../../../state';
-import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar';
-import { Identicon } from '@repo/ui/components/ui/identicon';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
 
 export interface ChainInfo {
   chainName: string;

apps/minifront/src/components/ibc/ibc-in/destination-addr.tsx

@@ -1,7 +1,7 @@
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
-import { AccountSwitcher } from '@repo/ui/components/ui/account-switcher';
-import { CopyToClipboard } from '@repo/ui/components/ui/copy-to-clipboard';
+import { AccountSwitcher } from '@penumbra-zone/ui/components/ui/account-switcher';
+import { CopyToClipboard } from '@penumbra-zone/ui/components/ui/copy-to-clipboard';
 import { useEffect } from 'react';
 
 const addrsSelector = ({ ibcIn }: AllSlices) => ({

apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx

@@ -7,11 +7,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@repo/ui/components/ui/select';
-import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar';
-import { Identicon } from '@repo/ui/components/ui/identicon';
+} from '@penumbra-zone/ui/components/ui/select';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
 import { DestinationAddr } from './destination-addr';
-import { Button } from '@repo/ui/components/ui/button';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
 import { LockClosedIcon } from '@radix-ui/react-icons';
 import { NumberInput } from '../../shared/number-input';
 

apps/minifront/src/components/ibc/ibc-in/wallet-addr-card.tsx

@@ -1,4 +1,4 @@
-import { Identicon } from '@repo/ui/components/ui/identicon';
+import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
 
 interface UserInfoProps {
   address: string;

apps/minifront/src/components/ibc/ibc-in/wallet-connect-button.tsx

@@ -1,11 +1,11 @@
 import { WalletStatus } from 'cosmos-kit';
-import { WalletIcon } from '@repo/ui/components/ui/icons/wallet';
+import { WalletIcon } from '@penumbra-zone/ui/components/ui/icons/wallet';
 import { MouseEventHandler } from 'react';
 import { useStore } from '../../../state';
 import { ibcInSelector } from '../../../state/ibc-in';
 
 import { useChainConnector } from './hooks';
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 
 export const ConnectWalletButton = () => {
   const { connect, openView, status } = useChainConnector();

apps/minifront/src/components/ibc/ibc-out/chain-selector.tsx

@@ -4,8 +4,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@repo/ui/components/ui/select';
-import { cn } from '@repo/ui/lib/utils';
+} from '@penumbra-zone/ui/components/ui/select';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import { useState } from 'react';
 import { AllSlices } from '../../../state';
 import { Chain } from '@penumbra-labs/registry';

apps/minifront/src/components/ibc/ibc-out/ibc-out-form.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@repo/ui/components/ui/button';
-import { Input } from '@repo/ui/components/ui/input';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Input } from '@penumbra-zone/ui/components/ui/input';
 import { ChainSelector } from './chain-selector';
 import { useStore } from '../../../state';
 import {

apps/minifront/src/components/ibc/layout.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@repo/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { IbcOutForm } from './ibc-out/ibc-out-form';
 import { InterchainUi } from './ibc-in/interchain-ui';
 import { LongArrowIcon } from './long-arrow';

apps/minifront/src/components/layout.tsx

@@ -1,10 +1,10 @@
 import { Outlet } from 'react-router-dom';
 import { HeadTag } from './metadata/head-tag';
 import { Header } from './header/header';
-import { Toaster } from '@repo/ui/components/ui/toaster';
+import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
 import { Footer } from './footer/footer';
 import { SyncingDialog } from './syncing-dialog';
-import '@repo/ui/styles/globals.css';
+import '@penumbra-zone/ui/styles/globals.css';
 
 export const Layout = () => {
   return (

apps/minifront/src/components/not-found.tsx

@@ -1,4 +1,4 @@
-import { SplashPage } from '@repo/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
 
 export const NotFound = () => {
   return <SplashPage title='404'>That page could not be found. </SplashPage>;

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

@@ -1,4 +1,4 @@
-import { Card } from '@repo/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { sendTabs, sendTabsHelper } from './constants';
 import { SendTab } from './types';
 import { usePagePath } from '../../fetchers/page-path';

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

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

apps/minifront/src/components/send/send-form/index.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@repo/ui/components/ui/button';
-import { Input } from '@repo/ui/components/ui/input';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Input } from '@penumbra-zone/ui/components/ui/input';
 import { useStore } from '../../../state';
 import { sendSelector, sendValidationErrors } from '../../../state/send';
 import { InputBlock } from '../../shared/input-block';

apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx

@@ -1,6 +1,6 @@
-import { Card } from '@repo/ui/components/ui/card';
-import { cn } from '@repo/ui/lib/utils';
-import { GradientHeader } from '@repo/ui/components/ui/gradient-header';
+import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { cn } from '@penumbra-zone/ui/lib/utils';
+import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
 import { EduPanel, eduPanelContent } from './content';
 import { motion } from 'framer-motion';
 

apps/minifront/src/components/shared/error-boundary.tsx

@@ -8,7 +8,7 @@ import { NotFound } from '../not-found';
 import { ExtensionTransportDisconnected } from '../extension-transport-disconnected';
 import { ExtensionNotInstalled } from '../extension-not-installed';
 import { Code, ConnectError } from '@connectrpc/connect';
-import { SplashPage } from '@repo/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
 
 export const ErrorBoundary = () => {
   const error = useRouteError();

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

@@ -1,7 +1,10 @@
 import { Fee, FeeTier_Tier } from '@penumbra-zone/protobuf/penumbra/core/component/fee/v1/fee_pb';
-import { SegmentedPicker, SegmentedPickerOption } from '@repo/ui/components/ui/segmented-picker';
+import {
+  SegmentedPicker,
+  SegmentedPickerOption,
+} from '@penumbra-zone/ui/components/ui/segmented-picker';
 import { InputBlock } from './input-block';
-import { ValueViewComponent } from '@repo/ui/components/ui/value';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
 import { Metadata, ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 
 const FEE_TIER_OPTIONS: SegmentedPickerOption<FeeTier_Tier>[] = [

apps/minifront/src/components/shared/input-block.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import { Validation, validationResult } from './validation-result';
 import { ReactNode } from 'react';
-import { Box } from '@repo/ui/components/ui/box';
+import { Box } from '@penumbra-zone/ui/components/ui/box';
 
 interface InputBlockProps {
   label: string;

apps/minifront/src/components/shared/input-token.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 import { getDisplayDenomExponent } from '@penumbra-zone/getters/metadata';
 import { getMetadataFromBalancesResponseOptional } from '@penumbra-zone/getters/balances-response';
-import { BalanceValueView } from '@repo/ui/components/ui/balance-value-view';
-import { cn } from '@repo/ui/lib/utils';
+import { BalanceValueView } from '@penumbra-zone/ui/components/ui/balance-value-view';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import BalanceSelector from './selectors/balance-selector';
 import { Validation } from './validation-result';
 import { InputBlock } from './input-block';

apps/minifront/src/components/shared/number-input/index.tsx

@@ -1,5 +1,5 @@
 import type { FC, KeyboardEventHandler } from 'react';
-import { Input, InputProps } from '@repo/ui/components/ui/input';
+import { Input, InputProps } from '@penumbra-zone/ui/components/ui/input';
 import { useWheelPrevent } from './use-wheel-prevent';
 
 export interface NumberInputProps extends InputProps {

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

@@ -1,16 +1,21 @@
-import { Dialog, DialogClose, DialogContent, DialogHeader } from '@repo/ui/components/ui/dialog';
-import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+} from '@penumbra-zone/ui/components/ui/dialog';
+import { AssetIcon } from '@penumbra-zone/ui/components/ui/asset-icon';
 import { Metadata, ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@repo/ui/components/ui/value';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
 import { useCallback, useEffect, useId, useMemo, useState } from 'react';
-import { IconInput } from '@repo/ui/components/ui/icon-input';
+import { IconInput } from '@penumbra-zone/ui/components/ui/icon-input';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Box } from '@repo/ui/components/ui/box';
+import { Box } from '@penumbra-zone/ui/components/ui/box';
 import { motion } from 'framer-motion';
 import { metadataBySearch } from './search-filters';
-import { cn } from '@repo/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui/lib/utils';
 import { LoadingIndicator } from './loading-indicator';
-import { Table, TableBody, TableCell, TableRow } from '@repo/ui/components/ui/table';
+import { Table, TableBody, TableCell, TableRow } from '@penumbra-zone/ui/components/ui/table';
 
 interface AssetSelectorProps {
   assets: Metadata[];

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

@@ -5,11 +5,11 @@ import {
   getMetadataFromBalancesResponseOptional,
 } from '@penumbra-zone/getters/balances-response';
 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/asset-icon';
-import { ValueViewComponent } from '@repo/ui/components/ui/value';
-import { TableCell, TableRow } from '@repo/ui/components/ui/table';
+import { DialogClose } from '@penumbra-zone/ui/components/ui/dialog';
+import { cn } from '@penumbra-zone/ui/lib/utils';
+import { AssetIcon } from '@penumbra-zone/ui/components/ui/asset-icon';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
+import { TableCell, TableRow } from '@penumbra-zone/ui/components/ui/table';
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 
 interface BalanceItemProps {