@windstream/react-shared-components 0.0.10 → 0.0.12

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

@@ -1,358 +1,358 @@
-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="w-full max-w-md 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="w-full max-w-md 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="w-full max-w-md 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="w-full max-w-2xl 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="w-full max-w-md 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="w-full max-w-md 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="w-full max-w-md 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="w-full max-w-2xl 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.",
+      },
+    },
+  },
+};
+