@windstream/react-shared-components 0.0.1

package/src/components/divider/Divider.stories.tsx

@@ -0,0 +1,206 @@
+import { Divider } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A simple divider component used to separate content sections with a horizontal line.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default divider
+export const Default: Story = {
+  args: {},
+};
+
+// Horizontal divider
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <p className="body2 text-text">Content above the divider</p>
+      <Divider />
+      <p className="body2 text-text">Content below the divider</p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Default horizontal divider separating content sections.",
+      },
+    },
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    className: "h-0.5 bg-border-brand",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md space-y-4">
+      <p className="body2 text-text">Content above</p>
+      <Divider {...args} />
+      <p className="body2 text-text">Content below</p>
+    </div>
+  ),
+};
+
+// Multiple dividers
+export const Multiple: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <div>
+        <h3 className="subheading1 text-text mb-2">Section 1</h3>
+        <p className="body2 text-text">Content for section 1</p>
+      </div>
+      <Divider />
+      <div>
+        <h3 className="subheading1 text-text mb-2">Section 2</h3>
+        <p className="body2 text-text">Content for section 2</p>
+      </div>
+      <Divider />
+      <div>
+        <h3 className="subheading1 text-text mb-2">Section 3</h3>
+        <p className="body2 text-text">Content for section 3</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple dividers used to separate different content sections.",
+      },
+    },
+  },
+};
+
+// In list
+export const InList: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-0 border border-border-default rounded">
+      <div className="p-4">
+        <p className="body2 text-text">List item 1</p>
+      </div>
+      <Divider />
+      <div className="p-4">
+        <p className="body2 text-text">List item 2</p>
+      </div>
+      <Divider />
+      <div className="p-4">
+        <p className="body2 text-text">List item 3</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Dividers used within a list to separate items.",
+      },
+    },
+  },
+};
+
+// Thick divider
+export const Thick: Story = {
+  args: {
+    className: "h-1 bg-border-default",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md space-y-4">
+      <p className="body2 text-text">Content above</p>
+      <Divider {...args} />
+      <p className="body2 text-text">Content below</p>
+    </div>
+  ),
+};
+
+// Colored divider
+export const Colored: Story = {
+  args: {
+    className: "h-0.5 bg-border-brand",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md space-y-4">
+      <p className="body2 text-text">Content above</p>
+      <Divider {...args} />
+      <p className="body2 text-text">Content below</p>
+    </div>
+  ),
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Default Divider</h3>
+        <div className="space-y-4">
+          <p className="body2 text-text">Content above</p>
+          <Divider />
+          <p className="body2 text-text">Content below</p>
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
+        <div className="space-y-4">
+          <p className="body2 text-text">Content above</p>
+          <Divider className="h-0.5 bg-border-brand" />
+          <p className="body2 text-text">Content below</p>
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Thick Divider</h3>
+        <div className="space-y-4">
+          <p className="body2 text-text">Content above</p>
+          <Divider className="h-1 bg-border-default" />
+          <p className="body2 text-text">Content below</p>
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">In List</h3>
+        <div className="border border-border-default rounded">
+          <div className="p-4">
+            <p className="body2 text-text">Item 1</p>
+          </div>
+          <Divider />
+          <div className="p-4">
+            <p className="body2 text-text">Item 2</p>
+          </div>
+          <Divider />
+          <div className="p-4">
+            <p className="body2 text-text">Item 3</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all divider variants and use cases.",
+      },
+    },
+  },
+};
+

package/src/components/divider/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { cx } from "@shared/utils";
+
+import { DividerProps } from "./type";
+
+export const Divider: React.FC<DividerProps> = (props: DividerProps) => {
+  const { className, ...rest } = props;
+
+  return (
+    <div
+      className={cx(
+        "bg-bg-surface-tertiary-active h-[1px] border-t-0 opacity-100",
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+Divider.displayName = "Divider";
+
+export type { DividerProps };

package/src/components/divider/type.ts

@@ -0,0 +1,3 @@
+export type DividerProps = {
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +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.",
+      },
+    },
+  },
+};
+