@androbinco/library-cli 0.1.0 → 0.2.0

package/README.md

@@ -59,18 +59,20 @@ robin-library-cli
 ```
 
 The CLI will:
-1. Display a welcome message
+1. Display a welcome message with a link to view examples online
 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}/`
+4. For components with variants, show a submenu to select specific configurations
+5. 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
+1. Main menu (Components or Exit)
+2. Components: multiselect prompt — "Please select one or more components"
+3. **Submenu Selection** (for components with variants): Some components offer submenus to select specific variants or configurations
+4. Copy selected components (one run can copy many)
+5. Post-action prompt: "Do something else?" (loop back to menu) or Exit
 
 Components are copied to the following structure:
 
@@ -97,33 +99,77 @@ Additional safety:
 
 ## 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`
+### Carousel Component
+
+- **Name**: `carousel`
+- **Description**: Carousel component with navigation and pagination
+- **Dependencies**: `embla-carousel-react`, `embla-carousel`, `class-variance-authority`
+- **Files**: 
+  - `carousel.barrel.tsx` (main component)
+  - `components/` (navigation buttons, pagination, provider)
+  - `hooks/` (use-slide-active hook)
+  - `styles/` (embla.css styles)
+  - `examples/` (example implementations)
+- **Location**: `src/components/carousel/`
+- **Features**:
+  - Navigation buttons (prev/next)
+  - Multiple pagination types (dots, numbers, progress bar)
+  - Responsive breakpoints
+  - Loop support
+  - Slide active state tracking
+
+### In-View Component
+
+- **Name**: `in-view`
+- **Description**: In view animations for scroll-triggered effects
+- **Dependencies**: `motion` (Framer Motion)
+- **Location**: `src/components/in-view/`
+- **Variants** (selectable via submenu):
+  - **Grid**: Grid-based animations
+    - Files: `in-view-grid.tsx`, `in-view-animation.tsx`, `data.in-view.ts`
+    - Example: `in-view-grid-showcase.tsx`
+  - **Individual Elements**: Individual element animations
+    - Files: `in-view-hidden-text.tsx`, `in-view-stroke-line.tsx`, `in-view-animation.tsx`, `data.in-view.ts`
+    - Example: `in-view-examples.home.tsx`
+- **Features**:
+  - Scroll-triggered animations
+  - Grid-based and individual element animations
+  - Reusable animation utilities
+  - Type-safe data attributes
+
+### Ticker Component
+
+- **Name**: `ticker`
+- **Description**: Ticker component with hover and non-hover variants
+- **Dependencies**: `motion` (Framer Motion)
+- **Location**: `src/components/ticker/`
+- **Variants** (selectable via submenu):
+  - **Stop on hover ticker (motion)**: MotionTicker with hover stop functionality
+    - Files: `motion-ticker.tsx`, `hooks/` (use-ticker-clones, use-ticker-incremental)
+    - Example: `ticker-hover-showcase.home.tsx`
+  - **Non-stop on hover ticker (css)**: TickerStatic with CSS animations
+    - Files: `css-ticker/css-ticker.tsx`, `css-ticker/ticker.keyframes.css`
+    - Example: `ticker-static-showcase.home.tsx`
+- **Features**:
+  - Infinite scrolling ticker
+  - Hover to pause (motion variant)
+  - CSS-based animation option
+  - Customizable speed and direction
+
+### Scroll Tracker Component
+
+- **Name**: `scroll-tracker`
+- **Description**: Scroll tracker provider for scroll-driven animations
+- **Dependencies**: `motion` (Framer Motion)
+- **Files**:
+  - `scroll-tracker-provider.tsx` (main provider component)
+  - `examples/scroll-tracker-showcase.tsx` (example implementation)
+- **Location**: `src/components/scroll-tracker/`
+- **Features**:
+  - Scroll progress tracking
+  - Context-based scroll state management
+  - Enables scroll-driven animations throughout your app
+  - Works seamlessly with Framer Motion
 
 More components will be added in future updates.
 
