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

sl-informal

v0.4.2

Published

Fork of informal for internal use, some ugly fixes were applied. So take a look at https://github.com/chielkunkels/informal for more info.

Downloads

12

Readme

Informal

Informal is a form-building library. It takes a JavaScript object which specify how the form should look and then takes it from there. Using a JavaScript object as the source of the form means you can store it in a JSON file and write a server-side validation script for it, meaning you can keep things in one location.

Usage

Informal is written in CommonJS format and can be installed through npm. Using this, you can use a tool such as [browserify][browserify] to add it to your build.

$ npm install --save informal

Once installed, you can use Informal as follows:

var informal = require('informal');
var form = new informal.Form(spec, data);
myElement.appendChild(form.wrap);

Where spec is your form definition , and data is an object with values for your fields.

Format

Forms created by Informal always consist of at least one page, group and field. Even if you require only a single page or group, this hierarchy is still expected. A sample form definition would look something like this:

{
  "pages": [
    {
      "name": "Personal details",
      "groups": ["group1"]
    }
  ],

  "groups": {
    "group1": {
      "name": "Your name",
      "fields": ["first_name", "last_name"]
    }
  },

  "fields": {
    "first_name": {
      "type": "text",
      "label": "First name"
    },
    "last_name": {
      "type": "text",
      "label": "Last name"
    }
  }
}

The hierarchy, as you can see, is always pages > groups > fields. The reason they're not actually nested is cause this way it'll be easier to also use for validation, for example.

Basic usage

The main definition can contain the following keys

  • pager: pager options
  • pages: array of page objects
  • group: object of groups
  • fields: object of fields

All are required, except pager.

pager

The pager object has two possible keys

  • type: pager type, defaults to numbered
  • position: where to put the pager, can be top or bottom

pages

Each item in the array is a page: an object with the following keys

  • type: page type, defaults to default
  • name: page name
  • groups: array of group names

groups

The keys in this object are referenced by the groups property of each page. Each group can contain the following keys

  • type: group type, defaults to default
  • name: group name
  • fields: array of field names

fields

The keys in this object are referenced by the fields property of each group. Each key is also used as the name if it isn't specified. The following keys are generic for each field type

  • type: field type
  • label: label text
  • name: name of the field
  • value: default value
  • required: true if field is required
  • attributes: object with key/value pairs for html attributes

text/email/password/number/date/time

{
  "type": "text",
  "label": "First name"
}
  • type: one of text, email, password, number, date or time

single_option

{
  "type": "single_option",
  "style": "radio",
  "label": "Gender",
  "options": [
    { "value": "male", "label": "Male" },
    { "value": "female", "label": "Female" }
  ]
}
Options
  • style: rendering style, select box (select, default) or radio buttons (radio)
  • options: an array of objects
    • value: actual value of the option
    • label: display value of the option, defaults to value

multi_option

{
  "type": "multi_option",
  "style": "checkbox",
  "label": "Interests",
  "options": [
    { "value": "cycling", "text": "Cycling" },
    { "value": "gaming", "text": "Gaming" },
    { "value": "skateboarding", "text": "Skateboarding" },
    { "value": "swimming", "text": "Swimming" }
  ],
  "value": ["cycling", "skateboarding"]
}
Options
  • style: rendering style, select box (select, default) or checkboxes (checkbox)
  • options: an array of objects
    • value: actual value of the option
    • label: display value of the option, defaults to value
  • value: can also be an array for this field type, if multiple options are selected