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

abraa-ka-dabraa

v1.3.0

Published

Abraa ka dabraa form can make your mind blast

Downloads

24

Readme

abraa-ka-dabraa

Abraa ka dabraa form can make your mind blast

NPM JavaScript Style Guide

Install

npm install abraa-ka-dabraa

Usage

This is a universal form where we can implement a number of form field without using any html tags. This comes with all dynamic and user friendly UI . You just need to import llamaaForm from abraa-ka-dabra and that all.

Below are some example or usages of llamaForm

1- Want to make a text Field with all validation.


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    return <LlamaForms 
            schema={{
              properties: {
                Name: {
                  type: 'string',
                  required: true,
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
                Name: {
                  type: 'text',
                  label: 'Name',
                  placeholder: "Enter your name",
                  description: "This is Name field",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                }
              }
            }}
            />
  }

2- Want to make a Login Page with all validation. Here llamaForms make your work more easy.


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    const login_test = (data) => {
      console.info("You have Successfully Login",data)
    }

    return <LlamaForms 
            schema={{
              type: 'object',
              title: 'Login',
              description: 'Login Form',
              properties: {
                email: {
                  type: 'string',
                  required: true,
                  enum: "",
                },
                password: {
                  type: 'string',
                  required: true,
                  enum: "",
                }
              }
            }}
            options={{
              type: 'object',
              fields: {
                email: {
                  type: 'email',
                  label: 'Email',
                  placeholder: "Enter your name",
                  description: "This is email field",
                  validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                },
                password: {
                  type: 'password',
                  label: 'Password',
                  placeholder: "Enter your password",
                  description: "This is passsword field",
                },
              }
            }}
            onSubmit={login_test}
        />
  }

If you want to make the login form in stepwise then you can just add step to each of the property in the property field

<>
    properties: {
      email: {
        type: 'string',
        required: true,
        enum: "",
        step: 1
      },
      password: {
        type: 'string',
        required: true,
        enum: "",
        step: 2
      }
    }
</>

3- You can add default values to the field by just using the data attributes


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    const login_test = (data) => {
      console.info("You have Successfully Login",data)
    }

    return <LlamaForms 
            schema={{
              type: 'object',
              title: 'Login',
              description: 'Login Form',
              properties: {
                email: {
                  type: 'string',
                  required: true,
                  enum: "",
                },
                password: {
                  type: 'string',
                  required: true,
                  enum: "",
                }
              }
            }}
            options={{
              type: 'object',
              fields: {
                email: {
                  type: 'email',
                  label: 'Email',
                  placeholder: "Enter your name",
                  description: "This is email field",
                  validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                },
                password: {
                  type: 'password',
                  label: 'Password',
                  placeholder: "Enter your password",
                  description: "This is passsword field",
                },
              }
            }}
            data={{
              email: '[email protected]',
              password: '123456'
            }}
            onSubmit={login_test}
        />
  }

4- You can add color box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {

    return <LlamaForms 
            schema={{
            properties: {
              color: {
                type: "string",
                required: false,
              },
            }
          }}
          options={{
            type: 'object',
            fields: {
             color: {
                type: "color",
                label: "Color",
                description: "This is color field",
                readOnly: false,
              },
            }
          }}
        />
  }

5- You can add color box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
            properties: {
              color: {
                type: "string",
                required: false,
              },
            }
          }}
          options={{
            type: 'object',
            fields: {
             color: {
                type: "color",
                label: "Color",
                description: "This is color field",
                readOnly: false,
              },
            }
          }}
        />
  }

6- You can add file upload box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
                image: {
                  type: 'string',
                  required: true,
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
              image: {
                  type: 'file',
                  label: 'Image',
                  description: "This is image field",
                  required: true,
                  errorMessage: "Please input jpg, png, jpeg only",
                  readOnly: false,
                  maxFileSize: 10000,
                  minFileSize: 1,
                  accept: ["jpg", "png", "jpeg"],
                }
              }
            }}
        />
  }

