feat: panel style add

minsgy · Jun 9, 2024 · cc74db7 · cc74db7
1 parent 618d63f
commit cc74db7
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 89 deletions.
diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -33,4 +33,159 @@ export const handlers = [
         },
       },
     ]),
+  http
+    .post("https://json-test.com/v1/user", () => {
+      return HttpResponse.json({
+        firstName: "zzz",
+        lastName: "zzz",
+      })
+    })
+    .presets([
+      {
+        status: 200,
+        description: "Success",
+        response: {
+          firstName: "John",
+          lastName: "Maverick",
+        },
+      },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
+    ]),
+  http
+    .patch("https://json-test.com/v1/user", () => {
+      return HttpResponse.json({
+        firstName: "zzz",
+        lastName: "zzz",
+      })
+    })
+    .presets([
+      {
+        status: 200,
+        description: "Success",
+        response: {
+          firstName: "John",
+          lastName: "Maverick",
+        },
+      },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
+    ]),
+  http
+    .put("https://json-test.com/v1/user", () => {
+      return HttpResponse.json({
+        firstName: "zzz",
+        lastName: "zzz",
+      })
+    })
+    .presets([
+      {
+        status: 200,
+        description: "Success",
+        response: {
+          firstName: "John",
+          lastName: "Maverick",
+        },
+      },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
+    ]),
+  http
+    .put("https://json-test.com/v1/usertttt", () => {
+      return HttpResponse.json({
+        firstName: "zzz",
+        lastName: "zzz",
+      })
+    })
+    .presets([
+      {
+        status: 200,
+        description: "Success",
+        response: {
+          firstName: "John",
+          lastName: "Maverick",
+        },
+      },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
+    ]),
+  http
+    .put("https://json-test.com/v1/usertttttttttt", () => {
+      return HttpResponse.json({
+        firstName: "zzz",
+        lastName: "zzz",
+      })
+    })
+    .presets([
+      {
+        status: 200,
+        description: "Success",
+        response: {
+          firstName: "John",
+          lastName: "Maverick",
+        },
+      },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
+    ]),
 ]
diff --git a/src/features/DevtoolsButton.tsx b/src/features/DevtoolsButton.tsx
@@ -0,0 +1,36 @@
+import { MswLogo } from "@/shared/icons"
+import { cn } from "@/shared/lib/cn"
+import { Button } from "@/shared/ui/button"
+import { match } from "ts-pattern"
+
+type DevtoolsButtonProps = {
+  position: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+}
+
+export const DevtoolsButton = ({
+  position = "bottom-right",
+}: DevtoolsButtonProps) => {
+  const positionClassName = match(position)
+    .with("top-left", () => "top-[16px] left-[16px]")
+    .with("top-right", () => "top-[16px] right-[16px]")
+    .with("bottom-left", () => "bottom-[16px] left-[16px]")
+    .with("bottom-right", () => "bottom-[16px] right-[16px]")
+    .otherwise(() => "top-[16px] right-[16px]")
+
+  return (
+    <div
+      className={cn(
+        "z-[100000] fixed p-[4px] text-left flex items-center justify-center shadow-md rounded-full",
+        positionClassName
+      )}
+    >
+      {/* TODO: LOGO CHANGE (temporary logo) */}
+      <Button
+        className="[&>svg]:absolute [&>svg]:w-[90%] w-[64px] h-[64px] shadow-inner"
+        variant="destructive"
+      >
+        <MswLogo />
+      </Button>
+    </div>
+  )
+}
diff --git a/src/features/DevtoolsHandlerList.tsx b/src/features/DevtoolsHandlerList.tsx
@@ -11,37 +11,34 @@ import {
 } from "@/providers/useMswDevtoolsContext"
 import { HandlerSelect } from "./HandlerSelect"
 import { Button } from "@/shared/ui/button"
-import { InputContainer } from "@/shared/ui/input-container"
-import { Label } from "@/shared/ui/label"
 import { Switch } from "@/shared/ui/switch"
