npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@humany/widget-forms

v2.1.9-alpha.4

Published

Forms for Humany Widgets.

Downloads

377

Readme

@humany/widget-forms

This package contains utilities for creating form definitions for Humany widgets, used in different parts in the widget framework. The utilities are meant to be used together with other APIs, such as the Conversation Platform API, and it does not have capabilities to render a UI completely on its own.

FormBuilder

The FormBuilder provides a convenient way to create and modify Form objects. Create an instance by using the create() factory as shown below.

import { FormBuilder } from '@humany/widget-forms';

const builder = FormBuilder.create();

createComponent(info: ComponentInfo, createChildren?: ComponentFactory);

Creates a new component based on the provided ComponentInfo object and appends it to the current Form.

builder.createComponent({
    component: 'Text',
    type: 'string',
    name: 'model',
});

ComponentInfo

Describes a component in a form.

| Name | Type | Required | Description | | ----------- | ----------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | name | string | Yes | The name of the component. | | type | string | Yes | The underlying type of the component. Can be 'string', 'number', 'boolean', 'array', or 'object' for components with children. | | component | string | Yes | The UI component used to render the component. Can be any of the built-in UI components. | | title | string | No | The display name of the component. | | evaluate | boolean | No | Indicates whether changes to the component value should be evaluated. Default: false. | | value | string, number, boolean | No | The initial value of the component. | | required | boolean | No | Whether the component should be displayed as being required. Default: false. | | items | Array<OptionItem> | No | Options for type 'array' when multiple fixed options are available. |

OptionItem

One of a series of fixed options available for list och multi-select components. Name | Type | Required | Description -----|------|----------|------------ label|string|Yes|The text label to be displayed for the item. value|string|Yes|The value associated to the item.

ComponentFactory = (builder: FormBuilder) => void

A factory method for creating nested components such as fieldset.

Built-in UI components

| Name | Supported value types | Description | | ----------------- | --------------------- | ------------------------------------------- | | Agreement | boolean | Checkbox with associated link. | | CheckboxList | string[] | List of checboxes. | | DropDownList | string[] | List of select options. | | Email | string | Input with e-mail constraint. | | GenericDiv | N/A | Empty div used as placeholder when styling. | | Number | number | Input with number constraint. | | Password | string | Password input. | | RadioButtonList | string[] | List of radio buttons. | | Text | string | Input text. | | Textarea | string | Input textarea. |

Creating simple components

The following example shows construction of a form with two components, one for country and one for city.

const form = builder
    .createComponent({
        component: 'Text',
        type: 'string',
        name: 'country',
        value: 'SE',
    })
    .createComponent({
        component: 'Text',
        type: 'string',
        name: 'city',
        value: 'Stockholm',
    })
    .get();

Creating nested components

The following example shows construction of a form with nested components. The first component is a fieldset holding two child components; first and and last name. The second argument to the fieldset component is a ComponentFactory function that exposes a FormBuilder instance used to create the nested child components.

const form = builder
    .createComponent(
        {
            component: 'Fieldset',
            type: 'object',
            name: 'name',
        },
        (builder: FormBuilder) => {
            builder
                .createComponent({
                    component: 'Text',
                    type: 'string',
                    name: 'first-name',
                    value: 'John',
                })
                .createComponent({
                    component: 'Text',
                    type: 'string',
                    name: 'last-name',
                    value: 'Doe',
                });
        }
    )
    .get();