# GitApp UI

> App-agnostic React-Native UI for picking a Git host + repository.

Source: https://components.n.yatsyk.com/docs/gitapp-ui

# @dev-bench/gitapp-ui

App-agnostic React-Native components for choosing a Git host and a repository.
Wrap your app in `ThemeProvider`, hand each selector a small view-model that
exposes a `Resource<T>` for its lifecycle, and the components render every
state — idle / loading / ready / error — exhaustively.

Extracted from the GENERIC layer of `byoklab/personal-productivity-app`'s
`@gitapp/ui`. PPA-specific surface (editorial flow, PR composer, recovery,
preview slots) intentionally stays in PPA.

* **Stability:** experimental
* **Platforms:** React Native, `react-native-web`
* **Peer dependencies:** `react >= 18`, `react-native >= 0.74`,
  `react-native-svg >= 15`
* **Distribution:** ships TypeScript source — your bundler (Metro / Expo /
  react-native-web) compiles JSX/TS at build time. There is no `dist/`.

## Install

```bash
npm i @dev-bench/gitapp-ui react react-native react-native-svg
# or
pnpm add @dev-bench/gitapp-ui react react-native react-native-svg
```

## Minimal example

```tsx
import {
  ProviderSelector,
  ThemeProvider,
  defaultLightTheme,
  Resource,
  type IProviderSelectorModel,
} from "@dev-bench/gitapp-ui";

const model: IProviderSelectorModel = {
  current: { provider: "github", host: "github.com" },
  state: Resource.idle(),
  isOpen: true,
  onSelectProvider: (p) => {/* mobx action */},
  onCustomHostChange: (h) => {/* mobx action */},
  onConfirm: async () => {/* await save */},
  onDismiss: () => {/* close sheet */},
};

export function App() {
  return (
    <ThemeProvider theme={defaultLightTheme}>
      <ProviderSelector model={model} />
    </ThemeProvider>
  );
}
```

See [Getting started](./getting-started.mdx) for a longer walkthrough and the
[API reference](./api.mdx) for the full surface.