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

import {
  argsToTemplate,
  moduleMetadata,
  type Meta,
  type StoryObj,
} from '@storybook/angular';
import {
  InlineInputComponent,
  InputControlDirective,
} from '@isa/ui/input-controls';

const meta: Meta<InlineInputComponent> = {
  component: InlineInputComponent,
  title: 'ui/input-controls/InlineInput',
  argTypes: {
    size: { control: 'select', options: ['small', 'medium'] },
  },
  args: {
    size: 'medium',
  },
  decorators: [
    moduleMetadata({
      imports: [InputControlDirective],
    }),
  ],
  render: (args) => ({
    props: args,
    template: `
      <ui-inline-input ${argsToTemplate(args)}>
        <input type="text" placeholder="Enter inline text" />
      </ui-inline-input>
    `,
  }),
};

export default meta;

type Story = StoryObj<InlineInputComponent>;

export const Primary: Story = {
  args: {
    size: 'medium',
  },
};

export const WithLabel: Story = {
  args: {
    size: 'medium',
  },
  render: (args) => ({
    props: args,
    template: `
      <ui-inline-input ${argsToTemplate(args)}>
        <label>Label</label>
        <input type="text" placeholder="Enter inline text" />
      </ui-inline-input>
    `,
  }),
};