starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Add Dialog component

Browse Source
This commit is contained in:
Gregory Schier
2023-03-02 18:46:10 -08:00
parent 77ca90779c
commit 420f7aa7c3
10 changed files with 174 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
package-lock.json generated
View File

@@ -18,6 +18,7 @@
"@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.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-popover": "1.0.3",
@@ -1325,6 +1326,32 @@
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-dialog": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.2.tgz",
"integrity": "sha512-EKxxp2WNSmUPkx4trtWNmZ4/vAYEg7JkAfa1HKBUnaubw9eHzf1Orr9B472lJYaYz327RHDrd4R95fsw7VR8DA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-dismissable-layer": "1.0.2",
"@radix-ui/react-focus-guards": "1.0.0",
"@radix-ui/react-focus-scope": "1.0.1",
"@radix-ui/react-id": "1.0.0",
"@radix-ui/react-portal": "1.0.1",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-slot": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-direction": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",
@@ -7657,6 +7684,28 @@
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-dialog": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.2.tgz",
"integrity": "sha512-EKxxp2WNSmUPkx4trtWNmZ4/vAYEg7JkAfa1HKBUnaubw9eHzf1Orr9B472lJYaYz327RHDrd4R95fsw7VR8DA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-dismissable-layer": "1.0.2",
"@radix-ui/react-focus-guards": "1.0.0",
"@radix-ui/react-focus-scope": "1.0.1",
"@radix-ui/react-id": "1.0.0",
"@radix-ui/react-portal": "1.0.1",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-slot": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
}
},
"@radix-ui/react-direction": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",

1
package.json
View File

@@ -23,6 +23,7 @@
"@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.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-popover": "1.0.3",

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

Binary file not shown.

41
src-web/components/Dialog.tsx Normal file
View File

@@ -0,0 +1,41 @@
import classnames from 'classnames';
import React from 'react';
import * as D from '@radix-ui/react-dialog';
import { Cross2Icon } from '@radix-ui/react-icons';
import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
interface Props {
children: React.ReactNode;
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description?: string;
}
export function Dialog({ children, open, onOpenChange, title, description }: Props) {
return (
<D.Root open={open} onOpenChange={onOpenChange}>
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<D.Overlay className="fixed inset-0 bg-background/80" />
<D.Content
className={classnames(
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50 w-[20rem] max-h-[20rem]',
'p-5 rounded-lg',
)}
>
<D.Close asChild className="ml-auto absolute right-1 top-1">
<IconButton aria-label="Close" icon="x" size="sm" />
</D.Close>
<VStack space={3}>
<HStack items="center" className="pb-3">
<D.Title className="text-xl font-semibold">{title}</D.Title>
</HStack>
{description && <D.Description>{description}</D.Description>}
<div>{children}</div>
</VStack>
</D.Content>
</D.Portal>
</D.Root>
);
}

65
src-web/components/Dropdown.tsx
View File

