npm package: @joaofn/create-app
Description: A CLI tool for generating apps and components from templates
Author: JoaoFN
Latest version: 0.0.2

# My CLI Tool

A powerful CLI tool for generating applications and components from customizable templates.

## Architecture

This CLI tool uses a clean template-based architecture:

- **📁 Templates Directory**: All templates are stored in the `templates/` directory
- **🎨 Component Templates**: Each component template can have multiple files (TypeScript + CSS, or just TypeScript with inline styles)
- **📋 Template Configuration**: The `templates/config.json` defines available templates and their metadata
- **🔄 Template Processing**: Placeholders like `{{componentName}}` are replaced with actual values

## Installation

You can run this tool directly using npx:

```bash
npx my-cli-tool --help
```

Or install it globally:

```bash
npm install -g my-cli-tool
```

## Usage

### Generate App

Generate a new npm package from a template:

```bash
npx my-cli-tool generate app --template react
```

Available templates:
- `default` (default) - Basic Node.js project
- `react` - React application with Create React App structure  
- `vue` - Vue.js application
- `nextjs` - Next.js application

### Generate Component

Create a new component from predefined templates:

```bash
npx my-cli-tool generate component react-table --name MyTable
```

Available component templates:

- `react-table` - A customizable data table component (generates `.tsx` + `.css`)
- `react-card` - A card component with inline styles (generates `.tsx` only)
- `react-tile` - A clickable tile component with icon support (generates `.tsx` + `.css`)

#### Component Options

- `--name <filename>` - Specify the output filename (optional, defaults to component name)

## Examples

```bash
# Generate a React app
npx my-cli-tool generate app --template react

# Generate a Vue app  
npx my-cli-tool generate app --template vue

# Generate a table component
npx my-cli-tool generate component react-table

# Generate a card component with custom filename
npx my-cli-tool generate component react-card --name CustomCard

# Show help
npx my-cli-tool --help
npx my-cli-tool generate --help
```

## Template Structure

The template system supports two approaches:

### 🎯 **Development Templates** (Recommended)
```
templates-dev/
├── package.json                   # Dev dependencies for syntax highlighting
├── tsconfig.json                  # TypeScript config for templates
└── components/
    ├── react-table/
    │   ├── Table.tsx              # Valid TypeScript with annotations
    │   └── Table.css              # Valid CSS with annotations
    └── react-card/
        └── Card.tsx               # Valid TypeScript (inline styles)
```

### 📁 **Legacy Templates** (Fallback)
```
templates/
├── config.json                    # Template definitions and metadata  
└── components/
    ├── react-table/
    │   ├── {{componentName}}.tsx  # Traditional placeholder syntax
    │   └── {{componentName}}.css  # Traditional placeholder syntax
    └── react-card/
        └── {{componentName}}.tsx  # Traditional placeholder syntax
```

### ✨ **Template Annotations**

Development templates use special comments for templating:

```typescript
// @template-replace: import './{{componentName}}.css';
import './Card.css';

// @template-replace-interface: {{componentName}}Props  
interface CardProps {
  title?: string;
}

// @template-replace-component: {{componentName}}
const Card: React.FC<CardProps> = ({ title }) => {
  // component code...
};

// @template-replace: export default {{componentName}};
export default Card;
```

```css
/* @template-filename: {{componentName}}.css */
.card { /* styles */ }
```

### 🔨 **Adding New Templates**

**Option 1: Development Templates (Recommended)**
1. Create directory under `templates-dev/components/`
2. Write fully valid TypeScript/CSS with syntax highlighting
3. Add template annotations for dynamic parts
4. Update `templates/config.json` metadata
5. Rebuild with `npm run build`

**Option 2: Legacy Templates**  
1. Create directory under `templates/components/`
2. Use `{{placeholder}}` syntax directly in files
3. Update `templates/config.json` metadata
4. Rebuild with `npm run build`

### 🎯 **Template Variables**

- `{{componentName}}` - Replaced with the actual component name
- `{{projectName}}` - Replaced with the project name (for apps)
- `{{templateName}}` - Replaced with the template name

## Development

To work on this CLI tool:

```bash
# Install dependencies
npm install

# Build the project
npm run build

# Test locally
npm start -- generate component react-table --name TestTable

# Link for global testing
npm link
my-cli-tool generate component react-card
```

## License

MIT