DSMMG/storybook/stories/ToggleGroup.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { ToggleGroup } from "@managemate/react";

const meta = {
  title: "Forms/ToggleGroup",
  component: ToggleGroup,
  tags: ["autodocs"],
} satisfies Meta<typeof ToggleGroup>;

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

const items = [
  { value: "list", label: "Liste", icon: "menu-line" as const },
  { value: "grid", label: "Grille", icon: "apps-2-line" as const },
  { value: "kanban", label: "Kanban", icon: "stack-line" as const },
];

export const Single: Story = {
  render: () => {
    const [v, setV] = useState<string | undefined>("list");
    return <ToggleGroup type="single" ariaLabel="Vue" value={v} onValueChange={(x) => x && setV(x)} items={items} />;
  },
};

export const Multiple: Story = {
  render: () => {
    const [v, setV] = useState<string[]>(["list"]);
    return <ToggleGroup type="multiple" ariaLabel="Vues" value={v} onValueChange={setV} items={items} />;
  },
};

export const Solid: Story = {
  render: () => {
    const [v, setV] = useState<string | undefined>("grid");
    return <ToggleGroup type="single" variant="solid" ariaLabel="Vue" value={v} onValueChange={(x) => x && setV(x)} items={items} />;
  },
};

export const Sizes: Story = {
  render: () => {
    const [v, setV] = useState("list");
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <ToggleGroup type="single" size="sm" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
        <ToggleGroup type="single" size="md" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
        <ToggleGroup type="single" size="lg" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
      </div>
    );
  },
};