Fonteva Design Guide

1.1.97-17 verified Fri May 01 auth: no javascript

The Fonteva Design Guide is a Salesforce Lightning Web Component (LWC) library providing reusable UI components and design tokens for building Fonteva applications. Based on npm metadata version 1.1.97-17, this is a pre-1.0 package with frequent releases. It is specific to Salesforce ecosystems using SFDX and LWC, with no formal changelog or migration guide. Key differentiators: built for the Salesforce platform, tight integration with Fonteva app cloud, and designed for LWC development.

Common errors

error Error: Cannot find module 'fonteva-design-guide' ↓

cause The package is not installed or the import path is incorrect.

fix

Run npm install fonteva-design-guide and check import paths (subpath imports require explicit module resolution).

error Uncaught TypeError: Cannot read properties of undefined (reading 'component') ↓

cause Attempting to import a component as a JavaScript module; LWC components are only usable in HTML templates.

fix

Use the component as <c-fdv-button></c-fdv-button> in your HTML template, not via JS import.

Warnings

breaking Major version 0.x: API is unstable and may change without notice. ↓

fix Pin to a specific version and test upgrades thoroughly.

gotcha Components prefixed with c-fdv- can conflict with other LWC namespaces if not isolated. ↓

fix Use custom labels or iframe for strict isolation if conflicts arise.

gotcha Design tokens are ES modules; CJS require() will fail. ↓

fix Use import syntax or dynamic import in a module context.

gotcha No TypeScript definitions provided; types may be manually authored. ↓

fix Create .d.ts files for used symbols or use JSDoc for type hints.

Install

npm install fonteva-design-guide

yarn add fonteva-design-guide

pnpm add fonteva-design-guide

Imports

c-fdv-*
wrong
```
import { cFdvButton } from 'fonteva-design-guide'
```
correct
```
HTML template tag in LWC components
```
Components are used via HTML namespace, not JavaScript imports. Prefix 'c-fdv-' for all components.

design-tokens

wrong

import { colorBrand } from 'fonteva-design-guide'

correct

import { colorBrand } from 'fonteva-design-guide/design-tokens'

Design tokens are exported as ES modules from a subpath. Requires ESM-compatible bundler.

utils

wrong

import { formatDate } from 'fonteva-design-guide'

correct

import { formatDate } from 'fonteva-design-guide/utils'

Utility functions are exported via subpath. Check available exports in source.

Quickstart

Shows how to use a Fonteva LWC button component and import a design token from the library in a Salesforce LWC setup.

<!-- myComponent.html -->
<template>
    <c-fdv-button label="Hello World" variant="brand"></c-fdv-button>
</template>

// myComponent.js
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {}

// To use design tokens:
import { colorBrand } from 'fonteva-design-guide/design-tokens';
console.log(colorBrand); // '#0070d2'