community-rule/stories/controls/TextInput.stories.js

import React from "react";
import TextInput from "../../app/components/controls/TextInput";
import {
  INPUT_STATE_OPTIONS,
  TEXT_INPUT_SIZE_OPTIONS,
} from "../../lib/propNormalization";

export default {
  title: "Components/Controls/TextInput",
  component: TextInput,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    inputSize: {
      control: { type: "select" },
      options: [...TEXT_INPUT_SIZE_OPTIONS],
    },
    state: {
      control: { type: "select" },
      options: [...INPUT_STATE_OPTIONS],
    },
    disabled: {
      control: { type: "boolean" },
    },
    error: {
      control: { type: "boolean" },
    },
    label: {
      control: { type: "text" },
    },
    placeholder: {
      control: { type: "text" },
    },
    value: {
      control: { type: "text" },
    },
  },
};

const Template = (args) => <TextInput {...args} />;

// Default story
export const Default = {
  args: {
    label: "Default Text Input",
    placeholder: "Enter text...",
    inputSize: "medium",
    state: "default",
  },
  render: Template,
}; // Size variants
export const Small = {
  args: {
    label: "Small Text Input",
    placeholder: "Small size",
    inputSize: "small",
    state: "default",
  },
  render: Template,
};
export const Medium = {
  args: {
    label: "Medium Text Input",
    placeholder: "Medium size",
    inputSize: "medium",
    state: "default",
  },
  render: Template,
}; // States
export const Active = {
  args: {
    label: "Active State",
    placeholder: "Active input",
    inputSize: "medium",
    state: "active",
  },
  render: Template,
};
export const Hover = {
  args: {
    label: "Hover State",
    placeholder: "Hover input",
    inputSize: "medium",
    state: "hover",
  },
  render: Template,
};
export const Focus = {
  args: {
    label: "Focus State",
    placeholder: "Focused input",
    inputSize: "medium",
    state: "focus",
  },
  render: Template,
};
export const Error = {
  args: {
    label: "Error State",
    placeholder: "Error input",
    inputSize: "medium",
    state: "default",
    error: true,
  },
  render: Template,
};
export const Disabled = {
  args: {
    label: "Disabled State",
    placeholder: "Disabled input",
    inputSize: "medium",
    state: "default",
    disabled: true,
  },
  render: Template,
}; // Interactive example
export const Interactive = (args) => {
  const [value, setValue] = React.useState("");

  return (
    <div className="space-y-4">
      <TextInput
        {...args}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <p className="text-sm text-gray-600">Current value: "{value}"</p>
    </div>
  );
};
Interactive.args = {
  label: "Interactive Text Input",
  placeholder: "Type something...",
  inputSize: "medium",
  state: "default",
};

// All sizes comparison
export const AllSizes = () => (
  <div className="space-y-6">
    <div>
      <h3 className="text-lg font-semibold mb-4">Small Size</h3>
      <div className="space-y-4">
        <TextInput
          label="Small Text Input"
          placeholder="Small size input"
          inputSize="small"
        />
      </div>
    </div>

    <div>
      <h3 className="text-lg font-semibold mb-4">Medium Size</h3>
      <div className="space-y-4">
        <TextInput
          label="Medium Text Input"
          placeholder="Medium size input"
          inputSize="medium"
        />
      </div>
    </div>
  </div>
);

// All states comparison
export const AllStates = () => (
  <div className="space-y-6">
    <div>
      <h3 className="text-lg font-semibold mb-4">Text Input States</h3>
      <div className="space-y-4">
        <TextInput
          label="Default State"
          placeholder="Default input"
          inputSize="medium"
          state="default"
        />
        <TextInput
          label="Active State"
          placeholder="Active input"
          inputSize="medium"
          state="active"
        />
        <TextInput
          label="Hover State"
          placeholder="Hover input"
          inputSize="medium"
          state="hover"
        />
        <TextInput
          label="Focus State"
          placeholder="Focused input"
          inputSize="medium"
          state="focus"
        />
        <TextInput
          label="Error State"
          placeholder="Error input"
          inputSize="medium"
          error={true}
        />
        <TextInput
          label="Disabled State"
          placeholder="Disabled input"
          inputSize="medium"
          disabled={true}
        />
      </div>
    </div>
  </div>
);