@@ -132,6 +178,7 @@ More components will be added in future updates.
 - ✨ Beautiful, modern UI with Astro-like aesthetics
 - 🎯 Interactive component selection
 - 🔍 Automatic React dependency detection
+- 📦 Automatic dependency installation (detects and installs missing npm packages)
 - 🛡️ Safe overwrite handling (checks for empty directories)
 - 📁 Automatic directory creation
 - ⚠️ Helpful warnings and error messages
@@ -141,13 +188,15 @@ More components will be added in future updates.
 
 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.
+2. **Component Selection**: An interactive menu displays all available components with descriptions. You can select multiple components at once. Some components offer submenus to select specific variants or configurations (e.g., Grid vs Individual Elements for in-view animations).
+
+3. **Dependency Installation**: The CLI automatically detects missing dependencies required by selected components and offers to install them using your project's package manager (npm, pnpm, or yarn).
 
-3. **Directory Check**: Before copying, the CLI checks if the destination directory exists and whether it's empty.
+4. **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. **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.
+6. **Completion**: A success message confirms the component has been added to your project.
 
 ## Common Use Cases
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@androbinco/library-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Interactive CLI tool to add Robin library components to your project",
   "type": "module",
   "main": "./src/index.js",
@@ -11,13 +11,14 @@
     "src/",
     "README.md"
   ],
-  "keywords": [
-    "cli",
-    "robin",
-    "library",
-    "components",
-    "react"
-  ],
+  "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.\""
+  },
+  "keywords": ["cli", "robin", "library", "components", "react"],
   "author": "androbinco",
   "license": "MIT",
   "dependencies": {
@@ -29,12 +30,6 @@
   },
   "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

@@ -12,15 +12,73 @@ 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'] 
+  },
+  {
+    name: 'in-view',
+    description: 'In view animations',
+    sourceDir: 'in-view',
+    hasSubmenu: true,
+    submenuOptions: [
+      {
+        value: 'grid',
+        label: 'Grid',
+        description: 'Grid-based animations',
+        hasNestedSubmenu: true,
+        nestedSubmenuOptions: [
+          { value: 'in-view-grid', file: 'in-view-grid.tsx', required: true },
+          { value: 'in-view-animation', file: 'in-view-animation.tsx', required: false, checkExists: true },
+          { value: 'data.in-view', file: 'data.in-view.ts', required: true }
+        ],
+        examples: ['in-view-grid-showcase.tsx']
+      },
+      {
+        value: 'individual',
+        label: 'Individual Elements',
+        description: 'Individual element animations',
+        hasNestedSubmenu: true,
+        nestedSubmenuOptions: [
+          { value: 'in-view-hidden-text', file: 'in-view-hidden-text.tsx', required: true },
+          { value: 'in-view-stroke-line', file: 'in-view-stroke-line.tsx', required: true },
+          { value: 'in-view-animation', file: 'in-view-animation.tsx', required: false, checkExists: true },
+          { value: 'data.in-view', file: 'data.in-view.ts', required: true }
+        ],
+        examples: ['in-view-examples.home.tsx']
+      }
+    ],
+    dependencies: ['motion']
+  },
+  {
+    name: 'ticker',
+    description: 'Ticker component with hover and non-hover variants',
+    sourceDir: 'ticker',
+    hasSubmenu: true,
+    submenuOptions: [
+      {
+        value: 'hover',
+        label: 'Stop on hover ticker (motion)',
+        description: 'MotionTicker with hover stop functionality',
+        examples: ['ticker-hover-showcase.home.tsx']
+      },
+      {
+        value: 'non-hover',
+        label: 'Non-stop on hover ticker (css)',
+        description: 'TickerStatic with CSS animations',
+        examples: ['ticker-static-showcase.home.tsx']
+      }
+    ],
+    dependencies: ['motion']
+  },
+  {
+    name: 'scroll-tracker',
+    description: 'Scroll tracker provider for scroll-driven animations',
+    sourceDir: 'scroll-tracker',
+    dependencies: ['motion'],
+    examples: ['scroll-tracker-showcase.tsx']
   }
 ];
 
