@caldera-labs/components

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

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
@caldera-labs/components
Minified + gzip package size for @caldera-labs/components in KB

Readme

Caldera Components

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

Build Status Documentation Status Coverage Status šŸŒ‹ 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

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

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.