remove tailwind for goober

Author: AlemTuzlak

packages/react-router-devtools/package.json

@@ -148,6 +148,7 @@
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"framer-motion": "^11.0.8",
+		"goober": "^2.1.18",
 		"react-d3-tree": "^3.6.4",
 		"react-diff-viewer-continued": "^4.0.5",
 		"react-hotkeys-hook": "^4.6.1",

packages/react-router-devtools/postcss.config.js

@@ -1,54 +1,47 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import * as React from "react"
 
+import { cx, useStyles } from "../styles/use-styles.js"
 import { Icon } from "./icon/Icon.js"
-import { cn } from "./util.js"
 
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-	<AccordionPrimitive.Item ref={ref} className={cn("border-b border-b-gray-500", className)} {...props} />
-))
+>(({ className, ...props }, ref) => {
+	const { styles } = useStyles()
+	return <AccordionPrimitive.Item ref={ref} className={cx(styles.accordion.item, className)} {...props} />
+})
 AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Trigger>,
 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Header className="flex">
-		<AccordionPrimitive.Trigger
-			ref={ref}
-			className={cn(
-				"flex flex-1 items-center w-full justify-between py-2 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-				className
-			)}
-			{...props}
-		>
-			{children}
-			<Icon className="text-white h-4 w-4 shrink-0 transition-transform duration-200" name="ChevronDown" />
-		</AccordionPrimitive.Trigger>
-	</AccordionPrimitive.Header>
-))
+>(({ className, children, ...props }, ref) => {
+	const { styles } = useStyles()
+	return (
+		<AccordionPrimitive.Header className={styles.accordion.header}>
+			<AccordionPrimitive.Trigger ref={ref} className={cx(styles.accordion.trigger, className)} {...props}>
+				{children}
+				<Icon className={styles.accordion.icon} name="ChevronDown" />
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	)
+})
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
 const AccordionContent = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Content
-		ref={ref}
-		className={cn(
-			"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-			className
-		)}
-		{...props}
-	>
-		<div className="pt-0">{children}</div>
-	</AccordionPrimitive.Content>
-))
+>(({ className, children, ...props }, ref) => {
+	const { styles } = useStyles()
+	return (
+		<AccordionPrimitive.Content ref={ref} className={cx(styles.accordion.content, className)} {...props}>
+			<div className={styles.accordion.contentInner}>{children}</div>
+		</AccordionPrimitive.Content>
+	)
+})
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

packages/react-router-devtools/src/client/components/Accordion.tsx

@@ -1,3 +1,5 @@
+import { useStyles } from "../styles/use-styles.js"
+
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
 	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 	id: string