7- You can add Range bar


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
              dataRange: {
                  type: "string",
                  required: true,
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
              dataRange: {
                  type: "range",
                  label: "Range",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                  min: 0,
                  max: 200,
                  interval: 10,
                },
              }
            }}
        />
  }

8- You can add date and time box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
                date: {
                  type: 'string',
                  required: true,
                },
                currentTime: {
                  type: 'string',
                  required: true,
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
              date: {
                  type: "date",
                  label: "DOB",
                  value: "1997-02-01",
                  errorMessage: "",
                  readOnly: false,
                  autoFocus: false,
                  autoComplete: true,
                },
                currentTime: {
                  type: "time",
                  label: "Current Time",
                  description: "This is a time field",
                  readOnly: false,
                  autoFocus: false,
                  autoComplete: true,
                },
              }
            }}
          />
  }

9- You can add textarea box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
                details: {
                  type: 'string',
                  required: true,

                },
              }
            }}
            options={{
              type: 'object',
              fields: {
              details: {
                  type: "textarea",
                  label: "Details",
                  description: "This is details field",
                  placeholder: "Write......",
                  errorMessage: "",
                  readOnly: false,
                  autoFocus: true,
                  autoComplete: true,
                },
              }
            }}
        />
  }

10- You can add color box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
                gender: {
                  type: 'string',
                  required: true,
                  enum: {
                    Male: 'male',
                    Female: 'female',
                    Unknown: 'unknown'
                  },
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
              gender: {
                  type: "dropdown",
                  label: "Gender",
                  description: "Select Your Gender",
                  placeholder: "Select Your Gender",
                  autofocus: true,
                  readOnly: false,
                },
              }
            }}
        />
  }

11- You can add question box


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    

    return <LlamaForms 
            schema={{
              properties: {
                question: {
                type: 'string',
                required: true,
                step: 4,
                enum: ['yes', 'no', 'I dont know'],
              },
              }
            }}
            options={{
              type: 'object',
              fields: {
                question: {
                  type: 'radio',
                  label: "This is an amazing form builder. Do you like it?",
                  description: "This is radio field",
                  readOnly: false,
                },
              }
            }}
        />
  }

12- Here is a complete login with feedback page made with llamaforms


import {LlamaForms} from 'abraa-ka-dabraa'

