Feat: Installs frontend components with command.

chikondikamwendo · chikondikamwendo · commit 924001a39e92 · 2025-08-04T10:11:23.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -30,4 +30,5 @@ phpstan.neon
 testbench.yaml
 /docs
 /coverage
-/workbench
+/workbench
+/tests/Fixtures/Storage
diff --git a/resources/js/components/infinite-scroll.tsx b/resources/js/components/infinite-scroll.tsx
@@ -0,0 +1,106 @@
+import { Deferred, router, usePage } from '@inertiajs/react';
+import { useEffect, useRef, useState } from 'react';
+
+interface InfiniteScrollProps {
+    children: React.ReactNode;
+    data: string;
+    whileLoading?: React.ReactNode;
+    whileNoMoreData?: React.ReactNode;
+}
+
+type PageProps = {
+    type: 'cursor' | 'paged';
+    perPage: number;
+    hasMore: boolean;
+    cursor?: string;
+    page?: number;
+};
+
+type Payload = {
+    perPage: number;
+    cursor?: string;
+    page?: number;
+};
+
+/**
+ * Infinite scroll component.
+ *
+ * @param children - The children to render.
+ * @param data - The data to load.
+ * @param whileLoading - The component to render while loading.
+ * @param whileNoMoreData - The component to render when there is no more data.
+ */
+function InfiniteScroll({ children, data, whileLoading, whileNoMoreData }: InfiniteScrollProps) {
+    const page = usePage<PageProps>().props;
+    const props: string[] = [data, 'type', 'perPage', 'hasMore'];
+    const payload: Payload = { perPage: page.perPage };
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const loadData = () => {
+        if (page.type === 'cursor') {
+            props.push('cursor');
+            payload.cursor = page.cursor;
+        } else if (page.type === 'paged') {
+            props.push('page');
+            payload.page = page.page! + 1;
+        }
+
+        router.reload({
+            only: props,
+            data: payload,
+            preserveUrl: true,
+            onStart: () => setLoading(true),
+            onFinish: () => setLoading(false),
+            onError: () => setLoading(false),
+        });
+    };
+
+    return (
+        <>
+            {children}
+            <Deferred data={data} fallback={<>{whileLoading || <p className="text-center text-muted-foreground">Loading...</p>}</>}>
+                {loading ? (
+                    <>{whileLoading || <p className="text-center text-muted-foreground">Loading...</p>}</>
+                ) : page.hasMore ? (
+                    <WhenVisible onVisible={loadData} />
+                ) : (
+                    <>{whileNoMoreData || <p className="text-center text-muted-foreground">No more data</p>}</>
+                )}
+            </Deferred>
+        </>
+    );
+}
+
+/**
+ * When visible component.
+ *
+ * @param onVisible - The callback to call when the component is visible.
+ */
+function WhenVisible({ onVisible }: { onVisible: () => void }) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting) {
+                    onVisible();
+                }
+            },
+            { threshold: 1 },
+        );
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, onVisible]);
+
+    return <div ref={ref} />;
+}
+
+export { InfiniteScroll };
diff --git a/src/Console/Commands/InstallCommand.php b/src/Console/Commands/InstallCommand.php
@@ -5,6 +5,7 @@
 namespace Codelabmw\InfiniteScroll\Console\Commands;
 
 use Codelabmw\InfiniteScroll\Contracts\Stack;
+use Codelabmw\InfiniteScroll\Support\FileSystem;
 use Codelabmw\InfiniteScroll\SupportedStacks;
 use Illuminate\Console\Command;
 use Illuminate\Support\Collection;
@@ -63,13 +64,14 @@ public function handle(): ?int
         /** @var Stack */
         $stack = App::make((string) $this->supportedStacks->get($stack));
 
+        // @phpstan-ignore-next-line
         $installationPath = text(
             label: 'Where do you want to install components?',
             placeholder: $stack->getDefaultInstallationPath(),
-            required: true,
-        );
+            required: false,
+        ) ?? $stack->getDefaultInstallationPath();
 
-        $error = spin(fn (): ?string => $this->install($stack->getStubs()), 'Installing infinite scroll components for '.$stack->getLabel().' in '.$installationPath.'.');
+        $error = spin(fn (): ?string => $this->install($stack->getStubs(), $installationPath), 'Installing infinite scroll components for '.$stack->getLabel().' in '.$installationPath.'.');
 
         if ($error) {
             error('Error occurred while installing components. '.$error);
@@ -89,21 +91,38 @@ public function handle(): ?int
      *
      * @param  Collection<int, string>  $stubs
      */
-    private function install(Collection $stubs): ?string
+    private function install(Collection $stubs, string $destination): ?string
     {
         if ($stubs->isEmpty()) {
             return 'Installation files were not found.';
         }
 
         $error = null;
+
         $stubs->each(function (string $file) use (&$error): void {
-            if (! file_exists($file)) {
+            if (! FileSystem::exists($file)) {
                 $error = 'The file: '.$file.' does not exists.';
 
                 return;
             }
         });
 
-        return $error;
+        if ($error !== null) {
+            return $error;
+        }
+
+        FileSystem::ensureDirectoryExists($destination);
+
+        $stubs->each(function (string $file) use ($destination): void {
+            $destinationFile = $destination.'/'.basename($file);
+
+            if (FileSystem::exists($destinationFile)) {
+                return;
+            }
+
+            FileSystem::copy($file, $destinationFile);
+        });
+
+        return null;
     }
 }
diff --git a/src/Stacks/React.php b/src/Stacks/React.php
@@ -5,6 +5,7 @@
 namespace Codelabmw\InfiniteScroll\Stacks;
 
 use Codelabmw\InfiniteScroll\Contracts\Stack;
+use Codelabmw\InfiniteScroll\Support\FileSystem;
 use Illuminate\Support\Collection;
 
 final class React implements Stack
@@ -32,6 +33,8 @@ public function getDefaultInstallationPath(): string
      */
     public function getStubs(): Collection
     {
-        return Collection::make();
+        return Collection::make([
+            FileSystem::stubs('components/react/ts/infinite-scroll.tsx'),
+        ]);
     }
 }
