open-index/open-npm huggingface dataset:
npm package: @pndewit/azure-api-client
Description: A tiny client to communicate with the Azure API
Author: Patrick de Wit
Latest version: 2.2.0

# @pndewit/azure-api-client
A tiny client to communicate with the Azure API.

## Installation

```bash
npm install --save @pndewit/azure-api-client
```

## Usage

```javascript
// Import the package
import AzureAPI from '@pndewit/azure-api-client';

// Set up a client instance with default values for all API requests
const azureAPI = new AzureAPI('my_personal_access_token', 'https://dev.azure.com/my_organization/', 'my_project');

// Start using the client
const repository = await azureAPI.repositories.get('my-repository');
```
npm package: @pndewit/eslint-plugin-destructure-bracket-spacing
Description: ESLint plugin to enforce consistent spacing for destructuring and constructing array and object brackets
Author: Patrick de Wit
Latest version: 1.0.2

# @pndewit/eslint-plugin-destructure-bracket-spacing
ESLint plugin to enforce consistent spacing for destructuring and constructing array and object brackets.

## Installation

```bash
npm install --save @pndewit/eslint-plugin-destructure-bracket-spacing
```

## Usage
```javascript
import destructureBracketSpacing from '@pndewit/eslint-plugin-destructure-bracket-spacing';

export default [
  destructureBracketSpacing.recommended,
  {
    rules: {
      '@pndewit/destructure-bracket-spacing': 'error',
    },
  },
];
```
npm package: @pndr/action-sheet
Description: Used for making a choice between a set of options on a mobile device.
Latest version: 0.3.0

# ActionSheet

[![npm package][npm-badge]][npm]

Used for making a choice between a set of options on a mobile device.	

## Getting started

````
npm install @cmds/action-sheet --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| onClose | Function | ✓ | Triggers after a user clicks an option or cancels the action sheet. |
| options | Array | ✓ | An array of `Option`. Options the user can choose from. |

#### Option

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| title | String | ✓ | Title describing the option. |
| onClick | Function | ✓ | Triggers when the user click the option. |
| variant | OneOf | | Can either be `undefined` or `danger` (makes the option red) |
| strong | Boolean | | Whether to make the option appear strong (bold). |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/action-sheet.svg
[npm]: https://www.npmjs.org/package/@cmds/action-sheet
npm package: @pndr/adaptive-dialog
Description: Used for displaying dialogs (optionally relative to a reference element) that adapt to mobile devices.
Latest version: 0.2.0

# Adaptive Dialog

[![npm package][npm-badge]][npm]

Used for making a choice between yes and no.

## Getting started

````
npm install @cmds/adaptive-dialog --save
````

### More information

This component is designed and developed as part of [Pender Design System][pndr]. 

[pndr]: https://github.com/penderio
[npm-badge]: https://img.shields.io/npm/v/@pndr/adaptive-dialog.svg
[npm]: https://www.npmjs.org/package/@pndr/adaptive-dialog
npm package: @pndr/application-share
Description: Used for managing invites and collaborators
Latest version: 0.5.0

# application-share

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe application-share here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/attachment-field
Description: Used for (pre)viewing and organizing a list of attachments.
Latest version: 0.30.0

# ![AttachmentField](https://user-images.githubusercontent.com/44801418/48063098-93a3f380-e1f6-11e8-95ef-5a9d39ef96ae.png) AttachmentField

[![npm package][npm-badge]][npm]

Used for (pre)viewing and organizing a list of attachments.

## Features

- Display an array of attachments
- Preview overlay
- Support for following types
    - Images (png, jpeg)
    - Animated images (gif)
    - Video (mp4)
    - Audio (ogg, mp3)
- Upload progress indicator

## Getting started

