This is a standalone flow editing tool designed for use within the RapidPro suite of messaging tools but can be adopted for use outside of that ecosystem. The editor is a React component built with TypeScript and bundled with Webpack. It is open-sourced under the AGPL-3.0 license.
NPM
Node.js >= 6.x
The flow editor uses npm for all dependencies.
% npm install
Webpack is used to transpile TypeScript and SASS. After invoking a build, the compiled results will arrive in the /dist folder.
% npm run build:dev
or
% npm run build:prod
You can run the editor in a development server. To start a development server, compile all necessary bits, and then launch your default browser with the results. The development server watches for changes to any TypeScript or SASS documents and automatically recompiles them.
% npm start
This project uses React Hot Loader to keep components mounted/preserve their state while in development.
This project is currently configured via flowEditor.config.*.js in the root directory, which is loaded into the bundle as an external, Config, via Webpack. The ConfigProvider component composes the app's configuration and provides it to each component via React's context API.
This project uses SASS (SCSS) to compose styles and CSS Modules to scope those styles to components. Typings for CSS Modules are generated on the fly by typings-for-css-modules-loader.
This project uses Jest for unit/snapshot testing and Enzyme to test React components. Typescript and Jest are integrated via ts-jest.
% npm run test:local
This project uses both eslint (Node) & tslint (TypeScript) to enforce consistent style.
% npm run lint:es
% npm run lint:ts
Prettier is used to keep formatting consistent.
% npm run prettify
Please read CONTRIBUTING.md for details on this project's code of conduct, and the process for submitting pull requests to this repo.
We use SemVer for versioning. For the versions available, see this repo's tags.