Nychthemeron/packages/playground/stories/Badge.stories.ts

import type { Meta, StoryObj } from '@storybook/vue3-vite'

import { Badge as NychBadge } from '@nychthemeron/library'

const meta = {
  title: 'Components/Badge',
  component: NychBadge,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
    },
  },
} satisfies Meta<typeof NychBadge>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { variant: 'primary' },
  render: (args) => ({
    components: { NychBadge },
    setup: () => ({ args }),
    template: `<NychBadge v-bind="args">Mortal</NychBadge>`,
  }),
}

export const AllVariants: Story = {
  render: () => ({
    components: { NychBadge },
    template: `
      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
        <NychBadge variant="primary">Primary</NychBadge>
        <NychBadge variant="secondary">Secondary</NychBadge>
        <NychBadge variant="info">Info</NychBadge>
        <NychBadge variant="success">Success</NychBadge>
        <NychBadge variant="warning">Warning</NychBadge>
        <NychBadge variant="danger">Danger</NychBadge>
      </div>
    `,
  }),
}