starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-20 07:41:22 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Remove most of Radix UI

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 13:16:58 -07:00
parent b84a5530be
commit e19ea612f5
31 changed files with 549 additions and 2017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -21,7 +21,8 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="cm-portal" class="cm-portal" style="pointer-events: auto"></div> <div id="cm-portal" class="cm-portal"></div>
<div id="react-portal"></div>
<div id="radix-portal" class="cm-portal"></div> <div id="radix-portal" class="cm-portal"></div>
<script type="module" src="/src-web/main.tsx"></script> <script type="module" src="/src-web/main.tsx"></script>
</body> </body>

1346
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -25,14 +25,7 @@
"@lezer/generator": "^1.2.2", "@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3", "@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.3", "@lezer/lr": "^1.3.3",
"@radix-ui/react-checkbox": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-icons": "^1.2.0", "@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-popover": "1.0.3",
"@radix-ui/react-scroll-area": "^1.0.2",
"@radix-ui/react-separator": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.3",
"@tailwindcss/container-queries": "^0.1.0", "@tailwindcss/container-queries": "^0.1.0",
"@tanstack/react-query": "^4.24.10", "@tanstack/react-query": "^4.24.10",
"@tanstack/react-query-devtools": "^4.26.1", "@tanstack/react-query-devtools": "^4.26.1",

BIN
src-tauri/icons/icon.icns
View File

Binary file not shown.

10
src-tauri/src/main.rs
View File

@@ -334,6 +334,15 @@ async fn requests(
.map_err(|e| e.to_string()) .map_err(|e| e.to_string())
} }
#[tauri::command]
async fn get_request(
id: &str,
db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await;
models::get_request(id, pool).await.map_err(|e| e.to_string())
}
#[tauri::command] #[tauri::command]
async fn responses( async fn responses(
request_id: &str, request_id: &str,
@@ -497,6 +506,7 @@ fn main() {
.invoke_handler(tauri::generate_handler![ .invoke_handler(tauri::generate_handler![
greet, greet,
workspaces, workspaces,
get_request,
requests, requests,
send_request, send_request,
create_request, create_request,

4
src-web/components/GraphQLEditor.tsx
View File

@@ -1,7 +1,7 @@
import { formatSdl } from 'format-graphql'; import { formatSdl } from 'format-graphql';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useUniqueKey } from '../hooks/useUniqueKey'; import { useUniqueKey } from '../hooks/useUniqueKey';
import { Divider } from './core/Divider'; import { Separator } from './core/Separator';
import type { EditorProps } from './core/Editor'; import type { EditorProps } from './core/Editor';
import { Editor } from './core/Editor'; import { Editor } from './core/Editor';
@@ -58,7 +58,7 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
placeholder={`query { }`} placeholder={`query { }`}
{...extraEditorProps} {...extraEditorProps}
/> />
<Divider /> <Separator />
<p className="pt-1 text-gray-500 text-sm">Variables</p> <p className="pt-1 text-gray-500 text-sm">Variables</p>
<Editor <Editor
useTemplating useTemplating

12
src-web/components/Portal.tsx Normal file
View File

@@ -0,0 +1,12 @@
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { usePortal } from '../hooks/usePortal';
interface Props {
children: ReactNode;
name: string;
}
export function Portal({ children, name }: Props) {
const portal = usePortal(name);
return createPortal(children, portal);
}

31
src-web/components/RequestMethodDropdown.tsx
View File

@@ -1,35 +1,26 @@
import { memo, useCallback } from 'react'; import { memo } from 'react';
import { Button } from './core/Button'; import { Button } from './core/Button';
import type { DropdownMenuRadioItem } from './core/Dropdown'; import { RadioDropdown } from './core/RadioDropdown';
import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
type Props = { type Props = {
method: string; method: string;
onChange: (method: string) => void; onChange: (method: string) => void;
}; };
const items = [ const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'].map((m) => ({
{ label: 'GET', value: 'GET' }, value: m,
{ label: 'PUT', value: 'PUT' }, label: m,
{ label: 'POST', value: 'POST' }, }));
{ label: 'PATCH', value: 'PATCH' },
{ label: 'DELETE', value: 'DELETE' },
{ label: 'OPTIONS', value: 'OPTIONS' },
{ label: 'HEAD', value: 'HEAD' },
];
export const RequestMethodDropdown = memo(function RequestMethodDropdown({ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
method, method,
onChange, onChange,
}: Props) { }: Props) {
const handleChange = useCallback((i: DropdownMenuRadioItem) => onChange(i.value), [onChange]);
return ( return (
<DropdownMenuRadio onValueChange={handleChange} value={method.toUpperCase()} items={items}> <RadioDropdown value={method} items={methodItems} onChange={onChange}>
<DropdownMenuTrigger> <Button type="button" size="sm" className="mx-0.5" justify="start">
<Button type="button" size="sm" className="mx-0.5" justify="start"> {method.toUpperCase()}
{method.toUpperCase()} </Button>
</Button> </RadioDropdown>
</DropdownMenuTrigger>
</DropdownMenuRadio>
); );
}); });

9
src-web/components/RequestPane.tsx
View File

