@androbinco/library-cli 0.2.0 → 0.3.0

package/src/templates/strapi-dynamic-zone/types.ts

@@ -0,0 +1,73 @@
+/**
+ * Strapi Dynamic Zone Type Utilities
+ *
+ * These types provide type-safe rendering for Strapi Dynamic Zones.
+ * Define your component union type with `__component` discriminator,
+ * then use these utilities for type-safe prop extraction.
+ */
+
+/**
+ * Base constraint for Strapi dynamic zone components.
+ * All components must have a `__component` string identifier.
+ */
+export type StrapiComponent = {
+  __component: string;
+  id?: number | string;
+};
+
+/**
+ * Extracts the props for a specific component type from a union,
+ * omitting the `__component` discriminator.
+ *
+ * @example
+ * type HeroProps = ExtractComponentProps<PageComponent, 'hero.hero'>;
+ * // Results in: { title: string; subtitle: string; image: ImageType }
+ */
+export type ExtractComponentProps<
+  TUnion extends StrapiComponent,
+  TComponentKey extends TUnion['__component']
+> = Omit<Extract<TUnion, { __component: TComponentKey }>, '__component'>;
+
+/**
+ * Creates a type-safe renderer map from a component union.
+ * Each key is a `__component` value, each value is a render function.
+ *
+ * @example
+ * const renderers: ComponentRendererMap<PageComponent> = {
+ *   'hero.hero': (props) => <Hero {...props} />,
+ *   'cta.cta': (props) => <CTA {...props} />,
+ * };
+ */
+export type ComponentRendererMap<
+  TUnion extends StrapiComponent,
+  TExtra = object
+> = {
+  [K in TUnion['__component']]: (
+    props: ExtractComponentProps<TUnion, K> & TExtra
+  ) => React.ReactElement | null;
+};
+
+/**
+ * Utility type to get all component keys from a union.
+ */
+export type ComponentKeys<TUnion extends StrapiComponent> =
+  TUnion['__component'];
+
+/**
+ * Props for the DynamicZone component (renders multiple components).
+ */
+export type DynamicZoneProps<
+  TUnion extends StrapiComponent,
+  TExtra = object
+> = {
+  /** Array of components from Strapi Dynamic Zone */
+  components: TUnion[];
+  /** Map of component renderers */
+  renderers: ComponentRendererMap<TUnion, TExtra>;
+  /** Function to generate extra props per component (receives component and index) */
+  getExtraProps?: (component: TUnion, index: number) => TExtra;
+  /** Optional fallback for unknown components */
+  fallback?: (component: TUnion) => React.ReactElement | null;
+  /** Optional key generator (defaults to component.id or index) */
+  getKey?: (component: TUnion, index: number) => string | number;
+};

package/src/utils/components.js

@@ -9,6 +9,162 @@ import { copyComponent, checkComponentExists } from './files.js';
 import fs from 'fs-extra';
 import path from 'path';
 