@@ -40,6 +98,14 @@ async function main() {
   // Beautiful intro
   p.intro('✨ Welcome to Robin Library CLI');
 
+  // Add clickable link using ANSI escape codes for hyperlinks
+  const websiteUrl = 'https://robin-animation-library-620346143712.us-east1.run.app/';
+  const linkText = 'https://robin-animation-library-620346143712.us-east1.run.app/';
+  // ANSI escape code format: \u001b]8;;URL\u0007TEXT\u001b]8;;\u0007
+  const clickableLink = `\u001b]8;;${websiteUrl}\u0007${linkText}\u001b]8;;\u0007`;
+  p.log.info(`You can check examples in ${clickableLink}`);
+  
+
   // Check React dependency
   await checkReactDependency();
 

package/src/templates/in-view/data.in-view.ts

@@ -0,0 +1,89 @@
+const IN_VIEW_ANIMATIONS = {
+  fadeInUp: {
+    hidden: {
+      y: '100px',
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+      y: '0%',
+    },
+  },
+  fadeInLeft: {
+    hidden: { opacity: 0, transform: `translateX(-100px)` },
+    visible: { opacity: 1, transform: `translateX(0px)` },
+  },
+  fadeInDown: {
+    hidden: { opacity: 0, transform: `translateY(-50px)` },
+    visible: { opacity: 1, transform: `translateY(0px)` },
+  },
+  fadeInRight: {
+    hidden: { opacity: 0, transform: `translateX(100px)` },
+    visible: { opacity: 1, transform: `translateX(0px)` },
+  },
+  opacity: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  },
+  imgBlur: {
+    hidden: {
+      filter: 'blur(10px)',
+      backdropFilter: 'blur(10px)',
+      WebkitBackdropFilter: 'blur(10px)',
+      overflow: 'hidden',
+    },
+    visible: {
+      overflow: 'hidden',
+      filter: 'blur(0px)',
+      backdropFilter: 'blur(0px)',
+      WebkitBackdropFilter: 'blur(0)',
+    },
+  },
+  scaleX: {
+    hidden: {
+      scaleX: 0,
+    },
+    visible: {
+      scaleX: 1,
+    },
+  },
+  strokeLine: {
+    hidden: {
+      scaleX: 0,
+      transformOrigin: 'left center',
+    },
+    visible: {
+      scaleX: 1,
+      transformOrigin: 'left center',
+    },
+  },
+  slideInUp: {
+    hidden: {
+      y: '85%',
+    },
+    visible: {
+      y: '0%',
+    },
+  },
+  slideInLeftFull: {
+    hidden: {
+      x: '-100%',
+    },
+    visible: {
+      x: '0%',
+    },
+  },
+  fadeInRightFull: {
+    hidden: {
+      opacity: 0,
+      x: '100%',
+    },
+    visible: {
+      opacity: 1,
+      x: '0%',
+    },
+  },
+};
+
+export default IN_VIEW_ANIMATIONS;
+

package/src/templates/in-view/examples/in-view-examples.home.tsx

