Skip to content

Commit 089c8aa

Browse files
AlemTuzlakAlemTuzlak
committed
remove tailwind for goober
1 parent 44cd099 commit 089c8aa

40 files changed

Lines changed: 2913 additions & 1129 deletions

‎packages/react-router-devtools/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@
148148
"clsx": "2.1.1",
149149
"date-fns": "^4.1.0",
150150
"framer-motion": "^11.0.8",
151+
"goober": "^2.1.18",
151152
"react-d3-tree": "^3.6.4",
152153
"react-diff-viewer-continued": "^4.0.5",
153154
"react-hotkeys-hook": "^4.6.1",

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,47 @@
11
import * as AccordionPrimitive from "@radix-ui/react-accordion"
22
import * as React from "react"
33

4+
import { cx, useStyles } from "../styles/use-styles.js"
45
import { Icon } from "./icon/Icon.js"
5-
import { cn } from "./util.js"
66

77
const Accordion = AccordionPrimitive.Root
88

99
const AccordionItem = React.forwardRef<
1010
React.ElementRef<typeof AccordionPrimitive.Item>,
1111
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12-
>(({ className, ...props }, ref) => (
13-
<AccordionPrimitive.Item ref={ref} className={cn("border-b border-b-gray-500", className)} {...props} />
14-
))
12+
>(({ className, ...props }, ref) => {
13+
const { styles } = useStyles()
14+
return <AccordionPrimitive.Item ref={ref} className={cx(styles.accordion.item, className)} {...props} />
15+
})
1516
AccordionItem.displayName = "AccordionItem"
1617

1718
const AccordionTrigger = React.forwardRef<
1819
React.ElementRef<typeof AccordionPrimitive.Trigger>,
1920
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
20-
>(({ className, children, ...props }, ref) => (
21-
<AccordionPrimitive.Header className="flex">
22-
<AccordionPrimitive.Trigger
23-
ref={ref}
24-
className={cn(
25-
"flex flex-1 items-center w-full justify-between py-2 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
26-
className
27-
)}
28-
{...props}
29-
>
30-
{children}
31-
<Icon className="text-white h-4 w-4 shrink-0 transition-transform duration-200" name="ChevronDown" />
32-
</AccordionPrimitive.Trigger>
33-
</AccordionPrimitive.Header>
34-
))
21+
>(({ className, children, ...props }, ref) => {
22+
const { styles } = useStyles()
23+
return (
24+
<AccordionPrimitive.Header className={styles.accordion.header}>
25+
<AccordionPrimitive.Trigger ref={ref} className={cx(styles.accordion.trigger, className)} {...props}>
26+
{children}
27+
<Icon className={styles.accordion.icon} name="ChevronDown" />
28+
</AccordionPrimitive.Trigger>
29+
</AccordionPrimitive.Header>
30+
)
31+
})
3532
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
3633

3734
const AccordionContent = React.forwardRef<
3835
React.ElementRef<typeof AccordionPrimitive.Content>,
3936
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
40-
>(({ className, children, ...props }, ref) => (
41-
<AccordionPrimitive.Content
42-
ref={ref}
43-
className={cn(
44-
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
45-
className
46-
)}
47-
{...props}
48-
>
49-
<div className="pt-0">{children}</div>
50-
</AccordionPrimitive.Content>
51-
))
37+
>(({ className, children, ...props }, ref) => {
38+
const { styles } = useStyles()
39+
return (
40+
<AccordionPrimitive.Content ref={ref} className={cx(styles.accordion.content, className)} {...props}>
41+
<div className={styles.accordion.contentInner}>{children}</div>
42+
</AccordionPrimitive.Content>
43+
)
44+
})
5245
AccordionContent.displayName = AccordionPrimitive.Content.displayName
5346

5447
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useStyles } from "../styles/use-styles.js"
2+
13
interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
24
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
35
id: string
@@ -7,11 +9,13 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
79
}
810

911
const Checkbox = ({ onChange, id, children, value, hint, ...props }: CheckboxProps) => {
12+
const { styles } = useStyles()
1013
return (
11-
<div>
12-
<label className="text-md cursor-pointer" htmlFor={id}>
13-
<div className="flex items-center gap-2 py-1">
14+
<div className={styles.checkbox.container}>
15+
<label className={styles.checkbox.label} htmlFor={id}>
16+
<div className={styles.checkbox.wrapper}>
1417
<input
18+
className={styles.checkbox.input}
1519
value={value ? "checked" : undefined}
1620
checked={value}
1721
onChange={onChange}
@@ -23,7 +27,7 @@ const Checkbox = ({ onChange, id, children, value, hint, ...props }: CheckboxPro
2327
{children}
2428
</div>
2529
</label>
26-
{hint && <p className="text-sm text-gray-500">{hint}</p>}
30+
{hint && <p className={styles.checkbox.hint}>{hint}</p>}
2731
</div>
2832
)
2933
}

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
import clsx from "clsx"
1+
import { useStyles } from "../styles/use-styles.js"
22

33
interface EditorButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
44
onClick: () => void
55
name: string
66
}
77