+// Component registry
+export const COMPONENTS = [
+  {
+    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-components',
+    description: 'Scroll-driven animation components',
+    sourceDir: 'scroll-components',
+    hasSubmenu: true,
+    submenuOptions: [
+      {
+        value: 'scroll-tracker',
+        label: 'Scroll Tracker Provider',
+        description: 'Scroll progress tracking provider for animations',
+        examples: ['scroll-tracker-showcase.tsx']
+      },
+      {
+        value: 'parallax-image',
+        label: 'Parallax Image',
+        description: 'CSS-based parallax effect using scroll-driven animations',
+        examples: ['parallax/examples/parallax-showcase.tsx']
+      },
+      {
+        value: 'scale-gallery',
+        label: 'Scale Gallery',
+        description: 'Expanding gallery with scroll-driven scaling',
+        examples: ['scale-gallery/examples/scale-gallery-showcase.tsx']
+      }
+    ],
+    dependencies: ['motion']
+  },
+  {
+    name: 'strapi-dynamic-zone',
+    description: 'Type-safe renderer for Strapi Dynamic Zones with React',
+    sourceDir: 'strapi-dynamic-zone',
+    dependencies: [],
+    examples: ['page.tsx', 'renderers.tsx', 'types.ts']
+  },
+  {
+    name: 'faqs-accordion',
+    description: 'Accessible FAQ accordion component using Radix UI',
+    sourceDir: 'faqs-accordion',
+    dependencies: ['@radix-ui/react-accordion'],
+    examples: ['faqs-showcase.tsx']
+  },
+  {
+    name: 'lenis',
+    description: 'Smooth scroll provider with Lenis',
+    sourceDir: 'lenis',
+    dependencies: ['lenis'],
+    examples: ['providers.tsx']
+  }
+];
+
+// Helper functions for CLI commands
+export function getComponentByName(name) {
+  return COMPONENTS.find(c => c.name === name);
+}
+
+export function getVariantByName(component, variantName) {
+  if (!component.hasSubmenu || !component.submenuOptions) return null;
+  return component.submenuOptions.find(v => v.value === variantName);
+}
+
+export function getFilesForVariant(component, variant) {
+  const files = [];
+
+  if (component.name === 'ticker') {
+    if (variant.value === 'hover') {
+      files.push('motion-ticker.tsx');
+      files.push('hooks');
+    } else if (variant.value === 'non-hover') {
+      files.push('css-ticker');
+      files.push('hooks');
+    }
+  } else if (component.name === 'scroll-components') {
+    if (variant.value === 'scroll-tracker') {
+      files.push('scroll-tracker-provider.tsx');
+    } else if (variant.value === 'parallax-image') {
+      files.push('parallax/parallax.tsx');
+      files.push('parallax/parallax.css');
+    } else if (variant.value === 'scale-gallery') {
+      files.push('scale-gallery/scale-gallery.tsx');
+      files.push('scale-gallery/components/expanding-element.tsx');
+      files.push('hooks/use-client-dimensions.ts');
+      files.push('scroll-tracker-provider.tsx');
+    }
+  } else if (component.name === 'in-view' && variant.hasNestedSubmenu) {
+    // Copy all files for the variant
+    for (const nested of variant.nestedSubmenuOptions) {
+      files.push(nested.file);
+    }
+  }
+
+  return files;
+}
+
 export async function handleSubmenuFlow(component, templatesDir) {
   if (!component.hasSubmenu || !component.submenuOptions || component.submenuOptions.length === 0) {
     p.log.error(`Component "${component.name}" is not configured for submenu flow.`);
@@ -143,6 +299,24 @@ export async function handleSubmenuFlow(component, templatesDir) {
             // Non-hover option: copy css-ticker directory
             allComponentsToCopy.add('css-ticker');
           }
+        } else if (component.name === 'scroll-components') {
+          // Handle scroll-components submenu options
+          if (selectedValue === 'scroll-tracker') {
+            allComponentsToCopy.add('scroll-tracker-provider.tsx');
+          } else if (selectedValue === 'parallax-image') {
+            allComponentsToCopy.add('parallax/parallax.tsx');
+            allComponentsToCopy.add('parallax/parallax.css');
+          } else if (selectedValue === 'scale-gallery') {
+            allComponentsToCopy.add('scale-gallery/scale-gallery.tsx');
+            allComponentsToCopy.add('scale-gallery/components/expanding-element.tsx');
+            allComponentsToCopy.add('hooks/use-client-dimensions.ts');
+
+            // Check if scroll-tracker-provider exists, if not add it
+            const trackerExists = await checkComponentExists(component.name, 'scroll-tracker-provider.tsx');
+            if (!trackerExists) {
+              allComponentsToCopy.add('scroll-tracker-provider.tsx');
+            }
+          }
         } else {
           // No nested submenu - copy all component files (legacy behavior)
           // This maintains backward compatibility
@@ -324,11 +498,14 @@ export async function handleComponentsFlow(components, templatesDir) {
   while (true) {
     const selectedComponents = await p.multiselect({
       message: 'Please select one or more components to add (press spacebar to select and return to confirm selection)',
-      options: components.map(comp => ({
-        value: comp.name,
-        label: comp.name,
-        hint: comp.description
-      })),
+      options: [
+        ...components.map(comp => ({
+          value: comp.name,
+          label: comp.name,
+          hint: comp.description
+        })),
+        { value: '__go_back__', label: '← Go back', hint: 'Return to main menu' }
+      ],
       required: true
     });
 
@@ -337,6 +514,11 @@ export async function handleComponentsFlow(components, templatesDir) {
       return;
     }
 
+    // Check if user selected go back
+    if (selectedComponents.includes('__go_back__')) {
+      return { goBack: true };
+    }
+
     if (!selectedComponents.length) {
       p.log.info('No components selected.');
       return;

package/src/utils/files.js

@@ -31,24 +31,25 @@ export async function copyExamples(component, templatesDir, examplesToCopy) {
     return true;
   }
 
-  const examplesSourcePath = path.join(templatesDir, component.sourceDir, 'examples');
-  const examplesDestPath = path.resolve(process.cwd(), 'src', 'components', component.name, 'examples');
-
-  if (!(await fs.pathExists(examplesSourcePath))) {
-    p.log.warn(`Examples directory not found at ${examplesSourcePath}. Skipping examples.`);
-    return true;
-  }
+  const componentSourcePath = path.join(templatesDir, component.sourceDir);
+  const componentDestPath = path.resolve(process.cwd(), 'src', 'components', component.name);
 
   try {
-    // Ensure destination directory exists
-    await fs.ensureDir(examplesDestPath);
-
     // Copy selected example files
     for (const exampleFile of examplesToCopy) {
-      const sourceFile = path.join(examplesSourcePath, exampleFile);
-      const destFile = path.join(examplesDestPath, exampleFile);
+      // Support both nested paths (e.g., 'parallax/examples/parallax-showcase.tsx')
+      // and flat paths (e.g., 'scroll-tracker-showcase.tsx')
+      const sourceFile = path.join(componentSourcePath, exampleFile);
+
+      // For nested paths like 'parallax/examples/parallax-showcase.tsx',
+      // copy to 'examples/parallax-showcase.tsx' in destination
+      // For flat paths like 'scroll-tracker-showcase.tsx',
+      // copy to 'examples/scroll-tracker-showcase.tsx' in destination
+      const filename = path.basename(exampleFile);
+      const destFile = path.join(componentDestPath, 'examples', filename);
 
       if (await fs.pathExists(sourceFile)) {
+        await fs.ensureDir(path.dirname(destFile));
         await fs.copy(sourceFile, destFile, { overwrite: true });
       } else {
         p.log.warn(`Example file "${exampleFile}" not found. Skipping.`);

package/src/templates/scroll-tracker/examples/scroll-tracker-showcase.tsx

@@ -1,90 +0,0 @@
-"use client";
-import { motion, MotionValue, useSpring, useTransform } from "motion/react";
-
-import {
-  ScrollTrackerProvider,
-  useScrollTrackerContext,
-} from "../scroll-tracker-provider";
-import { Center } from "@/common/ui/containers/center";
-import { Text } from "@/common/ui/text/text";
-
-/* 
-    This is a scroll tracker component that provides scroll-driven animations.
-    It uses the motion library to track scroll progress and provides a context
-    for child components to access the scroll progress.
-
-    To test it you can just use it like this in any page:
-    <ScrollTrackerShowcase />
-*/
-
-const AnimatedText = ({
-  text,
-  motionValue,
-  offsetIntro,
-  opacityOffset = [0, 0.5, 1],
-  yOffset = [100, -20, 0],
-}: {
-  text: string;
-  motionValue: MotionValue<number>;
-  offsetIntro: [number, number] | [number, number, number];
-  opacityOffset?: [number, number] | [number, number, number];
-  yOffset?: [number, number] | [number, number, number];
-}) => {
-  const animateEntry = useTransform(motionValue, offsetIntro, opacityOffset);
-  const y = useSpring(useTransform(motionValue, offsetIntro, yOffset));
-
-  return (
-    <motion.div style={{ opacity: animateEntry, y }}>
-      <Text className="text-white">{text}</Text>
-    </motion.div>
-  );
-};
-
-const ScrollSection = () => {
-  const { scrollYProgress } = useScrollTrackerContext();
-  const text = "SCROLL DRIVEN ANIMATION".split("");
-  const showImage = useTransform(scrollYProgress, [0.3, 1 * 0.9], [0, 1]);
-  const rotateImage = useTransform(scrollYProgress, [0.3, 1 * 0.9], [0, 360]);
-
-  return (
-    <div className="relative flex h-full w-full flex-col items-center justify-center rounded-2xl border-2 border-fill-brand-primary bg-bg-primary-inverse p-2">
-      <motion.div
-        className="absolute top-0 h-2 w-full bg-red-500"
-        style={{ scaleX: scrollYProgress, transformOrigin: "left center" }}
-      />
-      <div className="flex flex-col gap-2">
-        <div className="flex flex-row gap-0.5">
-          {text.map((char, index) => (
-            <AnimatedText
-              key={index}
-              motionValue={scrollYProgress}
-              offsetIntro={[
-                ((index + 1) / text.length) * 0.3,
-                ((index + 1) / text.length) * 0.5,
-                ((index + 1) / text.length) * 0.9,
-              ]}
-              text={char}
-            />
-          ))}
-        </div>
-        <motion.img
-          alt="scroll-tracker-showcase"
-          className="mx-auto size-40 object-contain"
-          src="/img/good-emoji.png"
-          style={{ opacity: showImage, rotate: rotateImage }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const ScrollTrackerShowcase = () => {
-  return (
-    <div className="w-full">
-      <Text className="mb-4">Scroll Tracker</Text>
-      <ScrollTrackerProvider height={200} offset={["0 0", "1 1"]}>
-        <ScrollSection />
-      </ScrollTrackerProvider>
-    </div>
-  );
-};