import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { SkillDetailDrawer } from './skill-detail-drawer.js';
import { Button } from '../../ui/button.js';
const meta = {
    title: 'Features/SkillDetailDrawer',
    component: SkillDetailDrawer,
    tags: ['autodocs'],
    parameters: {
        layout: 'fullscreen',
    },
};
export default meta;
/* ---------------------------------------------------------------------------
 * Data fixtures
 * ------------------------------------------------------------------------- */
const skillWithResources = {
    name: 'shep:ui-component',
    displayName: 'ui-component',
    description: 'Use when creating, modifying, or reviewing web UI components. Triggers include "new component", "add component", "create UI", "build a widget".',
    context: 'fork',
    allowedTools: 'Read, Write, Bash, Edit, Glob, Grep',
    category: 'Code Generation',
    source: 'project',
    body: '## Overview\n\nScaffolds UI components following the four-tier hierarchy.\n\n## Usage\n\nRun /shep:ui-component when you need to create or modify components.',
    resources: [
        { name: 'references', fileCount: 7 },
        { name: 'templates', fileCount: 3 },
        { name: 'rules', fileCount: 2 },
    ],
};
const skillWithoutResources = {
    name: 'shep-kit:implement',
    displayName: 'implement',
    description: 'Validate specs and autonomously execute implementation tasks with status tracking. Use after /shep-kit:plan when ready to start implementation.',
    category: 'Workflow',
    source: 'project',
    body: '## Usage\n\nRun /shep-kit:implement after planning is complete to start autonomous implementation.\n\n## What it does\n\n1. Pre-Implementation Validation Gate\n2. Autonomous Execution\n3. Status Tracking',
    resources: [],
};
const minimalSkill = {
    name: 'find-skills',
    displayName: 'find-skills',
    description: 'Helps users discover and install agent skills.',
    category: 'Reference',
    source: 'global',
    body: '',
    resources: [],
};
/* ---------------------------------------------------------------------------
 * Trigger wrapper — starts closed, click to open
 * ------------------------------------------------------------------------- */
function DrawerTrigger({ skill, label }) {
    const [selected, setSelected] = useState(null);
    return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setSelected(skill), children: label }), _jsx(SkillDetailDrawer, { skill: selected, onClose: () => setSelected(null) })] }));
}
/* ---------------------------------------------------------------------------
 * Stories
 * ------------------------------------------------------------------------- */
export const Open = {
    render: () => _jsx(DrawerTrigger, { skill: skillWithResources, label: "Open Skill Detail" }),
};
export const WithResources = {
    render: () => _jsx(DrawerTrigger, { skill: skillWithResources, label: "Open With Resources" }),
};
export const WithoutResources = {
    render: () => _jsx(DrawerTrigger, { skill: skillWithoutResources, label: "Open Without Resources" }),
};
export const MinimalSkill = {
    render: () => _jsx(DrawerTrigger, { skill: minimalSkill, label: "Open Minimal Skill" }),
};