````
npm install @cmds/attachment-field --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| attachments | Array | ✓ | Array of `Attachment` objects. [Learn more](#attachment) |
| onAttach | Function |  | Callback invoked whenever one or more files get dropped or selected in the field: `({files: [File]}): void` |
| onRemoveAttachment | Function |  | Callback invoked whenever an attachment get's removed: `({id: string, file: File}): void` |
| onRenameAttachment | Function |  | Callback invoked whenever an attachment's filename changes: `({id: string, attachmentId: string, filename: string}): void` |
| onClear | Function |  | Callback invoked whenever all attachments get removed at once: `({id: string}): void` |
| onSort | Function |  | Callback invoked whenever one of the attachments get's sorted: `({id: string, attachmentId: string, targetIndex: number}): void` |

#### Attachment in upload

```
{
    filename: "Nature.jpg",
    id: "att8NBBKRa8slSrnB",
    typeId: "image/jpeg",
    uploading: true,
    progress: 70
}
```

#### Attachment

```
{
    filename: "Nature.jpg",
    id: "att8NBBKRa8slSrnB",
    size: 1165273,
    typeId: "image/jpeg",
    url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB",
    uploading: false,
    progress: null,
    thumbnails: {
        large: {
            height: 384,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_large",
            width: 512
        },
        medium: {
            height: 240,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_medium",
            width: 320
        },
        small: {
            height: 27,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_small",
            width: 36
        }
    }
}
```

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/attachment-field.svg
[npm]: https://www.npmjs.com/package/@cmds/attachment-field
npm package: @pndr/button
Description: Used for displaying a button.
Latest version: 0.10.0

# button

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe button here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/checkbox-field
Description: Used for making a choice between yes and no.
Latest version: 0.6.0

# ![CheckboxField](https://user-images.githubusercontent.com/44801418/48109933-0f944f00-e27c-11e8-975c-deaa9baab76a.png) CheckboxField

[![npm package][npm-badge]][npm]

Used for making a choice between yes and no.

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| checked | Boolean | ✓ | Whether the checkbox is checked or not |
| onChange | Function |  | Callback invoked whenever the checkbox get's toggled. : `({id: string, checked: boolean}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/checkbox-field.svg
[npm]: https://www.npmjs.com/package/@cmds/checkbox-field
npm package: @pndr/collaborator-field
Description: Used for selecting a collaborator.
Latest version: 0.5.0

# ![CollaboratorField](https://user-images.githubusercontent.com/44801418/48109949-2d61b400-e27c-11e8-830e-29347fc455b0.png) CollaboratorField

[![npm package][npm-badge]][npm]

Used for selecting a collaborator.

## Getting started

````
npm install @cmds/collaborator-field --save
````
	
### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| collaborators | Array | ✓ | List of collaborators that can be selected |
| collaboratorId | String |  | Selected collaborator |
| onChange | Function |  | Callback invoked whenever a collaborator get's selected: `({id: string, collaboratorId: string}): void` |

````jsx harmony
import CollaboratorField from '@cmds/collaborator-field'

<CollaboratorField
    id={'fld1'}
    contextId={'recordGalleryCard'}
    roleId={'readOnly'}
    collaborators={[{
        id: 'col1',
        name: 'Luke Skywalker'
    }, {
        id: 'col2',
        name: 'Leia Organa'
    }]}
    collaboratorId={'col1'}
    onChange={({id, collaboratorId}) => {
        // do something
    }}
/>
````

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/collaborator-field.svg
[npm]: https://www.npmjs.org/package/@cmds/collaborator-field
npm package: @pndr/color-field
Description: Used for choosing a color
Latest version: 0.2.0

# color-field

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe color-field here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/colors
Description: Used for adding color to things.
Latest version: 0.4.0

# ![Colors](https://user-images.githubusercontent.com/44947294/48319379-dbd07500-e63f-11e8-9e11-42baa0ce1854.png) Colors

[![npm package][npm-badge]][npm]

Used for adding color to things.		

[npm-badge]: https://img.shields.io/npm/v/@cmds/colors.svg
[npm]: https://www.npmjs.org/package/@cmds/colors
npm package: @pndr/date-field
Description: Used for selecting a date and time.
Latest version: 0.10.0

# ![DateField](https://user-images.githubusercontent.com/44801418/48109955-3488c200-e27c-11e8-9cc6-2ef2fc314db6.png) DateField

[![npm package][npm-badge]][npm]

Used for selecting a date and time.	

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| dateFormatId | DateFormat | ✓ | Format in which the date should be displayed / edited. Valid options include: `european` or `friendly` or `local` or `us` |
| includeTime | Boolean | ✓ | Enables displaying / editing the time |
| sameTimeZone | Boolean | ✓ | Disabling this option will format the date to the local time. Enabling it will display the time the same (in UTC) regardless of the locale of the user. |
| timeFormatId | TimeFormat | ✓ | Display time in 12 or 24 hour notation. Valid options include: `12` or `24` |
| date | String |  | Date string in simplified extended ISO format (ISO 8601). Example: `2018-11-15T09:28:04.300Z` |
| onChange | Function |  | Callback invoked whenever the date get's changed. : `({id: string, date: string}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/date-field.svg
[npm]: https://www.npmjs.com/package/@cmds/date-field
npm package: @pndr/date-input
Description: Used for entering dates.
Latest version: 0.6.0

# DateInput

[![npm package][npm-badge]][npm]

Used for entering dates.

## Getting started

````
npm install @cmds/date-input --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| className | String |  | Add a className to the input |
| value | String | | Dates are handled as ISO String values: `2020-01-24T12:00:41.021Z` |
| disabled | Boolean |  | Disables input. Default: `false` |
| includeTime | Boolean |  | Whether or not to include time. Default: `true` |
| sameTimeZone | Boolean |  | Whether the user is editing an UTC date or their local date. Default: `false` |
| dateFormat | String |  | Which date format to use for date parsing. Default: `D/M/YYYY`. See Date Formatting.  |
| datePlaceholder | String |  | Which placeholder to use for the date input. Default: `dd/mm/yyyy`. See Date Formatting. |
| timeFormat | String | | Which time format to use for date parsing. Default: `HH:mm`. See Date Formatting. |
| timePlaceholder | String |  | Which placeholder to use for the time input. Default: `hh:mm`. See Date Formatting. |
| onChange | Function |  | Triggers when the date changes: `({value: string})` |

### Date Formatting

For date formats go to [https://momentjs.com](https://momentjs.com)

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/date-input.svg
[npm]: https://www.npmjs.org/package/@cmds/date-input
npm package: @pndr/demo-utils
Description: Used for presenting components.
Latest version: 0.3.0

# demo-utils

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe demo-utils here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/dialog
Description: Used for communicating information to the user and prompt them for a response.
Latest version: 0.2.0

# dialog

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe dialog here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/foreign-record-selector
Description: Used for selecting a foreign record
Latest version: 0.4.0

# ForeignRecordSelector

[![npm package][npm-badge]][npm]

Used for selecting a foreign record.	

## Getting started

````
npm install @cmds/foreign-record-selector --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this foreign record selector |
| query | String | | Search query to display inside the input |
| loading | Boolean | ✓ | Displays loading indicator instead of the results |
| noResults | Boolean | ✓ | Displays 'No matching records.' instead of the results |
| records | Array | ✓ | An array of record ids |
| createRecordName | Array |  | The name of the record created when the create new record button is click |
| onQueryChange | Function | ✓ | Triggers when the user updates the search query input: `({query: string})` |
| onCreateRecordClick | Function | ✓ | Triggers when the user clicks on the create new record button: `({e: ClickEvent})` |
| onCloseClick | Function | ✓ | Triggers when the user clicks on the close button: `({e: ClickEvent})` |
| onSelect | Function | ✓ | Triggers when the user clicks on one of the records displayed in the results: `({id: string, e: ClickEvent})` |
| recordRenderer | Function | ✓ | Responsible for rendering a record given the id to be displayed in the results: `({id: string, onClick: Function})` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/foreign-record-selector.svg
[npm]: https://www.npmjs.org/package/@cmds/foreign-record-selector
npm package: @pndr/gallery-view
Description: Used for displaying records as individual cards in a gallery.
Latest version: 0.8.0

# ![GalleryView](https://user-images.githubusercontent.com/44801418/48128406-f9f14a80-e2b8-11e8-9b19-f860d268f37a.png) GalleryView

[![npm package][npm-badge]][npm]

Used for displaying records as individual cards in a gallery.	

![GalleryView](https://user-images.githubusercontent.com/44947294/48402064-40cdbd00-e75d-11e8-9633-e52fd0217636.gif)
## Getting started

````
npm install @cmds/gallery-view --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this view |
| cardCount | Role | ✓ | The amount of cards to be rendered |
| cardHeight | Number | ✓ | Height of the cards |
| cardWidth | Number | | Width of the cards. Defaults to `240` |
| cardRenderer | Function |  | Callback invoked whenever one of the cards get's rendered: `({index: number}): jsx` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/gallery-view.svg
[npm]: https://www.npmjs.org/package/@cmds/gallery-view
npm package: @pndr/grid-view
Description: Used for displaying records in a grid like a spreadsheet.
Latest version: 0.4.0

# ![GridView](https://user-images.githubusercontent.com/44801418/48134118-91f82f80-e2cb-11e8-9928-c54c3d41015f.png) GridView

[![npm package][npm-badge]][npm]

Used for displaying records in a grid like a spreadsheet.

![GridView](https://user-images.githubusercontent.com/44947294/51593386-5b0cdf80-1ef2-11e9-8ce3-905b6754b2a6.gif)
## Getting started

````
npm install @cmds/grid-view --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this view |
| rowCount | Number | ✓ | The amount of rows to be rendered |
| rowGetter | Function | ✓ | Return row data for the index `({index: number})` |
| fieldRenderer | Function | ✓ | Callback invoked whenever one of the cells get's rendered: `({index: number}): jsx` |
| fields | Array | ✓ | Array of fields to be displayed as columns |

#### Field
| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the field |
| name | String | ✓ | Name to be displayed as column name |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/grid-view.svg
[npm]: https://www.npmjs.org/package/@cmds/grid-view
npm package: @pndr/icons
Description: Used for adding icons to things.
Latest version: 0.7.0

# Icons

[![npm package][npm-badge]][npm]

Used for adding icons to things.

## Getting started

````
npm install @cmds/icons --save
````

```jsx harmony
import Menu from '@cmds/icons/menu'

const Component = () => (
    <Menu width={100} />
)
```

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/icons.svg
[npm]: https://www.npmjs.org/package/@cmds/icons
npm package: @pndr/link-to-another-record-field
Description: Used for linking to a foreign record.
Latest version: 0.15.0

# ![LinkToAnotherRecordField](https://user-images.githubusercontent.com/44801418/48109947-2a66c380-e27c-11e8-864a-c77e7502d98a.png) LinkToAnotherRecordField

[![npm package][npm-badge]][npm]

Used for linking to a foreign record.	

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| recordCount | Number | ✓ | Number of records linked |
| recordGetter | Function | ✓ | Callback responsible for returning a data row given an index. `({index: int})` |
| recordRenderer | Function | ✓ | Responsible for rendering a linked record. `({key: int, onClick: fn, onUnlink: fn, recordData: any, roleId: string}): jsx`|
| onRecordClick | Function |  | Callback invoked whenever a linked record get's clicked: `({id: string, recordId: string}): void` |
| onRecordUnlink | Function |  | Callback invoked whenever the unlink button is clicked for a linked record.: `({id: string, recordId: string}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/link-to-another-record-field.svg
[npm]: https://www.npmjs.org/package/@cmds/link-to-another-record-field
npm package: @pndr/list-view
Description: Used for displaying records as individual items in a list.
Latest version: 0.8.0

# ![ListView](https://user-images.githubusercontent.com/44801418/48134187-d08dea00-e2cb-11e8-9466-8b05188ccf33.png) ListView

[![npm package][npm-badge]][npm]

Used for displaying records as individual items in a list.

![ListView](https://user-images.githubusercontent.com/44947294/51615784-ffaa1400-1f28-11e9-81d8-e1b97c169068.gif)
## Getting started

````
npm install @cmds/list-view --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this view |
| rowCount | Number | ✓ | The amount of rows to be rendered |
| rowGetter | Function | ✓ | Return row data for the index `({index: number})` |
| rowRenderer| Function | ✓ | Callback invoked whenever one of the rows get's rendered: `({index: number, }): jsx` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/list-view.svg
[npm]: https://www.npmjs.org/package/@cmds/list-view
npm package: @pndr/long-text-field
Description: Used for entering multiple lines of text.
Latest version: 0.14.0

# ![LongTextField](https://user-images.githubusercontent.com/44801418/48109954-32befe80-e27c-11e8-9848-d7e9860a4a8c.png) LongTextField

[![npm package][npm-badge]][npm]

Used for entering multiple lines of text.

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| longText | String | | Contents to be displayed / edited |
| onChange | Function |  | Callback invoked whenever the long text changes. : `({id: string, longText: boolean}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/long-text-field.svg
[npm]: https://www.npmjs.org/package/@cmds/long-text-field
npm package: @pndr/multiple-collaborator-field
Description: Used for selecting multiple collaborators.
Latest version: 0.4.0

# ![MultipleCollaboratorField](https://user-images.githubusercontent.com/44801418/48134212-ec918b80-e2cb-11e8-9dcc-da88a8e2ae37.png) MultipleCollaboratorField

[![npm package][npm-badge]][npm]

Used for selecting multiple collaborators.

## Getting started

````
npm install @cmds/multiple-collaborator-field --save
````
	
### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| collaborators | Array | ✓ | List of collaborators that can be selected |
| collaboratorIds | Array |  | List of selected collaborators |
| onCollaboratorLink | Function |  | Callback invoked whenever a collaborator get's added to the selection: `({id: string, collaboratorId: string}): void` |
| onCollaboratorUnlink | Function |  | Callback invoked whenever a collaborator get's removed from the selection: `({id: string, collaboratorId: string}): void` |

````jsx harmony
import MultipleCollaboratorField from '@cmds/multiple-collaborator-field'

<MultipleCollaboratorField
    id={'fld1'}
    contextId={'recordGalleryCard'}
    roleId={'readOnly'}
    collaborators={[{
        id: 'col1',
        name: 'Luke Skywalker'
    }, {
        id: 'col2',
        name: 'Leia Organa'
    }]}
    collaboratorIds={['col1']}
    onCollaboratorLink={({id, collaboratorId}) => {
        // do something
    }}
    onCollaboratorUnlink={({id, collaboratorId}) => {
        // do something
    }}
/>
````

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/multiple-collaborator-field.svg
[npm]: https://www.npmjs.org/package/@cmds/multiple-collaborator-field
npm package: @pndr/number-field
Description: Used for entering a number.
Latest version: 0.15.0

# ![NumberField](https://user-images.githubusercontent.com/44801418/48110162-0eafed00-e27d-11e8-8a56-3ac1067af758.png) NumberField

[![npm package][npm-badge]][npm]

Used for entering a number.

## Getting started

```
npm install @cmds/number-field --save
```

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| precisionId | NumberPrecision | ✓ | Display and edit `x` amount of numbers after the point. Precision ID of `2` will result in `2.25`. Valid options include `1` or `2` or `3` or `4` or `5` or `6` or `7` or `8`|
| allowNegativeNumbers | Boolean | ✓ | Enable displaying / editing negative numbers |
| numberFormatId | NumberFormat | ✓ | Whether the number should be displayed / edited as an integer or decimal. Valid options include `decimal` or `integer` |
| number | Number | | Number value |
| onChange | Function |  | Callback invoked whenever number changes: `({id: string, number: number}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/number-field.svg
[npm]: https://www.npmjs.org/@cmds/number-field
npm package: @pndr/number-input
Description: Used for entering numbers.
Latest version: 0.7.0

# NumberInput

[![npm package][npm-badge]][npm]

Used for entering numbers.

## Getting started

````
npm install @cmds/number-input --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String |  | Unique identifier for the field |
| className | String |  | Add a className to the input |
| value | String | | Number to be edited |
| allowNegative | Boolean |  | Allows the user to enter a negative number. Default: `false` |
| format | Format |  | `decimal` or `integer`. Default: `integer` |
| precision | Boolean |  | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`. Default: `2` |
| onChange | Function |  | Triggers when the value changes: `({id: string, value: string})` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/number-input.svg
[npm]: https://www.npmjs.org/package/@cmds/number-input
npm package: @pndr/popover-menu
Description: Used for displaying a menu with options to choose from
Latest version: 0.2.0

# popover-menu

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe popover-menu here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/progress-timeline
Description: Used for displaying a progress timeline.
Latest version: 0.5.0

# progress-timeline

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe progress-timeline here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/record-gallery-card
Description: Used for displaying a record as a gallery card.
Latest version: 0.18.0

# RecordGalleryCard

[![npm package][npm-badge]][npm]

Used for displaying a record as a gallery card.	

![RecordGalleryCard](https://user-images.githubusercontent.com/44947294/48668890-51e64780-eb2a-11e8-8ee8-152d780be21e.png)

## Getting started

````
npm install @cmds/record-gallery-card --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this record |
| name | String | ✓ | Name for the record |
| coverAttachments | Array | | Each attachment be displayed in a the card's cover as a carousel |
| coverFitTypeId | CoverFitType | | Either `crop` or `fit`. The images inside the cover will be either covered or contained, respectively |
| coverEnabled | Boolean | ✓ | Whether the cover should be displayed or not |
| fields | Array | ✓ | List of field objects containing the name and more information for each field. |
| visibleFieldOrder | Array | ✓ | A list of ids for the fields that need to be displayed and in which order |
| fieldHeightGetter | Function | ✓ | Responsible for returning the height for the field: `({field: object}): number` |
| fieldRenderer | Function | ✓ | Responsible for rendering a field given it's configuration: `({recordId: string, index: number, field: object}): jsx` [Learn more](#fieldRenderer) |
| onClick | Function | ✓ | Triggers when the user clicks the record gallery card: `({id: string, e: ClickEvent})` |

#### fieldRenderer

Responsible for rendering a field given it's configuration.

```jsx harmony
import SingleLineTextField from '@cmds/single-line-text-field'
// import all other fields that need to be supported...

const renderers = {
    singleLineText: ({props}) => (
        <SingleLineTextField
            {...props}
            text={'Luke Skywalker'}
            onChange={({id, text}) => {
                
                // store new value
            }}
        />
    ),
    // and all other fields that need to be supported
}

function fieldRenderer({id, index, field, props}) {

    const renderer = renderers[field.typeId]
    
    if (!renderer) {
        throw new Error(`Renderer for typeId '${field.typeId}' not found`)
    }
    
    /**
     * Note — props already contains properties
     * related to the context in which the field
     * gets rendered.
     * 
     * {
     *      id: 'fld1', // the field's id
     *      contextId: 'recordGalleryCard',
     *      roleId: 'readOnly'
     * }
     */
    
    return renderer({ 
        id, 
        field,
        props
    })
}
```

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/record-gallery-card.svg
[npm]: https://www.npmjs.org/package/@cmds/record-gallery-card
npm package: @pndr/record-list-item
Description: Used for displaying a record as a list item.
Latest version: 0.12.0

# RecordListItem

[![npm package][npm-badge]][npm]

Used for displaying a record as a list item.	

## Getting started

````
npm install @cmds/record-list-item --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| recordId | String | ✓ | Unique id for the instance of this record |
| primaryFieldId | String | ✓ | Used for rendering the value of the primary field as record name |
| fields | Array | ✓ | A list of fields |
| visibleFieldOrder | Array | ✓ | A list of ids for the fields that need to be displayed and in which order |
| fieldRenderer | Function | ✓ | Responsible for rendering a field given it's configuration: `({recordId: string, index: number, field: object}): jsx` [Learn more](#fieldRenderer) |
| onClick | Function | ✓ | Triggers when the user clicks the record list item: `({id: string, e: ClickEvent})` |

#### fieldRenderer

Responsible for rendering a field given it's configuration.

```jsx harmony
import SingleLineTextField from '@cmds/single-line-text-field'
// import all other fields that need to be supported...

const renderers = {
    singleLineText: ({props}) => (
        <SingleLineTextField
            {...props}
            text={'Luke Skywalker'}
            onChange={({id, text}) => {
                
                // store new value
            }}
        />
    ),
    // and all other fields that need to be supported
}

function fieldRenderer({recordId, index, field, props}) {

    const renderer = renderers[field.typeId]
    
    if (!renderer) {
        throw new Error(`Renderer for typeId '${field.typeId}' not found`)
    }
    
    /**
     * Note — props already contains properties
     * related to the context in which the field
     * gets rendered.
     * 
     * {
     *      id: 'fld1', // the field's id
     *      contextId: 'recordListItem',
     *      roleId: 'readOnly'
     * }
     */
    
    return renderer({ 
        recordId, 
        field,
        props
    })
}
```

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/record-list-item.svg
[npm]: https://www.npmjs.org/package/@cmds/record-list-item
npm package: @pndr/segmented-control
Description: Used two make a choice between a set of options
Latest version: 0.4.0

# segmented-control

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe segmented-control here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/select
Description: Used for selecting one option from a list of options.
Latest version: 0.11.0

# Select

[![npm package][npm-badge]][npm]

Used for selecting one option from a list of options.

## Getting started

````
npm install @cmds/select --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| clearable | Boolean |  | Whether the user can clear the selected option |
| noOptionsRenderer | Function | | Responsible for the empty state for the option list |
| optionRenderer | Function | | Responsible for rendering a custom version of the option `({option: object, inList: boolean}): jsx` |
| alignLeft | Boolean |  | Whether the dropdown should align left |
| value | String | | Selected option |
| options | Boolean | ✓ | List of options to choose from. |
| onChange | Function | ✓ | Triggers when the selection value changes: `({id: string, value: string})` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/select.svg
[npm]: https://www.npmjs.org/package/@cmds/select
npm package: @pndr/sidebar
Description: Used for displaying a standard application sidebar.
Latest version: 0.9.0

# Sidebar

[![npm package][npm-badge]][npm]

Used for displaying a standard application sidebar.

## Getting started

````
npm install @cmds/sidebar --save
````

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/sidebar.svg
[npm]: https://www.npmjs.org/package/@cmds/sidebar
npm package: @pndr/single-line-text-field
Description: Used for entering a single line of text.
Latest version: 0.13.0

# ![SingleLineTextField](https://user-images.githubusercontent.com/44801418/48109583-9c3e0d80-e27a-11e8-947b-0a44998bc403.png) SingleLineTextField

[![npm package][npm-badge]][npm]

Used for entering a single line of text.

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| text | String |  | Single line of text to be displayed / edited |
| onChange | Function |  | Callback invoked whenever the text changes. : `({id: string, text: string}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/single-line-text-field.svg
[npm]: https://www.npmjs.org/@cmds/single-line-text-field
npm package: @pndr/single-select-field
Description: Used for selecting a single option from a list.
Author: keyflight
Latest version: 0.13.0

# ![SingleSelectField](https://user-images.githubusercontent.com/44801418/48109944-25097900-e27c-11e8-83ed-be6379428ced.png) SingleSelectField

[![npm package][npm-badge]][npm]

Used for selecting a single option from a list.	

## Getting started

````
npm install @cmds/single-select-field --save
````

````jsx harmony
<SingleSelectField
    id={'fld1'}
    contextId={'recordGalleryCard'}
    roleId={'readOnly'}
    optionId={'opt5'}
    options={{
        options: ['opt1', 'opt2', 'opt3', 'opt4', 'opt5', 'opt6'],
        optionsById: {
            'opt1': {
                id: 'opt1',
                colorId: 'blue.base',
                name: 'Blue'
            },
            'opt2': {
                id: 'opt2',
                colorId: 'green.base',
                name: 'Green'
            },
            'opt3': {
                id: 'opt3',
                colorId: 'red.base',
                name: 'Red'
            },
            'opt4': {
                id: 'opt4',
                colorId: 'yellow.base',
                name: 'Yellow'
            },
            'opt5': {
                id: 'opt5',
                colorId: 'indigo.base',
                name: 'Indigo'
            },
            'opt6': {
                id: 'opt6',
                colorId: 'purple.base',
                name: 'Purple'
            }
        }
    }}
    onChange={({id, optionId}) => {
       // do something 
    }}
/>
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String | ✓ | Unique id for the instance of this field |
| contextId | Context | ✓ | The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem` |
| roleId | Role | ✓ | The behaviour changes based on the role. Valid options include `editor` or `readOnly` |
| options | Object | ✓ | Object that holds each option by it's id. Each option should have an `id`, `name`, `colorId` (optional) |
| optionOrder | Array | ✓ | Should reference all options in the preferred order |
| coloredOptions | Boolean | ✓ | Enables coloring for options |
| optionId | String | | Selected option |
| onChange | Function |  | Callback invoked whenever an option get's selected: `({id: string, optionId: string}): void` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/single-select-field.svg
[npm]: https://www.npmjs.org/package/@cmds/single-select-field
npm package: @pndr/spinner
Description: Used as a loading indicator
Latest version: 0.3.0

# spinner

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe spinner here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @pndr/switch
Description: Used for making a choice between yes and no.
Latest version: 0.5.0

# Switch

[![npm package][npm-badge]][npm]

Used for making a choice between yes and no.

## Getting started

````
npm install @cmds/switch --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String |  | Unique identifier for the field |
| className | String |  | Add a className to the component |
| value | String | ✓ | Checked / unchecked value |
| width | Number |  | Set the width of the switch. Default: `46` |
| disabled | Boolean |  | Prevents the user from toggling the switch. Default: `false` |
| onChange | Function |  | Triggers when the value changes: `({id: string, value: string})` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/number-input.svg
[npm]: https://www.npmjs.org/package/@cmds/number-input
npm package: @pndr/text-input
Description: Used for entering a single line of text.
Latest version: 0.6.0

# TextInput

[![npm package][npm-badge]][npm]

Used for entering a single line of text.

## Getting started

````
npm install @cmds/text-input --save
````

### Prop Types

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| id | String |  | Unique identifier for the field |
| className | String |  | Add a className to the input |
| value | String | | Text to be edited |
| onChange | Function |  | Triggers when the value changes: `({id: string, value: string})` |

### More information

This component is designed and developed as part of [Cosmos Design System][cmds]. 

[cmds]: https://github.com/entercosmos/cosmos
[npm-badge]: https://img.shields.io/npm/v/@cmds/text-input.svg
[npm]: https://www.npmjs.org/package/@cmds/text-input
npm package: @pneugebala/require-as-array
Description: Requiring all files/directories in given path and returning an array.
Author: pneugebala
Latest version: 0.1.1

# require-as-array

[![Build Status](https://travis-ci.org/pneugebala/require-as-array.svg?branch=master)](https://travis-ci.org/pneugebala/require-as-array)

Requiring all files/directories in given path and returning an array.

### Installation:
```
npm install @pneugebala/require-as-array
```
or
```
yarn add @pneugebala/require-as-array
```


### Example:
```javascript
// Directory structure:
//
// entry
// ├───myModule1
// │   └───index.js
// ├───myModule2
// │   └───index.js
// ├───myModule3.js
// └───myModule4.js

const requireAsArray = require("require-as-array")

// Synchronously
const result = requireAsArray("./entry")
...

// Asynchronously
requireAsArray("./entry", (err, result) => {
  if (err)
    throw err
  else
    ...
})
```

Instead of a nested object, only an array with all required modules is returned.