Connector Setup Dialog

Диалог установки коннектора — брендовая шапка, OAuth-кнопка или поля токена, ошибка и футер Отмена / Подключить.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ConnectorSetupDialog } from "@/components/ui/connector-setup-dialog";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function Particle() {
  const [open, setOpen] = useState(true);
  const [subdomain, setSubdomain] = useState("");
  const [token, setToken] = useState("");

  return (
    <div className="flex min-h-120 w-full items-center justify-center">
      <Button onClick={() => setOpen(true)} variant="outline">
        Подключить amoCRM
      </Button>
      <ConnectorSetupDialog
        connectDisabled={!subdomain.trim() || !token.trim()}
        mode="token"
        name="amoCRM"
        onCancel={() => setOpen(false)}
        onConnect={() => setOpen(false)}
        onOpenChange={setOpen}
        open={open}
        tagline="CRM: сделки, контакты и задачи"
      >
        <Field>
          <FieldLabel>Поддомен</FieldLabel>
          <Input
            autoComplete="off"
            data-1p-ignore
            data-lpignore="true"
            onChange={(e) => setSubdomain(e.target.value)}
            placeholder="mycompany"
            type="text"
            value={subdomain}
          />
        </Field>
        <Field>
          <FieldLabel>Токен</FieldLabel>
          <Input
            autoComplete="off"
            data-1p-ignore
            data-lpignore="true"
            onChange={(e) => setToken(e.target.value)}
            placeholder="долгоживущий токен доступа"
            type="text"
            value={token}
          />
        </Field>
      </ConnectorSetupDialog>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/connector-setup-dialog

Использование

import { ConnectorSetupDialog } from "@/components/ui/connector-setup-dialog";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
 
<ConnectorSetupDialog
  open={open}
  onOpenChange={setOpen}
  name="amoCRM"
  tagline="CRM: сделки, контакты и задачи"
  mode="token"
  connectDisabled={!token.trim()}
  onConnect={save}
  onCancel={() => setOpen(false)}
>
  <Field>
    <FieldLabel>Токен</FieldLabel>
    <Input type="password" value={token} onChange={(e) => setToken(e.target.value)} />
  </Field>
</ConnectorSetupDialog>

Для OAuth-коннектора передайте mode="oauth" + onOAuth — диалог сам покажет пояснение и кнопку «Авторизоваться через OAuth» (поля не нужны).

API

Презентационный (plain-props): приложение владеет данными и логикой validate/save/OAuth; токен-поля передаются как children (DS Field + Input).

Prop	Тип	Описание
`open`	`boolean`	Открыт ли диалог.
`onOpenChange`	`(open: boolean) => void`	Смена состояния (backdrop/Esc).
`name`	`ReactNode`	Имя коннектора (заголовок).
`tagline`	`ReactNode`	Подзаголовок/описание.
`icon`	`ReactNode`	Бренд-иконка (favicon); fallback — кабель.
`mode`	`"oauth" \| "token"`	OAuth-флоу или поля токена.
`oauthHost`	`ReactNode`	Хост в тексте OAuth-пояснения.
`children`	`ReactNode`	Поля токена (для `mode="token"`).
`error`	`ReactNode`	Строка ошибки под полями.
`busy`	`boolean`	Спиннер + блокировка кнопок.
`connectDisabled`	`boolean`	Блок «Подключить» (поля не заполнены).
`onOAuth` / `onConnect` / `onCancel`	`() => void`	Действия.

На этой странице

Установка Использование API