Skip to content

Commit 74f12b2

Browse files
jaaydenhjaaydenh
committed
feat: add immutable badge
1 parent ebd080d commit 74f12b2

File tree

4 files changed

+80
-13
lines changed

4 files changed

+80
-13
lines changed

‎site/src/DynamicForm.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group"
2121
import { Label } from "./components/Label/Label";
2222
import { Checkbox } from "./components/Checkbox/Checkbox";
2323
import { Textarea } from "./components/Textarea/Textarea";
24-
24+
import { Badge } from "./components/Badge/Badge";
2525
export function DynamicForm() {
2626
const serverAddress = "localhost:8100";
2727
const [user, setUser] = useState<string>("");
@@ -189,8 +189,9 @@ export function DynamicForm() {
189189
return (
190190
<div key={param.name} className="flex flex-col gap-2 items-center">
191191
<label>
192-
{param.display_name || param.name}
193192
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
193+
<span className="mr-2">{param.display_name || param.name}</span>
194+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
194195
</label>
195196
{param.description && <div className="text-sm">{param.description}</div>}
196197
<Controller
@@ -225,8 +226,9 @@ export function DynamicForm() {
225226
return (
226227
<div key={param.name} className="flex flex-col gap-2 items-center">
227228
<label>
228-
{param.display_name || param.name}
229229
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
230+
<span className="mr-2">{param.display_name || param.name}</span>
231+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
230232
</label>
231233
{param.description && <div className="text-sm">{param.description}</div>}
232234
<Controller
@@ -268,8 +270,9 @@ export function DynamicForm() {
268270
<div key={param.name} className="flex flex-col gap-2 items-center">
269271
<div className="flex items-center justify-between gap-2">
270272
<label>
271-
{param.display_name || param.name}
272273
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
274+
<span className="mr-2">{param.display_name || param.name}</span>
275+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
273276
</label>
274277
<output className="text-sm font-medium tabular-nums">{parameterValue(param.value)}</output>
275278
</div>
@@ -295,8 +298,9 @@ export function DynamicForm() {
295298
<div key={param.name} className="flex flex-col gap-2 items-center">
296299
<div className="flex items-center justify-between gap-2">
297300
<label>
298-
{param.display_name || param.name}
299301
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
302+
<span className="mr-2">{param.display_name || param.name}</span>
303+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
300304
</label>
301305
</div>
302306
{param.description && <div className="text-sm">{param.description}</div>}
@@ -326,8 +330,9 @@ export function DynamicForm() {
326330
<div key={param.name} className="flex flex-col gap-2 items-center">
327331
<div className="flex items-center justify-between gap-2">
328332
<label>
329-
{param.display_name || param.name}
330333
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
334+
<span className="mr-2">{param.display_name || param.name}</span>
335+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
331336
</label>
332337
</div>
333338
{param.description && <div className="text-sm">{param.description}</div>}
@@ -351,8 +356,9 @@ export function DynamicForm() {
351356
<div key={param.name} className="flex flex-col gap-2 items-center">
352357
<div className="flex items-center justify-between gap-2">
353358
<label>
354-
{param.display_name || param.name}
355359
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
360+
<span className="mr-2">{param.display_name || param.name}</span>
361+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
356362
</label>
357363
</div>
358364
{param.description && <div className="text-sm">{param.description}</div>}
@@ -372,8 +378,9 @@ export function DynamicForm() {
372378
<div key={param.name} className="flex flex-col gap-2 items-center">
373379
<div className="flex items-center justify-between gap-2">
374380
<label>
375-
{param.display_name || param.name}
376381
{param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
382+
<span className="mr-2">{param.display_name || param.name}</span>
383+
{!param.mutable && <Badge variant="warning" size="sm">Immutable</Badge>}
377384
</label>
378385
</div>
379386
{param.description && <div className="text-sm">{param.description}</div>}
@@ -452,7 +459,6 @@ export function DynamicForm() {
452459
}}
453460
className="w-[300px]"
454461
type={mapParamTypeToInputType(param.type)}
455-
// value={field.value}
456462
defaultValue={parameterValue(param.default_value)}
457463
disabled={(param.form_type_metadata as { disabled?: boolean })?.disabled}
458464
/>

‎site/src/components/Badge/Badge.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* Copied from shadc/ui on 11/13/2024
3+
* @see {@link https://ui.shadcn.com/docs/components/badge}
4+
*/
5+
import { type VariantProps, cva } from "class-variance-authority";
6+
import type { FC } from "react";
7+
import { TriangleAlert } from "lucide-react"
8+
import { cn } from "../../utils/cn"
9+
10+
export const badgeVariants = cva(
11+
"inline-flex items-center rounded-md border px-2 py-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
12+
{
13+
variants: {
14+
variant: {
15+
default:
16+
"border-transparent bg-surface-secondary text-content-secondary shadow",
17+
warning: "border-border-warning bg-surface-orange text-border-warning",
18+
},
19+
size: {
20+
sm: "text-2xs font-regular",
21+
md: "text-xs font-medium",
22+
},
23+
},
24+
defaultVariants: {
25+
variant: "default",
26+
size: "md",
27+
},
28+
},
29+
);
30+
31+
export interface BadgeProps
32+
extends React.HTMLAttributes<HTMLDivElement>,
33+
VariantProps<typeof badgeVariants> {}
34+
35+
export const Badge: FC<BadgeProps> = ({
36+
className,
37+
variant,
38+
size,
39+
children,
40+
...props
41+
}) => {
42+
return (
43+
<div
44+
className={cn(badgeVariants({ variant, size }), className)}
45+
{...props}
46+
>
47+
{variant === 'warning' && (
48+
<TriangleAlert className={cn(
49+
"mr-1",
50+
size === "sm" ? "size-icon-xs" : "size-icon-sm"
51+
)} />
52+
)}
53+
{children}
54+
</div>
55+
);
56+
};

‎site/src/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,14 @@
7575
--border-default: oklch(0.910 0.004 240);
7676
--border-success: oklch(0.455 0.127 142);
7777
--border-destructive: oklch(0.637 0.236 25);
78+
--border-warning: oklch(0.748 0.191 80);
7879
--overlay-default: oklch(0.856 0.003 240 / 80%);
7980
--radius: 0.5rem;
8081
--highlight-purple: oklch(0.637 0.236 285);
8182
--highlight-green: oklch(0.384 0.127 143);
8283
--highlight-grey: oklch(0.678 0.003 240);
8384
--highlight-sky: oklch(0.455 0.187 220);
85+
--highlight-orange: oklch(0.831 0.157 80);
8486
--border: oklch(0.910 0.004 240);
8587
--input: oklch(0.910 0.004 240);
8688
--ring: oklch(0.145 0.003 240);
@@ -129,11 +131,13 @@
129131
--border-default: oklch(0.201 0.003 240);
130132
--border-success: oklch(0.455 0.127 142);
131133
--border-destructive: oklch(0.748 0.191 25);
134+
--border-warning: oklch(0.831 0.157 80);
132135
--overlay-default: oklch(0.145 0.003 240 / 80%);
133136
--highlight-purple: oklch(0.873 0.127 252);
134137
--highlight-green: oklch(0.873 0.095 141);
135138
--highlight-grey: oklch(0.498 0.003 240);
136139
--highlight-sky: oklch(0.678 0.187 198);
140+
--highlight-orange: oklch(0.831 0.157 80);
137141
--border: oklch(0.189 0.003 240);
138142
--input: oklch(0.189 0.003 240);
139143
--ring: oklch(0.856 0.003 240);
@@ -178,6 +182,7 @@
178182
--color-border-default: var(--border-default);
179183
--color-border-success: var(--border-success);
180184
--color-border-destructive: var(--border-destructive);
185+
--color-border-warning: var(--border-warning);
181186
--color-overlay-default: var(--overlay-default);
182187
--color-highlight-purple: var(--highlight-purple);
183188
--color-highlight-green: var(--highlight-green);

‎site/tailwind.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ module.exports = {
1414
"icon-xs": "0.875rem",
1515
},
1616
fontSize: {
17-
"2xs": ["0.625rem", "0.875rem"],
18-
xs: ["0.75rem", "1.125rem"],
19-
sm: ["0.875rem", "1.5rem"],
20-
"3xl": ["2rem", "2.5rem"],
17+
"2xs": ["0.625rem", { lineHeight: "0.875rem" }],
18+
xs: ["0.75rem", { lineHeight: "1.125rem" }],
19+
sm: ["0.875rem", { lineHeight: "1.5rem" }],
20+
"3xl": ["2rem", { lineHeight: "2.5rem" }],
2121
},
2222
borderRadius: {
2323
lg: "var(--radius)",

0 commit comments

Comments
 (0)