Skip to content

Commit

Permalink
Update/headlessui (#991)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@John-Paul-Larkin @NiallJoeMaher
John-Paul-Larkin and NiallJoeMaher authored Aug 14, 2024
1 parent 1ce593f commit d5981c5
Show file tree
Hide file tree
Showing 17 changed files with 324 additions and 182 deletions.
19 changes: 12 additions & 7 deletions app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
import { redirect, useParams } from "next/navigation";
import React, { useEffect, Fragment } from "react";
import { Controller } from "react-hook-form";
import { Disclosure, Transition } from "@headlessui/react";
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
Transition,
} from "@headlessui/react";
import { ChevronUpIcon } from "@heroicons/react/20/solid";
import Editor from "@/components/editor/editor";
import RenderPost from "@/components/editor/editor/RenderPost";
Expand Down Expand Up @@ -57,7 +62,7 @@ const Create = () => {
Preview
</button>
<form onSubmit={handleSubmit(onSubmit)}>
<Transition.Root show={open} as={Fragment}>
<Transition show={open} as={Fragment}>
<div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full bg-black">
<button
type="button"
Expand Down Expand Up @@ -137,15 +142,15 @@ const Create = () => {
<Disclosure>
{({ open }) => (
<>
<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">
<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">
<span>View advanced settings</span>
<ChevronUpIcon
className={`${
open ? "rotate-180 transform" : ""
} h-5 w-5 text-neutral-400`}
/>
</Disclosure.Button>
<Disclosure.Panel className="pb-2 pt-4">
</DisclosureButton>
<DisclosurePanel className="pb-2 pt-4">
<label htmlFor="canonicalUrl">Canonical URL</label>
<input
id="canonicalUrl"
Expand All @@ -159,7 +164,7 @@ const Create = () => {
elsewhere and you want to link to it as the
original source.
</p>
</Disclosure.Panel>
</DisclosurePanel>
</>
)}
</Disclosure>
Expand Down Expand Up @@ -201,7 +206,7 @@ const Create = () => {
</div>
</div>
</div>
</Transition.Root>
</Transition>
{dataStatus === "loading" && postId && (
<div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
<div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
Expand Down
26 changes: 13 additions & 13 deletions app/(app)/alpha/settings/_client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useEffect, useState } from "react";
import { Switch } from "@headlessui/react";
import { Description, Field, Label, Switch } from "@headlessui/react";
import { zodResolver } from "@hookform/resolvers/zod";
import type { SubmitHandler } from "react-hook-form";
import { useForm } from "react-hook-form";
Expand Down Expand Up @@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
aria-labelledby="privacy-heading"
className="mt-2 divide-y divide-neutral-200"
>
<Switch.Group
<Field
as="li"
className="flex items-center justify-between py-4"
>
<div className="flex flex-col items-center">
<Switch.Label as="p" className="sr-only" passive>
<Label as="p" className="sr-only" passive>
Email notifications
</Switch.Label>
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
</Label>
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
Occasional email notifications from the platform.
</Switch.Description>
</Description>
</div>
<Switch
checked={emailNotifications}
Expand All @@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
)}
/>
</Switch>
</Switch.Group>
<Switch.Group
</Field>
<Field
as="li"
className="mt-2 flex items-center justify-between py-4"
>
<div className="flex flex-col">
<Switch.Label as="p" className="sr-only" passive>
<Label as="p" className="sr-only" passive>
Weekly newsletter
</Switch.Label>
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
</Label>
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
Opt-in to our weekly newsletter.
</Switch.Description>
</Description>
</div>
<Switch
checked={weeklyNewsletter}
Expand All @@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
)}
/>
</Switch>
</Switch.Group>
</Field>
</ul>
</div>
<div className="mt-2 flex justify-end py-4">
Expand Down
19 changes: 12 additions & 7 deletions app/(app)/create/[[...paramsArr]]/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import React, { useState, useEffect, Fragment, useRef } from "react";
import { useForm } from "react-hook-form";
import CustomTextareaAutosize from "@/components/CustomTextareAutosize/CustomTextareaAutosize";
import { toast } from "sonner";
import { Disclosure, Transition } from "@headlessui/react";
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
Transition,
} from "@headlessui/react";
import { ChevronUpIcon } from "@heroicons/react/20/solid";
import type { SavePostInput } from "@/schema/post";
import { ConfirmPostSchema } from "@/schema/post";
Expand Down Expand Up @@ -363,7 +368,7 @@ const Create = ({ session }: { session: Session }) => {
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<Transition.Root show={open} as={Fragment}>
<Transition show={open} as={Fragment}>
<div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
<div className="m-2 max-w-full">
<button
Expand Down Expand Up @@ -484,15 +489,15 @@ const Create = ({ session }: { session: Session }) => {
<Disclosure>
{({ open }) => (
<>
<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">
<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">
<span>More Options</span>
<ChevronUpIcon
className={`${
open ? "" : "rotate-180 transform"
} h-5 w-5 text-neutral-400`}
/>
</Disclosure.Button>
<Disclosure.Panel className="pb-2 pt-4">
</DisclosureButton>
<DisclosurePanel className="pb-2 pt-4">
<label htmlFor="canonicalUrl">
Canonical URL
</label>
Expand Down Expand Up @@ -529,7 +534,7 @@ const Create = ({ session }: { session: Session }) => {
Share this link with others to preview your
draft. Anyone with the link can view your draft.
</p>
</Disclosure.Panel>
</DisclosurePanel>
</>
)}
</Disclosure>
Expand Down Expand Up @@ -581,7 +586,7 @@ const Create = ({ session }: { session: Session }) => {
</div>
</div>
</div>
</Transition.Root>
</Transition>
{dataStatus === "loading" && postId && (
<div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
<div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
Expand Down
82 changes: 36 additions & 46 deletions app/(app)/my-posts/_client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
"use client";

import { useState, Fragment } from "react";
import { Transition, Menu } from "@headlessui/react";
import {
Transition,
Menu,
MenuButton,
MenuItems,
MenuItem,
} from "@headlessui/react";
import Link from "next/link";
import {
ChevronDownIcon,
Expand Down Expand Up @@ -167,13 +173,13 @@ const MyPosts = () => {
className="relative inline-block text-left"
>
<div>
<Menu.Button className="dropdown-button">
<MenuButton className="dropdown-button">
Options
<ChevronDownIcon
className="-mr-1 ml-2 h-5 w-5"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
</div>

<Transition
Expand All @@ -185,51 +191,35 @@ const MyPosts = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<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">
<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">
<div className="dropdown-bg py-1">
<Menu.Item>
{({ active }) => (
<Link
className={classNames(
active
? "bg-neutral-100 text-black"
: "text-neutral-700",
"dropdown-item group flex items-center px-4 py-2 text-sm",
)}
href={`/create/${id}`}
>
<PencilIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Edit
</Link>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<button
onClick={() =>
setSelectedArticleToDelete(id)
}
className={classNames(
active
? "bg-neutral-100 text-black"
: "text-neutral-700",
"dropdown-item group flex w-full items-center px-4 py-2 text-sm",
)}
>
<TrashIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Delete
</button>
)}
</Menu.Item>
<MenuItem>
<Link
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"
href={`/create/${id}`}
>
<PencilIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Edit
</Link>
</MenuItem>

<MenuItem>
<button
onClick={() => setSelectedArticleToDelete(id)}
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"
>
<TrashIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Delete
</button>
</MenuItem>
</div>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>
Expand Down
26 changes: 13 additions & 13 deletions app/(app)/settings/_client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useEffect, useState } from "react";
import { Switch } from "@headlessui/react";
import { Description, Field, Label, Switch } from "@headlessui/react";
import { zodResolver } from "@hookform/resolvers/zod";
import type { SubmitHandler } from "react-hook-form";
import { useForm } from "react-hook-form";
Expand Down Expand Up @@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
aria-labelledby="privacy-heading"
className="mt-2 divide-y divide-neutral-200"
>
<Switch.Group
<Field
as="li"
className="flex items-center justify-between py-4"
>
<div className="flex flex-col items-center">
<Switch.Label as="p" className="sr-only" passive>
<Label as="p" className="sr-only" passive>
Email notifications
</Switch.Label>
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
</Label>
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
Occasional email notifications from the platform.
</Switch.Description>
</Description>
</div>
<Switch
checked={emailNotifications}
Expand All @@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
)}
/>
</Switch>
</Switch.Group>
<Switch.Group
</Field>
<Field
as="li"
className="mt-2 flex items-center justify-between py-4"
>
<div className="flex flex-col">
<Switch.Label as="p" className="sr-only" passive>
<Label as="p" className="sr-only" passive>
Weekly newsletter
</Switch.Label>
<Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
</Label>
<Description className="text-sm text-neutral-600 dark:text-neutral-400">
Opt-in to our weekly newsletter.
</Switch.Description>
</Description>
</div>
<Switch
checked={weeklyNewsletter}
Expand All @@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
)}
/>
</Switch>
</Switch.Group>
</Field>
</ul>
</div>
<div className="mt-2 flex justify-end py-4">
Expand Down
Loading

0 comments on commit d5981c5

Please sign in to comment.