@windstream/react-shared-components 0.0.1

package/src/components/select/index.tsx

@@ -0,0 +1,150 @@
+import React, { useMemo } from "react";
+import ReactSelect, { createFilter } from "react-select";
+
+import { cx } from "../../utils";
+import { Text } from "../text";
+import { FilterOptions, SelectOption, SelectProps } from "./types";
+
+export const Select: React.FC<SelectProps> = React.memo(
+  ({
+    options,
+    className,
+    controlClassName,
+    value,
+    isCustomStyle = false,
+    placeholder,
+    required,
+    onChange,
+    filterOptions,
+    hasError,
+    error,
+    helperText,
+    label,
+    labelClassName,
+    size = "md",
+    variant = "default",
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...rest
+  }) => {
+    const memoizedFilterOption = useMemo(
+      () => createFilter(filterOptions),
+      [filterOptions]
+    );
+
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return "h-[48px] px-3 rounded-lg";
+        case "md":
+        default:
+          return "h-[56px] px-3 rounded-xl";
+      }
+    };
+
+    const memoizedClassNames = useMemo(
+      () => ({
+        control: ({ isFocused }: any) =>
+          cx(
+            getSizeClasses(),
+            "border border-input-border bg-white hover:not-focus:border-input-border-hover",
+            {
+              "border-input-border-selected outline outline-2 outline-input-border-selected":
+                isFocused && !hasError,
+              "border-input-border-critical shadow-none": hasError,
+            },
+            controlClassName
+          ),
+        indicatorSeparator: () => "hidden",
+        dropdownIndicator: ({ selectProps }: any) =>
+          isCustomStyle ? (selectProps.value ? "hidden" : "block") : `block text-icon-default ${hasError ? "text-icon-critical":""}`,
+        singleValue: () =>
+          cx(
+            isCustomStyle
+              ? "text-text text-body1 whitespace-normal"
+              : "text-text-secondary"
+          ),
+        menu: () => "z-20 mt-2",
+        option: ({ isFocused, isSelected, label }: any) =>
+          cx(
+            "min-h-[40px] px-4 py-2 cursor-pointer",
+            isSelected
+              ? "bg-gray-200 text-text font-semibold"
+              : "bg-white text-text-secondary",
+            !isSelected && "hover:bg-bg-surface-hover",
+            !isSelected && isFocused && "bg-bg-surface-hover",
+            isCustomStyle
+              ? "text-body1 text-text"
+              : "",
+            !isCustomStyle || options[options.length - 1]?.label === label
+              ? ""
+              : "border-b border-border-brand"
+          ),
+        placeholder: () => "text-input-text-placeholder",
+        input: () => "text-text",
+        valueContainer: () => "px-0",
+      }),
+      [isCustomStyle, controlClassName, options, hasError, size]
+    );
+
+    if (variant === "unstyled") {
+      return (
+        <ReactSelect
+          options={options}
+          value={value}
+          placeholder={required ? `${placeholder}*` : placeholder}
+          onChange={onChange}
+          filterOption={memoizedFilterOption}
+          className={cx("rounded-xl", className)}
+          classNames={memoizedClassNames}
+          data-cy={dataCy}
+          data-testid={dataTestId}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label className={cx("block text-sm font-medium text-text-secondary mb-1", labelClassName)}>
+            {label}
+          </label>
+        )}
+
+        <ReactSelect
+          options={options}
+          value={value}
+          placeholder={required ? `${placeholder}*` : placeholder}
+          onChange={onChange}
+          filterOption={memoizedFilterOption}
+          className={cx("rounded-xl", className)}
+          classNames={memoizedClassNames}
+          data-cy={dataCy}
+          data-testid={dataTestId}
+          {...rest}
+        />
+
+        {error && (
+          <Text
+            className="mt-1 footnote text-text-critical"
+          >
+            {error}
+          </Text>
+        )}
+
+        {!error && helperText && (
+          <Text
+            className="mt-1 footnote text-text-info"
+          >
+            {helperText}
+          </Text>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export type { SelectOption, SelectProps, FilterOptions };

package/src/components/select/types.ts

@@ -0,0 +1,34 @@
+import { Props as ReactSelectProps } from "react-select";
+
+export interface SelectOption<T = any> {
+  label: string;
+  value: string;
+  data?: T;
+}
+
+export type FilterOptions = {
+  ignoreCase?: boolean;
+  ignoreAccents?: boolean;
+  trim?: boolean;
+  matchFrom?: "start" | "any";
+};
+
+export type OwnProps = {
+  options: SelectOption[];
+  value?: SelectOption;
+  className?: string;
+  isCustomStyle?: boolean;
+  controlClassName?: string;
+  filterOptions?: FilterOptions;
+  hasError?: boolean;
+  error?: string;
+  helperText?: string;
+  label?: string;
+  labelClassName?: string;
+  size?: "sm" | "md";
+  variant?: "default" | "unstyled";
+  "data-cy"?: string;
+  "data-testid"?: string;
+};
+
+export type SelectProps = OwnProps & Omit<ReactSelectProps<SelectOption>, "options" | "value" | "className">;

package/src/components/select-plan-button/SelectPlanButton.stories.tsx

@@ -0,0 +1,160 @@
+import { SelectPlanButton } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SelectPlanButton> = {
+  title: "Components/SelectPlanButton",
+  component: SelectPlanButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A button component specifically designed for selecting plans, with speed information and interactive states.",
+      },
+    },
+  },
+  argTypes: {
+    speed: {
+      control: { type: "text" },
+      description: "Speed value for the plan",
+    },
+    onSelect: {
+      action: "selected",
+      description: "Callback function when button is clicked",
+    },
+  },
+  args: {
+    speed: "100 Mbps",
+    onSelect: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button
+export const Default: Story = {
+  args: {},
+};
+
+// With speed prop
+export const WithSpeed: Story = {
+  args: {
+    speed: "500 Mbps",
+  },
+};
+
+// Different speeds
+export const DifferentSpeeds: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-3">
+      <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
+      <SelectPlanButton speed="250 Mbps" onSelect={() => {}} />
+      <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
+      <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "SelectPlanButton with different speed values.",
+      },
+    },
+  },
+};
+
+// Interactive state
+export const Interactive: Story = {
+  render: () => {
+    const handleSelect = (speed: string) => {
+      alert(`Selected plan: ${speed}`);
+    };
+    return (
+      <div className="w-full max-w-md space-y-3">
+        <SelectPlanButton speed="100 Mbps" onSelect={() => handleSelect("100 Mbps")} />
+        <SelectPlanButton speed="500 Mbps" onSelect={() => handleSelect("500 Mbps")} />
+        <SelectPlanButton speed="1 Gbps" onSelect={() => handleSelect("1 Gbps")} />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive SelectPlanButton examples that trigger callbacks.",
+      },
+    },
+  },
+};
+
+// In plan card
+export const InPlanCard: Story = {
+  render: () => (
+    <div className="w-full max-w-sm rounded-lg border border-border-default p-6 space-y-4">
+      <div>
+        <h3 className="heading3 text-text">Standard Plan</h3>
+        <p className="body2 text-text-secondary mt-1">Perfect for families</p>
+      </div>
+      <div>
+        <p className="heading2 text-text">$49.99</p>
+        <p className="body3 text-text-secondary">per month</p>
+      </div>
+      <ul className="space-y-2">
+        <li className="body3 text-text">Up to 500 Mbps</li>
+        <li className="body3 text-text">Unlimited data</li>
+        <li className="body3 text-text">Free installation</li>
+      </ul>
+      <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "SelectPlanButton used within a plan card layout.",
+      },
+    },
+  },
+};
+
+// 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">Different Speeds</h3>
+        <div className="space-y-3">
+          <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
+          <SelectPlanButton speed="250 Mbps" onSelect={() => {}} />
+          <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
+          <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">In Context</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="rounded-lg border border-border-default p-4 space-y-3">
+            <h4 className="subheading1 text-text">Basic Plan</h4>
+            <p className="body2 text-text-secondary">100 Mbps</p>
+            <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
+          </div>
+          <div className="rounded-lg border border-border-default p-4 space-y-3">
+            <h4 className="subheading1 text-text">Premium Plan</h4>
+            <p className="body2 text-text-secondary">1 Gbps</p>
+            <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all SelectPlanButton variants and use cases.",
+      },
+    },
+  },
+};
+

