From 87c7b3a663f4adfe5c4e00fc63176cb622ac4e46 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 3 Mar 2023 13:18:57 -0800
Subject: [PATCH] Beginnings of Header Editor

---
 .eslintrc.cjs                        |  1 +
 src-web/components/Button.tsx        | 19 ++++---
 src-web/components/Dialog.tsx        | 53 +++++++++++-------
 src-web/components/Editor/Editor.css |  2 +-
 src-web/components/HeaderEditor.tsx  | 82 ++++++++++++++++++++++++++++
 src-web/components/Input.tsx         | 23 +++-----
 src-web/components/Sidebar.tsx       |  6 +-
 src-web/main.css                     |  2 +-
 tailwind.config.cjs                  |  1 +
 9 files changed, 143 insertions(+), 46 deletions(-)
 create mode 100644 src-web/components/HeaderEditor.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e6d78a23..63358f8c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -20,6 +20,7 @@ module.exports = {
         },
     },
     rules: {
+        "jsx-a11y/no-autofocus": "warn",
         "react/react-in-jsx-scope": "off",
         "@typescript-eslint/consistent-type-imports": ["error", {
             prefer: "type-imports",
diff --git a/src-web/components/Button.tsx b/src-web/components/Button.tsx
index 525c78ff..ab745cc1 100644
--- a/src-web/components/Button.tsx
+++ b/src-web/components/Button.tsx
@@ -1,16 +1,16 @@
-import {
+import classnames from 'classnames';
+import type {
   ButtonHTMLAttributes,
   ComponentPropsWithoutRef,
   ElementType,
   ForwardedRef,
-  forwardRef,
 } from 'react';
-import classnames from 'classnames';
+import { forwardRef } from 'react';
 import { Icon } from './Icon';
 
 export interface ButtonProps<T extends ElementType>
   extends ButtonHTMLAttributes<HTMLButtonElement> {
-  color?: 'primary' | 'secondary';
+  color?: 'primary' | 'secondary' | 'warning' | 'danger';
   size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   forDropdown?: boolean;
@@ -34,18 +34,21 @@ export const Button = forwardRef(function Button<T extends ElementType>(
   return (
     <Component
       ref={ref}
+      type="button"
       className={classnames(
         className,
-        'rounded-md flex items-center',
+        'rounded-md flex items-center bg-opacity-80 hover:bg-opacity-100 text-white',
         // 'active:translate-y-[0.5px] active:scale-[0.99]',
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
         size === 'xs' && 'h-7 px-3 text-sm',
-        color === undefined && 'hover:bg-gray-500/[0.1] text-gray-800 hover:text-gray-900',
-        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 text-white',
-        color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 text-white',
+        color === undefined && 'hover:bg-gray-500/[0.1]',
+        color === 'primary' && 'bg-blue-400',
+        color === 'secondary' && 'bg-violet-400',
+        color === 'warning' && 'bg-orange-400',
+        color === 'danger' && 'bg-red-400',
       )}
       {...props}
     >
diff --git a/src-web/components/Dialog.tsx b/src-web/components/Dialog.tsx
index 3527d860..9271e2bd 100644
--- a/src-web/components/Dialog.tsx
+++ b/src-web/components/Dialog.tsx
@@ -1,5 +1,6 @@
 import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
+import { motion } from 'framer-motion';
 import React from 'react';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
@@ -10,30 +11,44 @@ interface Props {
   onOpenChange: (open: boolean) => void;
   title: string;
   description?: string;
+  className?: string;
+  wide?: boolean;
 }
 
-export function Dialog({ children, open, onOpenChange, title, description }: Props) {
+export function Dialog({
+  children,
+  className,
+  wide,
+  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-gray-900 dark:bg-background opacity-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>
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+          <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
+          <D.Content
+            className={classnames(
+              className,
+              'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
+              'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
+              wide && 'w-[80vw] max-w-[50rem]',
+            )}
+          >
+            <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>
+        </motion.div>
       </D.Portal>
     </D.Root>
   );
diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css
index d644e8cb..dda5fa27 100644
--- a/src-web/components/Editor/Editor.css
+++ b/src-web/components/Editor/Editor.css
@@ -25,7 +25,7 @@
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
 }
 
-.cm-editor .cm-scroller {
+.cm-multiline .cm-editor .cm-scroller {
     @apply rounded-lg bg-gray-50;
 }
 
diff --git a/src-web/components/HeaderEditor.tsx b/src-web/components/HeaderEditor.tsx
new file mode 100644
index 00000000..f3f332da
--- /dev/null
+++ b/src-web/components/HeaderEditor.tsx
@@ -0,0 +1,82 @@
+import type { FormEvent } from 'react';
+import React, { useState } from 'react';
+import type { HttpHeader } from '../lib/models';
+import { IconButton } from './IconButton';
+import { Input } from './Input';
+import { HStack, VStack } from './Stacks';
+
+export function HeaderEditor() {
+  const [headers, setHeaders] = useState<HttpHeader[]>([]);
+  const [newHeader, setNewHeader] = useState<HttpHeader>({ name: '', value: '' });
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setHeaders([...headers, newHeader]);
+    setNewHeader({ name: '', value: '' });
+  };
+
+  const handleDelete = (index: number) => {
+    setHeaders((headers) => headers.filter((_, i) => i !== index));
+  };
+
+  const handleChangeHeader = (header: HttpHeader, index: number) => {
+    setHeaders((headers) => headers.map((h, i) => (i === index ? header : h)));
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <VStack space={2}>
+        {headers.map((header, i) => (
+          <FormRow
+            key={`${headers.length}:${i}`}
+            header={header}
+            onChange={(h) => handleChangeHeader(h, i)}
+            onDelete={() => handleDelete(i)}
+          />
+        ))}
+        <FormRow addSubmit onChange={setNewHeader} header={newHeader} />
+      </VStack>
+    </form>
+  );
+}
+
+function FormRow({
+  header,
+  addSubmit,
+  onChange,
+  onDelete,
+}: {
+  header: HttpHeader;
+  addSubmit?: boolean;
+  onChange: (header: HttpHeader) => void;
+  onDelete?: () => void;
+}) {
+  return (
+    <div>
+      <HStack space={2}>
+        <Input
+          autoFocus
+          name="name"
+          label="Name"
+          placeholder="name"
+          value={header.name}
+          hideLabel
+          onChange={(name) => {
+            onChange({ name, value: header.value });
+          }}
+        />
+        <Input
+          name="value"
+          label="Value"
+          placeholder="value"
+          value={header.value}
+          hideLabel
+          onChange={(value) => {
+            onChange({ name: header.name, value });
+          }}
+        />
+        {onDelete && <IconButton size="sm" icon="trash" onClick={onDelete} />}
+      </HStack>
+      {addSubmit && <input type="submit" value="Add" className="sr-only" />}
+    </div>
+  );
+}
diff --git a/src-web/components/Input.tsx b/src-web/components/Input.tsx
index bf7d9432..d777a2f0 100644
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -1,7 +1,7 @@
-import classnames from "classnames";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import Editor from "./Editor/Editor";
-import { HStack, VStack } from "./Stacks";
+import classnames from 'classnames';
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import Editor from './Editor/Editor';
+import { HStack, VStack } from './Stacks';
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   name: string;
@@ -45,7 +45,7 @@ export function Input({
         htmlFor={id}
         className={classnames(
           labelClassName,
-          'font-semibold text-sm uppercase text-gray-700 absolute',
+          'font-semibold text-sm uppercase text-gray-700',
           hideLabel && 'sr-only',
         )}
       >
@@ -55,8 +55,8 @@ export function Input({
         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',
+          'relative w-full rounded-md overflow-hidden text-gray-900 bg-gray-200/10',
+          'border border-gray-500/10 focus-within:border-blue-400/40',
           size === 'md' && 'h-10',
           size === 'sm' && 'h-8',
         )}
@@ -72,12 +72,7 @@ export function Input({
             onChange={onChange}
             onSubmit={onSubmit}
             placeholder={placeholder}
-            className={classnames(
-              className,
-              'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
-              leftSlot && '!pl-1',
-              rightSlot && '!pr-1',
-            )}
+            className={className}
           />
         ) : (
           <input
@@ -87,7 +82,7 @@ export function Input({
             defaultValue={defaultValue}
             className={classnames(
               className,
-              'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
+              '!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none placeholder:text-gray-500/40',
               leftSlot && '!pl-1',
               rightSlot && '!pr-1',
             )}
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 3c567be4..a9ffc35d 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -7,6 +7,7 @@ import useTheme from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './Button';
 import { Dialog } from './Dialog';
+import { HeaderEditor } from './HeaderEditor';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
 import { HStack, VStack } from './Stacks';
@@ -28,9 +29,8 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
       {...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" />
+        <Dialog wide open={open} onOpenChange={setOpen} title="This is the title">
+          <HeaderEditor />
           <Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
             Save
           </Button>
diff --git a/src-web/main.css b/src-web/main.css
index 1b1637a4..62aaa5e3 100644
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -4,7 +4,7 @@
 
 :root {
     color-scheme: light dark;
-    --transition-duration: 200ms ease-in-out;
+    --transition-duration: 100ms ease-in-out;
 }
 
 :not(input):not(textarea),
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d69bf5c5..6145d63b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -21,6 +21,7 @@ module.exports = {
             black: 'hsl(var(--color-black) / <alpha-value>)',
             background: 'hsl(var(--color-background) / <alpha-value>)',
             gray: color('gray'),
+            orange: color('orange'),
             blue: color('blue'),
             green: color('green'),
             pink: color('pink'),