import { html } from 'lit';
import type { Meta, StoryObj } from '@storybook/web-components';

// Import live source for HMR (not dist)
import '../../index';

// Import plugins if needed
import { MyPlugin } from './index';

interface StoryArgs {
  rows: unknown[];
  // Add story-specific args
}

const meta: Meta<StoryArgs> = {
  title: 'Plugins/MyPlugin', // or 'Grid/FeatureName'
  tags: ['autodocs'],
  argTypes: {
    // Define controls for the story
  },
  render: (args) => {
    const grid = document.createElement('tbw-grid') as any;
    grid.rows = args.rows;
    grid.gridConfig = {
      columns: [
        { field: 'id', header: 'ID', width: 60 },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
      ],
      plugins: [new MyPlugin()],
    };
    return grid;
  },
};

export default meta;
type Story = StoryObj<StoryArgs>;

/**
 * Basic usage of MyPlugin.
 */
export const Basic: Story = {
  args: {
    rows: [
      { id: 1, name: 'Alice', email: 'alice@example.com' },
      { id: 2, name: 'Bob', email: 'bob@example.com' },
      { id: 3, name: 'Charlie', email: 'charlie@example.com' },
    ],
  },
};

/**
 * Advanced configuration demonstrating all options.
 */
export const Advanced: Story = {
  args: {
    rows: [
      /* ... */
    ],
  },
  render: (args) => {
    // Custom render for advanced scenarios
    return html`<tbw-grid></tbw-grid>`;
  },
};

import { Meta, Canvas, Controls, Source } from '@storybook/addon-docs/blocks';
import * as Stories from './<plugin-name>.stories';

<Meta of={Stories} />

# Plugin Name

Brief description of what this plugin does.

## Installation

```typescript
import { MyPlugin } from '@toolbox-web/grid/plugins/my-plugin';
```

## Key Conventions

1. **Import live source** (`../../index` or `../src/index`) for HMR — not from `dist/`
2. **Use `tags: ['autodocs']`** on meta for auto-generated docs pages
3. **Add JSDoc comments** above each story export — they appear in docs
4. **Use `html` from Lit** for template rendering in render functions
5. **Create the grid element programmatically** when you need to set JS properties (rows, gridConfig)
6. **Story titles** follow hierarchy: `Grid/Feature` or `Plugins/PluginName`
7. **Storybook runs on port 4400**: `bun nx serve docs`

## MDX Doc Blocks Reference

| Block | Usage |
|---|---|
| `<Canvas of={Story} />` | Renders story with source code panel |
| `<Controls of={Story} />` | Interactive prop controls |
| `<ArgTypes of={Stories} />` | Auto-generated prop table from JSDoc |
| `<Source code={...} />` | Syntax-highlighted code block |

Import from `@storybook/addon-docs/blocks`.

## Verifying

```bash
# Start Storybook locally
bun nx serve docs

# Build Storybook (catches errors)
bun nx build docs
```

Navigate to your story in the sidebar to verify rendering and docs.