Form

import { useState } from "react";
import { Button, Form, Input, Select, SelectItem, toast } from "cennge-ui";

type Errors = Record<string, string>;

// Stands in for your API: it answers with errors by field name, or with none.
async function invite(data: FormData): Promise<{ errors?: Errors }> {
  await new Promise((resolve) => setTimeout(resolve, 600));
  if (data.get("email") === "dev@example.com") {
    return { errors: { email: "dev@example.com is already a collaborator on payload-cache" } };
  }
  return {};
}

export default function InviteCollaborator() {
  const [errors, setErrors] = useState<Errors>();
  const [isPending, setPending] = useState(false);

  return (
    <Form
      validationErrors={errors}
      onSubmit={async (event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setPending(true);
        const result = await invite(data);
        setPending(false);
        setErrors(result.errors);
        if (!result.errors) toast.success("Invitation sent", { description: String(data.get("email")) });
      }}
      className="flex w-full max-w-96 flex-col gap-4"
    >
      <Input name="email" label="Email" type="email" defaultValue="dev@example.com" isRequired />
      <Select name="role" label="Role" defaultValue="write">
        <SelectItem value="read">Read</SelectItem>
        <SelectItem value="triage">Triage</SelectItem>
        <SelectItem value="write">Write</SelectItem>
        <SelectItem value="maintain">Maintain</SelectItem>
      </Select>
      <Button type="submit" color="primary" isLoading={isPending} className="self-start">
        Invite
      </Button>
    </Form>
  );
}

import { useActionState } from "react";
import { Button, Form, Input } from "cennge-ui";

interface RenameState {
  name: string;
  error?: string;
  renamed?: boolean;
}

// In a Next.js app this is a server action, in a file that starts with "use server".
async function rename(_previous: RenameState, data: FormData): Promise<RenameState> {
  await new Promise((resolve) => setTimeout(resolve, 600));
  const name = String(data.get("name"));
  if (name === "ai-niche-scout") return { name, error: "A repository with this name already exists" };
  return { name, renamed: true };
}

export default function RenameRepository() {
  const [state, action, isPending] = useActionState(rename, { name: "ai-niche-scout" });

  return (
    <Form
      action={action}
      validationErrors={state.error ? { name: state.error } : undefined}
      className="flex w-full max-w-96 flex-col gap-4"
    >
      {/* React empties the form after an action; the key and defaultValue put the typed name back. */}
      <Input key={state.name} name="name" label="Repository name" defaultValue={state.name} isRequired />
      <div className="flex flex-wrap items-center gap-3">
        <Button type="submit" isLoading={isPending}>
          Rename
        </Button>
        {state.renamed ? <span className="text-sm text-success-text">Renamed to {state.name}</span> : null}
      </div>
    </Form>
  );
}

import { useState } from "react";
import { Button, Form, Input, Textarea } from "cennge-ui";

export default function PublishRelease() {
  const [published, setPublished] = useState<string | null>(null);

  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault();
        setPublished(String(new FormData(event.currentTarget).get("version")));
      }}
      className="flex w-full max-w-96 flex-col gap-4"
    >
      <Input
        name="version"
        label="Version"
        placeholder="1.4.0"
        description="Major, minor and patch"
        pattern="\d+\.\d+\.\d+"
        isRequired
      />
      <Input name="notify" label="Notify" type="email" placeholder="dev@example.com" />
      <Textarea name="notes" label="Release notes" minLength={20} isRequired />
      <div className="flex flex-wrap items-center gap-3">
        <Button type="submit" color="primary">
          Publish payload-cache
        </Button>
        {published ? <span className="text-sm text-success-text">Published {published}</span> : null}
      </div>
    </Form>
  );
}

import { useState } from "react";
import { Button, Form, ToggleGroup, ToggleGroupItem, toast, useFormField } from "cennge-ui";

/** A ToggleGroup that takes part in a Form: its value is submitted, and errors for its name show under it. */
function ChannelField({ name }: { name: string }) {
  const [channel, setChannel] = useState<string | null>(null);
  const field = useFormField(name);

  return (
    // data-field-name lets the form find the field and focus it when it has an error.
    <div data-field-name={name} className="flex flex-col gap-1.5">
      <span className={field.isInvalid ? "text-sm font-medium text-danger-text" : "text-sm font-medium"}>Channel</span>
      <ToggleGroup
        aria-label="Channel"
        value={channel}
        onValueChange={(next) => {
          setChannel(next);
          field.markEdited();
        }}
      >
        <ToggleGroupItem value="latest">latest</ToggleGroupItem>
        <ToggleGroupItem value="next">next</ToggleGroupItem>
        <ToggleGroupItem value="beta">beta</ToggleGroupItem>
      </ToggleGroup>
      <input type="hidden" name={name} value={channel ?? ""} />
      {field.isInvalid ? (
        <p role="alert" className="text-xs text-danger-text">
          {field.errorMessage}
        </p>
      ) : null}
    </div>
  );
}

export default function PublishChannel() {
  const [errors, setErrors] = useState<Record<string, string>>();

  return (
    <Form
      validationErrors={errors}
      onSubmit={(event) => {
        event.preventDefault();
        const channel = new FormData(event.currentTarget).get("channel");
        setErrors(channel ? undefined : { channel: "Pick the tag to publish under" });
        if (channel) toast.success(`payload-cache@1.4.0 is on ${channel}`);
      }}
      className="flex flex-col items-start gap-4"
    >
      <ChannelField name="channel" />
      <Button type="submit" color="primary">
        Publish
      </Button>
    </Form>
  );
}