{"id":25601,"library":"fonteva-design-guide","title":"Fonteva Design Guide","description":"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.","status":"active","version":"1.1.97-17","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","Salesforce","force.com","lwc","Lightning","sfdx"],"install":[{"cmd":"npm install fonteva-design-guide","lang":"bash","label":"npm"},{"cmd":"yarn add fonteva-design-guide","lang":"bash","label":"yarn"},{"cmd":"pnpm add fonteva-design-guide","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for LWC component rendering in Salesforce environments.","package":"@salesforce/lwc","optional":false}],"imports":[{"note":"Components are used via HTML namespace, not JavaScript imports. Prefix 'c-fdv-' for all components.","wrong":"import { cFdvButton } from 'fonteva-design-guide'","symbol":"c-fdv-*","correct":"HTML template tag in LWC components"},{"note":"Design tokens are exported as ES modules from a subpath. Requires ESM-compatible bundler.","wrong":"import { colorBrand } from 'fonteva-design-guide'","symbol":"design-tokens","correct":"import { colorBrand } from 'fonteva-design-guide/design-tokens'"},{"note":"Utility functions are exported via subpath. Check available exports in source.","wrong":"import { formatDate } from 'fonteva-design-guide'","symbol":"utils","correct":"import { formatDate } from 'fonteva-design-guide/utils'"}],"quickstart":{"code":"<!-- myComponent.html -->\n<template>\n    <c-fdv-button label=\"Hello World\" variant=\"brand\"></c-fdv-button>\n</template>\n\n// myComponent.js\nimport { LightningElement } from 'lwc';\nexport default class MyComponent extends LightningElement {}\n\n// To use design tokens:\nimport { colorBrand } from 'fonteva-design-guide/design-tokens';\nconsole.log(colorBrand); // '#0070d2'","lang":"javascript","description":"Shows how to use a Fonteva LWC button component and import a design token from the library in a Salesforce LWC setup."},"warnings":[{"fix":"Pin to a specific version and test upgrades thoroughly.","message":"Major version 0.x: API is unstable and may change without notice.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Use custom labels or iframe for strict isolation if conflicts arise.","message":"Components prefixed with c-fdv- can conflict with other LWC namespaces if not isolated.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import syntax or dynamic import in a module context.","message":"Design tokens are ES modules; CJS require() will fail.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Create .d.ts files for used symbols or use JSDoc for type hints.","message":"No TypeScript definitions provided; types may be manually authored.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install fonteva-design-guide` and check import paths (subpath imports require explicit module resolution).","cause":"The package is not installed or the import path is incorrect.","error":"Error: Cannot find module 'fonteva-design-guide'"},{"fix":"Use the component as <c-fdv-button></c-fdv-button> in your HTML template, not via JS import.","cause":"Attempting to import a component as a JavaScript module; LWC components are only usable in HTML templates.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'component')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}