118 lines
3.1 KiB
TypeScript
118 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import { Button as NychButton } from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Button',
|
|
component: NychButton,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
variant: {
|
|
control: { type: 'select' },
|
|
options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
|
|
description: 'Button color variant',
|
|
},
|
|
size: {
|
|
control: { type: 'select' },
|
|
options: ['default', 'sm', 'lg', 'icon'],
|
|
description: 'Button size',
|
|
},
|
|
disabled: {
|
|
control: { type: 'boolean' },
|
|
description: 'Disable the button',
|
|
},
|
|
loading: {
|
|
control: { type: 'boolean' },
|
|
description: 'Show loading state',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof NychButton>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Primary: Story = {
|
|
args: { variant: 'primary' },
|
|
render: (args) => ({
|
|
components: { NychButton },
|
|
setup: () => ({ args }),
|
|
template: `<NychButton v-bind="args">Summon the Oracle</NychButton>`,
|
|
}),
|
|
}
|
|
|
|
export const AllVariants: Story = {
|
|
render: () => ({
|
|
components: { NychButton },
|
|
template: `
|
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
<NychButton variant="primary">Primary</NychButton>
|
|
<NychButton variant="secondary">Secondary</NychButton>
|
|
<NychButton variant="info">Info</NychButton>
|
|
<NychButton variant="success">Success</NychButton>
|
|
<NychButton variant="warning">Warning</NychButton>
|
|
<NychButton variant="danger">Danger</NychButton>
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Sizes: Story = {
|
|
render: () => ({
|
|
components: { NychButton },
|
|
template: `
|
|
<div style="display: flex; gap: 1rem; align-items: center;">
|
|
<NychButton size="sm">Small</NychButton>
|
|
<NychButton size="default">Default</NychButton>
|
|
<NychButton size="lg">Large</NychButton>
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: { disabled: true },
|
|
render: (args) => ({
|
|
components: { NychButton },
|
|
setup: () => ({ args }),
|
|
template: `<NychButton v-bind="args">Disabled</NychButton>`,
|
|
}),
|
|
}
|
|
|
|
export const Loading: Story = {
|
|
args: { loading: true },
|
|
render: (args) => ({
|
|
components: { NychButton },
|
|
setup: () => ({ args }),
|
|
template: `<NychButton v-bind="args">Ask</NychButton>`,
|
|
}),
|
|
}
|
|
|
|
export const Interactive: Story = {
|
|
render: () => ({
|
|
components: { NychButton },
|
|
setup() {
|
|
const clickCount = ref(0)
|
|
const isLoading = ref(false)
|
|
|
|
const handleClick = () => {
|
|
clickCount.value++
|
|
isLoading.value = true
|
|
setTimeout(() => {
|
|
isLoading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
return { clickCount, isLoading, handleClick }
|
|
},
|
|
template: `
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem;">
|
|
<NychButton @click="handleClick" :loading="isLoading">Click Me</NychButton>
|
|
<p style="font-size: 1.2rem; font-weight: bold;">Clicks: {{ clickCount }}</p>
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|