Add detail page

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Badge/Badge.stories.tsx

@@ -9,23 +9,34 @@ export default {
 
 type Story = StoryObj<typeof Badge>;
 
+const sizes = ["sm", "md"] as const;
+const variants = [
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "neutral",
+    "outline",
+    "highlight",
+] as const;
+
 export const Default: Story = {
     render: () => (
-        <>
-            {(
-                [
-                    "success",
-                    "warning",
-                    "danger",
-                    "info",
-                    "neutral",
-                    "outline",
-                ] as const
-            ).map((variant) => (
-                <Badge key={variant} variant={variant}>
-                    {variant}
-                </Badge>
+        <div className="space-y-4">
+            {sizes.map((size) => (
+                <div key={size} className="space-y-1">
+                    <div className="text-xs text-txt-secondary">
+                        Size : {size}
+                    </div>
+                    <div className="flex gap-2">
+                        {variants.map((variant) => (
+                            <Badge key={variant} variant={variant} size={size}>
+                                {variant}
+                            </Badge>
+                        ))}
+                    </div>
+                </div>
             ))}
-        </>
+        </div>
     ),
 };

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -2,11 +2,19 @@ import type { HTMLAttributes } from "react";
 import { tv } from "tailwind-variants";
 
 type Props = {
-    variant?: "success" | "warning" | "danger" | "info" | "neutral" | "outline";
+    variant?:
+        | "success"
+        | "warning"
+        | "danger"
+        | "info"
+        | "neutral"
+        | "outline"
+        | "highlight";
+    size?: "sm" | "md";
 } & HTMLAttributes<HTMLDivElement>;
 
 const badge = tv({
-    base: "text-xs font-medium py-[2px] px-[6px] rounded-lg w-max",
+    base: "font-medium rounded-lg w-max flex gap-1 items-center",
     variants: {
         variant: {
             success: "bg-success text-txt-success",
@@ -15,10 +23,18 @@ const badge = tv({
             info: "bg-info text-txt-info",
             neutral: "bg-subtle text-txt-secondary",
             outline: "text-txt-tertiary border border-border-low",
+            highlight: "bg-highlight text-txt-primary",
         },
+        size: {
+            sm: "text-xs py-[2px] px-[6px]",
+            md: "text-sm py-[6px] px-2",
+        },
+    },
+    defaultVariants: {
+        size: "md",
     },
 });
 
 export function Badge(props: Props) {
-    return <div className={badge(props)} {...props} />;
+    return <div {...props} className={badge(props)} />;
 }

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -61,12 +61,19 @@ const dropdownItem = tv({
     },
 });
 
-export function ActionDropdown(props: Omit<Props, "toggle">) {
+export function ActionDropdown(
+    props: Omit<Props, "toggle"> & {
+        variant?: ComponentProps<typeof Button>["variant"];
+    },
+) {
     return (
         <Dropdown
             {...props}
             toggle={
-                <Button variant="tertiary" icon={IconDotGrid1x3Horizontal} />
+                <Button
+                    variant={props.variant ?? "tertiary"}
+                    icon={IconDotGrid1x3Horizontal}
+                />
             }
         />
     );

packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx

@@ -3,7 +3,7 @@ import { Label } from "../Label/Label";
 
 type Props = {
     label: string;
-    id: string;
+    id?: string;
     children: ReactNode;
     error?: string;
 };

packages/ui/src/Atoms/Select/Select.tsx

@@ -112,7 +112,7 @@ export function Select({
               (c) => c.props.value?.toString() === value?.toString(),
           )
         : undefined;
-    console.log(childrenArr, valueNode);
+
     return (
         <Root onValueChange={onValueChange} value={value}>
             <Trigger className={trigger({ ...props })} {...props}>