FrostUI CLI

A powerful CLI tool for installing and managing FrostUI React Native components, inspired by shadcn/ui.

Features

• 🔐 GitLab Authentication - Secure access to private repositories
• 📦 Component Installation - Install components with dependencies
• 🔍 Component Search - Find components by name or description
• 🎨 Theme System - Built-in theming with runtime switching
• 📱 Platform Support - React Native and Expo compatibility
• 🛠️ Auto-detection - Automatically detects project type
• 📋 Registry Management - Centralized component registry
• 🎯 Asset Handling - Automatic font and asset management

Installation

npm install -g frostui-cli

Quick Start

1. Login to GitLab

   frostui login

2. Initialize your project

   frostui init

3. Install components

   frostui add button input card

Commands

Authentication

# Login with GitLab token
frostui login

# Logout
frostui logout

Component Management

# Install components
frostui add <component-name> [options]

# Options:
#   -f, --force         Force installation
#   -d, --dry-run       Show what would be installed
#   -s, --skip-deps     Skip installing dependencies
#   -p, --platform      Target platform (react-native|expo)

# Examples:
frostui add button
frostui add button input --force
frostui add card --platform expo

Discovery

# List all components
frostui list
frostui list --verbose

# Search components
frostui search modal
frostui search form

Project Setup

# Initialize FrostUI in project
frostui init

# Show registry information
frostui info

Usage

Setting up Authentication

1. Go to GitLab Personal Access Tokens
2. Create a new token with read_repository scope
3. Run frostui login and paste your token

Installing Components

# Install a single component
frostui add button

# Install multiple components
frostui add button input card spinner

# Force reinstall
frostui add button --force

# Preview what will be installed
frostui add button --dry-run

Theme System

All FrostUI components require the theme system:

// App.tsx
import React from 'react';
import { ThemeProvider } from './lib/theme';

export default function App() {
  return (
    <ThemeProvider defaultMode="light">
      {/* Your app content */}
    </ThemeProvider>
  );
}

Using Components

import { Button } from './components/ui/button';
import { Input } from './components/ui/input';

function MyScreen() {
  return (
    <View>
      <Button variant="primary" size="lg">
        Click me
      </Button>
      <Input placeholder="Enter text" />
    </View>
  );
}

Component Categories

• UI Components - Basic UI elements (button, input, card, etc.)
• Layout Components - Layout and structure (container, stack, etc.)
• Form Components - Form inputs and validation
• Navigation Components - Navigation and routing
• Feedback Components - Alerts, toasts, modals
• Overlay Components - Dialogs, popovers, sheets

Project Structure

After initialization:

your-project/
├── lib/
│   └── theme.tsx           # Theme system
├── components/
│   └── ui/
│       ├── button/
│       ├── input/
│       └── ...
├── assets/
│   └── fonts/             # Font files
└── package.json

Configuration

The CLI stores configuration in ~/.frostui/config.json:

{
  "token": "your-gitlab-token",
  "registryUrl": "https://repos.mydevfactory.com/satadeep.dasgupta/frostui/-/raw/main/registry.json"
}

Registry Format

Components are defined in registry.json with:

{
  "name": "button",
  "description": "Customizable button component",
  "type": "components:ui",
  "version": "1.0.0",
  "react-native": {
    "dependencies": [],
    "peerDependencies": ["react", "react-native"],
    "registryDependencies": ["theme"],
    "files": [
      {
        "name": "index.tsx",
        "path": "src/packages/frostui/button/index.tsx"
      }
    ],
    "paths": {
      "repoPath": "src/packages/frostui/button",
      "localPath": "components/ui/button"
    }
  }
}

Development

# Install dependencies
npm install

# Build the CLI
npm run build

# Run in development
npm run dev

# Test the CLI
npm link
frostui --help

Troubleshooting

Authentication Issues

• Ensure your GitLab token has read_repository permissions
• Check if your token has expired
• Verify access to the FrostUI repository

Installation Issues

• Ensure you're in a React Native/Expo project
• Check network connectivity
• Verify project permissions

Component Issues

• Run frostui add theme first (required for all components)
• Ensure proper import paths
• Check component dependencies

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details