diff --git a/src/Support/FileSystem.php b/src/Support/FileSystem.php
@@ -0,0 +1,68 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Codelabmw\InfiniteScroll\Support;
+
+final class FileSystem
+{
+    /**
+     * Checks if a file or directory exists.
+     */
+    public static function exists(string $path): bool
+    {
+        return file_exists($path);
+    }
+
+    /**
+     * Deletes a file.
+     */
+    public static function delete(string $path): bool
+    {
+        return unlink($path);
+    }
+
+    /**
+     * Ensures a directory exists.
+     */
+    public static function ensureDirectoryExists(string $path): bool
+    {
+        if (! self::exists($path)) {
+            mkdir($path, 0777, true);
+        }
+
+        return true;
+    }
+
+    /**
+     * Copies a file.
+     */
+    public static function copy(string $source, string $destination): bool
+    {
+        return copy($source, $destination);
+    }
+
+    /**
+     * Returns the path to the stubs directory.
+     */
+    public static function stubs(?string $path = null): string
+    {
+        if ($path === null) {
+            return __DIR__.'/../../stubs';
+        }
+
+        return __DIR__.'/../../stubs/'.$path;
+    }
+
+    /**
+     * Returns the path to the tests directory.
+     */
+    public static function tests(?string $path = null): string
+    {
+        if ($path === null) {
+            return __DIR__.'/../../tests';
+        }
+
+        return __DIR__.'/../../tests/'.$path;
+    }
+}
diff --git a/stubs/components/react/ts/infinite-scroll.tsx b/stubs/components/react/ts/infinite-scroll.tsx
@@ -0,0 +1,106 @@
+import { Deferred, router, usePage } from '@inertiajs/react';
+import { useEffect, useRef, useState } from 'react';
+
+interface InfiniteScrollProps {
+    children: React.ReactNode;
+    data: string;
+    whileLoading?: React.ReactNode;
+    whileNoMoreData?: React.ReactNode;
+}
+
+type PageProps = {
+    type: 'cursor' | 'paged';
+    perPage: number;
+    hasMore: boolean;
+    cursor?: string;
+    page?: number;
+};
+
+type Payload = {
+    perPage: number;
+    cursor?: string;
+    page?: number;
+};
+
+/**
+ * Infinite scroll component.
+ *
+ * @param children - The children to render.
+ * @param data - The data to load.
+ * @param whileLoading - The component to render while loading.
+ * @param whileNoMoreData - The component to render when there is no more data.
+ */
+function InfiniteScroll({ children, data, whileLoading, whileNoMoreData }: InfiniteScrollProps) {
+    const page = usePage<PageProps>().props;
+    const props: string[] = [data, 'type', 'perPage', 'hasMore'];
+    const payload: Payload = { perPage: page.perPage };
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const loadData = () => {
+        if (page.type === 'cursor') {
+            props.push('cursor');
+            payload.cursor = page.cursor;
+        } else if (page.type === 'paged') {
+            props.push('page');
+            payload.page = page.page! + 1;
+        }
+
+        router.reload({
+            only: props,
+            data: payload,
+            preserveUrl: true,
+            onStart: () => setLoading(true),
+            onFinish: () => setLoading(false),
+            onError: () => setLoading(false),
+        });
+    };
+
+    return (
+        <>
+            {children}
+            <Deferred data={data} fallback={<>{whileLoading || <p className="text-center text-muted-foreground">Loading...</p>}</>}>
+                {loading ? (
+                    <>{whileLoading || <p className="text-center text-muted-foreground">Loading...</p>}</>
+                ) : page.hasMore ? (
+                    <WhenVisible onVisible={loadData} />
+                ) : (
+                    <>{whileNoMoreData || <p className="text-center text-muted-foreground">No more data</p>}</>
+                )}
+            </Deferred>
+        </>
+    );
+}
+
+/**
+ * When visible component.
+ *
+ * @param onVisible - The callback to call when the component is visible.
+ */
+function WhenVisible({ onVisible }: { onVisible: () => void }) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting) {
+                    onVisible();
+                }
+            },
+            { threshold: 1 },
+        );
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, onVisible]);
+
+    return <div ref={ref} />;
+}
+
+export { InfiniteScroll };
diff --git a/tests/Feature/Console/Commands/InstallCommandTest.php b/tests/Feature/Console/Commands/InstallCommandTest.php
diff --git a/tests/Unit/Support/FileSystemTest.php b/tests/Unit/Support/FileSystemTest.php

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`namespace Codelabmw\InfiniteScroll\Stacks;`
`6`	`6`
`7`	`7`	`use Codelabmw\InfiniteScroll\Contracts\Stack;`
	`8`	`+use Codelabmw\InfiniteScroll\Support\FileSystem;`
`8`	`9`	`use Illuminate\Support\Collection;`
`9`	`10`
`10`	`11`	`final class React implements Stack`
`@@ -32,6 +33,8 @@ public function getDefaultInstallationPath(): string`
`32`	`33`	`*/`
`33`	`34`	`public function getStubs(): Collection`
`34`	`35`	`{`
`35`		`- return Collection::make();`
	`36`	`+ return Collection::make([`
	`37`	`+ FileSystem::stubs('components/react/ts/infinite-scroll.tsx'),`
	`38`	`+ ]);`
`36`	`39`	`}`
`37`	`40`	`}`