import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundInputCode,
  DoWithClearLabel,
  DoWithHtmlType,
  DoWithJsonType,
  DoWithCaption,
  DoDisabled,
  DontNoLabel,
  DoWithLabel,
  DontNoErrorFeedback,
  DoWithErrorFeedback,
} from '../components/form/BmsInputCode.stories.js';

<Meta title="Documentation/Fields/Input Code" />

# <img src="./BmsIcon.png" /> Input Code

Input Code is a component for editing code with syntax highlighting and validation. It provides a code editor interface powered by CodeMirror, supporting HTML and JSON formats. The component includes automatic syntax validation for JSON and syntax highlighting for both HTML and JSON. It is ideal for configuration forms, template editing, or any scenario where users need to input and edit code.

## Anatomy

Input code components consist of several key elements: a label that describes what code is expected, a code editor with syntax highlighting, automatic validation for JSON (with error indicators), optional captions for additional information, and error messages for validation feedback.

## Component

Use the controls below to interact with the component and see how it behaves with different configurations.

<Canvas of={PlaygroundInputCode} />

### Props

<Controls of={PlaygroundInputCode} />

## Usage Examples

### ✅ Do: Input code with clear label

Always provide a clear, descriptive label that explains what type of code is expected (HTML, JSON, etc.).

<Canvas of={DoWithClearLabel} />

### ✅ Do: Input code with HTML type

Use the HTML type when users need to edit HTML templates or markup. The editor provides HTML syntax highlighting.

<Canvas of={DoWithHtmlType} />

### ✅ Do: Input code with JSON type and validation

Use the JSON type when users need to edit JSON configuration. The editor provides JSON syntax highlighting and automatic validation with error indicators.

<Canvas of={DoWithJsonType} />

### ✅ Do: Input code with caption

Use captions to provide additional context, such as format requirements, examples, or validation rules.

<Canvas of={DoWithCaption} />

### ✅ Do: Disabled state

Use the disabled state when the code should not be editable, but the current code should still be visible.

<Canvas of={DoDisabled} />

### ✅ Do: Input code with error feedback

Always provide clear error messages when validation fails. For JSON, syntax errors are automatically detected and displayed.

<Canvas of={DoWithErrorFeedback} />

## Rules

### ⛔ Don't: Missing labels

Always provide a label for accessibility and clarity. Labels help screen readers and provide context about what code is expected.

**❌ Don't:**

<Canvas of={DontNoLabel} />

**✅ Do:**

<Canvas of={DoWithLabel} />

### ⛔ Don't: No error feedback

Always provide clear error messages when validation fails. For JSON, the editor automatically detects syntax errors, but you should also provide custom error messages when needed.

**❌ Don't:**

<Canvas of={DontNoErrorFeedback} />

**✅ Do:**

<Canvas of={DoWithErrorFeedback} />
