@windstream/react-shared-components 0.1.76 → 0.1.77

package/src/components/collapse/Collapse.stories.tsx

@@ -1,255 +1,255 @@
-import { useState } from "react";
-import { Collapse } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Collapse> = {
-  title: "Components/Collapse",
-  component: Collapse,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A collapsible component with smooth height and opacity transitions. Used to show/hide content with animations.",
-      },
-    },
-  },
-  argTypes: {
-    open: {
-      control: { type: "boolean" },
-      description: "Whether the collapse is open",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Content to collapse/expand",
-    },
-  },
-  args: {
-    open: true,
-    children: "This is collapsible content that can be shown or hidden.",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Open collapse
-export const Open: Story = {
-  args: {
-    open: true,
-    children: (
-      <div className="bg-surface-secondary rounded p-4">
-        <p className="body2 text-text">
-          This content is visible because the collapse is open.
-        </p>
-      </div>
-    ),
-  },
-};
-
-// Closed collapse
-export const Closed: Story = {
-  args: {
-    open: false,
-    children: (
-      <div className="bg-surface-secondary rounded p-4">
-        <p className="body2 text-text">
-          This content is hidden because the collapse is closed.
-        </p>
-      </div>
-    ),
-  },
-};
-
-// With content
-export const WithContent: Story = {
-  args: {
-    open: true,
-    children: (
-      <div className="bg-surface-secondary space-y-2 rounded p-4">
-        <h4 className="subheading2 text-text">Collapsible Section</h4>
-        <p className="body2 text-text">
-          This collapse contains multiple elements and demonstrates how it
-          handles different content types.
-        </p>
-        <ul className="list-disc space-y-1 pl-5">
-          <li className="body3 text-text-secondary">Item 1</li>
-          <li className="body3 text-text-secondary">Item 2</li>
-          <li className="body3 text-text-secondary">Item 3</li>
-        </ul>
-      </div>
-    ),
-  },
-};
-
-// Interactive collapse
-export const Interactive: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <div className="space-y-4">
-        <button
-          onClick={() => setOpen(!open)}
-          className="bg-fill-brand text-inverse rounded px-4 py-2"
-        >
-          {open ? "Close" : "Open"} Collapse
-        </button>
-        <Collapse open={open}>
-          <div className="bg-surface-secondary rounded p-4">
-            <p className="body2 text-text">
-              This content can be toggled by clicking the button above. The
-              collapse animates smoothly between open and closed states.
-            </p>
-          </div>
-        </Collapse>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive collapse that can be toggled. Notice the smooth height and opacity transitions.",
-      },
-    },
-  },
-};
-
-// Long content
-export const LongContent: Story = {
-  args: {
-    open: true,
-    children: (
-      <div className="bg-surface-secondary space-y-4 rounded p-4">
-        <h4 className="subheading2 text-text">Long Content Section</h4>
-        <p className="body2 text-text">
-          This collapse demonstrates how it handles longer content. The height
-          will adjust automatically based on the content size.
-        </p>
-        <div className="space-y-2">
-          <p className="body3 text-text-secondary">
-            Paragraph 1: Additional content to show height adjustment.
-          </p>
-          <p className="body3 text-text-secondary">
-            Paragraph 2: More content to demonstrate the collapse behavior.
-          </p>
-          <p className="body3 text-text-secondary">
-            Paragraph 3: Even more content to show how the component adapts.
-          </p>
-        </div>
-      </div>
-    ),
-  },
-};
-
-// Transition states
-export const TransitionStates: Story = {
-  render: () => {
-    const [open, setOpen] = useState(true);
-    return (
-      <div className="space-y-4">
-        <div className="flex gap-2">
-          <button
-            onClick={() => setOpen(true)}
-            className="bg-fill-brand text-inverse rounded px-4 py-2"
-          >
-            Open
-          </button>
-          <button
-            onClick={() => setOpen(false)}
-            className="bg-surface-secondary rounded px-4 py-2 text-text"
-          >
-            Close
-          </button>
-        </div>
-        <Collapse open={open}>
-          <div className="bg-surface-secondary border-border-default rounded border p-4">
-            <p className="body2 text-text">
-              Watch the smooth transition as this content opens and closes. The
-              collapse uses both height and opacity animations for a polished
-              effect.
-            </p>
-          </div>
-        </Collapse>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Demonstrates the smooth transition animations when opening and closing.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => {
-    const [open1, setOpen1] = useState(true);
-    const [open2, setOpen2] = useState(false);
-    return (
-      <div className="space-y-6">
-        <div>
-          <h3 className="mb-3 text-lg font-semibold">Open State</h3>
-          <Collapse open={true}>
-            <div className="bg-surface-secondary rounded p-4">
-              <p className="body2 text-text">This collapse is open.</p>
-            </div>
-          </Collapse>
-        </div>
-        <div>
-          <h3 className="mb-3 text-lg font-semibold">Closed State</h3>
-          <Collapse open={false}>
-            <div className="bg-surface-secondary rounded p-4">
-              <p className="body2 text-text">This collapse is closed.</p>
-            </div>
-          </Collapse>
-        </div>
-        <div>
-          <h3 className="mb-3 text-lg font-semibold">Interactive Examples</h3>
-          <div className="space-y-4">
-            <div>
-              <button
-                onClick={() => setOpen1(!open1)}
-                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
-              >
-                Toggle Collapse 1
-              </button>
-              <Collapse open={open1}>
-                <div className="bg-surface-secondary rounded p-4">
-                  <p className="body2 text-text">Interactive collapse 1</p>
-                </div>
-              </Collapse>
-            </div>
-            <div>
-              <button
-                onClick={() => setOpen2(!open2)}
-                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
-              >
-                Toggle Collapse 2
-              </button>
-              <Collapse open={open2}>
-                <div className="bg-surface-secondary rounded p-4">
-                  <p className="body2 text-text">Interactive collapse 2</p>
-                </div>
-              </Collapse>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all collapse states and interactive examples.",
-      },
-    },
-  },
-};
+import { useState } from "react";
+import { Collapse } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Collapse> = {
+  title: "Components/Collapse",
+  component: Collapse,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A collapsible component with smooth height and opacity transitions. Used to show/hide content with animations.",
+      },
+    },
+  },
+  argTypes: {
+    open: {
+      control: { type: "boolean" },
+      description: "Whether the collapse is open",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Content to collapse/expand",
+    },
+  },
+  args: {
+    open: true,
+    children: "This is collapsible content that can be shown or hidden.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Open collapse
+export const Open: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="bg-surface-secondary rounded p-4">
+        <p className="body2 text-text">
+          This content is visible because the collapse is open.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// Closed collapse
+export const Closed: Story = {
+  args: {
+    open: false,
+    children: (
+      <div className="bg-surface-secondary rounded p-4">
+        <p className="body2 text-text">
+          This content is hidden because the collapse is closed.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// With content
+export const WithContent: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="bg-surface-secondary space-y-2 rounded p-4">
+        <h4 className="subheading2 text-text">Collapsible Section</h4>
+        <p className="body2 text-text">
+          This collapse contains multiple elements and demonstrates how it
+          handles different content types.
+        </p>
+        <ul className="list-disc space-y-1 pl-5">
+          <li className="body3 text-text-secondary">Item 1</li>
+          <li className="body3 text-text-secondary">Item 2</li>
+          <li className="body3 text-text-secondary">Item 3</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+// Interactive collapse
+export const Interactive: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setOpen(!open)}
+          className="bg-fill-brand text-inverse rounded px-4 py-2"
+        >
+          {open ? "Close" : "Open"} Collapse
+        </button>
+        <Collapse open={open}>
+          <div className="bg-surface-secondary rounded p-4">
+            <p className="body2 text-text">
+              This content can be toggled by clicking the button above. The
+              collapse animates smoothly between open and closed states.
+            </p>
+          </div>
+        </Collapse>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive collapse that can be toggled. Notice the smooth height and opacity transitions.",
+      },
+    },
+  },
+};
+
+// Long content
+export const LongContent: Story = {
+  args: {
+    open: true,
+    children: (
+      <div className="bg-surface-secondary space-y-4 rounded p-4">
+        <h4 className="subheading2 text-text">Long Content Section</h4>
+        <p className="body2 text-text">
+          This collapse demonstrates how it handles longer content. The height
+          will adjust automatically based on the content size.
+        </p>
+        <div className="space-y-2">
+          <p className="body3 text-text-secondary">
+            Paragraph 1: Additional content to show height adjustment.
+          </p>
+          <p className="body3 text-text-secondary">
+            Paragraph 2: More content to demonstrate the collapse behavior.
+          </p>
+          <p className="body3 text-text-secondary">
+            Paragraph 3: Even more content to show how the component adapts.
+          </p>
+        </div>
+      </div>
+    ),
+  },
+};
+
+// Transition states
+export const TransitionStates: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setOpen(true)}
+            className="bg-fill-brand text-inverse rounded px-4 py-2"
+          >
+            Open
+          </button>
+          <button
+            onClick={() => setOpen(false)}
+            className="bg-surface-secondary rounded px-4 py-2 text-text"
+          >
+            Close
+          </button>
+        </div>
+        <Collapse open={open}>
+          <div className="bg-surface-secondary border-border-default rounded border p-4">
+            <p className="body2 text-text">
+              Watch the smooth transition as this content opens and closes. The
+              collapse uses both height and opacity animations for a polished
+              effect.
+            </p>
+          </div>
+        </Collapse>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the smooth transition animations when opening and closing.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => {
+    const [open1, setOpen1] = useState(true);
+    const [open2, setOpen2] = useState(false);
+    return (
+      <div className="space-y-6">
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Open State</h3>
+          <Collapse open={true}>
+            <div className="bg-surface-secondary rounded p-4">
+              <p className="body2 text-text">This collapse is open.</p>
+            </div>
+          </Collapse>
+        </div>
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Closed State</h3>
+          <Collapse open={false}>
+            <div className="bg-surface-secondary rounded p-4">
+              <p className="body2 text-text">This collapse is closed.</p>
+            </div>
+          </Collapse>
+        </div>
+        <div>
+          <h3 className="mb-3 text-lg font-semibold">Interactive Examples</h3>
+          <div className="space-y-4">
+            <div>
+              <button
+                onClick={() => setOpen1(!open1)}
+                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
+              >
+                Toggle Collapse 1
+              </button>
+              <Collapse open={open1}>
+                <div className="bg-surface-secondary rounded p-4">
+                  <p className="body2 text-text">Interactive collapse 1</p>
+                </div>
+              </Collapse>
+            </div>
+            <div>
+              <button
+                onClick={() => setOpen2(!open2)}
+                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
+              >
+                Toggle Collapse 2
+              </button>
+              <Collapse open={open2}>
+                <div className="bg-surface-secondary rounded p-4">
+                  <p className="body2 text-text">Interactive collapse 2</p>
+                </div>
+              </Collapse>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all collapse states and interactive examples.",
+      },
+    },
+  },
+};

