feat: completely nuke headlessui and consolidate to aria
This commit is contained in:
Aarnav Tale
parent
8205f2b99b
commit
a57e777a6b
@ -1,5 +1,6 @@
|
||||
import { ClipboardIcon } from '@heroicons/react/24/outline'
|
||||
import toast from 'react-hot-toast/headless'
|
||||
|
||||
import { toast } from './Toaster'
|
||||
|
||||
type Properties = {
|
||||
readonly name: string;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable unicorn/no-keyword-prefix */
|
||||
import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
|
||||
import {
|
||||
Button as AriaButton,
|
||||
@ -20,7 +21,9 @@ function Button(properties: ButtonProperties) {
|
||||
{...properties}
|
||||
aria-label='Dialog'
|
||||
className={cn(
|
||||
'outline-none',
|
||||
'w-fit text-sm rounded-lg px-4 py-2',
|
||||
'bg-main-700 dark:bg-main-800 text-white',
|
||||
properties.isDisabled && 'opacity-50 cursor-not-allowed',
|
||||
properties.className
|
||||
)}
|
||||
// If control is passed, set the state value
|
||||
@ -42,11 +45,12 @@ function Action(properties: ActionProperties) {
|
||||
type={properties.variant === 'confirm' ? 'submit' : 'button'}
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-lg',
|
||||
properties.isDisabled && 'opacity-50 cursor-not-allowed',
|
||||
properties.variant === 'cancel'
|
||||
? 'text-ui-700 dark:text-ui-300'
|
||||
: 'text-ui-950 dark:text-ui-50',
|
||||
: 'text-ui-300 dark:text-ui-300',
|
||||
properties.variant === 'confirm'
|
||||
? 'bg-blue-500 hover:bg-blue-600 pressed:bg-blue-700 text-white'
|
||||
? 'bg-main-700 dark:bg-main-700 pressed:bg-main-800 dark:pressed:bg-main-800'
|
||||
: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
|
||||
properties.className
|
||||
)}
|
||||
@ -82,9 +86,10 @@ function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
|
||||
type PanelProperties = {
|
||||
readonly children: (close: () => void) => ReactNode;
|
||||
readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
|
||||
readonly className?: string;
|
||||
}
|
||||
|
||||
function Panel({ children, control }: PanelProperties) {
|
||||
function Panel({ children, control, className }: PanelProperties) {
|
||||
return (
|
||||
<ModalOverlay
|
||||
aria-hidden='true'
|
||||
@ -92,8 +97,9 @@ function Panel({ children, control }: PanelProperties) {
|
||||
'fixed inset-0 h-screen w-screen z-50 bg-black/30',
|
||||
'flex items-center justify-center dark:bg-black/70',
|
||||
'entering:animate-in exiting:animate-out',
|
||||
'entering:fade-in entering:duration-300 entering:ease-out',
|
||||
'exiting:fade-out exiting:duration-200 exiting:ease-in'
|
||||
'entering:fade-in entering:duration-200 entering:ease-out',
|
||||
'exiting:fade-out exiting:duration-100 exiting:ease-in',
|
||||
className
|
||||
)}
|
||||
isOpen={control ? control[0] : undefined}
|
||||
onOpenChange={control ? control[1] : undefined}
|
||||
@ -104,8 +110,8 @@ function Panel({ children, control }: PanelProperties) {
|
||||
'bg-ui-50 dark:bg-ui-900 shadow-lg',
|
||||
'entering:animate-in exiting:animate-out',
|
||||
'dark:border dark:border-ui-700',
|
||||
'entering:zoom-in-95 entering:ease-out entering:duration-300',
|
||||
'exiting:zoom-out-95 exiting:ease-in exiting:duration-200'
|
||||
'entering:zoom-in-95 entering:ease-out entering:duration-200',
|
||||
'exiting:zoom-out-95 exiting:ease-in exiting:duration-100'
|
||||
)}
|
||||
>
|
||||
<AriaDialog role='alertdialog' className='outline-none relative'>
|
||||
|
||||
@ -1,66 +1,52 @@
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
||||
import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
|
||||
import clsx from 'clsx'
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { cn } from '~/utils/cn'
|
||||
|
||||
import Code from './Code'
|
||||
import Dialog from './Dialog'
|
||||
|
||||
type Properties = {
|
||||
readonly type?: 'full' | 'embedded';
|
||||
}
|
||||
|
||||
export function ErrorPopup({ type = 'full' }: Properties) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
// eslint-disable-next-line react/hook-use-state
|
||||
const open = useState(true)
|
||||
|
||||
const error = useRouteError()
|
||||
const routing = isRouteErrorResponse(error)
|
||||
const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
|
||||
console.error(error)
|
||||
|
||||
// Debounce the error modal so it doesn't show up for a split second
|
||||
// when the user navigates to a new page.
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsOpen(true)
|
||||
}, 150)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Transition as={Fragment} show={isOpen}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter='ease-out duration-150'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
>
|
||||
|
||||
<div className={clsx(
|
||||
'flex items-center justify-center overflow-clip',
|
||||
type === 'full' ? 'min-h-screen' : 'mt-24'
|
||||
<Dialog>
|
||||
<Dialog.Panel
|
||||
className={cn(
|
||||
type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : '',
|
||||
)}
|
||||
>
|
||||
<div className={clsx(
|
||||
'flex flex-col items-center justify-center space-y-2 w-full sm:w-1/2 xl:w-1/3',
|
||||
'bg-white dark:bg-zinc-800 rounded-lg py-8 px-4 md:px-16',
|
||||
'border border-gray-200 dark:border-zinc-700 text-center'
|
||||
)}
|
||||
>
|
||||
<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
|
||||
<h1 className='text-2xl font-semibold text-gray-800 dark:text-gray-100'>
|
||||
{routing ? error.status : 'Error'}
|
||||
</h1>
|
||||
{routing ? (
|
||||
<p className='text-gray-500 dark:text-gray-400'>
|
||||
{error.statusText}
|
||||
</p>
|
||||
) : (
|
||||
<Code className='text-sm'>
|
||||
{message}
|
||||
</Code>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</Transition>
|
||||
control={open}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className='flex items-center justify-between'>
|
||||
<Dialog.Title className='text-3xl mb-0'>
|
||||
{routing ? error.status : 'Error'}
|
||||
</Dialog.Title>
|
||||
<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
|
||||
</div>
|
||||
<Dialog.Text className='mt-4 text-lg'>
|
||||
{routing ? (
|
||||
error.statusText
|
||||
) : (
|
||||
<Code>
|
||||
{message}
|
||||
</Code>
|
||||
)}
|
||||
</Dialog.Text>
|
||||
</>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { type ReactNode } from 'react'
|
||||
import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
|
||||
import {
|
||||
Button as AriaButton,
|
||||
Menu as AriaMenu,
|
||||
@ -49,6 +49,31 @@ function Items(properties: Parameters<typeof AriaMenu>[0]) {
|
||||
)
|
||||
}
|
||||
|
||||
type ButtonProperties = Parameters<typeof AriaButton>[0] & {
|
||||
readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
|
||||
}
|
||||
|
||||
function ItemButton(properties: ButtonProperties) {
|
||||
return (
|
||||
<MenuItem className='outline-none'>
|
||||
<AriaButton
|
||||
{...properties}
|
||||
className={cn(
|
||||
'px-4 py-2 w-full outline-none text-left',
|
||||
'hover:bg-ui-200 dark:hover:bg-ui-700',
|
||||
properties.className
|
||||
)}
|
||||
aria-label='Menu Dialog'
|
||||
// If control is passed, set the state value
|
||||
onPress={event => {
|
||||
properties.onPress?.(event)
|
||||
properties.control?.[1](true)
|
||||
}}
|
||||
/>
|
||||
</MenuItem>
|
||||
)
|
||||
}
|
||||
|
||||
function Item(properties: Parameters<typeof MenuItem>[0]) {
|
||||
return (
|
||||
<MenuItem
|
||||
@ -70,4 +95,4 @@ function Menu({ children }: { readonly children: ReactNode }) {
|
||||
)
|
||||
}
|
||||
|
||||
export default Object.assign(Menu, { Button, Item, Items })
|
||||
export default Object.assign(Menu, { Button, Item, ItemButton, Items })
|
||||
|
||||
40
app/components/Switch.tsx
Normal file
40
app/components/Switch.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { Switch as AriaSwitch } from 'react-aria-components'
|
||||
|
||||
import { cn } from '~/utils/cn'
|
||||
|
||||
type SwitchProperties = Parameters<typeof AriaSwitch>[0] & {
|
||||
readonly label: string;
|
||||
}
|
||||
|
||||
export default function Switch(properties: SwitchProperties) {
|
||||
return (
|
||||
<AriaSwitch
|
||||
{...properties}
|
||||
aria-label={properties.label}
|
||||
className='group flex gap-2 items-center'
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-[26px] w-[44px] shrink-0 cursor-default',
|
||||
'rounded-full shadow-inner bg-clip-padding',
|
||||
'border border-solid border-white/30 p-[3px]',
|
||||
'box-border transition duration-100 ease-in-out',
|
||||
'outline-none group-focus-visible:ring-2 ring-black',
|
||||
|
||||
'bg-main-700 dark:bg-main-800',
|
||||
'group-pressed:bg-main-800 dark:group-pressed:bg-main-900',
|
||||
'group-selected:bg-main-900 group-selected:group-pressed:bg-main-900',
|
||||
properties.isDisabled && 'opacity-50 cursor-not-allowed',
|
||||
properties.className
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
'h-[18px] w-[18px] transform rounded-full',
|
||||
'bg-white shadow transition duration-100',
|
||||
'ease-in-out translate-x-0 group-selected:translate-x-[100%]'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AriaSwitch>
|
||||
)
|
||||
}
|
||||
@ -26,6 +26,7 @@ export default function TextField(properties: TextFieldProperties) {
|
||||
className={cn(
|
||||
'block px-2.5 py-1.5 w-full rounded-lg my-1',
|
||||
'border border-ui-200 dark:border-ui-600',
|
||||
'dark:bg-ui-800 dark:text-ui-300',
|
||||
properties.className
|
||||
)}
|
||||
onChange={event => {
|
||||
|
||||
@ -1,47 +1,79 @@
|
||||
import { useToaster } from 'react-hot-toast/headless'
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
|
||||
import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast'
|
||||
import { type ReactNode, useRef } from 'react'
|
||||
import { Button } from 'react-aria-components'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { ClientOnly } from 'remix-utils/client-only'
|
||||
|
||||
export default function Toaster() {
|
||||
const { toasts, handlers } = useToaster()
|
||||
const { startPause, endPause, calculateOffset, updateHeight } = handlers
|
||||
import { cn } from '~/utils/cn'
|
||||
|
||||
type ToastProperties = AriaToastProps<ReactNode> & {
|
||||
readonly state: ToastState<ReactNode>;
|
||||
}
|
||||
|
||||
function Toast({ state, ...properties }: ToastProperties) {
|
||||
const reference = useRef(null)
|
||||
const { toastProps, titleProps, closeButtonProps } = useToast(properties, state, reference)
|
||||
|
||||
return (
|
||||
<div
|
||||
className='fixed bottom-0 right-0 p-4 w-80 h-1/2 overflow-hidden pointer-events-none'
|
||||
onMouseEnter={startPause}
|
||||
onMouseLeave={endPause}
|
||||
{...toastProps}
|
||||
ref={reference}
|
||||
className={cn(
|
||||
'bg-main-700 dark:bg-main-800 rounded-lg',
|
||||
'text-main-100 dark:text-main-200 z-50',
|
||||
'border border-main-600 dark:border-main-700',
|
||||
'flex items-center justify-between p-3 pl-4 w-80'
|
||||
)}
|
||||
>
|
||||
{toasts.slice(0, 6).map(toast => {
|
||||
const offset = calculateOffset(toast, {
|
||||
reverseOrder: false,
|
||||
gutter: -8
|
||||
})
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
const reference = (element: HTMLDivElement | null) => {
|
||||
if (element && typeof toast.height !== 'number') {
|
||||
const { height } = element.getBoundingClientRect()
|
||||
updateHeight(toast.id, -height)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={toast.id}
|
||||
ref={reference}
|
||||
className='fixed bottom-4 right-4 p-4 bg-gray-800 rounded-lg text-white transition-all duration-300'
|
||||
{...toast.ariaProps}
|
||||
style={{
|
||||
transform: `translateY(${offset}px) translateX(${toast.visible ? 0 : 200}%)`
|
||||
}}
|
||||
>
|
||||
{typeof toast.message === 'function' ? (
|
||||
toast.message(toast)
|
||||
) : (
|
||||
toast.message
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div {...titleProps}>{properties.toast.content}</div>
|
||||
<Button
|
||||
{...closeButtonProps}
|
||||
className={cn(
|
||||
'outline-none rounded-full p-1',
|
||||
'hover:bg-main-600 dark:hover:bg-main-700'
|
||||
)}
|
||||
>
|
||||
<XMarkIcon className='w-4 h-4'/>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const toasts = new ToastQueue<ReactNode>({
|
||||
maxVisibleToasts: 5
|
||||
})
|
||||
|
||||
export function toast(text: string) {
|
||||
return toasts.add(text, { timeout: 5000 })
|
||||
}
|
||||
|
||||
export function Toaster() {
|
||||
const reference = useRef(null)
|
||||
const state = useToastQueue(toasts)
|
||||
const { regionProps } = useToastRegion({}, state, reference)
|
||||
|
||||
return (
|
||||
<ClientOnly>
|
||||
{() => createPortal(
|
||||
state.visibleToasts.length >= 0 ? (
|
||||
<div
|
||||
className={cn(
|
||||
'fixed bottom-4 right-4',
|
||||
'flex flex-col gap-4'
|
||||
)}
|
||||
{...regionProps}
|
||||
ref={reference}
|
||||
>
|
||||
{state.visibleToasts.map(toast => (
|
||||
<Toast key={toast.key} toast={toast} state={state}/>
|
||||
))}
|
||||
</div>
|
||||
) : undefined,
|
||||
document.body
|
||||
)}
|
||||
</ClientOnly>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
} from '@remix-run/react'
|
||||
|
||||
import { ErrorPopup } from '~/components/Error'
|
||||
import Toaster from '~/components/Toaster'
|
||||
import { Toaster } from '~/components/Toaster'
|
||||
import stylesheet from '~/tailwind.css?url'
|
||||
import { getContext, registerConfigWatcher } from '~/utils/config'
|
||||
|
||||
|
||||
@ -6,10 +6,10 @@ import CodeMirror from '@uiw/react-codemirror'
|
||||
import clsx from 'clsx'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import CodeMirrorMerge from 'react-codemirror-merge'
|
||||
import { toast } from 'react-hot-toast/headless'
|
||||
|
||||
import Button from '~/components/Button'
|
||||
import Spinner from '~/components/Spinner'
|
||||
import { toast } from '~/components/Toaster'
|
||||
|
||||
import Fallback from './fallback'
|
||||
|
||||
@ -48,28 +48,24 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
|
||||
<>
|
||||
<div className={clsx(
|
||||
'border border-gray-200 dark:border-gray-700',
|
||||
'rounded-b-lg rounded-tr-lg mb-2 overflow-hidden'
|
||||
'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden'
|
||||
)}
|
||||
>
|
||||
{loading ? (
|
||||
<Fallback acl={acl} where='client'/>
|
||||
) : (
|
||||
mode === 'edit' ? (
|
||||
<CodeMirror
|
||||
value={acl}
|
||||
className='h-editor text-sm'
|
||||
theme={light ? githubLight : githubDark}
|
||||
extensions={[aclType]}
|
||||
readOnly={!data.hasAclWrite}
|
||||
onChange={value => {
|
||||
setAcl(value)
|
||||
}}
|
||||
/>
|
||||
<div className='overflow-y-scroll h-editor text-sm'>
|
||||
{loading ? (
|
||||
<Fallback acl={acl} where='client'/>
|
||||
) : (
|
||||
<div
|
||||
className='overflow-y-scroll'
|
||||
style={{ height: 'calc(100vh - 20rem)' }}
|
||||
>
|
||||
mode === 'edit' ? (
|
||||
<CodeMirror
|
||||
value={acl}
|
||||
theme={light ? githubLight : githubDark}
|
||||
extensions={[aclType]}
|
||||
readOnly={!data.hasAclWrite}
|
||||
onChange={value => {
|
||||
setAcl(value)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<CodeMirrorMerge
|
||||
theme={light ? githubLight : githubDark}
|
||||
orientation='a-b'
|
||||
@ -85,9 +81,9 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
|
||||
extensions={[aclType]}
|
||||
/>
|
||||
</CodeMirrorMerge>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { Tab } from '@headlessui/react'
|
||||
import { BeakerIcon, CubeTransparentIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
|
||||
import { type ActionFunctionArgs, json } from '@remix-run/node'
|
||||
import { useLoaderData } from '@remix-run/react'
|
||||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
import { Fragment } from 'react/jsx-runtime'
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
|
||||
import { ClientOnly } from 'remix-utils/client-only'
|
||||
|
||||
import Notice from '~/components/Notice'
|
||||
import { cn } from '~/utils/cn'
|
||||
import { getAcl, getContext, patchAcl } from '~/utils/config'
|
||||
import { sighupHeadscale } from '~/utils/docker'
|
||||
import { getSession } from '~/utils/sessions'
|
||||
@ -87,100 +86,80 @@ export default function Page() {
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<Tab.Group>
|
||||
<Tab.List className={clsx(
|
||||
<Tabs>
|
||||
<TabList className={cn(
|
||||
'flex border-t border-gray-200 dark:border-gray-700',
|
||||
'w-fit rounded-t-lg overflow-hidden',
|
||||
'text-gray-400 dark:text-gray-500'
|
||||
)}
|
||||
>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button
|
||||
type='button'
|
||||
className={clsx(
|
||||
'px-4 py-2 rounded-tl-lg',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-l border-gray-200 dark:border-gray-700',
|
||||
selected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<PencilSquareIcon className='w-5 h-5'/>
|
||||
<p>
|
||||
Edit file
|
||||
</p>
|
||||
</button>
|
||||
<Tab
|
||||
id='edit'
|
||||
className={({ isSelected }) => cn(
|
||||
'px-4 py-2 rounded-tl-lg',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-x border-gray-200 dark:border-gray-700',
|
||||
isSelected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<PencilSquareIcon className='w-5 h-5'/>
|
||||
<p>Edit file</p>
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button
|
||||
type='button'
|
||||
className={clsx(
|
||||
'px-4 py-2',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-x border-gray-200 dark:border-gray-700',
|
||||
selected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<EyeIcon className='w-5 h-5'/>
|
||||
<p>
|
||||
Preview changes
|
||||
</p>
|
||||
</button>
|
||||
<Tab
|
||||
id='diff'
|
||||
className={({ isSelected }) => cn(
|
||||
'px-4 py-2',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-x border-gray-200 dark:border-gray-700',
|
||||
isSelected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<EyeIcon className='w-5 h-5'/>
|
||||
<p>Preview changes</p>
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button
|
||||
type='button'
|
||||
className={clsx(
|
||||
'px-4 py-2 rounded-tr-lg',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-r border-gray-200 dark:border-gray-700',
|
||||
selected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<BeakerIcon className='w-5 h-5'/>
|
||||
<p>
|
||||
Preview rules
|
||||
</p>
|
||||
</button>
|
||||
<Tab
|
||||
id='preview'
|
||||
className={({ isSelected }) => cn(
|
||||
'px-4 py-2 rounded-tr-lg',
|
||||
'focus:outline-none flex items-center gap-2',
|
||||
'border-x border-gray-200 dark:border-gray-700',
|
||||
isSelected ? 'text-gray-900 dark:text-gray-100' : ''
|
||||
)}
|
||||
>
|
||||
<BeakerIcon className='w-5 h-5'/>
|
||||
<p>Preview rules</p>
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
|
||||
{() => (
|
||||
<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
|
||||
)}
|
||||
</ClientOnly>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
|
||||
{() => (
|
||||
<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
|
||||
)}
|
||||
</ClientOnly>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div
|
||||
className={clsx(
|
||||
'border border-gray-200 dark:border-gray-700',
|
||||
'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
|
||||
'p-16 flex flex-col items-center justify-center'
|
||||
)}
|
||||
>
|
||||
<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
|
||||
<p className='w-1/2 text-center mt-4'>
|
||||
The Preview rules is very much still a work in progress.
|
||||
It is a bit complicated to implement right now but hopefully it will be available soon.
|
||||
</p>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</TabList>
|
||||
<TabPanel id='edit'>
|
||||
<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
|
||||
{() => (
|
||||
<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
|
||||
)}
|
||||
</ClientOnly>
|
||||
</TabPanel>
|
||||
<TabPanel id='diff'>
|
||||
<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
|
||||
{() => (
|
||||
<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
|
||||
)}
|
||||
</ClientOnly>
|
||||
</TabPanel>
|
||||
<TabPanel id='preview'>
|
||||
<div
|
||||
className={cn(
|
||||
'border border-gray-200 dark:border-gray-700',
|
||||
'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
|
||||
'p-16 flex flex-col items-center justify-center'
|
||||
)}
|
||||
>
|
||||
<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
|
||||
<p className='w-1/2 text-center mt-4'>
|
||||
The Preview rules is very much still a work in progress.
|
||||
It is a bit complicated to implement right now but hopefully it will be available soon.
|
||||
</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
|
||||
isDisabled={disabled}
|
||||
className={cn(
|
||||
'w-fit text-sm rounded-lg px-4 py-2',
|
||||
'bg-gray-700 dark:bg-gray-800 text-white',
|
||||
'bg-main-700 dark:bg-main-800 text-white',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
|
||||
@ -47,7 +47,7 @@ export default function Modal({ name, disabled }: Properties) {
|
||||
isDisabled={disabled}
|
||||
className={cn(
|
||||
'w-fit text-sm rounded-lg px-4 py-2',
|
||||
'bg-gray-700 dark:bg-gray-800 text-white',
|
||||
'bg-main-700 dark:bg-main-800 text-white',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { Switch } from '@headlessui/react'
|
||||
import { type ActionFunctionArgs } from '@remix-run/node'
|
||||
import { json, useFetcher, useLoaderData } from '@remix-run/react'
|
||||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
|
||||
import Button from '~/components/Button'
|
||||
@ -9,6 +7,7 @@ import Code from '~/components/Code'
|
||||
import Input from '~/components/Input'
|
||||
import Notice from '~/components/Notice'
|
||||
import Spinner from '~/components/Spinner'
|
||||
import Switch from '~/components/Switch'
|
||||
import TableList from '~/components/TableList'
|
||||
import { getConfig, getContext, patchConfig } from '~/utils/config'
|
||||
import { restartHeadscale } from '~/utils/docker'
|
||||
@ -97,12 +96,9 @@ export default function Page() {
|
||||
Override local DNS
|
||||
</span>
|
||||
<Switch
|
||||
checked={localOverride}
|
||||
disabled={!data.hasConfigWrite}
|
||||
className={clsx(
|
||||
localOverride ? 'bg-gray-800 dark:bg-gray-600' : 'bg-gray-200 dark:bg-gray-400',
|
||||
'relative inline-flex h-4 w-9 items-center rounded-full'
|
||||
)}
|
||||
label='Override local DNS'
|
||||
defaultSelected={localOverride}
|
||||
isDisabled={!data.hasConfigWrite}
|
||||
onChange={() => {
|
||||
fetcher.submit({
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
@ -114,15 +110,7 @@ export default function Page() {
|
||||
|
||||
setLocalOverride(!localOverride)
|
||||
}}
|
||||
>
|
||||
<span className='sr-only'>Override local DNS</span>
|
||||
<span
|
||||
className={clsx(
|
||||
localOverride ? 'translate-x-6' : 'translate-x-1',
|
||||
'inline-block h-2 w-2 transform rounded-full bg-white transition'
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<TableList>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline'
|
||||
import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
|
||||
import { Form, Outlet, useLoaderData, useRouteError } from '@remix-run/react'
|
||||
import { Form, Outlet, useLoaderData } from '@remix-run/react'
|
||||
|
||||
import { ErrorPopup } from '~/components/Error'
|
||||
import Menu from '~/components/Menu'
|
||||
@ -43,9 +43,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
|
||||
export default function Layout() {
|
||||
const data = useLoaderData<typeof loader>()
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className='mb-6 bg-gray-800 text-white dark:bg-gray-700'>
|
||||
<header className='mb-6 bg-main-700 dark:bg-main-800 text-white'>
|
||||
<nav className='container mx-auto'>
|
||||
<div className='flex items-center justify-between mb-8 pt-4'>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
@ -71,7 +72,7 @@ export default function Layout() {
|
||||
<p className='font-bold'>{data.user?.name}</p>
|
||||
<p>{data.user?.email}</p>
|
||||
</Menu.Item>
|
||||
<Menu.Item className='text-red-700 cursor-pointer'>
|
||||
<Menu.Item className='text-red-500 dark:text-red-400'>
|
||||
<Form method='POST' action='/logout'>
|
||||
<button type='submit' className='w-full text-right'>
|
||||
Logout
|
||||
@ -104,15 +105,9 @@ export default function Layout() {
|
||||
}
|
||||
|
||||
export function ErrorBoundary() {
|
||||
const data = useLoaderData<typeof loader>()
|
||||
const error = useRouteError()
|
||||
if (!data) {
|
||||
throw error
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className='mb-16 bg-gray-800 text-white dark:bg-gray-700'>
|
||||
<header className='mb-16 bg-main-700 dark:bg-main-800 text-white'>
|
||||
<nav className='container mx-auto'>
|
||||
<div className='flex items-center gap-x-2 mb-8 pt-4'>
|
||||
<CpuChipIcon className='w-8 h-8'/>
|
||||
@ -121,13 +116,9 @@ export function ErrorBoundary() {
|
||||
<div className='flex items-center gap-x-4'>
|
||||
<TabLink to='/machines' name='Machines' icon={<ServerStackIcon className='w-5 h-5'/>}/>
|
||||
<TabLink to='/users' name='Users' icon={<UsersIcon className='w-5 h-5'/>}/>
|
||||
{data.hasAcl ? <TabLink to='/acls' name='Access Control' icon={<LockClosedIcon className='w-5 h-5'/>}/> : undefined}
|
||||
{data.hasConfig ? (
|
||||
<>
|
||||
<TabLink to='/dns' name='DNS' icon={<GlobeAltIcon className='w-5 h-5'/>}/>
|
||||
<TabLink to='/settings' name='Settings' icon={<Cog8ToothIcon className='w-5 h-5'/>}/>
|
||||
</>
|
||||
) : undefined}
|
||||
<TabLink to='/acls' name='Access Control' icon={<LockClosedIcon className='w-5 h-5'/>}/>
|
||||
<TabLink to='/dns' name='DNS' icon={<GlobeAltIcon className='w-5 h-5'/>}/>
|
||||
<TabLink to='/settings' name='Settings' icon={<Cog8ToothIcon className='w-5 h-5'/>}/>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
"@dnd-kit/modifiers": "^7.0.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"@react-aria/toast": "3.0.0-beta.10",
|
||||
"@react-stately/toast": "3.0.0-beta.2",
|
||||
"@remix-run/node": "^2.8.1",
|
||||
"@remix-run/react": "^2.8.1",
|
||||
"@remix-run/serve": "^2.8.1",
|
||||
@ -31,7 +32,6 @@
|
||||
"react-aria-components": "^1.1.1",
|
||||
"react-codemirror-merge": "^4.21.25",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"remix-utils": "^7.6.0",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
"tailwindcss-react-aria-components": "^1.1.1",
|
||||
|
||||
101
pnpm-lock.yaml
101
pnpm-lock.yaml
@ -23,12 +23,15 @@ dependencies:
|
||||
'@dnd-kit/utilities':
|
||||
specifier: ^3.2.2
|
||||
version: 3.2.2(react@18.2.0)
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.18
|
||||
version: 1.7.18(react-dom@18.2.0)(react@18.2.0)
|
||||
'@heroicons/react':
|
||||
specifier: ^2.1.3
|
||||
version: 2.1.3(react@18.2.0)
|
||||
'@react-aria/toast':
|
||||
specifier: 3.0.0-beta.10
|
||||
version: 3.0.0-beta.10(react@18.2.0)
|
||||
'@react-stately/toast':
|
||||
specifier: 3.0.0-beta.2
|
||||
version: 3.0.0-beta.2(react@18.2.0)
|
||||
'@remix-run/node':
|
||||
specifier: ^2.8.1
|
||||
version: 2.8.1(typescript@5.4.3)
|
||||
@ -65,9 +68,6 @@ dependencies:
|
||||
react-dom:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
react-hot-toast:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
|
||||
remix-utils:
|
||||
specifier: ^7.6.0
|
||||
version: 7.6.0(@remix-run/node@2.8.1)(@remix-run/react@2.8.1)(react@18.2.0)
|
||||
@ -1110,19 +1110,6 @@ packages:
|
||||
tslib: 2.6.2
|
||||
dev: false
|
||||
|
||||
/@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: ^16 || ^17 || ^18
|
||||
react-dom: ^16 || ^17 || ^18
|
||||
dependencies:
|
||||
'@tanstack/react-virtual': 3.2.0(react-dom@18.2.0)(react@18.2.0)
|
||||
client-only: 0.0.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@heroicons/react@2.1.3(react@18.2.0):
|
||||
resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
|
||||
peerDependencies:
|
||||
@ -1606,6 +1593,18 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@react-aria/landmark@3.0.0-beta.10(react@18.2.0):
|
||||
resolution: {integrity: sha512-qFfAVgCUP/d+sFXCYVJHOMA8fD9VGBWcbJIbfz14X0sdyJ1gj5SL/m4o7cX3OsD9tgPz2A33c1FfmO2gN/qOVg==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
|
||||
dependencies:
|
||||
'@react-aria/utils': 3.23.2(react@18.2.0)
|
||||
'@react-types/shared': 3.22.1(react@18.2.0)
|
||||
'@swc/helpers': 0.5.10
|
||||
react: 18.2.0
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@react-aria/link@3.6.5(react@18.2.0):
|
||||
resolution: {integrity: sha512-kg8CxKqkciQFzODvLAfxEs8gbqNXFZCW/ISOE2LHYKbh9pA144LVo71qO3SPeYVVzIjmZeW4vEMdZwqkNozecw==}
|
||||
peerDependencies:
|
||||
@ -1958,6 +1957,22 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@react-aria/toast@3.0.0-beta.10(react@18.2.0):
|
||||
resolution: {integrity: sha512-b4PZaCZBc8oiiZ4xxWA0pusPj0VBiNbGJsmyQSe9L0OS7/wL+Z+70xpUMzL+RzhtRuP/lNx7G9a92HwcxFfrog==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
|
||||
dependencies:
|
||||
'@react-aria/i18n': 3.10.2(react@18.2.0)
|
||||
'@react-aria/interactions': 3.21.1(react@18.2.0)
|
||||
'@react-aria/landmark': 3.0.0-beta.10(react@18.2.0)
|
||||
'@react-aria/utils': 3.23.2(react@18.2.0)
|
||||
'@react-stately/toast': 3.0.0-beta.2(react@18.2.0)
|
||||
'@react-types/button': 3.9.2(react@18.2.0)
|
||||
'@react-types/shared': 3.22.1(react@18.2.0)
|
||||
'@swc/helpers': 0.5.10
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@react-aria/toggle@3.10.2(react@18.2.0):
|
||||
resolution: {integrity: sha512-DgitscHWgI6IFgnvp2HcMpLGX/cAn+XX9kF5RJQbRQ9NqUgruU5cEEGSOLMrEJ6zXDa2xmOiQ+kINcyNhA+JLg==}
|
||||
peerDependencies:
|
||||
@ -2284,6 +2299,16 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@react-stately/toast@3.0.0-beta.2(react@18.2.0):
|
||||
resolution: {integrity: sha512-LJT3VJ01VeQHTDt+6NwmRn4ma0plZWcWByAeJ24dLYJ0gUpHhHyCCIBB/C1BwZ3/eaNKn7/Crp5FONA6bBzDaA==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
|
||||
dependencies:
|
||||
'@swc/helpers': 0.5.10
|
||||
react: 18.2.0
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@react-stately/toggle@3.7.2(react@18.2.0):
|
||||
resolution: {integrity: sha512-SHCF2btcoK57c4lyhucRbyPBAFpp0Pdp0vcPdn3hUgqbu6e5gE0CwG/mgFmZRAQoc7PRc7XifL0uNw8diJJI0Q==}
|
||||
peerDependencies:
|
||||
@ -2925,21 +2950,6 @@ packages:
|
||||
tslib: 2.6.2
|
||||
dev: false
|
||||
|
||||
/@tanstack/react-virtual@3.2.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
'@tanstack/virtual-core': 3.2.0
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@tanstack/virtual-core@3.2.0:
|
||||
resolution: {integrity: sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==}
|
||||
dev: false
|
||||
|
||||
/@types/acorn@4.0.6:
|
||||
resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
|
||||
dependencies:
|
||||
@ -3884,6 +3894,7 @@ packages:
|
||||
|
||||
/csstype@3.1.3:
|
||||
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
|
||||
dev: true
|
||||
|
||||
/data-uri-to-buffer@3.0.1:
|
||||
resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==}
|
||||
@ -4926,14 +4937,6 @@ packages:
|
||||
resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
|
||||
dev: true
|
||||
|
||||
/goober@2.1.14(csstype@3.1.3):
|
||||
resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==}
|
||||
peerDependencies:
|
||||
csstype: ^3.0.10
|
||||
dependencies:
|
||||
csstype: 3.1.3
|
||||
dev: false
|
||||
|
||||
/gopd@1.0.1:
|
||||
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
|
||||
dependencies:
|
||||
@ -6935,20 +6938,6 @@ packages:
|
||||
scheduler: 0.23.0
|
||||
dev: false
|
||||
|
||||
/react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: '>=16'
|
||||
react-dom: '>=16'
|
||||
dependencies:
|
||||
goober: 2.1.14(csstype@3.1.3)
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- csstype
|
||||
dev: false
|
||||
|
||||
/react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
dev: true
|
||||
|
||||
Loading…
Reference in New Issue
Block a user