Code Display

# Brok UI: Code Block Command (`code-block-command`)

A tabbed CLI command block that switches between npm, pnpm, yarn and bun, remembers the choice, and copies to the clipboard.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add code-block-command
```

## Usage

```blade
<div class="flex w-full flex-col gap-4">
    <x-ui.code-block-command npm="npm install zod" />
    <x-ui.code-block-command npm="npx shadcn@latest add button" :show="['npm', 'pnpm', 'bun']" />
</div>
```

## Props

- `npm` (mixed|null, default `null`)
- `pnpm` (mixed|null, default `null`)
- `yarn` (mixed|null, default `null`)
- `bun` (mixed|null, default `null`)
- `show` (mixed|null, default `null`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Documenting an install or run command that differs per package manager.
- Letting a reader stay on their own package manager across a whole docs page.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Showing a single command with no per-manager variant; code-block or code-line is enough.
- Switching between unrelated snippets; this control assumes the tabs say the same thing.

## Anti-patterns

- Exposing developer tooling in end-user flows without a task need

## Rules

- Use the `<brok:code-block-command>` tag (or `<x-ui.code-block-command>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/code-block-command
- Registry JSON (files, props, contract): https://brokui.dev/r/open/code-block-command.json

@props([
    'npm' => null,
    'pnpm' => null,
    'yarn' => null,
    'bun' => null,
    'show' => null,
])

@php
    // Auto-derive pnpm/yarn/bun equivalents from a single npm command so callers
    // can pass just `npm="npm install zod"`. Explicit per-manager props win.
    $convert = function (string $cmd): array {
        $cmd = trim($cmd);
        if (preg_match('/^npm (install|i)\b/', $cmd)) {
            $rest = trim(preg_replace('/^npm (install|i)\b/', '', $cmd));
            $verb = $rest === '' ? 'install' : 'add';
            $suffix = $rest === '' ? '' : ' '.$rest;
            return ['pnpm' => trim("pnpm {$verb}{$suffix}"), 'yarn' => trim("yarn {$verb}{$suffix}"), 'bun' => trim("bun {$verb}{$suffix}")];
        }
        if (str_starts_with($cmd, 'npm run')) {
            $rest = trim(substr($cmd, 7));
            return ['pnpm' => trim("pnpm {$rest}"), 'yarn' => trim("yarn {$rest}"), 'bun' => trim("bun run {$rest}")];
        }
        if (str_starts_with($cmd, 'npx')) {
            $rest = trim(substr($cmd, 3));
            return ['pnpm' => "pnpm dlx {$rest}", 'yarn' => "yarn dlx {$rest}", 'bun' => "bunx {$rest}"];
        }
        return ['pnpm' => $cmd, 'yarn' => $cmd, 'bun' => $cmd];
    };

    $derived = $npm !== null ? $convert((string) $npm) : [];
    $all = [
        'npm' => $npm,
        'pnpm' => $pnpm ?? ($derived['pnpm'] ?? null),
        'yarn' => $yarn ?? ($derived['yarn'] ?? null),
        'bun' => $bun ?? ($derived['bun'] ?? null),
    ];

    $order = is_array($show) && $show !== [] ? $show : ['npm', 'pnpm', 'yarn', 'bun'];
    $commands = [];
    foreach ($order as $manager) {
        if (! empty($all[$manager])) {
            $commands[$manager] = (string) $all[$manager];
        }
    }
    if ($commands === []) {
        $commands = ['npm' => (string) ($npm ?? '')];
    }

    $managers = array_keys($commands);
    $default = $managers[0];
    $defaultCommand = $commands[$default];

    $tabBase = 'relative -mb-px border-b-2 px-2 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-t-sm border-transparent text-muted-foreground hover:text-foreground aria-selected:border-primary aria-selected:text-foreground';
@endphp

<div
    data-slot="code-block-command"
    x-data="uiCodeBlockCommand({ commands: @js($commands), managers: @js($managers), default: @js($default) })"
    {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-border bg-card text-foreground']) }}
>
    {{-- Package-manager tabs --}}
    <div role="tablist" aria-label="{{ __('Package manager') }}" class="flex items-center gap-1 border-b border-border px-2 pt-1">
        @foreach ($managers as $manager)
            <button
                type="button"
                role="tab"
                @click="select(@js($manager))"
                aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                x-bind:aria-selected="active === @js($manager) ? 'true' : 'false'"
                x-bind:tabindex="active === @js($manager) ? 0 : -1"
                class="{{ $tabBase }}"
            >{{ $manager }}</button>
        @endforeach
    </div>

    {{-- Command --}}
    <div class="flex items-center gap-3 px-4 py-3">
        <span class="select-none font-mono text-sm text-muted-foreground" aria-hidden="true">$</span>
        <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm text-foreground" x-text="command">{{ $defaultCommand }}</code>

        <button
            type="button"
            @click="copy()"
            x-bind:aria-label="copied ? @js(__('Copied')) : @js(__('Copy command'))"
            class="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
            <span aria-live="polite" class="sr-only" x-text="copied ? @js(__('Copied')) : ''"></span>
            <svg x-show="!copied" class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
            </svg>
            <svg x-show="copied" x-cloak class="size-4 shrink-0 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6 9 17l-5-5" />
            </svg>
        </button>
    </div>
</div>

/**
 * Code block command behaviour.
 *
 * Switches a CLI command between package managers (npm / pnpm / yarn / bun),
 * persists the active choice in localStorage so it survives navigation, and
 * copies the active command to the clipboard with a copy → check transition.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this
 * file once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiCodeBlockCommand', (config = {}) => ({
        managers: config.managers ?? [],
        commands: config.commands ?? {},
        active: config.default ?? (config.managers?.[0] ?? 'npm'),
        copied: false,
        _t: null,

        init() {
            // Restore the last package manager the visitor used, if it is one of
            // the tabs this instance actually shows.
            try {
                const saved = localStorage.getItem('ui-package-manager');
                if (saved && this.managers.includes(saved)) {
                    this.active = saved;
                }
            } catch (e) {
                // localStorage can throw in private mode — ignore.
            }
        },

        select(manager) {
            if (!this.managers.includes(manager)) {
                return;
            }
            this.active = manager;
            try {
                localStorage.setItem('ui-package-manager', manager);
            } catch (e) {
                // ignore
            }
        },

        get command() {
            return this.commands[this.active] ?? '';
        },

        async copy() {
            const text = this.command;
            try {
                if (navigator.clipboard?.writeText) {
                    await navigator.clipboard.writeText(text);
                } else {
                    const ta = document.createElement('textarea');
                    ta.value = text;
                    ta.style.position = 'fixed';
                    ta.style.opacity = '0';
                    document.body.appendChild(ta);
                    ta.focus();
                    ta.select();
                    document.execCommand('copy');
                    document.body.removeChild(ta);
                }

                this.copied = true;
                clearTimeout(this._t);
                this._t = setTimeout(() => {
                    this.copied = false;
                }, 2000);
            } catch (e) {
                // Swallow — copy failure is non-fatal.
            }
        },

        destroy() {
            clearTimeout(this._t);
        },
    }));
});