Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update/headlessui #991

Merged
merged 17 commits into from
Aug 14, 2024
+324 −182
Merged

Update/headlessui #991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9248765
update headlessui package to 2.1.2
John-Paul-Larkin Aug 13, 2024
464f3b6
update alpha/new components
John-Paul-Larkin Aug 13, 2024
2969ccc
update alpha/settings components
John-Paul-Larkin Aug 13, 2024
1a5febd
update create/_client components
John-Paul-Larkin Aug 13, 2024
72671e3
update /my-posts components
John-Paul-Larkin Aug 13, 2024
f036049
update /settings components
John-Paul-Larkin Aug 13, 2024
c9a8d9a
update ArticleMenu component
John-Paul-Larkin Aug 13, 2024
ea021bc
update ArticlePreview componentOA
John-Paul-Larkin Aug 13, 2024
faf9fc8
update CommentsArea component
John-Paul-Larkin Aug 13, 2024
dcc400d
update ImageDetailsModal component
John-Paul-Larkin Aug 13, 2024
2f4ba69
update Modal component
John-Paul-Larkin Aug 13, 2024
f9bae0a
update MobileNav component
John-Paul-Larkin Aug 13, 2024
f5eeab1
update Nav component
John-Paul-Larkin Aug 13, 2024
0ba60b9
update PromptDialog component
John-Paul-Larkin Aug 13, 2024
ed95e32
update ReportModal component
John-Paul-Larkin Aug 13, 2024
3447dc1
update Search component
John-Paul-Larkin Aug 13, 2024
c675a6b
Merge branch 'develop' into update/headlessui
NiallJoeMaher Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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