Lyra

CreateWorkspaceDialog

CreateWorkspaceDialog é um Dialog opinativo para nomear um workspace e escolher sua URL. Use-o quando esse fluxo padrão servir; componha Dialog, Input, Avatar e Button quando ele não servir.

Exemplos

Criar um workspace

O slug acompanha o nome até alguém editar o slug. Depois dessa primeira edição, ele fica independente, para uma URL intencional nunca ser sobrescrita por uma mudança posterior de nome.

Uma URL específica do produto

title e slugPrefix alteram a linguagem do produto em volta do mesmo fluxo. Eles não mudam o que é enviado: onCreate continua recebendo o nome aparado e o slug seguro para URL.

Quando usar

Use CreateWorkspaceDialog quando um produto precisa do nome, slug e prévia de iniciais do workspace com as regras de interação fornecidas.

Prefira outro componente quando:

  • O fluxo de criação precisa de outros campos, validações ou ações — componha Dialog, Input, Avatar e Button em vez de forçar este componente opinativo.
  • A pessoa precisa escolher o workspace atual — use WorkspaceSwitcher. O onCreate dele é o lugar natural para abrir este diálogo num produto.
  • A decisão bloqueia outra tarefa curta, mas não cria um workspace — use Dialog diretamente.

Acessibilidade

  • Ele renderiza um Dialog, então o painel é role="dialog" com aria-modal="true" e nome acessível vindo de title. O foco entra e fica retido no modal; a rolagem da página é bloqueada.
  • Os campos de nome e URL do workspace têm rótulos visíveis. A prévia de avatar deriva as iniciais do nome e atualiza enquanto a pessoa digita; ela não substitui os rótulos escritos dos campos.
  • Create fica desabilitado até name ter conteúdo que não seja espaço. O envio apara o nome antes de ele chegar a onCreate.
  • slugify coloca em minúsculas, remove acentos, reduz não alfanuméricos a hífens e remove hífens nas pontas: Ação Global se torna acao-global.
  • Toda transição de fechado para aberto zera nome, slug e estado de "tocado". Forneça onClose e altere open em resposta para Escape, o botão de fechar e Cancel realmente fecharem o diálogo.

API e código

Blade: O snapshot de API lançado do Blade v0.10.0 não tem componente para esta entrada do catálogo.

NomeTipoObrigatóriaDescrição
openboolean—Controls visibility. Default `false`.
onClose() => void—Called when the dialog is dismissed or creation succeeds.
onCreate(data: { name: string; slug: string; }) => void—Receives the trimmed workspace name and its URL-safe slug after submission.
titlestring—Dialog heading. Default `"Create workspace"`.
slugPrefixstring—Text rendered before the editable slug. Default `"lyra.dev/"`.

Este componente compõe Dialog, Avatar, Input e Button. Sem React, as mesmas classes fornecem a aparência; a regra nome-para-slug, o reset, o foco e o comportamento de fechamento são seus:

html
<div class="lyra-dialog-overlay">
  <div class="lyra-dialog" role="dialog" aria-modal="true" aria-labelledby="workspace-title">
    <div class="lyra-dialog__header">
      <h2 class="lyra-dialog__title" id="workspace-title">Criar workspace</h2>
      <button class="lyra-dialog__close" type="button" aria-label="Close">×</button>
    </div>
    <div class="lyra-dialog__body">
      <div class="lyra-wscreate">
        <div class="lyra-wscreate__preview">
          <span class="lyra-avatar lyra-avatar--lg lyra-avatar--square" title="Acme Inc">
            <span aria-hidden="true">AI</span>
          </span>
          <span class="lyra-wscreate__preview-hint">O avatar usa as iniciais do nome.</span>
        </div>
        <div class="lyra-field">
          <label class="lyra-label" for="workspace-name">Nome do workspace</label>
          <input class="lyra-input" id="workspace-name" value="Acme Inc" />
        </div>
        <div class="lyra-field">
          <label class="lyra-label" for="workspace-slug">URL</label>
          <span class="lyra-wscreate__slug">
            <span class="lyra-wscreate__slug-prefix">lyra.dev/</span>
            <input class="lyra-wscreate__slug-input" id="workspace-slug" value="acme-inc" />
          </span>
          <span class="lyra-hint">Letras minúsculas, números e hífens.</span>
        </div>
      </div>
    </div>
    <div class="lyra-dialog__footer">
      <button class="lyra-btn lyra-btn--ghost lyra-btn--md" type="button">Cancelar</button>
      <button class="lyra-btn lyra-btn--primary lyra-btn--md" type="button">Criar workspace</button>
    </div>
  </div>
</div>