package/src/components/select-plan-button/index.tsx

@@ -0,0 +1,21 @@
+import { cx } from "@shared/utils"
+import { Button } from "../button"
+import { MaterialIcon } from "../material-icon"
+import { SelectPlanButtonProps } from "./types"
+const className = "btn-medium rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"
+export const SelectPlanButton:React.FC<SelectPlanButtonProps> = ({ onSelect, speed }) => {
+  return <Button
+    onClick={onSelect}
+    className={cx(className,`w-full justify-between pl-5 pr-5`)}
+    data-track-element-name="speed_plan_select_button"
+    data-track-click-text={`Select plan speed ${speed}`}
+    data-track-element-clicked="speed_plan_card"
+  >
+    <span>Select plan</span>
+    <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-bg text-icon-brand">
+      <MaterialIcon name="chevron_right" fill={1} size={24} />
+    </span>
+  </Button>
+}
+
+export type { SelectPlanButtonProps } from "./types";

package/src/components/select-plan-button/types.ts

@@ -0,0 +1,4 @@
+export type SelectPlanButtonProps = {
+  onSelect: () => void;
+  speed: string;
+};

package/src/components/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,180 @@
+import { Skeleton, PageSkeleton } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Loading skeleton components for displaying placeholder content while data is being loaded.",
+      },
+    },
+  },
+  argTypes: {
+    count: {
+      control: { type: "number" },
+      description: "Number of skeleton lines to display",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    count: 1,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default skeleton
+export const Default: Story = {
+  args: {},
+};
+
+// Multiple counts
+export const Multiple: Story = {
+  args: {
+    count: 3,
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    count: 2,
+    className: "h-12 rounded-lg",
+  },
+};
+
+// Different counts
+export const DifferentCounts: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-4">
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Single Line</h4>
+        <Skeleton count={1} />
+      </div>
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Three Lines</h4>
+        <Skeleton count={3} />
+      </div>
+      <div>
+        <h4 className="mb-2 text-sm font-medium">Five Lines</h4>
+        <Skeleton count={5} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Skeleton with different line counts.",
+      },
+    },
+  },
+};
+
+// Page skeleton
+export const PageSkeletonExample: Story = {
+  render: () => (
+    <div className="w-full">
+      <PageSkeleton />
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story: "PageSkeleton component for full page loading states.",
+      },
+    },
+  },
+};
+
+// In card
+export const InCard: Story = {
+  render: () => (
+    <div className="w-full max-w-sm rounded-lg border border-border-default p-6 space-y-4">
+      <Skeleton count={1} className="h-6 w-3/4" />
+      <Skeleton count={2} />
+      <Skeleton count={1} className="h-10 w-full" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Skeleton used within a card layout.",
+      },
+    },
+  },
+};
+
+// List skeleton
+export const ListSkeleton: Story = {
+  render: () => (
+    <div className="w-full max-w-md space-y-3">
+      {[1, 2, 3, 4, 5].map((i) => (
+        <div key={i} className="flex items-center gap-3">
+          <Skeleton count={1} className="h-12 w-12 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton count={1} className="h-4 w-3/4" />
+            <Skeleton count={1} className="h-3 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Skeleton used for loading list items.",
+      },
+    },
+  },
+};
+
+// 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">Basic Skeleton</h3>
+        <Skeleton count={3} />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
+        <Skeleton count={2} className="h-8 rounded-lg" />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">In Card</h3>
+        <div className="rounded-lg border border-border-default p-6 space-y-4">
+          <Skeleton count={1} className="h-6 w-3/4" />
+          <Skeleton count={2} />
+          <Skeleton count={1} className="h-10 w-full" />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Page Skeleton</h3>
+        <div className="border border-border-default rounded p-4">
+          <PageSkeleton />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all skeleton variants and use cases.",
+      },
+    },
+  },
+};
+

