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.

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

Update to Headless UI 2 #2881

Closed
wants to merge 3 commits into from
Closed
Changes from 1 commit
Commits
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
Next Next commit
Update to Headless UI 2
jamie-suse committed Sep 2, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit a8960050837bce4c1d41a31bffaa66068f292cb1
27 changes: 13 additions & 14 deletions assets/js/common/Accordion/Accordion.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React, { isValidElement } from 'react';

import { Disclosure, Transition } from '@headlessui/react';
import {
Disclosure,
DisclosurePanel,
DisclosureButton,
Transition,
} from '@headlessui/react';
import { EOS_KEYBOARD_ARROW_DOWN } from 'eos-icons-react';

import classNames from 'classnames';
@@ -16,7 +21,7 @@ function Accordion({
children,
}) {
const disclosurePanel = (
<Disclosure.Panel aria-label="accordion-panel">{children}</Disclosure.Panel>
<DisclosurePanel aria-label="accordion-panel">{children}</DisclosurePanel>
);
const isHeaderAnElement = isValidElement(header);
return (
@@ -31,7 +36,7 @@ function Accordion({
>
{({ open }) => (
<>
<Disclosure.Button
<DisclosureButton
aria-label="accordion-header"
as="div"
className={classNames(
@@ -58,18 +63,12 @@ function Accordion({
/>
</div>
)}
</Disclosure.Button>
</DisclosureButton>
{withTransition ? (
<Transition
aria-label="accordion-transition-panel"
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-100 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
{disclosurePanel}
<Transition aria-label="accordion-transition-panel">
<div className="transition opacity-100 duration-100 ease-out data-[closed]:opacity-0">
{disclosurePanel}
</div>
</Transition>
) : (
disclosurePanel
85 changes: 27 additions & 58 deletions assets/js/common/Modal/Modal.jsx
Original file line number Diff line number Diff line change
@@ -1,65 +1,34 @@
import React, { Fragment, useRef } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import {
Dialog,
DialogBackdrop,
DialogPanel,
DialogTitle,
} from '@headlessui/react';
import classNames from 'classnames';
import React from 'react';

function Modal({ children, open, onClose, title, className }) {
const refContent = useRef(null);

return (
<Transition appear show={open} as={Fragment}>
<Dialog
initialFocus={refContent}
as="div"
className="fixed inset-0 z-50 overflow-y-auto"
onClose={onClose}
>
<div ref={refContent} className="min-h-screen px-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-white/60 backdrop-blur-sm" />
</Transition.Child>

{/* This element is to trick the browser into centering the modal contents. */}
<span
className="inline-block h-screen align-middle"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div
className={classNames(
'inline-block w-full max-w-7xl p-6 my-8 text-left align-middle transition-all transform bg-white shadow-lg rounded-lg',
className
)}
>
<Dialog.Title
as="h3"
className="text-xl font-semibold leading-6 text-gray-900"
>
{title}
</Dialog.Title>
<div className="mt-2">{children}</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
<Dialog open={open} onClose={onClose} className="relative z-50">
<DialogBackdrop
transition
className="fixed inset-0 bg-white/60 backdrop-blur-sm duration-300 ease-out data-[closed]:opacity-0"
/>
<div className="fixed inset-0 flex w-screen items-center justify-center p-4">
<DialogPanel
transition
className={classNames(
'max-w-lg space-y-4 bg-white p-12 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0',
className
)}
>
<DialogTitle className="text-xl font-semibold leading-6 text-gray-900">
{title}
</DialogTitle>
<div className="mt-2">{children}</div>
</DialogPanel>
</div>
</Dialog>
);
}

42 changes: 18 additions & 24 deletions assets/js/pages/SettingsPage/SettingsPage.jsx
Original file line number Diff line number Diff line change
@@ -131,31 +131,25 @@ function SettingsPage() {
Get your key here 👇 and use it to register your first agents,
or to add new ones.
</p>
<Transition
show={Boolean(apiKey)}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-100 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
{hasApiKey ? (
<div className="flex">
<ApiKeyBox apiKey={apiKey} className="!w-11/12" />
<CopyButton content={apiKey} />
</div>
) : (
<span>
We were unable to provide you the API key you need 😱
<br />
Contact support for help!
</span>
)}
<Transition show={Boolean(apiKey)}>
<div className="transition duration-100 ease-out data-[closed]:opacity-0">
{hasApiKey ? (
<div className="flex">
<ApiKeyBox apiKey={apiKey} className="!w-11/12" />
<CopyButton content={apiKey} />
</div>
) : (
<span>
We were unable to provide you the API key you need 😱
<br />
Contact support for help!
</span>
)}

{apiKey && (
<ApiKeyExpireInfo apiKeyExpiration={apiKeyExpiration} />
)}
{apiKey && (
<ApiKeyExpireInfo apiKeyExpiration={apiKeyExpiration} />
)}
</div>
</Transition>
</div>
</div>
170 changes: 145 additions & 25 deletions assets/package-lock.json
2 changes: 1 addition & 1 deletion assets/package.json
Original file line number Diff line number Diff line change
@@ -47,7 +47,7 @@
"tailwindcss": "^3.4.10"
},
"dependencies": {
"@headlessui/react": "^1.7.19",
"@headlessui/react": "^2.1.2",
"@heroicons/react": "^2.1.5",
"@reduxjs/toolkit": "^2.2.2",
"axios": "^1.7.5",