npm package: @proveanything/smartlinks-utils-ui
Description: Reusable React components for SmartLinks microapps — Asset Picker, Conditions Editor, Icon Picker, and more.
Latest version: 0.1.11

# @proveanything/smartlinks-ui

Reusable React components for [SmartLinks](https://smartlinks.app) microapps.

## Installation

```bash
npm install @proveanything/smartlinks-ui
```

### Peer Dependencies

This package requires the following peer dependencies in your app:

```bash
npm install react react-dom @proveanything/smartlinks
```

## Setup

Import the pre-compiled styles in your app's entry point:

```tsx
import '@proveanything/smartlinks-ui/styles.css';
// — OR, if you import the main barrel, CSS is included automatically:
import { AssetPicker } from '@proveanything/smartlinks-ui';
```

This provides all the Tailwind utility classes used by the components. Your app still needs to define the CSS variables (e.g., `--primary`, `--border`) — these come from your own design system (shadcn, custom theme, etc.).

**Note:** If you use sub-path imports (e.g., `@proveanything/smartlinks-ui/asset-picker`), you must also import the styles separately since sub-path entry points don't include the CSS.

## Components

### Asset Picker

Browse, upload, and select media assets scoped to a collection, product, or proof.

```tsx
import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';

<AssetPicker
  scope={{ type: 'collection', collectionId: 'abc123' }}
  mode="dialog"
  allowUpload
  onSelect={(asset) => console.log('Selected:', asset)}
  trigger={<button>Choose Image</button>}
/>
```

### Conditions Editor

Visual editor for building condition rules with AND/OR logic groups.

```tsx
import { ConditionsEditor } from '@proveanything/smartlinks-ui/conditions-editor';

<ConditionsEditor
  value={conditionGroup}
  onChange={setConditionGroup}
  fields={[
    { key: 'status', label: 'Status', type: 'enum', options: [{ label: 'Active', value: 'active' }] },
    { key: 'age', label: 'Age', type: 'number' },
  ]}
/>
```

### Icon Picker

Searchable Font Awesome icon picker with lazy-loaded icon index for tree shaking.

```tsx
import { IconPicker } from '@proveanything/smartlinks-ui/icon-picker';

<IconPicker
  mode="dialog"
  value="fa-solid fa-heart"
  onSelect={(icon) => console.log(icon.name)}
  trigger={<button>Pick Icon</button>}
/>
```

### Font Picker

Searchable font picker with Google Fonts catalog and support for custom uploaded fonts. Returns full loading metadata (CSS URLs, `@font-face` blocks, `cssFontFamily` strings) so the consumer knows exactly how to load the selected font.

```tsx
import { FontPicker } from '@proveanything/smartlinks-ui/font-picker';

<FontPicker
  mode="dialog"
  value="Inter"
  showPreview
  onSelect={(font) => {
    console.log(font.family);        // "Inter"
    console.log(font.cssFontFamily); // "'Inter', ui-sans-serif, system-ui, sans-serif"
    console.log(font.loadSnippet);   // <link href="..." rel="stylesheet">
  }}
  trigger={<button>Pick Font</button>}
/>

{/* With custom uploaded fonts from SmartLinks */}
<FontPicker
  mode="dialog"
  showCustomFonts
  scope={{ collectionId: 'abc123' }}
  admin
  onSelect={(font) => console.log(font)}
/>
```

## Prerequisites

All components assume `@proveanything/smartlinks` is already initialized in your app via `SL.initializeApi()`. Components that interact with the SmartLinks API (Asset Picker) will use the global SDK import directly.

## Tree Shaking

Each component is a separate entry point. If you only import `AssetPicker`, the Icon Picker's Font Awesome index won't be bundled.

```tsx
// ✅ Only loads AssetPicker code
import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';

// ✅ Also works — barrel import, bundler tree-shakes unused
import { AssetPicker } from '@proveanything/smartlinks-ui';
```

## Development

```bash
cd packages/smartlinks-ui
npm install
npm run build    # Build with tsup
npm run dev      # Watch mode
```

## License

MIT