@ringcentral-integration/jsonschema-page

RingCentral Embeddable - JSONSchemaPage

A powerful React component library that renders dynamic forms based on JSON Schema definitions. Built on top of react-jsonschema-form and beautifully styled with RingCentral Juno components.

🚀 Quick Navigation

Find exactly what you need:

📖 New to JSONSchemaPage?

➡️ Complete Documentation & Tutorial

• Installation guide, basic usage, and comprehensive examples
• Learn JSON Schema fundamentals and UI Schema customization

🔤 Need Form Inputs?

➡️ Form Input Widgets

• Text fields, numbers, dropdowns, checkboxes, file uploads
• All the input controls users type/select in

📄 Need Content Display?

➡️ Display Components

• Typography, alerts, links, static content
• Components that show information to users

🎯 Need User Actions?

➡️ Interactive Components

• Buttons, selection lists, search fields
• Components users click and interact with

📋 Need Complete Examples?

➡️ Complete Form Examples

• Real-world forms, validation patterns, complex workflows
• Full implementation examples

📊 Quick Reference

I want to...	Go to	Example
Learn the basics	Documentation	Installation, basic usage
Add a text input	Text Input Widget	{ type: 'string', title: 'Name' }
Add a dropdown	Select Widget	{ enum: ['option1', 'option2'] }
Add a button	Button Fields	{ 'ui:field': 'button' }
Show an alert	Alert Fields	{ 'ui:field': 'alert' }
Build a contact form	Contact Form	Complete working example
Handle file uploads	File Upload	{ type: 'string', format: 'data-url' }

⚡ Quick Start

import { JSONSchemaPage } from '@ringcentral-integration/jsonschema-page';
import { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({});

  const schema = {
    title: 'Contact Form',
    type: 'object',
    properties: {
      name: { type: 'string', title: 'Full Name' },
      email: { type: 'string', format: 'email', title: 'Email' }
    },
    required: ['name', 'email']
  };

  return (
    <JSONSchemaPage
      schema={schema}
      formData={formData}
      onFormDataChange={setFormData}
      onSubmit={(data) => console.log('Submitted:', data.formData)}
    />
  );
}

💡 How to Use These Stories

• 📋 Copy JSON Configuration - Each story shows the exact schema, uiSchema, and formData
• 👁️ Side-by-Side View - See your JSON config alongside the rendered component
• 🎮 Interactive Examples - Click, type, and interact to see real behavior
• 📊 Live Updates - Watch form data change in real-time as you interact

🛠️ Installation

npm install @ringcentral-integration/jsonschema-page

Peer Dependencies:

npm install @ringcentral/juno @ringcentral/juno-icon react styled-components

✨ Key Features

• 🎨 Beautiful UI - Styled with RingCentral Juno design system
• 📱 Responsive - Works on desktop and mobile
• 🔧 Highly Customizable - Extensive UI Schema options
• ✅ Built-in Validation - JSON Schema validation + custom rules
• 🎯 Interactive Elements - Buttons, search, custom fields
• 📊 Dynamic Forms - Conditional fields and arrays
• ♿ Accessible - WCAG compliant components
• ⚡ Performance Optimized - Handles large forms efficiently

🎯 Common Use Cases

• Configuration Forms - App settings and preferences
• Data Entry - Complex data collection
• Survey Forms - Dynamic questionnaires
• Admin Panels - Management interfaces
• User Profiles - Registration and profiles
• Multi-step Wizards - Complex workflows

🔗 Useful Links

• Complete Documentation - Learn everything
• GitHub Repository - Source code
• JSON Schema Spec - Official specification
• React JSON Schema Form - Base library

Ready to build amazing forms? Start with the Documentation or explore the examples above! 🚀