diff --git a/docs/ui-documentation.md b/docs/ui-documentation.md new file mode 100644 index 0000000..d16683d --- /dev/null +++ b/docs/ui-documentation.md @@ -0,0 +1,340 @@ +# Ink UI Documentation + +## Table of Contents +1. [Introduction](#introduction) +2. [Getting Started](#getting-started) +3. [Components](#components) +4. [Layout and Structure](#layout-and-structure) +5. [Styling Guidelines](#styling-guidelines) +6. [Interactive Elements](#interactive-elements) +7. [Accessibility](#accessibility) +8. [Best Practices](#best-practices) +9. [Website UI Components](#website-ui-components) + +## Introduction + +Ink is a powerful library for building command-line interfaces (CLIs) +with a focus on creating beautiful and interactive terminal applications. +This documentation provides comprehensive guidance on using Ink's UI +components and features effectively. + +## Getting Started + +### Installation +```bash +npm install ink +``` + +### Basic Setup +```jsx +import React from 'react'; +import {render, Text} from 'ink'; + +const App = () => Hello World; + +render(); +``` + +## Components + +### Text Component +The fundamental building block for displaying text in Ink applications. + +```jsx +import {Text} from 'ink'; + +// Basic usage +Regular text + +// Styled text +Colored text +Bold text +``` + +### Box Component +Used for layout and positioning of elements. + +```jsx +import {Box} from 'ink'; + + + Content inside a box + +``` + +### Input Component +Handles user input in interactive applications. + +```jsx +import {useInput} from 'ink'; + +useInput((input, key) => { + // Handle input here +}); +``` + +## Layout and Structure + +### Flexbox Layout +Ink uses a flexbox-based layout system: + +```jsx + + Row 1 + Row 2 + +``` + +### Spacing and Alignment +- Margin and padding support +- Flexible alignment options +- Responsive layouts + +## Styling Guidelines + +### Colors +```jsx +// Text colors +Error message +Success message +Custom color + +// Background colors +Highlighted text +``` + +### Text Formatting +```jsx +Bold text +Italic text +Underlined text +Inverse colors +``` + +## Interactive Elements + +### Spinner +```jsx +import {Spinner} from 'ink'; + + +``` + +### Progress Bar +```jsx +import {Progress} from 'ink'; + + +``` + +### Select Input +```jsx +import {Select} from 'ink-select-input'; + +const items = [ + {label: 'Option 1', value: '1'}, + {label: 'Option 2', value: '2'} +]; + +