@windstream/react-shared-components 0.1.4 → 0.1.6

package/src/components/image/Image.stories.tsx

@@ -1,113 +1,113 @@
-import { forwardRef } from "react";
-import { Image } from "./index";
-import type { ImageComponentProps } from "./types";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Image> = {
-  title: "Components/Image",
-  component: Image,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A reusable image component that renders a native img by default. Pass the `as` prop with a custom component (e.g. next/image) to use Next.js Image or another image component.",
-      },
-    },
-  },
-  argTypes: {
-    src: {
-      control: { type: "text" },
-      description: "Image source URL",
-    },
-    alt: {
-      control: { type: "text" },
-      description:
-        "Alt text (required for accessibility; use empty string for decorative images)",
-    },
-    width: {
-      control: { type: "number" },
-      description: "Image width",
-    },
-    height: {
-      control: { type: "number" },
-      description: "Image height",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Custom CSS classes",
-    },
-    loading: {
-      control: { type: "select" },
-      options: ["lazy", "eager"],
-      description: "Loading behavior",
-    },
-    as: {
-      description:
-        "Custom component to render (e.g. next/image). In a Next.js app: import Image from 'next/image' then use <Image as={Image} src={...} alt={...} width={...} height={...} />",
-      control: false,
-    },
-  },
-  args: {
-    src: "https://placehold.co/400x300",
-    alt: "Placeholder image",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithDimensions: Story = {
-  args: {
-    src: "https://placehold.co/300x200",
-    alt: "Image with explicit dimensions",
-    width: 300,
-    height: 200,
-  },
-};
-
-export const WithClassName: Story = {
-  args: {
-    src: "https://placehold.co/400x300",
-    alt: "Styled image",
-    className: "rounded-lg object-cover shadow-md",
-    width: 400,
-    height: 300,
-  },
-};
-
-/** Mock component to demonstrate the `as` prop. In a Next.js app, pass next/image: <Image as={NextImage} ... /> */
-const MockImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
-  (props, ref) => <img ref={ref} {...props} />
-);
-MockImageComponent.displayName = "MockImageComponent";
-
-export const WithCustomComponent: Story = {
-  render: args => (
-    <Image
-      {...args}
-      as={MockImageComponent}
-      src="https://placehold.co/350x150"
-      alt="Rendered via custom component (as prop)"
-      width={350}
-      height={150}
-      className="rounded border-2 border-dashed border-gray-300"
-    />
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Use the `as` prop to render with a custom component. In Next.js, pass the Image component from next/image for optimized images.",
-      },
-    },
-  },
-};
+import { forwardRef } from "react";
+import { Image } from "./index";
+import type { ImageComponentProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Image> = {
+  title: "Components/Image",
+  component: Image,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A reusable image component that renders a native img by default. Pass the `as` prop with a custom component (e.g. next/image) to use Next.js Image or another image component.",
+      },
+    },
+  },
+  argTypes: {
+    src: {
+      control: { type: "text" },
+      description: "Image source URL",
+    },
+    alt: {
+      control: { type: "text" },
+      description:
+        "Alt text (required for accessibility; use empty string for decorative images)",
+    },
+    width: {
+      control: { type: "number" },
+      description: "Image width",
+    },
+    height: {
+      control: { type: "number" },
+      description: "Image height",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Custom CSS classes",
+    },
+    loading: {
+      control: { type: "select" },
+      options: ["lazy", "eager"],
+      description: "Loading behavior",
+    },
+    as: {
+      description:
+        "Custom component to render (e.g. next/image). In a Next.js app: import Image from 'next/image' then use <Image as={Image} src={...} alt={...} width={...} height={...} />",
+      control: false,
+    },
+  },
+  args: {
+    src: "https://placehold.co/400x300",
+    alt: "Placeholder image",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithDimensions: Story = {
+  args: {
+    src: "https://placehold.co/300x200",
+    alt: "Image with explicit dimensions",
+    width: 300,
+    height: 200,
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    src: "https://placehold.co/400x300",
+    alt: "Styled image",
+    className: "rounded-lg object-cover shadow-md",
+    width: 400,
+    height: 300,
+  },
+};
+
+/** Mock component to demonstrate the `as` prop. In a Next.js app, pass next/image: <Image as={NextImage} ... /> */
+const MockImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
+  (props, ref) => <img ref={ref} {...props} />
+);
+MockImageComponent.displayName = "MockImageComponent";
+
+export const WithCustomComponent: Story = {
+  render: args => (
+    <Image
+      {...args}
+      as={MockImageComponent}
+      src="https://placehold.co/350x150"
+      alt="Rendered via custom component (as prop)"
+      width={350}
+      height={150}
+      className="rounded border-2 border-dashed border-gray-300"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `as` prop to render with a custom component. In Next.js, pass the Image component from next/image for optimized images.",
+      },
+    },
+  },
+};

