@fpkit/acss 3.1.1 → 3.2.0

package/src/components/cluster/cluster.stories.tsx

@@ -0,0 +1,385 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
+
+import { Cluster } from "./cluster";
+import "./cluster.scss";
+
+const meta: Meta<typeof Cluster> = {
+  title: "FP.React Components/Layout/Cluster",
+  component: Cluster,
+  tags: ["autodocs", "rc", "layout"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# Cluster - Layout Primitive
+
+A wrapping flex layout for inline groups that need to flow and wrap naturally.
+
+## Features
+
+- **Auto-Wrapping**: Items wrap to next line when container is full
+- **Fluid Spacing**: Responsive gap using CSS clamp()
+- **Semantic**: Clear intent for inline grouped content
+- **Polymorphic**: Render as any semantic HTML element
+- **Type-Safe**: Full TypeScript support
+
+## When to Use
+
+- **Cluster**: Inline content that wraps (tags, badges, buttons)
+- **Stack**: Vertical/horizontal layouts without wrapping
+- **Box**: Padding/margin on containers (no gap)
+
+[View Full Documentation →](https://github.com/anthropics/fpkit/blob/main/packages/fpkit/src/components/cluster/README.mdx)
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default Cluster with small gap.
+ * Perfect for tag clouds and inline groups.
+ */
+export const Default: Story = {
+  args: {
+    gap: "sm",
+    children: (
+      <>
+        {["React", "TypeScript", "CSS", "Accessibility", "Performance"].map((tag) => (
+          <span
+            key={tag}
+            style={{
+              padding: "0.25rem 0.75rem",
+              backgroundColor: "#f0f0f0",
+              borderRadius: "0.25rem",
+              fontSize: "0.875rem",
+            }}
+          >
+            {tag}
+          </span>
+        ))}
+      </>
+    ),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Cluster renders correctly", async () => {
+      expect(canvas.getByText("React")).toBeInTheDocument();
+    });
+
+    await step("Cluster has correct classes", async () => {
+      const cluster = canvas.getByText("React").parentElement;
+      expect(cluster).toHaveClass("cluster");
+      expect(cluster).toHaveClass("cluster-gap-sm");
+    });
+  },
+};
+
+/**
+ * Button group with wrapping.
+ * Buttons wrap to next line when they exceed container width.
+ */
+export const ButtonGroup: Story = {
+  args: {
+    gap: "md",
+    styles: { maxWidth: "400px" },
+    children: (
+      <>
+        {[...Array(8)].map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            style={{
+              padding: "0.5rem 1rem",
+              backgroundColor: "#0066cc",
+              color: "#fff",
+              border: "none",
+              borderRadius: "0.25rem",
+              cursor: "pointer",
+            }}
+          >
+            Action {i + 1}
+          </button>
+        ))}
+      </>
+    ),
+  },
+};
+
+/**
+ * Centered tag cloud.
+ * Tags centered horizontally with wrapping.
+ */
+export const CenteredTags: Story = {
+  args: {
+    gap: "sm",
+    justify: "center",
+    children: (
+      <>
+        {["HTML", "CSS", "JavaScript", "React", "Vue", "Angular", "Svelte", "TypeScript"].map(
+          (tech) => (
+            <span
+              key={tech}
+              style={{
+                padding: "0.375rem 1rem",
+                backgroundColor: "#e8f4f8",
+                color: "#0066cc",
+                borderRadius: "1rem",
+                fontSize: "0.875rem",
+                fontWeight: "500",
+              }}
+            >
+              {tech}
+            </span>
+          )
+        )}
+      </>
+    ),
+  },
+};
+
+/**
+ * Badge cluster.
+ * Multiple badges with different colors and sizes.
+ */
+export const Badges: Story = {
+  render: () => (
+    <Cluster gap="xs">
+      <span
+        style={{
+          padding: "0.25rem 0.5rem",
+          backgroundColor: "#d4edda",
+          color: "#155724",
+          borderRadius: "0.25rem",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+        }}
+      >
+        Active
+      </span>
+      <span
+        style={{
+          padding: "0.25rem 0.5rem",
+          backgroundColor: "#d1ecf1",
+          color: "#0c5460",
+          borderRadius: "0.25rem",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+        }}
+      >
+        New
+      </span>
+      <span
+        style={{
+          padding: "0.25rem 0.5rem",
+          backgroundColor: "#fff3cd",
+          color: "#856404",
+          borderRadius: "0.25rem",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+        }}
+      >
+        Beta
+      </span>
+      <span
+        style={{
+          padding: "0.25rem 0.5rem",
+          backgroundColor: "#f8d7da",
+          color: "#721c24",
+          borderRadius: "0.25rem",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+        }}
+      >
+        Deprecated
+      </span>
+    </Cluster>
+  ),
+};
+
+/**
+ * Navigation links with baseline alignment.
+ * Links aligned by baseline for consistent text alignment.
+ */
+export const Navigation: Story = {
+  args: {
+    as: "nav",
+    gap: "lg",
+    align: "baseline",
+    justify: "center",
+    styles: {
+      padding: "1rem",
+      backgroundColor: "#f8f9fa",
+      border: "1px solid #e0e0e0",
+    },
+    children: (
+      <>
+        <a href="#home" style={{ textDecoration: "none", color: "#0066cc", fontSize: "1rem" }}>
+          Home
+        </a>
+        <a href="#products" style={{ textDecoration: "none", color: "#0066cc", fontSize: "1rem" }}>
+          Products
+        </a>
+        <a href="#about" style={{ textDecoration: "none", color: "#0066cc", fontSize: "1rem" }}>
+          About
+        </a>
+        <a href="#contact" style={{ textDecoration: "none", color: "#0066cc", fontSize: "1rem" }}>
+          Contact
+        </a>
+      </>
+    ),
+  },
+};
+
+/**
+ * Different gap sizes.
+ * Demonstrates the unified spacing scale from xs to xl.
+ */
+export const GapSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
+      {["xs", "sm", "md", "lg", "xl"].map((size) => (
+        <div key={size}>
+          <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap {size.toUpperCase()}</h4>
+          <Cluster gap={size as SpacingScale} styles={{ border: "2px dashed #ccc", padding: "1rem" }}>
+            {[...Array(6)].map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  padding: "0.5rem",
+                  backgroundColor: "#f0f0f0",
+                  border: "1px solid #ccc",
+                }}
+              >
+                Item {i + 1}
+              </span>
+            ))}
+          </Cluster>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Alignment variations.
+ * Demonstrates different vertical alignment options.
+ */
+export const Alignments: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
+      {["start", "center", "end", "baseline"].map((alignment) => (
+        <div key={alignment}>
+          <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Align {alignment}</h4>
+          <Cluster
+            gap="md"
+            align={alignment as "start" | "center" | "end"}
+            styles={{ border: "2px dashed #ccc", padding: "1rem", minHeight: "80px" }}
+          >
+            <span style={{ padding: "0.5rem", backgroundColor: "#f0f0f0", fontSize: "0.875rem" }}>
+              Small
+            </span>
+            <span style={{ padding: "1rem", backgroundColor: "#e0e0e0", fontSize: "1rem" }}>
+              Medium
+            </span>
+            <span style={{ padding: "1.5rem", backgroundColor: "#d0d0d0", fontSize: "1.25rem" }}>
+              Large
+            </span>
+          </Cluster>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Justification variations.
+ * Demonstrates different horizontal alignment options.
+ */
+export const Justifications: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
+      {["start", "center", "end", "between"].map((justification) => (
+        <div key={justification}>
+          <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Justify {justification}</h4>
+          <Cluster
+            gap="sm"
+            justify={justification as "start" | "center" | "end" | "between"}
+            styles={{ border: "2px dashed #ccc", padding: "1rem" }}
+          >
+            {[...Array(4)].map((_, i) => (
+              <span
+                key={i}
+                style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0", border: "1px solid #ccc" }}
+              >
+                Item {i + 1}
+              </span>
+            ))}
+          </Cluster>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Filter pills.
+ * Interactive filter tags that wrap naturally.
+ */
+export const FilterPills: Story = {
+  render: () => (
+    <Cluster gap="sm" styles={{ maxWidth: "500px" }}>
+      {["All", "Active", "Completed", "In Progress", "Pending", "Cancelled"].map((filter) => (
+        <button
+          key={filter}
+          type="button"
+          style={{
+            padding: "0.5rem 1rem",
+            backgroundColor: filter === "All" ? "#0066cc" : "#fff",
+            color: filter === "All" ? "#fff" : "#333",
+            border: "1px solid #ccc",
+            borderRadius: "1.5rem",
+            cursor: "pointer",
+            fontSize: "0.875rem",
+          }}
+        >
+          {filter}
+        </button>
+      ))}
+    </Cluster>
+  ),
+};
+
+/**
+ * Semantic list.
+ * Using ul element for semantic list of items.
+ */
+export const SemanticList: Story = {
+  args: {
+    as: "ul",
+    gap: "md",
+    styles: { listStyle: "none", padding: 0 },
+    children: (
+      <>
+        {["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"].map((item) => (
+          <li
+            key={item}
+            style={{
+              padding: "0.75rem 1rem",
+              backgroundColor: "#f8f9fa",
+              border: "1px solid #e0e0e0",
+              borderRadius: "0.25rem",
+            }}
+          >
+            {item}
+          </li>
+        ))}
+      </>
+    ),
+  },
+};