mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-21 16:52:40 +00:00
Mohamed Boudra
047f40e623
* feat(plugins): unify source installation and simplify plugin settings * feat(plugins): install npm sources and review CLI updates Treat install selectors as one-time choices. Keep source identity separate from the installed revision, and resolve ordinary updates from the current upstream default. npm only acquires directories; plugin loading remains independent of npm. * fix(plugins): preserve CLI diagnostics and exercise reviewed updates Move new source capability coverage to real browser journeys. Update the requirements regression to exercise preview and apply, and preserve the existing duplicate-selector diagnostic across positional option scopes. * test(plugins): remove unused pending helper * test(plugins): pack registry fixtures with the Windows command runner * test(plugins): assert failed client contribution setup * docs(plugins): consolidate guides and document npm publishing * docs(plugins): introduce publishing choices before npm instructions * test(plugins): own browser journey cleanup in a fixture * feat(plugins): prepare scaffolded packages for publishing
50 lines
3.2 KiB
Markdown
50 lines
3.2 KiB
Markdown
# Modal UI example
|
|
|
|
Install on a Paseo host with npm source installation support and npm available:
|
|
|
|
```sh
|
|
paseo plugin install npm:@getpaseo/plugin-example-modal-ui@0.1.1
|
|
```
|
|
|
|
In host **Settings → Plugins**, paste the same `npm:` identifier into **Plugin source**.
|
|
Enable plugins, then open **Modal examples** from the sidebar or a workspace tab.
|
|
Choose **Open Form**, type into **Paste here**, and watch the **Input:** text update.
|
|
The installed plugin ID is `modal-ui-example`. Host Settings shows the package identity and
|
|
installed version. With reviewed-update support, run `paseo plugin update modal-ui-example --check`
|
|
to check for a newer version, then `paseo plugin update modal-ui-example` to review and approve it.
|
|
An explicit install version selects the initial content; later updates still check the latest release.
|
|
|
|
The package ships the existing TypeScript entry and client sources. Paseo compiles them through
|
|
its directory plugin loader; no package build or preparation command is required. React,
|
|
React Native, and `@getpaseo/plugin` are peer contracts supplied by the host. npm is needed for
|
|
installation, not loading or reloading. You can also install this directory while developing.
|
|
See the [source reference](https://paseo.sh/docs/plugins/reference#plugin-sources)
|
|
for supported identifiers and preparation rules.
|
|
|
|
The examples demonstrate default and custom padding, a full-width body, author-owned ScrollView and
|
|
FlatList scrolling, horizontal tabs, and clipboard actions with a keyboard-aware input. See the
|
|
[host UI reference](https://paseo.sh/docs/plugins/reference#host-ui) for the API contract.
|
|
|
|
The browser regression installs this exact example in an isolated daemon:
|
|
|
|
```sh
|
|
cd packages/app
|
|
npx playwright test e2e/browser/plugin-modal-body.spec.ts --project=browser --workers=1
|
|
```
|
|
|
|
On Android, open each example and drag up on its content to expand the sheet, then scroll the list.
|
|
In FlatList, expand before using **Jump to last row**; row 100 should be visible. At the top of either
|
|
list, drag down on a row to dismiss the sheet. In Form,
|
|
press **Copy text**, long-press the input, and choose **Paste**. The input should contain
|
|
“Copied from Paseo”. With the system keyboard enabled, focusing the input should keep it visible.
|
|
|
|
Run the [native sheet regression](https://github.com/getpaseo/paseo/blob/main/packages/app/e2e/mobile/modal-sheet/README.md) to check body
|
|
dismissal, list scrolling and horizontal tabs together.
|
|
|
|
These captures show Android copy/paste and custom padding on browser and wide native layouts.
|
|
Android API 35 and Chromium were exercised; iOS and Electron were not tested.
|
|
|
|
| Android copy/paste | Browser custom padding | Wide Android custom padding |
|
|
| ---------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
|  |  |  |
|