Create FSFormulaField component in shared UI library

[Copilot]

This PR implements the new FSFormulaField component as specified in the requirements. The component provides a text-based input field with variable support, combining the simplicity of FSTextField with the variable functionality of FSRichTextField.

Key Features

• Text-based interface: Looks and behaves like FSTextField for consistency
• Variable support: Full integration using the existing Lexical editor and VariableNode system
• Plain string output: Returns values as plain strings with variables in {code} format
• Configurable variables: Variables are configured through the variableReferences prop
• Visual distinction: Variables appear as styled chips and are treated as single characters
• Standard field props: Supports all common field properties (label, description, disabled, clearable, etc.)

Implementation Details

The component is built on the same Lexical editor foundation as FSRichTextField but simplified to only support:

• Plain text input
• Variable insertion via dropdown menu
• Seamless conversion between Lexical state and plain string format

The implementation reuses existing components and models to avoid code duplication:

• VariableNode for variable representation
• RichTextVariable interface for variable configuration
• FSBaseField wrapper for consistent styling
• Existing utility functions and composables

Usage Example

<FSFormulaField
  label="Formula"
  description="Enter a formula with variables"
  :variableReferences="[
    { code: 'name', defaultValue: 'John', label: 'Name' },
    { code: 'age', defaultValue: '25', label: 'Age' }
  ]"
  v-model="formula"
/>

This produces output like: "Hello {name}, you are {age} years old!"

Screenshots

Default States

Shows the component in various states: empty, with initial value, required, and disabled

Variable Functionality

Interactive demo showing variable insertion and plain string output with live variable value inputs

Testing

Added comprehensive Storybook stories demonstrating:

• Default component variations
• Interactive variable insertion
• Real-time formula output preview
• All component props and configurations

Fixes #648.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/foundation-shared-ui/foundation-shared-ui/dev/storybook/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@peyronth 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.