@@ -0,0 +1,101 @@
+import { Fragment } from "react";
+
+import InViewAnimation from "../in-view-animation";
+import { InViewHiddenText } from "../in-view/in-view-hidden-text";
+import { InViewStrokeLine } from "../in-view/in-view-stroke-line";
+import { Text } from "@/common/ui/text/text";
+
+const InViewExampleCard = ({ text }: { text?: string }) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-50 w-full rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
+      <Text
+        className="text-text-interactive-neutral-primary-inverse"
+        variant="title.6"
+      >
+        {text}
+      </Text>
+    </div>
+  );
+};
+
+export const InViewExamplesHome = () => {
+  return (
+    <div className="container mx-auto max-w-480">
+      <Text className="pb-15" variant="title.6">
+        In View Examples {"(Individual Elements)"}
+      </Text>
+      <div className="grid w-full gap-2 gap-y-2 overflow-hidden max-lg:grid-cols-1 lg:grid-cols-3 lg:gap-y-10">
+        <InViewAnimation effect="fadeInLeft">
+          <InViewExampleCard text="Fade Left Effect" />
+        </InViewAnimation>
+        <InViewAnimation
+          effect="opacity"
+          transition={{
+            delay: 0.2,
+          }}
+        >
+          <InViewExampleCard text="Opacity Effect" />
+        </InViewAnimation>
+        <InViewAnimation effect="fadeInRight">
+          <InViewExampleCard text="Fade Right Effect" />
+        </InViewAnimation>
+        <div className="flex w-full flex-col flex-wrap justify-end gap-5 lg:col-span-2">
+          <InViewStrokeLine
+            className="bg-fill-brand-primary opacity-40"
+            transition={{
+              duration: 0.8,
+            }}
+          />
+          <InViewHiddenText>
+            <Text className="py-1 text-grey-100-80">
+              Hidden text effect and stroke line
+            </Text>
+          </InViewHiddenText>
+
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Fragment key={index}>
+              <InViewStrokeLine
+                className="bg-fill-brand-primary opacity-40"
+                transition={{
+                  duration: 0.8,
+                  delay: 0.1 * (index + 1),
+                }}
+              />
+              <InViewHiddenText
+                transition={{
+                  delay: 0.2 * (index + 1),
+                }}
+              >
+                <Text className="text-grey-100-80">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </Text>
+              </InViewHiddenText>
+            </Fragment>
+          ))}
+          <InViewStrokeLine
+            className="bg-fill-brand-primary opacity-40"
+            transition={{
+              duration: 0.8,
+              delay: 0.4,
+            }}
+          />
+        </div>
+        <InViewAnimation
+          className="lg:col-start-3"
+          effect="imgBlur"
+          once={false}
+        >
+          <Center className="relative h-102 w-full overflow-hidden rounded-2xl bg-fill-brand-primary">
+            <img alt="Placeholder" src="/img/racti-sireno.jpeg" />
+            <Text
+              className="absolute bottom-1/4 rounded-2xl bg-grey-50-30 p-2 text-text-primary"
+              variant="title.6"
+            >
+              Blur Effect
+            </Text>
+          </Center>
+        </InViewAnimation>
+      </div>
+    </div>
+  );
+};

package/src/templates/in-view/examples/in-view-grid-showcase.tsx

@@ -0,0 +1,41 @@
+import { GridInView } from "@/common/animations/in-view/in-view-grid";
+import { Center } from "@/common/ui/containers/center";
+import { Text } from "@/common/ui/text/text";
+import { cn } from "@/common/utils/classname-builder";
+
+const CardComponent = ({
+  pepito,
+  className,
+}: {
+  pepito: number;
+  className?: string;
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-50 w-full rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
+      <Text>{pepito}</Text>
+    </div>
+  );
+};
+
+export const InViewGridShowcase = () => {
+  return (
+    <>
+      <div>
+        <h1>In View Grid:</h1>
+        <GridInView columns={5} delayByColumn={false}>
+          {Array.from({ length: 10 }, (_, index) => index).map((item) => (
+            <CardComponent key={item} pepito={item + 1} />
+          ))}
+        </GridInView>
+      </div>
+      <div>
+        <h1>In View Grid with delay by column:</h1>
+        <GridInView columns={{ desktop: 4, mobile: 2 }}>
+          {Array.from({ length: 12 }, (_, index) => index).map((item) => (
+            <CardComponent key={item} className="h-100" pepito={item + 1} />
+          ))}
+        </GridInView>
+      </div>
+    </>
+  );
+};

