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

hibrad

v0.0.9

Published

Admin page restful platform

Downloads

1

Readme

HIBRAD

Library for build manager aplication client

VERSION 0.0.9

Search

Application for search action. It provide one method search is: User can input values to search bar, then system will get results from server and display to the screen. It provide many feature as:

  1. Realtime search.
  2. Paginagation.

How to use

Use can put attributes by props or extends Search class

Attributes

Attributes | Description ----- | ---------- fieldElements | list of field to direct how to user input value to search. request({keys,page,pageSize,success,fail.error}) | function, how to request search to server. | keys : dict value get by fieldElements. | page : page of list page user want see. | pageSize : max element in one page want see. | success(items,currentPage,maxPage) : | fail(res,json) | error(e) renderItem(data) | how to render one item in search result

Examples

  • Put attrs by props:
<Search
  fieldElements={[ <CharField name='key' />,<CharField name='description' />]}
  request ={ (keys,page,pageSize,success,fail,error)=>{
    ...
    //finish
    success(items,currentPage,maxPage)
  }}

  renderItem={ (item)=>{ return <div>{item.name}</div>}}
/>
  • Use extends class:
class ExampleSearch extends Search {

  get fieldElements(){
    return [ <CharField name='key' />,<CharField name='description' />];
  }

  request({keys,page,pageSize,success,fail,error}){
    ...
    //finish
    success(items,currentPage,maxPage)
  }

  renderItem(item){
    return <div>{item.name}</div>;
  }
}

Create

Feature:

  1. Create form input.
  2. Request to create object to server.
  3. Handle error.

Use

Like 'Search'

Attributes

Attributes | Description ---- | --------- fieldElements | list of field to direct how to user input value. request({formData,success,fail.error}) |function, how to request to server. |formData: data to create object. |success(item): |fail(res,json): |error(e) :

Examples

class ExampleCreate extends Create {
  get fieldElements(){
    return [ <CharField name='name' />,<CharField name='description' />];
  }

  request({formData,success,fail,error}){
    ...
    //finish
    success(createdItem)
  }
}

Read

Feature:

  1. Fetch data from server
  2. Display result

Use

Like 'Search'

Attributes

Attributes | Description ---- | ------- getRequest({values,success,fail,error}) | how to get item on server. renderItem(item) | how to render item fetched.

Example

class ExampleRead extends Read {

  getRequest({values,success,fail,error}){
    ...
    //finish
    success(fetchedItem)
  }

  renderItem(item){
    return <div>{item.name}</div>;
  }
}

Update

Feature:

  1. Fetch data from server.
  2. Create form to user input data.
  3. Request update value to server.
  4. Handle error.

Use

Like 'Search'

Attributes

Attributes | Description ---- | -------- fieldElements | list of field to direct how to user input value. request({values,formData,success,fail.error} | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item): | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | fetch object

Examples

class ExampleUpdate extends Update {
  get fieldElements(){
    return [ <CharField name='name' />,<CharField name='description' />];
  }

  request({values,formData,success,fail,error}){
    ...
    //finish
    success(updatedItem)
  }

  getRequest({values,success,fail,error}){
    ...
    //finish
    success(fetchedItem)
  }
}

Delete

Feature

  1. Fetch data from server.
  2. Confirm delete action of User.
  3. Request delete object to server.
  4. Handle error

Use

Like 'Search'

Attributes

Attributes | Description ---- | -------- request({values,formData,success,fail.error}) | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | fetch object renderItem(item) |

Examples

class ExampleDelete extends Delete {

  request({values,success,fail,error}){
    ...
    //finish
    success()
  }

  getRequest({values,success,fail,error}){
    ...
    //finish
    success(fetchedItem)
  }

  renderItem(item){
    return <div>{item.name}</div>;
  }
}

Manager

Combine Search, Create, Read, Update, Delete to one app Manager. It has all feature of each child application and combine them operate.

Use

Like 'Search'

Attributes

Attributes | Description ---- | -------- searchFieldElements | list of field to direct how to user input value to search. fieldElements | list of field to direct how to user input value. searchRequest({keys,page,pageSize,success,fail,error}) | function, how to request search to server. | keys : dict value get by fieldElements. | page : page of list page user want see. | pageSize : max element in one page want see. | success(items,currentPage,maxPage) : | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | how to get item on server. | values : contain id of object | success(item) | fail(res,json) | error(e) createRequest({formData, success, fail, error}) | function, how to request create to server. | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : updateRequest({values,formData, success, fail, error}) | function, how to request update to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : deleteRequest({values, success, fail, error}) | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : renderSearchItem(item) | how to render one item of search result renderReadItem(item) | how to render fetched item renderDeleteItem(item) | how to render fetched item to delete

