AutoUI Docs

Interactive documentation generator for React components with live preview and prop controls.

한국어

✨ Features

• 🎯 Interactive Props Control: Modify component props in real-time
• 📝 Live Preview: See changes instantly as you modify props
• 🎨 Built-in Components: Includes Button, Input, Card, and Badge components
• 💎 TypeScript Support: Full TypeScript support with type definitions
• 🎊 Code Highlighting: Syntax highlighting for code examples

🚀 Installation

npm install autoui-docs

📖 Usage

import { DocumentViewer } from 'autoui-docs';
import { YourComponent } from './YourComponent';

// Your component documentation
const componentDoc = {
  name: 'YourComponent',
  description: 'Description of your component',
  props: [
    {
      name: 'propName',
      type: 'string',
      required: true,
      defaultValue: '',
      description: 'Description of the prop'
    }
  ]
};

// Using the DocumentViewer
function App() {
  return (
    <DocumentViewer component={componentDoc} />
  );
}

🛠️ Built-in Components

Button

import { Button } from 'autoui-docs';

<Button
  variant="primary"
  size="medium"
  onClick={() => alert('Clicked!')}
>
  Click me
</Button>

Input

import { Input } from 'autoui-docs';

<Input
  type="text"
  size="medium"
  placeholder="Enter text..."
  onChange={(e) => console.log(e.target.value)}
/>

Card

import { Card } from 'autoui-docs';

<Card
  variant="elevated"
  size="medium"
  header="Card Title"
  footer="Card Footer"
>
  Card content goes here
</Card>

Badge

import { Badge } from 'autoui-docs';

<Badge
variant="success"
size="medium"
rounded
>
New
</Badge>

🤝 Contributing

Contributions are always welcome! Please read our contributing guide first.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.