@caldera-labs/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.