Examples

import React, {PropTypes} from 'react'

import {TextField,CharField,SelectField,ImageField,ReferenceField } from 'src'

import {Manager} from 'src'

import {SuggestRestAPI,SearchRestAPI,CreateRestAPI,GetRestAPI,UpdateRestAPI,DeleteRestAPI} from 'src'


import {SignerField} from './SignerManager'
import {LegalDocumentTypeField} from './LegalDocumentTypeManager'


const URL = "http://127.0.0.1:8000/api/legal_documents";



class LegalDocumentManager extends Manager {

    // props
    get searchFieldElements() {
        return [< CharField name = 'name' inline = {
                false
            }
            showLabel = {
                false
            } />]

    }

    // props
    get fieldElements() {
        return [ <CharField name = 'name' />, <LegalDocumentTypeField name = 'type' sendName = 'type_id' />, < TextField name = "description" />, < ImageField name = "avatar" />, < SignerField name = 'signer' sendName = 'signer_id' />, < LegalDocumentField multiple = {
                true
            }
            name = 'is_guided_by_documents' verboseName='Duoc huong dan boi' sendName = 'is_guided_by_document_ids' />
        ]
    }


    // props
    searchRequest({keys,page,pageSize,success,fail,error}){
      new SearchRestAPI({
          getUrl: this.getSearchUrl.bind(this),
          getItems: (res, json) => {
              return json.results;
          },
          getCurrentPage: (res, json) => {
              return json.currentPage;
          },
          getMaxPage: (res, json) => {
              return json.pageCount;
          }
      }).request({keys,page,pageSize,success,fail,error});
    }

    // props
    getRequest({values,success,fail,error}){
      new GetRestAPI(this.getObjectUrl.bind(this)).request({values,success,error})
    }

    // props
    createRequest({formData, success, fail, error}){
      new CreateRestAPI(this.getCreateUrl()).request({formData,success,fail,error})
    }

    // props
    updateRequest({values,formData, success, fail, error}){
      new UpdateRestAPI(this.getObjectUrl.bind(this)).request({values,formData, success, fail, error})
    }


    // props
    deleteRequest({values, success, fail, error}){
      new DeleteRestAPI(this.getObjectUrl.bind(this)).request({values, success, fail, error});
    }


    // props
    getSearchUrl(keys, page, pageSize) {
        return `${URL}/search?page=${page}&name=${keys.name
            ? keys.name
            : ""}&size=${pageSize}`;
    }

    // props
    getObjectUrl(keys) {
        return `${URL}/${keys.id}/`;
    }

    // props
    getCreateUrl() {
        return `${URL}/`;
    }

    // props
    renderSearchItem(item) {
        if (!item) {
            return <div>None</div>
        }
        return (
            <div>
                <div>{item.name}</div>
                <div>
                    Description: {item.description}
                </div>
            </div>
        )
    }

    // props
    renderReadItem(item) {
        if (!item) {
            return <div>None</div>
        }
        return (
            <div>
                <h1>{item.name}</h1>
                <div>
                    Type: {item.type
                        ? item.type.name
                        : null}
                </div>
                <div>Description: {item.description}</div>
                <img src={item.avatar} width="100" height="100"/>
                <div>
                    Nguoi ky: {item.signer
                        ? item.signer.name
                        : "Khong co!"}
                </div>
                <div>
                    Tai lieu duoc huong dan: {item.is_guided_by_documents.map((item) => {
                        return <div key={item.id}>{item.name}</div>
                    })
}
                </div>
            </div>
        );
    }

    // props
    renderDeleteItem(item) {
        if (!item) {
            return <div>None</div>
        }
        return (
            <div>
                <h1>{item.name}</h1>
                <div>{item.description}</div>
                <img src={item.avatar} width="100" height="100"/>
            </div>
        );
    }
}

export default LegalDocumentManager

Form:

React Component for combine field. It can provide tool of input value fetch.

Use

  • Use to combine field.
  • It support User input value to form

API

When Form Component binded to Element, it has API:

API | Description ---- | -------- getValues() | return values of all field in form. getFormData() | return formData to request to server. getFormDataValue() | return formData in json format

Example

class TestForm extends React.Component {


    getFieldElements() {
        return [< CharField name = "search" />, < TextField name = "data" showLabel = {
                false
            } />, < SelectField name = "gender" options = {
                [
                    {
                        value: "nam",
                        label: 'Nam'
                    }, {
                        value: 'nu',
                        label: 'Nu'
                    }
                ]
            } />
        ]
    }

