RepoSelect

import { RepoSelect, FooterLink, address, followable } from '@hanzo/ui/product'

A mock loader: the host's API in the shape the chip reads

A page of repos and a cursor. */ const load: RepoLoad = async (q) => ({ repos: REPOS.filter((r) => `${r.owner}/${r.name}`.includes(q)), next: null, }) /** Which repository a run works in — the chosen one pinned first, a troubleshooting link under the list.

cloud

export function Composer() {
  const [repo, setRepo] = useState<Repo>(REPOS[0])
  return (
    <XStack pt={260}>
      <RepoSelect
        value={repo}
        onChange={setRepo}
        load={load}
        troubleshoot={{ label: 'Troubleshoot GitHub connection', href: '/docs' }}
      />
    </XStack>
  )
}

With a row action

Ctrl+Enter or a click runs it on the row under the cursor.

Repository

export function WithAction() {
  const [added, setAdded] = useState<string[]>([])
  return (
    <XStack pt={260} gap="$3" items="center">
      <RepoSelect
        onChange={() => {}}
        load={load}
        action={{ label: 'Add to project', onPress: (r) => setAdded((a) => [...a, r.name]) }}
      />
      {added.length ? `Added: ${added.join(', ')}` : null}
    </XStack>
  )
}

Types

export interface Repo {
  owner: string
  name: string
  /** `owner/name`, when the host already has it. */
  full_name?: string
  private?: boolean
  default_branch?: string
}

export type RepoItem = ChipItem & { repo: Repo }

export type RepoLoad = (q: string, after?: string | null) => Promise<{ repos: Repo[]; next?: string | null }>

export interface RepoLink {
  label: string
  href?: string
  onPress?: () => void
}

export interface RepoSelectProps {
  /** The chosen repository. */
  value?: Repo | null
  onChange: (repo: Repo) => void
  load: RepoLoad
  /** "Troubleshoot GitHub connection" — where to go when a repository is missing. */
  troubleshoot?: RepoLink
  /** Why the list is partial. Say it plainly; it is the first thing read under the list. */
  note?: string
  /** Shown above the list — e.g. a "Connect GitHub" button while nothing is connected. */
  connect?: ReactNode
  /** A second thing a row can do — "Add to project". */
  action?: { label: string; onPress: (repo: Repo) => void; when?: (repo: Repo) => boolean }
  /** The chip's text with nothing chosen. */
  placeholder?: string
  placement?: ChipPlacement
  disabled?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

Exports

RepoSelectFooterLinkaddressfollowabletype Repotype RepoItemtype RepoLinktype RepoLoadtype RepoSelectProps