feat: panel style add (#11)

minsgy · Jun 10, 2024 · 0b2b91b · 0b2b91b
2 parents 618d63f + 0d3b91d
commit 0b2b91b
Show file tree

Hide file tree

Showing 18 changed files with 354 additions and 196 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,7 +9,7 @@ function App() {
     queryKey: ["test"],
     queryFn: async () => {
       try {
-        const response = await fetch("https://json-test.com/v1/user")
+        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
         setError(null)
         return response.json()
       } catch (e) {

diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -3,7 +3,7 @@ import { http } from "msw-devtools"
 
 export const handlers = [
   http
-    .get("https://json-test.com/v1/user", () => {
+    .get("https://jsonplaceholder.typicode.com/todos/1", () => {
       return HttpResponse.json({
         firstName: "zzz",
         lastName: "zzz",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/MSWDevtools.tsx b/src/app/MSWDevtools.tsx
@@ -8,8 +8,10 @@ export const MSWDevtools = ({
   children,
   worker,
   onRouteUpdate,
+  position,
+  initialOpen = false,
 }: MSWDevtoolsProps) => {
-  if ((isEnabled && !worker) || (isEnabled && worker && !worker)) {
+  if (isEnabled && !worker) {
     console.warn(
       "worker is not defined. Please pass in a worker instance from setupWorker(...handlers)"
     )
@@ -22,11 +24,12 @@ export const MSWDevtools = ({
   return (
     <>
       <MswDevToolsProvider
+        initialOpen={initialOpen}
         isEnabled={isEnabled}
         worker={worker}
         onRouteUpdate={onRouteUpdate}
       >
-        <MSWDevtoolsPanel />
+        <MSWDevtoolsPanel position={position} />
       </MswDevToolsProvider>
       {children}
     </>

diff --git a/src/features/DevtoolsFloatingButton.tsx b/src/features/DevtoolsFloatingButton.tsx
@@ -0,0 +1,40 @@
+import { MswLogo } from "@/shared/icons"
+import { cn } from "@/shared/lib/cn"
+import { Button } from "@/shared/ui/button"
+import { ButtonHTMLAttributes } from "react"
+import { match } from "ts-pattern"
+import { Position } from ".."
+
+type DevtoolsFloatingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  position: Position
+}
+
+export const DevtoolsFloatingButton = ({
+  position = "bottom-right",
+  ...rest
+}: DevtoolsFloatingButtonProps) => {
+  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 rounded-full ",
+        positionClassName
+      )}
+    >
+      {/* TODO: LOGO CHANGE (temporary logo) */}
+      <Button
+        className="[&>svg]:absolute w-[64px] h-[64px] shadow-md shadow-black transition-transform duration-200 ease-in-out hover:scale-[1.02]"
+        variant="destructive"
+        {...rest}
+      >
+        <MswLogo />
+      </Button>
+    </div>
+  )
+}
diff --git a/src/features/DevtoolsHandlerList.tsx b/src/features/DevtoolsHandlerList.tsx
@@ -7,41 +7,40 @@ import { InlineCode, P } from "@/shared/ui/typography"
 import { HttpMethods } from "msw"
 import {
   useEditorRouteState,
+  useIsEnabledValue,
   useRoute,
 } 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 isEnabled = useIsEnabledValue()
   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 +57,15 @@ export const DevtoolsHandlerList = () => {
               >
                 Edit
               </Button>
+              <Switch
+                disabled={!isEnabled}
+                checked={route.enabled}
+                onCheckedChange={(checked) => {
+                  onToggleHandler(route.id, checked)
+                }}
+              />
             </div>
-          </Label>
+          </div>
         </li>
       ))}
     </ul>
@@ -68,16 +74,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,49 @@
-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 {
+  useEditorRouteState,
+  useFloatingState,
+} from "@/providers/useMswDevtoolsContext"
+import { DevtoolsFloatingButton } from "./DevtoolsFloatingButton"
+import { Position } from ".."
 
-export const MSWDevtoolsPanel = () => {
+type MSWDevtoolsPanelProps = {
+  position?: Position
+}
+
+export const MSWDevtoolsPanel = ({
+  position = "bottom-right",
+}: MSWDevtoolsPanelProps) => {
   const { isOpenEditorPanel } = useEditorRouteState()
+  const { isFloatingOpen, setIsFloatingOpen } = useFloatingState()
 
   return (
-    <FixedLayout>
-      {isOpenEditorPanel ? (
-        <RouteEditPanel />
+    <>
+      {isFloatingOpen ? (
+        <FixedLayout>
+          {isOpenEditorPanel ? (
+            <RouteEditPanel />
+          ) : (
+            <>
+              <MswControllerHeader />
+              <Separator />
+              <div className="p-[16px] h-full">
+                <DevtoolsHandlerList />
+              </div>
+            </>
+          )}
+        </FixedLayout>
       ) : (
-        <>
-          <MswControllerHeader />
-          <Separator />
-          <div className="p-[16px]">
-            <DevtoolsHandlerList />
-          </div>
-        </>
+        <DevtoolsFloatingButton
+          position={position}
+          onClick={() => {
+            setIsFloatingOpen(true)
+          }}
+        />
       )}
-    </FixedLayout>
+    </>
   )
 }