88
const EditorButton = ({ name, onClick, ...props }: EditorButtonProps) => {
9+
const { styles } = useStyles()
910
return (
10-
<button
11-
onClick={onClick}
12-
type="button"
13-
className={clsx(
14-
"flex cursor-pointer items-center gap-1 rounded border border-[#1F9CF0] px-2.5 py-0.5 text-sm font-medium text-[#1F9CF0]"
15-
)}
16-
{...props}
17-
>
11+
<button onClick={onClick} type="button" className={styles.editorButton} {...props}>
1812
Open in {name}
1913
</button>
2014
)

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import clsx from "clsx"
21
import type { ReactNode } from "react"
2+
import { cx, useStyles } from "../styles/use-styles.js"
33

44
export const InfoCard = ({
55
children,
@@ -10,21 +10,13 @@ export const InfoCard = ({
1010
title: string
1111
onClear?: () => void
1212
}) => {
13+
const { styles } = useStyles()
1314
return (
14-
<div className="mb-4 h-min rounded-lg border-solid border-gray-500/40 text-base font-normal text-white transition-all">
15-
<h3
16-
className={clsx(
17-
"flex min-h-[30px] items-center text-left text-sm",
18-
onClear ? "flex items-center justify-between gap-3" : ""
19-
)}
20-
>
15+
<div className={styles.infoCard.container}>
16+
<h3 className={cx(styles.infoCard.header, onClear && styles.infoCard.headerWithClear)}>
2117
{title}
2218
{onClear && typeof import.meta.hot === "undefined" && (
23-
<button
24-
type="button"
25-
onClick={onClear}
26-
className="cursor-pointer rounded bg-red-500 px-2 py-1 text-sm font-semibold text-white"
27-
>
19+
<button type="button" onClick={onClear} className={styles.infoCard.clearButton}>
2820
Clear
2921
</button>
3022
)}

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
1-
import clsx from "clsx"
1+
import { cx, useStyles } from "../styles/use-styles.js"
22

33
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
44
label?: string
55
hint?: string
66
}
77

88
export const Label = ({ className, children, ...props }: React.HTMLProps<HTMLLabelElement>) => {
9+
const { styles } = useStyles()
910
return (
10-
<label htmlFor={props.name} className={clsx("block text-white text-sm", className)} {...props}>
11+
<label htmlFor={props.name} className={cx(styles.input.label, className)} {...props}>
1112
{children}
1213
</label>
1314
)
1415
}
1516

1617
export const Hint = ({ children }: React.HTMLProps<HTMLParagraphElement>) => {
17-
return <p className="text-sm text-gray-500">{children}</p>
18+
const { styles } = useStyles()
19+
return <p className={styles.input.hint}>{children}</p>
1820
}
1921

2022
const Input = ({ className, name, label, hint, ...props }: InputProps) => {
23+
const { styles } = useStyles()
2124
return (
22-
<div className="flex w-full flex-col gap-1">
25+
<div className={styles.input.container}>
2326
{label && <Label htmlFor={name}>{label}</Label>}
24-
<input
25-
name={name}
26-
id={name}
27-
className={clsx(
28-
"w-full rounded transition-all text-white border border-gray-400 hover:border-gray-400/50 bg-[#121212] px-2 py-1 text-sm",
29-
className
30-
)}
31-
{...props}
32-
/>
27+
<input name={name} id={name} className={cx(styles.input.input, className)} {...props} />
3328
{hint && <Hint>{hint}</Hint>}
3429
</div>
3530
)

‎packages/react-router-devtools/src/client/components/NewRouteForm.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import clsx from "clsx"
21
import { useState } from "react"
2+
import { cx, useStyles } from "../styles/use-styles.js"
33
import { Checkbox } from "./Checkbox.js"
44
import { Input } from "./Input.js"
55

@@ -32,6 +32,7 @@ const DEFAULT_VALUES = {
3232
}
3333

3434
const NewRouteForm = () => {
35+
const { styles } = useStyles()
3536
const [newRouteInfo, setNewRouteInfo] = useState<NewRouteOptions>(DEFAULT_VALUES)
3637

3738
const handleSubmit = () => {
@@ -43,22 +44,22 @@ const NewRouteForm = () => {
4344
setNewRouteInfo({ ...newRouteInfo, ...info })
4445
}
4546
return (
46-
<div className="mb-2 rounded-lg border border-gray-500/20 p-2">
47-
<div className="mb-2 block ">Route path:</div>
47+
<div className={styles.newRouteForm.container}>
48+
<div className={styles.newRouteForm.label}>Route path:</div>
4849
<Input
4950
onBlur={() =>
5051
setNewInfo({
5152
path: newRouteInfo.path.trim(),
5253
})
5354
}
5455
onChange={(e) => setNewInfo({ path: e.target.value })}
55-
className="mb-1"
56+
className={styles.newRouteForm.inputMargin}
5657
/>
57-
<span className="mb-4 block text-gray-500">
58+
<span className={styles.newRouteForm.hint}>
5859
This will be added to your routes folder under your entered name, only supports .tsx and .ts extensions, you can
5960
also emit the extension
6061
</span>
61-
<div className="mb-2 block">Additional options:</div>
62+
<div className={styles.newRouteForm.label}>Additional options:</div>
6263
<Checkbox
6364
value={newRouteInfo.loader}
6465
onChange={() =>
@@ -157,10 +158,7 @@ const NewRouteForm = () => {
157158
onClick={handleSubmit}
158159
disabled={!newRouteInfo.path}
159160
type="button"
160-
className={clsx(
161-
"mr-2 mt-2 self-end text-white rounded border border-gray-400 px-2 py-1 text-sm",
162-
!newRouteInfo.path && "opacity-50"
163-
)}
161+
className={cx(styles.newRouteForm.submitButton, !newRouteInfo.path && styles.newRouteForm.submitButtonDisabled)}
164162
>
165163
Add route
166164
</button>

0 commit comments

Comments
 (0)