open-index/open-npm huggingface dataset:
npm package: @humblejs/breadcrumbs
Description: Breadcrumbs navigation for the page
Author: Amrayn Web Services
Latest version: 1.10.6

# Breadcrumbs
Breadcrumbs navigation for the page

[Demo](https://humble.js.org/pkg/breadcrumbs/demo)

## Install

```
yarn add @humblejs/breadcrumbs
```

## Style

Import all styling
```
@import '@humblejs/breadcrumbs/dist/css/styles.scss';
```

## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `items`    | array of object<br> * text (string, required)<br> * link      | YES | Empty |
| `type`    | string<br> * `chevron` <br> * `slash` <br> * `double-angle`      | NO | `chevron` |
| `separator`    | string<br>If specified the `type` is ignored and this separator is used instead | NO | Null |
npm package: @humblejs/context
Description: Lightweight wrapper React 16 context API
Author: Amrayn Web Services
Latest version: 1.9.14

# Context
Lightweight wrapper React 16 context API

[Demo](https://humble.js.org/pkg/context/demo)

## Install

```
yarn add @humblejs/context
```

## Usage
```
import { Provider, withContext } from '@humblejs/context';
```

### Provider
Provides the context using React 16 context API

```
import { Provider } from '@humblejs/context';

const App = () => (
  <Provider value={
    {
      name: 'Amrayn Web Services',
      productName: 'humblejs',
    }
  }>
    <MyComponent />
  </Provider>
);
```

### withContext
Function to consume all the props provided by `Provider`

You can use this function in 3 different style, each one has its own benefit over other.

#### Simple
Simple mapping is where you map all the consumables in one-to-one fashion.

```
withContext(
  'name',
  'productName',
)
```

The props are available with same names, i.e, `props.name` and `props.productName`

For example

```
<div>Company name is {props.name}. Product: {props.productName}</div>
```

#### Mapped
You can map all the consumables with a custom name.

```
withContext(
  {
    'companyName': 'name',
  },
  'productName',
)
```
The `name` prop is available as `companyName` and `productName` is available as it is.

For example

```
<div>Company name is {props.companyName}. Product: {props.productName}</div>
```

#### Wrapped Object
You can map all the consumables in a separate wrapped object. **Notice the object**

```
withContext(
  {
    company: [
      'name',
      'productName',
    ],
  }
)
```

All the information is under object called `company`.

For example

```
<div>Company name is {props.company.name}. Product: {props.company.productName}</div>
```

## Provider Nesting
There will be time when you require multiple contexts created in same file. You will have to create
your custom context pair.

```
import Context from '@humblejs/context';

const { Provider: Context1Provider, withContext: withContext1 } = Context.createContext();
const { Provider: Context2Provider, withContext: withContext2 } = Context.createContext();

<Context1Provider value={
  {
    name: 'context1-name',
    age: 22,
  }
}>
  <Context2Provider value={
    {
      amount: 24.33,
    }
  }>
    <MyComponent />
  </Context2Provider>
</Context1Provider>
```

```
const MyComponent = props => (
  <div>
    <div>Name: {props.name}</div>
    <div>Age: {props.age}</div>
    <div>Amount: {props.amount}</div>
  </div>
);

export default flow( // flow from lodash
  withContext1(
    'name',
    'age',
  ),
  withContext2(
    'amount',
  ),
)(MyComponent);
```
npm package: @humblejs/core
Description: Core packages shared between humblejs server and client
Author: Amrayn Web Services
Latest version: 1.4.65

# Core
Core packages shared between humblejs server and client

A lot of these packages are used in the server and can be shared in micro services.

## Install

```
yarn add @humblejs/core
```

## Modules

* `AppProvider` (`app-provider.js`) - HOC for application (root of application that contains all the information including auth)
  * `appContext` - Consumer for AppProvider
* `AuthProvider` (`auth-provider.js`) - HOC for auth related stuff
  * `withAuth` - Consumer for AuthProvider
* `CronBase` (`cron.js`)
* `Logger` (`logger.js`)
* `EnvUtils` (`load-env.js`) - Load and override any environment variables from various places with priority.
* `PageDefinitions` (`pagedef.js`)
* `snooze()` (`snooze.js`)
* `PasswordUtils` (`password.js`)
* `Microservice` (`microservice.js`) - Microservice class that is used to register all the service mini-functions
  * `MicroserviceMessageBus` - Microservice channel bus responsible to talk to microservice (using HTTP protocol)
  * `createChannels` - utility to create microservice channel bus.
* `Model` (`model.js`) - Core of any database model that automatically provide ability to CRUD the record.
* `DatabaseManager` (`db.js`) - The core of database manager providing utility functions to query and update/insert/delete. You should not need this if you use `Model` as it is wrapped in it.
npm package: @humblejs/data-provider
Description: Provides JSON data from remote api
Author: Amrayn Web Services
Latest version: 1.2.6

# DataProvider
Provides JSON data from remote api

[Demo](https://humble.js.org/pkg/data-provider/demo)

## Install

```
yarn add @humblejs/data-provider
```

## Usage

```
import createDataProvider from '@humblejs/data-provider';

const { DataProvider, withData } = createDataProvider();

const App = () => (
  <DataProvider url="/api/v1/data">
    <MyComponent />
  </DataProvider>
);
```

```
const MyComponent = ({ data }) => (
  <div>My address is {data.ADDRESS}</div>
);

export default withData(MyComponent, [
  'ADDRESS',
]);
```

### Advanced

For JSON Array response

```
withData(MyComponent, '*')

...

Array.isArray(props.data.items) // == true
```

For custom key name

```
withConfig(MyComponent, '*', 'staff')

...

Array.isArray(props.staff.items) // == true
```
npm package: @humblejs/demo
Description: Demo component for wrapping components with fixtures and media.
Author: Amrayn Web Services
Latest version: 2.2.13

# Demo
Demo component for wrapping components with fixtures and media.

[Demo](https://humble.js.org/pkg/demo/demo)

## Install

```
yarn add --dev @humblejs/demo
```

## Component
By default `humblejs-pkg new` integrates the demo component.

`<Demo>` component takes fixture group and fixtures for each group containing props to mount component against.

## Fake Fetch
Sometimes you will need to override `fetch` function to return a mocked JSON response
for URL. This package provides a function to do that for you.

In `fixtures.js` you can define:

```
import { registerFakeFetch } from '@humblejs/demo';

const delay = 3000;

registerFakeFetch({
  '/api/item': {
    'name': 'sample-object'
  },
}, delay);
```

Once registered, `fetch`ing `/api/item` from the page will return `{name: 'sample-object'}` object after `3000 ms`

By default, `delay` is 0 i.e, it returns immediately without a wait.

## Create Items
You can create items by using `createItems` to create JSON objects.

Following function is just a helper to create a single item that we can use with `createItems`
```
const createSingleItem = idx => ({
  id: idx,
  name: `item-${idx}`,
});
```

```
import { createItems } from '@humblejs/demo';
```

Now you can use createItems

```
createItems(11, 10, createSingleItem)
```

Above function will run `createSingleItem` for index `11` to `21` and return array of items.
npm package: @humblejs/form
Description: Form elements package contains various UI components for forms.
Author: Amrayn Web Services
Latest version: 1.9.10

# Form
Form elements package contains various UI components for forms.

[Demo](https://humble.js.org/pkg/form/demo)

## Install

```
yarn add @humblejs/form
```

## Style

Import all the styling

```
@import '@humblejs/form/dist/css/styles.scss';
```

or import separately

```
@import '@humblejs/form/dist/css/form/input.scss';
@import '@humblejs/form/dist/css/form/checkbox.scss';
```

## Usage

You can import all the packages

```
import Form from '@humblejs/form'

...

<Form.Input />
```

or you can import separately
```
import { Input } from '@humblejs/form'

...

<Input />
```

### Input

| **Description** | **Value** |
|-----------|----------|
| Base component   | `<div>` |
| Base class   | `hjs-form__input` |

| **Props** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `name`    | string<br><br>Name of the text input element      | YES | |
| `icon`    | Icon from `@humblejs/icon` | NO | |
| `hasError` | bool<br><br>If true it adds `has-error` class | NO | FALSE |

### Checkbox

| **Description** | **Value** |
|-----------|----------|
| Base component   | `<li>` |
| Base class   | `hjs-form__checkbox` |
| Notes   | Must be inside `<ul>` |

| **Props** | **Type** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `name`    | string<br><br>Name of the text input element      | NO | null |
| `value`    | string<br><br>Value for checkbox      | NO | empty |
| `id`      | string<br><br>ID of input element | YES | |
| `onChange`      | func(e)<br><br>e is bool whether checked or not | NO | |
| `checked`      | bool<br><br>Checked or not | NO | `false` |
| `type`      | string (`checkbox`, `radio`)<br><br>Type of input | NO | `checkbox` |
| `icon`    | Icon from `@humblejs/icon` | NO | `check` |
| `shape`    | string (`round`, `square`)<br><br>Shape of checkbox | NO | `round` |
| `animation`    | string (`smooth`, `jelly`, `rotate`, `pulse`)<br><br>Animation when user interacts with checkbox  | NO | `smooth`  |
| `classList`    | Array of string<br><br>For further customising pretty checkbox | NO | []  |
npm package: @humblejs/icon
Description: SVG based Icons packages. Thanks to Font Awesome
Author: Majid Q.
Latest version: 1.14.0

# Icon
SVG based Icons packages. Thanks to Font Awesome

[Demo](https://humble.js.org/pkg/icon/demo)

## Install

```
yarn add @humblejs/icon
```

## Style

Import all styling
```
@import '@humblejs/icon/dist/css/styles.scss';
```

## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `size`    | string (`large`, `small`, `custom`)      | NO | Custom with 18px x 18px |
| `flipped`    | bool<br><br>Flip icon horizontally | NO | FALSE |
| `className`    | string<br><br>Custom class name | NO | EMPTY |

## Usage

You can import all the packages

```
import Icons from '@humblejs/icon';

...

<Icons.Yelp />
```

or you can import separately
```
import { Facebook } from '@humblejs/icon'

...

<Facebook />
```

or you can import from file
```
import FacebookIcon from '@humblejs/icon/dist/js/facebook'

...

<FacebookIcon />
```
npm package: @humblejs/img
Description: Image with low resolution support. Low res image is loaded and once high res is ready, low res is replaced with high res.
Author: Amrayn Web Services
Latest version: 1.9.7

# Img
Image with low resolution support. Low res image is loaded and once high res is
ready, low res is replaced with high res.

[Demo](https://humble.js.org/pkg/img/demo)

## Install

```
yarn add @humblejs/img
```

## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `className`    | string<br><br>Extra class on top of default `co-img` | No | Empty |
| `src`    | string<br><br>High resolution image source | Yes |  |
| `srcLowResolution`    | string<br><br>Low resolution image source | No | `src` value |
| `alt`    | string<br><br>Image `alt` tag | Yes | |
| `fallback`    | component<br><br>Fallback component when image could not be loaded. This acts as a placeholder for error. | No | |
| `onLoad`    | func<br><br>Callback when high-res image was successfully loaded | No | |
| `onError`    | func<br><br>Callback if there was problem in loading image | No | |
| `type`    | string (`img`, `div`) <br><br>Load `<img>` tag or `<div>` with background image tag | No | `img` |
npm package: @humblejs/infinite
Description: Infinite scrolling container either by click or by scrolling.
Author: Amrayn Web Services
Latest version: 1.3.17

# Infinite
Infinite scrolling container either by click or by scrolling.

[Demo](https://humble.js.org/pkg/infinite/demo)

## Install

```
yarn add @humblejs/infinite
```

## Notes

 * `fetchMore({ callback, until })`
 * `sharedProps (object)` to share props with all the items
 * `overriddenProps (object)` to override props for all the items
npm package: @humblejs/lib
Description: Common utils library
Author: Amrayn Web Services
Latest version: 1.10.24

# Lib
Common utils library

## Install

```
yarn add @humblejs/lib
```

## Style

Following styles must be imported for all the components

```
@import '@humblejs/lib/dist/css/global.scss';
@import '@humblejs/lib/dist/css/themes/default.scss';
```

Other available files

 * `@humblejs/lib/dist/css/reset.scss`
 * `@humblejs/lib/dist/css/toc.scss` (table of contents)

## Usage
Import complete library

```
import lib from '@humblejs/lib';
```

Import specific function or module

```
import { logger } from '@humblejs/lib';
```

or you can import from direct location like:

```
import logger from '@humblejs/lib/dist/js/logger';
```

## Modules

| *Name* | *Direct import* |
|--------|-------------------|
| `logger` ~> `{ info, debug, error, warn }` ,`{ isLoggingEnabled }` | `dist/js/logger` |
| `Analytics` ~> `{ sendEvent, reset, pageview }` | `dist/js/ga` |
| `{ generateToc, addPermaLinkToHeaders }` | `dist/js/toc` |
| `{ isBrowser, isIE }` | `dist/js/browser` |
| `registerScrollCallback, { isElementInViewport }` | `dist/js/register-scroll-callback` |
| `addListener(elem, evt, fn), { addEventListener }` | `dist/js/event/add-listener` |
| `removeListener(elem, evt, fn)` | `dist/js/event/remove-listener` |


### `logger`
Enable/disable `console` logging. Configuration is based on `localStorage`

### `ga`
Google analytics wrapper

### `toc`
Table of contents generator

### `browser`
Browser related utility functions

### `register-scroll-callback`
Register callback when user scrolls the page

`registerScrollCallback` takes options with `callback` (fn) and `scrollRefId` 
(element ID) so when `scrollRefId` is in view (or passed the point) `callback` 
is triggered.

e.g,

```
window.onload = function() {
  registerScrollCallback({
    scrollRefId: 'menu-bar',
    callback: () => {
      console.log('Just past the menu bar');
    },
  });
}
```
npm package: @humblejs/link
Description: Link supports smooth transition of pages within humble.js framework which displays spinner (or custom skeleton for the page) while loading the page.
Author: Amrayn Web Services
Latest version: 1.10.2

# Link
Link supports smooth transition of pages within humble.js framework which displays
spinner (or custom skeleton for the page) while loading the page.

Usage is similar to `<a>`

## Install

```
yarn add @humblejs/link
```

## Example

```javascript
import Link from '@humblejs/link';

// ...

<Link href={myLink} className="any-custom-class">My Link</Link>
```
npm package: @humblejs/modal
Description: [Demo](https://humble.js.org/pkg/modal/demo)
Author: Majid Q.
Latest version: 1.4.0

# Modal

[Demo](https://humble.js.org/pkg/modal/demo)

## Install

```
yarn add @humblejs/modal
```

## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `title`    | string      | NO | `null` |
| `onCancel`    | func<br><br>Triggers when dialog is cancelled. This function is triggered when close button is clicked, escape key is pressed or clicked outside the dialog. Usually you will set `isOpen` to `false` in the parent     | YES | |
| `hasCloseButton`    | bool<br><br>Whether there is close button or not. This button calls `onCancel`      | NO | `true` |
| `isOpen`    | bool<br><br>Whether modal is open or not, usually you will set it from parent's state     | NO | `false` |
| `fullScreen`    | bool<br><br>Whether modal is full screen or not     | NO | `false` |
| `transitionType`    | one of<br>* `slide`<br>* `appear`     | NO | `appear` |
npm package: @humblejs/share
Description: Buttons to share link on social media and other channels
Author: Majid Q.
Latest version: 1.11.3

# Share
Buttons to share link on social media and other channels

[Demo](https://humble.js.org/pkg/share/demo)

## Install

```
yarn add @humblejs/share
```

## Style

Import all styling
```
@import '@humblejs/share/dist/css/styles.scss';
```


## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `url`    | string<br><br>URL to share      | Yes |  |
| `title`    | string<br><br>Title of the URL | No | Empty |
| `excerpt`    | string<br><br>Excerpt from URL (or brief description) | No | Empty |
| `text`    | string<br><br>Detailed text | No | Empty |

## Analytics
You can map GA analytics for share buttons using `dist/js/ga.js`

```
import { registerGaEvents, gaEventMap } from `@humblejs/share`;

registerGaEvents();
```

```
import { registerGaEvents, gaEventMap as shareButtonsGaEventMap } from `@humblejs/share`;

registerGaEvents({
  eventMap: shareButtonsGaEventMap, // this is default mapping
});
```
npm package: @humblejs/shopping-cart
Description: Utilities specifically for adding shopping cart to your website.
Author: Amrayn Web Services
Latest version: 1.9.6

# Shopping Cart
Utilities specifically for adding shopping cart to your website.

[Demo](https://humble.js.org/pkg/shopping-cart/demo)

## Install

```
yarn add @humblejs/shopping-cart
```

## Usage

```
import { withShoppingCart, ShoppingCartProvider } from '@humblejs/shopping-cart';
```

```
...

const AddToCartButton = withShoppingCart(props => (
  <button onClick={() => { props.shoppingCart.add(props.product); }}>Add</button>
));

...

<ShoppingCartProvider>
  <AddToCartButton />
</ShoppingCartProvider>
```

## Context Props
All the functions are available via global context under `shoppingCart` object. Following are the list of functions available:

| Key | Description |
|----------|-------------|
| `list()` | Return all the items in the cart in RAW format |
| `add(item, quantity)` | Add `item` to the cart with specified `quantity` |
| `changeQuantity(item, newQuantity)` | Change number of `item`s to specified quantity. `0` quantity will remove item from the cart. |
| `remove({ id })` | Remove item with specified ID |
| `has({ id })` | Determine whether item with specified ID is in the cart or not |
| `get({ id })` | Get item with specified ID from the cart if available. Otherwise NULL |
| `getQuantity()` | Count quantity of items with specified ID in the cart |
| `total()` | Calculate total cost for the items in the cart based on their unit prices |

## Wishlist
Shopping cart component also comes with wishlist provider, the provider points to same base component which helps in maintaining the code but some functions may be unnecessary and some are unavailable (e.g, `getQuantity` does not apply to wishlist), so usage of it is to be done with care.

```
import { withShoppingCart, withWishlist, ShoppingCartProvider, WishlistProvider } from '@humblejs/shopping-cart';

// ....

const PageWrapper = flow(
  withShoppingCart,
  withWishlist,
)(Page);

// ....

<ShoppingCartProvider {...props.cart}>
  <WishlistProvider {...props.wishlist}>
    <PageWrapper />
  </WishlistProvider>
</ShoppingCartProvider>
```

where `props.cart` is props specific to shopping cart and `props.wishlist` is specific to wishlist.

## Item
All the functions take `item` as first parameter. Each item must at least contain `id` field.

General `Item` model must have following properties for it to properly work
 * `id`
 * `unitPrice`

All the rest of the fields are considered `product`

The shopping cart uses `localStorage` for client side. Validations on the server side are done separately.
npm package: @humblejs/spinner
Description: CSS based spinner to show contents loading
Author: Amrayn Web Services
Latest version: 1.11.0

# Spinner
CSS based spinner to show contents loading

[Demo](https://humble.js.org/pkg/spinner/demo)

## Install

```
yarn add @humblejs/spinner
```

## Style

Import all styling
```
@import '@humblejs/spinner/dist/css/styles.scss';
```

## Props

| **Name** | **Type / Description** | **Is Required?** | **Default** |
|-----------|----------|-------------|-------------|
| `className`    | string<br><br>Extra class on top of default `co-spinner` | No | Empty |
| `color`    | string<br><br>Hex color | No | `$lib-colour-light` from theme |
| `color2`    | string<br><br>Secondary for| No | `color` or `$lib-colour-light` from theme |
| `size`    | string<br><br>Secondary for| No | `18px` |