@caldera-labs/admin-client

The Caldera (FormsSlot) 2.0 admin interface client.

Stats

StarsIssuesVersionUpdatedCreatedSize
@caldera-labs/admin-client
0.4.03 years ago3 years agoMinified + gzip package size for @caldera-labs/admin-client in KB

Readme

Caldera Admin Client

The Caldera (FormsSlot) 2.0 admin interface client.

Build Status Documentation Status Coverage Status šŸŒ‹ Documentation

What Is This?

  • Phase 1: The main Caldera Forms admin screen.
    • Caldera FormsSlot 1.8
  • Phase 1.5: Caldera FormsSlot Pro UI v2
  • Phase 2: The Caldera (FormsSlot) grid-based form builder
    • Caldera FormsSlot 2.0

Usage

Create Admin App With Factory

Simplest option :

const app = new AdminApp();
ReactDOM.render(app.component(), document.createElement('div'));

Slightly less simple option:

//Optional, create element to place component on
document.createElement('div');
//create factory
const app = new AdminApp();
//Render to element with ID of 'div'
app.renderToDom( 'div' );

Using Components

If you want to use the module's state management:

import React from 'react';
import CalderaAdminScreen from '@caldera-labs/admin-client';
const {CalderaAdminWithState} = CalderaAdminScreen;
class App extends React.Component {
    
    render()
    {
        return (
            <CalderaAdminWithState />
        );
    }
}

Or to manage your own state:

import ReactDOM from 'react-dom';
import React from 'react';
import CalderaAdminScreen from '@caldera-labs/admin-client';
const {CalderaAdminWithState,store} = CalderaAdminScreen;
import {Provider} from 'react-redux';
ReactDOM.render(
    <Provider store={store}>
        <CalderaAdminWithState/>
    </Provider>,
    document.getElementById('caldera-forms-admin')
);

Install

npm i -D @caldera-labs/caldera-admin-client

^^ Not on npm yet.

Import With Webpack

Basic Example

console.log('Hi Roy');

Development

Development Requirements

Scripts

Develop

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

Tests

  • yarn test
    • Run test watcher
  • yarn test:once
    • Run tests once
  • yarn test:coverage
    • Run tests once and update coverage

Lint Code

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

Build For Production

  • yarn build:no-test
    • Run tests, regenerate docs and build for production
  • yarn build:no-test
    • Build for production

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.