Caldera Components

UI components for Caldera Forms admin, Caldera Forms 2.0 front-end

🌋 Documentation

What Is This?

• React components for Caldera Forms
• Factories for generating UI dynamically.

Why Is This?

See goals

Usage

Install

npm i -D @caldera-labs/components

Using This Library

• 🌋 Components
• 🌋 Factories
• 🌋 🌋 Import From Webpack
  • import * as Components from '@caldera-labs/components';
• The reference implementation of this library is @caldera-labs/processor-ui

Basic Example

The easiest way to use this library is with the RenderGroup component. This component takes an array of configField settings. These settings follow a schema, defined here.

import {RenderGroup} from '@caldera-labs/components';
import React from 'react';

<RenderGroup 
    className={'cf-something-config'}
    configFields={[
        {
            'id': 'cf-something-select-id',
            'type': 'dropdown',
            'label': 'Content type',
            'description': 'Choose content type, default is HTML',
            options: [
                {
                    label: 'HTML',
                    value: 'html'
                },
                {
                    label: 'Plain Text',
                    value: 'plain'
                }
            ],
            value: 'html',
            onValueChange: (newValue) =>{
                console.log(newValue)
            }
        }
    ]}
/>

How To Develop This

Development Requirements

• npm
• Yarn
• Git

Testing

See testing documentation

Scripts

Develop

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

Tests

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

Lint Code

• 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.