@windstream/react-shared-components 0.0.1

package/src/components/input/index.tsx

@@ -0,0 +1,174 @@
+import {
+  FocusEventHandler,
+  forwardRef,
+  ForwardRefRenderFunction,
+  MouseEventHandler,
+  useCallback,
+  useState,
+} from "react";
+import { cx } from "@shared/utils";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { InputFieldProps, InputProps } from "./types";
+
+export const InputField: ForwardRefRenderFunction<
+  HTMLInputElement,
+  InputFieldProps
+> = (props, ref) => {
+  const {
+    className,
+    size,
+    required,
+    placeholder,
+    label,
+    state,
+    errorText,
+    prefixIconName,
+    prefixIconFill = true,
+    suffixIconFill = false,
+    prefixIconSize = 24,
+    suffixIconName,
+    suffixIconSize = 24,
+    containerClassName,
+    prefixIconClassName,
+    loading,
+    hasError,
+    type,
+    // Filter out all non-DOM props
+    ...rest
+  } = props;
+
+  // Use hasError to override state if provided
+  const effectiveState = hasError ? "error" : state;
+
+  const sizeClasses = {
+    sm: "h-[48px] rounded-lg px-3 py-2",
+    slim: "h-12",
+    medium: "h-14",
+    large: "h-[60px]",
+  };
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputType, setInputType] = useState(type || "text");
+
+  const handleMouseOver = () => setIsHovered(true);
+  const handleMouseOut = () => setIsHovered(false);
+  const handleFocus: FocusEventHandler<HTMLInputElement> = e => {
+    rest.onFocus?.(e);
+    setIsFocused(true);
+  };
+  const handleBlur: FocusEventHandler<HTMLInputElement> = e => {
+    rest.onBlur?.(e);
+    setIsFocused(false);
+  };
+
+  const togglePasswordVisibility = useCallback<
+  MouseEventHandler<HTMLDivElement>
+>(e => {
+  e.stopPropagation();
+  setInputType(prevType =>
+    prevType === "password" ? "text" : "password"
+  );
+}, []);
+
+  return (
+    <div className="relative">
+      {label ? (
+        <label htmlFor={label} className={cx("inline-block pb-1")}>
+          <Text as="span" className="footnote text-text">
+            {label}
+            {required ? (
+              <span className="pl-1 text-text-critical">*</span>
+            ) : null}
+          </Text>
+        </label>
+      ) : null}
+
+      <div
+        className={cx(
+          "relative flex w-80 flex-row items-center rounded-xl border border-input-border bg-input-bg-surface overflow-hidden",
+          sizeClasses[size || "medium"],
+          containerClassName,
+          (isHovered || effectiveState === "hover") && !isFocused && effectiveState !== "error" && "border-input-border-hover",
+          (isFocused ||
+            effectiveState === "focus" ||
+            effectiveState === "active") &&
+            "border-input-border-selected outline outline-1 outline-input-border-selected",
+          effectiveState === "error" && "border-input-border-critical outline outline-1 outline-input-border-critical"
+        )}
+      >
+        {prefixIconName ? (
+          <div
+            className="mr-1"
+            style={{
+              width: prefixIconSize,
+              height: prefixIconSize,
+              overflow: "hidden",
+            }}
+          >
+            <MaterialIcon
+              name={prefixIconName}
+              fill={prefixIconFill ? 1 : 0}
+              size={prefixIconSize}
+              className={cx(prefixIconClassName)}
+            />
+          </div>
+        ) : null}
+        <input
+          ref={ref}
+          id={label}
+          disabled={loading || rest.disabled}
+          className={cx(
+            "h-full grow rounded-xl p-4 caret-bg-inverse placeholder:text-input-text-placeholder focus:border-none focus:outline-none",
+            "text-body2",
+            size === "slim" && "text-body3",
+            className
+          )}
+          placeholder={placeholder}
+          type={inputType}
+          {...rest}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {suffixIconName ? (
+          <div
+            className="ml-2"
+            style={{
+              width: suffixIconSize,
+              height: suffixIconSize,
+              overflow: "hidden",
+            }}
+            onClick={togglePasswordVisibility}
+          >
+            <MaterialIcon
+              name={inputType === "text" ? "visibility" : "visibility_off"}
+              size={suffixIconSize}
+              fill={suffixIconFill ? 1 : 0}
+            />
+          </div>
+        ) : null}
+      </div>
+      {effectiveState === "error" && errorText && errorText != "" ? (
+        <Text
+          className={cx(
+            "footnote left-0 top-full inline-flex items-center pt-1 text-text-critical"
+          )}
+        >
+          <MaterialIcon name="info" size={20} className="mr-1" />
+          {errorText || "Error"}
+        </Text>
+      ) : null}
+    </div>
+  );
+};
+
+export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
+  InputField
+);
+
+Input.displayName = "Input";
+
+export type { InputFieldProps, InputProps };

