ui package parity with web

packages/ui/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @penumbra-zone/ui
 
+## 5.0.0
+
+### Minor Changes
+
+- d8825f9: UI: add `compact` prop to render a minimalistic version of the AccountSwitcher component.
+
+  Minifront: use AccountSwitcher in the IBC-in form
+
+### Patch Changes
+
+- f5c511e: Fix a few layout issues with the header
+- Updated dependencies [9b3f561]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+
+## 4.0.0
+
+### Major Changes
+
+- f067fab: reconfigure all package builds
+
+### Minor Changes
+
+- 1ee18e0: relocate navigationmenu into minifront
+
+### Patch Changes
+
+- Updated dependencies [f067fab]
+  - @repo/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+
+## 3.5.0
+
+### Minor Changes
+
+- 6b78e22: Tweaks to the auction UI; create a new PopoverMenu component
+
+### Patch Changes
+
+- Updated dependencies [a75256f]
+- Updated dependencies [468ecc7]
+- Updated dependencies [a75256f]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+  - @penumbra-zone/[email protected]
+
 ## 3.4.0
 
 ### Minor Changes

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

@@ -14,6 +14,7 @@ export const AccountSwitcher = ({
   account,
   onChange,
   filter,
+  compact,
 }: {
   account: number;
   onChange: (account: number) => void;
@@ -22,6 +23,8 @@ export const AccountSwitcher = ({
    * options. No need to sort them, as the component will do that for you.
    */
   filter?: number[];
+  /** If true, renders smaller selector */
+  compact?: boolean;
 }) => {
   const [inputCharWidth, setInputCharWidth] = useState(1);
 
@@ -59,6 +62,8 @@ export const AccountSwitcher = ({
   return (
     <div className='flex items-center justify-between'>
       <Button
+        size={compact ? 'sm' : 'default'}
+        type='button'
         variant='ghost'
         className={cn('hover:bg-inherit hover:text-slate-400', account === 0 && 'cursor-default')}
         disabled={!previousButtonEnabled}
@@ -67,11 +72,16 @@ export const AccountSwitcher = ({
           aria-label='Previous account'
           role='button'
           onClick={handleClickPrevious}
-          className='size-6 hover:cursor-pointer'
+          className={cn(compact ? 'size-4' : 'size-6', 'hover:cursor-pointer')}
         />
       </Button>
-      <div className='select-none text-center font-headline text-xl font-semibold leading-[30px]'>
-        <div className='flex flex-row flex-wrap items-end gap-[6px]'>
+      <div
+        className={cn(
+          compact ? 'text-base' : 'font-headline text-xl',
+          'select-none text-center font-semibold leading-[30px]',
+        )}
+      >
+        <label className='flex flex-row flex-wrap items-end gap-[6px]'>
           <span>Account</span>
           <div className='flex items-end gap-0'>
             <p>#</p>
@@ -81,7 +91,10 @@ export const AccountSwitcher = ({
                 aria-disabled={!!filter}
                 variant='transparent'
                 type='number'
-                className='mb-[3px] h-6 py-[2px] font-headline text-xl font-semibold leading-[30px]'
+                className={cn(
+                  compact ? 'text-base' : 'font-headline text-xl',
+                  'mb-[3px] h-6 py-[2px] font-semibold leading-[30px]',
+                )}
                 onChange={e => {
                   /**
                    * Don't allow manual account number entry when there's a
@@ -104,9 +117,11 @@ export const AccountSwitcher = ({
               />
             </div>
           </div>
-        </div>
+        </label>
       </div>
       <Button
+        size={compact ? 'sm' : 'default'}
+        type='button'
         variant='ghost'
         className={cn(
           'hover:bg-inherit hover:text-slate-400',
@@ -118,7 +133,7 @@ export const AccountSwitcher = ({
           aria-label='Next account'
           role='button'
           onClick={handleClickNext}
-          className='size-6 hover:cursor-pointer'
+          className={cn(compact ? 'size-4' : 'size-6', 'hover:cursor-pointer')}
         />
       </Button>
     </div>

packages/ui/components/ui/box.tsx

@@ -1,8 +1,8 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import { motion } from 'framer-motion';
 import { PropsWithChildren, ReactNode } from 'react';
-import { RESOLVED_TAILWIND_CONFIG } from '@repo/tailwind-config/resolved-tailwind-config';
 import { cn } from '../../lib/utils';
+import { RESOLVED_TAILWIND_CONFIG } from '@repo/tailwind-config/resolved-tailwind-config';
 
 const variants = cva('rounded-lg border bg-background', {
   variants: {
@@ -17,7 +17,6 @@ const variants = cva('rounded-lg border bg-background', {
       error: 'border-red',
     },
     overflow: {
-      hidden: 'overflow-hidden',
       xHidden: 'overflow-x-hidden',
     },
   },

packages/ui/components/ui/dutch-auction-component/expanded-details/index.tsx

@@ -10,6 +10,7 @@ import { getPrice } from './get-price';
 import { getDisplayDenomExponent } from '@penumbra-zone/getters/metadata';
 import { cn } from '../../../../lib/utils';
 import { AuctionIdComponent } from '../../auction-id-component';
+import { motion } from 'framer-motion';
 
 export const ExpandedDetails = ({
   auctionId,
@@ -114,11 +115,11 @@ const Row = ({
   children: ReactNode;
   highlight?: boolean;
 }) => (
-  <div className='flex items-center justify-between'>
+  <motion.div layout className='flex items-center justify-between'>
     <span className={cn('font-mono text-nowrap', !highlight && 'text-muted-foreground')}>
       {label}
     </span>
     <Separator />
     <span className={cn('overflow-hidden', !highlight && 'text-muted-foreground')}>{children}</span>
-  </div>
+  </motion.div>
 );

packages/ui/components/ui/network.stories.tsx

@@ -13,7 +13,6 @@ type Story = StoryObj<typeof Network>;
 export const Basic: Story = {
   args: {
     name: 'penumbra-testnet-deimos-6',
-    connectIndicator: true,
     href: 'https://app.testnet.penumbra.zone',
   },
 };

packages/ui/components/ui/popover-menu.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import { PopoverMenu, PopoverMenuItem } from './popover-menu';
+import { Button } from './button';
+
+const meta: Meta<typeof PopoverMenu> = {
+  component: PopoverMenu,
+  title: 'PopoverMenu',
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: { control: false },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof PopoverMenu>;
+
+export const Basic: Story = {
+  args: {
+    items: [
+      { label: 'Puppies', value: 'puppies' },
+      { label: 'Kittens', value: 'kittens' },
+      { label: 'Bunnies', value: 'bunnies' },
+    ] satisfies PopoverMenuItem<string>[],
+    value: 'puppies',
+    trigger: <Button>Open popover menu</Button>,
+  },
+
+  render: function Render({ items, trigger, value }) {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <PopoverMenu
+        items={items}
+        value={value}
+        onChange={value => updateArgs({ value })}
+        trigger={trigger}
+      />
+    );
+  },
+};

packages/ui/components/ui/popover-menu.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './popover';
+import { Check } from 'lucide-react';
+
+export interface PopoverMenuItem<ValueType extends { toString: () => string }> {
+  label: string;
+  value: ValueType;
+}
+
+/**
+ * A popover that contains a menu.
+ *
+ * @example
+ * ```tsx
+ * <PopoverMenu
+ *   items={filterOptions}
+ *   value={filter}
+ *   onChange={setFilter}
+ *   trigger={<ListFilter size={16} />}
+ * />
+ * ```
+ */
+export const PopoverMenu = <ValueType extends { toString: () => string }>({
+  items,
+  value,
+  onChange,
+  trigger,
+}: {
+  items: PopoverMenuItem<ValueType>[];
+  value: ValueType;
+  onChange: (newValue: ValueType) => void;
+  trigger: ReactNode;
+}) => {
+  return (
+    <Popover>
+      <PopoverTrigger>{trigger}</PopoverTrigger>
+
+      <PopoverContent>
+        <div className='flex flex-col gap-2'>
+          {items.map(item => (
+            <PopoverClose key={item.value.toString()}>
+              <div
+                role='button'
+                onClick={() => onChange(item.value)}
+                className='flex items-center gap-2'
+              >
+                {value === item.value ? <Check size={16} /> : <div className='size-4' />}
+                {item.label}
+              </div>
+            </PopoverClose>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

packages/ui/components/ui/popover.tsx

@@ -8,6 +8,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -27,4 +29,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverClose, PopoverContent };

packages/ui/components/ui/slider/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import { Slider } from '.';
+
+const meta: Meta<typeof Slider> = {
+  component: Slider,
+  title: 'Slider',
+  tags: ['autodocs'],
+  argTypes: {
+    thumbTooltip: { control: false },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Basic: Story = {
+  args: {
+    max: 10,
+    min: 1,
+    step: 1,
+    value: [1, 2],
+    segmented: false,
+    thumbTooltip: value => `Current value: ${value}`,
+  },
+
+  render: function Render(props) {
+    const [, updateArgs] = useArgs();
+
+    const onValueChange = (value: number[]) => updateArgs({ value });
+
+    return <Slider {...props} onValueChange={onValueChange} />;
+  },
+};