Skip to content

Commit

Permalink
refactor && add vitejs support
Browse files Browse the repository at this point in the history
  • Loading branch information
Kamona-WD committed Jul 12, 2022
1 parent 5488120 commit ed3c9e0
Show file tree
Hide file tree
Showing 46 changed files with 1,119 additions and 358 deletions.
26 changes: 12 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# K UI Jetstream starter
# K UI Laravel Jetstream

Different UI for [larave/jetstream](https://github.com/laravel/jetstream).

Expand All @@ -10,12 +10,11 @@ Different UI for [larave/jetstream](https://github.com/laravel/jetstream).
#### [Breeze Version](https://github.com/Kamona-WD/kui-laravel-breeze)
<!-- #### [Fortify Version](https://github.com/Kamona-WD/kui-laravel-fortify) -->

#### Note

We recommend installing this package on a project that you are starting from scratch.
> We recommend installing this package on a project that you are starting from scratch.
#### Usage

> NOTE: It doesn't matter if you use `vitejs` or `laravel-mix`, it will work in both cases.
1. Fresh install Laravel >= 8.0 and `cd` to your app.
2. Install laravel/jetstream

Expand All @@ -34,7 +33,8 @@ composer require kamona/kui-laravel-jetstream --dev

# after finish run this command

php artisan kui-jetstream:replace livewire
# This package will detect if your project use vitejs or not by check if vite.config.js exist or not.
php artisan kui-jetstream:replace livewire --teams
# available stacks (livewire,inertia).
# So if you run `php artisan jetstream:install inertia` you can run `php artisan kui-jetstream:replace inertia`

Expand All @@ -44,24 +44,22 @@ npm install && npm run dev # or yarn && yarn dev

4. Configure your database.
5. Run `php artisan migrate`.
6. `npm install && npm run dev`
7. `php artisan serve`
6. `php artisan serve`.

> Do not forget to change `APP_URL` in `.emv` file and run `php artisan storage:link` if you want to enable `manageProfilePicture` feature.
> Do not forget to change `APP_URL` in `.env` file and run `php artisan storage:link` if you want to enable `manageProfilePicture` feature.
#### Navigation

You will found sidebar links in:

- livewirw: `resources/views/components/sidebar/content.blade.php`.
- livewire: `resources/views/components/sidebar/content.blade.php`.
- inertia: `resources/js/Components/Sidebar/SidebarContent.vue`

#### Screens

| | |
| ----------------------------------- | ---------------------------------- |
| ![Shocase 1](screens/r-light.PNG) | ![Shocase 7](screens/l-dark.PNG) |
| ![Shocase 2](screens/p-light.PNG) | ![Shocase 8](screens/p-dark.PNG) |
| ![Shocase 2](screens/d-light.PNG) | ![Shocase 8](screens/d-dark.PNG) |
| ![Shocase 2](screens/t-light.PNG) | ![Shocase 8](screens/t-dark.PNG) |
| ![Shocase 2](screens/api-light.PNG) | ![Shocase 8](screens/api-dark.PNG) |
| ![Shocase 1](screens/r-light.png) | ![Shocase 2](screens/l-dark.png) |
| ![Shocase 3](screens/d-light.png) | ![Shocase 4](screens/d-dark.png) |
| ![Shocase 5](screens/t-light.png) | ![Shocase 6](screens/t-dark.png) |
| ![Shocase 7](screens/api-light.png) | ![Shocase 8](screens/api-dark.png) |
3 changes: 1 addition & 2 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
}
],
"require": {
"php": "^7.3|^8.0",
"laravel/jetstream": "^2.4"
"php": "^7.3|^8.0"
},
"autoload": {
"psr-4": {
Expand Down
Binary file removed screens/api-dark.PNG
Binary file not shown.
Binary file added screens/api-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed screens/api-light.PNG
Binary file not shown.
Binary file added screens/api-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed screens/d-dark.PNG
Binary file not shown.
Binary file added screens/d-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed screens/d-light.PNG
Binary file not shown.
Binary file added screens/d-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file removed screens/p-dark.PNG
Binary file not shown.
Binary file removed screens/p-light.PNG
Binary file not shown.
File renamed without changes
Binary file removed screens/t-dark.PNG
Binary file not shown.
Binary file added screens/t-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed screens/t-light.PNG
Binary file not shown.
Binary file added screens/t-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 18 additions & 8 deletions src/Console/ReplaceCommand.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ class ReplaceCommand extends Command
*/
protected $signature = 'kui-jetstream:replace {stack : The development stack that should be replaced (livewire,inertia)}
{--composer=global : Absolute path to the Composer binary which should be used to install packages}
{--vite : Vitejs}';
{--vite : Vitejs}
{--teams : Indicates if team support should be replaced}';

/**
* The console command description.
Expand Down Expand Up @@ -66,9 +67,9 @@ public function replaceInertia()
$this->updateNodePackages(function ($packages) {
$extraPackages = [
'@heroicons/vue' => '^1.0.4',
'@headlessui/vue' => '^1.4.3',
// '@headlessui/vue' => '^1.4.3',
'@vueuse/core' => '^6.5.3',
'perfect-scrollbar' => '^1.5.2',
'perfect-scrollbar' => '^1.5.5',
'vue-toastification' => '^2.0.0-rc.1'
] + $packages;

Expand Down Expand Up @@ -110,6 +111,11 @@ public function replaceInertia()
copy(__DIR__ . '/../../stubs/inertia/js/app.vite.js', resource_path('js/app.js'));
copy(__DIR__ . '/../../stubs/common/postcss.config.js', base_path('postcss.config.js'));
}

if($this->option('teams')) {
(new Filesystem)->ensureDirectoryExists(resource_path('js/Pages/Teams'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia/js/Teams', resource_path('js/Pages/Teams'));
}

$this->info('Jetstream ui scaffolding replaced successfully.');
$this->comment('Please execute the "npm install && npm run dev" command to build your assets.');
Expand All @@ -121,7 +127,7 @@ public function replaceLivewire()
$this->updateNodePackages(function ($packages) {
return [
'@alpinejs/collapse' => '^3.4.2',
'perfect-scrollbar' => '^1.5.2'
'perfect-scrollbar' => '^1.5.5'
] + $packages;
});

Expand All @@ -131,19 +137,16 @@ public function replaceLivewire()
(new Filesystem)->ensureDirectoryExists(resource_path('views/components'));
(new Filesystem)->ensureDirectoryExists(resource_path('views/layouts'));
(new Filesystem)->ensureDirectoryExists(resource_path('views/profile'));
(new Filesystem)->ensureDirectoryExists(resource_path('views/teams'));

(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/api', resource_path('views/api'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/auth', resource_path('views/auth'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/components', resource_path('views/components'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/profile', resource_path('views/profile'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/teams', resource_path('views/teams'));

copy(__DIR__ . '/../../stubs/livewire/views/dashboard.blade.php', resource_path('views/dashboard.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/navigation-menu.blade.php', resource_path('views/navigation-menu.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/policy.blade.php', resource_path('views/policy.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/terms.blade.php', resource_path('views/terms.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/welcome.blade.php', resource_path('views/welcome.blade.php'));

// Assets
copy(__DIR__ . '/../../stubs/livewire/tailwind.config.js', base_path('tailwind.config.js'));
Expand All @@ -152,16 +155,23 @@ public function replaceLivewire()
if(!$this->isVite) {
copy(__DIR__ . '/../../stubs/livewire/views/layouts/app.mix.blade.php', resource_path('views/layouts/app.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/layouts/guest.mix.blade.php', resource_path('views/layouts/guest.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/welcome.mix.blade.php', resource_path('views/welcome.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/webpack.mix.js', base_path('webpack.mix.js'));
copy(__DIR__ . '/../../stubs/livewire/js/app.mix.js', resource_path('js/app.js'));
} else {
copy(__DIR__ . '/../../stubs/livewire/views/layouts/app.vite.blade.php', resource_path('views/layouts/app.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/views/layouts/guest.vite.blade.php', resource_path('views/layouts/guest.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/vite.config.js', base_path('webpack.mix.js'));
copy(__DIR__ . '/../../stubs/livewire/views/welcome.vite.blade.php', resource_path('views/welcome.blade.php'));
copy(__DIR__ . '/../../stubs/livewire/vite.config.js', base_path('vite.config.js'));
copy(__DIR__ . '/../../stubs/livewire/js/app.vite.js', resource_path('js/app.js'));
copy(__DIR__ . '/../../stubs/common/postcss.config.js', base_path('postcss.config.js'));
}

if($this->option('teams')) {
(new Filesystem)->ensureDirectoryExists(resource_path('views/teams'));
(new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/teams', resource_path('views/teams'));
}

// Icons
$this->requireComposerPackages('blade-ui-kit/blade-heroicons:^1.2');

Expand Down
16 changes: 16 additions & 0 deletions stubs/inertia/js/Teams/Create.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<AppLayout title="Create Team">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight dark:text-gray-200">
Create Team
</h2>
</template>

<CreateTeamForm />
</AppLayout>
</template>

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue'
</script>
64 changes: 64 additions & 0 deletions stubs/inertia/js/Teams/Partials/CreateTeamForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<FormSection @submitted="createTeam">
<template #title>
Team Details
</template>

<template #description>
Create a new team to collaborate with others on projects.
</template>

<template #form>
<div class="col-span-6">
<Label value="Team Owner" />

<div class="flex items-center mt-2">
<img class="object-cover w-12 h-12 rounded-full" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">

<div class="ml-4 leading-tight">
<div>{{ $page.props.user.name }}</div>
<div class="text-sm text-gray-700">{{ $page.props.user.email }}</div>
</div>
</div>
</div>

<div class="col-span-6 sm:col-span-4">
<Label for="name" value="Team Name" />
<Input id="name" type="text" class="block w-full mt-1" v-model="form.name" autofocus />
<InputError :message="form.errors.name" class="mt-2" />
</div>
</template>

<template #actions>
<Button :disabled="form.processing">
Create
</Button>
</template>
</FormSection>
</template>

<script setup>
import { useForm } from '@inertiajs/inertia-vue3'
import Button from '@/Components/Button.vue'
import FormSection from '@/Components/FormSection.vue'
import Input from '@/Components/Input.vue'
import InputError from '@/Components/InputError.vue'
import Label from '@/Components/Label.vue'
import { successToast } from '@/Toast'
const form = useForm({
name: '',
})
const createTeam = () => {
form.post(route('teams.store'), {
errorBag: 'createTeam',
preserveScroll: true,
onSuccess: () => {
successToast({
text: 'Team created.'
})
}
})
}
</script>
69 changes: 69 additions & 0 deletions stubs/inertia/js/Teams/Partials/DeleteTeamForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<ActionSection>
<template #title>
Delete Team
</template>

<template #description>
Permanently delete this team.
</template>

<template #content>
<div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.
</div>

<div class="mt-5">
<Button variant="danger" @click="confirmTeamDeletion">
Delete Team
</Button>
</div>

<!-- Delete Team Confirmation Modal -->
<ConfirmationModal :show="confirmingTeamDeletion" @close="confirmingTeamDeletion = false">
<template #title>
Delete Team
</template>

<template #content>
Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.
</template>

<template #footer>
<Button variant="info" @click="confirmingTeamDeletion = false">
Cancel
</Button>

<Button variant="danger" class="ml-2" @click="deleteTeam" :disabled="form.processing">
Delete Team
</Button>
</template>
</ConfirmationModal>
</template>
</ActionSection>
</template>

<script setup>
import { ref } from 'vue'
import { useForm } from '@inertiajs/inertia-vue3'
import ActionSection from '@/Components/ActionSection.vue'
import ConfirmationModal from '@/Components/ConfirmationModal.vue'
import Button from '@/Components/Button.vue'
const props = defineProps({
team: Object,
})
const confirmingTeamDeletion = ref(false)
const form = useForm()
const confirmTeamDeletion = () => {
confirmingTeamDeletion.value = true
}
const deleteTeam = () => {
form.delete(route('teams.destroy', props.team), {
errorBag: 'deleteTeam',
})
}
</script>
Loading

0 comments on commit ed3c9e0

Please sign in to comment.