import { Meta, Story, Canvas, Controls, Markdown } from '@storybook/blocks';
import * as Stories from './story';
import Code from './code?raw';
import CodeWithColorPicker from './code-with-color?raw';
import CodeWithSVG from './code-with-svg?raw';
import CodeNodeRemove from './code-add-remove-node?raw';

<Meta of={Stories} />

# Example: Updating a Node

This guide shows how to update nodes (or elements) using the `useUpdateElement` hook. Each example demonstrates a different way to modify nodes, making it easy to understand and apply.

### Demo: Basic Node Update
This example demonstrates a simple way to update a node using the `useUpdateElement` hook.
<Canvas of={Stories.Default} />

### Code: Basic Node Update

<Markdown>
{`\`\`\`tsx
${Code}
\`\`\``}
</Markdown>

### Demo: Update with Color Picker
This example shows how to update a node using the `useUpdateElement` hook, combined with a color picker for dynamic color changes.
<Canvas of={Stories.WithColorPicker} />

### Code: Update with Color Picker

<Markdown>
{`\`\`\`tsx
${CodeWithColorPicker}
\`\`\``}
</Markdown>

### Demo: Update with SVG
This example demonstrates how to update a node using the `useUpdateElement` hook while rendering it as an SVG element.
<Canvas of={Stories.WithSVG} />

### Code: Update with SVG

<Markdown>
{`\`\`\`tsx
${CodeWithSVG}
\`\`\``}
</Markdown>

### Demo: Add and Remove Nodes
This example shows how to dynamically add and remove nodes using the `useUpdateElement` hook. It provides a flexible way to manage nodes in your application.
<Canvas of={Stories.WithNodeRemove} />

### Code: Add and Remove Nodes

<Markdown>
{`\`\`\`tsx
${CodeNodeRemove}
\`\`\``}
</Markdown>