@remit/ui 0.0.53 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "type": "module",
   "files": [
     "src"

package/src/components/label-chip.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { labelColorOptions } from "../lib/label-color.js";
+import { LabelChip } from "./label-chip.js";
+
+const meta: Meta<typeof LabelChip> = {
+	title: "Primitives/LabelChip",
+	component: LabelChip,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof LabelChip>;
+
+/** A chip in each color the picker offers — the dot is the only thing that varies. */
+export const AllColors: Story = {
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			{labelColorOptions.map((color) => (
+				<LabelChip
+					key={color}
+					label={{ labelId: `lbl-${color}`, name: color, color }}
+				/>
+			))}
+		</div>
+	),
+};
+
+/** Same colors against the dark theme, so the dot keeps contrast either way. */
+export const AllColorsDark: Story = {
+	name: "All Colors (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			{labelColorOptions.map((color) => (
+				<LabelChip
+					key={color}
+					label={{ labelId: `lbl-${color}`, name: color, color }}
+				/>
+			))}
+		</div>
+	),
+};
+
+/** A long name truncates rather than growing the chip. */
+export const LongName: Story = {
+	args: {
+		label: {
+			labelId: "lbl-long",
+			name: "Quarterly compliance filings that need a second look",
+			color: "Purple",
+		},
+		className: "max-w-40",
+	},
+};
+
+/** The removable variant — the manual "just these" unlabel action. */
+export const Removable: Story = {
+	args: {
+		label: { labelId: "lbl-receipts", name: "Receipts", color: "Blue" },
+		onRemove: () => undefined,
+	},
+};
+
+/** Removable, on the dark theme. */
+export const RemovableDark: Story = {
+	name: "Removable (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		label: { labelId: "lbl-receipts", name: "Receipts", color: "Blue" },
+		onRemove: () => undefined,
+	},
+};

package/src/components/message-row.stories.tsx

@@ -73,6 +73,81 @@ const withCategory: ThreadRowData = {
 	category: "newsletter",
 };
 
+const noLabel: ThreadRowData = {
+	id: "r-no-label",
+	accountId: "a1",
+	fromName: "Jordan Lee",
+	fromEmail: "jordan@example.com",
+	subject: "Lunch on Friday?",
+	snippet: "Thinking the usual place, around noon.",
+	timeLabel: "10:03",
+	isRead: true,
+};
+
+const oneLabel: ThreadRowData = {
+	id: "r-one-label",
+	accountId: "a1",
+	fromName: "Stripe",
+	fromEmail: "receipts@stripe.com",
+	subject: "Your receipt from Acme Co",
+	snippet: "Payment of $42.00 was successful.",
+	timeLabel: "9:10",
+	isRead: true,
+	labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }],
+};
+
+const twoLabels: ThreadRowData = {
+	id: "r-two-labels",
+	accountId: "a1",
+	fromName: "United Airlines",
+	fromEmail: "noreply@united.com",
+	subject: "Your itinerary for SFO → JFK",
+	snippet: "Check-in opens 24 hours before departure.",
+	timeLabel: "Yesterday",
+	isRead: false,
+	labels: [
+		{ labelId: "l1", name: "Receipts", color: "Blue" },
+		{ labelId: "l2", name: "Travel", color: "Green" },
+	],
+};
+
+const severalLabels: ThreadRowData = {
+	id: "r-several-labels",
+	accountId: "a1",
+	fromName: "Finance Team",
+	fromEmail: "finance@example.com",
+	subject: "Q3 budget review — action needed",
+	snippet: "Please review the attached numbers before Thursday.",
+	timeLabel: "Mon",
+	isRead: false,
+	labels: [
+		{ labelId: "l1", name: "Receipts", color: "Blue" },
+		{ labelId: "l2", name: "Travel", color: "Green" },
+		{ labelId: "l3", name: "Urgent", color: "Red" },
+		{ labelId: "l4", name: "Work", color: "Purple" },
+	],
+};
+
+const longLabelName: ThreadRowData = {
+	id: "r-long-label",
+	accountId: "a1",
+	fromName: "Compliance",
+	fromEmail: "compliance@example.com",
+	subject: "Filing due end of quarter",
+	snippet: "One outstanding item on the checklist.",
+	timeLabel: "Tue",
+	isRead: true,
+	labels: [
+		{
+			labelId: "l5",
+			name: "Quarterly compliance filings that need a second look",
+			color: "Purple",
+		},
+	],
+};
+
+const labeled = [noLabel, oneLabel, twoLabels, severalLabels, longLabelName];
+
 const all = [read, unread, starred, suspicious, withAttachment, withCategory];
 
 const meta: Meta = {
@@ -149,3 +224,60 @@ export const Selectable: Story = {
 		</List>
 	),
 };
+
+/**
+ * Labels (issue #26) alongside the existing read/unread, attachment and
+ * category affordances — no label, one, two, several, and a long name that
+ * truncates rather than growing the row. Comfortable density renders the
+ * chips; compact does not (see `CompactLabels` below).
+ */
+export const ComfortableLabels: Story = {
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<ComfortableRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/** The same labeled threads on the dark theme. */
+export const ComfortableLabelsDark: Story = {
+	name: "Comfortable Labels (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<ComfortableRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/**
+ * The same labeled threads in compact density. `CompactRowBody` carries no
+ * label rendering today — this documents that as the approved current
+ * behavior, not an oversight in the story.
+ */
+export const CompactLabels: Story = {
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<CompactRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+/** Compact density, dark theme. */
+export const CompactLabelsDark: Story = {
+	name: "Compact Labels (dark)",
+	parameters: { theme: "dark" },
+	render: () => (
+		<List>
+			{labeled.map((thread) => (
+				<CompactRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};