Prev
18
Next

Day 18 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 18

Day 18

Tree View & Code Snippet

Recursive nested list structure and code block with copy functionality

Tree View

Structure arborescente récursive avec état déplié/replié géré par Alpine.js.

Features

  • Composant Blade récursif
  • État déplié/replié avec Alpine.js
  • Variants: fichiers, organisation
  • Lignes de connexion optionnelles
  • Animation collapse/expand

Explorateur de fichiers

  • src
    4
    • components
      3
      • V
        Button.vue
      • V
        Modal.vue
      • V
        Input.vue
    • utils
      2
      • JS
        helpers.js
      • JS
        api.js
    • V
      App.vue
    • JS
      main.js
  • public
    2
    • index.html
    • favicon.ico
  • package.json
  • README.md

Organigramme

  • JV
    Direction Générale CEO
    • TC
      Tech CTO
      • FD
        Frontend Lead Dev
      • BD
        Backend Lead Dev
      • DO
        DevOps Engineer
    • MK
      Marketing CMO
      • DM
        Digital Manager
      • CM
        Communication Manager
    • FN
      Finance CFO
      • CP
        Comptabilité Accountant

Code Snippet

Bloc de code avec numéros de ligne et fonctionnalité "Copier dans le presse-papiers".

Features

  • Copier dans le presse-papiers
  • Numéros de ligne
  • Surlignage de lignes spécifiques
  • Icônes par langage
  • Header avec nom de fichier

PHP / Laravel

P UserController.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        $users = User::paginate(15);

        return view('users.index', compact('users'));
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|unique:users',
        ]);

        return User::create($validated);
    }
}
26 lignes PHP

JavaScript

JS api.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import axios from 'axios';

const api = axios.create({
    baseURL: '/api/v1',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json',
    },
});

export const fetchUsers = async () => {
    const { data } = await api.get('/users');
    return data;
};

export const createUser = async (userData) => {
    const { data } = await api.post('/users', userData);
    return data;
};

export default api;
21 lignes JAVASCRIPT

Bash Script

$ deploy.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/bash

# Deploy script for production
echo "🚀 Starting deployment..."

# Pull latest changes
git pull origin main

# Install dependencies
composer install --no-dev --optimize-autoloader
npm ci && npm run build

# Run migrations
php artisan migrate --force

# Clear caches
php artisan config:cache
php artisan route:cache
php artisan view:cache

echo "✅ Deployment complete!"
21 lignes BASH

Usage Examples

Tree View Usage

{{-- Basic Tree View --}}
<x-ui.tree-view :items="$items" />
 
{{-- File Explorer Variant --}}
<x-ui.tree-view
    :items="$fileTree"
    variant="files"
    :show-lines="true"
/>
 
{{-- Organization Chart --}}
<x-ui.tree-view
    :items="$orgTree"
    variant="org"
    :default-expanded="true"
/>
 
{{-- Data Structure --}}
@php
$items = [
    [
        'id' => 1,
        'name' => 'Parent',
        'type' => 'folder',
        'children' => [
            [
                'id' => 2,
                'name' => 'Child 1',
                'type' => 'file',
                'icon' => 'js', // vue, ts, php...
            ],
            [
                'id' => 3,
                'name' => 'Child 2',
                'type' => 'folder',
                'children' => [...],
            ],
        ],
    ],
];
@endphp
 
{{-- Organization Structure --}}
@php
$org = [
    [
        'id' => 1,
        'name' => 'CEO',
        'role' => 'Director',
        'avatar' => 'JD',
        'children' => [...],
    ],
];
@endphp
 
{{-- Props --}}
variant: default|files|org
showLines: true|false
defaultExpanded: true|false
selectable: true|false
animated: true|false

Code Snippet Usage

{{-- Basic Code Snippet --}}
<x-ui.code-snippet
    code="console.log('Hello');"
    language="javascript"
/>
 
{{-- With Filename --}}
<x-ui.code-snippet
    :code="$code"
    language="php"
    filename="UserController.php"
/>
 
{{-- Highlight Specific Lines --}}
<x-ui.code-snippet
    :code="$code"
    language="php"
    :highlight-lines="[5, 6, 7]"
/>
 
{{-- Custom Max Height --}}
<x-ui.code-snippet
    :code="$longCode"
    language="javascript"
    max-height="300px"
/>
 
{{-- Without Line Numbers --}}
<x-ui.code-snippet
    :code="$code"
    language="bash"
    :show-line-numbers="false"
/>
 
{{-- Without Copy Button --}}
<x-ui.code-snippet
    :code="$code"
    language="json"
    :copyable="false"
/>
 
{{-- Supported Languages --}}
php, javascript, typescript,
python, bash, html, css,
json, sql, blade
 
{{-- Props --}}
code: string (required)
language: string
filename: string|null
showLineNumbers: true|false
highlightLines: array
maxHeight: string (CSS)
copyable: true|false