Skip to content

Commit

Permalink
Migrate to React 19, Next 15, & turbopack (#3204)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@sipec
sipec authored Dec 10, 2024
1 parent a530f66 commit 9e09dfa
Show file tree
Hide file tree
Showing 33 changed files with 1,857 additions and 1,213 deletions.
6 changes: 4 additions & 2 deletions web/components/answers/answers-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -738,7 +738,9 @@ export function Answer(props: {
feedReason={feedReason}
/>
<DropdownMenu
icon={<DotsVerticalIcon className="h-5 w-5" aria-hidden />}
buttonContent={
<DotsVerticalIcon className="h-5 w-5" aria-hidden />
}
items={dropdownItems}
withinOverflowContainer
/>
Expand Down
4 changes: 2 additions & 2 deletions web/components/answers/create-answer-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -26,7 +26,7 @@ function MultiSortDropdown(props: {
<DropdownMenu
closeOnClick
items={generateFilterDropdownItems(SORTS, setSort)}
icon={
buttonContent={
<Row className="text-ink-500 items-center gap-0.5">
<span className="whitespace-nowrap text-sm font-medium">
{SORTS.find((s) => s.value === sort)?.label}
Expand Down
4 changes: 2 additions & 2 deletions web/components/bet/user-bets-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -663,7 +663,7 @@ function BetsTable(props: {
onClick: () => setModalOpen(true),
},
]}
icon={<BsThreeDotsVertical className="h-4" />}
buttonContent={<BsThreeDotsVertical className="h-4" />}
/>
</div>
)}
Expand Down
107 changes: 48 additions & 59 deletions web/components/charts/user-position-search-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ 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'
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'

Expand Down Expand Up @@ -41,7 +41,7 @@ export const UserPositionSearchButton = (props: {
<Row className={'flex-row-reverse items-center'}>
{!searchUsers && displayUser ? (
<DropdownMenu
icon={
buttonContent={
<div
className={
'hover:bg-ink-200 cursor-pointer rounded-lg px-2 py-1.5'
Expand Down Expand Up @@ -110,63 +110,52 @@ export const UserPositionSearchButton = (props: {
value={term}
onChange={(e) => setTerm(e.target.value)}
/>
{users && (
<Menu
as="div"
className={clsx(
'relative inline-block text-right',
users?.length && 'z-20 h-56'
)}
>
{({}) => (
<Transition
show={users?.length > 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"

<Menu
as="div"
className={clsx('relative z-20 inline-block h-56 text-right')}
>
{users && users.length > 0 && (
<Transition
show={users?.length > 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"
>
<MenuItems
static
className="divide-ink-100 bg-canvas-0 ring-ink-1000 absolute -right-20 mt-2 w-48 origin-top-right cursor-pointer divide-y rounded-md shadow-lg ring-1 ring-opacity-5 transition duration-100 ease-out focus:outline-none sm:right-0 sm:w-full"
>
<Menu.Items
static={true}
className="divide-ink-100 bg-canvas-0 ring-ink-1000 absolute -right-20 mt-2 w-48 origin-top-right cursor-pointer divide-y rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none sm:right-0 sm:w-full"
>
<div className="py-1">
{users.map((user) => (
<Menu.Item key={user.id}>
{({ active }) => (
<button
className={clsx(
active
? 'bg-ink-100 text-ink-900'
: 'text-ink-700',
'group flex w-full items-center px-4 py-2 text-sm'
)}
onClick={() => {
setTerm('')
setDisplayUser(user)
setSearchUsers(false)
}}
>
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'xs'}
className={'mr-2'}
/>
{user.name}
</button>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</Transition>
)}
</Menu>
)}
<div className="py-1">
{users.map((user) => (
<MenuItem key={user.id}>
<button
className="active:bg-ink-100 active:text-ink-900 hover:bg-ink-100 hover:text-ink-900 group flex w-full items-center px-4 py-2 text-sm"
onClick={() => {
setTerm('')
setDisplayUser(user)
setSearchUsers(false)
}}
>
<Avatar
username={user.username}
avatarUrl={user.avatarUrl}
size={'xs'}
className={'mr-2'}
/>
{user.name}
</button>
</MenuItem>
))}
</div>
</MenuItems>
</Transition>
)}
</Menu>
</Col>
)}
</Row>
Expand Down
6 changes: 4 additions & 2 deletions web/components/chat/chat-message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -77,7 +77,9 @@ export const ChatMessageItem = memo(function ChatMessageItem(props: {
onClick: () => onReplyClick(chat),
},
]}
icon={<DotsHorizontalIcon className="text-ink-400 h-4 w-4" />}
buttonContent={
<DotsHorizontalIcon className="text-ink-400 h-4 w-4" />
}
/>
)}
</Row>
Expand Down
4 changes: 2 additions & 2 deletions web/components/comments/comment-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -471,7 +471,7 @@ function DotMenu(props: {
/>
<DropdownMenu
menuWidth={'w-36'}
icon={
buttonContent={
<DotsHorizontalIcon
className="mt-[0.12rem] h-4 w-4"
aria-hidden="true"
Expand Down
79 changes: 0 additions & 79 deletions web/components/comments/dropdown-button-menu.tsx
View file

This file was deleted.

Loading

0 comments on commit 9e09dfa

Please sign in to comment.