@windstream/react-shared-components 0.1.91 → 0.1.92

package/src/components/input/Input.stories.tsx

@@ -1,325 +1,325 @@
-import { Input } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Input> = {
-  title: "Components/Input",
-  component: Input,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A comprehensive input component with support for labels, error states, icons, loading states, and multiple sizes.",
-      },
-    },
-  },
-  argTypes: {
-    placeholder: {
-      control: { type: "text" },
-      description: "Placeholder text",
-    },
-    label: {
-      control: { type: "text" },
-      description: "Label text",
-    },
-    size: {
-      control: { type: "select" },
-      options: ["slim", "medium", "large"],
-      description: "Input size",
-    },
-    state: {
-      control: { type: "select" },
-      options: ["default", "focus", "active", "hover", "filled", "error"],
-      description: "Visual state",
-    },
-    hasError: {
-      control: { type: "boolean" },
-      description: "Show error state",
-    },
-    errorText: {
-      control: { type: "text" },
-      description: "Error message text",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disable the input",
-    },
-    loading: {
-      control: { type: "boolean" },
-      description: "Show loading state",
-    },
-    required: {
-      control: { type: "boolean" },
-      description: "Mark input as required",
-    },
-    type: {
-      control: { type: "select" },
-      options: ["text", "email", "password", "number", "tel"],
-      description: "Input type",
-    },
-    prefixIconName: {
-      control: { type: "select" },
-      options: ["location_on", "search"],
-      description: "Prefix icon name",
-    },
-    suffixIconName: {
-      control: { type: "select" },
-      options: ["visibility", "visibility_off", "lock"],
-      description: "Suffix icon name",
-    },
-  },
-  args: {
-    placeholder: "Enter text...",
-    size: "medium",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default input
-export const Default: Story = {
-  args: {},
-};
-
-// With label
-export const WithLabel: Story = {
-  args: {
-    label: "Email Address",
-    placeholder: "Enter your email",
-  },
-};
-
-// Required input
-export const Required: Story = {
-  args: {
-    label: "Required Field",
-    placeholder: "This field is required",
-    required: true,
-  },
-};
-
-// Error state
-export const Error: Story = {
-  args: {
-    label: "Email Address",
-    placeholder: "Enter your email",
-    hasError: true,
-    errorText: "Please enter a valid email address",
-  },
-};
-
-// Different sizes
-export const Sizes: Story = {
-  render: () => (
-    <div className="max-w-md w-full space-y-4">
-      <div>
-        <Input size="slim" placeholder="Slim input" label="Slim Size" />
-      </div>
-      <div>
-        <Input size="medium" placeholder="Medium input" label="Medium Size" />
-      </div>
-      <div>
-        <Input size="large" placeholder="Large input" label="Large Size" />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "All available input sizes: slim, medium, and large.",
-      },
-    },
-  },
-};
-
-// With prefix icon
-export const WithPrefixIcon: Story = {
-  args: {
-    label: "Search",
-    placeholder: "Search...",
-    prefixIconName: "search",
-    prefixIconSize: 24,
-  },
-};
-
-// With suffix icon
-export const WithSuffixIcon: Story = {
-  args: {
-    label: "Password",
-    placeholder: "Enter password",
-    type: "password",
-    suffixIconName: "visibility",
-    suffixIconSize: 24,
-  },
-};
-
-// Password input
-export const Password: Story = {
-  args: {
-    label: "Password",
-    placeholder: "Enter your password",
-    type: "password",
-    suffixIconName: "visibility",
-  },
-};
-
-// Loading state
-export const Loading: Story = {
-  args: {
-    label: "Loading Input",
-    placeholder: "Loading...",
-    loading: true,
-  },
-};
-
-// Disabled state
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Input",
-    placeholder: "This input is disabled",
-    disabled: true,
-  },
-};
-
-// Different states
-export const States: Story = {
-  render: () => (
-    <div className="max-w-md w-full space-y-4">
-      <div>
-        <Input
-          label="Default State"
-          placeholder="Default input"
-          state="default"
-        />
-      </div>
-      <div>
-        <Input label="Hover State" placeholder="Hover over me" state="hover" />
-      </div>
-      <div>
-        <Input label="Focus State" placeholder="Focus on me" state="focus" />
-      </div>
-      <div>
-        <Input
-          label="Error State"
-          placeholder="Error input"
-          state="error"
-          errorText="This field has an error"
-        />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Different visual states of the input component.",
-      },
-    },
-  },
-};
-
-// Email input
-export const Email: Story = {
-  args: {
-    label: "Email",
-    placeholder: "example@email.com",
-    type: "email",
-  },
-};
-
-// Phone input
-export const Phone: Story = {
-  args: {
-    label: "Phone Number",
-    placeholder: "(555) 123-4567",
-    type: "tel",
-  },
-};
-
-// Form example
-export const FormExample: Story = {
-  render: () => (
-    <form className="max-w-md w-full space-y-4">
-      <Input label="First Name" placeholder="Enter your first name" required />
-      <Input label="Last Name" placeholder="Enter your last name" required />
-      <Input
-        label="Email"
-        placeholder="Enter your email"
-        type="email"
-        required
-      />
-      <Input
-        label="Password"
-        placeholder="Enter your password"
-        type="password"
-        suffixIconName="visibility"
-        required
-      />
-      <Input label="Phone Number" placeholder="(555) 123-4567" type="tel" />
-    </form>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Example of multiple inputs used together in a form.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="max-w-2xl w-full space-y-6">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Sizes</h3>
-        <div className="space-y-3">
-          <Input size="slim" placeholder="Slim" label="Slim" />
-          <Input size="medium" placeholder="Medium" label="Medium" />
-          <Input size="large" placeholder="Large" label="Large" />
-        </div>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Icons</h3>
-        <div className="space-y-3">
-          <Input
-            placeholder="Search..."
-            label="With Prefix Icon"
-            prefixIconName="search"
-          />
-          <Input
-            placeholder="Password"
-            label="With Suffix Icon"
-            type="password"
-            suffixIconName="visibility"
-          />
-        </div>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">States</h3>
-        <div className="space-y-3">
-          <Input placeholder="Default" label="Default" />
-          <Input
-            placeholder="Error"
-            label="Error"
-            hasError
-            errorText="This field has an error"
-          />
-          <Input placeholder="Loading" label="Loading" loading />
-          <Input placeholder="Disabled" label="Disabled" disabled />
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Complete showcase of all input variants, sizes, and states.",
-      },
-    },
-  },
-};
+import { Input } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A comprehensive input component with support for labels, error states, icons, loading states, and multiple sizes.",
+      },
+    },
+  },
+  argTypes: {
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["slim", "medium", "large"],
+      description: "Input size",
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "focus", "active", "hover", "filled", "error"],
+      description: "Visual state",
+    },
+    hasError: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    errorText: {
+      control: { type: "text" },
+      description: "Error message text",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the input",
+    },
+    loading: {
+      control: { type: "boolean" },
+      description: "Show loading state",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Mark input as required",
+    },
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "number", "tel"],
+      description: "Input type",
+    },
+    prefixIconName: {
+      control: { type: "select" },
+      options: ["location_on", "search"],
+      description: "Prefix icon name",
+    },
+    suffixIconName: {
+      control: { type: "select" },
+      options: ["visibility", "visibility_off", "lock"],
+      description: "Suffix icon name",
+    },
+  },
+  args: {
+    placeholder: "Enter text...",
+    size: "medium",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default input
+export const Default: Story = {
+  args: {},
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    label: "Email Address",
+    placeholder: "Enter your email",
+  },
+};
+
+// Required input
+export const Required: Story = {
+  args: {
+    label: "Required Field",
+    placeholder: "This field is required",
+    required: true,
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    label: "Email Address",
+    placeholder: "Enter your email",
+    hasError: true,
+    errorText: "Please enter a valid email address",
+  },
+};
+
+// Different sizes
+export const Sizes: Story = {
+  render: () => (
+    <div className="max-w-md w-full space-y-4">
+      <div>
+        <Input size="slim" placeholder="Slim input" label="Slim Size" />
+      </div>
+      <div>
+        <Input size="medium" placeholder="Medium input" label="Medium Size" />
+      </div>
+      <div>
+        <Input size="large" placeholder="Large input" label="Large Size" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All available input sizes: slim, medium, and large.",
+      },
+    },
+  },
+};
+
+// With prefix icon
+export const WithPrefixIcon: Story = {
+  args: {
+    label: "Search",
+    placeholder: "Search...",
+    prefixIconName: "search",
+    prefixIconSize: 24,
+  },
+};
+
+// With suffix icon
+export const WithSuffixIcon: Story = {
+  args: {
+    label: "Password",
+    placeholder: "Enter password",
+    type: "password",
+    suffixIconName: "visibility",
+    suffixIconSize: 24,
+  },
+};
+
+// Password input
+export const Password: Story = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    type: "password",
+    suffixIconName: "visibility",
+  },
+};
+
+// Loading state
+export const Loading: Story = {
+  args: {
+    label: "Loading Input",
+    placeholder: "Loading...",
+    loading: true,
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Input",
+    placeholder: "This input is disabled",
+    disabled: true,
+  },
+};
+
+// Different states
+export const States: Story = {
+  render: () => (
+    <div className="max-w-md w-full space-y-4">
+      <div>
+        <Input
+          label="Default State"
+          placeholder="Default input"
+          state="default"
+        />
+      </div>
+      <div>
+        <Input label="Hover State" placeholder="Hover over me" state="hover" />
+      </div>
+      <div>
+        <Input label="Focus State" placeholder="Focus on me" state="focus" />
+      </div>
+      <div>
+        <Input
+          label="Error State"
+          placeholder="Error input"
+          state="error"
+          errorText="This field has an error"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Different visual states of the input component.",
+      },
+    },
+  },
+};
+
+// Email input
+export const Email: Story = {
+  args: {
+    label: "Email",
+    placeholder: "example@email.com",
+    type: "email",
+  },
+};
+
+// Phone input
+export const Phone: Story = {
+  args: {
+    label: "Phone Number",
+    placeholder: "(555) 123-4567",
+    type: "tel",
+  },
+};
+
+// Form example
+export const FormExample: Story = {
+  render: () => (
+    <form className="max-w-md w-full space-y-4">
+      <Input label="First Name" placeholder="Enter your first name" required />
+      <Input label="Last Name" placeholder="Enter your last name" required />
+      <Input
+        label="Email"
+        placeholder="Enter your email"
+        type="email"
+        required
+      />
+      <Input
+        label="Password"
+        placeholder="Enter your password"
+        type="password"
+        suffixIconName="visibility"
+        required
+      />
+      <Input label="Phone Number" placeholder="(555) 123-4567" type="tel" />
+    </form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of multiple inputs used together in a form.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="max-w-2xl w-full space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Sizes</h3>
+        <div className="space-y-3">
+          <Input size="slim" placeholder="Slim" label="Slim" />
+          <Input size="medium" placeholder="Medium" label="Medium" />
+          <Input size="large" placeholder="Large" label="Large" />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Icons</h3>
+        <div className="space-y-3">
+          <Input
+            placeholder="Search..."
+            label="With Prefix Icon"
+            prefixIconName="search"
+          />
+          <Input
+            placeholder="Password"
+            label="With Suffix Icon"
+            type="password"
+            suffixIconName="visibility"
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">States</h3>
+        <div className="space-y-3">
+          <Input placeholder="Default" label="Default" />
+          <Input
+            placeholder="Error"
+            label="Error"
+            hasError
+            errorText="This field has an error"
+          />
+          <Input placeholder="Loading" label="Loading" loading />
+          <Input placeholder="Disabled" label="Disabled" disabled />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all input variants, sizes, and states.",
+      },
+    },
+  },
+};