90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
|
|
import { ToggleSwitch } from "@shared/components/ToggleSwitch";
|
||
|
|
|
||
|
|
const meta: Meta<typeof ToggleSwitch> = {
|
||
|
|
title: "Primitives/ToggleSwitch",
|
||
|
|
component: ToggleSwitch,
|
||
|
|
tags: ["autodocs"],
|
||
|
|
parameters: { layout: "centered" },
|
||
|
|
args: {
|
||
|
|
checked: true,
|
||
|
|
label: "Encryption at rest",
|
||
|
|
size: "md",
|
||
|
|
disabled: false,
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
size: { control: "inline-radio", options: ["sm", "md"] },
|
||
|
|
disabled: { control: "boolean" },
|
||
|
|
checked: { control: "boolean" },
|
||
|
|
},
|
||
|
|
render: (args) => {
|
||
|
|
function Bound() {
|
||
|
|
const [on, setOn] = useState(args.checked);
|
||
|
|
return <ToggleSwitch {...args} checked={on} onChange={setOn} />;
|
||
|
|
}
|
||
|
|
return <Bound />;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof ToggleSwitch>;
|
||
|
|
|
||
|
|
/** Flip size / checked / disabled / label / description in controls. */
|
||
|
|
export const Playground: Story = {};
|
||
|
|
|
||
|
|
export const WithDescription: Story = {
|
||
|
|
args: {
|
||
|
|
label: "Auto-promote on golden set pass",
|
||
|
|
description:
|
||
|
|
"When the eval set passes, the new version is promoted automatically.",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const InContext_SettingsRows: Story = {
|
||
|
|
parameters: { layout: "padded" },
|
||
|
|
render: () => {
|
||
|
|
function Bound() {
|
||
|
|
const [a, setA] = useState(true);
|
||
|
|
const [b, setB] = useState(true);
|
||
|
|
const [c, setC] = useState(false);
|
||
|
|
const [d, setD] = useState(false);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: 16,
|
||
|
|
maxWidth: "32rem",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ToggleSwitch
|
||
|
|
checked={a}
|
||
|
|
onChange={setA}
|
||
|
|
label="Encryption at rest"
|
||
|
|
description="AES-256 with Stirling-managed keys"
|
||
|
|
/>
|
||
|
|
<ToggleSwitch
|
||
|
|
checked={b}
|
||
|
|
onChange={setB}
|
||
|
|
label="Sign every output"
|
||
|
|
description="Tamper-evident manifest covers artifact + run metadata"
|
||
|
|
/>
|
||
|
|
<ToggleSwitch
|
||
|
|
checked={c}
|
||
|
|
onChange={setC}
|
||
|
|
label="Mirror to S3"
|
||
|
|
description="Copy sealed artifacts to your bucket for compliance archival"
|
||
|
|
/>
|
||
|
|
<ToggleSwitch
|
||
|
|
checked={d}
|
||
|
|
onChange={setD}
|
||
|
|
label="Send low-confidence to review"
|
||
|
|
description="Confidence under 0.85 triggers human review"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return <Bound />;
|
||
|
|
},
|
||
|
|
};
|