Smarters INO UI TV CLI

A CLI tool for installing individual components from the smarters-ino-ui-tv library directly into your project, similar to how shadcn/ui works.

Features

• 🎯 Selective Installation - Install only the components you need
• 📁 Direct Integration - Components are copied to your shared/components folder, not node_modules
• 🔧 Customizable - Full control over component code for customization
• 📱 TV Optimized - All components are optimized for Smart TV applications
• ⌨️ Keyboard Navigation - Built-in TV remote control support
• 🎨 SCSS Styling - Includes component styles with CSS custom properties

Installation

# Install globally
npm install -g smarters-ino-ui-tv-cli

# Or use with npx (recommended)
npx ino-ui --help

Quick Start

1. Initialize your project:

npx ino-ui init

2. Add components:

# Add a single component
npx ino-ui add ino-button

# Add multiple components
npx ino-ui add ino-button grid-view list-view

# Add all components
npx ino-ui add --all

3. Use in your project:

import { InoButton } from '@/shared/components/ui/ino-button';

function App() {
  return (
    <InoButton 
      isActive={true}
      onClick={(e, index) => console.log('Button clicked!')}
    >
      Click me
    </InoButton>
  );
}

Commands

init

Initialize your project for ino-ui components.

npx ino-ui init [options]

Options:
  -y, --yes         Skip prompts and use default configuration
  -c, --cwd <cwd>   The working directory (default: current directory)

add

Add components to your project.

npx ino-ui add [components...] [options]

Arguments:
  components        The components to add

Options:
  -y, --yes         Skip confirmation prompt
  -o, --overwrite   Overwrite existing files
  -c, --cwd <cwd>   The working directory
  -a, --all         Add all available components

list

List all available components.

npx ino-ui list

Available Components

UI Components

• ino-button - A customizable button component optimized for TV navigation
• grid-view - A grid layout component with TV navigation support
• list-view - A list component with keyboard navigation for TV interfaces
• ino-keyboard - Virtual keyboard component for TV input
• scroll-view - Scrollable container with TV navigation
• ino-list-item - List item component with focus states
• ino-text - Typography component optimized for TV displays
• timeline - Timeline component for media applications

Hooks

• use-mapped-keydown - Hook for handling TV remote navigation
• use-keydown - Low-level keyboard event handling hook
• use-debounce - Debounce hook for preventing rapid navigation

Configuration

The CLI creates a components.json file in your project root:

{
  "$schema": "https://ino-ui.dev/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "aliases": {
    "components": "@/shared/components",
    "utils": "@/lib/utils",
    "ui": "@/shared/components/ui"
  }
}

Configuration Options

• style: Component style variant (default | new-york)
• rsc: Whether to use React Server Components (boolean)
• tsx: Whether to use TypeScript (boolean)
• aliases: Import path aliases for your project

Project Structure

After initialization, your project will have this structure:

your-project/
├── shared/
│   └── components/
│       ├── ui/                    # UI components
│       │   ├── ino-button.tsx
│       │   ├── ino-button.types.ts
│       │   └── ...
│       └── hooks/                 # Custom hooks
│           ├── use-mapped-keydown.ts
│           └── ...
├── lib/
│   └── utils/                     # Utility functions
└── components.json                # CLI configuration

TypeScript Configuration

Make sure your tsconfig.json includes the path aliases:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/shared/components/*": ["./src/shared/components/*"],
      "@/lib/utils/*": ["./src/lib/utils/*"]
    }
  }
}

Styling

Components include SCSS files with CSS custom properties. Import the styles in your main CSS file:

// Import component styles
@import '@/shared/components/ui/ino-button.scss';
@import '@/shared/components/ui/grid-view.scss';

// Or import all styles
@import 'smarters-ino-ui-tv/dist/main.css';

TV Navigation

All components support TV remote control navigation:

<InoButton
  isActive={isButtonActive}
  index={0}
  onLeft={() => navigateLeft()}
  onRight={() => navigateRight()}
  onUp={() => navigateUp()}
  onDown={() => navigateDown()}
  onOk={() => handleSelect()}
  onBack={() => handleBack()}
>
  TV Button
</InoButton>

Examples

Adding a Button Component

npx ino-ui add ino-button

This creates:

• shared/components/ui/ino-button.tsx
• shared/components/ui/ino-button.types.ts
• hooks/use-mapped-keydown.ts (dependency)

Adding Multiple Components

npx ino-ui add grid-view list-view ino-keyboard

Interactive Selection

npx ino-ui add
# Shows a checkbox list of available components

Customization

Since components are copied to your project, you have full control:

1. Modify component logic - Edit the .tsx files directly
2. Update styling - Modify the SCSS files or CSS custom properties
3. Add new props - Extend the .types.ts interfaces
4. Create variants - Add new component variants

Migration from Full Package

If you're currently using the full smarters-ino-ui-tv package:

1. Remove the package dependency:

npm uninstall smarters-ino-ui-tv

2. Initialize the CLI:

npx ino-ui init

3. Add the components you were using:

npx ino-ui add ino-button grid-view list-view

4. Update your imports:

// Before
import { InoButton } from 'smarters-ino-ui-tv';

// After  
import { InoButton } from '@/shared/components/ui/ino-button';

Contributing

To contribute to the CLI tool:

1. Clone the repository
2. Install dependencies: npm install
3. Build: npm run build
4. Test locally: npm link

License

MIT License - see the LICENSE file for details.