@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/progress.tsx

@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ProgressSize    = "sm" | "md" | "lg"
+export type ProgressVariant = "default" | "success" | "warning" | "error"
+export type ProgressShape   = "bar" | "ring"
+
+// ─── Bar-shape variants ───────────────────────────────────────────────────────
+
+const barTrackVariants = cva(
+  "ax:relative ax:w-full ax:overflow-hidden ax:rounded-full ax:bg-muted",
+  {
+    variants: {
+      size: {
+        sm: "ax:h-1",
+        md: "ax:h-2",
+        lg: "ax:h-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+const barIndicatorVariants = cva(
+  "ax:h-full ax:w-full ax:rounded-full ax:[transition:transform_var(--motion-slow)_var(--motion-ease-out)]",
+  {
+    variants: {
+      variant: {
+        default: "ax:bg-primary",
+        success: "ax:bg-success",
+        warning: "ax:bg-warning",
+        error:   "ax:bg-destructive",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+// ─── Ring-shape mappings ──────────────────────────────────────────────────────
+
+// `size` for the ring shape maps to a default pixel diameter. `ringSize`
+// overrides this when callers need a specific dimension.
+const RING_DEFAULT_PX: Record<ProgressSize, number> = {
+  sm: 32,
+  md: 48,
+  lg: 64,
+}
+
+// Default stroke widths scale with size so a small ring doesn't look hollow
+// and a large ring doesn't look anaemic. `strokeWidth` overrides.
+const RING_DEFAULT_STROKE: Record<ProgressSize, number> = {
+  sm: 4,
+  md: 5,
+  lg: 6,
+}
+
+const RING_STROKE_CLASS: Record<ProgressVariant, string> = {
+  default: "ax:stroke-primary",
+  success: "ax:stroke-success",
+  warning: "ax:stroke-warning",
+  error:   "ax:stroke-destructive",
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Current value, 0–max. */
+  value?: number
+  /** Maximum value. Defaults to 100. */
+  max?: number
+  /** Visual shape - horizontal `bar` (default) or circular `ring`. */
+  shape?: ProgressShape
+  /** Size - applies to both shapes:
+   *   bar  → height (h-1 / h-2 / h-4)
+   *   ring → pixel diameter (32 / 48 / 64) */
+  size?: ProgressSize
+  /** Colour treatment. The track stays neutral; this drives the indicator. */
+  variant?: ProgressVariant
+  /** Ring-only: override the pixel diameter (takes precedence over `size`). */
+  ringSize?: number
+  /** Ring-only: override the stroke width in pixels. */
+  strokeWidth?: number
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      className,
+      value = 0,
+      max = 100,
+      shape = "bar",
+      size = "md",
+      variant = "default",
+      ringSize,
+      strokeWidth,
+      ...props
+    },
+    ref
+  ) => {
+    const pct = Math.min(100, Math.max(0, (value / max) * 100))
+
+    // Common ARIA + data attributes work for both shapes.
+    const ariaProps = {
+      role:           "progressbar" as const,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "data-state":    pct >= 100 ? "complete" : "loading",
+      "data-value":    value,
+      "data-max":      max,
+    }
+
+    if (shape === "ring") {
+      const diameter    = ringSize ?? RING_DEFAULT_PX[size]
+      const stroke      = strokeWidth ?? RING_DEFAULT_STROKE[size]
+      const r           = (diameter - stroke) / 2
+      const c           = diameter / 2
+      const circ        = 2 * Math.PI * r
+      const dashOffset  = circ * (1 - pct / 100)
+      const strokeClass = RING_STROKE_CLASS[variant]
+      return (
+        <div
+          ref={ref}
+          className={cn("ax:inline-flex ax:shrink-0", className)}
+          {...ariaProps}
+          {...props}
+        >
+          <svg
+            width={diameter}
+            height={diameter}
+            viewBox={`0 0 ${diameter} ${diameter}`}
+            aria-hidden="true"
+          >
+            {/* Track - same hue at 15% opacity sits behind the indicator arc */}
+            <circle
+              cx={c}
+              cy={c}
+              r={r}
+              fill="none"
+              strokeWidth={stroke}
+              className={`${strokeClass} ax:opacity-15`}
+            />
+            {/* Indicator arc - animated stroke-dashoffset for smooth value changes */}
+            {pct > 0 && (
+              <circle
+                cx={c}
+                cy={c}
+                r={r}
+                fill="none"
+                strokeWidth={stroke}
+                strokeLinecap="round"
+                strokeDasharray={circ}
+                strokeDashoffset={dashOffset}
+                transform={`rotate(-90 ${c} ${c})`}
+                className={cn(
+                  strokeClass,
+                  "ax:[transition:stroke-dashoffset_var(--motion-slow)_var(--motion-ease-out)]"
+                )}
+              />
+            )}
+          </svg>
+        </div>
+      )
+    }
+
+    // Bar shape (default)
+    return (
+      <div
+        ref={ref}
+        className={cn(barTrackVariants({ size }), className)}
+        {...ariaProps}
+        {...props}
+      >
+        <div
+          className={barIndicatorVariants({ variant })}
+          style={{ transform: `translateX(-${100 - pct}%)` }}
+        />
+      </div>
+    )
+  }
+)
+Progress.displayName = "Progress"

package/src/components/prompt-input.stories.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Paperclip } from "lucide-react"
+import { AttachmentChip, PromptInput, PromptInputAction } from "./prompt-input"
+import { TooltipProvider } from "./tooltip"
+
+const meta: Meta<typeof PromptInput> = {
+  title: "Components/PromptInput",
+  component: PromptInput,
+  tags: ["autodocs"],
+  decorators: [(Story) => <TooltipProvider><div style={{ maxWidth: 640 }}><Story /></div></TooltipProvider>],
+  argTypes: { onSubmit: { control: false }, onStop: { control: false }, onValueChange: { control: false } },
+  args: { onSubmit: () => undefined, placeholder: "Ask about properties, prices or communities" },
+}
+
+export default meta
+type Story = StoryObj<typeof PromptInput>
+
+export const Default: Story = {}
+
+export const Busy: Story = { args: { busy: true, defaultValue: "", onStop: () => undefined } }
+
+export const NearTheLimit: Story = { args: { maxLength: 120, defaultValue: "Three-bedroom apartments on Saadiyat Island for a family of five, near a school, with sea views please" } }
+
+export const OverTheLimit: Story = { args: { maxLength: 60, defaultValue: "Three-bedroom apartments on Saadiyat Island for a family of five" } }
+
+export const Disabled: Story = {
+  args: { disabled: true, disabledReason: "The assistant is offline for maintenance until 14:00. Your agent can still help." },
+}
+
+export const WithAttachments: Story = {
+  args: {
+    hasAttachments: true,
+    canSubmit: false,
+    hint: "Waiting for uploads to finish.",
+    toolbar: <PromptInputAction label="Attach files"><Paperclip /></PromptInputAction>,
+    attachments: (
+      <div style={{ display: "flex", gap: "0.5rem", overflowX: "auto" }} role="list" aria-label="Attachments">
+        <div role="listitem"><AttachmentChip name="floor-plan.pdf" size={1_800_000} onRemove={() => undefined} /></div>
+        <div role="listitem"><AttachmentChip name="living-room.jpg" size={420_000} kind="image" progress={45} onRemove={() => undefined} /></div>
+        <div role="listitem"><AttachmentChip name="video.mov" size={52_000_000} error="File type not supported" onRemove={() => undefined} /></div>
+      </div>
+    ),
+  },
+}
+
+export const Small: Story = {
+  decorators: [(Story) => <div style={{ maxWidth: 360 }}><Story /></div>],
+  args: {
+    size: "sm",
+    placeholder: "Message Adres Assistant",
+    toolbar: <PromptInputAction label="Attach files"><Paperclip /></PromptInputAction>,
+  },
+}
+
+export const FileDrop: Story = {
+  args: {
+    onFilesDrop: () => undefined,
+    dropHint: "PDF, PNG or JPG, up to 10 MB each",
+    placeholder: "Drag a file onto the composer",
+  },
+}

package/src/components/prompt-input.test.tsx

@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { AttachmentChip, PromptInput, PromptInputAction, characterCountTone, formatFileSize, isFileDrag } from "./prompt-input"
+import { TooltipProvider } from "./tooltip"
+
+const submit = () => undefined
+
+describe("characterCountTone", () => {
+  it("stays hidden below 80% of the limit", () => {
+    expect(characterCountTone(1599, 2000)).toBeNull()
+  })
+
+  it("is muted from 80%, warning from 90% and destructive once over", () => {
+    expect(characterCountTone(1600, 2000)).toBe("muted")
+    expect(characterCountTone(1800, 2000)).toBe("warning")
+    expect(characterCountTone(2000, 2000)).toBe("warning")
+    expect(characterCountTone(2001, 2000)).toBe("destructive")
+  })
+})
+
+describe("formatFileSize", () => {
+  it("uses KB below a megabyte, never showing 0 KB", () => {
+    expect(formatFileSize(10)).toBe("1 KB")
+    expect(formatFileSize(420_000)).toBe("410 KB")
+  })
+
+  it("uses MB with one decimal from a megabyte", () => {
+    expect(formatFileSize(1024 * 1024 * 1.8)).toBe("1.8 MB")
+  })
+})
+
+describe("PromptInput", () => {
+  it("disables Send while the field is empty", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} />)
+    expect(html).toMatch(/aria-label="Send message"[^>]*disabled=""|disabled=""[^>]*aria-label="Send message"/)
+  })
+
+  it("enables Send for attachments alone", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} hasAttachments />)
+    expect(html).not.toMatch(/aria-label="Send message"[^>]*disabled=""|disabled=""[^>]*aria-label="Send message"/)
+  })
+
+  it("marks an over-limit field invalid and says how much to cut", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} maxLength={10} defaultValue="Twelve chars" />)
+    expect(html).toContain('aria-invalid="true"')
+    expect(html).toContain("Shorten your message by 2 characters to send it.")
+  })
+
+  it("swaps Send for Stop while busy", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} busy />)
+    expect(html).toContain('aria-label="Stop generating"')
+    expect(html).not.toContain('aria-label="Send message"')
+  })
+
+  it("explains why it is disabled", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} disabled disabledReason="Offline until 14:00" />)
+    expect(html).toContain("Offline until 14:00")
+  })
+})
+
+describe("AttachmentChip", () => {
+  it("shows progress while uploading, then the size", () => {
+    expect(renderToStaticMarkup(<AttachmentChip name="a.pdf" size={2048} progress={40} onRemove={submit} />)).toContain('aria-label="Uploading a.pdf"')
+    expect(renderToStaticMarkup(<AttachmentChip name="a.pdf" size={2048} onRemove={submit} />)).toContain("2 KB")
+  })
+
+  it("shows the error in place of size", () => {
+    const html = renderToStaticMarkup(<AttachmentChip name="a.mov" size={2048} error="File type not supported" onRemove={submit} />)
+    expect(html).toContain("File type not supported")
+    expect(html).not.toContain("2 KB")
+  })
+})
+
+describe("PromptInput size", () => {
+  it("defaults to md with 36px buttons", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={() => undefined} />)
+    expect(html).toContain('data-size="md"')
+    expect(html).toContain("ax:size-9")
+  })
+
+  it("tightens to sm and sizes toolbar actions to match", () => {
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <PromptInput size="sm" onSubmit={() => undefined} toolbar={<PromptInputAction label="Attach files"><svg /></PromptInputAction>} />
+      </TooltipProvider>,
+    )
+    expect(html).toContain('data-size="sm"')
+    expect(html).toContain("ax:rounded-lg")
+    expect(html).not.toContain("ax:size-9")
+    expect(html.match(/ax:size-8/g)?.length).toBe(2)
+  })
+})
+
+describe("PromptInput file drop", () => {
+  it("only treats drags that carry files as drops", () => {
+    expect(isFileDrag(["Files", "application/x-moz-file"])).toBe(true)
+    expect(isFileDrag(["text/plain", "text/uri-list"])).toBe(false)
+  })
+
+  it("shows no drop overlay at rest", () => {
+    const html = renderToStaticMarkup(<PromptInput onSubmit={submit} onFilesDrop={submit} dropHint="PDF or images" />)
+    expect(html).not.toContain("Drop files to attach")
+    expect(html).not.toContain("PDF or images")
+  })
+})