@androbinco/library-cli 0.1.0 → 0.3.0

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';

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/templates/ticker/css-ticker/css-ticker.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { Fragment, useRef } from 'react';
+
+import { cn } from '@/common/utils/classname-builder';
+
+import { useTickerClones } from '../hooks/use-ticker-clones';
+import './ticker.keyframes.css';
+
+export const TickerStatic = ({
+  direction = 'right',
+  children,
+  speed = 50,
+}: {
+  direction?: 'left' | 'right';
+  speed?: number;
+  delta?: number;
+  children: React.ReactNode;
+}) => {
+  const tickerClone = useRef<HTMLDivElement>(null);
+  const tickerCard = useRef<HTMLDivElement>(null);
+
+  const { clonesNeeded } = useTickerClones({
+    tickerCard,
+    tickerClone,
+    direction,
+    onCloneWrapper(clone) {
+      clone.classList.remove('animate-base-ticker');
+      clone.classList.remove('animate-base-ticker-left');
+    },
+  });
+
+  const baseTickerClass = cn(
+    'flex w-max flex-row',
+    direction === 'right' ? 'animate-base-ticker' : 'animate-base-ticker-left',
+  );
+  const clonedTickerClass = cn(
+    'absolute top-0 h-full w-max',
+    direction === 'right' ? 'animate-cloned-ticker' : 'animate-cloned-ticker-left',
+  );
+
+  return (
+    <div className="ticker group w-full overflow-hidden" role="group">
+      <div className="relative w-full">
+        <div
+          ref={tickerCard}
+          className={cn(baseTickerClass)}
+          style={{ '--ticker-speed': `${speed}s` } as React.CSSProperties}
+        >
+          {Array.from({ length: clonesNeeded }).map((_, index) => {
+            return <Fragment key={index}>{children}</Fragment>;
+          })}
+        </div>
+        <div
+          ref={tickerClone}
+          className={cn(clonedTickerClass)}
+          style={{ '--ticker-speed': `${speed}s` } as React.CSSProperties}
+        />
+      </div>
+    </div>
+  );
+};