) => {
console.log('Form submitted:', data)
// Send to your API
}
const handleError = (error: unknown) => {
console.error('Form error:', error)
}
return (
Contact Us
)
}
```
--------------------------------
### Start Storybook for Manifesto.io UI Components
Source: https://github.com/eggplantiny/manifesto-io/blob/main/CONTRIBUTING.md
Commands to launch Storybook for showcasing React and Vue components developed within the Manifesto.io project.
```bash
# React Storybook
pnpm storybook:react
# Vue Storybook
pnpm storybook:vue
# Both
pnpm storybook:all
```
--------------------------------
### ViewField Builder API Example in TypeScript
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-reference/view-schema.md
Demonstrates the fluent API of the `ViewField` builder for creating and configuring input fields. This example shows how to set the label, placeholder, help text, props, styles, disable conditions, and grid span for a text input field.
```typescript
viewField.textInput('email', 'email')
.label('Email Address')
.placeholder('user@example.com')
.helpText('We will never share your email')
.props({ type: 'email', autoComplete: 'email' })
.styles({ className: 'email-input' })
.disabled(['==', '$state.status', 'verified'])
.span(2)
.build()
```
--------------------------------
### FormRenderer Example with Initial Values
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/api-reference/react.md
Shows how to pre-populate a form rendered by FormRenderer using the `initialValues` prop. This is useful for editing existing data.
```tsx
```
--------------------------------
### Define Contact Entity Schema (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
Defines the structure and validation rules for contact information using Manifesto.io's schema definition language. It includes fields for name, email, phone, company, subject, and message with specific constraints.
```typescript
import { entity, field } from '@manifesto-io/schema'
export const contactEntity = entity('contact', 'Contact', '1.0.0')
.description('Contact information form')
.field(field.string('name').label('Full Name').required().min(2).max(100))
.field(field.string('email').label('Email Address').required()
.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'))
.field(field.string('phone').label('Phone Number'))
.field(field.string('company').label('Company Name'))
.field(field.enum('subject', [
{ value: 'general', label: 'General Inquiry' },
{ value: 'support', label: 'Technical Support' },
{ value: 'sales', label: 'Sales Question' },
{ value: 'feedback', label: 'Feedback' },
]).label('Subject').required())
.field(field.string('message').label('Message').required().min(10).max(1000))
.build()
```
--------------------------------
### Update Entity Schema for Conditional Field
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
This TypeScript snippet demonstrates how to add a new 'company' field to the entity schema for the contact form. This field is intended to be conditionally displayed based on user input, enabling more dynamic form behavior.
```typescript
// Add to contactEntity
.field(
field.string('company')
.label('Company Name')
)
```
--------------------------------
### Define Contact Form View Schema (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
Defines the user interface for the contact form using Manifesto.io's view definition language. It structures the form into sections and specifies input field types, labels, placeholders, and conditional visibility.
```typescript
import { view, section, viewField, layout } from '@manifesto-io/schema'
export const contactView = view('contact-form', 'Contact Form', '1.0.0')
.entityRef('contact')
.mode('create')
.layout(layout.form())
.section(
section('personal')
.title('Your Information')
.field(viewField.textInput('name', 'name').placeholder('Enter your full name'))
.field(viewField.textInput('email', 'email').placeholder('your.email@example.com'))
.field(viewField.textInput('phone', 'phone').placeholder('(Optional) Your phone number'))
.field(viewField.textInput('company', 'company')
.placeholder('Your company name')
.hidden(['!=', '$state.subject', 'sales']))
)
.section(
section('inquiry')
.title('Your Message')
.field(viewField.select('subject', 'subject').placeholder('Select a subject'))
.field(viewField.textarea('message', 'message')
.placeholder('How can we help you?')
.props({ rows: 5 }))
)
.build()
```
--------------------------------
### Define Contact View Schema (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
Defines the user interface and behavior for the 'Contact' form using Manifesto's view schema definition. It structures the form into sections ('Your Information', 'Your Message') and specifies input types and placeholders.
```typescript
import { view, section, viewField, layout } from '@manifesto-io/schema'
export const contactView = view('contact-form', 'Contact Form', '1.0.0')
.entityRef('contact')
.mode('create')
.layout(layout.form())
.section(
section('personal')
.title('Your Information')
.field(
viewField.textInput('name', 'name')
.placeholder('Enter your full name')
)
.field(
viewField.textInput('email', 'email')
.placeholder('your.email@example.com')
)
.field(
viewField.textInput('phone', 'phone')
.placeholder('(Optional) Your phone number')
)
)
.section(
section('inquiry')
.title('Your Message')
.field(
viewField.select('subject', 'subject')
.placeholder('Select a subject')
)
.field(
viewField.textarea('message', 'message')
.placeholder('How can we help you?')
.props({ rows: 5 })
)
)
.build()
```
--------------------------------
### Define Contact Entity Schema (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
Defines the data structure and validation rules for a 'Contact' entity using Manifesto's schema definition language. It includes fields for name, email, phone, subject, and message with specific validation constraints.
```typescript
import { entity, field } from '@manifesto-io/schema'
export const contactEntity = entity('contact', 'Contact', '1.0.0')
.description('Contact information form')
// String field with validation
.field(
field.string('name')
.label('Full Name')
.required()
.min(2)
.max(100)
)
// Email field with pattern validation
.field(
field.string('email')
.label('Email Address')
.required()
.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$')
)
// Optional phone field
.field(
field.string('phone')
.label('Phone Number')
)
// Enum field
.field(
field.enum('subject', [
{ value: 'general', label: 'General Inquiry' },
{ value: 'support', label: 'Technical Support' },
{ value: 'sales', label: 'Sales Question' },
{ value: 'feedback', label: 'Feedback' },
])
.label('Subject')
.required()
)
// Multiline text field
.field(
field.string('message')
.label('Message')
.required()
.min(10)
.max(1000)
)
.build()
```
--------------------------------
### GraphQL Adapter API
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-reference/action-schema.md
Shows how to interact with GraphQL APIs using the GraphQL adapter. Includes setting up mutations and response transformations.
```APIDOC
## POST /graphql (GraphQL Adapter)
### Description
This endpoint is used to send GraphQL mutations or queries. It utilizes the GraphQL adapter to format requests and process responses.
### Method
POST
### Endpoint
/graphql
### Parameters
#### Request Body
- **query** (string) - The GraphQL query or mutation string.
- **variables** (object) - Variables to be used with the query/mutation.
### Request Example
```json
{
"query": "\n mutation CreateProduct($input: ProductInput!) {\n createProduct(input: $input) {\n id\n name\n }\n }\n ",
"variables": {
"input": { ... state data ... }
}
}
```
### Response
#### Success Response (200)
- **data** (object) - The data returned from the GraphQL API.
#### Response Example
```json
{
"data": {
"createProduct": {
"id": "123",
"name": "New Product"
}
}
}
```
### Adapter Configuration
- **Type**: `graphql`
- **Response Transform**: Extracts data using the expression '$data.createProduct'.
```
--------------------------------
### Custom Error Display Component (React)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/guides/validation.md
A reusable React component that displays validation errors for a given field. It uses the `useFormRuntime` hook to get field metadata and conditionally renders error messages below the field's input if any errors exist.
```tsx
function Field({ fieldId, children }) {
const { getFieldMeta } = useFormRuntime(schema, options)
const meta = getFieldMeta(fieldId)
return (
{children}
{meta?.errors.map((error, i) => (
{error}
))}
)
}
```
--------------------------------
### Adapter Helper Methods
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-reference/action-schema.md
Lists the adapter helper methods used to configure different types of API adapters: legacy, GraphQL, and SOAP.
```markdown
**Adapter Helpers**
| Method | Description |
|--------|-------------|
| `adapter.legacy(req, res)` | Legacy REST adapter |
| `adapter.graphql(req, res)` | GraphQL adapter |
| `adapter.soap(req, res)` | SOAP/XML adapter |
```
--------------------------------
### Null Check Banner Visibility in TypeScript
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-authoring-guide.md
This example demonstrates how to display a warning banner when a specific field, 'endDate', is null. It uses the `visible` method with the `IS_NULL` condition to control the section's visibility. This is useful for alerting users about missing or unconfigured data.
```typescript
section('no-end-date-warning')
.title('No end date')
.visible(['IS_NULL', $.state('endDate')])
.fields()
.build()
```
--------------------------------
### Complete Product Form Example (React + TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/api-reference/react.md
A comprehensive example of a product form using React and TypeScript with Manifesto.io's FormRenderer. It includes state management for submission and errors, API interaction via fetch, and proper type handling.
```tsx
import { useState } from 'react';
import { FormRenderer, FormRuntimeError } from '@manifesto-io/react';
import '@manifesto-io/react/styles';
// Assuming schemas and interfaces are defined elsewhere
// import { productView, productEntity } from './schemas/product';
// interface Product { id?: string; name: string; price: number; category: string; }
// interface ProductFormProps { product?: Product; onSuccess: (product: Product) => void; }
// Placeholder definitions for compilation
const productView = {};
const productEntity = {};
interface Product { id?: string; name: string; price: number; category: string; }
interface ProductFormProps { product?: Product; onSuccess: (product: Product) => void; }
export function ProductForm({ product, onSuccess }: ProductFormProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState(null);
const handleSubmit = async (data: Record) => {
setIsSubmitting(true);
setError(null);
try {
const response = await fetch(
product ? `/api/products/${product.id}` : '/api/products',
{
method: product ? 'PUT' : 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
}
);
if (!response.ok) {
throw new Error('Failed to save product');
}
const savedProduct = await response.json();
onSuccess(savedProduct);
} catch (err) {
setError(err instanceof Error ? err.message : 'Unknown error');
} finally {
setIsSubmitting(false);
}
};
const handleError = (err: FormRuntimeError) => {
if (err.type === 'VALIDATION_ERROR') {
// Validation errors are shown inline
return;
}
setError(err.message);
};
return (
{product ? 'Edit Product' : 'New Product'}
{error && (
{error}
)}
{
const res = await fetch(endpoint, {
method: options.method,
body: options.body ? JSON.stringify(options.body) : undefined,
});
return res.json();
}}
onSubmit={handleSubmit}
onError={handleError}
debug={process.env.NODE_ENV === 'development'}
/>
{isSubmitting && (
)}
);
}
```
--------------------------------
### Manifesto Entity Schema Definition
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/migration/adoption-guide.md
Defines an entity schema for a 'Product' using Manifesto's schema builder. This example showcases how to define fields like 'name', 'price', and 'category' with their respective types, validation rules (required, min length, min value), and enum options.
```typescript
import { field, enumValue } from '@manifesto-io/schema'
export const productEntity = {
_type: 'entity' as const,
id: 'product',
name: 'Product',
version: '1.0.0',
fields: [
field.string('name', 'Name').required().min(3).build(),
field.number('price', 'Price').min(0).build(),
field.enum('category', 'Category', [
enumValue('electronics', 'Electronics'),
enumValue('clothing', 'Clothing'),
]).build(),
],
}
```
--------------------------------
### API POST Request Example (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-reference/action-schema.md
Demonstrates how to configure an API POST request step. This example sets the step ID, endpoint, uses the current state ('$state') as the request body, and defines 'result' as the output key for the API response. Utilizes the 'api' function from '@manifesto-io/schema'.
```typescript
import { api } from '@manifesto-io/schema'
// POST request
api.post('create-product', '/api/products')
.body('$state')
.outputAs('result')
.build()
```
--------------------------------
### Enable Debug Panel in React FormRenderer
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
This React code snippet shows how to enable the debug panel for the FormRenderer component by setting the `debug` prop to `true`. The debug panel provides real-time insights into the form's state, including values, field statuses, and expression evaluations.
```tsx
```
--------------------------------
### Cross-Field Validation (TypeScript)
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/guides/validation.md
Demonstrates how to implement validation rules that depend on the values of other fields within the same form. Examples include password confirmation, date range validation, and conditional required fields based on other selections. It uses custom expressions referencing other fields via `$state.`.
```typescript
// Entity Schema
field.string('password', 'Password')
.required()
.min(8)
.build(),
field.string('confirmPassword', 'Confirm Password')
.required()
.constraint({
type: 'custom',
expression: ['==', '$value', '$state.password'],
message: 'Passwords do not match',
})
.build()
```
```typescript
field.date('startDate', 'Start Date')
.required()
.build(),
field.date('endDate', 'End Date')
.required()
.constraint({
type: 'custom',
expression: ['>=', '$value', '$state.startDate'],
message: 'End date must be after start date',
})
.build()
```
```typescript
// Tax ID required for business customers
field.string('taxId', 'Tax ID')
.constraint({
type: 'custom',
expression: ['OR',
['!=', '$state.customerType', 'business'],
['AND',
['==', '$state.customerType', 'business'],
['!=', '$value', ''],
['!=', '$value', null]
]
],
message: 'Tax ID is required for business customers',
})
.build()
```
--------------------------------
### Trigger Actions Based on Field Changes in TypeScript
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-authoring-guide.md
This example shows how to define reactions to field changes. When the 'triggerType' field changes, specific actions are performed, such as setting other field values or updating properties. It uses `on.change`, `when`, and `do` to define the trigger-action logic. Dependencies include `fieldEquals` and `actions`.
```typescript
viewField.select('triggerType', 'triggerType')
.label('Trigger type')
.reaction(
on.change()
.when(fieldEquals('triggerType', 'EMERGENCY'))
.do(
actions.setValue('smsCheckbox', true),
actions.setValue('priority', 'CRITICAL'),
actions.updateProp('smsCheckbox', 'disabled', true)
)
)
.reaction(
on.change()
.when(['!=', $.state('triggerType'), 'EMERGENCY'])
.do(actions.updateProp('smsCheckbox', 'disabled', false))
)
.build()
```
--------------------------------
### Update View Schema for Conditional Field Display
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
This TypeScript snippet shows how to update the view schema to make the 'company' field conditionally visible. It uses the `hidden` attribute with a condition to only display the 'Company Name' input field when the 'subject' field is set to 'sales', providing context-aware form elements.
```typescript
// Add to the 'personal' section
.field(
viewField.textInput('company', 'company')
.placeholder('Your company name')
.hidden(['!=', '$state.subject', 'sales']) // Only show for sales
)
```
--------------------------------
### Create Vue Contact Form with FormRenderer
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
This snippet shows how to create a contact form in Vue using the FormRenderer component. It imports necessary components and schemas, defines submission and error handlers, and renders the form within a template. The component automatically handles form rendering based on provided view and entity schemas.
```vue
Contact Us
```
--------------------------------
### Handle Form Submission in Vue with API Call
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/getting-started.md
This Vue component illustrates handling form submissions with the FormRenderer. It utilizes Vue's `ref` for managing submission and success states and implements an asynchronous `fetch` call to '/api/contact'. The template conditionally renders a success message or the form itself, providing a seamless user experience during submission.
```vue
Thank you! We'll be in touch soon.
```
--------------------------------
### GraphQL Adapter Configuration with Response Transform
Source: https://github.com/eggplantiny/manifesto-io/blob/main/docs/schema-reference/action-schema.md
Sets up a GraphQL adapter for API calls. It includes a mutation for creating a product and a response transform to extract specific data.
```typescript
api.post('query', '/graphql')
.body({
query: `
mutation CreateProduct($input: ProductInput!) {
createProduct(input: $input) {
id
name
}
}
`,
variables: { input: '$state' }
})
.adapter(adapter.graphql(
undefined,
{
steps: [
transform.map('extract', { expression: '$data.createProduct' })
]
}
))
.build()
```