@tangle-network/ui 11.16.11 → 11.17.0

package/src/primitives/tag-chip.stories.tsx

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileText, Image as ImageIcon, Mic, Video } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { Button } from "./button";
+import { Chip } from "./chip";
+import { EmptyState } from "./empty-state";
+import { IconTile } from "./icon-tile";
+import { Skeleton } from "./skeleton";
+import { StatusPill, type StatusTone } from "./status-pill";
+import { Tag } from "./tag";
+import type { CategoryTone } from "./tone";
+
+/**
+ * Example data for a content board: the shape GTM's publishing board has. All
+ * of it is local to the story; no backend is involved.
+ */
+type Kind = "article" | "image" | "video" | "audio";
+type Post = { id: string; title: string; kind: Kind; campaign: string; status: StatusTone; statusLabel: string };
+
+const KINDS: Record<Kind, { label: string; tone: CategoryTone; icon: ReactNode }> = {
+  article: { label: "Article", tone: "blue", icon: <FileText /> },
+  image: { label: "Image", tone: "pink", icon: <ImageIcon /> },
+  video: { label: "Video", tone: "orange", icon: <Video /> },
+  audio: { label: "Audio", tone: "teal", icon: <Mic /> },
+};
+
+const POSTS: Post[] = [
+  { id: "1", title: "Launch notes for the October release", kind: "article", campaign: "Launch", status: "success", statusLabel: "Published" },
+  { id: "2", title: "Sandbox cold start, before and after", kind: "video", campaign: "Performance", status: "warning", statusLabel: "Scheduled" },
+  { id: "3", title: "Founder interview: why agents need a runtime that can be inspected end to end by the people who pay for it", kind: "audio", campaign: "Brand", status: "running", statusLabel: "Sending" },
+  { id: "4", title: "Pricing page hero", kind: "image", campaign: "Launch", status: "danger", statusLabel: "Failed" },
+  { id: "5", title: "Draft: weekly changelog", kind: "article", campaign: "Changelog", status: "neutral", statusLabel: "Draft" },
+];
+
+/** Renders the same content on a dark and a light island, side by side. */
+function BothThemes({ children }: { children: ReactNode }) {
+  return (
+    <div className="grid gap-4 p-4 lg:grid-cols-2">
+      {(["dark", "light"] as const).map((theme) => (
+        <div
+          key={theme}
+          data-theme={theme}
+          className="min-w-0 rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-root)] p-4 text-[var(--text-primary)]"
+        >
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ContentBoard({ initialState = "populated" }: { initialState?: "populated" | "loading" }) {
+  const [kinds, setKinds] = useState<Set<Kind>>(new Set());
+  const [campaigns, setCampaigns] = useState<string[]>(["Launch"]);
+  const [loading, setLoading] = useState(initialState === "loading");
+  const visible = POSTS.filter(
+    (p) => (kinds.size === 0 || kinds.has(p.kind)) && (campaigns.length === 0 || campaigns.includes(p.campaign)),
+  );
+  const toggleKind = (kind: Kind, on: boolean) =>
+    setKinds((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(kind);
+      else next.delete(kind);
+      return next;
+    });
+
+  return (
+    <section className="flex min-w-0 flex-col gap-3" aria-label="Content board">
+      <div role="group" aria-label="Filter by kind" className="flex flex-wrap gap-1.5">
+        {(Object.keys(KINDS) as Kind[]).map((kind) => (
+          <Chip
+            key={kind}
+            tone={KINDS[kind].tone}
+            icon={KINDS[kind].icon}
+            selected={kinds.has(kind)}
+            onSelectedChange={(on) => toggleKind(kind, on)}
+          >
+            {KINDS[kind].label} · {POSTS.filter((p) => p.kind === kind).length}
+          </Chip>
+        ))}
+      </div>
+      <div className="flex min-h-6 flex-wrap items-center gap-1.5 text-xs text-[var(--text-muted)]">
+        <span>Campaigns:</span>
+        {campaigns.length === 0 ? <span>All</span> : null}
+        {campaigns.map((c) => (
+          <Tag key={c} onRemove={() => setCampaigns((prev) => prev.filter((x) => x !== c))}>
+            {c}
+          </Tag>
+        ))}
+        {campaigns.length === 0 ? (
+          <Chip emphasis="outline" onClick={() => setCampaigns(["Launch"])}>
+            Add “Launch”
+          </Chip>
+        ) : null}
+        <span className="flex-1" />
+        <Chip emphasis="outline" selected={loading} onSelectedChange={setLoading}>
+          Simulate loading
+        </Chip>
+      </div>
+      <ul className="flex flex-col divide-y divide-[var(--border-subtle)] rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-card)]">
+        {loading
+          ? [0, 1, 2].map((i) => (
+              <li key={i} className="flex items-center gap-3 p-3" aria-hidden="true">
+                <Skeleton className="size-8 rounded-md" />
+                <Skeleton className="h-4 flex-1" />
+                <Skeleton className="h-5 w-16 rounded-full" />
+              </li>
+            ))
+          : visible.map((post) => (
+              <li key={post.id} className="flex min-w-0 items-center gap-3 p-3">
+                <IconTile tone={KINDS[post.kind].tone} icon={KINDS[post.kind].icon} />
+                <div className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span className="truncate text-sm font-medium" title={post.title}>
+                    {post.title}
+                  </span>
+                  <span className="flex min-w-0 flex-wrap gap-1">
+                    <Tag tone={KINDS[post.kind].tone} emphasis="outline">
+                      {KINDS[post.kind].label}
+                    </Tag>
+                    <Tag>{post.campaign}</Tag>
+                  </span>
+                </div>
+                <StatusPill tone={post.status}>{post.statusLabel}</StatusPill>
+              </li>
+            ))}
+        {!loading && visible.length === 0 ? (
+          <li className="p-3">
+            <EmptyState
+              title="No posts match these filters"
+              description="Clear a kind or a campaign to see more."
+              action={
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    setKinds(new Set());
+                    setCampaigns([]);
+                  }}
+                >
+                  Clear filters
+                </Button>
+              }
+            />
+          </li>
+        ) : null}
+      </ul>
+    </section>
+  );
+}
+
+const meta: Meta = {
+  title: "Primitives/Tag and Chip",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+/** Filter chips (toggle buttons with a check), removable campaign tags, kind tags, status pills. */
+export const ContentBoardFilters: Story = {
+  render: () => (
+    <BothThemes>
+      <ContentBoard />
+    </BothThemes>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <BothThemes>
+      <ContentBoard initialState="loading" />
+    </BothThemes>
+  ),
+};
+
+/** Every categorical tone and neutral, at rest, selected and as an outline, beside the status set. */
+export const ToneSet: Story = {
+  render: () => {
+    const tones = ["neutral", "violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"] as const;
+    return (
+      <BothThemes>
+        <div className="flex flex-col gap-3">
+          {tones.map((tone) => (
+            <div key={tone} className="flex flex-wrap items-center gap-2">
+              <Tag tone={tone}>{tone}</Tag>
+              <Tag tone={tone} emphasis="outline">
+                outline
+              </Tag>
+              <Chip tone={tone} selected={false}>
+                Off
+              </Chip>
+              <Chip tone={tone} selected>
+                On
+              </Chip>
+              {tone !== "neutral" ? <IconTile tone={tone} name={`${tone} project`} size="sm" /> : null}
+            </div>
+          ))}
+          <div className="flex flex-wrap gap-2 pt-2">
+            {(["success", "warning", "danger", "info", "running", "neutral"] as const).map((tone) => (
+              <StatusPill key={tone} tone={tone}>
+                {tone}
+              </StatusPill>
+            ))}
+          </div>
+        </div>
+      </BothThemes>
+    );
+  },
+};
+
+/** Long and awkward labels truncate inside a narrow column instead of overflowing. */
+export const WorstCase: Story = {
+  render: () => (
+    <BothThemes>
+      <div className="flex w-full max-w-[220px] flex-col items-start gap-2">
+        <Tag onRemove={() => {}}>supercalifragilistic.address+newsletter@extremely-long-domain.example.com</Tag>
+        <Tag tone="teal">Research · Q4 enterprise procurement working group (EMEA)</Tag>
+        <Chip tone="violet" selected>
+          A filter whose label never ends because the account name is long
+        </Chip>
+        <Tag tone="pink">日本語のラベル</Tag>
+        <Tag tone="lime">🚀 Launch</Tag>
+        <Chip size="md">1</Chip>
+      </div>
+    </BothThemes>
+  ),
+};

package/src/primitives/tag.tsx

@@ -0,0 +1,94 @@
+import { X } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+import { TONE_CLASSES, type Tone } from "./tone";
+
+/**
+ * A static label for what something IS: a category, a kind, a named value.
+ *
+ * Tags are squared-off (`rounded-md`) where `StatusPill` is fully round, so a
+ * category and a state never share a silhouette even before colour is read.
+ * For a state, use `StatusPill`. For a label the user presses, use `Chip`.
+ *
+ * `onRemove` adds a native remove button after the label — the removable
+ * variant, for a recipient, an applied filter or an attached item. The tag
+ * itself stays non-interactive, so the remove button is the only tab stop.
+ * Removing a tag unmounts its focused button; move focus to the next tag or
+ * the input that adds tags, or keyboard focus falls to the page.
+ */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  children: React.ReactNode;
+  /** Categorical tone, or `neutral` (the default) for an uncategorised label. */
+  tone?: Tone;
+  /** `soft` fills the tag; `outline` keeps only the border, for dense rows. */
+  emphasis?: "soft" | "outline";
+  size?: "sm" | "md";
+  /** A leading glyph, drawn in the tone's icon colour. Decorative. */
+  icon?: React.ReactNode;
+  /** Shows a remove button; called when it is pressed. */
+  onRemove?: () => void;
+  /**
+   * Accessible name of the remove button. Defaults to "Remove <label>" when
+   * the label is a string; pass it when the label is not plain text.
+   */
+  removeLabel?: string;
+}
+
+const SIZE = {
+  sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
+  md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",
+} as const;
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  (
+    { className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props },
+    ref,
+  ) => {
+    const classes = TONE_CLASSES[tone];
+    const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium",
+          SIZE[size],
+          emphasis === "outline" ? classes.outline : classes.surface,
+          onRemove && (size === "sm" ? "pr-0.5" : "pr-1"),
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <span aria-hidden="true" className={cn("inline-flex shrink-0", classes.icon)}>
+            {icon}
+          </span>
+        ) : null}
+        {/* A long label truncates here rather than pushing the remove button
+            out; the title gives its full text on hover. */}
+        <span className="min-w-0 truncate" title={typeof children === "string" ? children : undefined}>
+          {children}
+        </span>
+        {onRemove ? (
+          <button
+            type="button"
+            aria-label={label}
+            onClick={onRemove}
+            className={cn(
+              // The visible target is the glyph's box; the pseudo-element widens
+              // the hit area without moving the tag's layout.
+              "relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']",
+              size === "sm" ? "size-5" : "size-6",
+              focusRing,
+            )}
+          >
+            <X aria-hidden="true" />
+          </button>
+        ) : null}
+      </span>
+    );
+  },
+);
+Tag.displayName = "Tag";
+
+export { Tag };

