@rovula/ui 0.1.21 → 0.1.22

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge, SeverityBadge } from "./Badge";
+import type { BadgeColor, SeverityLevel } from "./Badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-bg-bg1">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Default — single badge with controls
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  args: {
+    label: "To do",
+    color: "default",
+    clickable: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Status Badges — all colors × clickable / static
+// ---------------------------------------------------------------------------
+
+const COLORS: BadgeColor[] = ["default", "warning", "info", "error", "success"];
+
+const COLOR_LABELS: Record<BadgeColor, string> = {
+  default: "To do",
+  warning: "In Progress",
+  info: "Ready to review",
+  error: "In review",
+  success: "Completed",
+};
+
+export const StatusBadges: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {/* Clickable (with border + chevron) */}
+      <div>
+        <p className="typography-small1 text-text-g-contrast-low mb-3">
+          Clickable
+        </p>
+        <div className="flex flex-wrap gap-3">
+          {COLORS.map((color) => (
+            <Badge
+              key={color}
+              color={color}
+              label={COLOR_LABELS[color]}
+              clickable
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Static (no border, no chevron) */}
+      <div>
+        <p className="typography-small1 text-text-g-contrast-low mb-3">
+          Static
+        </p>
+        <div className="flex flex-wrap gap-3">
+          {COLORS.map((color) => (
+            <Badge key={color} color={color} label={COLOR_LABELS[color]} />
+          ))}
+        </div>
+      </div>
+
+      {/* Percent only */}
+      <div>
+        <p className="typography-small1 text-text-g-contrast-low mb-3">
+          With percentage
+        </p>
+        <div className="flex flex-wrap gap-3">
+          {COLORS.map((color, i) => (
+            <Badge
+              key={color}
+              color={color}
+              label={COLOR_LABELS[color]}
+              percent={i === 0 ? 0 : i === 4 ? 100 : 50}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Severity Badges
+// ---------------------------------------------------------------------------
+
+const SEVERITIES: SeverityLevel[] = [
+  "highest",
+  "high",
+  "medium",
+  "low",
+  "lowest",
+];
+
+export const SeverityBadges: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <p className="typography-small1 text-text-g-contrast-low mb-1">
+        Severity levels
+      </p>
+      <div className="flex flex-wrap gap-3">
+        {SEVERITIES.map((severity) => (
+          <SeverityBadge key={severity} severity={severity} />
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/components/Badge/Badge.styles.ts

@@ -0,0 +1,70 @@
+import { cva } from "class-variance-authority";
+
+export const badgeVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-lg px-3 py-1",
+    "typography-body3",
+  ],
+  {
+    variants: {
+      color: {
+        default: [
+          "bg-[var(--badge-default-bg)]",
+          "text-[var(--badge-default-text)]",
+        ],
+        success: [
+          "bg-[var(--badge-success-bg)]",
+          "text-[var(--badge-success-text)]",
+        ],
+        warning: [
+          "bg-[var(--badge-warning-bg)]",
+          "text-[var(--badge-warning-text)]",
+        ],
+        info: [
+          "bg-[var(--badge-info-bg)]",
+          "text-[var(--badge-info-text)]",
+        ],
+        error: [
+          "bg-[var(--badge-error-bg)]",
+          "text-[var(--badge-error-text)]",
+        ],
+      },
+      clickable: {
+        true: "border border-solid",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      { color: "default", clickable: true, className: "border-[var(--badge-default-border)]" },
+      { color: "success", clickable: true, className: "border-[var(--badge-success-border)]" },
+      { color: "warning", clickable: true, className: "border-[var(--badge-warning-border)]" },
+      { color: "info", clickable: true, className: "border-[var(--badge-info-border)]" },
+      { color: "error", clickable: true, className: "border-[var(--badge-error-border)]" },
+    ],
+    defaultVariants: {
+      color: "default",
+      clickable: false,
+    },
+  },
+);
+
+export const severityBadgeVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded px-1 py-0.5",
+    "typography-small6 text-[var(--badge-severity-text)]",
+  ],
+  {
+    variants: {
+      severity: {
+        highest: "bg-[var(--badge-severity-highest-bg)]",
+        high: "bg-[var(--badge-severity-high-bg)]",
+        medium: "bg-[var(--badge-severity-medium-bg)]",
+        low: "bg-[var(--badge-severity-low-bg)]",
+        lowest: "bg-[var(--badge-severity-lowest-bg)]",
+      },
+    },
+    defaultVariants: {
+      severity: "medium",
+    },
+  },
+);

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
+import { badgeVariants, severityBadgeVariants } from "./Badge.styles";
+
+// ---------------------------------------------------------------------------
+// Status Badge
+// ---------------------------------------------------------------------------
+
+export type BadgeColor = "default" | "success" | "warning" | "info" | "error";
+
+export type BadgeProps = {
+  /** Badge text label */
+  label: string;
+  /** Color variant */
+  color?: BadgeColor;
+  /**
+   * Show a dropdown chevron — use when the badge acts as a clickable trigger.
+   * Automatically adds a border to indicate interactivity.
+   */
+  clickable?: boolean;
+  /** Optional percentage value shown below the label */
+  percent?: number;
+  className?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      label,
+      color = "default",
+      clickable = false,
+      percent,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasPercent = percent !== undefined;
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          badgeVariants({ color, clickable }),
+          hasPercent && "flex-col gap-0.5",
+          clickable && "cursor-pointer gap-1",
+          className,
+        )}
+        {...props}
+      >
+        <span className="flex items-center gap-1">
+          {label}
+          {clickable && (
+            <ChevronDownIcon className="size-4 shrink-0" aria-hidden />
+          )}
+        </span>
+        {hasPercent && (
+          <span className="tabular-nums">
+            {percent}%
+          </span>
+        )}
+      </span>
+    );
+  },
+);
+Badge.displayName = "Badge";
+
+// ---------------------------------------------------------------------------
+// Severity Badge
+// ---------------------------------------------------------------------------
+
+export type SeverityLevel = "highest" | "high" | "medium" | "low" | "lowest";
+
+export type SeverityBadgeProps = {
+  severity: SeverityLevel;
+  className?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+
+const SEVERITY_LABELS: Record<SeverityLevel, string> = {
+  highest: "Highest",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+  lowest: "Lowest",
+};
+
+const SeverityBadge = React.forwardRef<HTMLSpanElement, SeverityBadgeProps>(
+  ({ severity, className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(severityBadgeVariants({ severity }), className)}
+      {...props}
+    >
+      {SEVERITY_LABELS[severity]}
+    </span>
+  ),
+);
+SeverityBadge.displayName = "SeverityBadge";
+
+export { Badge, SeverityBadge };

package/src/components/Badge/index.ts

@@ -0,0 +1,3 @@
+import { Badge, SeverityBadge } from "./Badge";
+
+export { Badge, SeverityBadge };

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -3,8 +3,18 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
-import { MenuItemType } from "../Menu/Menu";
 import Icon from "../Icon/Icon";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogTrigger,
+  DialogClose,
+} from "../Dialog/Dialog";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -198,3 +208,162 @@ export const WithIcons: StoryObj<typeof Dropdown> = {
     );
   },
 };