@@ -33,7 +33,7 @@ export function RequestPane({ fullHeight, className }: Props) {
value: 'body', value: 'body',
label: activeRequest?.bodyType ?? 'NoBody', label: activeRequest?.bodyType ?? 'NoBody',
options: { options: {
onValueChange: (t) => updateRequest.mutate({ bodyType: t.value }), onChange: (bodyType: string) => updateRequest.mutate({ bodyType }),
value: activeRequest?.bodyType ?? 'nobody', value: activeRequest?.bodyType ?? 'nobody',
items: [ items: [
{ label: 'No Body', value: 'nobody' }, { label: 'No Body', value: 'nobody' },
@@ -60,7 +60,12 @@ export function RequestPane({ fullHeight, className }: Props) {
<div className={classnames(className, 'py-3 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}> <div className={classnames(className, 'py-3 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
{activeRequest && ( {activeRequest && (
<> <>
<UrlBar className="pl-3" request={activeRequest} /> <UrlBar
className="pl-3"
id={activeRequest.id}
url={activeRequest.url}
method={activeRequest.method}
/>
<Tabs <Tabs
value={activeTab.value} value={activeTab.value}
onChangeValue={activeTab.set} onChangeValue={activeTab.set}

30
src-web/components/RequestSettingsDropdown.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { memo } from 'react';
import { useActiveRequestId } from '../hooks/useActiveRequestId';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
export const RequestSettingsDropdown = memo(function RequestSettingsDropdown() {
const activeRequestId = useActiveRequestId();
const deleteRequest = useDeleteRequest(activeRequestId ?? null);
return (
<Dropdown
items={[
{
label: 'Something Else',
onSelect: () => null,
leftSlot: <Icon icon="camera" />,
},
'-----',
{
label: 'Delete Request',
onSelect: deleteRequest.mutate,
leftSlot: <Icon icon="trash" />,
},
]}
>
<IconButton size="sm" title="Request Options" icon="gear" />
</Dropdown>
);
});

17
src-web/components/ResponsePane.tsx
View File

@@ -8,7 +8,7 @@ import { useResponseViewMode } from '../hooks/useResponseViewMode';
import { tryFormatJson } from '../lib/formatters'; import { tryFormatJson } from '../lib/formatters';
import type { HttpResponse } from '../lib/models'; import type { HttpResponse } from '../lib/models';
import { pluralize } from '../lib/pluralize'; import { pluralize } from '../lib/pluralize';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Editor } from './core/Editor'; import { Editor } from './core/Editor';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
@@ -85,6 +85,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
{ {
label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`, label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
onSelect: deleteAllResponses.mutate, onSelect: deleteAllResponses.mutate,
hidden: responses.length <= 1,
disabled: responses.length === 0, disabled: responses.length === 0,
}, },
'-----', '-----',
@@ -95,14 +96,12 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
})), })),
]} ]}
> >
<DropdownMenuTrigger> <IconButton
<IconButton title="Show response history"
title="Show response history" icon="triangleDown"
icon="triangleDown" className="ml-auto"
className="ml-auto" size="sm"
size="sm" />
/>
</DropdownMenuTrigger>
</Dropdown> </Dropdown>
</HStack> </HStack>
</> </>

123
src-web/components/Sidebar.tsx
View File

@@ -1,14 +1,8 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { import type { ForwardedRef, KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
CSSProperties,
ForwardedRef,
KeyboardEvent,
MouseEvent as ReactMouseEvent,
} from 'react';
import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react'; import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import type { XYCoord } from 'react-dnd'; import type { XYCoord } from 'react-dnd';
import { useDrag, useDragLayer, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest'; import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest'; import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -18,10 +12,9 @@ import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest'; import { useUpdateRequest } from '../hooks/useUpdateRequest';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { Button } from './core/Button'; import { Button } from './core/Button';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
import { ScrollArea } from './core/ScrollArea';
import { HStack, VStack } from './core/Stacks'; import { HStack, VStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion'; import { WindowDragRegion } from './core/WindowDragRegion';
import { DropMarker } from './DropMarker'; import { DropMarker } from './DropMarker';
@@ -115,16 +108,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
}} }}
/> />
</HStack> </HStack>
<ScrollArea> <VStack as="ul" className="relative py-3" draggable={false}>
<VStack as="ul" className="relative py-3" draggable={false}> <SidebarItems
<SidebarItems sidebarWidth={sidebarWidth}
sidebarWidth={sidebarWidth} activeRequestId={activeRequest?.id}
activeRequestId={activeRequest?.id} requests={requests}
requests={requests} />
/> </VStack>
<CustomDragLayer sidebarWidth={sidebarWidth} />
</VStack>
</ScrollArea>
<HStack className="mx-1 pb-1" alignItems="center" justifyContent="end"> <HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
<ToggleThemeButton /> <ToggleThemeButton />
</HStack> </HStack>
@@ -190,23 +180,21 @@ function SidebarItems({
return ( return (
<> <>
{requests.map((r, i) => { {requests.map((r, i) => (
return ( <Fragment key={r.id}>
<Fragment key={r.id}> {hoveredIndex === i && <DropMarker />}
{hoveredIndex === i && <DropMarker />} <DraggableSidebarItem
<DraggableSidebarItem key={r.id}
key={r.id} requestId={r.id}
requestId={r.id} requestName={r.name}
requestName={r.name} workspaceId={r.workspaceId}
workspaceId={r.workspaceId} active={r.id === activeRequestId}
active={r.id === activeRequestId} sidebarWidth={sidebarWidth}
sidebarWidth={sidebarWidth} onMove={handleMove}
onMove={handleMove} onEnd={handleEnd}
onEnd={handleEnd} />
/> </Fragment>
</Fragment> ))}
);
})}
{hoveredIndex === requests.length && <DropMarker />} {hoveredIndex === requests.length && <DropMarker />}
</> </>
); );
@@ -317,20 +305,17 @@ const _SidebarItem = forwardRef(function SidebarItem(
)} )}
</Button> </Button>
<Dropdown items={actionItems}> <Dropdown items={actionItems}>
<DropdownMenuTrigger <IconButton
className={classnames( className={classnames(
'absolute right-0 top-0 transition-opacity opacity-0', 'absolute right-0 top-0 transition-opacity opacity-0',
'group-hover/item:opacity-100 focus-visible:opacity-100', 'group-hover/item:opacity-100 focus-visible:opacity-100',
)} )}
> color="custom"
<IconButton size="sm"
color="custom" iconSize="sm"
size="sm" title="Delete request"
iconSize="sm" icon="dotsH"
title="Delete request" />
icon="dotsH"
/>
</DropdownMenuTrigger>
</Dropdown> </Dropdown>
</div> </div>
</li> </li>
@@ -375,11 +360,7 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onMove], [onMove],
); );
const [{ isDragging }, connectDrag, preview] = useDrag< const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>(
DragItem,
unknown,
{ isDragging: boolean }
>(
() => ({ () => ({
type: ItemTypes.REQUEST, type: ItemTypes.REQUEST,
item: () => ({ id: requestId, requestName, workspaceId }), item: () => ({ id: requestId, requestName, workspaceId }),
@@ -390,8 +371,6 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onEnd], [onEnd],
); );
preview(getEmptyImage(), { captureDraggingState: true });
connectDrag(ref); connectDrag(ref);
connectDrop(ref); connectDrop(ref);
@@ -407,39 +386,3 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
/> />
); );
}); });
function CustomDragLayer({ sidebarWidth }: { sidebarWidth: number }) {
const { itemType, isDragging, item, currentOffset } = useDragLayer<any, DragItem>((monitor) => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging(),
}));
const styles = useMemo<CSSProperties>(() => {
if (currentOffset === null) {
return { display: 'none' };
}
const transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
return { transform, WebkitTransform: transform };
}, [currentOffset]);
if (!isDragging) {
return null;
}
return (
<div className="fixed !pointer-events-none inset-0">
<div className="absolute pointer-events-none" style={styles}>
{itemType === ItemTypes.REQUEST && (
<SidebarItem
sidebarWidth={sidebarWidth}
workspaceId={item.workspaceId}
requestName={item.requestName}
requestId={item.id}
/>
)}
</div>
</div>
);
}

19
src-web/components/UrlBar.tsx
View File

@@ -9,17 +9,16 @@ import { IconButton } from './core/IconButton';
import { Input } from './core/Input'; import { Input } from './core/Input';
import { RequestMethodDropdown } from './RequestMethodDropdown'; import { RequestMethodDropdown } from './RequestMethodDropdown';
interface Props { type Props = Pick<HttpRequest, 'id' | 'url' | 'method'> & {
request: HttpRequest;
className?: string; className?: string;
} };
export const UrlBar = memo(function UrlBar({ request, className }: Props) { export const UrlBar = memo(function UrlBar({ id: requestId, url, method, className }: Props) {
const sendRequest = useSendRequest(request.id); const sendRequest = useSendRequest(requestId);
const updateRequest = useUpdateRequest(request.id); const updateRequest = useUpdateRequest(requestId);
const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []); const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []); const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
const loading = useIsResponseLoading(request.id); const loading = useIsResponseLoading(requestId);
const handleSubmit = useCallback( const handleSubmit = useCallback(
async (e: FormEvent) => { async (e: FormEvent) => {
@@ -32,7 +31,7 @@ export const UrlBar = memo(function UrlBar({ request, className }: Props) {
return ( return (
<form onSubmit={handleSubmit} className={classnames(className, 'w-full flex items-center')}> <form onSubmit={handleSubmit} className={classnames(className, 'w-full flex items-center')}>
<Input <Input
key={request.id} key={requestId}
hideLabel hideLabel
useTemplating useTemplating
contentType="url" contentType="url"
@@ -41,9 +40,9 @@ export const UrlBar = memo(function UrlBar({ request, className }: Props) {
label="Enter URL" label="Enter URL"
containerClassName="shadow shadow-gray-100 dark:shadow-gray-0" containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
onChange={handleUrlChange} onChange={handleUrlChange}
defaultValue={request.url} defaultValue={url}
placeholder="Enter a URL..." placeholder="Enter a URL..."
leftSlot={<RequestMethodDropdown method={request.method} onChange={handleMethodChange} />} leftSlot={<RequestMethodDropdown method={method} onChange={handleMethodChange} />}
rightSlot={ rightSlot={
<IconButton <IconButton
title="Send Request" title="Send Request"

27
src-web/components/Workspace.tsx
View File

@@ -3,14 +3,14 @@ import { useMemo, useRef } from 'react';
import { useWindowSize } from 'react-use'; import { useWindowSize } from 'react-use';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useActiveWorkspace } from '../hooks/useActiveWorkspace'; import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useSidebarWidth } from '../hooks/useSidebarWidth'; import { useSidebarWidth } from '../hooks/useSidebarWidth';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown'; import { Button } from './core/Button';
import { Icon } from './core/Icon'; import { Dropdown } from './core/Dropdown';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
import { HStack } from './core/Stacks'; import { HStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion'; import { WindowDragRegion } from './core/WindowDragRegion';
import { RequestPane } from './RequestPane'; import { RequestPane } from './RequestPane';
import { RequestSettingsDropdown } from './RequestSettingsDropdown';
import { ResponsePane } from './ResponsePane'; import { ResponsePane } from './ResponsePane';
import { Sidebar } from './Sidebar'; import { Sidebar } from './Sidebar';
import { WorkspaceDropdown } from './WorkspaceDropdown'; import { WorkspaceDropdown } from './WorkspaceDropdown';
@@ -18,7 +18,6 @@ import { WorkspaceDropdown } from './WorkspaceDropdown';
export default function Workspace() { export default function Workspace() {
const activeRequest = useActiveRequest(); const activeRequest = useActiveRequest();
const activeWorkspace = useActiveWorkspace(); const activeWorkspace = useActiveWorkspace();
const deleteRequest = useDeleteRequest(activeRequest?.id ?? null);
const mainContentRef = useRef<HTMLDivElement>(null); const mainContentRef = useRef<HTMLDivElement>(null);
const windowSize = useWindowSize(); const windowSize = useWindowSize();
@@ -57,25 +56,7 @@ export default function Workspace() {
</div> </div>
<div className="flex-1 flex justify-end -mr-2"> <div className="flex-1 flex justify-end -mr-2">
<IconButton size="sm" title="" icon="magnifyingGlass" /> <IconButton size="sm" title="" icon="magnifyingGlass" />
<Dropdown <RequestSettingsDropdown />
items={[
{
label: 'Something Else',
onSelect: () => null,
leftSlot: <Icon icon="camera" />,
},
'-----',
{
label: 'Delete Request',
onSelect: deleteRequest.mutate,
leftSlot: <Icon icon="trash" />,
},
]}
>
<DropdownMenuTrigger>
<IconButton size="sm" title="Request Options" icon="gear" />
</DropdownMenuTrigger>
</Dropdown>
</div> </div>
</HStack> </HStack>
<div <div

25
src-web/components/WorkspaceDropdown.tsx
View File

@@ -1,31 +1,32 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { useCallback, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useActiveWorkspace } from '../hooks/useActiveWorkspace'; import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
import { useCreateWorkspace } from '../hooks/useCreateWorkspace'; import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
import { useWorkspaces } from '../hooks/useWorkspaces'; import { useWorkspaces } from '../hooks/useWorkspaces';
import { Button } from './core/Button'; import { Button } from './core/Button';
import type { DropdownItem } from './core/Dropdown'; import type { DropdownItem } from './core/Dropdown';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
type Props = { type Props = {
className?: string; className?: string;
}; };
export function WorkspaceDropdown({ className }: Props) { export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }: Props) {
const navigate = useNavigate(); const navigate = useNavigate();
const workspaces = useWorkspaces(); const workspaces = useWorkspaces();
const activeWorkspace = useActiveWorkspace(); const activeWorkspace = useActiveWorkspace();
const activeWorkspaceId = useActiveWorkspaceId();
const createWorkspace = useCreateWorkspace({ navigateAfter: true }); const createWorkspace = useCreateWorkspace({ navigateAfter: true });
const items: DropdownItem[] = useMemo(() => { const items: DropdownItem[] = useMemo(() => {
const workspaceItems = workspaces.map((w) => ({ const workspaceItems = workspaces.map((w) => ({
label: w.name, label: w.name,
value: w.id, leftSlot: activeWorkspaceId === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
leftSlot: activeWorkspace?.id === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
onSelect: () => { onSelect: () => {
if (w.id === activeWorkspace?.id) return; if (w.id === activeWorkspaceId) return;
navigate(`/workspaces/${w.id}`); navigate(`/workspaces/${w.id}`);
}, },
})); }));
@@ -40,15 +41,13 @@ export function WorkspaceDropdown({ className }: Props) {
onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }), onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }),
}, },
]; ];
}, [workspaces, activeWorkspace]); }, [workspaces, activeWorkspaceId]);
return ( return (
<Dropdown items={items}> <Dropdown items={items}>
<DropdownMenuTrigger> <Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown>
<Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown> {activeWorkspace?.name ?? 'Unknown'}
{activeWorkspace?.name ?? 'Unknown'} </Button>
</Button>
</DropdownMenuTrigger>
</Dropdown> </Dropdown>
); );
} });

29
src-web/components/core/Checkbox.tsx
View File

@@ -1,35 +1,38 @@
import type { CheckedState } from '@radix-ui/react-checkbox';
import * as CB from '@radix-ui/react-checkbox';
import classnames from 'classnames'; import classnames from 'classnames';
import { useCallback } from 'react';
import { Icon } from './Icon'; import { Icon } from './Icon';
interface Props { interface Props {
checked: CheckedState; checked: boolean;
onChange: (checked: CheckedState) => void; onChange: (checked: boolean) => void;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
} }
export function Checkbox({ checked, onChange, className, disabled }: Props) { export function Checkbox({ checked, onChange, className, disabled }: Props) {
const handleClick = useCallback(() => {
onChange(!checked);
}, [onChange, checked]);
return ( return (
<CB.Root <button
role="checkbox"
aria-checked={checked ? 'true' : 'false'}
disabled={disabled} disabled={disabled}
checked={checked} onClick={handleClick}
onCheckedChange={onChange}
className={classnames( className={classnames(
className, className,
'flex-shrink-0 w-4 h-4 border border-gray-200 rounded', 'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
'focus:border-focus', 'focus:border-focus',
'disabled:opacity-disabled', 'disabled:opacity-disabled',
'outline-none',
checked && 'bg-gray-200/10', checked && 'bg-gray-200/10',
// Remove focus style // Remove focus style
'outline-none',
)} )}
> >
<CB.Indicator className="flex items-center justify-center"> <div className="flex items-center justify-center">
{checked === 'indeterminate' && <Icon icon="dividerH" />} <Icon size="sm" icon={checked ? 'check' : 'empty'} />
{checked === true && <Icon size="sm" icon="check" />} </div>
</CB.Indicator> </button>
</CB.Root>
); );
} }

502
src-web/components/core/Dropdown.tsx
View File

@@ -1,341 +1,229 @@
import * as D from '@radix-ui/react-dropdown-menu';
import { CheckIcon } from '@radix-ui/react-icons';
import classnames from 'classnames'; import classnames from 'classnames';
import { motion } from 'framer-motion'; import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
import type { ForwardedRef, ReactElement, ReactNode } from 'react'; import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { import { useKeyPressEvent } from 'react-use';
forwardRef, import { Portal } from '../Portal';
memo, import { Separator } from './Separator';
useCallback, import { VStack } from './Stacks';
useImperativeHandle,
useLayoutEffect,
useMemo,
useState,
} from 'react';
export interface DropdownMenuRadioItem {
label: string;
value: string;
}
export interface DropdownMenuRadioProps {
children: ReactElement<typeof DropdownMenuTrigger>;
onValueChange: ((v: DropdownMenuRadioItem) => void) | null;
value: string;
label?: string;
items: DropdownMenuRadioItem[];
}
export const DropdownMenuRadio = memo(function DropdownMenuRadio({
children,
items,
onValueChange,
label,
value,
}: DropdownMenuRadioProps) {
const handleChange = useCallback(
(value: string) => {
const item = items.find((item) => item.value === value);
if (item && onValueChange) {
onValueChange(item);
}
},
[items, onValueChange],
);
return (
<D.Root>
{children}
<DropdownMenuPortal>
<DropdownMenuContent>
{label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
<D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
{items.map((item) => (
<DropdownMenuRadioItem key={item.value} value={item.value}>
{item.label}
</DropdownMenuRadioItem>
))}
</D.DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</D.Root>
);
});
export type DropdownItem = export type DropdownItem =
| { | {
label: string; label: string;
onSelect?: () => void;
disabled?: boolean; disabled?: boolean;
hidden?: boolean;
leftSlot?: ReactNode; leftSlot?: ReactNode;
rightSlot?: ReactNode;
onSelect?: () => void;
} }
| '-----'; | '-----';
export interface DropdownProps { export interface DropdownProps {
children: ReactElement<typeof DropdownMenuTrigger>; children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
items: DropdownItem[]; items: DropdownItem[];
} }
export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) { export function Dropdown({ children, items }: DropdownProps) {
return ( const [open, setOpen] = useState<boolean>(false);
<D.Root> const ref = useRef<HTMLButtonElement>(null);
{children} const child = useMemo(
<DropdownMenuPortal> () =>
<DropdownMenuContent> cloneElement(Children.only(children) as never, {
{items.map((item, i) => { ref,
if (item === '-----') { 'aria-has-popup': 'true',
return <DropdownMenuSeparator key={i} />; onClick: (e: MouseEvent<HTMLButtonElement>) => {
} else { e.preventDefault();
return ( e.stopPropagation();
<DropdownMenuItem setOpen((o) => !o);
key={i} },
onSelect={() => item.onSelect?.()} }),
disabled={item.disabled} [children],
leftSlot={item.leftSlot}
>
{item.label}
</DropdownMenuItem>
);
}
})}
</DropdownMenuContent>
</DropdownMenuPortal>
</D.Root>
); );
});
interface DropdownMenuPortalProps { const handleClose = useCallback(() => {
children: ReactNode; setOpen(false);
ref.current?.focus();
}, [ref.current]);
useEffect(() => {
ref.current?.setAttribute('aria-expanded', open.toString());
}, [open]);
const triggerRect = useMemo(() => {
if (!open) return null;
return ref.current?.getBoundingClientRect();
}, [ref.current, open]);
return (
<div className="pointer-events-auto">
{child}
{open && triggerRect && (
<Menu items={items} triggerRect={triggerRect} onClose={handleClose} />
)}
</div>
);
} }
const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) { interface MenuProps {
const container = document.querySelector<Element>('#radix-portal'); className?: string;
if (container === null) return null; items: DropdownProps['items'];
const initial = useMemo(() => ({ opacity: 0 }), []); triggerRect: DOMRect;
const animate = useMemo(() => ({ opacity: 1 }), []); onClose: () => void;
return ( }
<D.Portal>
<motion.div initial={initial} animate={animate}>
{children}
</motion.div>
</D.Portal>
);
});
const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>( function Menu({ className, items, onClose, triggerRect }: MenuProps) {
function DropdownMenuContent( if (triggerRect === undefined) return null;
{ className, children, ...props }: D.DropdownMenuContentProps,
ref: ForwardedRef<HTMLDivElement>,
) {
const [styles, setStyles] = useState<{ maxHeight: number }>();
const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
const initDivRef = useCallback((ref: HTMLDivElement | null) => { const containerRef = useRef<HTMLDivElement | null>(null);
setDivRef(ref); const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
}, []);
// Calculate the max height so we can scroll // Calculate the max height so we can scroll
useLayoutEffect(() => { const initMenu = useCallback((el: HTMLDivElement | null) => {
if (divRef === null) return; if (el === null) return {};
// Needs to be in a setTimeout because the ref is not positioned yet const windowBox = document.documentElement.getBoundingClientRect();
// TODO: Make this better? const menuBox = el.getBoundingClientRect();
const t = setTimeout(() => { setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
const windowBox = document.documentElement.getBoundingClientRect(); }, []);
const menuBox = divRef.getBoundingClientRect();
const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
setStyles(styles);
});
return () => clearTimeout(t);
}, [divRef]);
return ( useKeyPressEvent('ArrowUp', () => {
<D.Content setSelectedIndex((currIndex) => {
ref={initDivRef} let nextIndex = (currIndex ?? 0) - 1;
align="start" const maxTries = items.length;
style={styles} for (let i = 0; i < maxTries; i++) {
className={classnames( if (items[nextIndex] === '-----') {
className, nextIndex--;
'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200', } else if (nextIndex < 0) {
'overflow-auto m-1', nextIndex = items.length - 1;
)} } else {
{...props} break;
>
{children}
</D.Content>
);
},
);
const DropdownMenuContent = memo(_DropdownMenuContent);
type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
const DropdownMenuItem = memo(function DropdownMenuItem({
leftSlot,
rightSlot,
className,
children,
disabled,
...props
}: DropdownMenuItemProps) {
return (
<D.Item
asChild
disabled={disabled}
className={classnames(className, disabled && 'opacity-disabled')}
{...props}
>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</D.Item>
);
});
// type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
//
// function DropdownMenuCheckboxItem({
// leftSlot,
// rightSlot,
// children,
// ...props
// }: DropdownMenuCheckboxItemProps) {
// return (
// <DropdownMenu.CheckboxItem asChild {...props}>
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
// {children}
// </ItemInner>
// </DropdownMenu.CheckboxItem>
// );
// }
// type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
//
// function DropdownMenuSubTrigger({
// leftSlot,
// rightSlot,
// children,
// ...props
// }: DropdownMenuSubTriggerProps) {
// return (
// <DropdownMenu.SubTrigger asChild {...props}>
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
// {children}
// </ItemInner>
// </DropdownMenu.SubTrigger>
// );
// }
type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
rightSlot,
children,
...props
}: DropdownMenuRadioItemProps) {
return (
<D.RadioItem asChild {...props}>
<ItemInner
rightSlot={rightSlot}
leftSlot={
<D.ItemIndicator>
<CheckIcon />
</D.ItemIndicator>
} }
}
return nextIndex;
});
});
useKeyPressEvent('ArrowDown', () => {
setSelectedIndex((currIndex) => {
let nextIndex = (currIndex ?? -1) + 1;
const maxTries = items.length;
for (let i = 0; i < maxTries; i++) {
if (items[nextIndex] === '-----') {
nextIndex++;
} else if (nextIndex >= items.length) {
nextIndex = 0;
} else {
break;
}
}
return nextIndex;
});
});
const containerStyles: CSSProperties = useMemo(() => {
const docWidth = document.documentElement.getBoundingClientRect().width;
const spaceRemaining = docWidth - triggerRect.left;
if (spaceRemaining < 200) {
return {
top: triggerRect?.bottom,
right: 0,
};
}
return {
top: triggerRect?.bottom,
left: triggerRect?.left,
};
}, [triggerRect]);
const handleSelect = useCallback(
(i: DropdownItem) => {
onClose();
setSelectedIndex(null);
if (i !== '-----') {
i.onSelect?.();
}
},
[onClose],
);
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
return (
<Portal name="dropdown">
<button aria-hidden title="close" className="fixed inset-0" onClick={onClose} />
<div
role="menu"
aria-orientation="vertical"
dir="ltr"
ref={containerRef}
style={containerStyles}
className={classnames(className, 'pointer-events-auto fixed z-50')}
> >
{children} {containerStyles && (
</ItemInner> <VStack
</D.RadioItem> ref={initMenu}
style={menuStyles}
tabIndex={-1}
className={classnames(
className,
'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
'border-gray-200 overflow-auto m-1',
)}
>
{items.map((item, i) => {
if (item === '-----') return <Separator key={i} className="my-1.5" />;
if (item.hidden) return null;
return (
<MenuItem
focused={i === selectedIndex}
onSelect={handleSelect}
key={i + item.label}
item={item}
/>
);
})}
</VStack>
)}
</div>
</Portal>
); );
});
// const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
// function DropdownMenuSubContent(
// { className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
// ref,
// ) {
// return (
// <DropdownMenu.SubContent
// ref={ref}
// alignOffset={0}
// sideOffset={4}
// className={classnames(className, dropdownMenuClasses)}
// {...props}
// />
// );
// },
// );
const DropdownMenuLabel = memo(function DropdownMenuLabel({
className,
children,
...props
}: D.DropdownMenuLabelProps) {
return (
<D.Label asChild {...props}>
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
{children}
</ItemInner>
</D.Label>
);
});
const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
className,
...props
}: D.DropdownMenuSeparatorProps) {
return (
<D.Separator
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
{...props}
/>
);
});
type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
children: ReactNode;
className?: string;
};
export const DropdownMenuTrigger = memo(function DropdownMenuTrigger({
children,
className,
...props
}: DropdownMenuTriggerProps) {
return (
<D.Trigger asChild className={classnames(className)} {...props}>
{children}
</D.Trigger>
);
});
interface ItemInnerProps {
leftSlot?: ReactNode;
rightSlot?: ReactNode;
children: ReactNode;
noHover?: boolean;
className?: string;
} }
const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner( interface MenuItemProps {
{ leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps, className?: string;
ref, item: DropdownItem;
) { onSelect: (item: DropdownItem) => void;
focused: boolean;
}
function MenuItem({ className, focused, item, onSelect, ...props }: MenuItemProps) {
const handleClick = useCallback(() => onSelect?.(item), [item, onSelect]);
const initRef = useCallback(
(el: HTMLButtonElement | null) => {
if (el === null) return;
if (focused) {
setTimeout(() => el.focus(), 0);
}
},
[focused],
);
if (item === '-----') return <Separator className="my-1.5" />;
return ( return (
<div <button
ref={ref} ref={initRef}
onMouseEnter={(e) => e.currentTarget.focus()}
onMouseLeave={(e) => e.currentTarget.blur()}
onClick={handleClick}
className={classnames( className={classnames(
className, className,
'min-w-[8rem] outline-none px-2 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4', 'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
!noHover && 'focus:bg-highlight focus:text-gray-900 rounded', 'focus:bg-highlight focus:text-gray-900 rounded',
)} )}
{...props} {...props}
> >
{leftSlot && <div className="w-6">{leftSlot}</div>} {item.leftSlot && <div className="w-6">{item.leftSlot}</div>}
<div>{children}</div> <div>{item.label}</div>
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>} {item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
</div> </button>
); );
}); }
const ItemInner = memo(_ItemInner);

2
src-web/components/core/Input.tsx
View File

@@ -63,7 +63,7 @@ export function Input({
}; };
return ( return (
<VStack> <VStack className="w-full">
<label <label
htmlFor={id} htmlFor={id}
className={classnames( className={classnames(

4
src-web/components/core/PairEditor.tsx
View File

@@ -1,4 +1,3 @@
import type { CheckedState } from '@radix-ui/react-checkbox';
import classNames from 'classnames'; import classNames from 'classnames';
import classnames from 'classnames'; import classnames from 'classnames';
import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -201,8 +200,7 @@ const FormRow = memo(function FormRow({
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const handleChangeEnabled = useMemo( const handleChangeEnabled = useMemo(
() => (enabled: CheckedState) => () => (enabled: boolean) => onChange({ id, pair: { ...pairContainer.pair, enabled } }),
onChange({ id, pair: { ...pairContainer.pair, enabled: !!enabled } }),
[onChange, pairContainer.pair.name, pairContainer.pair.value], [onChange, pairContainer.pair.name, pairContainer.pair.value],
); );

35
src-web/components/core/RadioDropdown.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { memo, useMemo } from 'react';
import type { DropdownProps } from './Dropdown';
import { Dropdown } from './Dropdown';
import { Icon } from './Icon';
export interface RadioDropdownItem {
label: string;
value: string;
}
export interface RadioDropdownProps {
value: string;
onChange: (bodyType: string) => void;
items: RadioDropdownItem[];
children: DropdownProps['children'];
}
export const RadioDropdown = memo(function RadioDropdown({
value,
items,
onChange,
children,
}: RadioDropdownProps) {
const dropdownItems = useMemo(
() =>
items.map(({ label, value: v }) => ({
label,
onSelect: () => onChange(v),
leftSlot: <Icon icon={value === v ? 'check' : 'empty'} />,
})),
[value, items],
);
return <Dropdown items={dropdownItems}>{children}</Dropdown>;
});

38
src-web/components/core/ScrollArea.tsx
View File

@@ -1,38 +0,0 @@
import * as S from '@radix-ui/react-scroll-area';
import classnames from 'classnames';
import type { ReactNode } from 'react';
interface Props {
children: ReactNode;
className?: string;
type?: S.ScrollAreaProps['type'];
}
export function ScrollArea({ children, className, type }: Props) {
return (
<S.Root
className={classnames(className, 'group/scroll overflow-hidden')}
type={type ?? 'hover'}
>
<S.Viewport className="h-full w-full">{children}</S.Viewport>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
<S.Corner />
</S.Root>
);
}
function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {
return (
<S.Scrollbar
orientation={orientation}
className={classnames(
'scrollbar-track flex rounded-full',
orientation === 'vertical' && 'w-1.5',
orientation === 'horizontal' && 'h-1.5 flex-col',
)}
>
<S.Thumb className="scrollbar-thumb flex-1 rounded-full" />
</S.Scrollbar>
);
}

9
src-web/components/core/Divider.tsx → src-web/components/core/Separator.tsx
View File

@@ -1,23 +1,20 @@
import * as Separator from '@radix-ui/react-separator';
import classnames from 'classnames'; import classnames from 'classnames';
interface Props { interface Props {
orientation?: 'horizontal' | 'vertical'; orientation?: 'horizontal' | 'vertical';
decorative?: boolean;
className?: string; className?: string;
} }
export function Divider({ className, orientation = 'horizontal', decorative }: Props) { export function Separator({ className, orientation = 'horizontal' }: Props) {
return ( return (
<Separator.Root <div
role="separator"
className={classnames( className={classnames(
className, className,
'bg-gray-300/40', 'bg-gray-300/40',
orientation === 'horizontal' && 'w-full h-[1px]', orientation === 'horizontal' && 'w-full h-[1px]',
orientation === 'vertical' && 'h-full w-[1px]', orientation === 'vertical' && 'h-full w-[1px]',
)} )}
orientation={orientation}
decorative={decorative}
/> />
); );
} }

45
src-web/components/core/Stacks.tsx
View File

@@ -1,5 +1,6 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { ComponentType, HTMLAttributes, ReactNode } from 'react'; import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
import { forwardRef } from 'react';
const gapClasses = { const gapClasses = {
0: 'gap-0', 0: 'gap-0',
@@ -15,66 +16,70 @@ interface HStackProps extends BaseStackProps {
children?: ReactNode; children?: ReactNode;
} }
export function HStack({ className, space, children, ...props }: HStackProps) { export const HStack = forwardRef(function HStack(
{ className, space, children, ...props }: HStackProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: ForwardedRef<any>,
) {
return ( return (
<BaseStack <BaseStack
direction="row" ref={ref}
className={classnames(className, 'flex-row', space && gapClasses[space])} className={classnames(className, 'flex-row', space && gapClasses[space])}
{...props} {...props}
> >
{children} {children}
</BaseStack> </BaseStack>
); );
} });
export type VStackProps = BaseStackProps & { export type VStackProps = BaseStackProps & {
children: ReactNode; children: ReactNode;
}; };
export function VStack({ className, space, children, ...props }: VStackProps) { export const VStack = forwardRef(function VStack(
{ className, space, children, ...props }: VStackProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: ForwardedRef<any>,
) {
return ( return (
<BaseStack <BaseStack
direction="col" ref={ref}
className={classnames(className, 'w-full h-full', space && gapClasses[space])} className={classnames(className, 'flex-col', space && gapClasses[space])}
{...props} {...props}
> >
{children} {children}
</BaseStack> </BaseStack>
); );
} });
type BaseStackProps = HTMLAttributes<HTMLElement> & { type BaseStackProps = HTMLAttributes<HTMLElement> & {
as?: ComponentType | 'ul'; as?: ComponentType | 'ul';
space?: keyof typeof gapClasses; space?: keyof typeof gapClasses;
alignItems?: 'start' | 'center'; alignItems?: 'start' | 'center';
justifyContent?: 'start' | 'center' | 'end'; justifyContent?: 'start' | 'center' | 'end';
direction?: 'row' | 'col';
}; };
function BaseStack({ const BaseStack = forwardRef(function BaseStack(
className, { className, alignItems, justifyContent, children, as, ...props }: BaseStackProps,
direction, // eslint-disable-next-line @typescript-eslint/no-explicit-any
alignItems, ref: ForwardedRef<any>,
justifyContent, ) {
children,
as,
}: BaseStackProps) {
const Component = as ?? 'div'; const Component = as ?? 'div';
return ( return (
<Component <Component
ref={ref}
className={classnames( className={classnames(
className, className,
'flex', 'flex',
direction === 'row' && 'flex-row',
direction === 'col' && 'flex-col',
alignItems === 'center' && 'items-center', alignItems === 'center' && 'items-center',
alignItems === 'start' && 'items-start', alignItems === 'start' && 'items-start',
justifyContent === 'start' && 'justify-start', justifyContent === 'start' && 'justify-start',
justifyContent === 'center' && 'justify-center', justifyContent === 'center' && 'justify-center',
justifyContent === 'end' && 'justify-end', justifyContent === 'end' && 'justify-end',
)} )}
{...props}
> >
{children} {children}
</Component> </Component>
); );
} });

173
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -1,12 +1,10 @@
import * as T from '@radix-ui/react-tabs';
import classnames from 'classnames'; import classnames from 'classnames';
import { memo } from 'react';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { memo, useEffect, useRef } from 'react';
import { Button } from '../Button'; import { Button } from '../Button';
import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
import { ScrollArea } from '../ScrollArea'; import type { RadioDropdownProps } from '../RadioDropdown';
import { RadioDropdown } from '../RadioDropdown';
import { HStack } from '../Stacks'; import { HStack } from '../Stacks';
import './Tabs.css'; import './Tabs.css';
@@ -14,11 +12,7 @@ import './Tabs.css';
export type TabItem = { export type TabItem = {
value: string; value: string;
label: string; label: string;
options?: { options?: Omit<RadioDropdownProps, 'children'>;
onValueChange: DropdownMenuRadioProps['onValueChange'];
value: string;
items: DropdownMenuRadioItem[];
};
}; };
interface Props { interface Props {
@@ -40,85 +34,95 @@ export const Tabs = memo(function Tabs({
className, className,
tabListClassName, tabListClassName,
}: Props) { }: Props) {
const ref = useRef<HTMLDivElement | null>(null);
const handleTabChange = (value: string) => {
const tabs = ref.current?.querySelectorAll(`[data-tab]`);
for (const tab of tabs ?? []) {
const v = tab.getAttribute('data-tab');
if (v === value) {
tab.setAttribute('tabindex', '0');
tab.setAttribute('data-state', 'active');
} else {
tab.setAttribute('data-state', 'inactive');
}
}
onChangeValue(value);
};
useEffect(() => {
if (value === undefined) return;
handleTabChange(value);
}, [value]);
return ( return (
<T.Root <div
value={value} ref={ref}
onValueChange={onChangeValue}
className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')} className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
> >
<T.List <div
aria-label={label} aria-label={label}
className={classnames(tabListClassName, 'h-auto flex items-center pb-1')} className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
> >
<ScrollArea> <HStack space={1}>
<HStack space={1}> {tabs.map((t) => {
{tabs.map((t) => { const isActive = t.value === value;
const isActive = t.value === value; if (t.options && isActive) {
if (t.options && isActive) { return (
return ( <RadioDropdown
<DropdownMenuRadio key={t.value}
key={t.value} items={t.options.items}
items={t.options.items} value={t.options.value}
value={t.options.value} onChange={t.options.onChange}
onValueChange={t.options.onValueChange} >
<Button
color="custom"
size="sm"
onClick={(e) => e.stopPropagation()}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
> >
<DropdownMenuTrigger> {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Button <Icon icon="triangleDown" className="-mr-1.5" />
color="custom" </Button>
size="sm" </RadioDropdown>
onClick={(e) => e.stopPropagation()} );
className={classnames( } else if (t.options && !isActive) {
isActive return (
? 'bg-gray-100 text-gray-900' <Button
: 'text-gray-600 hover:text-gray-900', key={t.value}
)} color="custom"
> size="sm"
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''} onClick={() => handleTabChange(t.value)}
<Icon icon="triangleDown" className="-mr-1.5" /> className={classnames(
</Button> isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
</DropdownMenuTrigger> )}
</DropdownMenuRadio> >
); {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
} else if (t.options && !isActive) { <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
return ( </Button>
<T.Trigger asChild key={t.value} value={t.value}> );
<Button } else {
color="custom" return (
size="sm" <Button
className={classnames( key={t.value}
isActive color="custom"
? 'bg-gray-100 text-gray-900' size="sm"
: 'text-gray-600 hover:text-gray-900', onClick={() => handleTabChange(t.value)}
)} className={classnames(
> isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''} )}
<Icon icon="triangleDown" className="-mr-1.5 opacity-40" /> >
</Button> {t.label}
</T.Trigger> </Button>
); );
} else { }
return ( })}
<T.Trigger asChild key={t.value} value={t.value}> </HStack>
<Button </div>
color="custom"
size="sm"
className={classnames(
isActive
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:text-gray-900',
)}
>
{t.label}
</Button>
</T.Trigger>
);
}
})}
</HStack>
</ScrollArea>
</T.List>
{children} {children}
</T.Root> </div>
); );
}); });
@@ -134,13 +138,12 @@ export const TabContent = memo(function TabContent({
className, className,
}: TabContentProps) { }: TabContentProps) {
return ( return (
<T.Content <div
tabIndex={-1} tabIndex={-1}
forceMount data-tab={value}
value={value}
className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')} className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')}
> >
{children} {children}
</T.Content> </div>
); );
}); });

11
src-web/hooks/useActiveRequest.ts
View File

@@ -1,16 +1,9 @@
import { useEffect, useState } from 'react';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { useActiveRequestId } from './useActiveRequestId'; import { useActiveRequestId } from './useActiveRequestId';
import { useRequests } from './useRequests'; import { useRequests } from './useRequests';
export function useActiveRequest(): HttpRequest | null { export function useActiveRequest(): HttpRequest | null {
const requests = useRequests();
const requestId = useActiveRequestId(); const requestId = useActiveRequestId();
const [activeRequest, setActiveRequest] = useState<HttpRequest | null>(null); const requests = useRequests();
return requests.find((r) => r.id === requestId) ?? null;
useEffect(() => {
setActiveRequest(requests.find((r) => r.id === requestId) ?? null);
}, [requests, requestId]);
return activeRequest;
} }

20
src-web/hooks/usePortal.ts Normal file
View File

@@ -0,0 +1,20 @@
import { useRef } from 'react';
const PORTAL_CONTAINER_ID = 'react-portal';
export function usePortal(name: string) {
const ref = useRef(getOrCreatePortal(name));
return ref.current;
}
function getOrCreatePortal(name: string) {
const portalContainer = document.getElementById(PORTAL_CONTAINER_ID) as HTMLDivElement;
let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
if (!existing) {
const el: HTMLDivElement = document.createElement('div');
el.setAttribute('data-portal-name', name);
portalContainer.appendChild(el);
existing = el;
}
return existing;
}

12
src-web/hooks/useRequests.ts
View File

@@ -2,21 +2,21 @@ import { useQuery } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { convertDates } from '../lib/models'; import { convertDates } from '../lib/models';
import { useActiveWorkspace } from './useActiveWorkspace'; import { useActiveWorkspaceId } from './useActiveWorkspaceId';
export function requestsQueryKey(workspaceId: string) { export function requestsQueryKey(workspaceId: string) {
return ['http_requests', { workspaceId }]; return ['http_requests', { workspaceId }];
} }
export function useRequests() { export function useRequests() {
const workspace = useActiveWorkspace(); const workspaceId = useActiveWorkspaceId();
return ( return (
useQuery({ useQuery({
enabled: workspace != null, enabled: workspaceId != null,
queryKey: requestsQueryKey(workspace?.id ?? 'n/a'), queryKey: requestsQueryKey(workspaceId ?? 'n/a'),
queryFn: async () => { queryFn: async () => {
if (workspace == null) return []; if (workspaceId == null) return [];
const requests = (await invoke('requests', { workspaceId: workspace.id })) as HttpRequest[]; const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
return requests.map(convertDates); return requests.map(convertDates);
}, },
}).data ?? [] }).data ?? []

2
src-web/hooks/useTheme.ts
View File

@@ -10,7 +10,7 @@ import { useKeyValue } from './useKeyValue';
export function useTheme() { export function useTheme() {
const appearanceKv = useKeyValue<Appearance>({ const appearanceKv = useKeyValue<Appearance>({
key: 'appearance', key: 'appearance',
initialValue: getAppearance(), defaultValue: getAppearance(),
}); });
const themeChange = (appearance: Appearance) => { const themeChange = (appearance: Appearance) => {

5
src-web/hooks/useUpdateAnyRequest.ts
View File

@@ -1,13 +1,12 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { useRequests } from './useRequests'; import { getRequest } from '../lib/store';
export function useUpdateAnyRequest() { export function useUpdateAnyRequest() {
const requests = useRequests();
return useMutation<void, unknown, Partial<HttpRequest> & { id: string }>({ return useMutation<void, unknown, Partial<HttpRequest> & { id: string }>({
mutationFn: async (patch) => { mutationFn: async (patch) => {
const request = requests.find((r) => r.id === patch.id) ?? null; const request = await getRequest(patch.id);
if (request === null) { if (request === null) {
throw new Error("Can't update a null request"); throw new Error("Can't update a null request");
} }

4
src-web/hooks/useUpdateRequest.ts
View File

@@ -1,12 +1,12 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { useRequest } from './useRequest'; import { getRequest } from '../lib/store';
export function useUpdateRequest(id: string | null) { export function useUpdateRequest(id: string | null) {
const request = useRequest(id);
return useMutation<void, unknown, Partial<HttpRequest>>({ return useMutation<void, unknown, Partial<HttpRequest>>({
mutationFn: async (patch) => { mutationFn: async (patch) => {
const request = await getRequest(id);
if (request == null) { if (request == null) {
throw new Error("Can't update a null request"); throw new Error("Can't update a null request");
} }

12
src-web/lib/store.ts Normal file
View File

@@ -0,0 +1,12 @@
import { invoke } from '@tauri-apps/api';
import { convertDates } from './models';
import type { HttpRequest } from './models';
export async function getRequest(id: string | null): Promise<HttpRequest | null> {
if (id === null) return null;
const request: HttpRequest = (await invoke('get_request', { id })) ?? null;
if (request == null) {
return null;
}
return convertDates(request);
}