feat(key-value-editor): add React Native key-value-editor

KO
2d ago
+1570-71

First component for the pilot in drift-ui/ui#132.

Depends on drift-ui/ui#146 (and #142 under it). This item lists @drift-ui/key-value-editor-utils in registryDependencies, and that item doesn't exist on drift-ui.dev until #146 merges. Until then the preview app works, because the lib file is checked in here, but shadcn add from this registry fails.

What's in it

  • registry/default/ui/key-value-editor.tsx has the same props as the web component: value, defaultValue, onValueChange, secretValues, the labels and placeholders, and disabled.
  • Button, input, text and icon come from React Native Reusables, installed with the shadcn CLI and referenced by URL in registryDependencies. global.css and tailwind.config.js use their theme variables, which are the shadcn neutral palette.
  • The utils, use-controllable-state and key-value-editor-utils files are installed from @drift-ui and aren't edited here.
  • Jest with jest-expo and React Native Testing Library. There are 6 tests: edit, add and remove, Enter on the last row, .env paste, duplicate keys, and masked values.

Where it differs from web

  • React Native has no paste event. When the key field grows by more than one character in a single change, it's treated as a paste and run through pasteRows.
  • The key field is multiline with submitBehavior="submit", so newlines in pasted text survive and Enter still moves on. It has a little extra top padding so it lines up with the value field.
  • React Native has no aria-invalid, so a duplicate key is added to the field's label: "Key 1, duplicate key".
  • After removing the last row, focus doesn't move to the add button.

Screenshot

iOS simulator, Expo Go:

key-value-editor on iOS

Not checked yet

Dark mode, Android, and a real paste on a device. The paste test fakes the text change.

Summary by cubic

Adds the first React Native component, key-value-editor, to the native drift-ui registry with the same API as the web version.

  • Supports value, defaultValue, onValueChange, secretValues, row labels and placeholders, and disabled.
  • Reuses shared parsing logic from @drift-ui/key-value-editor-utils and pulls primitives and theme variables from React Native Reusables.
  • Detects .env pastes in onChangeText because React Native has no paste event; a newline also counts as a paste so a paste over a selected key is caught even when it shrinks the key, and it replaces the old key.
  • Marks duplicate keys with a label suffix instead of aria-invalid, which React Native lacks.
  • Adds Jest coverage with jest-expo and React Native Testing Library for editing, adding/removing rows, Enter submission, paste, duplicates, and masked values.

Dependencies

  • The registry item lists @drift-ui/key-value-editor-utils as a dependency that is not yet published, so shadcn add fails until drift-ui/ui#146 merges.