mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
70 lines
1.5 KiB
Plaintext
70 lines
1.5 KiB
Plaintext
---
|
|
title: Compose Spec
|
|
description: Docker Compose visual editor and YAML tools
|
|
---
|
|
|
|
## Overview
|
|
|
|
The `@hanzo/compose-spec` package provides visual editing tools for Docker Compose files with real-time YAML synchronization.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @hanzo/compose-spec
|
|
# or
|
|
pnpm add @hanzo/compose-spec
|
|
```
|
|
|
|
## Components
|
|
|
|
### ComposeEditor
|
|
|
|
Visual drag-and-drop editor for Docker Compose files.
|
|
|
|
```tsx
|
|
import { ComposeEditor } from "@hanzo/ui/compose"
|
|
|
|
export default function Page() {
|
|
return <ComposeEditor />
|
|
}
|
|
```
|
|
|
|
### YamlEditor
|
|
|
|
Side-by-side visual and YAML editor with live sync.
|
|
|
|
```tsx
|
|
import { ComposeYamlEditor } from "@hanzo/ui/compose"
|
|
|
|
export default function Page() {
|
|
return <ComposeYamlEditor />
|
|
}
|
|
```
|
|
|
|
### Playground
|
|
|
|
Full interactive playground with service nodes, networks, and volumes.
|
|
|
|
```tsx
|
|
import { ComposePlayground } from "@hanzo/ui/compose"
|
|
|
|
export default function Page() {
|
|
return <ComposePlayground />
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- **Visual Editor**: Drag-and-drop interface for Docker services
|
|
- **YAML Sync**: Real-time bidirectional YAML synchronization
|
|
- **Service Nodes**: Visual representation of containers
|
|
- **Network Nodes**: Network topology visualization
|
|
- **Volume Management**: Persistent storage configuration
|
|
- **Auto-Layout**: Automatic graph layout with customization
|
|
- **Validation**: Real-time Docker Compose validation
|
|
- **TypeScript**: Full type safety for Compose files
|
|
|
|
## API Reference
|
|
|
|
See the full [compose-spec documentation](https://github.com/hanzoai/ui/tree/main/compose-spec) for detailed API reference.
|