package/src/components/collapse/index.tsx

@@ -1,46 +1,46 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { CollapsibleProps } from "./types";
-
-// Collapsible with smooth height/opacity transition
-export const Collapse = (props: CollapsibleProps) => {
-  const { open, children } = props;
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [maxHeight, setMaxHeight] = useState<number>(0);
-
-  useEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-
-    const updateHeight = () => {
-      setMaxHeight(open ? el.scrollHeight : 0);
-    };
-
-    updateHeight();
-
-    let resizeObserver: ResizeObserver | undefined;
-    if (open) {
-      resizeObserver = new ResizeObserver(() => updateHeight());
-      resizeObserver.observe(el);
-    }
-
-    return () => {
-      if (resizeObserver) resizeObserver.disconnect();
-    };
-  }, [open, children]);
-
-  return (
-    <div
-      className="overflow-hidden transition-all duration-300 ease-in-out"
-      style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
-      aria-hidden={!open}
-    >
-      <div ref={contentRef}>{children}</div>
-    </div>
-  );
-};
-
-Collapse.displayName = "Collapse";
-
-export type { CollapsibleProps };
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { CollapsibleProps } from "./types";
+
+// Collapsible with smooth height/opacity transition
+export const Collapse = (props: CollapsibleProps) => {
+  const { open, children } = props;
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [maxHeight, setMaxHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    const updateHeight = () => {
+      setMaxHeight(open ? el.scrollHeight : 0);
+    };
+
+    updateHeight();
+
+    let resizeObserver: ResizeObserver | undefined;
+    if (open) {
+      resizeObserver = new ResizeObserver(() => updateHeight());
+      resizeObserver.observe(el);
+    }
+
+    return () => {
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [open, children]);
+
+  return (
+    <div
+      className="overflow-hidden transition-all duration-300 ease-in-out"
+      style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
+      aria-hidden={!open}
+    >
+      <div ref={contentRef}>{children}</div>
+    </div>
+  );
+};
+
+Collapse.displayName = "Collapse";
+
+export type { CollapsibleProps };

package/src/components/collapse/types.ts

@@ -1,6 +1,6 @@
-import React from "react";
-
-export type CollapsibleProps = {
-  open: boolean;
-  children: React.ReactNode;
-};
+import React from "react";
+
+export type CollapsibleProps = {
+  open: boolean;
+  children: React.ReactNode;
+};