Skip to content

Commit 4384c34

Browse files
committed
guidelines: add initial core folio and volt guidelines
1 parent 225fd43 commit 4384c34

File tree

2 files changed

+176
-0
lines changed

2 files changed

+176
-0
lines changed

.ai/folio/core.blade.php

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
- Laravel Folio is a file based router. With Laravel Folio, generating a route becomes as effortless as creating a Blade template within the correct directory.
3+
i.e. Pages are in `resources/views/pages/`. The file structure determines routes:
4+
- `pages/index.blade.php` → `/`
5+
- `pages/profile/index.blade.php` → `/profile`
6+
- `pages/auth/login.blade.php` → `/auth/login`
7+
- List available Folio routes using `artisan folio:list` or using Boost's `list-routes` tool.
8+
9+
### New pages & routes
10+
- Always create new `folio` pages and routes using `artisan folio:page [name]` following existing naming conventions.
11+
12+
@verbatim
13+
<code-snippet name="Example folio:page commands for automatic routing" lang="shell">
14+
php artisan folio:page 'products'
15+
# Creates: resources/views/pages/products.blade.php → /products
16+
17+
php artisan folio:page 'products/[id]'
18+
# Creates: resources/views/pages/products/[id].blade.php → /products/{id}
19+
</code-snippet>
20+
@endverbatim
21+
22+
- Add a 'name' to each new Folio page at the very top of the file, so it has a named route available for other parts of the codebase to use.
23+
@verbatim
24+
<code-snippet name="Adding named route to Folio page" lang="php">
25+
use function Laravel\Folio\name;
26+
27+
name('products.index');
28+
</code-snippet>
29+
@endverbatim
30+
31+
32+
### Support & Docs
33+
- Folio supports: middleware, serving pages from multiple paths, subdomain routing, named routes, nested routes, index routes, route parameters, and route model binding.
34+
- If available, use Boost's `search-docs` tool to use Folio to its full potential and help the user effectively.
35+
36+
@verbatim
37+
<code-snippet name="Folio middleware example" lang="php">
38+
use function Laravel\Folio\{name, middleware};
39+
40+
name('admin.products');
41+
middleware(['auth', 'verified', 'can:manage-products']);
42+
?>
43+
</code-snippet>
44+
@endverbatim

.ai/volt/core.blade.php

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
- This project uses Livewire Volt for interactivity within its pages. New pages requiring interactivity must also use Livewire Volt. There is documentation available for it.
2+
- Volt is an elegantly crafted **functional** API for Livewire that supports single-file components, allowing a component's PHP logic and Blade templates to coexist in the same file
3+
- **Single-File Components**: Livewire Volt allows PHP logic and Blade templates in one file. Components use the `@volt` directive.
4+
- You must check existing Volt components to find out if they're functional or class based. If you can't detect that, ask the user which they prefer before writing a Volt component.
5+
6+
7+
#### Volt Functional Component Example
8+
@verbatim
9+
<code-snippet name="Volt Functional Component Example" lang="php">
10+
@volt
11+
<?php
12+
use function Livewire\Volt\{state, computed};
13+
14+
state(['count' => 0]);
15+
16+
$increment = fn () => $this->count++;
17+
$decrement = fn () => $this->count--;
18+
19+
$double = computed(fn () => $this->count * 2);
20+
?>
21+
22+
<div>
23+
<h1>Count: {{ $count }}</h1>
24+
<h2>Double: {{ $this->double }}</h2>
25+
<button wire:click="increment">+</button>
26+
<button wire:click="decrement">-</button>
27+
</div>
28+
@endvolt
29+
</code-snippet>
30+
@endverbatim
31+
32+
### Volt Class based Component Example
33+
To get started, define an anonymous class that extends Livewire\Volt\Component. Within the class, you may utilize all of the features of Livewire using traditional Livewire syntax:
34+
35+
@verbatim
36+
<code-snippet name="Volt Class-based Volt Component Example" lang="php">
37+
use Livewire\Volt\Component;
38+
39+
new class extends Component {
40+
public $count = 0;
41+
42+
public function increment()
43+
{
44+
$this->count++;
45+
}
46+
} ?>
47+
48+
<div>
49+
<h1>{{ $count }}</h1>
50+
<button wire:click="increment">+</button>
51+
</div>
52+
</code-snippet>
53+
@endverbatim
54+
55+
#### Testing Volt & Volt Components
56+
- Use the existing location if tests already exist, otherwise fallback to `tests/Feature/Volt`
57+
58+
<code-snippet name="Livewire Test Example" lang="php">
59+
use Livewire\Volt\Volt;
60+
61+
test('counter increments', function () {
62+
Volt::test('counter')
63+
->assertSee('Count: 0')
64+
->call('increment')
65+
->assertSee('Count: 1');
66+
});
67+
</code-snippet>
68+
69+
@verbatim
70+
<code-snippet name="Volt component test using Pest" lang="php">
71+
declare(strict_types=1);
72+
73+
use App\Models\{User, Product};
74+
use Livewire\Volt\Volt;
75+
76+
test('product form creates product', function () {
77+
$user = User::factory()->create();
78+
79+
Volt::test('pages.products.create')
80+
->actingAs($user)
81+
->set('form.name', 'Test Product')
82+
->set('form.description', 'Test Description')
83+
->set('form.price', 99.99)
84+
->call('create')
85+
->assertHasNoErrors();
86+
87+
expect(Product::where('name', 'Test Product')->exists())->toBeTrue();
88+
});
89+
</code-snippet>
90+
@endverbatim
91+
92+
### Common Patterns
93+
94+
@verbatim
95+
<code-snippet name="CRUD with Volt" lang="php">
96+
@volt
97+
use App\Models\Product;
98+
use function Livewire\Volt\{state, computed};
99+
100+
state(['editing' => null, 'search' => '']);
101+
102+
$products = computed(fn() => Product::when($this->search,
103+
fn($q) => $q->where('name', 'like', "%{$this->search}%")
104+
)->get());
105+
106+
$edit = fn(Product $product) => $this->editing = $product->id;
107+
$delete = fn(Product $product) => $product->delete();
108+
?>
109+
110+
<!-- UI here -->
111+
@endvolt
112+
</code-snippet>
113+
@endverbatim
114+
115+
@verbatim
116+
<code-snippet name="Real-time search with Volt" lang="php">
117+
<flux:input
118+
wire:model.live.debounce.300ms="search"
119+
placeholder="Search..."
120+
/>
121+
</code-snippet>
122+
@endverbatim
123+
124+
125+
@verbatim
126+
<code-snippet name="Loading states with Volt" lang="php">
127+
<flux:button wire:click="save" wire:loading.attr="disabled">
128+
<span wire:loading.remove>Save</span>
129+
<span wire:loading>Saving...</span>
130+
</flux:button>
131+
</code-snippet>
132+
@endverbatim

0 commit comments

Comments
 (0)