@androbinco/library-cli 0.2.0 → 0.3.0

package/src/templates/scroll-components/scale-gallery/components/expanding-element.tsx

@@ -0,0 +1,40 @@
+import { motion, useTransform } from 'motion/react';
+
+import { cn } from '@/common/utils/classname-builder';
+import { useScrollTrackerContext } from '../../scroll-tracker-provider';
+
+export const ExpandingElement = ({
+  scaleOffset,
+  height,
+  children,
+  widthOffset,
+  className,
+}: {
+  scaleOffset: [number, number, number];
+  widthOffset: [number, number, number];
+  height: number | string;
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  const { scrollYProgress } = useScrollTrackerContext();
+
+  const width = useTransform(scrollYProgress, scaleOffset, widthOffset);
+
+  return (
+    <div className="absolute inset-1/2 -translate-x-1/2 -translate-y-1/2" style={{ height }}>
+      <motion.div
+        className="absolute inset-1/2 flex h-full -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden"
+        style={{ width, height }}
+      >
+        <div
+          className={cn(
+            'absolute inset-1/2 h-full w-full min-w-100 -translate-x-1/2 -translate-y-1/2 object-cover',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

package/src/templates/scroll-components/scale-gallery/examples/scale-gallery-showcase.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Text } from "@/common/ui/text/text";
+
+import { ScrollTrackerProvider } from "../scroll-tracker-provider";
+import { ExpandingElement } from "../scale-gallery/components/expanding-element";
+import { useClientDimensions } from "../hooks/use-client-dimensions";
+
+export const ScaleGalleryShowcase = () => {
+  const { width, height } = useClientDimensions();
+
+  return (
+    <div className="space-y-12">
+      <div className="h-screen flex items-center justify-center bg-bg-primary">
+        <Text variant="title.4">Scale Gallery Example</Text>
+      </div>
+
+      <ScrollTrackerProvider height={500} offset={["0 0", "1 1"]}>
+        <Text className="max-lg:px-4 px-8 mb-8" variant="title.6">
+          Gallery with Scale Animation
+        </Text>
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <ExpandingElement
+            className="flex flex-col items-center justify-between gap-2"
+            height={height * 0.5}
+            scaleOffset={[0.05, 0.2, 0.4]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-1"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/34533069/pexels-photo-34533069.jpeg"
+            />
+          </ExpandingElement>
+
+          <ExpandingElement
+            className="flex items-center justify-center"
+            height={height * 0.5}
+            scaleOffset={[0.3, 0.5, 0.7]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-2"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/34712722/pexels-photo-34712722.jpeg"
+            />
+          </ExpandingElement>
+
+          <ExpandingElement
+            className="flex items-center justify-center"
+            height={height * 0.5}
+            scaleOffset={[0.5, 0.8, 0.97]}
+            widthOffset={[0, width / 2, width * 0.8]}
+          >
+            <img
+              alt="gallery-3"
+              className="h-full w-full object-cover rounded-lg"
+              src="https://images.pexels.com/photos/3833517/pexels-photo-3833517.jpeg"
+            />
+          </ExpandingElement>
+        </div>
+      </ScrollTrackerProvider>
+
+      <div className="h-screen flex items-center justify-center bg-bg-primary">
+        <Text variant="title.4">Gallery ends here</Text>
+      </div>
+    </div>
+  );
+};

package/src/templates/scroll-components/scale-gallery/scale-gallery.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { Text } from '@/common/ui/text/text';
+
+import { ScrollTrackerProvider } from '../scroll-tracker-provider';
+import { useClientDimensions } from '../hooks/use-client-dimensions';
+
+import { ExpandingElement } from './components/expanding-element';
+
+export const ScaleGallery = () => {
+  const { width, height } = useClientDimensions();
+
+  return (
+    <ScrollTrackerProvider height={500} offset={['0 0', '1 1']}>
+      <Text className="max-lg:px-4 px-8" variant="title.6">
+        Scale Gallery
+      </Text>
+      <div className='flex h-full w-full flex-col items-center justify-center'>
+        <ExpandingElement
+          className="flex flex-col items-center justify-between gap-2"
+          height={height * 0.5}
+          scaleOffset={[0.05, 0.2, 0.4]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-1"
+            className="h-full w-full object-cover"
+            src="/img/gallery/gallery-example1.jpg"
+          />
+        </ExpandingElement>
+        <ExpandingElement
+          className="flex items-center justify-center"
+          height={height * 0.5}
+          scaleOffset={[0.3, 0.5, 0.7]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-2"
+            className="h-full w-full object-cover"
+            src="https://images.pexels.com/photos/34533069/pexels-photo-34533069.jpeg"
+          />
+        </ExpandingElement>
+        <ExpandingElement
+          className="flex items-center justify-center"
+          height={height * 0.5}
+          scaleOffset={[0.5, 0.8, 0.97]}
+          widthOffset={[0, width / 2, width * 0.8]}
+        >
+          <img
+            alt="gallery-image-3"
+            className="h-full w-full object-cover"
+            src="https://images.pexels.com/photos/34712722/pexels-photo-34712722.jpeg"
+          />
+        </ExpandingElement>
+      </div>
+    </ScrollTrackerProvider>
+  );
+};

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

@@ -0,0 +1,44 @@
+'use client';
+import { motion, useTransform } from 'motion/react';
+import { ScrollTrackerProvider, useScrollTrackerContext } from './scroll-tracker-provider';
+import { Text } from '@/common/ui/text/text';
+
+const ScrollProgressBar = () => {
+  const { scrollYProgress } = useScrollTrackerContext();
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-purple-500 origin-left"
+      style={{ scaleX: scrollYProgress }}
+    />
+  );
+};
+
+const ScrollContent = () => {
+  const { scrollYProgress } = useScrollTrackerContext();
+  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0.3, 1, 0.3]);
+  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);
+
+  return (
+    <motion.div
+      className="flex flex-col items-center justify-center h-screen gap-4"
+      style={{ opacity, scale }}
+    >
+      <Text className="text-center" variant="title.6">
+        Scroll Progress: {scrollYProgress}
+      </Text>
+      <div className="w-64 h-64 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg" />
+    </motion.div>
+  );
+};
+
+export const ScrollTrackerShowcase = () => {
+  return (
+    <ScrollTrackerProvider height={500}>
+      <ScrollProgressBar />
+      <div className='flex h-full w-full flex-col items-center justify-center'>
+        <ScrollContent />
+      </div>
+    </ScrollTrackerProvider>
+  );
+};

package/src/templates/strapi-dynamic-zone/README.md

@@ -0,0 +1,157 @@
+# Strapi Dynamic Zone Renderer
+
+A type-safe, composable component for rendering Strapi Dynamic Zones in Next.js applications.
+
+## Features
+
+- **Full TypeScript support** - Leverages discriminated unions for type-safe component mapping
+- **Single source of truth** - Your Strapi types define both data shape and rendering
+- **Composable** - Mix and match components, add extra props, customize wrappers
+- **Zero dependencies** - Just React
+
+## Installation
+
+Copy the `strapi-dynamic-renderer` folder to your project (e.g., `src/lib/strapi-dynamic-renderer`).
+
+## Quick Start
+
+### 1. Define your component types
+
+```typescript
+// types/page-components.ts
+export type HeroComponent = {
+  __component: 'hero.hero';
+  id: number;
+  title: string;
+  subtitle: string;
+};
+
+export type CTAComponent = {
+  __component: 'cta.cta';
+  id: number;
+  heading: string;
+  buttonText: string;
+};
+
+// Union of all dynamic zone components
+export type PageComponent = HeroComponent | CTAComponent;
+```
+
+### 2. Create your renderers
+
+```typescript
+// renderers/page-renderers.tsx
+import type { ComponentRendererMap } from '@/lib/strapi-dynamic-renderer';
+import type { PageComponent } from '@/types/page-components';
+
+export const pageRenderers: ComponentRendererMap<PageComponent> = {
+  'hero.hero': ({ title, subtitle }) => (
+    <Hero title={title} subtitle={subtitle} />
+  ),
+  'cta.cta': ({ heading, buttonText }) => (
+    <CTA heading={heading} buttonText={buttonText} />
+  ),
+};
+```
+
+### 3. Use in your pages
+
+```tsx
+// app/page.tsx
+import { DynamicZone } from '@/lib/strapi-dynamic-renderer';
+import { pageRenderers } from '@/renderers/page-renderers';
+
+export default function Page({ data }) {
+  return (
+    <DynamicZone
+      components={data.dynamicZone}
+      renderers={pageRenderers}
+    />
+  );
+}
+```
+
+## API Reference
+
+### `DynamicZone`
+
+Renders an array of Strapi dynamic zone components.
+
+```tsx
+<DynamicZone
+  components={PageComponent[]}      // Required: Array of components
+  renderers={ComponentRendererMap}  // Required: Renderer map
+  getExtraProps={(comp, idx) => {}} // Optional: Extra props per component
+  fallback={(comp) => <div />}      // Optional: Fallback for unknown types
+  getKey={(comp, idx) => string}    // Optional: Custom key generator
+/>
+```
+
+### `createDynamicZone`
+
+Factory function to create a pre-bound DynamicZone component.
+
+```tsx
+// Create once
+export const PageZone = createDynamicZone(pageRenderers);
+
+// Use anywhere
+<PageZone components={data.Page} />
+```
+
+## Type Utilities
+
+### `ExtractComponentProps<TUnion, TKey>`
+
+Extracts props for a specific component type:
+
+```typescript
+type HeroProps = ExtractComponentProps<PageComponent, 'hero.hero'>;
+// { id: number; title: string; subtitle: string }
+```
+
+### `ComponentRendererMap<TUnion, TExtra>`
+
+Creates a type-safe renderer map:
+
+```typescript
+const renderers: ComponentRendererMap<PageComponent, { index: number }> = {
+  'hero.hero': ({ title, index }) => <Hero title={title} position={index} />,
+};
+```
+
+## Patterns
+
+### Adding extra props to all renderers
+
+```tsx
+type ExtraProps = { index: number; dataSource: string };
+
+const renderers: ComponentRendererMap<PageComponent, ExtraProps> = {
+  'hero.hero': ({ title, index, dataSource }) => (
+    <Hero title={title} position={index} source={dataSource} />
+  ),
+};
+
+<DynamicZone
+  components={data}
+  renderers={renderers}
+  getExtraProps={(_, index) => ({ index, dataSource: 'homepage' })}
+/>
+```
+
+### Development fallback
+
+```tsx
+<DynamicZone
+  components={data}
+  renderers={renderers}
+  fallback={(comp) => (
+    process.env.NODE_ENV === 'development' ? (
+      <div className="border-2 border-dashed border-red-500 p-4">
+        Missing renderer: {comp.__component}
+      </div>
+    ) : null
+  )}
+/>
+```

package/src/templates/strapi-dynamic-zone/dynamic-zone.tsx

@@ -0,0 +1,113 @@
+import { Fragment } from "react";
+import type { StrapiComponent, DynamicZoneProps } from "./types";
+
+/**
+ * Renders an array of Strapi dynamic zone components.
+ *
+ * @example
+ * ```tsx
+ * <DynamicZone
+ *   components={page.dynamicZone}
+ *   renderers={componentRenderers}
+ *   getExtraProps={(_, index) => ({ index })}
+ * />
+ * ```
+ */
+export function DynamicZone<
+  TUnion extends StrapiComponent,
+  TExtra extends object = object
+>({
+  components,
+  renderers,
+  getExtraProps,
+  fallback,
+  getKey,
+}: DynamicZoneProps<TUnion, TExtra>): React.ReactElement | null {
+  if (!components || components.length === 0) {
+    return null;
+  }
+
+  const defaultGetKey = (component: TUnion, index: number) =>
+    component.id ?? `dynamic-${index}`;
+
+  const keyGenerator = getKey ?? defaultGetKey;
+
+  const content = components.map((component, index) => {
+    const key = keyGenerator(component, index);
+    const extraProps = getExtraProps?.(component, index) as TExtra | undefined;
+    const { __component, ...componentProps } = component;
+
+    const Renderer = renderers[__component as keyof typeof renderers] as
+      | ((props: Record<string, unknown> & TExtra) => React.ReactElement | null)
+      | undefined;
+
+    if (!Renderer) {
+      if (fallback) {
+        return <Fragment key={key}>{fallback(component)}</Fragment>;
+      }
+
+      if (process.env.NODE_ENV === "development") {
+        console.warn(
+          `[DynamicZone] No renderer found for component: "${__component}"`,
+          component
+        );
+      }
+
+      return null;
+    }
+
+    const props = {
+      ...componentProps,
+      ...extraProps,
+    } as Parameters<typeof Renderer>[0];
+
+    return (
+      <Fragment key={key}>
+        <Renderer {...props} />
+      </Fragment>
+    );
+  });
+
+  return <>{content}</>;
+}
+
+/**
+ * Creates a type-safe DynamicZone component bound to specific renderers.
+ * Useful when you want to pre-configure renderers and reuse across the app.
+ *
+ * @example
+ * ```tsx
+ * // In your renderers file
+ * export const PageZone = createDynamicZone(pageRenderers);
+ *
+ * // In your page
+ * <PageZone
+ *   components={data.Page}
+ *   getExtraProps={(_, i) => ({ index: i })}
+ * />
+ * ```
+ */
+export function createDynamicZone<
+  TUnion extends StrapiComponent,
+  TExtra extends object = object
+>(
+  renderers: DynamicZoneProps<TUnion, TExtra>["renderers"],
+  defaultFallback?: DynamicZoneProps<TUnion, TExtra>["fallback"]
+) {
+  return function BoundDynamicZone({
+    components,
+    getExtraProps,
+    fallback = defaultFallback,
+    getKey,
+  }: Omit<DynamicZoneProps<TUnion, TExtra>, "renderers">) {
+    return (
+      <DynamicZone
+        components={components}
+        renderers={renderers}
+        getExtraProps={getExtraProps}
+        fallback={fallback}
+        getKey={getKey}
+      />
+    );
+  };
+}

package/src/templates/strapi-dynamic-zone/examples/page.tsx

@@ -0,0 +1,53 @@
+/**
+ * Example: Using DynamicZone in a Next.js page
+ */
+
+import { DynamicZone } from "../dynamic-zone";
+import { pageRenderers } from "./renderers";
+import type { PageComponent } from "./types";
+
+// Example page data type
+type PageData = {
+  title: string;
+  dynamicZone: PageComponent[];
+};
+
+/**
+ * Alternative: Create a pre-bound component in renderers.tsx for cleaner usage
+ */
+
+// Then use it more concisely:
+import { PageDynamicZone } from "./renderers";
+
+export function ExamplePageAlt({ data }: { data: PageData }) {
+  return (
+    <main>
+      <h1>{data.title}</h1>
+
+      <PageDynamicZone
+        components={data.dynamicZone}
+        getExtraProps={(_, index) => ({ index })}
+      />
+    </main>
+  );
+}
+
+/**
+ * With custom fallback for unknown components
+ */
+export function ExamplePageWithFallback({ data }: { data: PageData }) {
+  return (
+    <main>
+      <DynamicZone
+        components={data.dynamicZone}
+        renderers={pageRenderers}
+        getExtraProps={(_, index) => ({ index })}
+        fallback={(component) => (
+          <div style={{ padding: 16, background: "#fee", borderRadius: 8 }}>
+            Unknown component: {component.__component}
+          </div>
+        )}
+      />
+    </main>
+  );
+}

package/src/templates/strapi-dynamic-zone/examples/renderers.tsx

@@ -0,0 +1,74 @@
+/**
+ * Example: Define your component renderers here.
+ * Each key matches a __component value from your Strapi types.
+ */
+
+import type { ComponentRendererMap } from "../types";
+import type { PageComponent, PageExtraProps } from "./types";
+
+// Example placeholder components - replace with your actual components
+const Hero = ({ title, subtitle }: { title: string; subtitle: string }) => (
+  <section>
+    <h1>{title}</h1>
+    <p>{subtitle}</p>
+  </section>
+);
+
+const CTA = ({
+  heading,
+  buttonText,
+  buttonLink,
+}: {
+  heading: string;
+  buttonText: string;
+  buttonLink: string;
+}) => (
+  <section>
+    <h2>{heading}</h2>
+    <a href={buttonLink}>{buttonText}</a>
+  </section>
+);
+
+const FeatureGrid = ({
+  title,
+  features,
+}: {
+  title: string;
+  features: Array<{ id: number; title: string; description: string }>;
+}) => (
+  <section>
+    <h2>{title}</h2>
+    <div>
+      {features.map((f) => (
+        <div key={f.id}>
+          <h3>{f.title}</h3>
+          <p>{f.description}</p>
+        </div>
+      ))}
+    </div>
+  </section>
+);
+
+/**
+ * Component renderer map - fully type-safe!
+ * TypeScript will error if:
+ * - You miss a component type
+ * - You use wrong props for a component
+ * - You add a component that doesn't exist in the union
+ */
+const pageRenderers: ComponentRendererMap<PageComponent, PageExtraProps> = {
+  "hero.hero": ({ title, subtitle, index }) => (
+    <Hero title={title} subtitle={subtitle} key={index} />
+  ),
+
+  "cta.cta": ({ heading, buttonText, buttonLink }) => (
+    <CTA heading={heading} buttonText={buttonText} buttonLink={buttonLink} />
+  ),
+
+  "features.grid": ({ title, features }) => (
+    <FeatureGrid title={title} features={features} />
+  ),
+};
+// Create a pre-bound component for cleaner usage
+import { createDynamicZone } from "../dynamic-zone";
+export const PageDynamicZone = createDynamicZone(pageRenderers);

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

@@ -0,0 +1,41 @@
+/**
+ * Example: Define your Strapi component types here.
+ * This is your single source of truth for component shapes.
+ */
+
+// Example component types - replace with your actual Strapi types
+export type HeroComponent = {
+  __component: 'hero.hero';
+  id: number;
+  title: string;
+  subtitle: string;
+  backgroundImage: { url: string };
+};
+
+export type CTAComponent = {
+  __component: 'cta.cta';
+  id: number;
+  heading: string;
+  buttonText: string;
+  buttonLink: string;
+};
+
+export type FeatureGridComponent = {
+  __component: 'features.grid';
+  id: number;
+  title: string;
+  features: Array<{
+    id: number;
+    title: string;
+    description: string;
+    icon: string;
+  }>;
+};
+
+// Union of all possible dynamic zone components
+export type PageComponent = HeroComponent | CTAComponent | FeatureGridComponent;
+
+// Extra props that get passed to every renderer
+export type PageExtraProps = {
+  index: number;
+};

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

@@ -0,0 +1,11 @@
+// Types
+export type {
+  StrapiComponent,
+  ExtractComponentProps,
+  ComponentRendererMap,
+  ComponentKeys,
+  DynamicZoneProps,
+} from './types';
+
+// Components
+export { DynamicZone, createDynamicZone } from './dynamic-zone';