Healthspan - Marketing UI

This is the marketing UI library for Healthspan Marketing Website v3.

Installation

npm install @zenpatient-org/healthspan-marketing-ui

Development

Start the storybook:

npm run storybook

When you create a new public component, you need to add it to the components section of the vite.config.ts file. Also, you need to add the component to the exports section of the package.json file.

⚠️ Be sure to use 'use client' in the component file if it is a client component.

Avoid using barrel exports. Instead, import the components directly from the src directory.

We use eslint and prettier, please ensure you have these lines in your IDE settings:

  "eslint.useFlatConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

Importing the components and modules

import { Button } from '@zenpatient-org/healthspan-marketing-ui/Button';
import { CallbackModule } from '@zenpatient-org/healthspan-marketing-ui/CallbackModule';

To build for publishing:

npm run build

Publishing:

npm login
npm version patch
npm publish

Figma Code Connect

We use Figma Code Connect to link components in this library to their counterparts in the Healthspan Foundation Design System so designers see real code snippets in Figma Dev Mode.

Mappings live next to each component as *.figma.tsx files (e.g. src/components/Label/Label.figma.tsx) and are configured via figma.config.json.

Authentication

Publishing requires a Figma personal access token (Org/Enterprise plan only) with the Code Connect → Write and File content → Read scopes. Create one under Figma → Settings → Security → Personal access tokens, then add it to a local .env (already gitignored):

FIGMA_ACCESS_TOKEN=your_token_here

Commands

# Validate all Code Connect files locally (no token required)
npm run figma:parse

# Publish mappings to Figma
npm run figma:publish

# Remove published mappings
npm run figma:unpublish

Adding a mapping for a new component

1. Create ComponentName.figma.tsx alongside the component.
2. Use figma.connect() with the component's Figma node URL (must include node-id), mapping Figma properties to code props via figma.enum, figma.boolean, figma.string, figma.textContent, etc.
3. Run npm run figma:parse to validate, then npm run figma:publish.

Code Connect files are excluded from the published package build (see the dts exclude in vite.config.ts), so they do not need an entry in vite.config.ts or package.json exports.

Global Design Tokens

Design tokens (colors, spacing, etc.) are injected via CSS variables globally. You can import the core styles in two ways:

Option 1: Import core styles directly

import '@zenpatient-org/healthspan-marketing-ui/styles/core';

The core styles include:

• CSS reset
• Color variables (midnight, navy, copper, orchre, indigo, sage, solar, ivory, etc.)
• Typography variables (font sizes, line heights, letter spacing, font weights)
• Border radius and width variables
• Spacing variables
• Common utility styles