131 lines
3 KiB
TypeScript
131 lines
3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/angular';
|
|
import { FeedbackButton } from './feedback-button';
|
|
import { moduleMetadata } from '@storybook/angular';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { Store, StoreModule } from '@ngrx/store';
|
|
import { ApiService } from '../../services/api-service';
|
|
import { reducers } from '../../reducers';
|
|
|
|
// Mock ApiService
|
|
class MockApiService {
|
|
async sendUserFeedback(feedback: string): Promise<any> {
|
|
// Simulate API call
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({ success: true });
|
|
}, 1000);
|
|
});
|
|
}
|
|
}
|
|
|
|
const meta: Meta<FeedbackButton> = {
|
|
title: 'UI/Feedback/FeedbackButton',
|
|
component: FeedbackButton,
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
moduleMetadata({
|
|
imports: [
|
|
CommonModule,
|
|
FormsModule,
|
|
StoreModule.forRoot(reducers)
|
|
],
|
|
providers: [
|
|
Store,
|
|
{ provide: ApiService, useClass: MockApiService }
|
|
]
|
|
})
|
|
],
|
|
argTypes: {
|
|
isModalOpen: {
|
|
control: 'boolean',
|
|
description: 'Whether the feedback modal is open'
|
|
},
|
|
feedbackText: {
|
|
control: 'text',
|
|
description: 'The feedback text entered by the user'
|
|
},
|
|
isSubmitting: {
|
|
control: 'boolean',
|
|
description: 'Whether the feedback is being submitted'
|
|
},
|
|
submitSuccess: {
|
|
control: 'boolean',
|
|
description: 'Whether the feedback was submitted successfully'
|
|
},
|
|
submitError: {
|
|
control: 'boolean',
|
|
description: 'Whether there was an error submitting the feedback'
|
|
}
|
|
}
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<FeedbackButton>;
|
|
|
|
// Default state - just the button
|
|
export const Default: Story = {
|
|
args: {
|
|
isModalOpen: false,
|
|
feedbackText: '',
|
|
isSubmitting: false,
|
|
submitSuccess: false,
|
|
submitError: false
|
|
}
|
|
};
|
|
|
|
// Modal open state
|
|
export const ModalOpen: Story = {
|
|
args: {
|
|
isModalOpen: true,
|
|
feedbackText: '',
|
|
isSubmitting: false,
|
|
submitSuccess: false,
|
|
submitError: false
|
|
}
|
|
};
|
|
|
|
// Modal with text entered
|
|
export const WithFeedbackText: Story = {
|
|
args: {
|
|
isModalOpen: true,
|
|
feedbackText: 'This is some feedback text that the user has entered.',
|
|
isSubmitting: false,
|
|
submitSuccess: false,
|
|
submitError: false
|
|
}
|
|
};
|
|
|
|
// Submitting state
|
|
export const Submitting: Story = {
|
|
args: {
|
|
isModalOpen: true,
|
|
feedbackText: 'This is some feedback text that the user has entered.',
|
|
isSubmitting: true,
|
|
submitSuccess: false,
|
|
submitError: false
|
|
}
|
|
};
|
|
|
|
// Success state
|
|
export const SubmitSuccess: Story = {
|
|
args: {
|
|
isModalOpen: true,
|
|
feedbackText: 'This is some feedback text that the user has entered.',
|
|
isSubmitting: false,
|
|
submitSuccess: true,
|
|
submitError: false
|
|
}
|
|
};
|
|
|
|
// Error state
|
|
export const SubmitError: Story = {
|
|
args: {
|
|
isModalOpen: true,
|
|
feedbackText: 'This is some feedback text that the user has entered.',
|
|
isSubmitting: false,
|
|
submitSuccess: false,
|
|
submitError: true
|
|
}
|
|
};
|
|
|