@windstream/react-shared-components 0.0.36 → 0.0.38

package/src/components/select/index.tsx

@@ -1,150 +1,150 @@
-"use client";
-
-import React, { useMemo } from "react";
-import { cx } from "../../utils";
-import { Text } from "../text";
-import { FilterOptions, SelectOption, SelectProps } from "./types";
-import ReactSelect, { createFilter } from "react-select";
-
-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(
-              "mb-1 block text-sm font-medium text-text-secondary",
-              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="footnote mt-1 text-text-critical">{error}</Text>
-        )}
-
-        {!error && helperText && (
-          <Text className="footnote mt-1 text-text-info">{helperText}</Text>
-        )}
-      </div>
-    );
-  }
-);
-
-Select.displayName = "Select";
-
-export type { SelectOption, SelectProps, FilterOptions };
+"use client";
+
+import React, { useMemo } from "react";
+import { cx } from "../../utils";
+import { Text } from "../text";
+import { FilterOptions, SelectOption, SelectProps } from "./types";
+import ReactSelect, { createFilter } from "react-select";
+
+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(
+              "mb-1 block text-sm font-medium text-text-secondary",
+              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="footnote mt-1 text-text-critical">{error}</Text>
+        )}
+
+        {!error && helperText && (
+          <Text className="footnote mt-1 text-text-info">{helperText}</Text>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export type { SelectOption, SelectProps, FilterOptions };

package/src/components/skeleton/index.tsx

@@ -1,61 +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>
-  );
-};
+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/text/index.tsx

@@ -1,25 +1,25 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import { TextProps, TextVariant } from "./types";
-
-export const Text = forwardRef<HTMLElement, TextProps>(
-  ({ children, as, className = "", style, ...props }, ref) => {
-    const elementType = as || "p";
-
-    return React.createElement(
-      elementType,
-      {
-        ref,
-        className,
-        style,
-        ...props,
-      },
-      children
-    );
-  }
-);
-
-Text.displayName = "Text";
-
-export type { TextProps, TextVariant };
+"use client";
+
+import React, { forwardRef } from "react";
+import { TextProps, TextVariant } from "./types";
+
+export const Text = forwardRef<HTMLElement, TextProps>(
+  ({ children, as, className = "", style, ...props }, ref) => {
+    const elementType = as || "p";
+
+    return React.createElement(
+      elementType,
+      {
+        ref,
+        className,
+        style,
+        ...props,
+      },
+      children
+    );
+  }
+);
+
+Text.displayName = "Text";
+
+export type { TextProps, TextVariant };

package/src/components/text/types.ts

@@ -1,45 +1,45 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
-
-export type TextVariant =
-  | "heading1"
-  | "heading2"
-  | "heading3"
-  | "heading4"
-  | "heading5"
-  | "heading6"
-  | "subheading1"
-  | "subheading2"
-  | "subheading3"
-  | "subheading4"
-  | "subheading5"
-  | "subheading6"
-  | "body1"
-  | "body2"
-  | "body3"
-  | "footnote"
-  | "micro"
-  | "label1"
-  | "label2"
-  | "label3"
-  | "label4"
-  | "error"
-  | "unstyled";
-export type TextWeight =
-  | "thin"
-  | "normal"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "extrabold"
-  | "black"
-  | undefined;
-export interface TextProps extends HTMLAttributes<HTMLElement> {
-  /** Content to render inside the text element */
-  children?: ReactNode;
-  /** Custom HTML element to render as */
-  as?: keyof import("react").JSX.IntrinsicElements;
-  /** Custom className for the text */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+
+export type TextVariant =
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "subheading1"
+  | "subheading2"
+  | "subheading3"
+  | "subheading4"
+  | "subheading5"
+  | "subheading6"
+  | "body1"
+  | "body2"
+  | "body3"
+  | "footnote"
+  | "micro"
+  | "label1"
+  | "label2"
+  | "label3"
+  | "label4"
+  | "error"
+  | "unstyled";
+export type TextWeight =
+  | "thin"
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "black"
+  | undefined;
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** Content to render inside the text element */
+  children?: ReactNode;
+  /** Custom HTML element to render as */
+  as?: keyof import("react").JSX.IntrinsicElements;
+  /** Custom className for the text */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -1,29 +1,29 @@
-import { Accordion } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Accordion> = {
-  title: "Contentful Blocks/Accordion",
-  component: Accordion,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful accordion block.",
-      },
-    },
-  },
-  args: {
-    background: "white",
-    enableHeading: false,
-    items: [],
-    maxWidth: true,
-    title: "test",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Accordion } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Contentful Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful accordion block.",
+      },
+    },
+  },
+  args: {
+    background: "white",
+    enableHeading: false,
+    items: [],
+    maxWidth: true,
+    title: "test",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};