ISA-Frontend/apps/isa-app/stories/ui/input-controls/text-field.stories.ts

import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import {
  TextFieldClearComponent,
  TextFieldComponent,
  TextFieldContainerComponent,
  TextFieldErrorsComponent,
} from '@isa/ui/input-controls';

interface TextFieldStoryProps {
  showClear: boolean;
  showError1: boolean;
  showError2: boolean;
  errorText1: string;
  errorText2: string;
}

const meta: Meta<TextFieldStoryProps> = {
  component: TextFieldComponent,
  title: 'ui/input-controls/TextField',
  argTypes: {
    showClear: { control: 'boolean', name: 'Show Clear Button' },
    showError1: { control: 'boolean', name: 'Show Error 1' },
    showError2: { control: 'boolean', name: 'Show Error 2' },
    errorText1: { control: 'text', name: 'Error 1 Text' },
    errorText2: { control: 'text', name: 'Error 2 Text' },
  },
  args: {
    showClear: true,
    showError1: false,
    showError2: false,
    errorText1: 'Eingabe ungültig',
    errorText2: 'Error Beispiel 2',
  },
  decorators: [
    moduleMetadata({
      imports: [
        TextFieldClearComponent,
        TextFieldContainerComponent,
        TextFieldErrorsComponent,
      ],
    }),
  ],
  render: (args) => ({
    props: args,
    template: `
      <ui-text-field-container>
        <ui-text-field>
          <input type="text" placeholder="Enter your name" />
          <ui-text-field-clear *ngIf="showClear"></ui-text-field-clear>
        </ui-text-field>
        <ui-text-field-errors>
          <span *ngIf="showError1">{{ errorText1 }}</span>
          <span *ngIf="showError2">{{ errorText2 }}</span>
        </ui-text-field-errors>
      </ui-text-field-container>
    `,
  }),
};

export default meta;

type Story = StoryObj<TextFieldStoryProps>;

export const Default: Story = {
  args: {
    showClear: true,
    showError1: false,
    showError2: false,
    errorText1: 'Eingabe ungültig',
    errorText2: 'Error Beispiel 2',
  },
};