@satu_ui/cli

A premium CLI tool to copy-paste accessible, customizable, and responsive components directly into your Angular workspace. Inspired by modern component distribution workflows.

📋 Prerequisites (Prasyarat)

Before using @satu_ui/cli, make sure your project meets the following requirements:

1. Tailwind CSS Installed

The components copied by the CLI rely on Tailwind CSS for layout and styling.

• For Tailwind v4 (Angular 19+): Ensure you have @tailwindcss/postcss and tailwindcss set up in your build configuration, and @import "tailwindcss"; in your global CSS file.
• For Tailwind v3: Ensure you have a configured tailwind.config.js and that your tailwind directives are added to your global CSS file:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

2. Global CSS File

You must have a global CSS stylesheet (e.g., src/styles.css or src/styles.scss) where Tailwind directives are imported. The CLI will ask for this path during initialization.

[!TIP] During init, the CLI will automatically append the Danarakca Design System theme tokens, color mappings, and premium keyframe animations directly into this stylesheet so the components function and look exactly like the documentation out-of-the-box.

🚀 Installation & Quick Start

You don't need to install this CLI globally. Simply run it on-demand using npx:

Step 1: Initialize Configuration

Run the following command in the root of your Angular workspace:

npx @satu_ui/cli init

This will trigger an interactive wizard asking:

1. Component target folder: Where the copied components should live (Default: src/app/components/ui).
2. Global CSS path: Where your global stylesheet containing Tailwind imports is located (Default: src/styles.css).

⚡ Non-Interactive Init (Satu-click Setup)

To skip prompts and use default configurations instantly, run:

npx @satu_ui/cli init -y

🛠️ The Configuration File (satu-components.json)

Upon initialization, the CLI creates a satu-components.json configuration file in your project root:

{
  "$schema": "./node_modules/@satu_ui/cli/schema.json",
  "style": "default",
  "tailwind": {
    "css": "src/styles.css"
  },
  "aliases": {
    "components": "src/app/components/ui"
  }
}

💡 Why Local Schema Validation?

Notice that $schema references ./node_modules/@satu_ui/cli/schema.json:

• Offline Autocomplete & Tooltips: Your IDE (like VS Code) reads the schema inside node_modules instantly, giving you automatic auto-completes, property tooltips, and validation error highlights.
• No Remote Calls: No need for web requests, keeping your development workflow offline-friendly and fast.

💻 Commands

1. init

Initializes configuration settings in your project.

npx @satu_ui/cli init     # Interactive mode
npx @satu_ui/cli init -y  # Force default configuration

2. list

Lists all available premium components in the registry.

npx @satu_ui/cli list

3. add <component-name>

Copies the source code (templates, logic, and component styles) of a specific component into your target component directory.

npx @satu_ui/cli add button
npx @satu_ui/cli add accordion

4. version (or -v, --version)

Prints the currently installed version of @satu_ui/cli.

npx @satu_ui/cli -v

📦 Component Usage Guide

After adding a component (e.g. button), you can import it directly inside your Angular components or routing modules.

Example: Using the Button Component

1. Add the component:

   npx @satu_ui/cli add button

2. Import the component in your Angular Component:

   import { Component } from '@angular/core';
   import { ButtonComponent } from './components/ui/button/button.component'; // path based on your config
   
   @Component({
     selector: 'app-home',
     standalone: true,
     imports: [ButtonComponent],
     template: `
       <button satu-button variant="primary">Click Me</button>
     `
   })
   export class HomeComponent {}

3. Enjoy your modern, accessible, and high-performance component!