@@ -7,11 +9,13 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
 }
 
 const Checkbox = ({ onChange, id, children, value, hint, ...props }: CheckboxProps) => {
+	const { styles } = useStyles()
 	return (
-		<div>
-			<label className="text-md cursor-pointer" htmlFor={id}>
-				<div className="flex items-center gap-2 py-1">
+		<div className={styles.checkbox.container}>
+			<label className={styles.checkbox.label} htmlFor={id}>
+				<div className={styles.checkbox.wrapper}>
 					<input
+						className={styles.checkbox.input}
 						value={value ? "checked" : undefined}
 						checked={value}
 						onChange={onChange}
@@ -23,7 +27,7 @@ const Checkbox = ({ onChange, id, children, value, hint, ...props }: CheckboxPro
 					{children}
 				</div>
 			</label>
-			{hint && <p className="text-sm text-gray-500">{hint}</p>}
+			{hint && <p className={styles.checkbox.hint}>{hint}</p>}
 		</div>
 	)
 }

packages/react-router-devtools/src/client/components/Checkbox.tsx

@@ -1,20 +1,14 @@
-import clsx from "clsx"
+import { useStyles } from "../styles/use-styles.js"
 
 interface EditorButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	onClick: () => void
 	name: string
 }
 
 const EditorButton = ({ name, onClick, ...props }: EditorButtonProps) => {
+	const { styles } = useStyles()
 	return (
-		<button
-			onClick={onClick}
-			type="button"
-			className={clsx(
-				"flex cursor-pointer items-center gap-1 rounded border border-[#1F9CF0] px-2.5 py-0.5 text-sm font-medium text-[#1F9CF0]"
-			)}
-			{...props}
-		>
+		<button onClick={onClick} type="button" className={styles.editorButton} {...props}>
 			Open in {name}
 		</button>
 	)

packages/react-router-devtools/src/client/components/EditorButton.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import type { ReactNode } from "react"
+import { cx, useStyles } from "../styles/use-styles.js"
 
 export const InfoCard = ({
 	children,
@@ -10,21 +10,13 @@ export const InfoCard = ({
 	title: string
 	onClear?: () => void
 }) => {
+	const { styles } = useStyles()
 	return (
-		<div className="mb-4 h-min rounded-lg border-solid border-gray-500/40 text-base font-normal text-white transition-all">
-			<h3
-				className={clsx(
-					"flex min-h-[30px] items-center text-left text-sm",
-					onClear ? "flex items-center justify-between gap-3" : ""
-				)}
-			>
+		<div className={styles.infoCard.container}>
+			<h3 className={cx(styles.infoCard.header, onClear && styles.infoCard.headerWithClear)}>
 				{title}
 				{onClear && typeof import.meta.hot === "undefined" && (
-					<button
-						type="button"
-						onClick={onClear}
-						className="cursor-pointer rounded bg-red-500 px-2 py-1 text-sm font-semibold text-white"
-					>
+					<button type="button" onClick={onClear} className={styles.infoCard.clearButton}>
 						Clear
 					</button>
 				)}

packages/react-router-devtools/src/client/components/InfoCard.tsx

@@ -1,35 +1,30 @@
-import clsx from "clsx"
+import { cx, useStyles } from "../styles/use-styles.js"
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	label?: string
 	hint?: string
 }
 
 export const Label = ({ className, children, ...props }: React.HTMLProps<HTMLLabelElement>) => {
+	const { styles } = useStyles()
 	return (
-		<label htmlFor={props.name} className={clsx("block text-white text-sm", className)} {...props}>
+		<label htmlFor={props.name} className={cx(styles.input.label, className)} {...props}>
 			{children}
 		</label>
 	)
 }
 
 export const Hint = ({ children }: React.HTMLProps<HTMLParagraphElement>) => {
-	return <p className="text-sm text-gray-500">{children}</p>
+	const { styles } = useStyles()
+	return <p className={styles.input.hint}>{children}</p>
 }
 
 const Input = ({ className, name, label, hint, ...props }: InputProps) => {
+	const { styles } = useStyles()
 	return (
-		<div className="flex w-full flex-col gap-1">
+		<div className={styles.input.container}>
 			{label && <Label htmlFor={name}>{label}</Label>}
-			<input
-				name={name}
-				id={name}
-				className={clsx(
-					"w-full rounded transition-all text-white border border-gray-400 hover:border-gray-400/50 bg-[#121212] px-2 py-1 text-sm",
-					className
-				)}
-				{...props}
-			/>
+			<input name={name} id={name} className={cx(styles.input.input, className)} {...props} />
 			{hint && <Hint>{hint}</Hint>}
 		</div>
 	)

packages/react-router-devtools/src/client/components/Input.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import { useState } from "react"
+import { cx, useStyles } from "../styles/use-styles.js"
 import { Checkbox } from "./Checkbox.js"
 import { Input } from "./Input.js"
 
@@ -32,6 +32,7 @@ const DEFAULT_VALUES = {
 }
 
 const NewRouteForm = () => {
+	const { styles } = useStyles()
 	const [newRouteInfo, setNewRouteInfo] = useState<NewRouteOptions>(DEFAULT_VALUES)
 
 	const handleSubmit = () => {
@@ -43,22 +44,22 @@ const NewRouteForm = () => {
 		setNewRouteInfo({ ...newRouteInfo, ...info })
 	}
 	return (
-		<div className="mb-2 rounded-lg border border-gray-500/20 p-2">
-			<div className="mb-2 block ">Route path:</div>
+		<div className={styles.newRouteForm.container}>
+			<div className={styles.newRouteForm.label}>Route path:</div>
 			<Input
 				onBlur={() =>
 					setNewInfo({
 						path: newRouteInfo.path.trim(),
 					})
 				}
 				onChange={(e) => setNewInfo({ path: e.target.value })}
-				className="mb-1"
+				className={styles.newRouteForm.inputMargin}
 			/>
-			<span className="mb-4 block text-gray-500">
+			<span className={styles.newRouteForm.hint}>
 				This will be added to your routes folder under your entered name, only supports .tsx and .ts extensions, you can
 				also emit the extension
 			</span>
-			<div className="mb-2 block">Additional options:</div>
+			<div className={styles.newRouteForm.label}>Additional options:</div>
 			<Checkbox
 				value={newRouteInfo.loader}
 				onChange={() =>
@@ -157,10 +158,7 @@ const NewRouteForm = () => {
 				onClick={handleSubmit}
 				disabled={!newRouteInfo.path}
 				type="button"
-				className={clsx(
-					"mr-2 mt-2 self-end text-white rounded border border-gray-400 px-2 py-1 text-sm",
-					!newRouteInfo.path && "opacity-50"
-				)}
+				className={cx(styles.newRouteForm.submitButton, !newRouteInfo.path && styles.newRouteForm.submitButtonDisabled)}
 			>
 				Add route
 			</button>