package/src/templates/in-view/in-view-animation.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { FC, ReactNode } from "react";
+
+import {
+  motion,
+  MotionProps,
+  TargetAndTransition,
+  Transition,
+} from "motion/react";
+
+import IN_VIEW_ANIMATIONS from "./data.in-view";
+
+const transitionsDefault: Transition = {
+  duration: 0.6,
+  delay: 0,
+  ease: "easeInOut",
+};
+
+export type InViewAnimationProps = {
+  margin?: string;
+  transition?: Transition;
+  effect?: keyof typeof IN_VIEW_ANIMATIONS;
+  customEffect?: {
+    hidden: TargetAndTransition;
+    visible: TargetAndTransition;
+  };
+  execute?: boolean;
+  once?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: ReactNode;
+} & MotionProps &
+  React.HTMLAttributes<HTMLDivElement>;
+
+const InViewAnimation: FC<InViewAnimationProps> = ({
+  margin = "-10% 0%",
+  execute = true,
+  transition = {},
+  customEffect,
+  effect = "fadeInUp",
+  once = true,
+  style,
+  className,
+  children,
+  ...props
+}) => (
+  <motion.div
+    className={className}
+    initial={customEffect?.hidden || IN_VIEW_ANIMATIONS[effect].hidden}
+    style={style}
+    transition={{
+      ...transitionsDefault,
+      ...transition,
+    }}
+    viewport={
+      execute
+        ? {
+            once,
+            margin,
+          }
+        : {}
+    }
+    whileInView={
+      execute ? customEffect?.visible || IN_VIEW_ANIMATIONS[effect].visible : {}
+    }
+    {...props}
+  >
+    {children}
+  </motion.div>
+);
+
+export default InViewAnimation;

package/src/templates/in-view/in-view-grid.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { Children, useEffect, useState } from "react";
+
+import { motion, Transition } from "motion/react";
+
+import { cn } from "@/common/utils/classname-builder";
+
+import IN_VIEW_ANIMATIONS from "./data.in-view";
+
+type GridInViewProps = {
+  children: React.ReactNode;
+  className?: string;
+  effect?: keyof typeof IN_VIEW_ANIMATIONS;
+  columns?: number | { desktop: number; mobile: number };
+  delayDelta?: number;
+  delayByColumn?: boolean;
+  transition?: Omit<Transition, "delay">;
+  columnsMobile?: number;
+};
+
+export const GridInView = ({
+  children,
+  className,
+  effect = "fadeInUp",
+  delayDelta = 0.3,
+  delayByColumn = true,
+  transition = {
+    duration: 0.5,
+    ease: "easeOut",
+  },
+  columns = 5,
+}: GridInViewProps) => {
+  const childrenArray = Children.toArray(children);
+  const isColumnsObject = typeof columns === "object";
+  const [columnsValue, setColumnsValue] = useState(
+    isColumnsObject ? columns.desktop : columns
+  );
+
+  useEffect(() => {
+    if (!delayByColumn) return;
+    if (typeof window === "undefined" || !isColumnsObject) return;
+    if (window.innerWidth < 1024) setColumnsValue(columns.mobile);
+    else setColumnsValue(columns.desktop);
+  }, [columns, isColumnsObject, delayByColumn]);
+  const delayCount = (index: number) =>
+    delayByColumn ? index % columnsValue : index;
+
+  return (
+    <div
+      className={cn(
+        "grid gap-4",
+        "[grid-template-columns:repeat(var(--columns),1fr)]",
+        "max-lg:[grid-template-columns:repeat(var(--columns-mobile),1fr)]",
+        className
+      )}
+      style={
+        {
+          "--columns": isColumnsObject ? columns.desktop : columns,
+          "--columns-mobile": isColumnsObject ? columns.mobile : columns,
+        } as React.CSSProperties
+      }
+    >
+      {childrenArray.map((item, index) => (
+        <motion.div
+          key={index}
+          initial={IN_VIEW_ANIMATIONS[effect].hidden}
+          transition={{
+            ...transition,
+            delay: delayCount(index) * delayDelta,
+          }}
+          viewport={{ once: true, margin: "-10% 0%" }}
+          whileInView={IN_VIEW_ANIMATIONS[effect].visible}
+        >
+          {item}
+        </motion.div>
+      ))}
+    </div>
+  );
+};