Caldera Processor UI

Caldera Forms processor user interface generator and components.

🌋 👀 Documentation

Usage

Install

npm i @caldera-labs/processor-ui

Basic Usage Example

Render UI with state on element with ID of root

import CalderaProcessorsUI from '?';
const CalderaProcessors = new CalderaProcessorsUI('root');
CalderaProcessors.mountOnDOM();

Use component with state, and validation subscription

const Something = () => {
	import CalderaProcessorsUI from '?';
	const CalderaProcessors = new CalderaProcessorsUI('');
	return(
            <div>
                {CalderaProcessors.componentWithState()}
            </div>
	);
}

Complete Usage Example

Scripts

Development Requirements

• npm
• Yarn
• Git

Develop

• yarn start
  • Runs linter and compiles for development
  • Starts test app server

Build for release

This script is run as part of release commands. There is no need to run it manually most of the time.

This script calls a pre, compile, and post subcommands. For consistency, please call other scripts at those three events.

• yarn build
  • Runs tests and compiles.

Tests

We use Facebook Jest for unit tests. Test go in the directory __tests__.

• yarn test
  • Run test watcher
• yarn test:once
  • Run tests once

Lint Code

Code style is enforced using eslint

• yarn lint
  • Run linter and fixer watch
• yarn lint:fix
  • Lint and fix code once
• yarn lint:once
  • Lint code once

Generate Documentation

• npm run documentation
  • Generates documentation from inline docs
  • Generates documentation from markdown files in /manual

Release To npm

Must be logged in as project maintainer via npm cli

• yarn release
  • Release a patch update
  • Increments third position of a version. 1.0.1 -> 1.0.2
• yarn release:minor
  • Release a minor update
  • Increments second position of a version. 1.0.1 -> 1.1.0
• yarn release:major
  • Release a major update
  • Increments second position of a version. 1.0.1 -> 2.0.0

These commands run the tests and linter, and if they pass, re-compiles source, rebuilds docs, updates the version using npm version, adds a git tag, makes a git commit for the version change and updates the module on npm.