package/src/components/input/types.ts

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  loading?: boolean;
+  iconLeft?: ReactNode;
+  size?: "sm" | "md";
+  hasError?: boolean;
+  label?: string;
+  labelClassName?: string;
+  containerClassName?: string;
+  mapPinIcon?: boolean;
+  isLightMapPinIcon?: boolean;
+  passwordToggle?: boolean;
+  helperText?: string;
+  error?: string;
+  variant?: "default" | "unstyled";
+};
+
+export type InputFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> & {
+  state?: "default" | "focus" | "active" | "hover" | "filled" | "error";
+  size?: "slim" | "medium" | "large";
+  label?: string;
+  errorText?: string;
+  prefixIconName?: "location_on" | "search";
+  prefixIconSize?: 20 | 24 | 40 | 48;
+  prefixIconFill?: boolean;
+  suffixIconFill?: boolean;
+  suffixIconName?: "visibility" | "visibility_off" | "lock";
+  suffixIconSize?: 20 | 24 | 40 | 48;
+  containerClassName?: string;
+  prefixIconClassName?: string;
+  loading?: boolean;
+  hasError?: boolean;
+};

package/src/components/link/Link.stories.tsx

@@ -0,0 +1,163 @@
+import { Link } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Link> = {
+  title: "Components/Link",
+  component: Link,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible link component with multiple variants and states.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "unstyled"],
+      description: "Link styling variant",
+    },
+    href: {
+      control: { type: "text" },
+      description: "Link URL",
+    },
+    target: {
+      control: { type: "select" },
+      options: ["_self", "_blank", "_parent", "_top"],
+      description: "Link target",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the link",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Link content",
+    },
+  },
+  args: {
+    children: "Link Text",
+    href: "#",
+    variant: "default",
+    target: "_self",
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default link
+export const Default: Story = {
+  args: {},
+};
+
+// Unstyled link
+export const Unstyled: Story = {
+  args: {
+    variant: "unstyled",
+    children: "Unstyled Link",
+  },
+};
+
+// External link
+export const External: Story = {
+  args: {
+    href: "https://example.com",
+    target: "_blank",
+    children: "External Link ↗",
+  },
+};
+
+// Disabled link
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Link",
+  },
+};
+
+// Link with icon
+export const WithIcon: Story = {
+  args: {
+    children: "Link with Icon →",
+    className: "flex items-center gap-2",
+  },
+};
+
+// Navigation links
+export const Navigation: Story = {
+  render: () => (
+    <nav className="flex gap-6">
+      <Link href="#home" variant="default">
+        Home
+      </Link>
+      <Link href="#about">About</Link>
+      <Link href="#services">Services</Link>
+      <Link href="#contact">Contact</Link>
+    </nav>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation menu with different link variants.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
+        <div className="flex gap-4">
+          <Link href="#" variant="default">
+            Default
+          </Link>
+          <Link href="#" variant="unstyled">
+            Unstyled
+          </Link>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
+        <div className="flex items-center gap-4">
+          <Link href="#" variant="default">
+            Default
+          </Link>
+          <Link href="#" variant="unstyled">
+            Unstyled
+          </Link>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">States</h3>
+        <div className="flex gap-4">
+          <Link href="#" disabled>
+            Disabled
+          </Link>
+          <Link href="https://example.com" target="_blank">
+            External ↗
+          </Link>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all link variants, sizes, and states.",
+      },
+    },
+  },
+};

package/src/components/link/index.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef } from "react";
+import { cx } from "../../utils";
+import { LinkProps } from "./types";
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      children,
+      href,
+      className = "",
+      onClick,
+      variant = "unstyled",
+      style,
+      external = false,
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    // Get Tailwind classes for different variants
+    const getVariantClasses = () => {
+      if (variant === "unstyled") return "";
+
+      // TODO: Add styles based on the figma design for all variants
+      const baseClasses =
+        "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+      const variantClasses = {
+        default:
+          "text-text underline",
+      };
+
+      const stateClasses = [
+        disabled
+          ? "opacity-60 cursor-not-allowed pointer-events-none"
+          : "cursor-pointer",
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return [
+        baseClasses,
+        variantClasses[variant as keyof typeof variantClasses] ||
+          variantClasses.default,
+        stateClasses,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    };
+
+    const tailwindClasses = getVariantClasses();
+
+    // Handle click events
+    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+
+      onClick?.(event);
+    };
+
+    // Combine all classes
+    const combinedClassName = cx(
+      tailwindClasses,
+      `link--${variant}`,
+      disabled && "link--disabled",
+      className
+    );
+
+    // Determine link props based on external/internal
+    const linkProps = {
+      ...props,
+      ref,
+      className: combinedClassName,
+      style,
+      href: disabled ? undefined : href,
+      onClick: handleClick,
+      ...(external &&
+        !disabled && {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }),
+      ...(disabled && {
+        "aria-disabled": true,
+        tabIndex: -1,
+      }),
+    };
+
+    return <a {...linkProps}>{children}</a>;
+  }
+);
+
+Link.displayName = "Link";
+
+export type { LinkProps };

package/src/components/link/types.ts

@@ -0,0 +1,25 @@
+import {
+  type AnchorHTMLAttributes,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Content to render inside the link */
+  children: ReactNode;
+  /** URL to navigate to */
+  href?: string;
+  /** Custom className for the link */
+  className?: string;
+  /** Click handler function */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  /** Additional styling options */
+  variant?: "default" | "unstyled";
+  /** Custom styles */
+  style?: CSSProperties;
+  /** External link behavior - opens in new tab */
+  external?: boolean;
+  /** Disable the link */
+  disabled?: boolean;
+}