@androbinco/library-cli 0.1.0

package/README.md

@@ -0,0 +1,262 @@
+# @androbinco/library-cli
+
+Interactive CLI tool to add Robin library components to your React project. This tool provides a beautiful, user-friendly interface for selecting and copying components into your project structure.
+
+## Description
+
+`@androbinco/library-cli` is an interactive command-line tool that helps you quickly add pre-built React components to your project. With a modern, Astro-like UI powered by `@clack/prompts`, you can easily browse and install components with just a few keystrokes.
+
+## Installation
+
+### Global Installation
+
+```bash
+npm install -g @androbinco/library-cli
+```
+
+### Using npx (without installation)
+
+```bash
+npx @androbinco/library-cli
+```
+
+### Using pnpx (for pnpm users)
+
+```bash
+pnpx @androbinco/library-cli
+```
+
+## Prerequisites
+
+- Node.js (v14 or higher)
+- A React project (components require React to function)
+- `package.json` in your project root (recommended for dependency detection)
+
+## Quick Start
+
+1. Navigate to your React project directory:
+   ```bash
+   cd my-react-project
+   ```
+
+2. Run the CLI:
+   ```bash
+   npx @androbinco/library-cli
+   ```
+
+3. Select a component from the interactive menu
+
+4. The component will be copied to `src/components/{component-name}/`
+
+## Usage
+
+### Basic Usage
+
+Simply run the CLI from your project root:
+
+```bash
+robin-library-cli
+```
+
+The CLI will:
+1. Display a welcome message
+2. Check for React dependency in your `package.json` (warns if not found)
+3. Show an interactive menu of available components
+4. Copy the selected component to `src/components/{component-name}/`
+
+### Component Structure & Flow
+
+Flow:
+1. Main menu (for now: Components or Exit)
+2. Components: multiselect prompt — “Please select one or more components”
+3. Copy selected components (one run can copy many)
+4. Post-action prompt: “Do something else?” (loop back to menu) or Exit
+
+Components are copied to the following structure:
+
+```
+your-project/
+├── src/
+│   └── components/
+│       └── {component-name}/
+│           └── {component-files}
+└── package.json
+```
+
+### Overwrite & Safety Behavior
+
+If a component directory already exists:
+- **Empty directory**: The component will be copied without prompting
+- **Non-empty directory**: You'll be prompted to confirm overwrite
+  - Select `Yes` to overwrite existing files
+  - Select `No` to cancel the operation
+
+Additional safety:
+- Destination paths are validated to stay inside your current project
+- Templates are resolved via ESM-safe `import.meta.url`
+
+## Available Components
+
+### Example Component
+
+- **Name**: `example`
+- **Description**: A simple example component with Hello World
+- **Files**: `example.tsx`
+- **Location**: `src/components/example/example.tsx`
+
+### Button Component
+
+- **Name**: `button`
+- **Description**: Minimal button component
+- **Files**: `button.tsx`
+- **Location**: `src/components/button/button.tsx`
+
+### Card Component
+
+- **Name**: `card`
+- **Description**: Minimal card wrapper
+- **Files**: `card.tsx`
+- **Location**: `src/components/card/card.tsx`
+
+### Hero Component
+
+- **Name**: `hero`
+- **Description**: Minimal hero section
+- **Files**: `hero.tsx`
+- **Location**: `src/components/hero/hero.tsx`
+
+More components will be added in future updates.
+
+## Features
+
+- ✨ Beautiful, modern UI with Astro-like aesthetics
+- 🎯 Interactive component selection
+- 🔍 Automatic React dependency detection
+- 🛡️ Safe overwrite handling (checks for empty directories)
+- 📁 Automatic directory creation
+- ⚠️ Helpful warnings and error messages
+- 🚀 Zero configuration required
+
+## How It Works
+
+1. **Dependency Check**: The CLI checks your `package.json` for React. If not found, it displays a warning but still allows you to proceed (you might add React later).
+
+2. **Component Selection**: An interactive menu displays all available components with descriptions.
+
+3. **Directory Check**: Before copying, the CLI checks if the destination directory exists and whether it's empty.
+
+4. **Copy Operation**: All files from the component template are copied to `src/components/{component-name}/`, creating directories as needed.
+
+5. **Completion**: A success message confirms the component has been added to your project.
+
+## Common Use Cases
+
+### Adding a Component to a New Project
+
+```bash
+mkdir my-app && cd my-app
+npm init -y
+npm install react react-dom
+npx @androbinco/library-cli
+```
+
+### Adding Multiple Components
+
+Run once and select multiple components in the multiselect:
+
+```bash
+npx @androbinco/library-cli  # Pick multiple components in one go
+```
+
+### Working with Existing Components
+
+If you've modified a component and want to update it:
+
+1. Run the CLI
+2. Select the component
+3. When prompted about overwriting, choose `Yes`
+
+**Note**: This will overwrite your custom changes. Consider backing up your modifications first.
+
+## Troubleshooting
+
+### "React dependency not found" Warning
+
+This warning appears if React is not listed in your `package.json`. The CLI will still copy the component, but you'll need to install React for it to work:
+
+```bash
+npm install react react-dom
+# or
+pnpm add react react-dom
+# or
+yarn add react react-dom
+```
+
+### "No package.json found" Warning
+
+If you're not in a project directory with a `package.json`, the CLI will warn you but still allow component installation. Make sure you're in the correct directory.
+
+### Permission Errors
+
+If you encounter permission errors, ensure:
+- You have write permissions in the current directory
+- The `src/components/` directory (or its parent) is not read-only
+
+### Component Not Appearing
+
+If a component doesn't appear in the selection menu:
+- Make sure you're using the latest version of the CLI
+- Check that the component template exists in the CLI's templates directory
+
+## Development
+
+For contributing to this CLI tool, see the main Robin CLI Tools monorepo.
+
+### Local Development
+
+1. Clone the monorepo
+2. Install dependencies:
+   ```bash
+   pnpm install
+   ```
+3. Link the package:
+   ```bash
+   pnpm --filter @androbinco/library-cli dev
+   ```
+
+## Technical Details
+
+### Template Resolution
+
+The CLI uses ESM-compatible path resolution (`import.meta.url`) to locate templates, ensuring it works correctly when distributed via NPM regardless of where it's installed.
+
+### File Operations
+
+- Uses `fs-extra` for reliable file operations
+- Automatically creates nested directories as needed
+- Handles file overwrites safely
+
+### Error Handling
+
+- Graceful error handling with user-friendly messages
+- Non-blocking warnings (dependency checks don't prevent installation)
+- Clear cancellation paths
+
+## Updating
+
+To update to the latest version:
+
+```bash
+npm update -g @androbinco/library-cli
+```
+
+Or use npx/pnpx to always get the latest version without global installation.
+
+## License
+
+MIT
+
+## Support
+
+For issues, questions, or contributions, please refer to the main Robin CLI Tools monorepo.
+

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@androbinco/library-cli",
+  "version": "0.1.0",
+  "description": "Interactive CLI tool to add Robin library components to your project",
+  "type": "module",
+  "main": "./src/index.js",
+  "bin": {
+    "robin-library-cli": "./src/index.js"
+  },
+  "files": [
+    "src/",
+    "README.md"
+  ],
+  "keywords": [
+    "cli",
+    "robin",
+    "library",
+    "components",
+    "react"
+  ],
+  "author": "androbinco",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "fs-extra": "^11.1.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "node ./src/index.js",
+    "dev": "node ./src/index.js",
+    "test": "echo \"Error: no test specified for robin-library-cli\" && exit 1",
+    "build": "echo \"robin-library-cli: No build step required.\"",
+    "lint": "echo \"robin-library-cli: Lint not configured.\""
+  }
+}

