ng-implementation/airwatch/src/app/chatbot/feedback-button/feedback-button.stories.ts

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
  }
};