Components
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

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

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 for a longer walkthrough and the API reference for the full surface.

On this page