package/src/index.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+import * as p from '@clack/prompts';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { checkReactDependency } from './utils/dependencies.js';
+import { handleComponentsFlow } from './utils/components.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.join(__dirname, 'templates');
+
+// Component registry
+const COMPONENTS = [
+  { name: 'example', description: 'Hello World example', sourceDir: 'example', dependencies: [] },
+  { name: 'button', description: 'Minimal button component', sourceDir: 'button', dependencies: [] },
+  { name: 'card', description: 'Minimal card wrapper', sourceDir: 'card', dependencies: [] },
+  { name: 'hero', description: 'Minimal hero section', sourceDir: 'hero', dependencies: [] },
+  { 
+    name: 'carousel', 
+    description: 'Carousel component with navigation and pagination', 
+    sourceDir: 'carousel', 
+    dependencies: ['embla-carousel-react', 'embla-carousel', 'class-variance-authority'] 
+  }
+];
+
+async function mainMenu() {
+  const action = await p.select({
+    message: 'What would you like to do?',
+    options: [
+      { value: 'components', label: 'Components', hint: 'Browse and copy components' },
+      { value: 'exit', label: 'Exit' }
+    ]
+  });
+
+  return action;
+}
+
+async function main() {
+  // Beautiful intro
+  p.intro('✨ Welcome to Robin Library CLI');
+
+  // Check React dependency
+  await checkReactDependency();
+
+  let continueLoop = true;
+  while (continueLoop) {
+    const action = await mainMenu();
+
+    if (p.isCancel(action) || action === 'exit') {
+      break;
+    }
+
+    if (action === 'components') {
+      await handleComponentsFlow(COMPONENTS, TEMPLATES_DIR);
+    }
+
+    const doMore = await p.select({
+      message: 'Would you like to do something else?',
+      options: [
+        { value: 'continue', label: 'Yes, go back to the menu' },
+        { value: 'exit', label: 'No, exit' }
+      ]
+    });
+
+    if (p.isCancel(doMore) || doMore === 'exit') {
+      continueLoop = false;
+    }
+  }
+
+  // Beautiful outro
+  p.outro('🎉 Done! Happy coding!');
+}
+
+main().catch((error) => {
+  p.log.error(`Unexpected error: ${error.message}`);
+  process.exit(1);
+});
+

