Skip to content

Commit d5981c5

Browse files
John-Paul-LarkinNiallJoeMaher
John-Paul-Larkin
and
NiallJoeMaher
authored
Update/headlessui (#991)
* update headlessui package to 2.1.2 * update alpha/new components * update alpha/settings components * update create/_client components * update /my-posts components * update /settings components * update ArticleMenu component * update ArticlePreview componentOA * update CommentsArea component * update ImageDetailsModal component * update Modal component * update MobileNav component * update Nav component * update PromptDialog component * update ReportModal component * update Search component --------- Co-authored-by: Niall Maher <nialljoemaher@gmail.com>
1 parent 1ce593f commit d5981c5

17 files changed

Lines changed: 324 additions & 182 deletions

File tree

‎app/(app)/alpha/new/[[...postIdArr]]/_client.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
import { redirect, useParams } from "next/navigation";
33
import React, { useEffect, Fragment } from "react";
44
import { Controller } from "react-hook-form";
5-
import { Disclosure, Transition } from "@headlessui/react";
5+
import {
6+
Disclosure,
7+
DisclosureButton,
8+
DisclosurePanel,
9+
Transition,
10+
} from "@headlessui/react";
611
import { ChevronUpIcon } from "@heroicons/react/20/solid";
712
import Editor from "@/components/editor/editor";
813
import RenderPost from "@/components/editor/editor/RenderPost";
@@ -57,7 +62,7 @@ const Create = () => {
5762
Preview
5863
</button>
5964
<form onSubmit={handleSubmit(onSubmit)}>
60-
<Transition.Root show={open} as={Fragment}>
65+
<Transition show={open} as={Fragment}>
6166
<div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full bg-black">
6267
<button
6368
type="button"
@@ -137,15 +142,15 @@ const Create = () => {
137142
<Disclosure>
138143
{({ open }) => (
139144
<>
140-
<Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-white focus:outline-none focus-visible:ring focus-visible:ring-pink-300 focus-visible:ring-opacity-75">
145+
<DisclosureButton className="flex w-full justify-between py-2 text-left text-sm font-medium text-white focus:outline-none focus-visible:ring focus-visible:ring-pink-300 focus-visible:ring-opacity-75">
141146
<span>View advanced settings</span>
142147
<ChevronUpIcon
143148
className={`${
144149
open ? "rotate-180 transform" : ""
145150
} h-5 w-5 text-neutral-400`}
146151
/>
147-
</Disclosure.Button>
148-
<Disclosure.Panel className="pb-2 pt-4">
152+
</DisclosureButton>
153+
<DisclosurePanel className="pb-2 pt-4">
149154
<label htmlFor="canonicalUrl">Canonical URL</label>
150155
<input
151156
id="canonicalUrl"
@@ -159,7 +164,7 @@ const Create = () => {
159164
elsewhere and you want to link to it as the
160165
original source.
161166
</p>
162-
</Disclosure.Panel>
167+
</DisclosurePanel>
163168
</>
164169
)}
165170
</Disclosure>
@@ -201,7 +206,7 @@ const Create = () => {
201206
</div>
202207
</div>
203208
</div>
204-
</Transition.Root>
209+
</Transition>
205210
{dataStatus === "loading" && postId && (
206211
<div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
207212
<div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">

‎app/(app)/alpha/settings/_client.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useEffect, useState } from "react";
4-
import { Switch } from "@headlessui/react";
4+
import { Description, Field, Label, Switch } from "@headlessui/react";
55
import { zodResolver } from "@hookform/resolvers/zod";
66
import type { SubmitHandler } from "react-hook-form";
77
import { useForm } from "react-hook-form";
@@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
357357
aria-labelledby="privacy-heading"
358358
className="mt-2 divide-y divide-neutral-200"
359359
>
360-
<Switch.Group
360+
<Field
361361
as="li"
362362
className="flex items-center justify-between py-4"
363363
>
364364
<div className="flex flex-col items-center">
365-
<Switch.Label as="p" className="sr-only" passive>
365+
<Label as="p" className="sr-only" passive>
366366
Email notifications
367-
</Switch.Label>
368-
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
367+
</Label>
368+
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
369369
Occasional email notifications from the platform.
370-
</Switch.Description>
370+
</Description>
371371
</div>
372372
<Switch
373373
checked={emailNotifications}
@@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
389389
)}
390390
/>
391391
</Switch>
392-
</Switch.Group>
393-
<Switch.Group
392+
</Field>
393+
<Field
394394
as="li"
395395
className="mt-2 flex items-center justify-between py-4"
396396
>
397397
<div className="flex flex-col">
398-
<Switch.Label as="p" className="sr-only" passive>
398+
<Label as="p" className="sr-only" passive>
399399
Weekly newsletter
400-
</Switch.Label>
401-
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
400+
</Label>
401+
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
402402
Opt-in to our weekly newsletter.
403-
</Switch.Description>
403+
</Description>
404404
</div>
405405
<Switch
406406
checked={weeklyNewsletter}
@@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
422422
)}
423423
/>
424424
</Switch>
425-
</Switch.Group>
425+
</Field>
426426
</ul>
427427
</div>
428428
<div className="mt-2 flex justify-end py-4">

‎app/(app)/create/[[...paramsArr]]/_client.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import React, { useState, useEffect, Fragment, useRef } from "react";
55
import { useForm } from "react-hook-form";
66
import CustomTextareaAutosize from "@/components/CustomTextareAutosize/CustomTextareaAutosize";
77
import { toast } from "sonner";
8-
import { Disclosure, Transition } from "@headlessui/react";
8+
import {
9+
Disclosure,
10+
DisclosureButton,
11+
DisclosurePanel,
12+
Transition,
13+
} from "@headlessui/react";
914
import { ChevronUpIcon } from "@heroicons/react/20/solid";
1015
import type { SavePostInput } from "@/schema/post";
1116
import { ConfirmPostSchema } from "@/schema/post";
@@ -363,7 +368,7 @@ const Create = ({ session }: { session: Session }) => {
363368
return (
364369
<>
365370
<form onSubmit={handleSubmit(onSubmit)}>
366-
<Transition.Root show={open} as={Fragment}>
371+
<Transition show={open} as={Fragment}>
367372
<div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
368373
<div className="m-2 max-w-full">
369374
<button
@@ -484,15 +489,15 @@ const Create = ({ session }: { session: Session }) => {
484489
<Disclosure>
485490
{({ open }) => (
486491
<>
487-
<Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
492+
<DisclosureButton className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
488493
<span>More Options</span>
489494
<ChevronUpIcon
490495
className={`${
491496
open ? "" : "rotate-180 transform"
492497
} h-5 w-5 text-neutral-400`}
493498
/>
494-
</Disclosure.Button>
495-
<Disclosure.Panel className="pb-2 pt-4">
499+
</DisclosureButton>
500+
<DisclosurePanel className="pb-2 pt-4">
496501
<label htmlFor="canonicalUrl">
497502
Canonical URL
498503
</label>
@@ -529,7 +534,7 @@ const Create = ({ session }: { session: Session }) => {
529534
Share this link with others to preview your
530535
draft. Anyone with the link can view your draft.
531536
</p>
532-
</Disclosure.Panel>
537+
</DisclosurePanel>
533538
</>
534539
)}
535540
</Disclosure>
@@ -581,7 +586,7 @@ const Create = ({ session }: { session: Session }) => {
581586
</div>
582587
</div>
583588
</div>
584-
</Transition.Root>
589+
</Transition>
585590
{dataStatus === "loading" && postId && (
586591
<div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
587592
<div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">

‎app/(app)/my-posts/_client.tsx‎

Lines changed: 36 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
"use client";
22

33
import { useState, Fragment } from "react";
4-
import { Transition, Menu } from "@headlessui/react";
4+
import {
5+
Transition,
6+
Menu,
7+
MenuButton,
8+
MenuItems,
9+
MenuItem,
10+
} from "@headlessui/react";
511
import Link from "next/link";
612
import {
713
ChevronDownIcon,
@@ -167,13 +173,13 @@ const MyPosts = () => {
167173
className="relative inline-block text-left"
168174
>
169175
<div>
170-
<Menu.Button className="dropdown-button">
176+
<MenuButton className="dropdown-button">
171177
Options
172178
<ChevronDownIcon
173179
className="-mr-1 ml-2 h-5 w-5"
174180
aria-hidden="true"
175181
/>
176-
</Menu.Button>
182+
</MenuButton>
177183
</div>
178184

179185
<Transition
@@ -185,51 +191,35 @@ const MyPosts = () => {
185191
leaveFrom="transform opacity-100 scale-100"
186192
leaveTo="transform opacity-0 scale-95"
187193
>
188-
<Menu.Items className="absolute right-0 mt-2 w-40 origin-top-right divide-y divide-neutral-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
194+
<MenuItems className="absolute right-0 mt-2 w-40 origin-top-right divide-y divide-neutral-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
189195
<div className="dropdown-bg py-1">
190-
<Menu.Item>
191-
{({ active }) => (
192-
<Link
193-
className={classNames(
194-
active
195-
? "bg-neutral-100 text-black"
196-
: "text-neutral-700",
197-
"dropdown-item group flex items-center px-4 py-2 text-sm",
198-
)}
199-
href={`/create/${id}`}
200-
>
201-
<PencilIcon
202-
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
203-
aria-hidden="true"
204-
/>
205-
Edit
206-
</Link>
207-
)}
208-
</Menu.Item>
209-
210-
<Menu.Item>
211-
{({ active }) => (
212-
<button
213-
onClick={() =>
214-
setSelectedArticleToDelete(id)
215-
}
216-
className={classNames(
217-
active
218-
? "bg-neutral-100 text-black"
219-
: "text-neutral-700",
220-
"dropdown-item group flex w-full items-center px-4 py-2 text-sm",
221-
)}
222-
>
223-
<TrashIcon
224-
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
225-
aria-hidden="true"
226-
/>
227-
Delete
228-
</button>
229-
)}
230-
</Menu.Item>
196+
<MenuItem>
197+
<Link
198+
className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
199+
href={`/create/${id}`}
200+
>
201+
<PencilIcon
202+
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
203+
aria-hidden="true"
204+
/>
205+
Edit
206+
</Link>
207+
</MenuItem>
208+
209+
<MenuItem>
210+
<button
211+
onClick={() => setSelectedArticleToDelete(id)}
212+
className="dropdown-item group flex w-full items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
213+
>
214+
<TrashIcon
215+
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
216+
aria-hidden="true"
217+
/>
218+
Delete
219+
</button>
220+
</MenuItem>
231221
</div>
232-
</Menu.Items>
222+
</MenuItems>
233223
</Transition>
234224
</Menu>
235225
</div>

‎app/(app)/settings/_client.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useEffect, useState } from "react";
4-
import { Switch } from "@headlessui/react";
4+
import { Description, Field, Label, Switch } from "@headlessui/react";
55
import { zodResolver } from "@hookform/resolvers/zod";
66
import type { SubmitHandler } from "react-hook-form";
77
import { useForm } from "react-hook-form";
@@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
357357
aria-labelledby="privacy-heading"
358358
className="mt-2 divide-y divide-neutral-200"
359359
>
360-
<Switch.Group
360+
<Field
361361
as="li"
362362
className="flex items-center justify-between py-4"
363363
>
364364
<div className="flex flex-col items-center">
365-
<Switch.Label as="p" className="sr-only" passive>
365+
<Label as="p" className="sr-only" passive>
366366
Email notifications
367-
</Switch.Label>
368-
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
367+
</Label>
368+
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
369369
Occasional email notifications from the platform.
370-
</Switch.Description>
370+
</Description>
371371
</div>
372372
<Switch
373373
checked={emailNotifications}
@@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
389389
)}
390390
/>
391391
</Switch>
392-
</Switch.Group>
393-
<Switch.Group
392+
</Field>
393+
<Field
394394
as="li"
395395
className="mt-2 flex items-center justify-between py-4"
396396
>
397397
<div className="flex flex-col">
398-
<Switch.Label as="p" className="sr-only" passive>
398+
<Label as="p" className="sr-only" passive>
399399
Weekly newsletter
400-
</Switch.Label>
401-
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
400+
</Label>
401+
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
402402
Opt-in to our weekly newsletter.
403-
</Switch.Description>
403+
</Description>
404404
</div>
405405
<Switch
406406
checked={weeklyNewsletter}
@@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
422422
)}
423423
/>
424424
</Switch>
425-
</Switch.Group>
425+
</Field>
426426
</ul>
427427
</div>
428428
<div className="mt-2 flex justify-end py-4">

0 commit comments

Comments
 (0)