From 9e09dfaaaac5528ed2020a0fe16301c02f514695 Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Tue, 10 Dec 2024 13:59:27 -0800 Subject: [PATCH] Migrate to React 19, Next 15, & turbopack (#3204) * upgrade to next 15 and react 19 https://nextjs.org/docs/app/building-your-application/upgrading/version-15 * refactor textarea * upgrade to headless-ui 2.2. falsify popper * migrate hovercard to headless wip TODO: uninstall radix * update web/knowledge.md with design system * fix turbopack static analysis warning TP1001 * move dropdown menu to widgets. consolidate icons. * refactor: "sticky format menu" is a dropdown menu * Right align * Better menu semantics (keyboard controls & a11y) * npx update-browserslist-db@latest * replace radix-ui hover card with floating-ui 0.26 --- web/components/answers/answers-panel.tsx | 6 +- .../answers/create-answer-panel.tsx | 4 +- web/components/bet/user-bets-table.tsx | 4 +- .../charts/user-position-search-button.tsx | 107 +- web/components/chat/chat-message.tsx | 6 +- web/components/comments/comment-header.tsx | 4 +- .../comments/dropdown-button-menu.tsx | 79 - web/components/comments/dropdown-menu.tsx | 178 -- web/components/contract/contract-overview.tsx | 3 +- web/components/contract/contract-tabs.tsx | 4 +- web/components/contract/header-actions.tsx | 13 +- web/components/editor/sticky-format-menu.tsx | 102 +- web/components/feed/card-dropdown.tsx | 4 +- web/components/nav/bottom-nav-bar.tsx | 34 +- .../notifications/notification-dropdown.tsx | 4 +- web/components/profile/report-user.tsx | 4 +- web/components/search/filter-pills.tsx | 2 +- web/components/select-users.tsx | 112 +- web/components/topics/topic-dropdown.tsx | 6 +- web/components/topics/topic-options.tsx | 4 +- web/components/topics/topic-selector.tsx | 2 +- web/components/user/user-hovercard.tsx | 80 +- web/components/widgets/checked-dropdown.tsx | 97 +- .../widgets/customizeable-dropdown.tsx | 68 +- web/components/widgets/dropdown-menu.tsx | 140 ++ web/components/widgets/tooltip.tsx | 43 +- web/knowledge.md | 17 +- web/lib/util/devtools.ts | 19 +- web/lib/util/devtools.worker.ts | 10 + web/package.json | 19 +- web/pages/leaderboards.tsx | 2 +- web/pages/messages/[channelId].tsx | 4 +- yarn.lock | 1889 ++++++++++++----- 33 files changed, 1857 insertions(+), 1213 deletions(-) delete mode 100644 web/components/comments/dropdown-button-menu.tsx delete mode 100644 web/components/comments/dropdown-menu.tsx create mode 100644 web/components/widgets/dropdown-menu.tsx create mode 100644 web/lib/util/devtools.worker.ts diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx index a79b201c81..8b3c7e4b8c 100644 --- a/web/components/answers/answers-panel.tsx +++ b/web/components/answers/answers-panel.tsx @@ -59,7 +59,7 @@ import { getOrderBookButtonLabel, } from '../bet/order-book' import { getAnswerColor } from '../charts/contract/choice' -import DropdownMenu from '../comments/dropdown-menu' +import DropdownMenu from '../widgets/dropdown-menu' import { Col } from '../layout/col' import { UserHovercard } from '../user/user-hovercard' import { CustomizeableDropdown } from '../widgets/customizeable-dropdown' @@ -738,7 +738,9 @@ export function Answer(props: { feedReason={feedReason} /> } + buttonContent={ + + } items={dropdownItems} withinOverflowContainer /> diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx index f7ebe803f4..df8835feb0 100644 --- a/web/components/answers/create-answer-panel.tsx +++ b/web/components/answers/create-answer-panel.tsx @@ -9,7 +9,7 @@ import { FaSearch, FaSearchPlus } from 'react-icons/fa' import { api } from 'web/lib/api/api' import { withTracking } from 'web/lib/service/analytics' import { Button } from '../buttons/button' -import DropdownMenu from '../comments/dropdown-menu' +import DropdownMenu from '../widgets/dropdown-menu' import { Col } from '../layout/col' import { Row } from '../layout/row' import generateFilterDropdownItems from '../search/search-dropdown-helpers' @@ -26,7 +26,7 @@ function MultiSortDropdown(props: { {SORTS.find((s) => s.value === sort)?.label} diff --git a/web/components/bet/user-bets-table.tsx b/web/components/bet/user-bets-table.tsx index 171114b352..0fce2e3732 100644 --- a/web/components/bet/user-bets-table.tsx +++ b/web/components/bet/user-bets-table.tsx @@ -48,7 +48,7 @@ import { useIsAuthorized, useUser } from 'web/hooks/use-user' import { getUserContractsMetricsWithContracts } from 'web/lib/api/api' import { User } from 'web/lib/firebase/users' import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin' -import DropdownMenu from '../comments/dropdown-menu' +import DropdownMenu from '../widgets/dropdown-menu' import { Modal, MODAL_CLASS } from '../layout/modal' import { SweepsToggle } from '../sweeps/sweeps-toggle' import { useSweepstakes } from '../sweepstakes-provider' @@ -663,7 +663,7 @@ function BetsTable(props: { onClick: () => setModalOpen(true), }, ]} - icon={} + buttonContent={} /> )} diff --git a/web/components/charts/user-position-search-button.tsx b/web/components/charts/user-position-search-button.tsx index 1ab858c53d..da6532a15e 100644 --- a/web/components/charts/user-position-search-button.tsx +++ b/web/components/charts/user-position-search-button.tsx @@ -5,7 +5,7 @@ import { DisplayUser } from 'common/api/user-types' import { Col } from 'web/components/layout/col' import { Input } from 'web/components/widgets/input' import clsx from 'clsx' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuItem, MenuItems, Transition } from '@headlessui/react' import { Avatar } from 'web/components/widgets/avatar' import { Row } from 'web/components/layout/row' import { TbUserSearch } from 'react-icons/tb' @@ -13,7 +13,7 @@ import { User } from 'common/user' import { useSavedContractMetrics } from 'web/hooks/use-saved-contract-metrics' import { Contract } from 'common/contract' import { XIcon } from '@heroicons/react/solid' -import DropdownMenu from 'web/components/comments/dropdown-menu' +import DropdownMenu from 'web/components/widgets/dropdown-menu' import { Tooltip } from 'web/components/widgets/tooltip' import { track } from 'web/lib/service/analytics' @@ -41,7 +41,7 @@ export const UserPositionSearchButton = (props: { {!searchUsers && displayUser ? ( setTerm(e.target.value)} /> - {users && ( - - {({}) => ( - 0} - as={Fragment} - enter="transition ease-out duration-100" - enterFrom="transform opacity-0 scale-95" - enterTo="transform opacity-100 scale-100" - leave="transition ease-in duration-75" - leaveFrom="transform opacity-100 scale-100" - leaveTo="transform opacity-0 scale-95" + + + {users && users.length > 0 && ( + 0} + as={Fragment} + enter="transition ease-out duration-100" + enterFrom="transform opacity-0 scale-95" + enterTo="transform opacity-100 scale-100" + leave="transition ease-in duration-75" + leaveFrom="transform opacity-100 scale-100" + leaveTo="transform opacity-0 scale-95" + > + - -
- {users.map((user) => ( - - {({ active }) => ( - - )} - - ))} -
-
-
- )} -
- )} +
+ {users.map((user) => ( + + + + ))} +
+ +
+ )} +
)}
diff --git a/web/components/chat/chat-message.tsx b/web/components/chat/chat-message.tsx index 4f93d31d8f..783f807d8f 100644 --- a/web/components/chat/chat-message.tsx +++ b/web/components/chat/chat-message.tsx @@ -11,7 +11,7 @@ import { MultipleOrSingleAvatars } from 'web/components/multiple-or-single-avata import { Modal, MODAL_CLASS } from 'web/components/layout/modal' import { UserAvatarAndBadge } from 'web/components/widgets/user-link' import Link from 'next/link' -import DropdownMenu from 'web/components/comments/dropdown-menu' +import DropdownMenu from 'web/components/widgets/dropdown-menu' import { DotsHorizontalIcon, ReplyIcon } from '@heroicons/react/solid' import { UserHovercard } from '../user/user-hovercard' import { DisplayUser } from 'common/api/user-types' @@ -77,7 +77,9 @@ export const ChatMessageItem = memo(function ChatMessageItem(props: { onClick: () => onReplyClick(chat), }, ]} - icon={} + buttonContent={ + + } /> )} diff --git a/web/components/comments/comment-header.tsx b/web/components/comments/comment-header.tsx index 8c5fb567d3..d4e0f7075e 100644 --- a/web/components/comments/comment-header.tsx +++ b/web/components/comments/comment-header.tsx @@ -44,7 +44,7 @@ import { Tooltip } from '../widgets/tooltip' import { UserLink } from '../widgets/user-link' import { commenterAndBettorMatch, roundThreadColor } from './comment' import { CommentEditHistoryButton } from './comment-edit-history-button' -import DropdownMenu from './dropdown-menu' +import DropdownMenu from '../widgets/dropdown-menu' import { EditCommentModal } from './edit-comment-modal' import { RepostModal } from './repost-modal' import { type Answer } from 'common/answer' @@ -471,7 +471,7 @@ function DotMenu(props: { />