Skip to content

Commit 0eacc2f

Browse files
AlemTuzlakAlemTuzlak
committed
ui revamp, 3.6.0 version
1 parent 99f38c4 commit 0eacc2f

File tree

22 files changed

+212
-147
lines changed

22 files changed

+212
-147
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "remix-development-tools",
33
"description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
44
"author": "Alem Tuzlak",
5-
"version": "3.5.1",
5+
"version": "3.6.0",
66
"license": "MIT",
77
"keywords": [
88
"remix",
@@ -93,7 +93,7 @@
9393
"dev": "npm-run-all -s build -p remix cjs-watch",
9494
"dev:esm": "npm-run-all -s build -p remix-esm esm-watch",
9595
"dev:epic": "npm-run-all -s build -p remix-epic esm-watch",
96-
"dev:vite": "npm-run-all -s tsup:vite -p tsup:vite:watch remix-vite",
96+
"dev:vite": "npm-run-all -s tsup:vite -p tsup:vite:watch remix-vite esm-watch",
9797
"cjs-watch": "npm-run-all -p tsup:dev-server-cjs:watch tsup:rdt:watch",
9898
"esm-watch": "npm-run-all -p tsup:dev-server-esm:watch tsup:rdt:watch",
9999
"build": "run-s tsup:* -- --clean",

‎resources/icons/layout.svg

+1
Loading

‎resources/icons/root.svg

+1
Loading

‎src/RemixDevTools/RemixDevTools.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,10 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
7272
<div id={REMIX_DEV_TOOLS} className="remix-dev-tools">
7373
<Trigger isOpen={isOpen} setIsOpen={setIsOpen} />
7474
<MainPanel isOpen={isOpen}>
75-
<Tabs plugins={plugins} setIsOpen={setIsOpen} />
76-
<ContentPanel leftSideOriented={leftSideOriented} plugins={plugins} />
75+
<div className="rdt-flex rdt-h-full">
76+
<Tabs plugins={plugins} setIsOpen={setIsOpen} />
77+
<ContentPanel leftSideOriented={leftSideOriented} plugins={plugins} />
78+
</div>
7779
</MainPanel>
7880
</div>
7981
</>

‎src/RemixDevTools/components/InfoCard.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@ export const InfoCard = ({
1111
onClear?: () => void;
1212
}) => {
1313
return (
14-
<div className="rdt-mb-4 rdt-h-min rdt-rounded-lg rdt-border rdt-border-solid rdt-border-gray-500/40 rdt-px-3 rdt-py-2 rdt-text-base rdt-font-normal rdt-text-white">
14+
<div className="rdt-mb-4 rdt-h-min rdt-rounded-lg rdt-border-solid rdt-border-gray-500/40 rdt-text-base rdt-font-normal rdt-text-white rdt-transition-all">
1515
<h6
1616
className={clsx(
1717
"rdt-flex rdt-min-h-[30px] rdt-items-center rdt-text-left rdt-text-sm",
1818
onClear ? "rdt-flex rdt-items-center rdt-justify-between rdt-gap-3" : ""
1919
)}
2020
>
2121
{title}
22-
{onClear && (
22+
{onClear && typeof import.meta.hot === "undefined" && (
2323
<button
2424
onClick={onClear}
25-
className="rdt-cursor-pointer rdt-rounded-lg rdt-bg-red-500 rdt-px-2 rdt-py-1 rdt-text-sm rdt-font-semibold rdt-text-white"
25+
className="rdt-cursor-pointer rdt-rounded rdt-bg-red-500 rdt-px-2 rdt-py-1 rdt-text-sm rdt-font-semibold rdt-text-white"
2626
>
2727
Clear
2828
</button>
2929
)}
3030
</h6>
31-
<hr className="-rdt-mx-3 rdt-my-1 rdt-border-gray-500/40" />
31+
3232
{children}
3333
</div>
3434
);

‎src/RemixDevTools/components/RouteInfo.tsx

+19-22
Original file line numberDiff line numberDiff line change
@@ -43,36 +43,33 @@ export const RouteInfo = ({ route, className, openNewRoute, onClose }: RouteInfo
4343
</>
4444
)}
4545
<div className="rdt-flex rdt-gap-2">
46-
<span className="rdt-text-gray-500">Key:</span>
46+
<span className="rdt-whitespace-nowrap rdt-text-gray-500">Route file:</span>
4747
{route.id}
4848
</div>
4949
<div className="rdt-mb-4 rdt-mt-4 rdt-flex rdt-flex-col rdt-gap-2">
5050
<span className="rdt-text-gray-500">Components contained in the route:</span>
5151
<div className="rdt-flex rdt-gap-2">
52-
<Tag color={route.hasLoader ? "GREEN" : "RED"}>Loader</Tag>
53-
<Tag color={route.hasAction ? "GREEN" : "RED"}>Action</Tag>
52+
<Tag className="rdt-h-max" color={route.hasLoader ? "GREEN" : "RED"}>
53+
Loader
54+
</Tag>
55+
<Tag className="rdt-h-max" color={route.hasAction ? "GREEN" : "RED"}>
56+
Action
57+
</Tag>
5458

55-
<div
56-
className={clsx(
57-
"rdt-flex rdt-gap-2 rdt-rounded-md rdt-border",
58-
!hasErrorBoundary ? "rdt-border-red-500" : "rdt-border-green-500"
59-
)}
59+
<Tag
60+
className={clsx(hasErrorBoundary && "rdt-rounded-br-none rdt-rounded-tr-none")}
61+
color={hasErrorBoundary ? "GREEN" : "RED"}
6062
>
61-
<Tag
62-
className={clsx(hasErrorBoundary && "rdt-rounded-br-none rdt-rounded-tr-none")}
63-
color={hasErrorBoundary ? "GREEN" : "RED"}
64-
>
65-
ErrorBoundary
66-
</Tag>
67-
{hasErrorBoundary ? (
68-
<div className="rdt-mr-2">
69-
{hasParentErrorBoundary
70-
? `Covered by parent ErrorBoundary: ${route.errorBoundary.errorBoundaryId}`
71-
: "Contains ErrorBoundary"}
72-
</div>
73-
) : null}
74-
</div>
63+
ErrorBoundary
64+
</Tag>
7565
</div>
66+
{hasErrorBoundary ? (
67+
<div className="rdt-mr-2">
68+
{hasParentErrorBoundary
69+
? `Covered by parent ErrorBoundary located in: ${route.errorBoundary.errorBoundaryId}`
70+
: ""}
71+
</div>
72+
) : null}
7673
</div>
7774
{hasWildcard && (
7875
<>

‎src/RemixDevTools/components/RouteSegmentInfo.tsx

+45-31
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import { CacheInfo } from "./CacheInfo.js";
66
import { VsCodeButton } from "./VScodeButton.js";
77
import { JsonRenderer } from "./jsonRenderer.js";
88
import { ServerRouteInfo, defaultServerRouteState } from "../context/rdtReducer.js";
9-
import { Tag } from "./Tag.js";
9+
1010
import { InfoCard } from "./InfoCard.js";
1111
import { useDevServerConnection } from "../hooks/useDevServerConnection.js";
1212
import { Icon } from "./icon/Icon.js";
13+
import clsx from "clsx";
1314

1415
const getLoaderData = (data: string | Record<string, any>) => {
1516
if (typeof data === "string") {
@@ -54,6 +55,14 @@ const cleanServerInfo = (routeInfo: ServerRouteInfo) => {
5455
};
5556
};
5657

58+
export const ROUTE_COLORS = {
59+
GREEN: "rdt-bg-green-500 rdt-ring-green-500 rdt-text-white",
60+
BLUE: "rdt-bg-blue-500 rdt-ring-blue-500 rdt-text-white",
61+
TEAL: "rdt-bg-teal-400 rdt-ring-teal-400 rdt-text-white",
62+
RED: "rdt-bg-red-500 rdt-ring-red-500 rdt-text-white",
63+
PURPLE: "rdt-bg-purple-500 rdt-ring-purple-500 rdt-text-white",
64+
} as const;
65+
5766
export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown>; i: number }) => {
5867
const { server, setServerInfo } = useServerInfo();
5968
const { isConnected, sendJsonMessage } = useDevServerConnection();
@@ -85,39 +94,44 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
8594
onMouseLeave={() => onHover(route.id === "root" ? "root" : i.toString(), "leave")}
8695
className="rdt-mb-8 rdt-ml-8"
8796
>
88-
<Icon
89-
name="CornerDownRight"
90-
className="rdt-absolute -rdt-left-3 rdt-mt-2 rdt-flex rdt-h-6 rdt-w-6 rdt-items-center rdt-justify-center rdt-rounded-full rdt-bg-blue-900 rdt-ring-4 rdt-ring-blue-900"
91-
/>
92-
<h3 className="-rdt-mt-3 rdt-mb-1 rdt-flex rdt-items-center rdt-gap-2 rdt-text-lg rdt-font-semibold rdt-text-white">
93-
{route.pathname}
94-
<Tag color={isRoot ? "PURPLE" : isLayout ? "BLUE" : "GREEN"}>
95-
{isRoot ? "ROOT" : isLayout ? "LAYOUT" : "ROUTE"}
96-
</Tag>
97-
{isConnected && (
98-
<VsCodeButton
99-
onClick={() =>
100-
sendJsonMessage({
101-
type: "open-source",
102-
data: { source: `app/${route.id}` },
103-
})
104-
}
105-
/>
106-
)}
107-
{cacheControl && serverInfo?.lastLoader.timestamp && (
108-
<CacheInfo
109-
key={JSON.stringify(serverInfo?.lastLoader ?? "")}
110-
cacheControl={cacheControl}
111-
cacheDate={new Date(serverInfo?.lastLoader.timestamp ?? "")}
112-
/>
97+
<div
98+
className={clsx(
99+
"rdt-absolute -rdt-left-4 rdt-flex rdt-h-8 rdt-w-8 rdt-items-center rdt-justify-center rdt-rounded-full",
100+
ROUTE_COLORS[isRoot ? "PURPLE" : isLayout ? "BLUE" : "GREEN"]
113101
)}
102+
>
103+
<Icon name={isRoot ? "Root" : isLayout ? "Layout" : "CornerDownRight"} size="sm" />
104+
</div>
105+
<h3 className="rdt-text-md -rdt-mt-3 rdt-mb-1 rdt-flex rdt-items-center rdt-justify-between rdt-gap-2 rdt-font-semibold rdt-text-white">
106+
{route.pathname}
107+
108+
<div className="rdt-flex rdt-gap-2">
109+
{cacheControl && serverInfo?.lastLoader.timestamp && (
110+
<CacheInfo
111+
key={JSON.stringify(serverInfo?.lastLoader ?? "")}
112+
cacheControl={cacheControl}
113+
cacheDate={new Date(serverInfo?.lastLoader.timestamp ?? "")}
114+
/>
115+
)}
116+
{isConnected && (
117+
<VsCodeButton
118+
onClick={() =>
119+
sendJsonMessage({
120+
type: "open-source",
121+
data: { source: `app/${route.id}` },
122+
})
123+
}
124+
/>
125+
)}
126+
</div>
114127
</h3>
115128
<div className="rdt-mb-4">
116-
<time className="rdt-mb-2 rdt-block rdt-text-sm rdt-font-normal rdt-leading-none rdt-text-gray-500 ">
117-
Route location: {route.id}
118-
</time>
119-
<div className="rdt-flex rdt-gap-3">
120-
{loaderData && <InfoCard title="Route loader data">{<JsonRenderer data={loaderData} />}</InfoCard>}
129+
<p className="rdt-mb-2 rdt-block rdt-text-sm rdt-font-normal rdt-leading-none rdt-text-gray-500 ">
130+
Route segment file: {route.id}
131+
</p>
132+
133+
<div className="rdt-flex rdt-flex-wrap rdt-gap-6">
134+
{loaderData && <InfoCard title="Loader data">{<JsonRenderer data={loaderData} />}</InfoCard>}
121135
{serverInfo && (
122136
<InfoCard onClear={clearServerInfoForRoute} title="Server Info">
123137
<JsonRenderer data={cleanServerInfo(serverInfo)} />

‎src/RemixDevTools/components/Tag.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import clsx from "clsx";
22
import { ReactNode } from "react";
33

44
export const TAG_COLORS = {
5-
GREEN: "rdt-bg-green-500 rdt-text-white",
6-
BLUE: "rdt-bg-blue-500 rdt-text-white",
7-
TEAL: "rdt-bg-teal-400 rdt-text-white",
8-
RED: "rdt-bg-red-500 rdt-text-white",
9-
PURPLE: "rdt-bg-purple-500 rdt-text-white",
5+
GREEN: "rdt-border-green-500 rdt-border rdt-border-solid rdt-text-white",
6+
BLUE: "rdt-border-blue-500 rdt-border rdt-border-solid rdt-text-white",
7+
TEAL: "rdt-border-teal-400 rdt-border rdt-border-solid rdt-text-white",
8+
RED: "rdt-border-red-500 rdt-border rdt-border-solid rdt-text-white",
9+
PURPLE: "rdt-border-purple-500 rdt-border rdt-border-solid rdt-text-white",
1010
} as const;
1111

1212
interface TagProps {

‎src/RemixDevTools/components/VScodeButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const VsCodeButton = ({ onClick }: VsCodeButtonProps) => {
99
<button
1010
onClick={onClick}
1111
className={clsx(
12-
"rdt-ml-1 rdt-mr-2 rdt-flex rdt-cursor-pointer rdt-items-center rdt-gap-1 rdt-rounded rdt-border rdt-border-[#1F9CF0] rdt-px-2.5 rdt-py-0.5 rdt-text-sm rdt-font-medium rdt-text-[#1F9CF0]"
12+
"rdt-flex rdt-cursor-pointer rdt-items-center rdt-gap-1 rdt-rounded rdt-border rdt-border-[#1F9CF0] rdt-px-2.5 rdt-py-0.5 rdt-text-sm rdt-font-medium rdt-text-[#1F9CF0]"
1313
)}
1414
>
1515
<svg width="16" height="16" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">

‎src/RemixDevTools/components/icon/Icon.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,34 @@ export const Icon = ({ name, testId, className, size = "sm", ...props }: IconPro
4545
{...props}
4646
>
4747
<defs>
48+
<symbol
49+
id="Layout"
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
stroke="currentColor"
53+
strokeWidth="2"
54+
strokeLinecap="round"
55+
strokeLinejoin="round"
56+
>
57+
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
58+
<line x1="3" x2="21" y1="9" y2="9" />
59+
<line x1="9" x2="9" y1="21" y2="9" />
60+
</symbol>
61+
<symbol
62+
id="Root"
63+
viewBox="0 0 24 24"
64+
fill="none"
65+
stroke="currentColor"
66+
strokeWidth="2"
67+
strokeLinecap="round"
68+
strokeLinejoin="round"
69+
>
70+
<rect x="16" y="16" width="6" height="6" rx="1" />
71+
<rect x="2" y="16" width="6" height="6" rx="1" />
72+
<rect x="9" y="2" width="6" height="6" rx="1" />
73+
<path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
74+
<path d="M12 12V8" />
75+
</symbol>
4876
<symbol
4977
id="X"
5078
viewBox="0 0 24 24"

‎src/RemixDevTools/components/icon/icons/types.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export type IconName =
1717
| "Check"
1818
| "Activity"
1919
| "Accessibility"
20-
| "Shield";
20+
| "Shield"
21+
| "Root"
22+
| "Layout";
2123

2224
export const iconNames = [
2325
"X",
@@ -37,4 +39,6 @@ export const iconNames = [
3739
"Activity",
3840
"Accessibility",
3941
"Shield",
42+
"Root",
43+
"Layout",
4044
] as const;

‎src/RemixDevTools/hooks/useTabs.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,12 @@ export const useTabs = (isConnected: boolean, isConnecting: boolean, pluginsArra
3838
}
3939
}, [isConnected, isConnecting, activeTab, setSettings, plugins]);
4040

41-
return { visibleTabs, Component, allTabs, hideTimeline, isPluginTab: !tabs.find((tab) => activeTab === tab.id) };
41+
return {
42+
visibleTabs,
43+
Component,
44+
allTabs,
45+
hideTimeline,
46+
activeTab,
47+
isPluginTab: !tabs.find((tab) => activeTab === tab.id),
48+
};
4249
};

‎src/RemixDevTools/layout/ContentPanel.tsx

+6-10
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,18 @@ interface ContentPanelProps {
1010
plugins?: Tab[];
1111
}
1212

13-
const ContentPanel = ({ leftSideOriented, plugins }: ContentPanelProps) => {
13+
const ContentPanel = ({ plugins }: ContentPanelProps) => {
1414
const { isConnected, isConnecting } = useRemixForgeSocket();
15-
const { Component, hideTimeline, isPluginTab } = useTabs(isConnected, isConnecting, plugins);
15+
const { Component, hideTimeline, isPluginTab, activeTab } = useTabs(isConnected, isConnecting, plugins);
1616

1717
return (
1818
<div className="rdt-flex rdt-h-full rdt-w-full rdt-overflow-y-hidden">
1919
<div
2020
className={clsx(
2121
"rdt-z-20 rdt-h-full rdt-w-full rdt-overflow-y-auto rdt-bg-main rdt-p-2",
22-
leftSideOriented ? "rdt-pl-6" : "rdt-pl-6",
23-
isPluginTab && "rdt-unset"
22+
"rdt-pl-2",
23+
isPluginTab && "rdt-unset",
24+
activeTab === "page" && "rdt-pt-0"
2425
)}
2526
>
2627
{Component}
@@ -29,12 +30,7 @@ const ContentPanel = ({ leftSideOriented, plugins }: ContentPanelProps) => {
2930
{!hideTimeline && (
3031
<Fragment>
3132
<div className="rdt-w-1 rdt-bg-gray-500/20"></div>
32-
<div
33-
className={clsx(
34-
"rdt-z-10 rdt-h-full rdt-w-1/3 rdt-p-2",
35-
leftSideOriented ? "rdt-pl-2" : "rdt-pr-2" // leftSideOriented ? "rdt-pl-16" : "rdt-pr-16" Spacing is too much
36-
)}
37-
>
33+
<div className={clsx("rdt-z-10 rdt-h-full rdt-w-1/3 rdt-p-2")}>
3834
<TimelineTab />
3935
</div>
4036
</Fragment>

‎src/RemixDevTools/layout/MainPanel.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ const MainPanel = ({ children, isOpen, isEmbedded = false, className }: MainPane
3535
...(!isEmbedded && { height: detachedWindow ? window.innerHeight : height }),
3636
}}
3737
className={clsx(
38-
"rdt-duration-600 rdt-bg-main rdt-box-border rdt-flex rdt-w-screen rdt-flex-col rdt-overflow-auto rdt-text-white rdt-opacity-0 rdt-transition-all",
38+
"rdt-duration-600 rdt-box-border rdt-flex rdt-w-screen rdt-flex-col rdt-overflow-auto rdt-bg-main rdt-text-white rdt-opacity-0 rdt-transition-all",
3939
isOpen ? "rdt-opacity-100 rdt-drop-shadow-2xl" : "rdt-h-0",
4040
isResizing && "rdt-cursor-grabbing ",
4141
!isEmbedded
4242
? `rdt-fixed rdt-left-0 ${
43-
panelLocation === "bottom" ? "rdt-bottom-0" : "rdt-border-main rdt-top-0 rdt-border-b-2"
43+
panelLocation === "bottom" ? "rdt-bottom-0" : "rdt-top-0 rdt-border-b-2 rdt-border-main"
4444
}`
4545
: "",
4646
className

0 commit comments

Comments
 (0)