Registry / web-framework / fonteva-design-guide

fonteva-design-guide

library1.1.97-17jsnpmunverified

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.

web-framework

npm install fonteva-design-guide

package ↗

INSTALL

IMPORT

SIG · FONTEVA-DESIGN-GUI

fonteva-design-guide

web-frameworkjavascriptv1.1.97-17

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

c-fdv-*

✓ HTML template tag in LWC components

✗ import { cFdvButton } from 'fonteva-design-guide'

Components are used via HTML namespace, not JavaScript imports. Prefix 'c-fdv-' for all components.

design-tokens

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

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

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

utils

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

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

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

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

<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'

Debug

Known issues

breakingMajor version 0.x: API is unstable and may change without notice.

fix

Pin to a specific version and test upgrades thoroughly.

affects: >=0.0.0

gotchaComponents 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.

affects: >=0.0.0

gotchaDesign tokens are ES modules; CJS require() will fail.

fix

Use import syntax or dynamic import in a module context.

affects: >=0.0.0

gotchaNo TypeScript definitions provided; types may be manually authored.

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

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

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).

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

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.

Upgrade

Version history

1.1.97-17latest on npm

Audit

Dependencies

@salesforce/lwcrequiredRequired for LWC component rendering in Salesforce environments.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/fonteva-design-guide ↗