@sproutsocial/seeds-react-narrative-kit

A kit of narrative primitives — small, composable building blocks that are assembled (often non-deterministically, by agents) into "executive brief" style pages: a surface, a headline stat, a callout, a trend, and so on.

This package is a multi-component kit, not a single component. Each primitive lives in its own folder under src/ and is re-exported from the package barrel (src/index.ts).

Usage

Like all Seeds React components, narrative primitives are consumed through @sproutsocial/racine — never imported from this package directly in a consuming app:

import { NarrativeContainer } from "@sproutsocial/racine";

<NarrativeContainer>{/* narrative content */}</NarrativeContainer>;

Exported primitives

| Primitive | Description | | -------------------- | ------------------------------------------------------------------------------------ | | NarrativeContainer | Foundational surface/card with a content slot and a top-left gradient accent border. Accepts standard className / style. |

Adding a new primitive

Primitives are intentionally cheap to add — a new one is a folder plus one barrel line:

1. Create src/<PrimitiveName>/ with:
   • <PrimitiveName>.tsx — forwardRef component (set displayName).
   • <PrimitiveName>Types.ts — the public Type<PrimitiveName>Props interface (JSDoc each prop).
   • <PrimitiveName>.stories.tsx — title: "Narrative Kit/<PrimitiveName>".
   • __tests__/<PrimitiveName>.test.tsx.
   • index.ts — re-export the component and its types.
2. Add one line to src/index.ts:

   export { PrimitiveName, type TypePrimitiveNameProps } from "./PrimitiveName";

3. Add a row to the table above.

Shared types/helpers used across primitives live in src/_internal/.

Development

yarn build       # bundle (tsup) cjs + esm + .d.ts
yarn typecheck   # tsc --noEmit
yarn test        # jest
yarn lint