export default function Example() 
  {
    const login_test = (data) => {
    console.log("login", data)
  }

    return <LlamaForms 
             schema={{
              type: 'object',
              title: 'Login',
              description: 'Login Form',
              wizard: true,
              properties: {
                email: {
                  type: 'string',
                  required: true,
                  enum: "",
                  step: 1,
                },
                password: {
                  type: 'string',
                  required: true,
                  enum: "",
                  step: 2,
                },
                details: {
                  type: 'string',
                  required: true,

                },
                color: {
                  type: "string",
                  required: false,
                },
                image: {
                  type: 'string',
                  required: true,
                  step: 1,
                },
                dataRange: {
                  type: "string",
                  required: true,
                  step: 3
                },
                question: {
                  type: 'string',
                  required: true,
                  step: 4,
                  enum: ['yes', 'no', 'I dont know'],
                },
                gender: {
                  type: 'string',
                  required: true,
                  enum: {
                    Male: 'male',
                    Female: 'female',
                    Unknown: 'unknown'
                  },
                  step: 5,
                },
                dob: {
                  type: 'string',
                  required: true,
                },
                currentTime: {
                  type: 'string',
                  required: true,
                },
                feedback: {
                  type: 'string',
                  required: true,
                  enum: ["You are good", "You have a good sense", "Maybe", "Also I am confused"]
                },
              }
            }}
            options={{
              type: 'object',
              fields: {
                email: {
                  type: 'email',
                  label: 'Email',
                  placeholder: "Enter your name",
                  description: "This is email field",
                  validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                },
                details: {
                  type: "textarea",
                  label: "Details",
                  description: "This is details field",
                  placeholder: "Write......",
                  errorMessage: "",
                  readOnly: false,
                  autoFocus: true,
                  autoComplete: true,
                },
                password: {
                  type: 'password',
                  label: 'Password',
                  placeholder: "Enter your password",
                  description: "This is passsword field",
                },
                color: {
                  type: "color",
                  label: "Color",
                  description: "This is color field",
                  readOnly: false,
                },
                dataRange: {
                  type: "range",
                  label: "Range",
                  errorMessage: "",
                  readOnly: false,
                  maxLength: 30,
                  autoFocus: true,
                  autoComplete: true,
                  min: 0,
                  max: 200,
                  interval: 10,
                },
                image: {
                  type: 'file',
                  label: 'Image',
                  description: "This is image field",
                  required: true,
                  errorMessage: "Please input jpg, png, jpeg only",
                  readOnly: false,
                  maxFileSize: 10000,
                  minFileSize: 1,
                  accept: ["jpg", "png", "jpeg"],
                },
                question: {
                  type: 'radio',
                  label: "This is an amazing form builder. Do you like it?",
                  description: "This is radio field",
                  readOnly: false,
                },
                gender: {
                  type: "dropdown",
                  label: "Gender",
                  description: "Select Your Gender",
                  placeholder: "Select Your Gender",
                  autofocus: true,
                  readOnly: false,
                },
                dob: {
                  type: "date",
                  label: "DOB",
                  value: "1997-02-01",
                  errorMessage: "",
                  readOnly: false,
                  autoFocus: false,
                  autoComplete: true,
                },
                currentTime: {
                  type: "time",
                  label: "Current Time",
                  description: "This is a time field",
                  readOnly: false,
                  autoFocus: false,
                  autoComplete: true,
                },
              }
            }}
            data={{
              email: '[email protected]',
              password: '123456',
              question: "yes",
              dataRange: 50,
            }}
            onSubmit={login_test}
        />
  }

Props Available In Abraa-ka-dabraa

Main props in Abraa-ka-dabraa

> schema: It is the base part of the form where you can give a name, title, description to your form 
> option: This is the use to control the form . It is responsible for making your form more meaningful
> data: Data can be use if you want some default value on your field while loading and it also act as remember me in your form
> onSubmit: this is a call back which accept a params for accepting the input values you provide in ui

Schema has the following props

> type:
> title: This is to give your form a title
> description: This is to give your form a description
> wizard: This is for making a dropdown multiple. If it is true then the dropdown is multiple, by default it is false
> properties: This will carry your dynamic custom field 

Properties has the following props

> required: This is for making a field as required , by default it is false
> enum:
> step: This is to make a form multi page, if you want to divide your page in multiple page then you can give the number of the page you want show , this accept only   number

Options has the following props

> type: 
> fields: It is to make your fields more dynamic and useful

Fields has the following props

> type: This is for making fields of different types. It has email,textarea,password,color,range,file,radio,dropdown,date,time
> label: It is use to give a name to a field
> placeholder: This is a placeholder for text field
> description: 
> validationRegax: This is for your field validation regax
> errorMessage: It returns a string as an error message 
> readOnly: this is to make a field as read only
> maxLength: This is for making a text field max length
> autoFocus: This is to make a field on focus while the page is active
> autoComplete: This is for giving suggestion of your history data to autocomplete
> maxFileSize: This props is used only in type file case where we can set the max size of file before upload
> minFileSize: This props is used only in type file case where we can set the min size of file before upload
> min: This is the props which is used only in type range where we can set a min for the range
> max: This is the props which is used only in type range where we can set a max for the range
> interval: 
> accept: This is used only for file type where we can accept a particular extension file, ex - ["jpg", "png", "jpeg"]

License

MIT © [Shaikh Mehboob Ali] (https://code.nettantra.com/shaikhmehboob.ali/abraa-ka-dabraa)