From 2f76847e00a8feba0f39e40e7ae9d3993ce870a7 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Mon, 19 Aug 2024 20:37:33 +0800 Subject: [PATCH] Migrated the design system to Radix (#20244) ref DES-331 --- apps/admin-x-demo/src/ListPage.tsx | 2 +- apps/admin-x-design-system/package.json | 10 + .../src/assets/icons/hyperlink-circle.svg | 2 +- .../src/global/Avatar.tsx | 27 +- .../src/global/Button.tsx | 9 +- .../src/global/Menu.stories.tsx | 4 +- .../admin-x-design-system/src/global/Menu.tsx | 2 +- .../src/global/Popover.stories.tsx | 43 +++ .../src/global/Popover.tsx | 84 +---- .../src/global/Separator.tsx | 7 +- .../src/global/SortMenu.tsx | 2 +- .../src/global/TabView.stories.tsx | 12 + .../src/global/TabView.tsx | 77 ++-- .../src/global/Tooltip.stories.tsx | 8 +- .../src/global/Tooltip.tsx | 26 +- .../src/global/form/Checkbox.tsx | 30 +- .../src/global/form/Radio.tsx | 21 +- .../src/global/form/TextArea.tsx | 41 ++- .../src/global/form/TextField.tsx | 33 +- .../src/global/form/Toggle.tsx | 54 +-- .../src/global/modal/Modal.tsx | 2 +- .../settings/advanced/HistoryModal.tsx | 2 +- .../settings/general/UserDetailModal.tsx | 4 +- .../settings/growth/offers/OffersIndex.tsx | 4 +- .../site/theme/AdvancedThemeSettings.tsx | 2 +- .../test/acceptance/advanced/history.test.ts | 8 +- .../acceptance/general/users/actions.test.ts | 2 +- .../acceptance/general/users/invite.test.ts | 6 +- .../acceptance/general/users/roles.test.ts | 4 +- .../acceptance/site/announcementbar.test.ts | 2 +- yarn.lock | 338 ++++++++++++++++++ 31 files changed, 618 insertions(+), 250 deletions(-) diff --git a/apps/admin-x-demo/src/ListPage.tsx b/apps/admin-x-demo/src/ListPage.tsx index 9a075bc08e..5432c8f570 100644 --- a/apps/admin-x-demo/src/ListPage.tsx +++ b/apps/admin-x-demo/src/ListPage.tsx @@ -27,7 +27,7 @@ const ListPage = () => { label: 'Open Rate' } ]} - position="left" + position="start" onDirectionChange={() => {}} onSortChange={() => {}} />, diff --git a/apps/admin-x-design-system/package.json b/apps/admin-x-design-system/package.json index 10e0607808..c5193ab9cf 100644 --- a/apps/admin-x-design-system/package.json +++ b/apps/admin-x-design-system/package.json @@ -31,6 +31,7 @@ "@storybook/addon-essentials": "7.6.20", "@storybook/addon-interactions": "7.6.20", "@storybook/addon-links": "7.6.20", + "@radix-ui/react-tooltip": "^1.0.7", "@storybook/addon-styling": "1.3.7", "@storybook/blocks": "7.6.20", "@storybook/react": "7.6.20", @@ -60,6 +61,15 @@ "@dnd-kit/core": "6.1.0", "@dnd-kit/sortable": "7.0.2", "@ebay/nice-modal-react": "1.2.13", + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-form": "^0.0.3", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-radio-group": "^1.1.3", + "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.7", "@sentry/react": "7.119.0", "@tailwindcss/forms": "0.5.7", "@tailwindcss/line-clamp": "0.4.4", diff --git a/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg b/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg index 54cb97d847..86106cffb9 100644 --- a/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg +++ b/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg @@ -1 +1 @@ - \ No newline at end of file +Hyperlink Circle Streamline Icon: https://streamlinehq.com diff --git a/apps/admin-x-design-system/src/global/Avatar.tsx b/apps/admin-x-design-system/src/global/Avatar.tsx index 07b1c26377..88e7553458 100644 --- a/apps/admin-x-design-system/src/global/Avatar.tsx +++ b/apps/admin-x-design-system/src/global/Avatar.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {ReactComponent as UserIcon} from '../assets/icons/single-user-fill.svg'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl'; @@ -44,21 +45,17 @@ const Avatar: React.FC = ({image, label, labelColor, bgColor, size, break; } - if (image) { - return ( - - ); - } else if (label) { - return ( -
{label}
- ); - } else { - return ( -
- -
- ); - } + return ( + + {image ? + : + {label} + } + + + + + ); }; export default Avatar; diff --git a/apps/admin-x-design-system/src/global/Button.tsx b/apps/admin-x-design-system/src/global/Button.tsx index 2464e98f15..a3cd14da59 100644 --- a/apps/admin-x-design-system/src/global/Button.tsx +++ b/apps/admin-x-design-system/src/global/Button.tsx @@ -30,7 +30,7 @@ export interface ButtonProps extends Omit, 'label' testId?: string; } -const Button: React.FC = ({ +const Button: React.FC = React.forwardRef(({ testId, size = 'md', label = '', @@ -51,7 +51,7 @@ const Button: React.FC = ({ outlineOnMobile = false, onClick, ...props -}) => { +}, ref) => { if (!color) { color = 'clear'; } @@ -155,9 +155,12 @@ const Button: React.FC = ({ disabled: disabled, type: 'button', onClick: onClick, + ref: ref, ...props}, buttonChildren); return buttonElement; -}; +}); + +Button.displayName = 'Button'; export default Button; diff --git a/apps/admin-x-design-system/src/global/Menu.stories.tsx b/apps/admin-x-design-system/src/global/Menu.stories.tsx index d6c4a568ba..77d5373f6f 100644 --- a/apps/admin-x-design-system/src/global/Menu.stories.tsx +++ b/apps/admin-x-design-system/src/global/Menu.stories.tsx @@ -24,7 +24,7 @@ export const Default: Story = { args: { trigger: , items: items, - position: 'left' + position: 'start' }, decorators: [ ThisStory => ( @@ -37,7 +37,7 @@ export const Right: Story = { args: { trigger: , items: items, - position: 'right' + position: 'end' }, decorators: [ ThisStory => ( diff --git a/apps/admin-x-design-system/src/global/Menu.tsx b/apps/admin-x-design-system/src/global/Menu.tsx index 480604eacc..c9a99e7372 100644 --- a/apps/admin-x-design-system/src/global/Menu.tsx +++ b/apps/admin-x-design-system/src/global/Menu.tsx @@ -20,7 +20,7 @@ const Menu: React.FC = ({ trigger, triggerButtonProps, items, - position = 'left' + position = 'start' }) => { if (!trigger) { trigger = + {(typeof counter === 'number') && {counter}} + ); }; @@ -71,7 +71,6 @@ export const TabList: React.FC = ({ handleTabChange, border, buttonBorder, - selectedTab, topRightContent }) => { const containerClasses = clsx( @@ -82,24 +81,26 @@ export const TabList: React.FC = ({ border && 'border-b border-grey-300 dark:border-grey-900' ); return ( -
- {tabs.map(tab => ( -
- -
- ))} - {topRightContent !== null ? -
{topRightContent}
: - null - } -
+ +
+ {tabs.map(tab => ( +
+ +
+ ))} + {topRightContent !== null ? +
{topRightContent}
: + null + } +
+ ); }; @@ -140,7 +141,7 @@ function TabView({ }; return ( -
+ ({ /> {tabs.map((tab) => { return ( - <> - {tab.contents && -
-
{tab.contents}
-
- } - + +
{tab.contents}
+ ); })} -
+ ); }; diff --git a/apps/admin-x-design-system/src/global/Tooltip.stories.tsx b/apps/admin-x-design-system/src/global/Tooltip.stories.tsx index ca6669aaa4..91f7f43dc6 100644 --- a/apps/admin-x-design-system/src/global/Tooltip.stories.tsx +++ b/apps/admin-x-design-system/src/global/Tooltip.stories.tsx @@ -36,7 +36,7 @@ export const Left: Story = { args: { content: 'Hello tooltip on the left', children: