Stepper

import { useState } from "react";
import { Button, Radio, RadioGroup, Step, Stepper, Textarea } from "cennge-ui";

export default function ReleaseWizard() {
  const [step, setStep] = useState(0);
  const [bump, setBump] = useState("patch");
  const [notes, setNotes] = useState("");

  function forward() {
    if (step === 3) setNotes("");
    setStep(step === 3 ? 0 : step + 1);
  }

  return (
    <div className="flex w-full flex-col gap-5">
      <Stepper
        activeStep={step}
        onStepClick={setStep}
        aria-label="New payload-cache release"
        completedContent={<p>payload-cache is on its way to npm with a {bump} release.</p>}
      >
        <Step title="Version" description="patch, minor or major">
          <RadioGroup label="Version" value={bump} onValueChange={setBump} orientation="horizontal">
            <Radio value="patch">Patch</Radio>
            <Radio value="minor">Minor</Radio>
            <Radio value="major">Major</Radio>
          </RadioGroup>
        </Step>
        <Step title="Notes" description="For the changelog">
          <Textarea label="What changed" placeholder="One line per change" value={notes} onValueChange={setNotes} className="max-w-96" />
        </Step>
        <Step title="Publish">
          <p>A {bump} release of payload-cache goes to npm.</p>
        </Step>
      </Stepper>
      <div className="flex gap-2">
        {step < 3 ? (
          <Button variant="flat" isDisabled={step === 0} onClick={() => setStep(step - 1)}>
            Back
          </Button>
        ) : null}
        <Button color="primary" onClick={forward}>
          {step === 3 ? "Start again" : step === 2 ? "Publish" : "Next"}
        </Button>
      </div>
    </div>
  );
}

import { useState } from "react";
import { Step, Stepper } from "cennge-ui";

const sections = [
  { title: "General", text: "Name, description and topics of ai-niche-scout." },
  { title: "Branches", text: "Protect main: changes arrive through pull requests." },
  { title: "Notifications", text: "Release notes by email to dev@example.com." },
];

export default function SetupSteps() {
  const [step, setStep] = useState(0);

  return (
    <Stepper activeStep={step} onStepClick={setStep} allowNextStepsSelect aria-label="Set up ai-niche-scout" className="w-full">
      {sections.map((section) => (
        <Step key={section.title} title={section.title}>
          <p className="text-muted">{section.text}</p>
        </Step>
      ))}
    </Stepper>
  );
}

import { useState } from "react";
import { Button, Step, Stepper } from "cennge-ui";

export default function CheckRun() {
  const [step, setStep] = useState(2);
  const [isRunning, setRunning] = useState(false);

  async function rerun() {
    setRunning(true);
    // Stands in for the real run.
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setRunning(false);
    setStep(3);
  }

  return (
    <Stepper orientation="vertical" activeStep={step} aria-label="CI for spredo-crypto-screener" className="max-w-sm">
      <Step title="Install" description="Dependencies" />
      <Step title="Lint" description="Code style" />
      <Step title="Test" description="Unit tests" isError={step === 2 && !isRunning} isLoading={isRunning}>
        <div className="flex flex-col items-start gap-3">
          <p className="text-muted">{isRunning ? "Running the tests again" : "A test of the spread alert failed."}</p>
          <Button size="sm" variant="flat" isDisabled={isRunning} onClick={rerun}>
            Run again
          </Button>
        </div>
      </Step>
      <Step title="Deploy" description="To production">
        <p className="text-muted">Waiting for a reviewer to approve.</p>
      </Step>
    </Stepper>
  );
}

import { Step, Stepper } from "cennge-ui";

export default function NarrowStepper() {
  return (
    <div className="w-full max-w-xs rounded-large bg-surface-1 p-4">
      <Stepper activeStep={1} size="sm" aria-label="Deploy payload-cache">
        <Step title="Build" />
        <Step title="Preview" />
        <Step title="Production" />
      </Stepper>
    </div>
  );
}