Add Dialog component

package-lock.json

@@ -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",

package.json

@@ -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",

src-web/components/Dialog.tsx

@@ -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>
+  );
+}

src-web/components/Dropdown.tsx

@@ -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<
+type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
-  DropdownMenu.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({
+function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTriggerProps) {
-  children,
-  className,
-  ...props
-}: DropdownMenu.DropdownMenuTriggerProps) {
   return (
-    <DropdownMenu.Trigger
+    <D.Trigger asChild className={classnames(className, 'focus:outline-none')} {...props}>
-      asChild
-      className={classnames(className, 'focus:outline-none')}
-      {...props}
-    >
       {children}
-    </DropdownMenu.Trigger>
+    </D.Trigger>
   );
 }
 

src-web/components/Editor/Editor.css

@@ -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;
 }

src-web/components/Icon.tsx

@@ -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,

src-web/components/IconButton.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import { Icon, IconProps } from './Icon';
+import type { IconProps } from './Icon';
-import { Button, ButtonProps } from './Button';
+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>;

src-web/components/Input.tsx

@@ -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
+    <VStack>
-      items="center"
+      <label
-      className={classnames(
+        htmlFor={id}
-        containerClassName,
+        className={classnames(
-        'w-full bg-gray-50 rounded-md text-sm overflow-hidden text-gray-900',
+          labelClassName,
-        'border border-transparent focus-within:border-blue-400/40',
+          'font-semibold text-sm uppercase text-gray-700 absolute',
-        size === 'md' && 'h-10',
+          hideLabel && 'sr-only',
-        size === 'sm' && 'h-8',
+        )}
-      )}
+      >
-    >
+        {label}
-      {leftSlot}
+      </label>
-      <VStack className="w-full">
+      <HStack
-        <label
+        items="center"
-          htmlFor={name}
+        className={classnames(
-          className={classnames(
+          containerClassName,
-            labelClassName,
+          'relative w-full bg-gray-50 rounded-md overflow-hidden text-gray-900',
-            'font-semibold text-sm uppercase text-gray-700',
+          'border border-transparent focus-within:border-blue-400/40',
-            hideLabel && 'sr-only',
+          size === 'md' && 'h-10',
-          )}
+          size === 'sm' && 'h-8',
-        >
+        )}
-          {label}
+      >
-        </label>
+        {leftSlot}
         {useEditor ? (
           <Editor
             id={id}
             singleLine
-            useTemplating
+            contentType={contentType ?? 'text/plain'}
-            contentType="url"
+            useTemplating={useTemplating}
             defaultValue={defaultValue}
             onChange={onChange}
             onSubmit={onSubmit}
@@ -93,8 +95,8 @@ export function Input({
             {...props}
           />
         )}
-      </VStack>
+        {rightSlot}
-      {rightSlot}
+      </HStack>
-    </HStack>
+    </VStack>
   );
 }

src-web/components/Sidebar.tsx

@@ -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"