# Healthspan - Marketing UI

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

## Installation

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

## Development

Start the storybook:

```bash
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](https://18.react.dev/reference/rsc/use-client).

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

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

### To build for publishing:

```bash
npm run build
```

### Publishing:

```bash
npm login
npm version patch
npm publish
```

## Figma Code Connect

We use [Figma Code Connect](https://github.com/figma/code-connect) to link components in this library to their counterparts in the [Healthspan Foundation Design System](https://www.figma.com/design/1KnlOKs7kv0bLv4k8PIIEB/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):

```bash
FIGMA_ACCESS_TOKEN=your_token_here
```

### Commands

```bash
# 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
```tsx
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