[core] Add Storybook stories for Collapse (#7943)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: mm-wang

packages/core/src/components/collapse/Collapse.stories.tsx

@@ -0,0 +1,125 @@
+/*
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useCallback } from "react";
+import { useArgs } from "storybook/preview-api";
+
+import { Button } from "../button/buttons";
+import { Code, H4 } from "../html/html";
+
+import { Collapse } from "./collapse";
+
+const sampleContent = (
+    <div style={{ padding: 12, background: "var(--pt-app-background-color)", border: "1px solid var(--gray3)" }}>
+        <p style={{ margin: 0 }}>
+            This is an example of collapsible content. It can contain any valid React elements, including paragraphs,
+            lists, forms, or other components.
+        </p>
+    </div>
+);
+
+const meta: Meta<typeof Collapse> = {
+    title: "Core/Collapse",
+    component: Collapse,
+    decorators: [
+        Story => (
+            <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: "400px", maxWidth: "500px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    args: {
+        isOpen: false,
+        keepChildrenMounted: false,
+        transitionDuration: 200,
+    },
+    argTypes: {
+        isOpen: {
+            control: "boolean",
+        },
+        keepChildrenMounted: {
+            control: "boolean",
+        },
+        transitionDuration: {
+            control: "number",
+        },
+        component: {
+            control: "text",
+        },
+    },
+} satisfies Meta<typeof Collapse>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A basic collapse that reveals and hides content with a smooth sliding animation.
+ * Use the `isOpen` control to toggle visibility.
+ */
+export const Default: Story = {
+    args: {
+        isOpen: true,
+    },
+    argTypes: {
+        component: { table: { disable: true } },
+    },
+    render: function RenderDefault(args) {
+        const [, updateArgs] = useArgs();
+        const handleToggle = useCallback(() => updateArgs({ isOpen: !args.isOpen }), [args.isOpen, updateArgs]);
+
+        return (
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                <Button text={args.isOpen ? "Hide content" : "Show content"} onClick={handleToggle} />
+                <Collapse {...args}>{sampleContent}</Collapse>
+            </div>
+        );
+    },
+};
+
+/**
+ * Interactive playground with all props toggleable via Storybook controls.
+ */
+export const Playground: Story = {
+    args: {
+        isOpen: false,
+    },
+    argTypes: {
+        component: { table: { disable: true } },
+    },
+    render: function RenderPlayground(args) {
+        const [, updateArgs] = useArgs();
+        const handleToggle = useCallback(() => updateArgs({ isOpen: !args.isOpen }), [args.isOpen, updateArgs]);
+
+        return (
+            <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 400 }}>
+                <Button text={args.isOpen ? "Collapse" : "Expand"} onClick={handleToggle} icon="exchange" />
+                <Collapse {...args}>
+                    <div
+                        style={{
+                            padding: 16,
+                            background: "var(--pt-app-background-color)",
+                            border: "1px solid var(--gray3)",
+                            borderRadius: 4,
+                        }}
+                    >
+                        <H4 style={{ marginTop: 0 }}>Collapsible Content</H4>
+                        <p>
+                            This content is revealed and hidden with a smooth sliding animation. Toggle the controls in
+                            the Storybook panel to adjust the component behavior.
+                        </p>
+                        <p style={{ marginBottom: 0 }}>
+                            Try adjusting <Code>transitionDuration</Code> and <Code>keepChildrenMounted</Code> to see
+                            their effects.
+                        </p>
+                    </div>
+                </Collapse>
+            </div>
+        );
+    },
+};