If you don't want to maintain your user flows in the same repository the following steps describe how to setup a new project. You can skip this steps and go directly to the setup below.
- Create a new folder e.g.
user-flow-demo
for the user flows and initialize npm:npm init
run
npm version
to check it.
You should see 'user-flow-demo': '1.0.0',
as first line.
Make sure you have the CLI installed:
npm i @push-based/user-flow --save-dev
now you can run it directly with user-flow
. Test it:
npx user-flow --version
We provide general interaction through the keyboard or stdin
directly for testing and other crazy hacks.
These key combinations can be used on multiple choice prompts.For more details see enquirer - multiselect
command | description |
---|---|
space | Toggle the currently selected choice when options.multiple is true. |
number | Move the pointer to the choice at the given index. Also toggles the selected choice when options.multiple is true. |
a | Toggle all choices to be enabled or disabled. |
i | Invert the current selection of choices. |
g | Toggle the current choice group. |
To assign multiple choices to a multiselect CLI param you have to use the param multiple times.
e.g. to select multiple formats for the collect output write:
@npx @push-based/user-flow collect -f=md -f=json
any boolean parameter of the CLI can be negated by adding --no-
in front of the parameter name.
A good example is the dryRun
parameter. You can negate it as follow: --no-dryRun
.
You can either export the report as HTML
or JSON
format. The html file can be opened in any browser.
Use the .user-flowrc.json
property persist.format
and give an array as value. e.g. ['html']
or ['html', 'json']
.
You can also use the CLI option --format
to choose a format.
- single format:
@push-based/user-flow collect --format html
- multiple formats:
@push-based/user-flow collect --format html --format json
🤓 DX Tip:
For a faster development process you can use the--openReport
or-e
option to automatically open the report in the browser. The CLI will serve either the HTML report or opens the lighthouse report viewer if only a JSON format is available and displays it there. e.g.@push-based/user-flow collect --openReport
The json file can be drag & dropped into the lighthouse viewer.
This format is very good for programmatic processing and foundation for most of the features of this lib.
@push-based/user-flow
ships with small helpers for logging and debugging.
A function that logs the passed string only if the CIL options --verbose
or -v
is true.
Usage
./order-coffee.uf.mts
import { logVerbose } from "@push-based/user-flow";
// ...
logVerbose('test');
npx user-flow collect
logs nothing
npx user-flow collect --verbose
logs "test"
made with ❤ by push-based.io