package/src/templates/button/button.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+
+export default function Button() {
+  return <button>Click me</button>;
+}

package/src/templates/card/card.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+
+export default function Card() {
+  return <div>Card content</div>;
+}

package/src/templates/carousel/carousel.barrel.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { DetailedHTMLProps, HTMLAttributes, useEffect } from "react";
+
+import "./styles/embla.css";
+import { EmblaOptionsType } from "embla-carousel";
+import useEmblaCarousel from "embla-carousel-react";
+
+import { cn } from "@/common/utils/classname-builder";
+
+import {
+  NavigationButtons,
+  NextButton,
+  PrevButton,
+} from "./components/navigation-buttons";
+import { Pagination } from "./components/pagination";
+import {
+  CarouselProvider,
+  useCarouselContext,
+} from "./components/provider/carousel.provider";
+
+/* 
+This is a carousel component that is used to display a list of items in a carousel.
+It is a wrapper around the embla-carousel library and uses the useEmblaCarousel hook to create the carousel.
+It is a client component that is used to display a list of items in a carousel.
+
+You have some examples in the examples folder. To test them you can just use them like this in any page:
+
+const slides = Array.from({ length: 5 }, (_, i) => i);
+<>
+  <LoopCenterCarousel slides={slides} />
+  <CarouselWithNumberPagination slides={slides} />
+</>
+*/
+
+const BodyCarousel = ({
+  children,
+  className,
+  containerClassName,
+  ...props
+}: {
+  children: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+  const { options, setEmblaApi } = useCarouselContext();
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    direction: "ltr",
+    ...options,
+  });
+
+  useEffect(() => {
+    setEmblaApi(emblaApi);
+  }, [emblaApi, setEmblaApi]);
+
+  return (
+    <div
+      ref={emblaRef}
+      className={cn("embla w-full overflow-hidden", containerClassName)}
+      {...props}
+    >
+      <div className={cn("flex w-full gap-2 px-2", className)}>{children}</div>
+    </div>
+  );
+};
+
+const RootCarousel = ({
+  children,
+  options,
+  className,
+  ...props
+}: {
+  children: React.ReactNode;
+  options: EmblaOptionsType;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <CarouselProvider options={options}>
+      <div className={cn("relative", className)} {...props}>
+        {children}
+      </div>
+    </CarouselProvider>
+  );
+};
+
+const SlideCarousel = ({
+  className,
+  children,
+  ...props
+}: {
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={cn("embla-slot min-h-max", className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Carousel = {
+  Root: RootCarousel,
+  Slides: BodyCarousel,
+  Slide: SlideCarousel,
+  Pagination: Pagination,
+  Navigation: NavigationButtons,
+  NextButton: NextButton,
+  PrevButton: PrevButton,
+};

package/src/templates/carousel/components/navigation-buttons.tsx

@@ -0,0 +1,100 @@
+import React, { ComponentPropsWithRef } from "react";
+
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/common/utils/classname-builder";
+
+import { useCarouselContext } from "./provider/carousel.provider";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+        outline: "border border-gray-300 bg-transparent hover:bg-gray-100",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  }
+);
+
+export const PrevButton: React.FC<
+  {
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+  } & ComponentPropsWithRef<"button">
+> = ({ variant = "primary", children, ...props }) => {
+  const { prevBtnDisabled, onPrevButtonClick } = useCarouselContext();
+
+  return (
+    <button
+      className={cn(buttonVariants({ variant }))}
+      disabled={prevBtnDisabled}
+      onClick={onPrevButtonClick}
+      {...props}
+    >
+      <svg className="size-4" viewBox="0 0 532 532">
+        <path
+          d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+          fill="currentColor"
+        />
+      </svg>
+      {children}
+    </button>
+  );
+};
+
+export const NextButton: React.FC<
+  {
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+  } & ComponentPropsWithRef<"button">
+> = ({ variant = "primary", children, ...props }) => {
+  const { nextBtnDisabled, onNextButtonClick } = useCarouselContext();
+
+  return (
+    <button
+      className={cn(buttonVariants({ variant }))}
+      disabled={nextBtnDisabled}
+      onClick={onNextButtonClick}
+      {...props}
+    >
+      <svg className="size-4" viewBox="0 0 532 532">
+        <path
+          d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+          fill="currentColor"
+        />
+      </svg>
+      {children}
+    </button>
+  );
+};
+
+const containerVariants = cva("", {
+  variants: {
+    variant: {
+      "absolute-center":
+        "absolute top-1/2 flex w-full -translate-y-1/2 justify-between",
+    },
+  },
+});
+
+export const NavigationButtons = ({
+  className,
+  variant = "absolute-center",
+  buttonVariant = "primary",
+  ...props
+}: {
+  className?: string;
+  variant?: VariantProps<typeof containerVariants>["variant"];
+  buttonVariant?: VariantProps<typeof buttonVariants>["variant"];
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={cn(containerVariants({ variant }), className)} {...props}>
+      <PrevButton variant={buttonVariant} />
+      <NextButton variant={buttonVariant} />
+    </div>
+  );
+};

package/src/templates/carousel/components/pagination.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useCarouselContext } from './provider/carousel.provider';
+
+export const Pagination: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & { type?: 'dot' | 'number' | 'progress' }
+> = ({ className, type = 'dot', ...props }) => {
+  const { scrollSnaps, selectedIndex, onDotButtonClick } = useCarouselContext();
+
+  if (type === 'number')
+    return (
+      <div className={cn('mx-auto flex w-max gap-2', className)} {...props}>
+        <p className="text-body-2 text-grey-50-15">
+          {selectedIndex + 1} / {scrollSnaps.length}
+        </p>
+      </div>
+    );
+  if (type === 'progress')
+    return (
+      <div
+        className={cn(
+          'relative mx-auto flex h-2 w-200 max-w-full gap-2 overflow-hidden rounded-full bg-bg-primary',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className="pointer-events-none absolute bottom-0 left-0 h-2 w-full bg-fill-brand-primary transition-all duration-300 ease-out"
+          style={{
+            transformOrigin: 'left',
+            transform: `scaleX(${(selectedIndex + 1) / scrollSnaps.length})`,
+          }}
+        />
+        {scrollSnaps.map((_, index) => (
+          <div
+            key={index}
+            className="h-2 w-full cursor-pointer"
+            onClick={() => onDotButtonClick(index)}
+          />
+        ))}
+      </div>
+    );
+
+  if (type === 'dot')
+    return (
+      <div className={cn('mx-auto flex w-max gap-2', className)} {...props}>
+        {scrollSnaps.map((_, index) => (
+          <DotButton key={index} index={index} variant="primary" />
+        ))}
+      </div>
+    );
+};
+
+type DotButtonVariants = VariantProps<typeof dotButtonVariants>['variant'];
+const dotButtonVariants = cva(
+  'size-3 cursor-pointer rounded-full transition-all duration-300 ease-out focus:outline-2',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-fill-brand-primary',
+      },
+      selected: {
+        true: 'w-9 !bg-amber-950',
+        false: '',
+      },
+    },
+  },
+);
+
+export const DotButton: React.FC<{ index: number; variant: DotButtonVariants }> = ({
+  index,
+  variant = 'primary',
+  ...restProps
+}) => {
+  const { selectedIndex, onDotButtonClick } = useCarouselContext();
+
+  return (
+    <button
+      className={dotButtonVariants({ variant, selected: selectedIndex === index })}
+      disabled={selectedIndex === index}
+      onClick={() => onDotButtonClick(index)}
+      {...restProps}
+    />
+  );
+};