Feature - Laravel React Starter Kit#79
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces support for Laravel React starter kit projects within the Vemto application. It adds comprehensive React/TypeScript code generation capabilities alongside the existing Laravel/Livewire support.
- Adds "React Starter Kit" as a new project starter kit option in the create project interface
- Implements React-specific file generation including components, pages, forms, and controllers
- Integrates React projects into the sequential generation workflow
Reviewed Changes
Copilot reviewed 46 out of 46 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| CreateProjectView.vue | Adds React option to starter kit selection and validation |
| ReactInstaller.ts | New installer service for React dependencies and packages |
| ProjectInfo.ts | Detects React projects and includes React in starter kit determination |
| ProjectCreator.ts | Handles React project creation and installs React starter kit |
| ProjectConnector.ts | Integrates React file templates into project initialization |
| Multiple React renderables | New code generators for React components, pages, controllers, and utilities |
| SequentialGenerator.ts | Adds conditional React file generation to the build process |
| Project.ts | Adds React starter kit enum and detection method |
| RenderableFile.ts | Adds TypeScript file type support for React files |
Comments suppressed due to low confidence (1)
src/main/static/templates/crud/react/controllers/Controller.vemtl:1
- The variable name mismatch: the method uses
$request->namebut the parameter is$search. It should be$request->get('search')to match the search parameter, and the query logic should search appropriate fields, not just 'id'.
<?php
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| await Main.API.executeYarnOnPath(data.completePath, "add use-debounce") | ||
|
|
||
| stateCallback("Install shadcn/ui components") | ||
| await Main.API.executeYarnOnPath(data.completePath, "yes | npx shadcn@latest add --all") |
There was a problem hiding this comment.
The command uses shell pipe syntax within a yarn command, which may not work correctly. Consider using execSync or separating the input piping from the yarn command execution.
|
|
||
| stateCallback("Running Pest tests to generate configuration files") | ||
| await Main.API.executeComposerOnPath(data.completePath, "require pestphp/pest-plugin-drift --dev") | ||
| await Main.API.executePhpOnPath(data.completePath, "echo no | ./vendor/bin/pest --drift") |
There was a problem hiding this comment.
The command uses shell pipe syntax within a PHP command execution, which may not work correctly. The pipe operation should be handled at the shell level rather than within the PHP command string.
| await Main.API.executePhpOnPath(data.completePath, "echo no | ./vendor/bin/pest --drift") | |
| await Main.API.executeShellOnPath(data.completePath, "echo no | ./vendor/bin/pest --drift") |
| <% let entityNamePlural = this.crud.model.plural %> | ||
| <% const camelCase = this.require('camelCase') %> | ||
| import { router } from '@inertiajs/react'; | ||
| import { IconDelete } from '@/components/icons/svg/actions/IconDelete'; |
There was a problem hiding this comment.
The import path references '@/components/icons/svg/actions/IconDelete' but the ActionIcons template defines IconDelete in '@/components/ActionIcons'. The import should be consistent with the available components.
| import { IconDelete } from '@/components/icons/svg/actions/IconDelete'; | |
| import { IconDelete } from '@/components/ActionIcons'; |
|
|
||
| <div className="container mx-auto max-w-6xl px-4 pt-4"> | ||
| <HeadingApp heading={'Details of <$ camelCase(entityName) $> #: ' + <$ camelCase(entityName) $>.id} description={'Show the details of <$ camelCase(entityName) $>.'} url={<$ camelCase(entityNamePlural) $>.index().url}> | ||
| {can('customers.update') && ( |
There was a problem hiding this comment.
Hardcoded permission 'customers.update' should be dynamic based on the entity. It should use the generated permission format like <$ camelCase(entityNamePlural) $>.update.
| {can('customers.update') && ( | |
| {can('<$ camelCase(entityNamePlural) $>.update') && ( |
|
Hello @slzno , thank you so much for this great PR. I made some comments, but I haven't had time to review them properly yet. As soon as possible, I'll install the PR and run it here. |
Issue: #78