Playground.tsx

Visit playground

file: src/pages/forms/demo/playground.tsx

dev.lotuscares.ai/forms/demo/playground

This file contains a playground component for testing and debugging form structures. It provides an interactive interface for creating and modifying forms in both YAML and JSON formats.

Features

Interactive Textarea: The component includes a textarea where you can write and modify the form structure. This allows you to experiment with different form structures and see the results in real time.

Submit Button: After writing or modifying the form structure in the textarea, you can press the Submit button to validate the form. If the form structure is correct, you will see the resulting form displayed on the page.

Format Toggle: The component allows you to toggle the format of the form structure between YAML and JSON. This is useful for writing new forms in YAML, which is often more human-readable, and debugging existing forms in JSON, which is a more common format for form structures in code.

Default Form Structures: When you toggle the format, the textarea will load a default form structure in the selected format. This can serve as a starting point for creating new forms.

Usage

To use the playground, simply write or paste your form structure into the textarea in either YAML or JSON format. Then, press the Submit button to validate and display the form. If you want to switch formats, just toggle the format and a default form structure will be loaded into the textarea.

Remember to use YAML for writing new forms and JSON for debugging existing forms.

TODO

Editor with code higlights:

import React from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-yaml';
import 'prismjs/themes/prism.css'; // choose the theme you like

// ...

<Editor
  value={input}
  onValueChange={code => setInput(code)}
  highlight={code => highlight(code, format === 'yaml' ? languages.yaml : languages.json)}
  padding={10}
  style={{
    fontFamily: '"Fira code", "Fira Mono", monospace',
    fontSize: 12,
  }}
/>