+import { Input } from "@/shared/ui/input"
 
 export const DevtoolsHandlerList = () => {
   const { routes, onToggleHandler, onSelectHandler } = useRoute()
   const { onOpenEditPanel } = useEditorRouteState()
 
   return (
-    <ul className="list-none overflow-y-auto h-[250px] scrollbar-hide rounded-[4px] bg-transparent">
-      <li className="p-[12px] flex items-center">
-        <P className="font-semibold">Skip</P>
-        <P className="font-semibold">Actions</P>
-        <P className="font-semibold">Options</P>
+    <ul className="list-none overflow-y-auto h-full scrollbar-hide rounded-[4px] bg-card">
+      <li className="flex items-center max-[600px]:hidden text-gray-300 sticky top-0 z-10 h-[44px] bg-card">
+        <P className="font-semibold w-[80px] shrink-0">METHODS</P>
+        <P className="font-semibold pl-[12px] flex-1 text-left">URL</P>
+        <P className="font-semibold flex-1 text-left">OPTIONS</P>
       </li>
       {routes.map((route) => (
-        <li key={route.id} className="p-[12px] flex items-center">
-          <Switch
-            checked={route.enabled}
-            onCheckedChange={(checked) => {
-              onToggleHandler(route.id, checked)
-            }}
-          />
-          <Label
-            htmlFor={route.id}
-            className="pl-[12px] flex items-center w-full"
-          >
-            <MethodTag method={route.method} />
-            <span className="font-semibold">{route.url}</span>
-            <div className="ml-auto flex items-center">
-              <InputContainer label="delay" />
+        <li key={route.id} className="py-[12px] flex items-center">
+          <div className="flex items-center w-full max-[600px]:flex-col max-[600px]:items-stretch">
+            <div className="flex items-center flex-1">
+              <MethodTag method={route.method} />
+              <span className="flex-1 pl-[12px] font-semibold text-left break-word inline-block">
+                {route.url}
+              </span>
+            </div>
+            <div className="flex items-center max-[600px]:pt-[12px]">
+              <div className="flex items-center w-[80px]">
+                <Input />
+                <span className="pl-[2px] text-gray-500">MS</span>
+              </div>
               <HandlerSelect
                 onValueChange={(handlerId) =>
                   onSelectHandler(route.id, handlerId)
@@ -58,8 +55,14 @@ export const DevtoolsHandlerList = () => {
               >
                 Edit
               </Button>
+              <Switch
+                checked={route.enabled}
+                onCheckedChange={(checked) => {
+                  onToggleHandler(route.id, checked)
+                }}
+              />
             </div>
-          </Label>
+          </div>
         </li>
       ))}
     </ul>
@@ -68,16 +71,16 @@ export const DevtoolsHandlerList = () => {
 
 export const MethodTag = ({ method }: { method: HttpMethods }) => {
   const className = match(method)
-    .with(HttpMethods.GET, () => "text-red-500")
-    .with(HttpMethods.POST, () => "text-blue-500")
-    .with(HttpMethods.PUT, () => "text-green-500")
-    .with(HttpMethods.DELETE, () => "text-yellow-500")
-    .with(HttpMethods.PATCH, () => "text-purple-500")
-    .otherwise(() => "text-white")
+    .with(HttpMethods.GET, () => "bg-red-500")
+    .with(HttpMethods.POST, () => "bg-blue-500")
+    .with(HttpMethods.PUT, () => "bg-green-500")
+    .with(HttpMethods.DELETE, () => "bg-yellow-500")
+    .with(HttpMethods.PATCH, () => "bg-purple-500")
+    .otherwise(() => "bg-black")
 
   return (
-    <div className="inline-flex w-[100px] justify-center">
-      <InlineCode className={cn("bg-slate-950 w-[80px]", className)}>
+    <div className="inline-flex justify-center basis-[80px] shrink-0">
+      <InlineCode className={cn("text-white w-full", className)}>
         {method}
       </InlineCode>
     </div>

diff --git a/src/features/HandlerSelect/index.tsx b/src/features/HandlerSelect/index.tsx
@@ -15,7 +15,7 @@ export type HandlerSelectProps = SelectProps & {
 export const HandlerSelect = ({ options, ...rest }: HandlerSelectProps) => {
   return (
     <Select {...rest}>
-      <SelectTrigger className="w-[280px]">
+      <SelectTrigger className="w-[180px] ml-[12px]">
         <SelectValue placeholder="test" />
       </SelectTrigger>
       <SelectContent>

diff --git a/src/features/MSWDevtoolsPanel.tsx b/src/features/MSWDevtoolsPanel.tsx
@@ -1,26 +1,30 @@
-import { FixedLayout } from "@/shared/ui/FixedLayout"
+import { FixedLayout } from "@/shared/ui/fixed-layout"
 import { RouteEditPanel } from "./RouteEditPanel"
 import { Separator } from "@/shared/ui/separator"
 import { DevtoolsHandlerList } from "./DevtoolsHandlerList"
 import { MswControllerHeader } from "./MswControllerHeader"
 import { useEditorRouteState } from "@/providers/useMswDevtoolsContext"
+import { DevtoolsButton } from "./DevtoolsButton"
 
 export const MSWDevtoolsPanel = () => {
   const { isOpenEditorPanel } = useEditorRouteState()
 
   return (
-    <FixedLayout>
-      {isOpenEditorPanel ? (
-        <RouteEditPanel />
-      ) : (
-        <>
-          <MswControllerHeader />
-          <Separator />
-          <div className="p-[16px]">
-            <DevtoolsHandlerList />
-          </div>
-        </>
-      )}
-    </FixedLayout>
+    <>
+      <DevtoolsButton position="bottom-right" />
+      <FixedLayout>
+        {isOpenEditorPanel ? (
+          <RouteEditPanel />
+        ) : (
+          <>
+            <MswControllerHeader />
+            <Separator />
+            <div className="p-[16px] h-full">
+              <DevtoolsHandlerList />
+            </div>
+          </>
+        )}
+      </FixedLayout>
+    </>
   )
 }
diff --git a/src/shared/icons.tsx b/src/shared/icons.tsx
@@ -0,0 +1,39 @@
+export const MswLogo = () => {
+  return (
+    <svg
+      width="64px"
+      height="64px"
+      viewBox="0 0 122 122"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        id="msw-logo"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="Group"
+          transform="translate(63.000000, 60.500000) rotate(-42.000000) translate(-63.000000, -60.500000) translate(-8.000000, -21.000000)"
+          stroke-width="21"
+        >
+          <path
+            d="M75.1396666,46.668325 C78.6024919,46.668325 81.7374919,48.0719124 84.0067856,50.341206 C86.2760793,52.6104997 87.6796666,55.7454997 87.6796666,59.208325 C87.6796666,62.3036716 86.534852,65.2896505 84.4655356,67.5916279 L84.4655356,67.5916279 L48.2320648,107.898963 C47.5120934,108.699884 46.5356444,109.133155 45.5389581,109.186204 C44.5422718,109.239252 43.5253482,108.912077 42.7244276,108.192106 L42.7244276,108.192106 L6.19781435,67.5916279 C3.88282918,65.0163603 2.8308369,61.7465599 3.00140781,58.5418302 C3.17197873,55.3371004 4.56511284,52.1974412 7.14038046,49.882456 C9.44235787,47.8131396 12.4283368,46.668325 15.5236833,46.668325 L15.5236833,46.668325 Z"
+            id="back"
+            stroke="#FF3333"
+            opacity="0.48"
+            transform="translate(45.331675, 81.500000) rotate(90.000000) translate(-45.331675, -81.500000) "
+          ></path>
+          <path
+            d="M145.86082,46.668325 C146.937775,46.668325 147.912775,47.1048474 148.618536,47.8106086 C149.324297,48.5163698 149.76082,49.4913698 149.76082,50.568325 C149.76082,51.5309926 149.404777,52.4596464 148.76121,53.1755724 L148.76121,53.1755724 L99.5687149,107.898963 C98.8487435,108.699884 97.8722944,109.133155 96.8756081,109.186204 C95.8789218,109.239252 94.8619983,108.912077 94.0610777,108.192106 L94.0610777,108.192106 L44.5754404,53.1755724 C43.8554689,52.3746518 43.5282943,51.3577282 43.5813427,50.3610419 C43.634391,49.3643556 44.0676624,48.3879066 44.868583,47.6679352 C45.584509,47.0243679 46.5131627,46.668325 47.4758303,46.668325 L47.4758303,46.668325 Z"
+            id="front"
+            stroke="#FF6A33"
+            transform="translate(96.668325, 81.500000) rotate(-90.000000) translate(-96.668325, -81.500000) "
+          ></path>
+        </g>
+      </g>
+    </svg>
+  )
+}