-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: edit panel state change and panel styling (#9)
- Loading branch information
Showing
20 changed files
with
706 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import { Button } from "@/shared/ui/button" | ||
| import { Input } from "@/shared/ui/input" | ||
| import { H4, P } from "@/shared/ui/typography" | ||
| import { | ||
| Select, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| SelectContent, | ||
| SelectItem, | ||
| } from "@/shared/ui/select" | ||
| import { format } from "prettier" | ||
| import { ResponseJsonEditor } from "./ResponseJsonEditor" | ||
| import { StatusSelect } from "./StatusSelect" | ||
| import babel from "prettier/plugins/babel" | ||
| import prettierPluginEstree from "prettier/plugins/estree" | ||
| import { Separator } from "@/shared/ui/separator" | ||
| import { Controller, useForm } from "react-hook-form" | ||
| import { HttpMethods } from "msw" | ||
| import { ROUTE_METHODS } from "@/constants" | ||
|
|
||
| type CreateEditFormValues = { | ||
| delay?: string | ||
| description?: string | ||
| method: HttpMethods | ||
| url: string | ||
| status: string | ||
| response: string | ||
| } | ||
|
|
||
| export const CreateEditForm = () => { | ||
| const { | ||
| register, | ||
| control, | ||
| handleSubmit, | ||
| setError, | ||
| formState: { errors }, | ||
| } = useForm<CreateEditFormValues>({ | ||
| defaultValues: { | ||
| method: HttpMethods.GET, | ||
| url: "", | ||
| status: "200", | ||
| response: "{}", | ||
| }, | ||
| }) | ||
|
|
||
| return ( | ||
| <form | ||
| onSubmit={handleSubmit((value) => { | ||
| console.log(value) | ||
| })} | ||
| > | ||
| <div className="flex py-[12px] px-[16px]"> | ||
| <Controller | ||
| control={control} | ||
| name="method" | ||
| render={({ field }) => ( | ||
| <Select defaultValue={field.value} onValueChange={field.onChange}> | ||
| <SelectTrigger className="w-[180px]"> | ||
| <SelectValue placeholder="Theme" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {ROUTE_METHODS.map((method) => ( | ||
| <SelectItem key={method} value={method}> | ||
| {method} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| )} | ||
| /> | ||
| <Input | ||
| placeholder="Route URL https://example.com/..." | ||
| {...register("url")} | ||
| /> | ||
| <Button type="submit">Save</Button> | ||
| </div> | ||
| <Separator /> | ||
| <div className="flex py-[12px] px-[16px]"> | ||
| <StatusSelect defaultValue={"200"} /> | ||
| <Input placeholder="Description" {...register("description")} /> | ||
| <Input placeholder="delay" {...register("delay")} /> | ||
| </div> | ||
| <Separator /> | ||
| <div className="flex justify-between w-full text-left py-[12px] px-[16px]"> | ||
| <H4>Response Body</H4> | ||
| {errors.response && ( | ||
| <P className="text-red-500">{errors.response.message}</P> | ||
| )} | ||
| </div> | ||
| <div className="py-[12px] px-[16px] text-left"> | ||
| <Controller | ||
| control={control} | ||
| name="response" | ||
| render={({ field }) => ( | ||
| <ResponseJsonEditor | ||
| value={field.value} | ||
| onChange={(value) => { | ||
| console.log(value) | ||
| field.onChange(value) | ||
| }} | ||
| onSave={async () => { | ||
| try { | ||
| const formattedResponse = await format(field.value, { | ||
| tabWidth: 2, | ||
| printWidth: 100, | ||
| parser: "json5", | ||
| plugins: [babel, prettierPluginEstree], | ||
| }) | ||
| // LINK: https://github.com/prettier/prettier/issues/6360 | ||
| field.onChange(formattedResponse.replace(/[\r\n]+$/, "")) | ||
| } catch (error) { | ||
| const formattedError = | ||
| error instanceof Error ? error.message : "Unknown Error" | ||
| setError("response", { | ||
| message: formattedError, | ||
| }) | ||
| } | ||
| }} | ||
| /> | ||
| )} | ||
| /> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import CodeMirror, { | ||
| KeyBinding, | ||
| ReactCodeMirrorProps, | ||
| hoverTooltip, | ||
| keymap, | ||
| } from "@uiw/react-codemirror" | ||
| import { githubDark } from "@uiw/codemirror-theme-github" | ||
| import { linter } from "@codemirror/lint" | ||
| import { jsonAutoComplete } from "./utils/jsonAutoComplete" | ||
| import { autocompletion, closeBracketsKeymap } from "@codemirror/autocomplete" | ||
| import { defaultKeymap, historyKeymap } from "@codemirror/commands" | ||
| import { json5, json5ParseLinter } from "codemirror-json5" | ||
|
|
||
| export type ResponseJsonEditorProps = ReactCodeMirrorProps & { | ||
| onSave?: VoidFunction | ||
| } | ||
|
|
||
| export const ResponseJsonEditor = ({ | ||
| onSave, | ||
| ...rest | ||
| }: ResponseJsonEditorProps) => { | ||
| const savedKeymap: KeyBinding = { | ||
| key: "Ctrl-s", | ||
| preventDefault: true, | ||
| run: (editor) => { | ||
| onSave?.() | ||
| return editor.hasFocus | ||
| }, | ||
| } | ||
|
|
||
| return ( | ||
| <CodeMirror | ||
| style={{ height: "100%" }} | ||
| extensions={[ | ||
| json5(), | ||
| linter(json5ParseLinter(), { | ||
| delay: 300, | ||
| }), | ||
| autocompletion({ | ||
| defaultKeymap: true, | ||
| icons: true, | ||
| aboveCursor: true, | ||
| activateOnTyping: true, | ||
| }), | ||
| jsonAutoComplete(), | ||
| keymap.of([ | ||
| ...closeBracketsKeymap, | ||
| ...defaultKeymap, | ||
| ...historyKeymap, | ||
| savedKeymap, | ||
| ]), | ||
| ]} | ||
| theme={githubDark} | ||
| basicSetup={{ | ||
| lineNumbers: true, | ||
| highlightActiveLine: true, | ||
| highlightActiveLineGutter: true, | ||
| indentOnInput: true, | ||
| history: true, | ||
| bracketMatching: true, | ||
| }} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@/shared/ui/select" | ||
| import { STATUS_CODES } from "./constants" | ||
| import { SelectProps } from "@radix-ui/react-select" | ||
|
|
||
| export const StatusSelect = ({ ...rest }: SelectProps) => { | ||
| return ( | ||
| <Select {...rest}> | ||
| <SelectTrigger className="w-[280px]"> | ||
| <SelectValue placeholder="Select HTTP Status" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {STATUS_CODES.map(({ label, value }) => { | ||
| return ( | ||
| <SelectItem key={value} value={String(value)}> | ||
| {label} | ||
| </SelectItem> | ||
| ) | ||
| })} | ||
| </SelectContent> | ||
| </Select> | ||
| ) | ||
| } |
Oops, something went wrong.