From b03d6afa5ee1054ab7fc9dba38e746fc0a5d95fc Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Tue, 18 Jun 2024 13:38:30 +0100 Subject: [PATCH] fix: roll back import of dropdown menu, ref leather-wallet/issues#64 --- package.json | 1 + pnpm-lock.yaml | 35 ++--- src/app/features/settings/settings.tsx | 2 +- .../dropdown-menu-item.layout.tsx | 16 +++ .../dropdown-menu/dropdown-menu.stories.tsx | 47 +++++++ .../dropdown-menu/dropdown-menu.tsx | 127 ++++++++++++++++++ 6 files changed, 211 insertions(+), 17 deletions(-) create mode 100644 src/app/ui/components/dropdown-menu/dropdown-menu-item.layout.tsx create mode 100644 src/app/ui/components/dropdown-menu/dropdown-menu.stories.tsx create mode 100644 src/app/ui/components/dropdown-menu/dropdown-menu.tsx diff --git a/package.json b/package.json index 5e5d80f4450..8bcbf82b9f7 100644 --- a/package.json +++ b/package.json @@ -149,6 +149,7 @@ "@radix-ui/colors": "3.0.0", "@radix-ui/react-avatar": "1.0.4", "@radix-ui/react-dialog": "1.0.5", + "@radix-ui/react-dropdown-menu": "2.0.6", "@radix-ui/react-tabs": "1.0.4", "@radix-ui/react-toast": "1.1.5", "@radix-ui/react-tooltip": "1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1de8b9b07a0..0c42fb18b51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ importers: '@radix-ui/react-dialog': specifier: 1.0.5 version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-dropdown-menu': + specifier: 2.0.6 + version: 2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-tabs': specifier: 1.0.4 version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -18445,7 +18448,7 @@ snapshots: '@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18480,7 +18483,7 @@ snapshots: '@radix-ui/react-aspect-ratio@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -18516,7 +18519,7 @@ snapshots: '@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18590,7 +18593,7 @@ snapshots: '@radix-ui/react-context-menu@2.1.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -18707,7 +18710,7 @@ snapshots: '@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.2.0) @@ -18723,7 +18726,7 @@ snapshots: '@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18777,7 +18780,7 @@ snapshots: '@radix-ui/react-form@0.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18792,7 +18795,7 @@ snapshots: '@radix-ui/react-hover-card@1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18836,7 +18839,7 @@ snapshots: '@radix-ui/react-menu@2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0) @@ -18863,7 +18866,7 @@ snapshots: '@radix-ui/react-menu@2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -18890,7 +18893,7 @@ snapshots: '@radix-ui/react-popover@1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -19014,7 +19017,7 @@ snapshots: '@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -19069,7 +19072,7 @@ snapshots: '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/number': 1.0.1 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) @@ -19147,7 +19150,7 @@ snapshots: '@radix-ui/react-separator@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -19157,7 +19160,7 @@ snapshots: '@radix-ui/react-slider@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/number': 1.0.1 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -19193,7 +19196,7 @@ snapshots: '@radix-ui/react-switch@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1) diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx index 55855a7ef1f..42e38b48180 100644 --- a/src/app/features/settings/settings.tsx +++ b/src/app/features/settings/settings.tsx @@ -7,7 +7,6 @@ import { Flex, Stack, styled } from 'leather-styles/jsx'; import { Caption, - DropdownMenu, ExitIcon, ExpandIcon, ExternalLinkIcon, @@ -36,6 +35,7 @@ import { ThemeDialog } from '@app/features/settings/theme/theme-dialog'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { useHasLedgerKeys, useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors'; import { useCurrentNetworkId } from '@app/store/networks/networks.selectors'; +import { DropdownMenu } from '@app/ui/components/dropdown-menu/dropdown-menu'; import { openFeedbackDialog } from '../feedback-button/feedback-button'; import { extractDeviceNameFromKnownTargetIds } from '../ledger/utils/generic-ledger-utils'; diff --git a/src/app/ui/components/dropdown-menu/dropdown-menu-item.layout.tsx b/src/app/ui/components/dropdown-menu/dropdown-menu-item.layout.tsx new file mode 100644 index 00000000000..183e6275f65 --- /dev/null +++ b/src/app/ui/components/dropdown-menu/dropdown-menu-item.layout.tsx @@ -0,0 +1,16 @@ +import { ReactNode } from 'react'; + +import { Flex } from 'leather-styles/jsx'; + +interface DropdownMenuItemLayoutProps { + contentLeft: ReactNode; + contentRight?: ReactNode; +} +export function DropdownMenuItemLayout({ contentLeft, contentRight }: DropdownMenuItemLayoutProps) { + return ( + + {contentLeft} + {contentRight} + + ); +} diff --git a/src/app/ui/components/dropdown-menu/dropdown-menu.stories.tsx b/src/app/ui/components/dropdown-menu/dropdown-menu.stories.tsx new file mode 100644 index 00000000000..57fbf6bef4e --- /dev/null +++ b/src/app/ui/components/dropdown-menu/dropdown-menu.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HStack, styled } from 'leather-styles/jsx'; + +import { PlaceholderIcon } from '@leather-wallet/ui'; + +import { DropdownMenu as Component, DropdownMenuItem } from './dropdown-menu'; +import { DropdownMenuItemLayout } from './dropdown-menu-item.layout'; + +const items: DropdownMenuItem[] = [{ label: 'Label 1' }, { label: 'Label 2' }]; + +const meta: Meta = { + component: Component.Root, + tags: ['autodocs'], + title: 'DropdownMenu', +}; + +export default meta; +type Story = StoryObj; + +export const DropdownMenu: Story = { + render: () => ( + + + Button + + + + + Label + {items.map(item => ( + + + + {item.label} + + } + /> + + ))} + + + + + ), +}; diff --git a/src/app/ui/components/dropdown-menu/dropdown-menu.tsx b/src/app/ui/components/dropdown-menu/dropdown-menu.tsx new file mode 100644 index 00000000000..56d3d97552f --- /dev/null +++ b/src/app/ui/components/dropdown-menu/dropdown-menu.tsx @@ -0,0 +1,127 @@ +import { ReactNode, forwardRef } from 'react'; + +import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu'; +import { css } from 'leather-styles/css'; +import { type HTMLStyledProps, styled } from 'leather-styles/jsx'; + +import { ChevronDownIcon, Flag, pressableBaseStyles, pressableStyles } from '@leather-wallet/ui'; + +export interface DropdownMenuItem { + iconLeft?: ReactNode; + iconRight?: ReactNode; + label: string; +} +const dropdownButtonStyles = css({ + bg: 'ink.background-primary', + borderRadius: 'xs', + fontWeight: 500, + maxWidth: 'fit-content', + maxHeight: 'fit-content', + px: 'space.04', + py: 'space.03', + textStyle: 'label.02', + userSelect: 'none', + '[data-state=open] &': { bg: 'ink.component-background-pressed' }, +}); + +function Button({ children, ...props }: HTMLStyledProps<'div'>) { + return ( + + }> + {children} + + + ); +} + +const dropdownIconButtonStyles = css({ + _hover: { bg: 'ink.component-background-hover' }, + _focus: { outline: 'none' }, + p: 'space.02', + + '&[data-state=open]': { bg: 'ink.component-background-pressed' }, +}); +const IconButton: typeof RadixDropdownMenu.Trigger = forwardRef((props, ref) => ( + +)); + +const dropdownTriggerStyles = css({ + _focus: { outline: 'none' }, +}); + +const Trigger: typeof RadixDropdownMenu.Trigger = forwardRef((props, ref) => ( + +)); + +const dropdownContentStyles = css({ + alignItems: 'center', + '--base-menu-padding': '0px', + bg: 'ink.background-primary', + borderRadius: 'xs', + boxShadow: + '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)', + p: '0', + willChange: 'transform, opacity', + zIndex: 999, + // _closed: { animation: 'slideDownAndOut 140ms ease-in-out' }, + // _open: { animation: 'slideUpAndFade 140ms ease-in-out' }, +}); +const Content: typeof RadixDropdownMenu.Content = forwardRef(({ className, ...props }, ref) => ( + +)); + +const dropdownMenuLabelStyles = css({ + color: 'ink.text-subdued', + height: 'auto', + px: 'space.03', + py: 'space.02', + textStyle: 'body.02', + width: '100%', +}); +const Label: typeof RadixDropdownMenu.Label = forwardRef((props, ref) => ( + +)); + +const dropdownItemStyles = css({ p: 'space.03' }); +const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => ( + + + +)); + +const dropdownMenuSeparatorStyles = css({ + bg: 'ink.background-primary', + color: 'ink.border-default', + mx: '0px', + my: 'space.03', +}); +const Separator: typeof RadixDropdownMenu.Separator = forwardRef((props, ref) => ( + +)); +const dropdownMenuGroupStyles = css({ + p: 'space.02', +}); +const Group: typeof RadixDropdownMenu.Group = forwardRef((props, ref) => ( + +)); + +export const DropdownMenu = { + Root: RadixDropdownMenu.Root, + Group, + Portal: RadixDropdownMenu.Portal, + Trigger, + Button, + IconButton, + Content, + Label, + Item, + Separator, +};