    render() {
        return (
            <div>
                <Form fieldElements ={this.getFieldElements()} onChange={(form)=>{
                    console.log(form.getValues());
                    console.log(form.getFormData());
                  }} />
            </div>
        )
    }
}

render(
    <TestForm/>, document.getElementById('test'));


or:

<Form
  fieldElements={
  [ <CharField name = "search" />,
    <TextField name = "data" showLabel = {false} />,
    <SelectField name = "gender" options = {
          [
              {
                  value: "nam",
                  label: 'Nam'
              }, {
                  value: 'nu',
                  label: 'Nu'
              }
          ]
      } />
  ]
  }
/>

Field:

Is Used in Form. It declare how to User can input one value.

0. Field

The abstract of all Field.

API

API | Description ---- | --------- getKeyValueList() | return list of dict { key: key,value:value} to add to formData. getValue() | return value of field. getError() | return error of field. putValue(value) | putValue to field. putError(error) | putError to field.

PROPS:

Prop | Description ---- | -------- label | 'label' before input, if undefined, system use 'name' as default. name | name of field, it's required. showLabel | signal boolean, default is true, if true? show label before input : don't show anything. inline | signal boolean, default is true, if true? show label and input in onw line : show int two line. hidden | show or hide field

How to use:

It's used in form ( <Form fieldElements = list of 'field' />)

1. CharField:

Input string value by text input.

2. TextField

Input string value by textarea.

3. FileField

Input File value.

4. ImageField

Input Image value.

5. SelectField

Input select value.

Extra props

  • options: list of option in input.

Example

<SelectField name = "gender" options = {
      [
          {
              value: "nam",
              label: 'Nam'
          }, {
              value: 'nu',
              label: 'Nu'
          }
      ]
  } />
  ```

### 6. ReferenceField
Input reference value.
It is select field that item of options are fetched from server.

#### Extra Props:

Prop | Description
---- | --------
**sendName** | name of value in formData
**managerElement** | manage element for select option in manager app.
**suggestRequest({key, success, fail, error})** | How to request suggest item for select from server.
**renderItem(item)** | How to render one item in list suggest item
**receive** | How to receive value for type
**send** | How to send value for type
**toValue** | How to get value for type

#### Example:

Config:
```js
export class LegalDocumentField extends ReferenceField {
   get managerElement() {
       return <LegalDocumentManager />
   }
   get receive() {
       return 'object'
   }
   get send() {
       return 'id'
   }
   get toValue() {
       return 'object'
   }
   suggestRequest({key, success, fail, error}) {
       return new SuggestRestAPI({
           getUrl: (key) => `http://127.0.0.1:8000/api/legal_documents/search?name=${key}`,
           getItems: (res, json) => json.results
       }).request({key, success, fail, error})
   }
   renderItem(item) {
       return <div>{item.name}</div>
   }
}

And Use:

   <LegalDocumentField name='re' sendName='re_id' />

7. ManyObjectField

Feature

Provide field for many object input. It provide json string as value

Props

Prop | Description ---- | -------- sendName | name of value send to server fieldElements | fields of form to input one Object renderItem(item) | how to render one object getSendItem(item) | how to send one value of object

Examples

  <ManyObjectField
    name='drug_substance_in_drug_items'
    sendName='drug_substance_in_drug_items_json'
    fieldElements={[<CharField name='id' hidden />,<DrugSubstanceField name='drug_substance' receive='object' send='object' />,<TextField name='info' />]}
    renderItem ={(item)=> <div>{item.drug_substance.name} - { item.info}</div>}
    getSendItem = {({id,drug_substance,info}) =>{ return {id: id,drug_substance_id : drug_substance.id,info: info} } }
    />

Update version 0.0.9

Field:

Add prop: hidden hidden is the attribute that: true : hide field false or undefined or not declare: don't anything.

Form:

Add function: getFormDataJson() return form data in json format

ManyObjectField:

Feature

Provide field for many object input. It provide json string as value

Props

Prop | Description ---- | -------- sendName | name of value send to server fieldElements | fields of form to input one Object renderItem(item) | how to render one object getSendItem(item) | how to send one value of object

Examples

  <ManyObjectField
    name='drug_substance_in_drug_items'
    sendName='drug_substance_in_drug_items_json'
    fieldElements={[<CharField name='id' hidden />,<DrugSubstanceField name='drug_substance' receive='object' send='object' />,<TextField name='info' />]}
    renderItem ={(item)=> <div>{item.drug_substance.name} - { item.info}</div>}
    getSendItem = {({id,drug_substance,info}) =>{ return {id: id,drug_substance_id : drug_substance.id,info: info} } }
    />

Navigation:

Fix next overload issue.