@@ -1,4 +1,4 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import * as D from '@radix-ui/react-dropdown-menu';
import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
import { CheckIcon } from '@radix-ui/react-icons';
import classnames from 'classnames';
@@ -32,7 +32,7 @@ export function DropdownMenuRadio({
};
return (
<DropdownMenu.Root>
<D.Root>
<DropdownMenuTrigger>{children}</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
@@ -46,7 +46,7 @@ export function DropdownMenuRadio({
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu.Root>
</D.Root>
);
}
@@ -65,7 +65,7 @@ export interface DropdownProps {
export function Dropdown({ children, items }: DropdownProps) {
return (
<DropdownMenu.Root>
<D.Root>
<DropdownMenuTrigger>{children}</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
@@ -87,7 +87,7 @@ export function Dropdown({ children, items }: DropdownProps) {
})}
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu.Root>
</D.Root>
);
}
@@ -99,17 +99,17 @@ interface DropdownMenuPortalProps {
function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
return (
<DropdownMenu.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
{children}
</motion.div>
</DropdownMenu.Portal>
</D.Portal>
);
}
const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuContentProps>(
const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
function DropdownMenuContent(
{ className, children, ...props }: DropdownMenu.DropdownMenuContentProps,
{ className, children, ...props }: D.DropdownMenuContentProps,
ref: ForwardedRef<HTMLDivElement>,
) {
const [styles, setStyles] = useState<{ maxHeight: number }>();
@@ -134,7 +134,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenu
}, [divRef]);
return (
<DropdownMenu.Content
<D.Content
ref={initDivRef}
align="start"
className={classnames(className, dropdownMenuClasses, 'overflow-auto m-1')}
@@ -142,12 +142,12 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenu
{...props}
>
{children}
</DropdownMenu.Content>
</D.Content>
);
},
);
type DropdownMenuItemProps = DropdownMenu.DropdownMenuItemProps & ItemInnerProps;
type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
function DropdownMenuItem({
leftSlot,
@@ -158,7 +158,7 @@ function DropdownMenuItem({
...props
}: DropdownMenuItemProps) {
return (
<DropdownMenu.Item
<D.Item
asChild
disabled={disabled}
className={classnames(className, { 'opacity-30': disabled })}
@@ -167,7 +167,7 @@ function DropdownMenuItem({
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</DropdownMenu.Item>
</D.Item>
);
}
@@ -205,25 +205,22 @@ function DropdownMenuItem({
// );
// }
type DropdownMenuRadioItemProps = Omit<
DropdownMenu.DropdownMenuRadioItemProps & ItemInnerProps,
'leftSlot'
>;
type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
function DropdownMenuRadioItem({ rightSlot, children, ...props }: DropdownMenuRadioItemProps) {
return (
<DropdownMenu.RadioItem asChild {...props}>
<D.RadioItem asChild {...props}>
<ItemInner
leftSlot={
<DropdownMenu.ItemIndicator>
<D.ItemIndicator>
<CheckIcon />
</DropdownMenu.ItemIndicator>
</D.ItemIndicator>
}
rightSlot={rightSlot}
>
{children}
</ItemInner>
</DropdownMenu.RadioItem>
</D.RadioItem>
);
}
@@ -244,38 +241,30 @@ function DropdownMenuRadioItem({ rightSlot, children, ...props }: DropdownMenuRa
// },
// );
function DropdownMenuLabel({ className, children, ...props }: DropdownMenu.DropdownMenuLabelProps) {
function DropdownMenuLabel({ className, children, ...props }: D.DropdownMenuLabelProps) {
return (
<DropdownMenu.Label asChild {...props}>
<D.Label asChild {...props}>
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
{children}
</ItemInner>
</DropdownMenu.Label>
</D.Label>
);
}
function DropdownMenuSeparator({ className, ...props }: DropdownMenu.DropdownMenuSeparatorProps) {
function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorProps) {
return (
<DropdownMenu.Separator
<D.Separator
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
{...props}
/>
);
}
function DropdownMenuTrigger({
children,
className,
...props
}: DropdownMenu.DropdownMenuTriggerProps) {
function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTriggerProps) {
return (
<DropdownMenu.Trigger
asChild
className={classnames(className, 'focus:outline-none')}
{...props}
>
<D.Trigger asChild className={classnames(className, 'focus:outline-none')} {...props}>
{children}
</DropdownMenu.Trigger>
</D.Trigger>
);
}

4
src-web/components/Editor/Editor.css
View File

@@ -29,10 +29,6 @@
@apply rounded-lg bg-gray-50;
}
.cm-multiline .cm-editor .cm-scroller {
padding-bottom: 300px;
}
.cm-editor.cm-focused {
outline: none !important;
}

6
src-web/components/Icon.tsx
View File

@@ -3,6 +3,8 @@ import {
CameraIcon,
CheckIcon,
CodeIcon,
Cross1Icon,
Cross2Icon,
EyeOpenIcon,
GearIcon,
HomeIcon,
@@ -17,7 +19,7 @@ import {
UpdateIcon,
} from '@radix-ui/react-icons';
import classnames from 'classnames';
import { NamedExoticComponent } from 'react';
import type { NamedExoticComponent } from 'react';
type IconName =
| 'archive'
@@ -34,6 +36,7 @@ type IconName =
| 'plus-circled'
| 'sun'
| 'code'
| 'x'
| 'trash'
| 'moon';
@@ -50,6 +53,7 @@ const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
update: UpdateIcon,
sun: SunIcon,
moon: MoonIcon,
x: Cross2Icon,
question: QuestionMarkIcon,
eye: EyeOpenIcon,
code: CodeIcon,

6
src-web/components/IconButton.tsx
View File

@@ -1,6 +1,8 @@
import { forwardRef } from 'react';
import { Icon, IconProps } from './Icon';
import { Button, ButtonProps } from './Button';
import type { IconProps } from './Icon';
import { Icon } from './Icon';
import type { ButtonProps } from './Button';
import { Button } from './Button';
import classnames from 'classnames';
type Props = Omit<IconProps, 'size'> & ButtonProps<typeof Button>;

56
src-web/components/Input.tsx
View File

@@ -12,6 +12,7 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'on
containerClassName?: string;
onChange?: (value: string) => void;
onSubmit?: () => void;
contentType?: string;
useTemplating?: boolean;
useEditor?: boolean;
leftSlot?: ReactNode;
@@ -30,6 +31,7 @@ export function Input({
useTemplating,
size = 'md',
useEditor,
contentType,
onChange,
name,
leftSlot,
@@ -39,34 +41,34 @@ export function Input({
}: Props) {
const id = `input-${name}`;
return (
<HStack
items="center"
className={classnames(
containerClassName,
'w-full bg-gray-50 rounded-md text-sm overflow-hidden text-gray-900',
'border border-transparent focus-within:border-blue-400/40',
size === 'md' && 'h-10',
size === 'sm' && 'h-8',
)}
>
{leftSlot}
<VStack className="w-full">
<label
htmlFor={name}
className={classnames(
labelClassName,
'font-semibold text-sm uppercase text-gray-700',
hideLabel && 'sr-only',
)}
>
{label}
</label>
<VStack>
<label
htmlFor={id}
className={classnames(
labelClassName,
'font-semibold text-sm uppercase text-gray-700 absolute',
hideLabel && 'sr-only',
)}
>
{label}
</label>
<HStack
items="center"
className={classnames(
containerClassName,
'relative w-full bg-gray-50 rounded-md overflow-hidden text-gray-900',
'border border-transparent focus-within:border-blue-400/40',
size === 'md' && 'h-10',
size === 'sm' && 'h-8',
)}
>
{leftSlot}
{useEditor ? (
<Editor
id={id}
singleLine
useTemplating
contentType="url"
contentType={contentType ?? 'text/plain'}
useTemplating={useTemplating}
defaultValue={defaultValue}
onChange={onChange}
onSubmit={onSubmit}
@@ -93,8 +95,8 @@ export function Input({
{...props}
/>
)}
</VStack>
{rightSlot}
</HStack>
{rightSlot}
</HStack>
</VStack>
);
}

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

@@ -1,12 +1,14 @@
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
import React from 'react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useRequestCreate } from '../hooks/useRequest';
import useTheme from '../hooks/useTheme';
import type { HttpRequest } from '../lib/models';
import { Button } from './Button';
import { Dialog } from './Dialog';
import { IconButton } from './IconButton';
import { Input } from './Input';
import { HStack, VStack } from './Stacks';
import { WindowDragRegion } from './WindowDragRegion';
@@ -19,12 +21,27 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
const { toggleTheme } = useTheme();
const [open, setOpen] = useState<boolean>(false);
return (
<div
className={classnames(className, 'w-52 bg-gray-50/40 h-full border-gray-500/10')}
{...props}
>
<HStack as={WindowDragRegion} items="center" className="pr-1" justify="end">
<Dialog open={open} onOpenChange={setOpen} title="This is the title">
<p>This is the body</p>
<Input name="Name" label="This is the label" className="bg-gray-100" />
<Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
Save
</Button>
</Dialog>
<IconButton
size="sm"
icon="camera"
onClick={() => {
setOpen((v) => !v);
}}
/>
<IconButton size="sm" icon="sun" onClick={toggleTheme} />
<IconButton
size="sm"