package/src/primitives/tone.ts

@@ -0,0 +1,130 @@
+/**
+ * Categorical tones: the colours that tell KINDS of things apart — an entity,
+ * a file type, a channel, a capability. A category never reports a state; that
+ * is `StatusPill`'s job, on its own success / warning / danger / info / neutral
+ * triples. See "Color Roles" in the brand guidelines.
+ *
+ * Each tone reads one matched family from `@tangle-network/brand`
+ * (`--tone-<name>-{bg,bg-hover,bg-selected,border,border-selected,text,icon}`),
+ * solved so the text and icon clear their floors on every fill in both themes.
+ *
+ * Every class below is written out in full: Tailwind and the sandbox-ui style
+ * bundle read this file statically, so an interpolated class name would never
+ * be generated.
+ */
+
+export const CATEGORY_TONES = [
+  "violet",
+  "orange",
+  "teal",
+  "blue",
+  "pink",
+  "brown",
+  "cyan",
+  "lime",
+] as const;
+
+export type CategoryTone = (typeof CATEGORY_TONES)[number];
+
+/** A categorical tone, or `neutral` for a label that is not a category. */
+export type Tone = CategoryTone | "neutral";
+
+export interface ToneClasses {
+  /** Resting fill, border and label colour. */
+  surface: string;
+  /** Border only; the label keeps the tone's text colour. */
+  outline: string;
+  /** Hover fill for an interactive surface. */
+  hover: string;
+  /** Fill and border of a selected chip. */
+  selected: string;
+  /** The glyph colour, for an icon beside a label or inside a tile. */
+  icon: string;
+}
+
+export const TONE_CLASSES: Record<Tone, ToneClasses> = {
+  violet: {
+    surface: "border-[var(--tone-violet-border)] bg-[var(--tone-violet-bg)] text-[var(--tone-violet-text)]",
+    outline: "border-[var(--tone-violet-border)] bg-transparent text-[var(--tone-violet-text)]",
+    hover: "hover:bg-[var(--tone-violet-bg-hover)]",
+    selected: "border-[var(--tone-violet-border-selected)] bg-[var(--tone-violet-bg-selected)]",
+    icon: "text-[var(--tone-violet-icon)]",
+  },
+  orange: {
+    surface: "border-[var(--tone-orange-border)] bg-[var(--tone-orange-bg)] text-[var(--tone-orange-text)]",
+    outline: "border-[var(--tone-orange-border)] bg-transparent text-[var(--tone-orange-text)]",
+    hover: "hover:bg-[var(--tone-orange-bg-hover)]",
+    selected: "border-[var(--tone-orange-border-selected)] bg-[var(--tone-orange-bg-selected)]",
+    icon: "text-[var(--tone-orange-icon)]",
+  },
+  teal: {
+    surface: "border-[var(--tone-teal-border)] bg-[var(--tone-teal-bg)] text-[var(--tone-teal-text)]",
+    outline: "border-[var(--tone-teal-border)] bg-transparent text-[var(--tone-teal-text)]",
+    hover: "hover:bg-[var(--tone-teal-bg-hover)]",
+    selected: "border-[var(--tone-teal-border-selected)] bg-[var(--tone-teal-bg-selected)]",
+    icon: "text-[var(--tone-teal-icon)]",
+  },
+  blue: {
+    surface: "border-[var(--tone-blue-border)] bg-[var(--tone-blue-bg)] text-[var(--tone-blue-text)]",
+    outline: "border-[var(--tone-blue-border)] bg-transparent text-[var(--tone-blue-text)]",
+    hover: "hover:bg-[var(--tone-blue-bg-hover)]",
+    selected: "border-[var(--tone-blue-border-selected)] bg-[var(--tone-blue-bg-selected)]",
+    icon: "text-[var(--tone-blue-icon)]",
+  },
+  pink: {
+    surface: "border-[var(--tone-pink-border)] bg-[var(--tone-pink-bg)] text-[var(--tone-pink-text)]",
+    outline: "border-[var(--tone-pink-border)] bg-transparent text-[var(--tone-pink-text)]",
+    hover: "hover:bg-[var(--tone-pink-bg-hover)]",
+    selected: "border-[var(--tone-pink-border-selected)] bg-[var(--tone-pink-bg-selected)]",
+    icon: "text-[var(--tone-pink-icon)]",
+  },
+  brown: {
+    surface: "border-[var(--tone-brown-border)] bg-[var(--tone-brown-bg)] text-[var(--tone-brown-text)]",
+    outline: "border-[var(--tone-brown-border)] bg-transparent text-[var(--tone-brown-text)]",
+    hover: "hover:bg-[var(--tone-brown-bg-hover)]",
+    selected: "border-[var(--tone-brown-border-selected)] bg-[var(--tone-brown-bg-selected)]",
+    icon: "text-[var(--tone-brown-icon)]",
+  },
+  cyan: {
+    surface: "border-[var(--tone-cyan-border)] bg-[var(--tone-cyan-bg)] text-[var(--tone-cyan-text)]",
+    outline: "border-[var(--tone-cyan-border)] bg-transparent text-[var(--tone-cyan-text)]",
+    hover: "hover:bg-[var(--tone-cyan-bg-hover)]",
+    selected: "border-[var(--tone-cyan-border-selected)] bg-[var(--tone-cyan-bg-selected)]",
+    icon: "text-[var(--tone-cyan-icon)]",
+  },
+  lime: {
+    surface: "border-[var(--tone-lime-border)] bg-[var(--tone-lime-bg)] text-[var(--tone-lime-text)]",
+    outline: "border-[var(--tone-lime-border)] bg-transparent text-[var(--tone-lime-text)]",
+    hover: "hover:bg-[var(--tone-lime-bg-hover)]",
+    selected: "border-[var(--tone-lime-border-selected)] bg-[var(--tone-lime-bg-selected)]",
+    icon: "text-[var(--tone-lime-icon)]",
+  },
+  // Neutral is the chrome greys, not a ramp: the nested-well fill, the subtle
+  // hairline, muted text. Hover and selected step toward the ink so they stay
+  // grey in every named theme; the selected border is the dim text tier, which
+  // clears 3:1 on the well in both themes.
+  neutral: {
+    surface: "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--text-secondary)]",
+    outline: "border-[var(--border-default)] bg-transparent text-[var(--text-secondary)]",
+    hover: "hover:bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_6%)]",
+    selected:
+      "border-[var(--text-dim)] bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_12%)] text-[var(--text-primary)]",
+    icon: "text-[var(--text-dim)]",
+  },
+};
+
+/**
+ * A stable categorical tone for a key — an account id, a channel, a project
+ * name — for things that need telling apart but have no category of their own.
+ * The same key always gets the same tone, in every product and session.
+ * Distinct keys can share a tone, so the label or glyph must still name it.
+ */
+export function toneFor(key: string): CategoryTone {
+  // FNV-1a: a few lines, no dependency, and well spread over short strings.
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < key.length; i++) {
+    hash ^= key.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return CATEGORY_TONES[(hash >>> 0) % CATEGORY_TONES.length];
+}