package/src/components/image/index.tsx

@@ -1,25 +1,25 @@
-"use client";
-
-import { forwardRef } from "react";
-
-import type { ImageProps } from "@shared/components/image/types";
-import { cx } from "@shared/utils";
-
-export const Image = forwardRef<HTMLImageElement, ImageProps>(
-  ({ as: ImageComponent, className = "", ...rest }, ref) => {
-    const combinedClassName = cx(className);
-
-    if (ImageComponent) {
-      // Cast to any to allow ref forwarding for custom components
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const Component = ImageComponent as any;
-      return <Component ref={ref} className={combinedClassName} {...rest} />;
-    }
-
-    return <img ref={ref} className={combinedClassName} {...rest} />;
-  }
-);
-
-Image.displayName = "Image";
-
-export type { ImageProps, ImageComponentProps } from "./types";
+"use client";
+
+import { forwardRef } from "react";
+
+import type { ImageProps } from "@shared/components/image/types";
+import { cx } from "@shared/utils";
+
+export const Image = forwardRef<HTMLImageElement, ImageProps>(
+  ({ as: ImageComponent, className = "", ...rest }, ref) => {
+    const combinedClassName = cx(className);
+
+    if (ImageComponent) {
+      // Cast to any to allow ref forwarding for custom components
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Component = ImageComponent as any;
+      return <Component ref={ref} className={combinedClassName} {...rest} />;
+    }
+
+    return <img ref={ref} className={combinedClassName} {...rest} />;
+  }
+);
+
+Image.displayName = "Image";
+
+export type { ImageProps, ImageComponentProps } from "./types";

package/src/components/image/types.ts

@@ -1,40 +1,40 @@
-import type {
-  ComponentType,
-  ForwardRefExoticComponent,
-  ImgHTMLAttributes,
-  RefAttributes,
-} from "react";
-
-/**
- * Props passed to the custom image component when using the `as` prop.
- * Covers native img attributes plus optional Next.js Image props (fill, sizes, priority, etc.).
- */
-export interface ImageComponentProps
-  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
-  /** Image source URL */
-  src: string;
-  /** Alt text (required for accessibility; use "" for decorative images) */
-  alt: string;
-  /** Optional; used by Next.js Image when using fill layout */
-  fill?: boolean;
-  /** Optional; used by Next.js Image for responsive sizes */
-  sizes?: string;
-  /** Optional; used by Next.js Image for priority loading */
-  priority?: boolean;
-  /** Optional; used by Next.js Image for blur placeholder */
-  placeholder?: "blur" | "empty";
-  /** Optional; used by Next.js Image for quality (1–100) */
-  quality?: number;
-}
-
-/** Type for custom image component that supports ref forwarding */
-type ImageComponent =
-  | ComponentType<ImageComponentProps>
-  | ForwardRefExoticComponent<
-      ImageComponentProps & RefAttributes<HTMLImageElement>
-    >;
-
-export interface ImageProps extends ImageComponentProps {
-  /** Custom component to render instead of native img (e.g. next/image) */
-  as?: ImageComponent;
-}
+import type {
+  ComponentType,
+  ForwardRefExoticComponent,
+  ImgHTMLAttributes,
+  RefAttributes,
+} from "react";
+
+/**
+ * Props passed to the custom image component when using the `as` prop.
+ * Covers native img attributes plus optional Next.js Image props (fill, sizes, priority, etc.).
+ */
+export interface ImageComponentProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
+  /** Image source URL */
+  src: string;
+  /** Alt text (required for accessibility; use "" for decorative images) */
+  alt: string;
+  /** Optional; used by Next.js Image when using fill layout */
+  fill?: boolean;
+  /** Optional; used by Next.js Image for responsive sizes */
+  sizes?: string;
+  /** Optional; used by Next.js Image for priority loading */
+  priority?: boolean;
+  /** Optional; used by Next.js Image for blur placeholder */
+  placeholder?: "blur" | "empty";
+  /** Optional; used by Next.js Image for quality (1–100) */
+  quality?: number;
+}
+
+/** Type for custom image component that supports ref forwarding */
+type ImageComponent =
+  | ComponentType<ImageComponentProps>
+  | ForwardRefExoticComponent<
+      ImageComponentProps & RefAttributes<HTMLImageElement>
+    >;
+
+export interface ImageProps extends ImageComponentProps {
+  /** Custom component to render instead of native img (e.g. next/image) */
+  as?: ImageComponent;
+}