@estiva-app/ui 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/Reaction.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ReactionStories from './Reaction.stories'
+
+<Meta of={ReactionStories} />
+
+# Reaction
+
+An emoji, how many people chose it, and whether you are one of them. A
+24px pill that toggles — Chip's shape at a control's height.
+
+<Canvas of={ReactionStories.Row} />
+
+## When
+
+- Under a message, in a row of them. `pressed` is **you are one of the
+  reactors**: the accent's muted tint and an accent edge, so a glance
+  separates "two people, one of them me" from "two people".
+- Any emoji at all. Another app may publish one outside your set, and a
+  reaction you cannot name is still one you must draw.
+
+<Canvas of={ReactionStories.Pressed} />
+
+## When not
+
+- Standing information nobody can toggle — a status, a category → **Chip**
+  (a Chip is not a control).
+- Adding a reaction that is not there yet: that is a picker, and a strip of
+  icon actions is a toolbar of **IconButton**s.
+- An action with a verb for a label → **Button**.
+
+## How
+
+```tsx
+import { Reaction } from '@estiva-app/ui'
+
+<Reaction emoji="👍" count={2} pressed aria-label="Makes sense, 2" onClick={toggle} />
+```
+
+- **`aria-label` is required.** The emoji is `aria-hidden` — a glyph read
+  aloud is noise, and its spoken name differs per screen reader — so the
+  count is the only visible text and the control would otherwise be
+  announced as "2". Pass the meaning and the count.
+- It is a real `<button>` with `aria-pressed`, so "mine" reaches assistive
+  tech as a toggle rather than as a colour. Every native prop passes
+  through; `type` defaults to `"button"`.
+
+## Props
+
+<Controls of={ReactionStories.Default} />

package/src/Reaction.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'
+import { Reaction } from './Reaction'
+
+const meta = {
+  title: 'Components/Reaction',
+  component: Reaction,
+  args: { emoji: '👍', count: 2, 'aria-label': 'Makes sense, 2', onClick: fn() },
+} satisfies Meta<typeof Reaction>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Somebody else's reaction: the inset fill and a hairline, like a neutral Chip. */
+export const Default: Story = {}
+
+/**
+ * Yours.
+ *
+ * The state a reaction has and a chip does not — the accent's muted tint and an
+ * accent edge, so a glance separates "two people, one of them me" from "two
+ * people". `aria-pressed` carries the same fact to assistive tech.
+ */
+export const Pressed: Story = { args: { pressed: true } }
+
+/** A row of them, as a message carries them. */
+export const Row: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-1">
+      <Reaction {...args} emoji="👍" count={3} aria-label="Makes sense, 3" pressed />
+      <Reaction {...args} emoji="🎉" count={1} aria-label="Congrats, 1" />
+      <Reaction {...args} emoji="🚀" count={12} aria-label="Let's go!, 12" />
+    </div>
+  ),
+}
+
+/** A count with two digits, so the pill grows rather than clipping. */
+export const WideCount: Story = { args: { count: 128, 'aria-label': 'Makes sense, 128' } }
+
+/** Momentarily unavailable — signing in, or a write already in flight. */
+export const Disabled: Story = { args: { disabled: true } }
+
+/**
+ * An emoji from outside any curated set.
+ *
+ * Another client may publish anything, and a reaction a consumer cannot name is
+ * still one it must draw rather than hide — so nothing here validates the glyph.
+ */
+export const UnknownEmoji: Story = { args: { emoji: '🦆', count: 1, 'aria-label': '🦆, 1' } }

package/src/Reaction.tsx

@@ -0,0 +1,86 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from './cn'
+
+/**
+ * A reaction: an emoji, how many people chose it, and whether you are one of
+ * them.
+ *
+ * **This exists because both apps had already built it, and neither could use
+ * the components that were here.** A reaction is a pill with a count that
+ * toggles — `Chip` is a pill and rules itself out for anything clickable,
+ * `Button` is clickable and is a 6px-radius rectangle, and `IconButton` has
+ * nowhere to put the count. So Peek re-typed Chip's class list with a border
+ * added, and Ship reached for a small Button with the count as its label. The
+ * two apps' reactions do not look alike today, and neither is what was drawn.
+ *
+ * ## The one thing it does that nothing else here does
+ *
+ * **It says the reaction is yours.** That is the state a reaction has and a
+ * chip does not: `pressed` fills it with the accent's muted tint and gives it
+ * an accent edge, so a glance separates "two people, one of them me" from "two
+ * people". Ship approximated it as `outlined` versus `muted` — measured at a
+ * 1px hairline against no border at all — which is legible and is not the
+ * signal Peek's accent fill gives.
+ *
+ * It is a real `<button>` with `aria-pressed`, so the state reaches assistive
+ * tech as a toggle rather than as a colour.
+ *
+ * ## `aria-label` is required, and the reason is specific
+ *
+ * The emoji is decorative here — it is `aria-hidden`, because a glyph read
+ * aloud is noise and its spoken name differs per screen reader — and the only
+ * visible text is the count. Without a label the control is announced as
+ * **"2"**, which is what Ship shipped and its own tests caught. Pass the
+ * meaning and the count: `"Makes sense, 2"`.
+ *
+ * ## Geometry
+ *
+ * Chip's pill, at a control's height: fully rounded, 24px to match `Button`
+ * `small`, the same 8px horizontal padding, the `chip` type token for the
+ * count so it sits at 11px/500 like every other count in the system.
+ */
+export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** The emoji, drawn decoratively — name the control with `aria-label`. */
+  emoji: ReactNode
+  /** How many people reacted. Drawn as-is; `0` is not a reaction and is not drawn. */
+  count: number
+  /** You are one of them: the accent tint and edge, and `aria-pressed`. */
+  pressed?: boolean
+  /**
+   * Names the control. **Required** — the emoji is decorative and the count is
+   * the only visible text, so without this it is announced as a bare number.
+   */
+  'aria-label': string
+}
+
+export function Reaction({ emoji, count, pressed = false, className, type, ...props }: ReactionProps) {
+  return (
+    <button
+      type={type ?? 'button'}
+      aria-pressed={pressed}
+      className={cn(
+        // Chip's pill at a control's height, so a reaction and a status chip
+        // read as the same family — 24px matches Button `small`.
+        'inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2',
+        'border transition-colors',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        pressed
+          ? 'border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover'
+          : 'border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover',
+        className,
+      )}
+      {...props}
+    >
+      {/* Decorative: the control is named by `aria-label`, and a glyph read
+          aloud is noise. 16px so the emoji is legible at chip scale. */}
+      <span aria-hidden="true" className="shrink-0 text-[16px] leading-none">
+        {emoji}
+      </span>
+      {/* `text-chip` is a plain class, never merged — the same guard Chip uses,
+          because tailwind-merge drops a token size that follows a text colour. */}
+      <span className="text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums">
+        {count}
+      </span>
+    </button>
+  )
+}

package/src/index.ts

@@ -42,6 +42,7 @@ export { Sidebar, type SidebarProps } from './Sidebar'
 export { TopBar, type TopBarProps } from './TopBar'
 export { PersonTrigger, type PersonTriggerProps } from './PersonTrigger'
 export { Property, type PropertyProps } from './Property'
+export { Reaction, type ReactionProps } from './Reaction'
 export { SearchInput, type SearchInputProps } from './SearchInput'
 export { SectionHeader, type SectionAction, type SectionHeaderProps } from './SectionHeader'
 export { SectionLabel } from './SectionLabel'