+
+// ---------------------------------------------------------------------------
+// Dropdown inside Dialog — showcases the fix for overflow:hidden bug
+// ---------------------------------------------------------------------------
+
+const dialogOptions: Options[] = [
+  { value: "design", label: "Design" },
+  { value: "engineering", label: "Engineering" },
+  { value: "product", label: "Product" },
+  { value: "marketing", label: "Marketing" },
+  { value: "data", label: "Data & Analytics" },
+  { value: "ops", label: "Operations" },
+];
+
+const filterableOptions: Options[] = new Array(20).fill("").map((_, i) => ({
+  value: `member-${i + 1}`,
+  label: `Team Member ${i + 1}`,
+}));
+
+export const InsideDialog: StoryObj<typeof Dropdown> = {
+  name: "Inside Dialog",
+  render: () => {
+    const [department, setDepartment] = useState<Options | undefined>();
+    const [member, setMember] = useState<Options | undefined>();
+    const [role, setRole] = useState<Options | undefined>();
+
+    return (
+      <div className="flex gap-4 flex-wrap">
+        {/* Demo 1: Single dropdown in dialog */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Single Dropdown
+          </p>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">Open Dialog</Button>
+            </DialogTrigger>
+            <DialogContent showCloseButton>
+              <DialogHeader>
+                <DialogTitle>Assign to Department</DialogTitle>
+                <DialogDescription>
+                  Dropdown popup appears above the dialog overlay — not clipped
+                  by overflow.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogBody className="gap-4 py-2">
+                <Dropdown
+                  id="dept"
+                  label="Department"
+                  size="md"
+                  fullwidth
+                  options={dialogOptions}
+                  value={department}
+                  onSelect={setDepartment}
+                />
+              </DialogBody>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button>Confirm</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        {/* Demo 2: Multiple dropdowns — each opens independently */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Multiple Dropdowns
+          </p>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">Open Dialog</Button>
+            </DialogTrigger>
+            <DialogContent showCloseButton>
+              <DialogHeader>
+                <DialogTitle>Invite Team Member</DialogTitle>
+                <DialogDescription>
+                  Multiple dropdowns — each opens its own popup independently.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogBody className="gap-4 py-2">
+                <Dropdown
+                  id="member"
+                  label="Member"
+                  size="md"
+                  fullwidth
+                  options={filterableOptions}
+                  value={member}
+                  onSelect={setMember}
+                  filterMode
+                />
+                <Dropdown
+                  id="role"
+                  label="Role"
+                  size="md"
+                  fullwidth
+                  options={[
+                    { value: "viewer", label: "Viewer" },
+                    { value: "editor", label: "Editor" },
+                    { value: "admin", label: "Admin" },
+                  ]}
+                  value={role}
+                  onSelect={setRole}
+                />
+              </DialogBody>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button disabled={!member || !role}>Send Invite</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        {/* Demo 3: Filterable dropdown in dialog */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Filter Mode
+          </p>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">Open Dialog</Button>
+            </DialogTrigger>
+            <DialogContent showCloseButton>
+              <DialogHeader>
+                <DialogTitle>Search & Select</DialogTitle>
+                <DialogDescription>
+                  filterMode=true — type to filter options, popup stays properly
+                  positioned.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogBody className="gap-4 py-2">
+                <Dropdown
+                  id="member-filter"
+                  label="Search member"
+                  size="md"
+                  fullwidth
+                  filterMode
+                  options={filterableOptions}
+                  value={member}
+                  onSelect={setMember}
+                />
+              </DialogBody>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button disabled={!member}>Select</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+    );
+  },
+};