Entity chip

Free · MIT

A thing in the user's system (a record, a table, a field, a workflow…) named in a message or the composer. The kind's icon and noun are always present, so "Account" the table and "Account" the report never read alike. The identifier is the label unless a friendlier one is given; then the identifier is on hover and for screen readers.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/entity-chip

Brings in: chat, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { EntityChip } from "@/components/entity-chip"

export default function Example() {
  return (
    <p className="max-w-lg text-sm leading-7">
      The <EntityChip entity={{ kind: "table", name: "orders", label: "Orders" }} onOpen={() => {}} /> table has a{" "}
      <EntityChip entity={{ kind: "field", name: "orders.status", label: "Status" }} onOpen={() => {}} /> field that the{" "}
      <EntityChip entity={{ kind: "workflow", name: "ship_order", label: "Ship order" }} onOpen={() => {}} /> workflow updates.
    </p>
  )
}

<EntityChip>

Prop	Type	Default	Description
entityrequired	`EntityRef`	—	The thing to show: its kind, identifier and optional label.
onOpen	`((entity: EntityRef) => void) \| undefined`	—	Makes the chip a button that opens the thing.
onRemove	`((entity: EntityRef) => void) \| undefined`	—	Adds a remove button, e.g. in the composer.
className	`string \| undefined`	—	Extra classes for the outer element.

<EntityKindsProvider>

The kinds of thing your app's entities can be: an icon and a noun each. Nested providers add to (and can override) the kinds above them.

Prop	Type	Default	Description
kindsrequired	`Record<string, EntityKindInfo>`	—	Kind ids mapped to an icon and a noun.
childrenrequired	`React.ReactNode`	—	What goes inside.

Functions

useEntityKinds()

Look up a kind's icon and noun; unknown kinds read as "Item".

Strings

The fixed words, in English by default. Change any of them under entityChip in <LocaleProvider strings={{ … }}>; the table is exported as entityChipStrings.

Key	English
record	Record
document	Document
file	File
table	Table
field	Field
person	Person
link	Link
code	Code
workflow	Workflow
report	Report
dashboard	Dashboard
item	Item
title	{noun}: {name}
titleIn	{noun}: {name} in {location}
remove	Remove {name}

Types

EntityKindInfo: { Icon: LucideIcon; noun: string }