@sesionario/blocks

@sesionario/blocks

Shared UI components for Sesionario applications.

This package is the Sesionario-specific successor to @algenium/blocks. It ships only the components, hooks, and data the five Sesionario apps (admin, app, auth, backoffice, pharma) actually use, plus shadcn Empty primitives under the hood of EmptyState.

Shared feedback patterns include ConfirmDestructiveDialog (confirm before delete/mute and similar irreversible actions).

Install

pnpm add @sesionario/blocks

The main entry is a Client Component boundary. Pure helpers that must run in React Server Components (e.g. avatar initials/colors) should be imported from the server-safe subpath:

import { avatarFallbackStyle, getInitials } from "@sesionario/blocks/avatar";

Peer dependencies (install in the consuming app as needed):

• react, react-dom
• lucide-react
• next-themes (ThemeSwitcher)
• framer-motion (Theme/Language switchers, AvatarEditorDialog)
• react-phone-number-input (PhoneInput — also import its CSS in your app layout)
• hls.js (optional — VideoPlayer)

Chat UI (MessageScroller, ChatMessageList, …)

Apps that render chat scrollers should define this utility in global CSS (used by MessageScrollerViewport):

.scroll-fade-b {
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 calc(100% - 1.5rem),
		transparent 100%
	);
}

Development

pnpm install
pnpm build
pnpm typecheck
pnpm lint
pnpm test

Release

Pushes to main / dev / features/* run semantic-release and publish to npm via OIDC trusted publishing (see .github/workflows/release.yml). Configure the npm package for trusted publishing against the Docufacil/blocks GitHub repository before the first release.