package/src/components/skeleton/index.tsx

@@ -0,0 +1,61 @@
+import { FC } from "react";
+import { SkeletonProps } from "./types";
+
+export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
+  return (
+    <div className="animate-pulse space-y-4">
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
+          style={{ opacity: 1 - index * 0.1 }}
+        />
+      ))}
+    </div>
+  );
+};
+
+Skeleton.displayName = "Skeleton";
+
+export type { SkeletonProps };
+
+export const PageSkeleton: FC = () => {
+  return (
+    <div
+      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
+      data-testid="generic-skeleton"
+    >
+      {/* Title */}
+      <div
+        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
+        data-testid="title"
+      />
+
+      {/* Subtitle */}
+      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Content */}
+      <div className="item-center flex flex-col gap-3" data-testid="content">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
+      </div>
+
+      {/* Additional Information */}
+      <div
+        className="item-center flex flex-col gap-6"
+        data-testid="additional-info"
+      >
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
+      </div>
+
+      {/* CTA button */}
+      <div className="item-center flex justify-center" data-testid="cta-button">
+        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
+      </div>
+    </div>
+  );
+};

package/src/components/skeleton/types.ts

@@ -0,0 +1,4 @@
+export type SkeletonProps = {
+	className?: string;
+	count?: number;
+}