npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jacob.viamo/flow-builder

v0.1.0

Published

flow-builder provides an open source frontend for authoring flow interoperability project specification compliant flows.

Downloads

5

Readme

flow-builder

flow-builder provides an open source frontend for authoring flow interoperability project specification compliant flows. It enables the importing, editing and exporting of flow json, as well as authoring from scratch. Such flows can then be run using a compatible flow runner such as FLOIP/flow-runner.

What are flows

Flows are a modern paradign for describing the logic of digital information systems that interact with individuals, often for the purpose of (a) collecting data or (b) providing information through interactive requests. Some common examples of this are in mobile services using voice-based or SMS-based conversations over basic mobile phones. Flows follow the "flowchart" paradigm, consisting of actions (nodes) and connections between actions, which can incorporate decision-making logic.

Project setup

git clone [email protected]:FLOIP/flow-builder.git

cd flow-builder

yarn install

yarn serve

And visit localhost:8080/trees/create to create a new flow or localhost:8080/trees/1/edit to edit an example flow.

Note, yarn serve will also hot reload for development.

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Usage

Create new flow

To begin, you can create a new flow by visiting localhost:8080/trees/create. From there, you can start with a blank flow (a flow without blocks) and get editing:

Flow without blocks

Import existing flow

Or you can use the Import/Export panel and text field to copy in an existing flow:

Imported flow

Edits using the builder will then be reflected in the flow JSON in this panel and vice versa.

Export flow

To export, simply copy the json in this panel to a file.

An explanation of app.config.json vs builder.config.json

app.config.json is intended to support the configuration needed when integrating this flow building ui into a larger platform or application while builder.config.json is intended to configure those features which are core to the flow builder - the blocks enabled, languages or content types supported etc.

More detail to follow.

Future extensions and improvements

  • Documentation on integration of this UI into another app including configuration of routes used for server side persistence
  • Validations and human readable validation error messages for the full flow spec - compulsory fields, string formats etc.
  • Documentation on extending this library - adding support for new block types or extending existing block types
  • More fully featured resource editing including audio upload
  • A way to add to the supportable languages
  • Guidance for integration into a permissions system for flow editing/viewing
  • Fix and reenable storybook examples
  • Add regression testing pipeline for storyshots