@serenis/illustrations

Illustration component library for the Serenis design system. SVG components for branding and empty states.

Install

npm install @serenis/illustrations

Quick start

# Build
yarn workspace @serenis/illustrations build

# Dev (watch mode)
yarn workspace @serenis/illustrations dev

# Typecheck
yarn workspace @serenis/illustrations typecheck

import { EmptyCalendar, PathPrimary, SerenisLogoIcon } from '@serenis/illustrations'
import { type SvgProps } from '@serenis/illustrations'

// Default size (each illustration defines its own default height)
<EmptyCalendar />

// Override dimensions
<PathPrimary height={120} />

Directory structure

libraries/illustrations/
├── src/
│   ├── components/
│   │   └── Svg/                  # Shared <svg> wrapper + test
│   │       ├── index.tsx
│   │       └── index.test.tsx
│   ├── download/
│   ├── elements/                 # Small reusable SVG pieces
│   ├── flow-loading/             # Multi-step loading illustrations
│   ├── generics/                 # Empty states, nutrition, conventions, etc.
│   ├── journaling-activities/
│   ├── journaling-moods/
│   ├── journaling-scores/
│   ├── logo/
│   ├── paths/
│   ├── videocall/
│   ├── stories/                  # Storybook stories
│   │   ├── Overview.mdx          # Documentation page
│   │   └── *.stories.tsx         # Per-category gallery stories
│   └── index.ts                  # Public API (re-exports everything)
├── dist/                         # Built output (gitignored)
├── tsup.config.ts                # Bundle config
└── package.json

Domain category descriptions and gallery links are in the Storybook Overview page (src/stories/Overview.mdx), served from apps/design-system.

Contributing

Authoring workflow, component patterns, color rules, and gotchas live in AGENTS.md.

Build

The package is bundled with tsup into ESM + CJS + TypeScript declarations. Workspace dependencies (@serenis/design-tokens, react) are externalized.

Consumers

• Apps: apps/web (primary consumer), apps/blog, apps/nutrition-blog, apps/website
• Libraries: libraries/ui (@serenis/ui)

Documentation

• Storybook: Overview page and per-domain gallery stories in apps/design-system
• AGENTS.md: Agent-oriented API reference and rules — see AGENTS.md

License

CC BY-NC-ND 4.0 — see LICENSE for the full text.