platform-codebase/@packages/@utility/zname/src/react.stories.tsx

// @ts-nocheck
import type { Meta, StoryObj } from "@storybook/react";
import React from "react";
import { ZName } from "./react";

const meta = {
  title: "ZName/React",
  component: ZName,
  parameters: {
    layout: "padded",
  },
  tags: ["autodocs"],
  argTypes: {
    name: {
      control: "select",
      options: [
        "base",
        "dropdown",
        "header",
        "sidebar",
        "overlay",
        "modal",
        "notification",
        "tooltip",
      ],
    },
    zIndex: {
      control: "number",
    },
  },
} satisfies Meta<typeof ZName>;

export default meta;
type Story = StoryObj<typeof meta>;

const Box = ({ color, label }: { color: string; label: string }) => (
  <div
    style={{
      backgroundColor: color,
      padding: "20px",
      borderRadius: "8px",
      position: "absolute",
      minWidth: "200px",
      boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
      color: "#fff",
      fontWeight: "bold",
    }}
  >
    {label}
  </div>
);

export const Default: Story = {
  args: {
    name: "modal",
    children: <Box color="#8e44ad" label="Modal Layer" />,
  },
};

export const LayersDemo: Story = {
  render: () => (
    <div style={{ position: "relative", minHeight: "400px" }}>
      <ZName name="base">
        <Box color="#e74c3c" label="Base (z=1)" />
      </ZName>
      <ZName
        name="dropdown"
        style={{ position: "absolute", top: "20px", left: "20px" }}
      >
        <Box color="#e67e22" label="Dropdown (z=11)" />
      </ZName>
      <ZName
        name="header"
        style={{ position: "absolute", top: "40px", left: "40px" }}
      >
        <Box color="#f1c40f" label="Header (z=21)" />
      </ZName>
      <ZName
        name="sidebar"
        style={{ position: "absolute", top: "60px", left: "60px" }}
      >
        <Box color="#2ecc71" label="Sidebar (z=31)" />
      </ZName>
      <ZName
        name="overlay"
        style={{ position: "absolute", top: "80px", left: "80px" }}
      >
        <Box color="#3498db" label="Overlay (z=41)" />
      </ZName>
      <ZName
        name="modal"
        style={{ position: "absolute", top: "100px", left: "100px" }}
      >
        <Box color="#9b59b6" label="Modal (z=51)" />
      </ZName>
      <ZName
        name="notification"
        style={{ position: "absolute", top: "120px", left: "120px" }}
      >
        <Box color="#34495e" label="Notification (z=61)" />
      </ZName>
      <ZName
        name="tooltip"
        style={{ position: "absolute", top: "140px", left: "140px" }}
      >
        <Box color="#16a085" label="Tooltip (z=71)" />
      </ZName>
    </div>
  ),
};

export const CustomZIndex: Story = {
  args: {
    name: "modal",
    zIndex: 999,
    children: <Box color="#e74c3c" label="Custom z-index (999)" />,
  },
};

export const WithCustomConfig: Story = {
  render: () => (
    <div style={{ position: "relative", minHeight: "200px" }}>
      <ZName name="modal" config={{ base: 100, step: 100 }}>
        <Box color="#3498db" label="Modal with custom config (z=600)" />
      </ZName>
    </div>
  ),
};

export const ComplexLayout: Story = {
  render: () => (
    <div
      style={{
        position: "relative",
        minHeight: "500px",
        backgroundColor: "#f0f0f0",
        padding: "20px",
      }}
    >
      <ZName
        name="header"
        style={{ position: "fixed", top: 0, left: 0, right: 0 }}
      >
        <div
          style={{
            backgroundColor: "#2c3e50",
            padding: "15px",
            color: "#fff",
            fontWeight: "bold",
            fontSize: "18px",
          }}
        >
          Fixed Header
        </div>
      </ZName>

      <ZName
        name="sidebar"
        style={{ position: "fixed", left: 0, top: "50px", width: "200px" }}
      >
        <div
          style={{
            backgroundColor: "#34495e",
            padding: "20px",
            height: "300px",
            color: "#fff",
          }}
        >
          Sidebar Navigation
        </div>
      </ZName>

      <div style={{ marginLeft: "220px", marginTop: "70px" }}>
        <h2>Main Content Area</h2>
        <p>This content sits below the header and beside the sidebar.</p>

        <ZName
          name="dropdown"
          style={{ position: "absolute", top: "150px", left: "250px" }}
        >
          <div
            style={{
              backgroundColor: "#3498db",
              padding: "10px",
              borderRadius: "4px",
              color: "#fff",
              width: "150px",
            }}
          >
            Dropdown Menu
          </div>
        </ZName>

        <ZName
          name="modal"
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
          }}
        >
          <div
            style={{
              backgroundColor: "#9b59b6",
              padding: "30px",
              borderRadius: "8px",
              color: "#fff",
              boxShadow: "0 5px 20px rgba(0,0,0,0.5)",
              minWidth: "300px",
              textAlign: "center",
            }}
          >
            Modal Dialog
          </div>
        </ZName>

        <ZName
          name="tooltip"
          style={{ position: "absolute", bottom: "20px", right: "20px" }}
        >
          <div
            style={{
              backgroundColor: "#e74c3c",
              padding: "8px 12px",
              borderRadius: "4px",
              color: "#fff",
              fontSize: "14px",
            }}
          >
            Tooltip on top
          </div>
        </ZName>
      </div>
    </div>
  ),
};